JavaScript/Introduction au DHTML

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Présentation du DHTML

Le DHTML (Dynamic Hypertext Markup Language) est apparu aux alentours des années 1990. Il s'agit en fait de la possibilité de rendre une page HTML interactive et ce grâce au JavaScript. Cependant, le DHTML a un gros défaut : il n’est pas compatible partout et certains navigateurs, trop anciens, ne le reconnaissent pas.

Premier code en DHTML

Le DHTML sert le plus souvent à contrôler et rendre les éléments d'une page Web interactifs. C’est son intérêt majeur : il permet de changer le style d'une balise sans recharger la page (changer la valeur d'un champ de texte...).

Voici un premier code assez simple à comprendre qui permet de changer la valeur d'un champ de texte :

document.mon_formulaire.mon_textfield.value = "Salut tout le monde !";

Comment dit dans le chapitre II; il s'agit avant tout d'une hiérarchie entre les éléments et vous allez voir qu’à force de pratiquer DHTML, on ne s'en rend même plus compte :)

Les évènements

Les évènements sont de loin la base du DHTML. Sans eux, le DHTML n'aurait plus aucune possibilité.

Qu'est-ce qu'un évènement en DTHML ?

C'est par exemple lorsque vous cliquez sur un lien, que vous fermez une fenêtre, que vous cliquez sur un bouton ou encore lorsque tout bêtement la page se charge. Toute cette liste (et elle est encore très longue) sont des évènements qu'on peut relever en JavaScript (pour ne pas dire DHTML évidemment).

Traquer un évènement

La question désormais qui se pose est comment détecter un nouvel évènement sur la page.

La réponse est assez simple : tout simplement en JavaScript. En effet, le langage est doté de plusieurs écouteurs d'évènements. Chacun d'eux permet de détecter un type d'évènement. Et tous ces écouteurs s'incrustent directement dans les balises HTML concernées. Voici la liste des évènements les plus récurrents :

Tous les évènements commencent par le préfixe on suivit de l'action qui s'exécute.

Liste des écouteurs

Évènement JS	Description
onabort	Se déclenche lorsque l'utilisateur stoppe le chargement de la page.
onblur	Se déclenche lorsqu'un élément de la page perd le focus (lorsque l'utilisateur clique ailleurs).
onchange	Se déclenche à chaque fois que la valeur d'un champ de donnée voit sa valeur modifiée.
onclick	Se déclenche lorsque l'utilisateur clique sur l'élément en question.
ondblclick	Se déclenche lorsque l'utilisateur double-clique sur l'élément en question.
ondragdrop	Se déclenche lorsque l'utilisateur glisse et dépose (drag and drop) un objet.
onerror	Se déclenche lorsqu'une erreur apparaît sur la page (JavaScript 1.1).
onfocus	Se déclenche lorsque l'utilisateur donne le focus à un élément (il clique dessus).
onkeydown	Se déclenche lorsque l'utilisateur appuie une touche du clavier (JavaScript 1.2).
onkeypress	Se déclenche lorsque l'utilisateur maintient une touche du clavier enfoncée.
onkeyup	Se déclenche lorsque l'utilisateur relâche une touche du clavier (JavaScript 1.2).
onload	Se déclenche lorsque l'utilisateur charge la page.
onmousedown	Se déclenche lorsque l'utilisateur appuie sur un bouton de sa souris au-dessus d'un élément de la page.
onmouseout	Se déclenche lorsque l'utilisateur ne survole plus un élément de la page (JavaScript 1.1).
onmouseover	Se déclenche lorsque l'utilisateur survole un élément de la page.
onmouseup	Se déclenche lorsque l'utilisateur arrête d'appuyer sur un bouton de sa souris au-dessus d'un élément de la page.
onreset	Se déclenche lorsque l'utilisateur clique sur un input de type reset (réinitialisation d'un formulaire).
onresize	Se déclenche lorsque l'utilisateur redimensionne la fenêtre actuelle.
onselect	Se déclenche lorsque l'utilisateur sélectionne un texte dans un champ de type text ou textarea.
onsubmit	Se déclenche lorsque l'utilisateur soumet un formulaire (soit par un bouton à cliquer soit avec la touche [enter]).
onunload	Se déclenche lorsque l'utilisateur quitte la page actuelle.

Exemple

Par exemple, si vous voulez dire bonjour au visiteur lorsque celui-ci charge une page de votre site, vous devrez procéder de la sorte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body onload="direBonjour();">
</body>
</html>

On aurait évidemment pu mettre le alert directement dans l'évènement sans créer une fonction. On pourrait ajouter l'évènement onunload qui se déclenche à la fermeture de la page pour appliquer une fonction direAuRevoir() par exemple. Mais cela suffit pour l'exemple.

Reconnaissance à la volée

N'importe quel évènement peut aussi être reconnu "à la volée". C'est-à-dire directement depuis la balise <script>. Par exemple, voici un code analogue à l'exemple précédent :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
window.onload = direBonjour;

function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body>
</body>
</html>

Avec ce code, vous pouvez donc gérer vos évènements depuis le header de votre page. Cela peut être pratique pour s'y retrouver plus facilement.

Méthodes de caractérisation

Voici trois méthodes intéressantes pour cibler un élément du DOM dans votre page Web.

• getElementById
• getElementsByName
• getElementsByTagName

getElementById

Cette méthode permet d'accéder aux propriétés d'un élément de votre page (par exemple un lien, une image ou un paragraphe) juste en fournissant l'id de celui-ci. Voyons un exemple simple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function supprimerTexte (id_zone) {
  if (document.getElementById) {
    document.getElementById(id_zone).innerHTML = '';
  }
}

</script>
</head>

<body>

<span id="mon_texte">Bonjour le monde...</span>

<p align="center">
<a href="javascript: supprimerTexte('mon_texte');">Supprimer le texte de cette page</a>
</p>

</body>
</html>

La propriété innerHTML vous permet d'éditer le contenu de l'élément de la page que vous avez désigné. Cependant, si vous voulez éditer un champ de texte, vous devrez utiliser directement l'attribut value ou encore si vous souhaitez cocher une case, vous utiliserez l'attribut checked. Vous pouvez absolument récupérer le contenu de toute balise du code HTML avec getElementById et en modifier les attributs : style, valeur, etc. Par exemple, pour changer l'image affichée par une balise img, vous n'aurez qu’à utiliser :

var image = document.getElementById('mon_image');

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
image.src = new_image.src;

Donc si vous prenez ce code et ce que vous avez appris sur les évènements vous pouvez aisément faire un système permettant de changer une image au passage de la souris (onMouseOver, onMouseOut).

getElementsByName

Cette méthode est semblable à getElementById bien qu'elle soit largement moins utilisée que la première. En fait, celle-ci fonctionne comme getElementById sauf qu'elle se base sur l'attribut name des balises au lieu de se baser sur leur id. Comme plusieurs éléments de la page Web peuvent avoir la même valeur d'attribut name, la méthode ne retournera pas un seul élément, mais une collection d'éléments sous forme de tableau (array). Ceci même dans le cas où un seul élément porte le nom recherché (tableau avec une seule valeur). Pour se souvenir de ce comportement, notez bien le "s" de "Elements" dans le nom de la méthode.

En reprenant l'exemple précédent, on aurait :

// On recherche tous les éléments dont la valeur de l'attribut "name" est égale à "mes_images"
var images = document.getElementsByName('mes_images');
var old_image = images[0]; // si l’on prend la première de la collection

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;

getElementsByTagName

Cette méthode fonctionne comme "getElementsByName" sauf qu'elle se base sur la balise des éléments recherchés, et non sur la valeur d'un attribut.

Avec le même exemple, on aurait :

// On recherche toutes les balises "IMG" (nota: on peut aussi écrire "img")
var images = document.getElementsByTagName('IMG');
var old_image = images[0]; // si l’on prend la première de la collection

// Mise en cache de la nouvelle image
var new_image = new Image();
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;