| > Développement - DHTML | SOURCE : http://www.esiea.fr/ |
[ RETOUR ]
Le Dynamic HTML (DHTML) est une évolution technique du HTML. Il permet de modifier dynamiquement le contenu des pages, ce qui permet une interaction avec l'utilisateur connecté au site. On a ainsi moyen de détecter plusieurs évènements et de réagir en conséquence. On peut ainsi par exemple changer une image quand l'utilisateur clique sur un bouton. Techniquement, il s'agit de "marier" HTML, Javascript et feuilles de styles...
Le DHTML est basé sur la gestion des évènements grâce au JavaScript.
Pour pouvoir exploiter le DHTML, il faut donc avoir des connaîssances
minimales dans la programmation en JavaScript. En fait, on associe des
réactions aux évènements. La connaîssance du fonctionnement des feuilles
de styles est un plus appréciable. Un des avantages principaux du DHTML
est de libérer de façon conséquence la charge du serveur. En effet, la
page interagit d'elle-même avec l'utilisateur, on n'a pas besoin de faire
appel au serveur pour modifier la page.
Un des inconvénients majeur du DHTML est le fait même qu'il soit récent.
En effet, peu de navigateurs le reconnaîssent. Les navigateurs requis
sont Microsoft Internet Explorer 4, ou Netscape Navigator 4 ou 5. De plus,
ces deux familles de navigateurs gèrent de façon différente le DHTML car
aucun standard n'est encore existant. Il faut donc par moment adapter
les scripts en fonction des navigateurs.
Avant tout, il faut s'assurer que l'on a au minimum les navigateurs requis. Cela se fait par la fonction suivante :
// Vérifie que le navigateur soit au minimum IE4 ou NN4
function verifyBrowser()
{
var oldBrowser = true;
navName = navigator.appName;
navVer = parseInt(navigator.appVersion);
if (navName == "Netscape" && navVer >= 4)
oldBrowser = false;
else if (navName == "Microsoft Internet Explorer" && navVer >= 4)
oldBrowser = false;
if (oldBrowser)
alert("Votre navigateur n'est pas suffisamment récent...");
}
Ensuite, quand on doit adapter les scripts en fonction des navigateurs, le plus simple est de faire ceci :
if (navigator.appName == "Netscape") {
// Code à exécuter avec le navigateur Netscape
} else {
// Code à exécuter avec le navigateur Microsoft
}
Comment faire donner l'impression d'avoir plusieurs pages en
une seule ? Cette technique est exploitée sur ce site : regardez
attentivement l'adresse de la page quand vous cliquez sur les différents
boutons. Cette adresse est la même. En fait, le truc est la définition
de plusieurs sections. Ainsi, dans le cas du guide, on retrouve une section
pour les bases du HTML, une autres pour les styles, etc... Grâce au DHTML,
on a moyen de cacher les sections. Ainsi, sur ce site, quand on clique
sur un bouton, on cache la section affichée et on affiche la nouvelle
section correspondante au bouton cliqué. Les étapes pour exploiter cette
technique sont donc :
- définir les sections
- cacher la section affichée
- afficher la nouvelle section
Pour définir une section, il existe plusieurs balises, mais il est recommandé d'utiliser la balise <DIV>, car elle a l'avantage d'être correctement reconnue par Netscape Navigator et Internet Explorer. Cela évite de faire deux pages différentes, à savoir une page par navigateur. La balise <DIV> admet comme paramètre NAME="nom" où nom est le nom attribué à la section. Voici donc un exemple de section :
<DIV NAME="ma_section"> Voici le texte de ma section... </DIV>
Il faut donc définir chaque section de la manière précédente. Pour pouvoir cacher les sections ou les afficher, le plus simple est de créer quelques fonctions JavaScript.
var activeLayer = "section1";
// Affiche la couche sélectionnée et cache celle qui est affichée
function swapStatus(section) {
if (navigator.appName == "Netscape")
{
document.layers[activeLayer].visibility = "hide";
activeLayer = section;
document.layers[activeLayer].visibility = "show";
}
else
{
eval(activeLayer).style.visibility = "hidden";
activeLayer = section;
eval(activeLayer).style.visibility = "visible";
}
}
Cette fonction suppose que la section section1 est celle affichée
au départ. En étudiant la fonction, on remarque vite les disparités qui
existent entre Netscape Navigator et Microsoft Internet Explorer.
Pour changer la section affichée, il suffit d'appeler la fonction swapStatus
en lui passant comme argument le nom de la section à afficher (attention
ce paramètre doit être une chaine de caractères). Voici un exemple de
son utilisation : swapStatus("section2");. Cet exemple cache la section1
et affiche la section2.
Vous pouvez trouver un exemple pratique de cette technique sur la page
du Guide. Etudier son code source : tout y est et le texte est commenté...
La fonction JavaScript qui est souvent diffusée sur les sites
WEB est la suivante :
// Charge les images du site... img = new Image(); img.src = "image2.gif";
Elle fonctionne évidemment, cependant, elle ne règle pas totalement le problème, car on ne fait qu'envoyer une requête demandant au navigateur de charger les images, mais ces dernières ne seront pas obligatoirement là quand il le faudra. Prenons un exemple concret : on souhaite changer une image (image1.gif à l'origine) quand la souris passe au-dessus. Il suffit de changer la propriété src de notre image en question, pour que l'image affichée change (et devienne image2.gif par exemple). Si l'on applique la fonction citée plus haut, dès le chargement de notre page, on demandera au navigateur de charger l'image image2.gif, mais cette dernière ne sera pas obligatoirement chargée quand l'on mettra notre souris au dessus de l'image d'origine...
La meilleure technique consiste donc à créer une page HTML
qui lancera les requêtes en vérifiant que le chargement des images
soit finit. Ensuite, on passera à la page principale de notre site, et
là on sera s&ucir;r que toutes nos images seront dans le cache. Prenons
un exemple. On crée une page index.html qui chargera les images et indiquera
de patienter. Enfin, quand le chargement sera fini, on sautera à la page
home.html.
Voici le code de la page index.html :
<HTML>
<BODY onLoad="preLoad()">
<SCRIPT LANGUAGE="JavaScript">
function preLoad() {
img01 = new Image;
img01.src = "image1.gif";
img01.onLoad = loadCheck();
img02 = new Image;
img02.src = "image2.gif";
img02.onLoad = loadCheck();
}
function loadCheck() {
count++;
if (count == 2)
window.location = "home.html";
}
</SCRIPT>
Patientez... On charge les images !!!
</BODY>
</HTML>
Quelques explications : img01.onLoad = "loadCheck()" permet de dire au navigateur de lancer la fonction loadCheck() quand il a fini de charger l'image, or cette fonction compte le nombre de fois qu'elle est appelée. Une fois que ce nombre est égal au total d'images, on a chargé toutes les images, et il suffit de passer à la page home.html, ce qui est fait par la commande window.location = "home.html".
[ RETOUR ]