JavaScript : où placer le conteneur SCRIPT dans une page ?

Le code JavaScript interne ou un lien vers du code JavaScript externe doit être à l'intérieur du conteneur SCRIPT.
Il peut y avoir plusieurs conteneurs SCRIPT dans une même page.

Si lien vers du code JavaScript externe. La syntaxe est alors :
<script src = "chemin relatif vers le fichier JS" ></script>
Le code JavaScript externe est dans un fichier qui a pour extension .js

Mais où placer le OU les conteneurs SCRIPT ? A quel endroit dans la page ?

Prenons un exemple. Nous voulons un script qui permet de modifier la couleur de texte des balises H1 et P de la page : vert ou rouge ou encore bleu selon le boutonde commande cliqué.

Le code HTML de la page(extrait)

... <body> <h1>Modification d'une propriété CSS pour des éléments de la page</h1> <p>Blabla ... <br>Blabla ... <br>Blabla ... </p> <button id = 'vert'>Couleur de texte : vert </button> <button id = 'rouge'>Couleur de texte : rouge </button> <button id = 'bleu'>Couleur de texte : bleu </button> ...

Le code JavaScript

Première technique qui "bugge" ...

Le conteneur SCRIPT est dans la partie HEAD de la page c'est à dire avant la balise fermante </head> .

Le code dans la partie HEAD (extrait) :

... <script> var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; document.querySelector('#vert').onclick = function() { titre.style.color = 'green'; texte.style.color = 'green'; } document.querySelector('#rouge').onclick = function() { titre.style.color = 'red'; texte.style.color = 'red'; } document.querySelector('#bleu').onclick = function() { titre.style.color = 'blue'; texte.style.color = 'blue'; } </script> </head>

Ce code plante !
La console JavaScript indique une erreur pour la ligne 9 ( document.querySelector('#vert').onclick ...): "Cannot set property 'onclick' of null" !
Ce plantage est logique car le script (qui ici a pour objet de manipuler des noeuds du DOM) s'exécute alors que le DOM n'est pas encore construit! Donc pour JavaScript les noeuds identifiés "vert, rouge, bleu" n'existent pas encore !

Les solutions

Première solution : correcte mais un peu ancienne ...

Le script est toujours dans la partie HEAD mais il est inclus dans une fonction nommée, par exemple : change_couleur().
Extrait de la partie HEAD :

... <script> function change_couleur() { var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; document.querySelector('#vert').onclick = function() { titre.style.color = 'green'; texte.style.color = 'green'; } document.querySelector('#rouge').onclick = function() { titre.style.color = 'red'; texte.style.color = 'red'; } document.querySelector('#bleu').onclick = function() { titre.style.color = 'blue'; texte.style.color = 'blue'; } } </script></head>

Code dans la partie BODY :

<body onload ="change_couleur()"> <h1>... ...

Donc la fonction JS est chargée avant le code HTML mais il ne s'exécute que lorsque tout le DOM est construit.

Variante plus moderne

Plus aucune mention du JavaScript dans le code HTML !
Le code JavaScript (toujours dans la partie HEAD) est compris dans une fonction mais qui cette fois est anonyme !
Le code dans la partie HEAD (extrait) :

<script> window.onload = function() { var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; document.querySelector('#vert').onclick = function() { titre.style.color = 'green'; texte.style.color = 'green'; } document.querySelector('#rouge').onclick = function() { titre.style.color = 'red'; texte.style.color = 'red'; } document.querySelector('#bleu').onclick = function() { titre.style.color = 'blue'; texte.style.color = 'blue'; } } // fin fonction </script> </head>

Code de la partie BODY :

<body> <h1>... ...

Intérêt de cette solution : le JS et le HTML sont bien séparés ; plus de mélange !

Troisième solution : celle que je conseille

Le conteneur SCRIPT est placé dans la partie BODY de la page mais après toute la description des éléments HTML donc juste avant la balise </body>.

Le code de la fin de page devient alors :

... <!-- dernier élément HTML--> <script> var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; document.querySelector('#vert').onclick = function() { titre.style.color = 'green'; texte.style.color = 'green'; } document.querySelector('#rouge').onclick = function() { titre.style.color = 'red'; texte.style.color = 'red'; } document.querySelector('#bleu').onclick = function() { titre.style.color = 'blue'; texte.style.color = 'blue'; } </script> </body></html>

On revient donc au code JavaScript qui "buggait" mais comme ce code est à un emplacement différent cette fois-ci ça marche "du feu de Dieu". En effet le script est désormais exécuté après la construction du DOM.

Si vous programmez en JS-jQuery il suffit de rajouter dans la partie HEAD un script qui charge la fameuse bibliothèque. On a alors deux scripts dans la page : un dans la partie HEAD et un autre dans la partie BODY.

... <script src ="jquery.js">chargement de la librairie jQuery</script> </head> <body> <!--code HTML construisant le DOM initial --> <script> <!--script basé sur les fonctions haut niveau de jQuery--> </script> </body></html>
Retour menu