Comme vous avez lu les sous-sections HTML et JavaScript de la section Programmation de mon site web, je peux maintenant vous parler de DHTML: DHTML est une technologie qui consiste à utiliser HTML et JavaScript de façon simultanée pour avoir des pages animées et interactives. C'est l'acronyme pour Dynamic HTML (HTML dynamique).

PEUT-ON L'UTILISER AUTREMENT ?

Même si ça reste un peu hors contexte, je pense qu'il est important de savoir que le HTML et le JavaScript peuvent être utilisées pour autre chose que du DHTML: le HTML peut être utilisé pour décrire n'importe quel formattage de page. JavaScript peut être utilisé pour toute sorte de tâche automatisée (voir toute la page Microsoft Windows Scripting) et en effet j'utilise JScript pour faire des tâches de réorganisation mensuelles sur mon PC.

HTML VERS JAVASCRIPT

Appeler JavaScript à partir d'une page HTML est plutôt simple: la première façon est d'utiliser les liens classiques, pour ceci il suffit de la faire commencer avec javascript:. Par exemple: <a href=javascript:window.alert("salut")> (pour l'essayer cliquez sur le lien).

Mais, il est important de savoir que le HTML nous offre nettement plus intéressant que ceci: l'appel à base d'événements. Un événement est une chose qui se passe sur la page. Ça peut par exemple être le fait que la page ait terminé de charger (onLoad), qu'elle va être fermée d'ici peu (onBeforeUnload), la souris qui passe sur (onMouseOver), arrête de passer sur (onMouseOut) ou clique (onClick) un élément (cet élément peut être une couche, une image ou encore un tableau). Ces événements peuvent être sur tout le document (les événements du genre onLoad, onUnLoad, onBeforeUnload, onMouseMove, les événements clavier comme onKeyDown et onKeyUp ou encore les événements de redimensionnement et de glissement comme onResize et onScroll) ou sur un élément particulier. On peut, grâce à ceci, par exemple, changer la couleur d'un texte quand la souris passe par dessus:

<div onmouseover=this.style.color="#ff00ff" onmouseout=this.style.color="#000000">test</div>

Sur mon site web, tout événement de souris comme MouseDown et MouseUp (quand vous redimensionnez ou bougez les fenêtres) ou les événements MouseOver (pour les icones du bas, donc le dock) sont redirigés vers des fonctions JavaScript qui font fonctionner le gestionnaire de fenêtres de mon site...

DE JAVASCRIPT VERS HTML

En HTML, vous pouvez donner des noms à tout élément (images, tableaux et calques): pour ceci, vous pouvez utiliser la propriété id:

<div id="ali">test</div>

Puis, cet élément peut être accédé en utilisant la fonction JavaScript appelée getElementById. On peut donc changer la couleur du texte de la calque en haut en utilisant le calque en bas:

<div onmouseover=getElementById("ali").style.color="#ff00ff" onmouseout=getElementById("ali").style.color="#000000">test</div>

ENCORE PLUS QUE DES SITES WEB...

Mon site est codé entièrement en utilisant DHTML, ce qui montre en gros la puissance de cette méthode. Mais, encore plus important: le gestionnaire de fenêtres de mon site fait un peu moins de 500 lignes, alors que des gestionnaires de fenêtres écrites en C++ avec des fonctionnalités équivalentes ont en moyenne des dizaines même voir centaines de milliers de lignes de code! Cet observation marche très bien pour d'autres types d'applications (par exemple un gestionnaire d'images): utiliser le DHTML peut simplifier beaucoup le travail du programmeur (même si le DHTML est nettement plus lent que du code natif C++). C'est pour ceci que Microsoft fournit la classe CHtmlView et rend possible l'integration d'interfaces DHTML dans les applications C++ / Basic.

ECRIRE DU DHTML DE FAÇON CONFORTABLE

Il y a deux genres de logiciels pour écrire du code DHTML d'une façon simple: les éditeurs texte avancés et les éditeurs DHTML. Les éditeurs de texte avancés, comme Notepad++ que vous pouvez trouver dans la section Téléchargements de mon site, marquent (en utilisant des couleurs) les divers mots clés HTML et JavaScript donc simplifient la lecture de code. Les éditeurs DHTML, comme Microsoft FrontPage et Visual Web Developper -tous les deux ont des versions Express, donc gratuites- ou encore l'éditeur de Mozilla, peuvent vous aider au sens où ils colorient le code mais aussi complètent les mots quand vous appuyez sur CTRL et espace en même temps, listent toutes les propriétés des éléments et même des fois génèrent du code automatiquement! Les deux genres vous seront très utiles pour le dévoloppement d'applications DHTML, et vous trouverez des liens pour télécharger deux de ces logiciels (mes préférés: Notepad++ et Microsoft Visual Studio Express) dans la section Téléchargements de mon site.