On va pouvoir placer du code JavaScript à trois endroits différents :
head
d’une page HTML ;body
d’une page HTML ;Bien que cette dernière méthode soit généralement recommandée, notamment pour des gros projets, parfois vous serez « obligé » d’écrire votre code JavaScript dans votre fichier HTML.
Pour cette raison, nous allons étudier chacun de ces trois cas dans cette partie.
Le premier endroit où l’on peut placer du code JavaScript est dans l’élément head
d’un fichier HTML.
Dans ce cas, il faudra placer le JavaScript à l’intérieur d’un élément script
.
On placera généralement l’élément script
à la fin de notre élément head
.
On peut également écrire notre code JavaScript au sein de l’élément body
d’un fichier HTML.
Dans ce cas là également, nous utiliserons un élément script
et préférerons le placer à la fin de notre page.
Notez que lorsqu’on écrit du JavaScript dans un fichier HTML, que ce soit dans l’élément head
, le body
ou les deux, on peut utiliser autant d’éléments script
que l’on veut.
Cependant, pour des raisons évidentes de performance et de clarté, on essaie souvent de placer tout notre code JavaScript dans un même élément script
.
Si vous choisissez d’écrire plusieurs scripts dans une même page HTML, ceux-ci serons lus linéairement, c’est-à-dire dans leur ordre d’écriture.
Regardez plutôt l’exemple ci-dessous :
Finalement, on peut écrire notre code JavaScript dans un fichier séparé portant l’extension « .js ».
C’est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même code JavaScript dans plusieurs fichiers HTML.
Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un élément script
et son attribut src
.
En valeur de l’attribut src
, nous allons indiquer le chemin relatif du fichier .js par rapport au fichier .html. Si nos deux fichiers sont dans le même dossier, par exemple, il suffira d’indiquer le nom du fichier JavaScript.
Par exemple, si l'on souhaite lier un fichier JavaScript script.js
à un fichier HTML placé dans le même dossier nous écrirons :
Dans ce cours, j’écrirai mon code JavaScript dans l’élément body
de mes fichiers HTML, afin que vous puissiez voir d’un coup le code HTML et le code JavaScript dans chaque leçon.
C’est la meilleure manière selon moi pour faciliter votre apprentissage.