Réalisation de sites web

Sommaire du site

Présentation
Comment apprendre
L'équipement
La page web
  Styles et CSS
  HTML, structure de la page
  HTML, éléments du corps
Le langage JavaScript
  JavaScript, objets "core"
  JavaScript, DOM, les bases
  JavaScript, DOM, node
  JavaScript, compléments
Le langage PHP, les bases
  PHP, fonctions utiles
  PHP pour le web
  PHP, compléments
SQL, introduction
  MySQL et PHP pour le web
  MySQL, plus loin...
Applications AJAX
Annexes utiles
  Fichier .htaccess
  Sécurité des sites web
  Conception d'un site web
  Référencement, syndication

Sommaire détaillé

Mentions légales.

Chapitres de cette page
Contenu  -> 

Page mise à jour le : 12-08-2015

Haut de la page

Présentation
L'objet "window"
L'objet "location"
L'objet "document"
Image
Evénements
A suivre...

JavaScript, DOM, les bases

Le JavaScript dans le web est bien adapté à manipuler les éléments HTML des pages HTML. Cette page décrit l'architecture HTML de la page, ses composants et leurs utilisations par le JavaScript.

Présentation

La structure d'objets du JavaScript est conforme à la structure de la représentation d'une page HTML. En effet un objet dispose de propriétés comme un élément HTML dispose d'attributs et (souvent) d'un contenu. Les méthodes des objets autorisent leur manipulation.

Cette page ne présente pas, l'ensemble des objets du DOM, ni toutes leurs propriétés et méthodes.
Elle indique l'essentiel à savoir qui est généralement suffisant  pour les applications classiques.

Un objet JavaScript peut aussi contenir un autre objet (c'est une sorte de propriété) alors qu'un élément HTML peut contenir un autre élément comme on le voit bien avec les tableaux qui contiennent des lignes contenant, elles-mêmes, des cellules.

Ainsi la page HTML est une structure hiérarchique d'éléments. Elle peut être représentée par un arbre où les branches accueilllent d'autres branches et ainsi de suite jusqu'aux feuilles qui en sont les éléments terminaux.

Le DOM (Document Object Model) donne une association  d'éléments HTML à des objets qui peuvent être manipulés par le JavaScript.

Pour des raisons "historiques" certaines propriétés et méthodes ont des comportements différents ou d'autres noms sous Internet Explorer. Cela sera indiqué au fil du texte.

L'objet "window"

L'objet "window" ne fait pas partie du DOM tel qu'il est défini par la W3C. En effet pour le DOM, l'objet de base (racine) est le document., c'est à dire le texte HTML de la page.
Toutefois, afin de gérer plus de possibilités d'interaction de l'utilisateur avec son navigateur d'autres objets (hors DOM) existent. Ils ont été définis dans le JavaScript avant les normalisations du DOM.
C'est donc le cas de "window", mais aussi de quelques autres moins utiles tels que "screen" ou "navigator".

C'est l'objet "racine" de la hiérarchie, il représente la fenêtre qui affiche la page.

Quand il désigne la fenêtre actuelle (celle du script), on l'utilise en indiquant son nom de type "window" (notez le singulier) car on désigne une seule fenêtre ou "self" ou, plus simplement, on n'indique rien car il n'y a pas d'ambiguïté.

Dans les exemples JavaScript des pages précédentes, on a souvent utilisé une méthode de cet objet : "alert()". Donc que l'on écrive :

    window.alert("Bonjour");
    self.alert("Bonjour");
    alert("Bonjour");

Cela produira le même effet.

Propriétés

En voici juste quelques unes

Nom de la fenêtre (HTML)

name; elle correspond au nom (HTML) de la fenêtre. Ce nom peut être défini en HTML pour les cadres internes (pages de cadres) ou dans l'attribut "target" d'un lien.

Cette propriété est utilisée lorsque l'application utilise plusieurs fenêtres (onglets ou cadres) de navigation.

Ce nom peut être modifié :

self.name= "fenetre_principale";

Taille fenêtre

innerHeight et innerWidth indiquent respectivement la hauteur et la largeur de la zone utile (affichable) de la fenêtre du navigateur.

Attention, pour Internet Explorer il faut utiliser : document.body.offsetHeight et  document.body.offsetWidth.

En général on teste l'existence de la propriété ainsi :

if (self.innerWidth) largeur= self.innerWidth; //Mozilla & co.
else if (document.body.offsetWidth) largeur= document.body.offsetWidth; //IE
else largeur= 100; //Au cas où rien de connu

Méthodes

Gestion de fenêtres

open(url, nom, configuration);
Ouvre une nouvelle (sous-)fenêtre soit un nouveau navigateur. et renvoie l'objet "window" représentant cette fenêtre.

"url" est l'adresse de la page à y placer; "nom" est le nom (HTML) donné à cette fenêtre (voir propriété 'name' au dessus).

"configuration" peut être absent. Dans ce cas, la fenêtre sera conforme à celle par défaut du navigateur.

Sinon il s'agit d'un texte donnant à chaque paramètre une valeur. Les paramètres doivent être séparés par une virgule.

Paramètre Valeur possible
(souligné= par défaut)
Rôle
height (en pixels) Hauteur de la  fenêtre.
width (en pixels) Largeur de la fenêtre.
left (en pixels) Position latérale du coin supérieur gauche de la  fenêtre.
top (en pixels) Position verticale du coin supérieur gauche de la  fenêtre.
location yes|no Indique si la fenêtre contiendra une barre d'adresse.
menubar yes|no Indique si la fenêtre contiendra une barre de menus.
resizable yes|no Indique si la fenêtre peut être redimensionnée par l'utilisateur.
scrollbars yes|no Indique si la fenêtre contiendra des barres de défilement en cas de besoin.
status yes|no Indique si la fenêtre contiendra une barre d'état.
toolbar yes|no Indique si la fenêtre contiendra une barre d'outils.

Exemple :

popup= open("t0.php", "FENETRE",
    "width=300,height=400, resizable=yes, scrollbars=yes");
popup.focus(); //Voir ci-dessous

focus();
Met au premier plan la fenêtre.

close();
Ferme la fenêtre. Attention cette méthode peut ne pas fonctionner si la fenêtre est la principale ou si elle a déjà un historique.

alert(message);
Ouvre une petite fenêtre qui affiche "message";

confirm(message);
Semblable à "alert()" mais une question "message" est posée. La méthode renvoie "false" ou "true" selon la réponse de l'utilisateur.

prompt(message, defaut);
Semblable à "alert()" mais affiche "message" et un champ de saisie initialement rempli à "defaut". Renvoie la valeur saisie.

setTimeout("instruction", delai);
Exécute "instruction" (qui doit être entre guillemets ou être une variable) après le délai "delai" (en millisecondes).
Cette méthode renvoie un objet "timeoutID" qui peut être utilisé pour stopper l'attente.

action= "alert('5 secondes sont passées');";
setTimeout(action, 5000);

clearTimeout(id_to);
Supprime un délai d'attente d'instruction identifié par le paramètre "id_to" initié par la méthode "setTimeout". Si "id_to" est invalide, il n'y a pas d'erreur de signifiée.

setInterval("instruction", periode);

Exécute "instruction" (qui doit être entre guillemets ou être une variable) répétitivement avec la périodicité "periode" (en millisecondes).
Cette méthode renvoie un objet "intervalID" qui peut (doit) être utilisé pour arrêter la répétition.

clearInterval(id_int);
Arrête la répétition d'instructions identifiée par le paramètre "id_int" initiée par la méthode "setInterval". 

L'objet "location"

Ce n'est pas non plus un véritable objet du DOM mais un sous-objet de "window".

Propriétés

Elles caractérisent l'adresse (au sens large) de la page. Elles peuvent toutes être modifiées.

href; est l'URL telle qu'elle figure dans la barre d'adresse du navigateur.

D'autre donnent la décomposition de cette adresse.

Considérons l'adresse suivante :

    http://srv.dom.fr:8080/rep/page.html?tst=22&rep=abc#ici

on aura, pour cet exemple, les propriétés :

protocol "http"
host "srv.dom.fr:8080"
hostname "srv.dom;fr"
port "8080"
pathname "/rep/page.htm"
search "?tst=22&rep=abc"
hash "#ici"

Méthodes

Il n'y en a que deux.

reload();
recharge la page, comme le bouton "actualiser" du navigateur;

replace(adresse);
charge une page d'adresse "adresse" mais cela n'est pas pris en compte dans l'historique du navigateur.

L'objet "document"

Cet objet caractérise le document HTML donc le "texte" de la page. Bien qu'il soit considéré comme un sous-objet de "window", c'est vraiment  la racine de l'arbre DOM.

Comme il n'y a qu'un seul document, il n'est pas nécessaire de créer une instance de cet objet et on utilise comme nom de "classe" "document".

Le DOM le nomme "interface document".

Propriétés

Beaucoup de propriétés concernent les couleurs (fond de page, texte, liens). Elles ne sont pas très utiles car il est préférable d'agir sur les styles.

En revanche, en voici une qui peut présenter un intérêt.

cookie

Il s'agit d'informations pouvant être conservées sur le poste de l'utilisateur. En effet, celui-ci peut configurer son navigateur pour que cet enregistrement ne soit pas réalisé. L'usage de cette propriété est donc un peu aléatoire.

La propriété 'cookie' est une chaîne de caractère organisée en éléments de la forme :

nom=valeur;

Pour placer un cookie, il suffit donc d'affecter une telle chaîne à la propriété "document.cookie".

La récupération d'un cookie est un peu plus compliquée car il peut y en avoir plusieurs. Il faut donc analyser la chaîne issue de la propriété "document.cookie" pour retrouver la valeur qui correspond au nom du cookie recherché.

Remarque : une page web ne peut obtenir que les cookies qui ont été déposés par le site qui contient la page.

La bibliothèque du PHP dispose de fonctions plus efficaces pour gérer les cookies : voir le paragraphe "Sessions et cookies" dans la page "PHP pour le web.

Méthodes

Ecrire dans la page

write(texte)
writeln(texte)

Elles écrivent  le contenu de "texte" à l'emplacement courant de la page. "writeln" le fait suivre s'un saut de ligne à condition d'être dans un élément HTML le gérant tel que "pre".

Attention. Si ces méthodes sont appelées depuis un lien JavaScript ou par un événement (voir plus bas), tout le document est effacé.

Pour écrire dynamiquement dans la page par le JavaScript, il est préférable d'utiliser les méthodes liées aux éléments HTML présentées à la page : éléments HTML (node).

Méthodes associées aux éléments HTML

Ces méthodes sont très importantes car elles permettent de gérer les éléments HTML de la page.

Toutefois, les actions sur les éléments (comme objets) ne font pas partie de la classe "document". Elles seront vues dans la page traitant des éléments HTML (node) du modèle DOM-JavaScript.

Obtenir des objets éléments HTML

getElementById(id);

Renvoie l'objet élément HTML dont l'identifiant est "id". Normalement, il n'y en a qu'un dans le document.

getElementsByName(nom);

Renvoie un tableau d'objets éléments HTML dont le nom est "nom". Il peut y en avoir plusieurs  dans le document (notez le 's' à la fin de "element").

ATTENTION. Sous Internet Explorer cette méthode ne fonctionne correctement que pour les éléments de formulaire.

getElementsByTagName(element);

Renvoie un tableau d'objets éléments HTML de type "element" (nom de balise). Il peut y en avoir plusieurs  dans le document (notez le 's' à la fin de "element").

Un exemple complet :

<body>
<script type="text/javascript">
<!--
function active() {
e= document.getElementById("rue");
e.align= "right";

le= document.getElementsByName("ville");
le[0].style.color= "red"; //Ne fonctionne pas correctement avec IE

te= document.getElementsByTagName("h3");
for (i=0; i < te.length; i++)
    te[i].style.backgroundColor= "green";
}
//-->
</script>

<h3>Adresse</h3>
<p id="rue">12, rue de la paix</p>
<p name="ville">Lyon</p>
<h3>Fin adresse</h3>
<a href="javascript:active()">Action</a>
</body>

Commençons par regarder le code HTML du bas. On y trouve un paragraphe de titre niveau 3 contenant "Adresse", un paragraphe identifié "rue", un paragraphe nommé "ville" et un autre titre de niveau 3.

Le lien "javascript:active()" lance la fonction "active()" présentée en haut de l'exemple.

Cette fonction réalise trois actions :

On remarquera que le attribut d'un élément en est une propriété dont le nom est celui de l'attribut.
L'attribut "style" est lui-même un objet disposant de propriétés.

On remarquera, notamment avec "backgroundColor" que le nom des propriétés de style diffère sensiblement du nom dans la feuille de style CSS.

La règle de conversion est assez simple :

Ainsi "background- color" devient "backgroundColor".

Création de composants HTML

createElement(element);

Crée un nouvel élément HTML de type "element". Attention cet élément n'est pas (encore) relié à la page, donc il ne se voit pas.

createAttribute(nom);

Crée un attribut de nom "nom" sans valeur qui devra ensuite être rattaché à un élément.

createTextNode(texte);

Crée un texte "texte" à relier à un élément.

Voici un exemple  qui crée un élément paragraphe, lui met un attribut centré et un contenu "Bonjour", puis l'insère dans un élément 'div'.

Il utilise des méthodes d'élément (node) qui sont précisées dans le listing ci-dessous.

<script type="text/javascript">
<!--
function active() {

nouveau= document.createElement('p');

contenu= document.createTextNode('Bonjour');
nouveau.appendChild(contenu); //relie 'contenu' à 'nouveau'

attribut= document.createAttribute('align');
attribut.nodeValue = "center"; //donne la valeur de l'attribut
nouveau.setAttributeNode(attribut); //affecte 'attribut' à 'nouveau'

elt= document.getElementById("test");
elt.appendChild(nouveau); //relie 'nouveau' à 'test' (div)
}
//-->
</script>
<div id="test"> </div>
<a href="javascript:active()">Action</a>

Ces méthodes sur les éléments HTML seront vues dans la page traitant des éléments HTML (node) du modèle DOM-JavaScript.

Au sujet des formulaires.

Il existe une autre façon (plus traditionnelle) d'accéder par le JavaScript aux éléments des formulaires en utilisant le nom du formulaire et celui de l'élément.

<form name="identite">
    Votre nom <input type"text" name="nom" value="">

Depuis le JavaScript on obtiendra le nom par :
    document.identite.nom.value


Image

Il s'agit d'un type d'objet destiné à contenir une image telle que l'élément HTML 'img'. On crée un objet de ce type par instanciation :
une_image= new Image();

Et ensuite, on peut utiliser comme propriétés les attributs de l'élément HTML 'img' :
une_image.src="mon_image.jpg";

Dans la pratique, ces objets servent surtout à pré-charger dans le cache du navigateur des images qui seront affichées dans la page par des actions du JavaScript.

Evénements

Les événements sont produits par action de l'utilisateur (souris, clavier) ou par le navigateur.

Il est possible d'intercepter les événements sur un élément HTML pour réaliser une action (instruction JavaScript).

Voici la liste des principaux événements disponibles.

L'événement se produit si
abort   l'utilisateur stoppe le chargement de la page
load  le navigateur vient de terminer le chargement de la page
unload l'utilisateur quitte la page
focus l'élément est activé
blur l'élément est quitté
change  l'élément est modifié (champ de formulaire)
reset le formulaire est réinitialisé
select du texte est sélectionné (champ de formulaire)
submit  l'utilisateur envoie le formulaire
click  un clic souris
dblclick  un double-clic
mousedown la touche de souris est maintenue appuyée
mousemove  la souris est déplacée
mouseout  la souris quitte l'élément
mouseover  la souris arrive sur l'élément
mouseup  un bouton de souris est relâché
keydown  une touche clavier est enfoncée
keypress  une touche clavier est maintenue enfoncée
keyup  une touche clavier est relâchée

Interception d'un événement

Il y a trois façons d'intercepter un événement.

Par la méthode "addEventListener" de l'élément.

addEventListener(evt, action,  capture)
"evt" est l'événement, "action" l'instruction JavaScript à éxécuter, "capture" indique si l'événement doit être retransmis (généralement on utilise false).

Cette méthode est celle préconisée par le DOM. Elle est cependant à éviter car elle n'est pas reconnue par Internet Explorer.

En associant à l'élément une propriété "attribut d'événement" 

element.onevenement = fonctionJS
L'attribut "onevenement" est le nom d'événement préfixé par "on".
"fonctionJS" est le nom d'une fonction définie par l'utilisateur sans ses parenthèses.

En plaçant l'événement comme attribut dans l'élément

onevenement= fonctionJS(param)

C'est la technique la plus utilisée, il est possible ainsi de passer des paramètres à la fonction. Dans ce cas aussi on utilise le nom de l'événement préfixé par "on".
Comme il s'agit de code HTML (non JavaScript) le "onevenement" ne différencie pas les majuscules des minuscules.

Exemple :

<p onClick="alert('Oui')">Cliquez ici</p>

Informations de l'événement

L'événement est un objet qui dispose de propriétés (variables selon les événements et selon les navigateurs). La fonction interceptant l'événement obtient cet objet comme premier paramètre.

Dans le cas de l'événement placé comme attribut d'un élément, il faudra utiliser dans les parenthèses de la fonction la variable "event" pour que la transmission soit réalisée.

Exemple complet (ne fonctionne pas sous Internet Explorer)

<head>
<title>Test</title>
<script type="text/javascript">
<!--
elt_zone= null; //pour utilisation ultérieure

function clic (evt) {
    alert("clic "+evt.ctrlKey);
}

function survol (evt) {
    alert("survol "+evt.clientX+" "+evt.clientY);
}

function touche (evt, val) {
    alert("touche "+evt.which+ " :"+val);
}

function initialise () {
  el_zone= document.getElementById("zone");
  el_zone.addEventListener( "mouseover", survol, false );
  el_zone.onclick= clic;

}
//-->
</script>
</head>
<body onload="initialise()">
<span id="zone">Cliquez ici !</span>
<input type="text" value="" onkeyup="touche(event, this.value)">
</body>

A suivre...

Un exemple de synthèse à tester et à voir (ouvrir le source depuis le navigateur, il est commenté).

Une référence bien plus complète du DOM (en français) se trouve sur le site de Mozilla :
https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_du_DOM_Gecko

Il nous reste à voir les propriétés et méthodes liées aux éléments HTML
DOM node