Cette page suit toujours le même plan : le principe en une phrase, les étapes dans l'ordre exact, une démonstration interactive, le code, puis les points clés à retenir.
Chaque mot ci-dessous est utilisé exactement dans ce sens dans toute la page.
| Mot | Définition précise |
|---|---|
| Événement | Une action qui se produit dans la page : un clic de l'utilisateur, une touche pressée au clavier, le chargement de la page, etc. |
| Gestionnaire d'événement | La fonction JavaScript qui s'exécute automatiquement quand un événement précis se produit. On dit aussi « fonction de traitement ». |
Écouteur d'événement (addEventListener) | La méthode qui associe un gestionnaire d'événement à un élément et à un type d'événement (par exemple "click"). |
Formulaire (<form>) | Une zone de la page qui regroupe des champs de saisie destinés à recueillir des informations données par l'utilisateur. |
| Champ de saisie | Un élément comme <input>, dans lequel l'utilisateur peut taper du texte ou faire un choix. |
Étiquette (<label>) | Un texte associé à un champ de saisie grâce à l'attribut for, qui doit correspondre exactement à l'id du champ. |
| Sélectionner un élément | Récupérer, en JavaScript, une référence vers un élément de la page, le plus souvent avec document.getElementById("..."). |
Propriété .value | Pour un champ de saisie, ce que l'utilisateur y a tapé, sous la forme d'une chaîne de caractères. |
Propriété .textContent | Le texte affiché à l'intérieur d'un élément ; on peut le modifier en JavaScript pour changer ce qui est affiché à l'écran. |
On utilise le même petit formulaire tout au long de cette fiche : un champ pour taper un prénom, un bouton « Valider », et un message qui apparaît en dessous.
<form id="mon-formulaire"> <label for="pseudo">Ton prénom :</label> <input type="text" id="pseudo" name="pseudo"> <button type="button" id="bouton-valider">Valider</button></form><p id="message"></p>
id unique, qui permettra à JavaScript de le retrouver et de lire ce que l'utilisateur y a tapé.
<form>, qui contient tous les champs du formulaire.<input>, à laquelle on donne un attribut id unique dans toute la page.<label for="..."> au champ, pour indiquer à l'utilisateur ce qu'il doit y saisir : la valeur de for doit correspondre exactement à l'id du champ.<button> pour déclencher une action. On utilise type="button" (et non type="submit") pour empêcher le formulaire de recharger la page.id doit toujours être unique dans toute la page : deux éléments ne peuvent pas avoir le même id.for="pseudo" sur le <label> et id="pseudo" sur l'<input> doivent être écrits exactement de la même façon : c'est ce qui les relie.<button> qui l'affiche, mais c'est du JavaScript (voir la partie suivante) qui lui donne un comportement au clic.<p id="message"></p> est vide au départ : il ne sert qu'à recevoir un texte plus tard, écrit par JavaScript.addEventListener : elle s'exécute automatiquement chaque fois que l'événement choisi (ici "click") se produit sur cet élément.
document.getElementById("...")..addEventListener("click", uneFonction) sur cet élément, en lui donnant la fonction à exécuter au moment du clic. Cet appel a lieu une seule fois, au chargement de la page : il enregistre la fonction, il ne l'exécute pas..value, et on met à jour la page avec .textContent pour afficher le résultat.const bouton = document.getElementById("bouton-valider");bouton.addEventListener("click", function() { const valeur = document.getElementById("pseudo").value; document.getElementById("message").textContent = "Bonjour " + valeur + " !";});
addEventListener("click", ...) ne déclenche rien tout de suite : il se contente d'enregistrer la fonction, pour qu'elle soit exécutée plus tard, au moment du clic..value renvoie toujours une chaîne de caractères, même si l'utilisateur a tapé des chiffres : pour faire un calcul, il faut la convertir avec Number(...) ou parseInt(...).addEventListener peut être écrite directement entre les parenthèses (comme dans l'exemple), ou définie à part et simplement citée par son nom.