2003-03-21 2005-03-21 Steve Frécinaux debutant expert dom pages_dynamiques Comment insérer un script ECMAScript dans un fichier HTML

Pour rendre dynamique une page web, il faut lui intégrer un script. Pour ce faire, on utilise donc la bien nommée balise <script>, laquelle accepte un attribut type pour définir le langage utilisé. Dans une page HTML, le langage utilisé est quasiment toujours l'ECMAScript, et cet attribut doit donc prendre, dans ce cas, la valeur text/javascript. (Ça peut sembler étrange, mais c'est comme ça, raisons historiques obligent). Un script inclus dans une page ressemble donc à ceci : <script type="text/javascript"> /* Votre script ici */ </script> Cependant, suivant que l'on travaille en HTML ou en XHTML, certains petits problèmes peuvent se présenter. En HTML, l'habitude qui prévaut est d'entourer le script de commentaires HTML : <script type="text/javascript"> <!-- /* Votre script ici */ // --> </script> Cette habitude, héritée des temps anciens où certains navigateurs ne connaissaient pas la balise <script> et affichaient alors bêtement le code source, n'est plus vraiment d'actualité aujourd'hui, car les analyseurs HTML (le validateur du W3C y compris) reconnaissent que le contenu de la balise <script> n'est pas du HTML, et ils ne rouspèteront pas, même si votre code contient des caractères spéciaux tels <, > ou &. Cependant, cette habitude ne coûte rien, et en vertu du sacro-saint principe de précaution, je vous conseillerais de continuer à l'utiliser.

En XHTML, par contre, un double problème se pose : le validateur trébuche systématiquement sur les caractères <, > ou &, lesquels ne sont pas valides en XML en dehors de leurs utilisations dédiées (< et > délimitent des balises, & indique le début d'une entité). la norme XML indique que les analyseurs peuvent supprimer sans condition les commentaires XML, et ceux-ci ne s'en privent pas. Autrement dit, mettre le script "tout nu", ça ne fonctionne pas, et l'encadrer de commentaires ne fonctionne pas non plus. La première solution serait donc d'encoder les caractères délictueux à l'aide des entités &lt;, &gt; et &amp;. Solution tout à fait correcte si ce n'est qu'elle a tendance à rendre le code illisible, et qu'elle peut rapidement s'avérer un vrai casse-tête. L'autre solution est d'utiliser un outil qui nous est fourni par la spécification XML : les sections CDATA. Les sections CDATA permettent d'indiquer à l'analyseur XML que le bloc de texte encadré, contenant des caractères qui seraient autrement reconnus comme du balisage, est en fait du texte brut. Ce qui nous arrange bien, cela va nous permettre d'éviter l'analyse du bloc de code ECMAScript : <script type="text/javascript"> // <![CDATA[ /* Votre script ici */ // ]]> </script> Attention, votre script ne devra pas contenir la chaîne ]]>, qui indiquerait à l'analyseur une fin prématurée de la section CDATA, et provoquerait donc une erreur. Comme les pages XHTML sont souvent servies en tant que HTML et non en tant que XML (notamment parce que Internet Explorer ne le gère pas), et que les analyseurs HTML ne connaissent pas la section CDATA, vous remarquerez que les balises <![CDATA[ et ]]> sont placées dans des commentaires du script.

Il faut aussi savoir que la balise <script> peut être utilisée d'une autre façon, afin d'inclure un fichier externe, lequel ne sera pas sujet aux problèmes discutés précédemment : <script type="text/javascript" src="monscript.js"></script> L'attribut src désigne alors le chemin, relatif ou absolu, vers le fichier contenant le script. Le fichier inclus ne doit contenir que de l'ECMAScript, il ne faut pas y mettre de commentaires HTML, ni de balise <script> ! Cette méthode a quelques avantages par rapport au fait de mettre directement le script dans le code source de la page, grosso-modo les mêmes que les avantages liés aux feuilles CSS externes : les pages sont plus légères, et le fichier du script n'est chargé qu'une seule fois depuis l'internet, d'où un chargement en moyenne plus rapide ; La mise à jour en est facilitée, car il ne faut modifier qu'un seul fichier.

Une fois le script associé à une page, encore faut-il, pour rendre la page réactive, associer une action à une intervention du visiteur (clic, mouvement de la souris). Pour ce faire, il existe, en HTML tout comme en XHTML, toute une série d'attributs, comme onclick ou onmouseover. Dans l'exemple suivant, la fonction DoSomething() est exécutée quand la souris arrive sur l'image : <img src="logo.jpg" alt="OpenWeb.eu.org, pour les standards du Web" width="785" height="258" onmouseover="DoSomething();" /> Mais, dans ce cas, se pose un nouveau problème pour le navigateur : dans quel langage est programmée l'expression DoSomething() ? Pour lever cette ambiguïté, vous devez donc indiquer un langage de script par défaut dans l'en-tête du document HTML : <meta http-equiv="Content-Script-Type" content="text/javascript" /> Il existe une autre façon d'associer des actions aux événements déclenchés par le visiteur, directement à partir du code ECMAScript, par l'intermédiaire des attributs id et class. Dans la mesure où cette façon de faire est supportée par les navigateurs supportant le DOM, je vous encourage à utiliser cette seconde méthode, qui a l'avantage de ne pas encombrer le code HTML avec quoi que ce soit relatif au dynamisme de la page (à l'image de ce qui se fait avec CSS au niveau de la présentation), et de faciliter ainsi les modifications et les mises à jours. Pour poursuivre sur ce sujet, Nous vous invitons à lire Séparer le comportement de la structure.