Le tableau des scores
Au gymnase, un élève tient le tableau des scores. Chaque fois qu’un but est marqué, il change le chiffre.
Une page HTML seule ne bouge pas : elle reste figée. Pour qu’elle réagisse quand on clique, on utilise JavaScript.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| JavaScript | Le langage qui fait réagir une page web. | bouton.addEventListener(...) |
| Variable | Un nom qui garde une valeur. On écrit let pour la créer. | let points = 0; |
| Fonction | Un petit programme qui a un nom. | function marquer() { ... } |
| Événement | Quelque chose qui arrive : un clic, une touche pressée. | "click" |
| Écouteur | Une consigne : quand cet événement arrive, lance cette fonction. | addEventListener |
| Condition | Un test avec if. Le code ne marche que si le test est vrai. | if (points >= 3) |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : un bouton qui répond
<button id="bouton">Dis bonjour</button>
<p id="message">Rien pour l’instant.</p>
Lire le code du bouton
La fonction getElementById trouve un élément de la page grâce à son id. On le range dans une variable.
textContent est le texte de l’élément. Écrire dedans change le texte à l’écran.
addEventListener("click", dire_bonjour) dit : au clic, lance dire_bonjour. On écrit le nom sans parenthèses.
Contrôle rapide : le bouton
À toi de jouer
Contrôle rapide : le bouton
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Une variable qui change
Avec let, on crée une variable dont la valeur peut changer. const garde une valeur fixe.
nombre_de_buts = nombre_de_buts + 1 lit la valeur, ajoute 1, puis la range de nouveau.
Les noms sont comme en Python : en français, sans accent, avec des _.
À toi : compter les buts
<button id="bouton">J’ai marqué un but</button>
<p id="affichage">Buts : 0</p>
Exemple travaillé : cinq clics sur le bouton
| Clic | nombre_de_buts avant | Calcul | Texte affiché |
|---|---|---|---|
| 1 | 0 | 0 + 1 = 1 | Buts : 1 |
| 2 | 1 | 1 + 1 = 2 | Buts : 2 |
| 3 | 2 | 2 + 1 = 3 | Buts : 3 (triplé !) |
| 4 | 3 | 3 + 1 = 4 | Buts : 4 (triplé !) |
| 5 | 4 | 4 + 1 = 5 | Buts : 5 (triplé !) |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.