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 :

Propriétés

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.

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.

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.

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

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.

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.

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"

Propriétés

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

Méthodes

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".

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.

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 :

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

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

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.

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").

<body>
<script type="text/javascript">

</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.

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 :

on part du nom du style CSS, si un trait d'union est présent dans le nom on le supprime et on met en majuscule la première lettre du mot suivant.

Ainsi "background- color" devient "backgroundColor".

Création de composants HTML

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.

Crée un attribut de nom "nom" sans valeur qui devra ensuite être rattaché à 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.

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).

Interception d'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

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.

<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">

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

A suivre...

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

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.

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

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