Où écrire le code Javascript

8 min Niveau 1

Il est possible d’écrire du JavaScript à 3 différents endroits au sein d’une page HTML. Tout d’abord dans la balise <head>, ensuite dans la balise <body> et enfin dans un fichier JavaScript séparé.

La dernière méthode est la méthode la plus utilisée, mais vous pourrez également être amené à écrire du code JavaScript dans un des autres éléments. Il est important de noter plusieurs points avant d’aller plus loin :

Les fichiers ne contenant que du JavaScript doivent tous posséder l’extension “.js” (de la même manière que le “.html” pour les fichiers HTML.
Une bonne pratique veut que le code JavaScript soit le plus facile à exporter dans un fichier séparé.
Une autre bonne pratique encourage à placer le code JavaScript à la toute fin de la balise <body> pour des questions de référencement et de rapidité de chargement de page.
Placer le code JavaScript dans la balise <head> peut certaines fois être nécessaire, mais c’est une pratique à proscrire autant que possible. Si vous utilisez le code d’une personne qui stipule la nécessité de placer le JavaScript à cet endroit, suivez ces recommandations tout de même si possible.

Principes généraux

De façon générale, le code JavaScript au sein d’un fichier HTML doit s’écrire entre les balises <script></script>. Ce sont ces balises qui vont permettre à votre navigateur de comprendre qu’il doit exécuter le code qui s’y trouve en tant que JavaScript.

De même, le code JavaScript, qu’il soit placé dans la balise <head> ou <body> du HTML, doit toujours être positionné juste avant la fermeture de celle-ci.

Pour la suite de ce cours, nous utiliserons la structure HTML basique suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cours JavaScript</title>
</head>
<body>
    <h1>Mes premiers pas dans JavaScript</h1>
</body>
</html>

Dans la balise d’une page HTML

Afin d’écrire notre première instruction JavaScript, nous allons placer la balise <script> à la fin de la balise <head> et nous allons y placer l’instruction alert() qui permet d’afficher un message dans une boîte de dialogue.

<script>
    alert('Ceci est ma première instruction JavaScript');
</script>

Nous obtenons donc le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cours JavaScript</title>
    <script>
        alert('Ceci est ma première instruction JavaScript');
    </script>
</head>
<body>
    <h1>Mes premiers pas dans JavaScript</h1>
</body>
</html>

Il ne reste plus qu’à ouvrir le fichier HTML dans votre navigateur et vous devriez voir la boîte de dialogue apparaître comme dans l’exemple qui suit :

Représentation de l'apparition de la boite de dialogue en JavaScript

Dans la balise d’une page HTML

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !