Premiers effets

I. Généralités

1. Qu'est-ce que le DOM ?

Le DOM, ou Document Object Model est un standard du W3C désignant l'ensemble des techniques permettant à un langage de script (comme JavaScript) d'accéder au contenu d'un document balisé (comme par exemple une page (X)HTML).

2. À quoi cela sert-il ?

· Le HTML « standard » est statique. La page est chargée sur le navigateur de l'internaute, et son affichage est défini une fois pour toutes. Si l'on revient sur cette page un autre jour, elle n'aura pas changé d'aspect. On peut considérer que le DOM permet d'aller au-delà de cet aspect statique.

· Mais ajouter des animations à une page est un acte gratuit et inutile si cela n'apporte rien à l'internaute. Le JavaScript permet d'augmenter le niveau d'interactivité de l'utilisateur, voire de concevoir des applications en ligne.

· Ces animations supplémentaires ne sont traitées que sur la machine de l'internaute, ce qui allège d'autant les charges reposant sur le serveur.

3. Quelles sont les techniques mises en jeu ?

Le DOM est la conjonction d'un ensemble de techniques, qui sont supportées par les plus récentes versions des navigateurs (partiellement à partir de la version 4 d'Internet Explorer et 5 d'Opéra, des versions 4 de Netscape ; presque totalement et de manière « compatibilisable » à partir des versions 6, ainsi que toutes les versions de Mozilla).

1. une vue orientée objet de la page web et de ses éléments. Chaque élément <tag id="id_du_tag"> blabla </tag> est identifié par son identifiant (l'attribut id) et accessible de manière univoque. De plus, la structure entière de la page peut être représentée sous la forme d'une arborescence, permettant l'accès direct (et la modification) à chacun de ses éléments. C'est à proprement parler cette structure qui constitue le DOM du W3C.

2. l'appel systématique aux feuilles de style (les CSS) qui permettent une modification précise de l'apparence de chacun des éléments.

3. le recours éventuel à des langages de script pour la gestion des événements. Nous nous limiterons au JavaScript, mais cela pourrait être du VBscript.

II. Les premiers effets

1. Attributs de gestion d'événements

a. Introduction

La gestion d'événements est un processus complexe si on veut pouvoir tirer parti de toutes les possibilités offertes par le DOM. Fort heureusement, lorsqu'il s'agit de coder un effet simple, destiné à n'être utilisé que ponctuellement dans un fichier, il est possible de faire appel aux attributs définis dans la recommandation HTML.

b. Les attributs

Ces attributs définis dans la recommandation du W3C sont suffisants pour la gestion des événements de base. On trouve :

· Les attributs de gestion des boutons de la souris : onclick et ondblclick permettent la prise en compte d'un clic simple ou d'un double clic, tandis que onmousedown et onmouseup détectent si un bouton de la souris a été enfoncé ou relaché.

· Les attributs de gestion des déplacements de la souris : onmouseover et onmouseout détectent si la souris passe sur la boîte de l'élément courant, ou bien la quitte.

· Les attributs de gestion du clavier : onkeypress, onkeydown et onkeyup détectent respectivement si l'utilisateur a appuyé puis relaché, simplement appuyé, ou relaché une touche du clavier.

2. Modification des propriétés de style

a. Introduction

Il est possible de modifier localement les propriétés de style d'un élément. On fait alors appel à l'objet courant this en JavaScript. En voici quelques exemples :

<p onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'"> Ceci est un texte dont la couleur va changer au passage de la souris. </p>

<p style="position: absolute; left: 10px; top: 230px; width:400px" onmouseover="this.style.left='100px'; this.style.top='300px'; this.style.width='600px'; this.style.textAlign='center'" oumouseout="this.style.left='10px'; this.style.top='230px'; this.style.width='400px'; this.style.textAlign='left'">Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. </p>

Noter dans l'exemple précédent l'utilisation de majuscules pour éviter d'utiliser le tiret présent dans la propriété CSS, mais qui a un sens différent en JavaScript, puisqu'il permet d'effectuer une soustraction.

Il y a une autre exception, avec la propriété float : elle est accessible via la propriété this.styleFloat pour Internet Explorer, et this.style.cssFloat pour les autres navigateurs.

Exercice 1. Modification de la couleur

Énoncé

Correction

Exercice 2. Déplacement d'élément

Énoncé

Correction

Exercice 3. Modification de la police

Énoncé

Correction

3. Modification d'un attribut quelconque

Il est aussi possible de modifier d'une manière similaire n'importe quel attribut d'un élément.

Exercice 1. Modification de contenu

Énoncé

Correction

4. Utilisation des feuilles de style

On peut aussi utiliser directement les propriétés de feuille de style, sans faire appel aux attributs de gestion des événements, avec notamment la pseudo-classe hover. Malheureusement Internet Explorer jusqu'à la version 6 ne prend en charge cette pseudo-classe que sur l'élément a, contrairement aux recommandations du W3C.