Où placer le code JavaScript 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 le conteneur 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'; }

Ce code JavaScript ne marche pas !
La console JavaScript indique une erreur pour la ligne 9 ( document.querySelector('#vert').onclick ...): "Cannot set property 'onclick' of null" !

Ce plantage est logique. Le code JavaScript (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 !

Les solutions

Première solution qui est correcte mais un peu ancienne ...

Le script est contenu dans la partie HEAD. Il est inclus dans une fonction nommée par exemple : codejs().
En HTML on utilise le gestionnaire d'événements pour exécuter automatiquement cette fonction. Donc la balise BODY devient :

<body onload ="codejs()">

C'est génant pour la clarté du code de mélanger du HTML et du JavaScript ...

Deuxième solution : plus moderne

Plus aucune mention du JavaScript dans le code HTML !
Le code JavaScript (toujours dans la partie HEAD) est compris dans une fonction anonyme qui est lancée seulement après que la page soit bien totalement chargée (donc l'arbre DOM construit).

Le code dans le conteneur SCRIPT est alors :

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

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 chargé et exécuté après après le chargement des éléments HTML (donc 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 bibiothèque et plus précisemment le fichier compressé).

... <script src ="jquery.js">chargement de la librairie jQuery</script> </head> <body> ...
Retour menu