Chapitre 1 : Première page interactive

Objectif

À la fin de ce chapitre, vous avez une page HTML qui charge un fichier JavaScript. Un bouton change le texte d’un paragraphe, sans recharger la page. Vous savez ouvrir la console, y lire un message demandé, et y lire une erreur quand une parenthèse manque ou quand la page ne charge pas le bon fichier.

Ce chapitre ne couvre qu’un geste : relier un bouton déjà écrit à un texte déjà écrit. Nommer une valeur ou décider avec une condition viendra ensuite.

Le dossier et la page

Créez un dossier premiere-page, séparé de vos essais précédents. L’éditeur déjà utilisé pour HTML suffit.

Ajoutez index.html. La page a un titre, un paragraphe et un bouton. Le paragraphe et le bouton portent un id, un nom unique que le script utilisera pour les retrouver. Le texte de départ est neutre. C’est le script qui le remplace au clic.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Première page interactive</title>
</head>
<body>
  <h1>Une page qui réagit</h1>
  <p id="message">En attente d’un clic.</p>
  <button type="button" id="action">Changer le texte</button>
  <script src="script.js"></script>
</body>
</html>

Le h1 reste un titre : le script n’y touche pas. type="button" évite qu’un clic soit pris pour un envoi. message est le paragraphe, action est le bouton. Deux éléments ne partagent pas le même id.

Charger le fichier

Placez la balise script à la fin de body, après le paragraphe et le bouton. Le navigateur lit le document de haut en bas : à cet endroit, les deux éléments existent déjà. Dans head, le même script chercherait un bouton encore absent, et le clic ne ferait rien.

L’attribut src nomme le fichier. Ici, script.js est à côté de index.html. Le chemin est relatif à la page. js/script.js chercherait un sous-dossier qui n’existe pas.

Gardez le JavaScript dans ce fichier, pas dans un attribut onclick : la console nomme alors script.js et une ligne. Créez-le vide, puis ouvrez index.html par un double-clic. Une adresse en file:// suffit pour cette leçon. Le titre, la phrase et le bouton s’affichent. Le clic ne fait rien : le fichier n’a pas encore d’instruction.

Prouver que le script est lu

Avant de modifier la page, vérifiez que le navigateur lit bien ce fichier. Placez une seule ligne dans script.js :

console.log("Le script est lu.");

Enregistrez, rechargez, puis ouvrez la console avec F12. La phrase apparaît au chargement, dans cet onglet, pas dans la page. Gardez cet onglet ouvert : une page immobile y a souvent déjà indiqué pourquoi.

Si la phrase n’apparaît pas

• La page ouverte n’est pas le fichier que vous éditez. Regardez l’adresse : un autre dossier, un ancien onglet, une copie téléchargée.
• Le chemin dans src ne désigne pas script.js. La console nomme un fichier introuvable. Avec un serveur, l’onglet Réseau ajoute souvent le code 404. Avec file://, le code manque parfois, le nom du fichier manquant reste.
• Une erreur plus haut a stoppé la lecture. Le message indique un fichier et une ligne. On corrige cette ligne avant d’ajouter autre chose.

Rechargez après chaque correction : enregistrer ne suffit pas. En cas de doute, Ctrl+F5 ou Cmd+Maj+R ignore la copie que le navigateur avait gardée.

Changer le texte au clic

Le script doit retrouver les deux éléments, puis attendre le clic. Remplacez tout script.js par ceci :

const message = document.getElementById("message");
const bouton = document.getElementById("action");

console.log("Le script est lu.");

bouton.addEventListener("click", function () {
  message.textContent = "Le bouton a été cliqué.";
});

document est la page. getElementById retrouve un élément par son id. message et bouton gardent ce résultat, pour ne pas répéter la recherche. Le chapitre suivant étudiera ces noms.

addEventListener enregistre la réaction. "click" est l’événement. Le bloc est la consigne exécutée à chaque clic. Les fonctions, la saisie et les formulaires viendront plus tard. Un seul événement suffit aujourd’hui.

textContent remplace le texte, pas la balise p. On laisse innerHTML de côté : textContent pose du texte, sans interpréter de balises. L’adresse de la page ne change pas.

Enregistrez, rechargez, cliquez. « En attente d’un clic. » devient « Le bouton a été cliqué. » Un second clic réécrit la même phrase : le script ne se souvient pas encore de l’état précédent. Choisir entre deux phrases demandera une valeur, au chapitre suivant.

Si le clic ne change rien

• Un message qui parle de null, ou qui refuse d’appeler addEventListener, veut dire que getElementById n’a rien trouvé. action et Action sont deux noms. Une lettre, un tiret ou un espace en trop suffit.
• Aucune erreur, et « Le script est lu. » est absent : le fichier chargé n’est pas le vôtre, ou l’ancienne copie est encore affichée.
• La phrase de contrôle est là, le texte ne change pas : l’écoute vise un autre élément, ou le bouton visible n’a pas id="action".

Lire une parenthèse manquante

Retirez, volontairement, la parenthèse fermante du premier appel :

const message = document.getElementById("message";

Enregistrez et rechargez. La console signale une erreur de syntaxe : le fichier script.js, un numéro de ligne, le caractère attendu. Ici, la parenthèse. Le libellé varie selon le navigateur. Le lieu de l’erreur, non.

L’erreur bloque tout le fichier. console.log disparaît aussi : le navigateur ne saute pas la ligne abîmée, il ne construit pas le programme. Remettez la parenthèse, enregistrez, rechargez. La phrase de contrôle revient, le bouton refonctionne.

Lisez la première erreur. Les suivantes répètent souvent la même coupure. Le numéro se compte dans script.js, pas dans index.html. Si la console nomme un autre fichier, ce n’est pas celui que vous éditez.

Exercice

Reconstruisez le dossier vous-même, sans partir d’une page déjà ouverte.

1. Créez premiere-page, avec index.html et script.js côte à côte.
2. Écrivez le paragraphe id="message" et le bouton id="action". Placez script après eux.
3. Faites apparaître « Le script est lu. » dans la console au chargement.
4. Au clic, remplacez le texte par une phrase à vous, différente de l’exemple.
5. Enlevez une parenthèse, lisez le fichier et la ligne, puis réparez.
6. Changez src en autre.js, constatez l’échec, puis rétablissez script.js.

C’est réussi quand vous désignez, sans notes, le fichier que vous modifiez, le fichier que la page charge, et l’endroit où lire l’erreur. Si le clic marche mais qu’une console vide ne vous apprend rien, refaites l’étape 3.

À retenir

• Le navigateur exécute le fichier nommé par src. On le modifie, on enregistre, on recharge.
• La balise script vient après les éléments qu’elle doit retrouver.
• getElementById retrouve un élément. Les deux identifiants sont identiques, majuscules comprises.
• addEventListener("click", ...) attend le clic. textContent change le texte sans recharger.
• La console donne le fichier et la ligne. On lit la première erreur, puis on corrige la source.

La suite

Ce script écrit toujours la même phrase. Il ne choisit rien selon une valeur, et les noms message et bouton ont servi sans être étudiés. Le chapitre 2, « Variables, types et conditions », s’arrête sur ces deux points : ranger un texte, un nombre ou un booléen, puis choisir la phrase avec if. Vous y verrez pourquoi le texte "3" et le nombre 3 ne se comportent pas de la même façon. Gardez le dossier premiere-page. La leçon suivante repart d’une page du même genre, avec un paragraphe et un bouton déjà reliés.