SELFHTML/Aides à la navigation HTML dynamique Solutions pour la pratique

	Bibliothèque DHTML générale
	Remarques sur cet exemple  Texte source avec explications  Test de la bibliothèque DHTML  Élargir la bibliothèque DHTML

Remarques sur cet exemple

En raison des nombreux modèles DHTML qui ont encore cours aujourd'hui, il est souvent compliqué pour les programmeurs de retenir toutes les commandes différentes et les possibilités d'accès. En outre les fichiers contenant des scripts plus grands gonflent quand on note toujours les mêmes requêtes pour le navigateur et les constructions pour l'accès aux éléments. C'est pourquoi, il est préférable d'écrire une fois pour toutes, une bibliothèque de fonctions DHTML de portée générale et de la ranger dans un fichier JavaScript externe, et d'incorporer ensuite ce fichier JavaScript dans les fichiers où le code des fonctions DHTML est nécessaire.

L'exemple de cette page présente une telle bibliothèque pour fonctions DHTML. Les différentes fonctions sont également expliquées précisément. Dans les autres exemples de ce chapitre, la bibliothèque créée ici sera utilisée pratiquement.

Vous pouvez, bien entendu, élargir la bibliothèque de fonctions pour l'adapter à vos besoins. Ainsi est-il pensable par exemple d'y ajouter des fonctions de portée générale écrites pour le formatage CSS ou pour le positionnement d'éléments. Le stock de base de fonctions présenté ici doit avant tout faciliter l'accès aux éléments et réduire la quantité d'interrogations au navigateur.

 Texte source avec explications

Le texte source qui suit montre la bibliothèque DHTML complète. Copiez le texte source complet et sauvegardez le dans un fichier texte nommé dhtml.js. Alors vous aurez le fichier JavaScript externe avec les fonctions DHTML.

Exemple - fichier dhtml.js:

/* Bibliothèque DHTML */

var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;

function DHTML_init() {

 if (window.opera) {
     OP = 1;
 }
 if(document.getElementById) {
   DHTML = 1;
   DOM = 1;
 }
 if(document.all && !OP) {
   DHTML = 1;
   MS = 1;
 }
if(document.layers && !OP) {
   DHTML = 1;
   NS = 1;
 }
}

function getElem(p1,p2,p3) {
 var Elem;
 if(DOM) {
   if(p1.toLowerCase()=="id") {
     if (typeof document.getElementById(p2) == "object")
     Elem = document.getElementById(p2);
     else Elem = void(0);
     return(Elem);
   }
   else if(p1.toLowerCase()=="name") {
     if (typeof document.getElementsByName(p2) == "object")
     Elem = document.getElementsByName(p2)[p3];
     else Elem = void(0);
     return(Elem);
   }
   else if(p1.toLowerCase()=="tagname") {
     if (typeof document.getElementsByTagName(p2) == "object" ||
        (OP && typeof document.getElementsByTagName(p2) == "function"))
     Elem = document.getElementsByTagName(p2)[p3];
     else Elem = void(0);
     return(Elem);
   }
   else return void(0);
 }
 else if(MS) {
   if(p1.toLowerCase()=="id") {
     if (typeof document.all[p2] == "object")
     Elem = document.all[p2];
     else Elem = void(0);
     return(Elem);
   }
   else if(p1.toLowerCase()=="tagname") {
     if (typeof document.all.tags(p2) == "object")
     Elem = document.all.tags(p2)[p3];
     else Elem = void(0);
     return(Elem);
   }
   else if(p1.toLowerCase()=="name") {
     if (typeof document[p2] == "object")
     Elem = document[p2];
     else Elem = void(0);
     return(Elem);
   }
   else return void(0);
 }
 else if(NS) {
   if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") {
   if (typeof document[p2] == "object")
     Elem = document[p2];
     else Elem = void(0);
     return(Elem);
   }
   else if(p1.toLowerCase()=="index") {
    if (typeof document.layers[p2] == "object")
     Elem = document.layers[p2];
    else Elem = void(0);
     return(Elem);
   }
   else return void(0);
 }
}

function getCont(p1,p2,p3) {
   var Cont;
   if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) {
     if(getElem(p1,p2,p3).firstChild.nodeType == 3)
       Cont = getElem(p1,p2,p3).firstChild.nodeValue;
     else
       Cont = "";
     return(Cont);
   }
   else if(MS && getElem(p1,p2,p3)) {
     Cont = getElem(p1,p2,p3).innerText;
     return(Cont);
   }
   else return void(0);
}

function getAttr(p1,p2,p3,p4) {
   var Attr;
   if((DOM || MS) && getElem(p1,p2,p3)) {
     Attr = getElem(p1,p2,p3).getAttribute(p4);
     return(Attr);
   }
   else if (NS && getElem(p1,p2)) {
       if (typeof getElem(p1,p2)[p3] == "object")
        Attr=getElem(p1,p2)[p3][p4]
       else
        Attr=getElem(p1,p2)[p4]
         return Attr;
       }
   else return void(0);
}

function setCont(p1,p2,p3,p4) {
   if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)
     getElem(p1,p2,p3).firstChild.nodeValue = p4;
   else if(MS && getElem(p1,p2,p3))
     getElem(p1,p2,p3).innerText = p4;
   else if(NS && getElem(p1,p2,p3)) {
     getElem(p1,p2,p3).document.open();
     getElem(p1,p2,p3).document.write(p4);
     getElem(p1,p2,p3).document.close();
   }
}

DHTML_init();

Explication:

Le fichier externe JavaScript ne peut rien contenir d'autre que du code JavaScript tel qu'il est montré dans l'exemple. Ci-après sont décrites les variables globales et les fonctions. Car vous pouvez travailler avec ces variables et fonctions si vous voulez utiliser la bibliothèque.

Variable globale DHTML:

Cette variable sauvegarde si HTML dynamique est disponible sur le navigateur utilisé par l'utilisateur ou s'il ne l'est pas. Dans la fonction DHTML_init() cette variable reçoit une valeur qui ne devrait plus être modifiée ensuite. Si HTML dynamique est disponible pour l'un des  différents modèles DHTML connus, alors elle reçoit la valeur 1, si ce n'est pas le cas, alors la valeur 0. Avec la requête simple et élégante if(DHTML) vous pouvez ensuite vérifier dans le cours de l'un de vos scripts, si HTML dynamique est possible ou non..

Variable globale DOM:

Cette variable sauvegarde si HTML dynamique est possible d'après la syntaxe DOM ou non (valeur 1 ou valeur 0). Dans la fonction DHTML_init() cette variable reçoit une valeur qui ne devrait plus être modifiée ensuite. Avec if(DOM) vous pouvez ensuite interroger si un navigateur récent est en service, qui soutient déjà DOM dans son implémentation JavaScript.

Variable globale MS:

Cette variable aussi reçoit une valeur dans la fonction DHTML_init() . Quand sa valeur est 1, alors votre script tourne, c'est une quasi-certitude, sur l'Explorer Internet MS. S'il s'agit d'un navigateur de la 4 ème génération, la valeur 0 est sauvegardée dans la variable DOM, pour les navigateurs plus récents par contre, c'est 1. Avec if(MS && !DOM) vous pouvez donc demander dans votre script, s'il faut travailler avec la syntaxe DHTML de l'Explorer Internet 4.x.

Variable globale NS:

Comme MS cette variable reçoit aussi une valeur dans la fonction DHTML_init(). Si sa valeur est ensuite 1, alors votre script tourne, c'est une quasi-certitude, sur un navigateur Netscape de la 4 ème génération. Car si un navigateur Netscape 6.x ou autre rejeton du navigateur nouvellement programmé Mozilla est en service, c'est à la place la variable DOM qui est égale à 1, alors que NS est égal à 0. Avec if(NS) vous pouvez donc demander dans votre script, s'il faut travailler avec la syntaxe DHTML de l'ancien Netscape 4.x.

Variable globale OP:

Comme MS cette variable reçoit aussi une valeur dans la fonction DHTML_init(). Si sa valeur est ensuite 1, alors votre script tourne, c'est une quasi-certitude, sur un navigateur Opera. Avec if(OP) vous pouvez donc demander dans votre script, si un navigateur Opera est en service. S'il s'agit en outre, d'un navigateur Opera récent, la valeur 1 est sauvegardée dans les variables DOM et DHTML.

Fonction DHTML_init() - initialiser la bibliothèque:

Appel:
DHTML_init();

Cette fonction est appelée automatiquement si vous voulez utiliser la bibliothèque présentée ici. À cet effet est noté à la fin du fichier bibliothèque l'appel DHTML_init(). Ensuite les variables globales importantes reçoivent leur valeur respective. Si DHTML_init() n'est pas appelée avant tous les autres appels de fonctions de cette bibliothèque, il ne se passe pas ce qui est escompté, étant donné qu'alors la version du navigateur est supposée ancienne. La façon d'agir des autres fonctions dépend de ce que les variables globales aient reçu des valeurs correctes. On en acquiert toutefois la certitude par la notation à la fin du fichier et les variables globales seront disponibles dans tous les fichiers dans lesquels cette bibliothèque est incorporée.
La fonction DHTML_init() se sert de la possibilité des  demandes sur l'existence d'un objet. Dès la première requête, Il est vérifié s'il s'agit d'un navigateur Opera. Cela est nécessaire étant donné qu'Opera prétend connaître, selon les réglages de l'utilisateur, document.all ou bien document.layers. Pour vérifier si le modèle DOM est disponible, la requête si document.getElementById est disponible, est appropriée car il s'agit d'une méthode importante du modèle DOM qui devrait exister dans toutes les implémentations du DOM.
Pour vérifier l'existence des anciennes syntaxes Microsoft et Netscape la requête porte sur leur objet DHTML essentiel. Si document.all est disponible, il s'agit de la syntaxe d'après l'ancien modèle Microsoft. Si document.layers est disponible, c'est la syntaxe d'après l'ancien modèle Netscape. Dans les deux cas, le navigateur Opera est exclu grâce à !OP, pour le cas où les réglages de l'utilisateur permettent la connaissance de ces objets.

Fonction getElem() - rechercher l'objet élément:

Exemples d'appel:
objet_element = getElem("id","remarque",null);
objet_element = getElem("name","champ_saisie",0);
objet_element = getElem("tagname","p",8);
objet_layer = getElem("index",2,null,null);

Cette fonction est à vrai dire la fonction essentielle de la bibliothèque présentée ici. Elle accède à un certain élément du document et retourne l'objet de cet élément. Cela fonctionne aussi bien avec les navigateurs supportant le modèle DOM qu'avec l'ancien Explorer Internet 4.x et de façon plus restreinte (seulement en relation avec les éléments layer ou bien div) également avec Netscape 4.x.
Dans la plupart des cas, vous n'avez pas besoin d'appeler cette fonction vous-même. Il s'agit davantage d'une fonction de base utilisée par les autres fonctions de la bibliothèque. Il y a pourtant également des cas dans lesquels un appel direct de cette fonction est indiqué. La fonction attend les paramètres suivants:

p1 est l'art et la manière à employer pour accéder à un élément. Il y a quatre valeurs permises pour ce paramètre: "id", "name", "tagname" et "index". Transmettez "id", quand vous voulez accéder à un élément qui a un attribut id par exemple <div id="passage">. Transmettez "name", quand vous voulez accéder à un élément qui n'a pas d'attribut id, mais qui a un attribut name, par exemple <a name="ancre">. Transmettez "tagname", quand vous voulez accéder à un élément qui n'a ni attribut id ni attribut name. Ne transmettez "index" que lorsqu'il s'agit de calques Netscape, qui doivent être adressés par l'objet layers à l'aide de numéros d'index.

p2 est une mention plus précise de ce que vous avez fixé pour p1: Si vous avez transmis pour p1 la valeur "id", alors la fonction attend pour p2 la valeur de l'attribut id. Si vous avez transmis pour p1 la valeur "name", alors la fonction attend pour p2 la valeur de l'attribut name. Si vous avez transmis pour p1 la valeur tagname, alors p2 attend le nom d'élément désiré, donc par exemple h1 ou bien div. Si vous avez transmis pour p1 la valeur "index", p2 attend le numéro d'index du calque Netscape souhaité.

p3 n'est nécessaire que lorsque pour p1, c'est l'une des deux valeurs "name" ou "tagname" qui a été mentionnée. Dans ce cas, il vous faut mentionner pour p3 un numéro d'index avec le nom ou le nom d'élément correspondant à votre choix; ce numéro d'index est le numéro d'ordre dans le document de l'élément en question. Le premier élément a le numéro d'index 0, le deuxième le numéro 1 etc...

Transmettez pour les paramètres sans mention de valeur tout simplement le mot null (sans guillemets!).

La fonction getElem() parcourt dans l'ordre les modèles DHTML possibles et interroge d'abord avec if(DOM) la variable globale DOM pour savoir si la syntaxe du modèle DOM est disponible. Si oui. l'élément souhaité est recherché d'après la syntaxe du modèle DOM, en fonction des paramètres transmis puis il est renvoyé. Seulement quand la syntaxe du modèle DOM n'est pas disponible, il est tenté d'appliquer les anciens modèles DHTML. D'abord il est vérifié avec if(MS), si l'ancien modèle DHTML de Microsoft est disponible. Si oui, l'élément est recherché d'après cette syntaxe, par l'objet document.all. Si même la syntaxe Microsoft n'y parvient pas, il reste encore l'ancienne syntaxe Netscape interrogée avec if(NS). Dans ce cas un accès à un objet Layer est construit à partir des paramètres transmis.

En même temps intervient dans la fonction un traitement d'erreur. Dans cet embranchement de la fonction, il est vérifié au moyen de l'opérateur  typeof si l'élément désiré existe bien et s'il représente un objet. Si c'est le cas, l'élément est créé et retourné. Autrement, c'est undefined qui est renvoyé grâce à l' opérateur void.

Fonction getCont() - rechercher le contenu de l'élément:

Exemples d'appel:
if(! NS) contenu_element = getCont("id","remarque",null);
if(! NS) contenu_element = getCont("name","lien",3);
if(! NS) contenu_element = getCont("tagname","p",8);

Par cette fonction qui accède de son côté à la fonction getElem(), vous pouvez rechercher commodément rechercher le contenu d'un élément - tout au moins si le modèle DOM ou l'ancien modèle DHTML de Microsoft est disponible. L'ancien modèle de Netscape ne peut lire le contenu d'élément. Dans les exemples d'appel, l'appel de la fonction se fait à condition qu'il ne soit pas travaillé d'après l'ancienne syntaxe de Netscape (if(!NS)).
La fonction retourne une chaîne de caractères vide lorsqu'elle emploie le modèle DOM et au cas où le contenu de l'élément n'est pas du texte mais un autre élément. Si donc par exemple est noté:
<p>le texte</p>
Alors la fonction retourne la valeur le texte. Mais s'il est noté:
<p><b>le texte</b></p>
Alors la fonction retourne, lorsque le modèle DOM est appliqué, une chaîne de caractères vide, étant donné qu'il n'y a aucun texte comme contenu d'élément de p, mais le contenu d'un autre élément, à savoir l'élément b .
Les paramètres pour getCont() sont les mêmes que pour getElem(). Seule la valeur "index" pour le paramètre p1 n'est pas traitée par cette fonction. Transmettez pour les paramètres sans mention de valeur tout simplement le mot null.

La fonction getCont() se sert donc de la fonction de base getElem() et passe simplement ses trois paramètres transmis à celle-ci. Pour la syntaxe DOM, elle essaie d'accéder au contenu texte de l'élément avec firstChild.nodeValue, pour la syntaxe Microsoft, par la propriété innerText de l'objet all. À la manière dont la fonction getCont() appelle la fonction getElem(), vous pouvez également voir comment vous pouvez appeler directement la fonction de base getElem() d'une autre façon. Étant donné que cette fonction renvoie un objet élément, vous pouvez joindre les propriétés et fonctions d'un tel objet à l'appel de la fonction. En tout état de cause, il vous faut demander vous-même d'après quel modèle il est travaillé. Si c'est d'après le modèle DOM (interrogation possible avec if(DOM)), des méthodes et propriétés des  objets éléments HTML peuvent être attachées, à l'appel de getElem() ou bien également celles de l'objet  node.

La fonction getCont() tient compte également de navigateurs comme Opera qui ne peuvent pas encore lire les contenus de façon dynamique mais interprètent cependant d'autres parties de la bibliothèque. Avant de tenter de lire des contenus, elle demande avec if (DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)), si l'objet désiré existe et si l'objet  firstChild est également présent. Ce n'est que lorsque cette condition est remplie, qu'il est essayé de lire le contenu. Par ce biais on évite dans tous les cas un message d'erreur.

Fonction getAttr() - rechercher le contenu d'un attribut:

Exemples d'appel:
Attribut=getAttr("name","nom_image",0,"height");
Attribut=getAttr("id","passage",null,"id");
if (!NS) Attribut=getAttr("name","ancre",0,"href")
if (NS) Attribut=getAttr("name","links",0,"href")

Par cette fonction qui accède de son côté à la fonction getElem(), vous pouvez rechercher commodément rechercher la valeur d'un attribut dans un élément - tout au moins quand le modèle DOM ou l'ancien modèle DHTML Microsoft est disponible. Pour certains objets, c'est même possible avec Netscape 4. Outre les trois paramètres déjà connus, cette fonction attend le quatrième paramètre p4. Pour celui-ci, vous devez transmettre le nom de l'attribut désiré. Transmettez pour les paramètres sans mention de valeur tout simplement le mot null.

La fonction getAttr() utilise les méthodes objet getAttribute(), disponibles aussi bien dans le modèle DOM que dans l'ancien modèle Microsoft.
Pour Netscape 4 par contre la propriété désirée est interrogée directement. Pour ce navigateur, il est possible dans certains cas d'accéder à la propriété désirée uniquement par des sous-objets, par exemple pour les liens et les ancres. Vous pouvez y accéder en notant dans le paramètre p2 le nom du sous-objet (par exemple links ou elements) et dans le paramètre p3 le nom ou bien le numéro d'index de l'objet.
Le choix de l'objet correct est pris en charge par la fonction de base getElem(). Bien sûr, intervient dans ce cas, la vérification si l'objet désiré existe bien.

Fonction setCont() - modifier le contenu de l'élément de façon dynamique:

Exemples d'appel:
setCont("id","remarque",null,"nouvelle remarque");
setCont("name","lien",3,"nouveau lien");
setCont("tagname","p",8,"nouveau contenu de texte de l'élément");
if(NS) setCont("index","2",null,"nouveau contenu du calque");

Avec cette fonction, vous pouvez changer le contenu d'un élément de façon dynamique. La fonction setCont() se sert pour l'accès à l'élément désiré de la fonction de base getElem(). Les trois premiers paramètres qui sont les mêmes pour cette fonction que pour les autres fonctions sont pour cela passés à getElem(). Comme quatrième paramètre p4, la fonction setCont() attend le contenu texte désiré. Faîtes attention que ce texte, tout au moins pour le modèle DOM et pour l'ancien modèle Microsoft, n'est interprété que comme du pur texte. Les formatages HTML dans le texte y sont interprétés comme texte en clair.
Transmettez pour les paramètres sans mention de valeur tout simplement le mot null.
Pour les calques Netscape, la fonction setCont() utilise automatiquement les commandes habituelles pour l'ouverture du document calque (document.Layer.document.open()), pour écrire (document.Layer.document.write()) et pour fermer (document.Layer.document.close()).

La fonction setCont() tient compte également de navigateurs comme Opera qui ne peuvent pas encore modifier les contenus de façon dynamique mais interprètent cependant d'autres parties de la bibliothèque. Avant de tenter de modifier des contenus, elle demande avec if (DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)), si l'objet désiré existe et si l'objet  firstChild est également présent. Ce n'est que lorsque cette condition est remplie qu'il est essayé de modifier le contenu. Par ce biais on évite dans tous les cas un message d'erreur.

 Test de la bibliothèque DHTML

L'exemple suivant montre comment vous pouvez utiliser la bibliothèque DHTML. Les différentes fonctions sont appelées dans ce fichier d'exemple avec des cas concrets. La meilleure façon de tester la manière de fonctionner est d'appeler l'aperçu avec différents navigateurs.

Exemple:

 Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
function tester() {
   var texte_sorti = "";
   if(DHTML) texte_sorti += "DHTML est activé!\n"
   else      texte_sorti += "DHTML n'est pas activé!\n";
   if(DOM)   texte_sorti += "DOM est supporté!\n";
   else      texte_sorti += "DOM n'est pas supporté!\n";
   if(MS)    texte_sorti += "Vieille technologie Microsoft sans DOM!\n";
   if(NS)    texte_sorti += "Vieille technologie Netscape sans DOM!\n";

   contenu_h1 = getCont("tagname","h1",0);
   if(contenu_h1)  texte_sorti += "Contenu de l'élément h1: " + contenu_h1 + "!\n";
   else           texte_sorti += "Contenu de l'élément h1 n'a pu être trouvé!\n";

   contenu_p = getCont("id","paragraphe_remarque",null);
   if(contenu_p)   texte_sorti += "Contenu de l'élément p: " + contenu_p + "!\n";
   else           texte_sorti += "Contenu de l'élément p n'a pu être trouvé!\n";

   if (NS)  lien = getAttr("name","anchors","ancre","text");
   else lien = getCont("name","ancre",0);
   if(lien)    texte_sorti += "Texte du lien: " + lien + "!\n";
   else           texte_sorti += "Texte du lien n'a pu être trouvé!\n";

   alignement_h1 = getAttr("tagname","h1",0,"align");
   if(alignement_h1)   texte_sorti += "Alignement de l'élément h1: " + alignement_h1 + "!\n";
   else           texte_sorti += "Alignement de l'élément h1 n'a pu être trouvé!\n";

   hauteur_image= getAttr("name","oeil",0,"height");
   if(hauteur_image) texte_sorti += "Hauteur d'image: " + hauteur_image + "px.\n";
   else          texte_sorti += "La hauteur d'image n'a pu être trouvée!\n";

   passage_id = getAttr("id","passage",null,"id");
   if(passage_id) texte_sorti += "Nom id du passage: " + passage_id + "!\n";
   else           texte_sorti += "Nom id du passage n'a pu être trouvé!\n";

   setCont("id","passage",null,"Les tests sont terminés!");

   alert(texte_sorti);
}
//-->
</script>
<style type="text/css">
<!--
#passage {position:absolute; top:200px; left:10px; width:500px; height:100px; }
-->
</style>
</head><body>
<h1 align="left">Test de dhtml.js</h1>
<hr noshade size="1">
<p id="paragraphe_remarque">Les tests vérifient les fonctions de la bibliothèque DHTML</p>
<p><img name="oeil" src="../../../src/oeil.gif" width="24" height="16"
  border="0" alt="image test">
<a name="ancre" href="javascript:tester()">lancer les tests</a></p>
<div id="passage">&nbsp;</div>
</body></html>

Explication:

L'exemple contient, dans le passage visible du fichier HTML, un titre N°1, un paragraphe de texte, un autre paragraphe de texte avec un lien avant lequel d'ailleurs est incorporé un graphique, et enfin un passage div, qui est positionné de façon absolue à l'aide de CSS. Les mentions CSS pour le positionnement se trouvent dans l'entête de fichier, dans un passage style où sont notés les formats pour #passage. En général, il est préférable de noter dans une feuille de style globale de l'entête de fichier, en raison de quelques lacunes de Netscape, les formatages CSS des  calques simulés, et non pas dans le repère d'introduction <div>.

Dans l'entête de fichier deux passages JavaScript sont par ailleurs définis. Le premier est vide et incorpore somme toute la bibliothèque qui est sauvegardée dans le fichier JavaScript externe dhtml.js. Le deuxième passage Script contient le code JavaScript qui exécute les appels de tests.

Le JavaScript dans l'entête de fichier est appelé quand l'utilisateur clique sur le lien qui est noté dans le fichier. Alors la fonction tester() est appelée. Cette fonction peut , comme l'ensemble du JavaScript, accéder sans détour à toutes les variables globales et aux fonctions de la bibliothèque DHTML.

Dans un premier temps, la fonction tester() accède aux variables initialisées de la bibliothèque et vérifie quel est le modèle DHTML disponible. En fonction de ce qui est disponible, la variable texte_sorti est assortie d'un texte.

À l'étape suivante s la fonction getCont() de la bibliothèque DHTML entre en jeu.
Avec getCont("tagname","h1",0), il est accédé par le nom d'élément au premier élément h1 (compteur d'index 0). La valeur renvoyée par getCont() est sauvegardée dans la variable contenu_h1. En fonction de ce qu'elle contient après l'appel de la fonction une chaîne de caractères d'une longueur supérieure à 0 (if(contenu_h1)), la variable texte_sorti est à nouveau assortie d'un autre texte.

Suivent deux autres appels de getCont() qui essaient les autres variantes des paramètres transmis.
Avec getCont("id","paragraphe_remarque",null), il est accédé à l'élément avec l'attribut id="paragraphe_remarque".
Avec getCont("name","ancre",0), il est accédé au premier élément du document pour lequel l'attribut name="ancre" est noté. Étant donné qu'il est également possible avec Netscape 4 d'accéder au texte d'un lien, ce n'est pas la fonction getCont() qui est appelée pour ce navigateur mais la fonction getAttr(). Il a été tenu compte par ailleurs que dès qu'un lien constitue en même temps une ancre, le texte du lien ne puisse être lu que par l'objet anchor.

À la suite de quoi la fonction tester() essaie la fonction de la bibliothèque getAttr() avec trois appels, une fois par le nom d'élément, une fois par le nom de repère et une fois par l'attribut id.

Enfin est également encore appelée la fonction setCont(). Afin que cela fonctionne dans tous les navigateurs y compris Netscape 4.x, le contenu du passage div positionné de façon absolue et que Netscape reconnaît comme calque, a été fixé à nouveau.

À la fin, la fonction tester() sort les résultats réunis qu'elle a accumulés dans la variable texte_sorti, dans une fenêtre de dialogue.

Élargir la bibliothèque DHTML

La bibliothèque DHTML présentée ici ne contient que quelques fonctions de base peu nombreuses, facilite un peu l'accès aux éléments et rend dans de nombreux cas le code JavaScript un peu plus clair et mieux lisible. Mais il reste encore beaucoup de choses qu'elle ne fait pas. Si vous travaillez souvent avec HTML dynamique, il est recommandé d'élargir la bibliothèque avec d'autres fonctions qui vous sont propres. L'important pour une telle bibliothèque de fonctions est que toutes les fonctions écrites soient de portée générale. C'est la raison pour laquelle les fonctions attendent en règle générale, plusieurs paramètres pour recevoir de quoi traiter les données.

Il serait encore possible d'imaginer par exemple des fonctions qui accèdent directement aux propriétés CSS d'éléments ou bien des fonctions qui sont en mesure de repositionner un élément de façon dynamique. Partant de là, des foncions sont également possibles qui calculent certains mouvements circulaires par exemple au moyen desquels elle positionne les éléments. Toutes les autres fonctions imaginables peuvent se consacrer à la gestion d'événements, malheureusement encore assez compliquée parce que très diversement implémentée, et y simplifier plusieurs choses.

Une bibliothèque de fonctions ne doit pas d'un autre côté devenir trop grande. Car si à la fin vous incorporez un JavaScript externe de plusieurs dizaines de Kilooctets pour noter trois instructions banales , alors une bibliothèque de fonctions n'est pas adaptée. Dans ces cas là, il est préférable de noter les quelques instructions sans recourir à une bibliothèque de fonctions.

Veillez toujours à ce que vos bibliothèques exécutent un traitement d'erreur qui vérifie la disponibilité respective des objets adressés.

	Barre de navigation dynamique
	Filtres dynamiques (seulement Microsoft)

SELFHTML/Aides à la navigation HTML dynamique Solutions pour la pratique

© 2001 Stefan Münz / © 2003 Traduction  Serge François, 13405@free.fr
 selfhtml@fr.selfhtml.org