Où placer du javascript et comment ?
On peut placer le javascript n’importe où dans la page. Et comme pour les css, on peut même externaliser le javascript, ce qui est recommandé d’ailleurs.
En Html5, on place le code javascript dans la balise script, comme ceci :
<script>
// et on place du code
</script>Pour placer le code dans une page externe, c’est comme ça :
<script type="text/javascript" src="monfichier.js"></script>
// ou encore plus simple
<script src="monautrefichier.js"></script>Le javascript est un un code interprété, le navigateur va le lire ligne par ligne jusqu’à la fin. S’il rencontre une erreur, il s’arrêtera immédiatement. Le javascript n’est pas facile à débugger. Mais comme il est devenu incontournable, des outils existent, fournis par les navigateurs eux-mêmes. Chrome, Safari et Firefox disposent chacun d’un ensemble d’outils allant de l’analyse du DOM au log et l’accès au cookies.
Coder en javascript est pour beaucoup une première expérience de programmation. Quelques uns des concepts sont parfois dur à intégrer, principalement les concepts de variable, de fonction, de boucle.
Chaque ligne d’instruction se termine par un " ;", qui est un délimiteur d’instruction. Oublier ce ; en fin de ligne est une erreur de syntaxe classique.
On peut utiliser le javascript de trois façons, globalement :
1) Pendant le chargement de la page
Le navigateur exécute le javascript qu’il rencontre dans la page pendant qu’il la lit. L’exécution du code est alors immédiate. On utilise cette méthode pour afficher certaines informations dynamique dans la page (l’heure, par exemple).
Exemple :
<script>
document.write('hello');
</script>Ecrira "Hello" dans la page, à l’endroit où est placé ce code.
2) Quand le chargement de la page est juste terminé
On peut exécuter du code quand toute la page a été complètement chargée par le navigateur. Cela permet de faire des changements en fonction du contexte ou préparer le terrain pour d’autres scripts (typiquement du code non intrusif, pour une page dite dégradable). On ajoute pour cela, par exemple, une propriété à la balise "body" :
<body onLoad="declenche();">Dans cet exemple, l’événement "onLoad" est déclenché dès que la page a terminé son chargement, et appelle la fonction "declenche()". J’expliquerais plus tard ce qu’est une fonction.
Pourquoi post-poser l’exécution de code javascript au moment où la page est totalement chargée ? Parce qu’on peut vouloir agir sur du code html (on verra comment) qui se trouve en bas de la page. Si on tente d’éxécuter le javascript alors que le navigateur n’a pas encore lu ce bas de page html, rien ne se passera (ou pire, il y aura erreur) car le navigateur ne peut agir sur quelque chose qu’il n’a pas encore lu. Donc exécuter le code une fois la page chargée, c’est s’assurer que tous les éléments de la page sont présents.
3) On peut enfin exécuter du code associé à des événements
Tout une série d’événements peuvent être associés à des éléments de la page, le "onLoad", que l’on vient de voir, en est un, mais le plus connu est le "onClick", qui déclenche un événement lorsque l’on clique sur un élément de la page.
Exemple :
<a href="" onClick="alert('fait gaffe !');">Cliquer ici</a>Ce code fera apparaitre une fenêtre d’alerte avec "fait gaffe !" losque l’on clique sur un lien. Mais le même code placé sur une image :
<img src="" onClick="alert('fait gaffe !');" />Donnera exactement le même résultat, même si une image n’est pas un lien.