Introduction au DHTML

Le DHTML sert à rendre les éléments d'une page Web interactifs. Il permet de changer le style d'une balise sans recharger la page, d'ajouter ou de supprimer des textes, des balises ou et leurs attributs avec le langage JavaScript.

source : extraits commentés de wikiversity.org

Les évènements

Cliquer sur un lien, fermer une fenêtre, cliquer sur un bouton ou lorsque la page se charge sont des évènements qu'il est utile d'intercepter pour le cas échéant déclencher une action avec JavaScript.

Liste des détecteurs d'évènement JavaScript

onabort	Se déclenche lorsque l'utilisateur stoppe le chargement de la page.
onblur	un élément de la page perd le focus (l'utilisateur clique ailleurs).
onchange	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	l'utilisateur appuie sur un bouton de sa souris au-dessus d'un élément de la page.
onmouseout	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	l'utilisateur arrête d'appuyer sur un bouton de sa souris au-dessus d'un élément de la page. (Utilisé dans glisser déposer)
onreset	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	l'utilisateur sélectionne un texte dans un champ de type text ou textarea.
onsubmit	l'utilisateur soumet un formulaire (soit clique sur bouton soit touche [enter]).
onunload	Se déclenche lorsque l'utilisateur quitte la page actuelle.

Exemple : dire bonjour à l'ouverture de la page

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

Reconnaissance à la volée

N'importe quel évènement peut être intercepté "à la volée" depuis la balise <script>.

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

Total des visiteurs : 489408 dont aujourd'hui : 36 En ligne actuellement : 3 Total des clics 1233805