Leçons de niveau 16

JavaScript/Introduction au DHTML

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
Introduction au DHTML
Icône de la faculté
Chapitre no 7
Leçon : JavaScript
Chap. préc. :Les fonctions
Chap. suiv. :Introduction à Prototype
fin de la boite de navigation du chapitre
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Introduction au DHTML
JavaScript/Introduction au DHTML
 », n'a pu être restituée correctement ci-dessus.

Présentation du DHTML[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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 ?[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

É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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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

  • getElementById
  • getElementsByName
  • getElementsByTagName

getElementById[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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;