Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Le code JavaScript interne ou le 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 conteneur SCRIPT est dans la partie HEAD de la page c'est à dire avant la balise fermante </head> .
Le script dans la partie HEAD (extrait) :
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 !
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 :
Code dans la partie BODY :
Donc la fonction JavaScript est chargée avant le code HTML mais il ne s'exécute que lorsque tout le DOM est construit.
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) :
Intérêt de cette solution : le JavaScript et le HTML sont bien séparés ; plus de mélange !
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 :
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.
On a donc une page qui a la structure suivante :