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) :
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 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 :
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'; } }
Code dans la partie BODY :
Donc la fonction JavaScript est chargée avant le code HTML mais elle 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) :
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
Intérêt de cette solution : le JavaScript et le HTML sont bien séparés.
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>.
L'opérateur + signifie additionner mais aussi concaténer si l'un des valeurs est de type string.
Exemple de fonction :
function ftest() { var var1 = 12, var2 = 14, var3 = 'bonjour' ; alert(var1 + var2); alert(var1 + var3); }
Deux variables de type number et une troisième de type string.
La fonction retourne 26 et "12bonjour" donc addition dans le premier cas et concaténation dans le second.
Si une chaine contient le caractère apostrophe elle ne peut pas être délimitée par des guillemets simples mais par des guillemets doubles OU alors il faut "échapper" l'apostrophe dans la chaîne : faire précéder la guillemet simple par le caractère \
Attention en JavaScript (comme dans beaucoup de langages) il y a un caractère pour l'opération d'affectation(=)
et un autre pour l'égalité (==).
Ainsi pour affecter une valeur initiale à une variable il faut écrire, par exemple : X = parseInt(X)
Pour tester si une variable est égale à une certaine valeur il faut écrire, par exemple : if (X==400)
Toutes les propriétés CSS peuvent être utilisées dans un script mais parfois avec une syntaxe un peu différente.
En JavaScript il est interdit d'utiliser le tiret dans un mot car ce caractère signifie soustraction.
Imaginons que vous vouliez via un script, changer la valeur de la propriété background-color d'un élément HTML référencé par
la variable objet titre.
Syntaxe incorrecte : titre.style.background-color = 'yellow'
Syntaxe correcte : titre.style.backgroundColor = 'yellow' ;
La règle est simple : pour écrire dans un script une propriété CSS il faut supprimer le tiret éventuel et remplacer la lettre qui suit par son équivalent en majuscule.
Il y a peut être deux instructions qui vous laissent dubitatif(ve) : x+=20 ; y+=15 ;
En effet au lieu d'écrire : x = x + 20 on peut écrire plus simplement : x+=20
De même au lieu de : x = x - 20 on peut écrire : x-=20
Et si vous voulez changer le signe de delta vous pouvez écrire: delta*=-1
qui remplace : delta = delta * -1
Survolez successivement chaque image et observez !