Le DOM Scripting
Nous allons explorer au cours du présent article les avantages et parfois les complexités du DOM Scripting.
Avant d’aller plus loin, voyons une définition succincte de ce qu’est le DOM Scripting. Ou de ce qu’il y a quelques années, on appelait le DHTML, qui suite à la guerre des navigateurs (the browser war) n’a pas eu un avenir brillant et a été supplanté par une nouvelle techno qui se nommait Flash.
Aujourd’hui, le DOM Scripting est une technique qui permet de manipuler le DOM d’une page web, ou de tout document structuré, à l’aide d’un langage de programmation. Javascript, ou jQuery, permet de gérer cela très facilement, et de ce fait, tout se passe côté client déchargeant ainsi le travail côté serveur.
Avantages et utilisations
L’interface utilisateur des applications peut donc être très souple à utiliser, pouvant ainsi adapter son ergonomie au contexte et faire évoluer le contenu, enrichissant ainsi largement l’expérience utilisateur.
Prévoir des fenêtres ou des espaces, déplaçables et modulables au sein d’une même page, anticiper la réorganisation du contenu en fonction des interactions, améliorer le ré-agencement de certaines données, proposer l’auto-complémentation des champs, lors de la saisie d’informations,… bref, les utilisations sont multiples et non exhaustives. De plus, si nous couplons ces interactions avec la gestion directe des CSS, de l’affichage et de la disposition des éléments, bien d’autres portes encore plus immergées s’ouvrent alors, et permettent des effets visuels de transitions ou de présentations : comme les classiques menus à onglets, les contenus accordéons, les sliders personnalisés, les fenêtres compilables, etc…
On serait tenté de penser que le DOM Scripting et AJAX cohabitent et vont de pair. En fait, cela est vrai en partie, mais pas systématique. L’un peut exister sans l’autre. Rappelons-nous qu’AJAX est avant tout, un ensemble de technologies dont DOM, Javascript et CSS font également partie.
L’apport d’AJAX permet d’ajouter au DOM le chargement de données complémentaires sans devoir recharger l’intégralité de la page. Rapprochez-vous des articles XMLHttpRequest et le formatage des données ou de jQuery et AJAX, lasynchrone en toute simplicité. Le DOM Scripting seul, permet de manipuler des données reçues ou déjà présentes dans le document, afin de les réorganiser de manière plus ergonomique ou contextuelle, suite à l’interaction de l’application ou de l’utilisateur.
Relation script / document
Affranchissons nous de la problématique du temps de chargement de la page, avant d’essayer d’interagir avec le contenu de nos pages.
En effet, le chargement de la page et de ses fichiers liés se fait de manière procédurale… c’est-à-dire au fur et à mesure de la lecture du document, en partant du haut vers le bas.
Si nous exécutons un code Javascript chargé dans l’entête du fichier HTML, il est certain que la page HTML elle-même, ne sera pas intégralement chargée à ce moment-là. Pour mettre en évidence cette problématique, créons un document HTML contenant simplement 3 paragraphes. Plaçons ensuite un premier <script> dans la balise <head> d’entête du document et un second <script> juste avant la fermeture de la balise </body>.
Chacun de ces script, hormis un élément textuel qui le distinguera, contiendra la même instruction Javascript supposée comptabiliser les balises <p> :
alert("Depuis le <head>/<body> : " + document.getElementsByTagName('p').length)
Lancez la page d’illustration prévue à cet effet. L’évidence veut que le premier message affiche depuis le script : 0 et le second depuis le body : 3.
En fait, lorsque le script placé dans l’entête s’exécute, l’intégralité de la page n’est pas encore chargée, ce qui explique le 0 élément <p> qui ne sont toujours pas chargés. Alors que lorsque le script est lancé depuis la page, juste avant la fermeture de la balise </body>, le contenu précédent est forcément entièrement chargé, et les 3 éléments <p> sont bien interceptés, donc comptabilisés.
Gestion discrète du Javascript
Bien qu’il soit tentant d’apporter énormément de fonctionnalités à nos pages en s’appuyant sur javascript, il est important de prendre en considération que certains internautes désactivent l’utilisation du javascript sur leur navigateur.
Il est donc important de ne pas exclusivement baser l’interaction de nos contenus sur cette mécanique et de penser à proposer des solutions alternatives, certes moins riches en expérience utilisateur, mais toujours fonctionnelles.
En effet, si l’utilisateur a choisi de désactiver Javascript sur son navigateur, aucune interaction n’étant possible, la page peut devenir plus difficilement utilisable en dehors de la lecture de son propre contenu.
Pour cela, il est bon de penser aux interactions du Javascript comme un complément de fonctionnalités, un confort ergonomique supplémentaire et un enrichissement de l’expérience utilisateur.
Externalisation des scripts
De la même manière, il est intéressant et même recommandé, d’externaliser les feuilles de style CSS. Il en va de même pour les fichiers Javascript. Nous allons donc externaliser l’ensemble des fichiers Javascript utilisés dans une page. Il est donc préférable d’ajouter toutes instructions et évènements liés à Javascript, qu’il s’agisse d’interactions propres au document ou liées à l’utilisateur, plutôt que de placer ces évènements dans le document HTML sous forme d’attributs de balise. Par exemple le genre de code ci-dessous est à éviter afin de rendre chaque acteur (HTML, Javascript, CSS…) indépendants les uns des autres et également réutilisables.
<body onload="alert('coucou');">
<p onclick="alert('coucou');">
Les pages possèderont donc leur propre fonctionnement sans Javascript, et s’enrichiront au chargement de celui-ci, si celui-ci est activé pour le navigateur.
Pensez continuellement à tester le comportement de vos pages en désactivant Javascript. A ce sujet, Firefox offre parmi la pléïade d’outils de la web developer tool’s bar, un menu très fonctionnel à cet effet. En ce qui concerne les autres navigateurs, le site libellules.ch propose un article (qui date un peu certes, mais qui reste bien utile), Activer Javascript dans votre navigateur.
Aller plus loin
DOM Scripting: Web Design with JavaScript and the Document Object Model
Jeremy Keith
DOM Scripting: Web Design with JavaScript and the Document Object Model gives you everything you need to start using JavaScript and the Document Object Model to enhance your web pages with client-side dynamic effects. Jermey starts off by giving you a basic crash course in JavaScript and the DOM, then move on to provide you with several real world examples built up from scratch including dynamic image galleries and dynamic menus, and show you how to manipulate web page style using the CSS DOM, a...
DOM Enlightnement
Cody Lindley
Over the past decade, developers have buried the DOM under frameworks that simplify its use. This book brings these tools back into focus, using concepts and code native to modern browsers. You’ll understand the role jQuery plays in DOM scripting, and learn how to use the DOM directly in applications for mobile devices and specific browsers that require low overhead....
