Créer un glossaire en se servant du DOMScripting
Utiliser le DOMscripting pour générer du contenu n’est pas uniquement affaire de technologie client / serveur. Nous allons voir au cours de cet article qu’il est possible en se basant sur l’aspect existant d’une page web, d’extraire des éléments afin de les regrouper et les présenter de manière différente, créant ainsi des outils de navigation complémentaire.
Scénario et mode opératoire
Imaginons une page web classique qui contient un certain nombre de balises <abbr>, ou du moins des abréviations et acronymes en tout genre. Bien souvent, l’utilisateur n’en connait pas le sens réel, et doit soit consulter un glossaire, ou au pire rechercher sur google. Pour cela, il serait bien de donner des informations sur les abréviations, ou acronymes, contenu dans la page, ou l’article. Cela serait une information riche et intéressante, qui pourrait être ainsi proposé comme outil d’aide à la navigation et à la lecture du contenu. De plus, il s’agit là d’un travail qui peut être à la charge du navigateur, ce qui permet en donc de délester le travail réalisé côté serveur.
Le scénario est simple, une page se charge, un script récupère l’ensemble des balises <abbr> présentes dans la page, ou dans un conteneur donné. À ce sujet, il faut soit les avoir créer au préalable dans le document, soit utiliser une expression régulière qui va en fonction d’une liste de référence les créer à la volée.
Ensuite, on enclenche une boucle qui va générer un <dl> (définition list) en conséquence, et la remplir avec autant de paires <dt> (abréviation) / <dd> (définition). Une fois la liste générée, il suffit de la placer dans une balise <aside> qui servira de conteneur d’accueil. La feuille de style préparée pour cet exercice, tient compte de cette organisation. Afin d’agrémenter le tout, nous pouvons placer une balise de tête de niveau <h1> qui nous servira de titre pour présenter la liste de définition. Nous pourrions également placer une interaction sur cette barre de titre, pour manipuler la fenêtre, gestion accordéon, glissé déposé, ou tout autre fonctionnalité interactive. Dans une étude de cas plus proche de la réalité, les styles devraient être également créé à la volée, et une animation de transition pourrait être intégrée pour l’affichage de ce module de définitions.
Chargement des fichiers et appel à la fonction
Le document HTML, pointe vers le fichier Javascript, et la feuille de style.
<head> <link href="dom_glossaire.css" rel="stylesheet" type="text/css" /> <script type="text/ecmascript" src="dom_glossaire.js"></script> </head>
Regardons du côté de JavaScript, l’appel de la fonction afficheGlossaire() qui sera utilisée pour la mise en place du glossaire, se fait directement au chargement de la page. Cette mécanique pourrait être optimisée afin de ne pas écraser la présence d’un éventuel autre écouteur déjà placé sur onload.
window.onload= function(){
afficheGlossaire()
}
function afficheGlossaire() {
}
Récupération et boucle sur l’ensemble des acronymes
Dans un premier temps, il est nécessaire de créer deux variables locales. Une première abbr pour contenir l’ensemble des balises <abbr> récupérées sous forme d’un tableau JavaScript, dans la page, (ou si besoin dans un conteneur spécifique, au choix). Une seconde dl qui pointe vers une balise <code ><dl> créée à la volée, afin d’y construire, au fur et à mesure, le morceau d’arborescence du glossaire.
Mettons en place une boucle qui va itérer sur l’ensemble du tableau abbr. Nous récupérons à chaque fois les informations contenues dans l’attribut title et le nœud lui même, nous les plaçons respectivement dans des variables temporaires def_temp et abbr_temp. L’attribut title contenant la définition de l’acronyme et le nœud contenant l’abréviation elle-même.
function afficheGlossaire() {
var abbr = document.getElementsByTagName("abbr");
var dl = document.createElement("dl");
for (var i=0, nb_abbr=acronym.length; i<nb_abbr; i++) {
var def_temp = acronym[i].getAttribute("title");
var aabbr_temp = acronym[i].firstChild.nodeValue;
}
}
Création des balises dt et dd
C’est ici la partie la plus longue à écrire. Du fait que chacun des éléments <dt> et <dd> contient du texte, il faut à chaque fois créer le nœud <dt> ou <dd>, puis créer un nœud de type texte qui contient le texte. Dans un second temps on assemble les deux, l’élément en soi et l’élément de type texte, avant de les ajouter à la liste de définitions. Le code sera certainement plus parlant qu’un long discours.
var dt = document.createElement("dt");
var dt_text = document.createTextNode(abbr_temp);
dt.appendChild(dt_text);
var dd = document.createElement(« dd »);
var dd_text = document.createTextNode(def_temp);
dd.appendChild(dd_text);
dl.appendChild(dt);
dl.appendChild(dd);
Assemblage du glossaire, et du module
Encore une partie assez verbeuse, puisqu’il nous reste à créer une balise d’entête <h1>, une balise <aside> globale qui contiendra le tout et finalement ajouter le tout au document lui-même. Profitons-en pour ajouter un identifiant à la balise <aside>. Ceci peut être utile par la suite, si nous devons faire évoluer les fonctionnalités de ce module.
var h = document.createElement("h1");
var h_text = document.createTextNode("Abbréviations");
h.appendChild(h_text);
var div = document.createElement(« aside »)
div.setAttribute(« id », »glossaire »)
div.appendChild(h);
div.appendChild(dl)
document.body.appendChild(div);