Introduction à JavaScript : intégrer un script dans une page HTML et afficher « Hello World »

Ce premier chapitre installe tout ce dont les suivants ont besoin : une page HTML, un fichier JavaScript relié à cette page, et deux façons d’afficher un message pour vérifier que le lien fonctionne. Vingt minutes suffisent. À la fin, vous aurez écrit et exécuté votre premier programme JavaScript dans un navigateur.

Ce qu’est JavaScript (et ce qu’il n’est pas)

JavaScript est le langage de programmation des navigateurs web. Le HTML décrit le contenu d’une page, le CSS son apparence, JavaScript son comportement : réagir à un clic, vérifier un formulaire, modifier le texte d’un élément, charger des données. Chaque navigateur embarque un moteur qui lit et exécute ce code.

Deux précisions qui évitent des recherches inutiles :

• JavaScript n’a rien à voir avec Java. Le nom date de 1995 et d’un choix marketing. Les deux langages ne partagent ni syntaxe ni usage.
• Il ne se limite plus au navigateur. Avec Node.js, le même langage écrit des serveurs et des outils. Ce tutoriel reste dans le navigateur : c’est l’environnement le plus simple pour apprendre, il est déjà installé sur votre machine.

Créer la page HTML de départ

Ouvrez un éditeur de code (Visual Studio Code convient très bien) et créez un dossier tutoriel-js. Dedans, un fichier index.html avec la structure minimale d’un document :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
</head>
<body>
  <h1>Bonjour</h1>
  <!-- Le contenu de votre site ira ici -->
</body>
</html>

Ouvrez ce fichier dans votre navigateur (double-clic, ou glissez-le dans la fenêtre). La page affiche « Bonjour ». Rien de JavaScript pour l’instant.

La balise script : où placer le JavaScript

Le JavaScript entre dans une page par la balise <script>. Elle peut contenir le code directement, ou pointer vers un fichier externe avec l’attribut src. Trois emplacements sont possibles, et le choix a des conséquences.

En fin de body : simple et sûr

<body>
  <h1>Bonjour</h1>
  <script src="app.js"></script>
</body>

Le navigateur lit le HTML de haut en bas. Quand il atteint la balise, le h1 existe déjà : le script peut le manipuler. C’est l’emplacement classique et il fonctionne toujours.

Dans le head avec defer : l’écriture moderne

<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
  <script src="app.js" defer></script>
</head>

defer demande au navigateur de télécharger le fichier tout de suite mais de ne l’exécuter qu’une fois le HTML entièrement lu. On obtient le meilleur des deux : le téléchargement commence tôt, le code s’exécute quand la page est prête. Les scripts defer s’exécutent dans l’ordre où ils sont écrits.

Dans le head sans rien : l’erreur classique

<head>
  <script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>

Ici le script s’exécute avant que le h1 ne soit construit. Toute tentative de le lire renvoie null, et l’erreur « Cannot read properties of null » apparaît en console. Si vous voyez cette erreur au chapitre 9, vérifiez d’abord l’emplacement de votre balise.

Script inline ou fichier externe ?

Le code peut aussi s’écrire directement dans la page :

<script>
  console.log('Hello World');
</script>

Pratique pour un test de trois lignes, mauvais pour tout le reste : le code n’est pas réutilisable d’une page à l’autre, ni mis en cache par le navigateur, et il se mélange au HTML. Dès ce chapitre, nous travaillons dans un fichier séparé, app.js, placé à côté de index.html.

Premier code : « Hello World » avec alert()

Créez app.js dans le même dossier que index.html, et reliez-le avec la balise defer vue plus haut. Dans le fichier :

alert('Hello World!');

Rechargez la page : une boîte de dialogue affiche le message. alert() est une fonction du navigateur qui bloque la page jusqu’à ce qu’on clique sur OK. Elle sert à vérifier qu’un script s’exécute ; on ne l’utilise pas dans un vrai site, où elle interrompt l’utilisateur.

Le vrai outil : console.log() et la console du navigateur

Remplacez le contenu de app.js :

console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);

Rechargez : rien ne change à l’écran. Ouvrez les outils de développement avec la touche F12 (ou clic droit, « Inspecter »), puis l’onglet Console. Les trois lignes s’y affichent :

Hello World!
Titre de la page : Mon premier script
5

La console est l’endroit où le JavaScript parle. Elle affiche ce que vous lui demandez avec console.log(), mais aussi toutes les erreurs, avec le nom du fichier et le numéro de ligne. Gardez-la ouverte pendant tout le tutoriel : c’est votre premier outil de débogage, et elle permet même de taper du JavaScript directement, sans fichier, pour essayer une idée.

Vos premières erreurs, et comment les lire

Si rien ne s’affiche, la console dit pourquoi. Les trois cas les plus fréquents à ce stade :

• « Failed to load resource: 404 » : le fichier app.js n’est pas trouvé. Vérifiez qu’il est bien dans le même dossier que index.html et que le nom est identique, majuscules comprises.
• « Uncaught SyntaxError » : une faute de frappe dans le code, souvent une parenthèse ou une apostrophe non fermée. Le numéro de ligne vous y conduit.
• Rien du tout, même pas d’erreur : le navigateur affiche une version en cache. Rechargez avec Ctrl+F5 (Cmd+Maj+R sur Mac).

Récapitulatif

• Le JavaScript entre dans une page par <script src="app.js" defer></script> dans le head, ou par la même balise sans defer en fin de body.
• Un fichier externe vaut mieux qu’un script inline dès que le code dépasse quelques lignes.
• alert() confirme qu’un script tourne ; console.log() et la console (F12) sont les outils du quotidien.
• Une erreur se lit dans la console : fichier, ligne, message.

Au chapitre suivant, Variables et types de données, le programme commence à mémoriser des valeurs. Et si vous voulez d’abord une vue d’ensemble du parcours, le guide pour apprendre JavaScript présente les douze chapitres et un plan sur trente jours.