Comment une page réagit à un clic
Un événement est ce qui se passe sur une page : un clic, une touche pressée, un formulaire envoyé. Un script peut attendre un événement avec un écouteur, puis réagir.
Les formulaires sont l'endroit où cela compte le plus : une adresse électronique fausse ou un âge absurde se repèrent avant l'envoi.
À la fin de cette leçon
Remarque
Je peux réagir à un clic et vérifier les champs d'un formulaire.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Événement | une chose qui arrive sur la page | click |
| Écouteur | un code qui attend un événement et réagit | |
| Champ | une case où l'utilisateur écrit ou choisit une valeur | |
| Validation | vérifier qu'une valeur respecte les règles attendues | |
| Envoi | l'événement submit, quand le formulaire part | |
| Message d'erreur | la phrase qui dit quoi corriger |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Un écouteur relie un événement à une fonction
La ligne element.addEventListener("click", fonction) dit : quand cet événement arrive sur cet élément, appelle cette fonction. Les types courants sont click, input (chaque frappe) et submit (l'envoi d'un formulaire).
La fonction reçoit un objet event qui décrit ce qui s'est passé.
Exemple : un compteur de clics
<p>Clics : <span id="total">0</span></p>
<button id="plus" type="button">Ajouter un clic</button>La valeur d'un champ est toujours un texte
champ.value donne ce que l'utilisateur a écrit. C'est toujours du texte, même quand il écrit 18. Pour calculer, on convertit avec Number(champ.value).
Le texte vide "" veut dire que rien n'est écrit. trim() retire les espaces autour, et il faut le faire avant de tester si le champ est vide.
Le HTML sait déjà faire des vérifications simples
Des attributs vérifient un champ sans script : required exige une valeur, type="email" attend une adresse, min et max bornent un nombre, pattern donne une forme.
Le navigateur affiche son message avant l'envoi. Mais un script ou un outil comme curl peut contourner le navigateur : le serveur vérifie donc toujours aussi.
Exemple : un formulaire qui vérifie son champ
<form id="inscription">
<label for="age">Votre âge</label>
<input id="age" type="text">
<p id="message"></p>
<button type="submit">Valider</button>
</form>Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Les Run lisent les fichiers app.js et index.html de la page d'exemple avec grep, qui affiche les lignes contenant un mot.
Voir les écouteurs de la page
docker exec jupyter grep -n "addEventListener" site/app.jsAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Voir qui arrête l'envoi
docker exec jupyter grep -n "preventDefault" site/app.jsAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Voir le champ et son étiquette
docker exec jupyter grep -n "<input\|<label" site/index.htmlAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Compter les lignes qui exigent une valeur
docker exec jupyter grep -c "required" site/index.htmlAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que montrent ces quatre commandes
Le premier Run montre trois écouteurs, aux lignes 26, 30 et 33 : submit, input et click. Le deuxième montre event.preventDefault(), à la ligne 27.
Le troisième montre le champ word et son étiquette. Le dernier écrit 0 : ce formulaire n'a aucun attribut required, car un champ vide est valable, il montre tous les plats.
preventDefault arrête l'envoi habituel
Par défaut, un formulaire envoyé recharge la page. Dans l'écouteur de submit, event.preventDefault() arrête cela. Le script peut alors vérifier les champs et écrire un message sans quitter la page.
Un bon message dit quoi corriger : « Entrez un âge entre 16 et 99 », pas « Erreur ».
Une erreur fréquente
Attention
Beaucoup pensent que la vérification dans la page suffit. Non : quelqu'un peut envoyer des données sans passer par la page. Gardez la vérification de la page pour aider la personne, et refaites-la toujours sur le serveur, qui seul décide.