Un cap pour ce chapitre
Ce que vous saurez faire
- Identifier l’événement et la fonction qui le traite
- Suivre la modification d’un état et de son affichage
- Distinguer définir un gestionnaire et l’exécuter
Les bases utiles pour commencer
Un événement signale une interaction
Le navigateur produit des événements lorsqu’un utilisateur clique, saisit du texte, change une sélection ou soumet un formulaire. Un programme peut associer une fonction à un type d’événement sur un élément. Cette fonction est un gestionnaire. Tous les événements ne sont pas équivalents : input réagit aux modifications d’une saisie, tandis que submit concerne l’envoi d’un formulaire. Pour comprendre une interface, identifiez précisément l’élément, le type d’événement et le traitement associé. Un même bouton peut être visible sans qu’aucun traitement applicatif ait été enregistré.
Un même élément peut recevoir plusieurs types d’événements. Choisir le bon événement fait partie du contrat de l’interface : réagir à chaque modification d’une saisie diffère d’attendre la soumission complète. La réaction doit correspondre au moment où les données sont utilisables.
Enregistrer une réaction ne réalise pas encore l’action
Une instruction comme bouton.addEventListener("click", ajouter) enregistre la fonction ajouter pour les clics futurs. Elle ne signifie pas que le score augmente au moment où la page est chargée. Écrire ajouter() à cet endroit appellerait immédiatement la fonction et transmettrait son résultat au lieu de la fonction attendue. Cette distinction ressemble à celle entre définir une fonction Python et l’appeler. Il n’est pas nécessaire de maîtriser tout JavaScript pour l’expliquer : il faut reconnaître la circulation des fonctions et le moment réel de leur exécution.
La fonction transmise représente une action future. Ses parenthèses d’appel changent donc le sens de l’instruction : elles demandent une exécution immédiate. Pour lire ce code, distinguez la création de l’état, l’enregistrement des gestionnaires et les appels déclenchés plus tard.
L’état et son affichage peuvent diverger
Supposons que score vaille zéro et qu’un élément affiche "0". Lors d’un clic, le gestionnaire exécute score = score + 1 puis compteur.textContent = score. La première instruction change une donnée du programme ; la seconde rend cette nouvelle valeur visible. Si l’on oublie l’affichage, le score peut augmenter en mémoire sans que l’écran le montre. Si l’on remet score à zéro dans chaque appel, l’affichage reste à un malgré plusieurs clics. Une trace qui sépare état interne et texte affiché permet de localiser ces deux défauts.
Le texte affiché est une représentation de l’état. Il peut être recalculé après chaque changement utile. Stocker une donnée et mettre à jour son affichage sont deux opérations séparées dans ces exemples ; aucune synchronisation automatique n’est supposée.
Vérifier les réactions dans plusieurs situations
Une interaction doit être testée après zéro, un et plusieurs événements. Examinez aussi la remise à zéro, une saisie vide et les limites annoncées. Pour une action sur un bouton natif, la navigation et l’activation au clavier doivent rester possibles. Les valeurs saisies sont généralement textuelles et peuvent nécessiter une conversion avant calcul. Enfin, un contrôle côté navigateur améliore l’expérience mais ne garantit pas la validité d’une demande envoyée à un serveur : le serveur doit vérifier les données dont dépend son fonctionnement. Le rôle du client et du serveur sera développé séparément.
Deux clics successifs doivent être examinés même si le premier fonctionne. Une remise à zéro dans le gestionnaire produit le bon résultat au premier clic et révèle son défaut au deuxième. Les tests d’interaction gagnent donc à vérifier des séquences, pas seulement des gestes isolés.
Décomposer une interaction en instants observables
Un compteur commence à deux et son texte affiche deux. Un clic appelle le gestionnaire, qui ajoute trois : l’état devient cinq. L’affectation à textContent remplace ensuite le texte affiché par cinq. Un deuxième clic reprend à cinq et produit huit. Chaque événement déclenche la même fonction, mais avec un état différent.
Si l’affichage reste à deux alors que la variable vaut huit, on cherche la mise à jour du document. Si la variable reste à cinq après chaque clic, on examine une éventuelle réinitialisation. Séparer geste, appel, calcul et affichage permet de localiser deux défauts visuellement proches.
Lire une saisie avant de la traiter
Un champ contenant "12" fournit du texte. Ajouter directement le texte "3" peut construire "123" au lieu du nombre quinze. Le gestionnaire doit donc convertir la saisie lorsqu’un calcul numérique est attendu, puis vérifier son domaine. Un champ vide ou un contenu non numérique exige un comportement annoncé.
La validation côté navigateur peut expliquer l’erreur immédiatement et permettre une correction. Si la donnée est envoyée à un serveur, celui-ci refait les vérifications nécessaires à son propre traitement. Le contrôle de l’interface améliore la saisie ; le contrat du serveur s’applique à toute requête reçue, quelle que soit sa provenance.
À vous de faire varier les choses
Pourquoi le compteur reste-t-il à un ?
Comparez la version correcte et celle qui réinitialise le score. Avancez clic par clic en prédisant l’état et le texte affiché.
Lire les traces complètes
État conservé
score est initialisé une fois avant l’enregistrement du gestionnaire.
- Page chargée
L’état initial est créé ; aucun clic n’a encore eu lieu.
- score
- 0
- Affichage
- 0
- Premier clic reçu
Le gestionnaire ajoute un puis affiche la valeur obtenue.
- score
- 1
- Affichage
- 1
- Deuxième clic reçu
La valeur précédente est conservée avant le nouvel ajout.
- score
- 2
- Affichage
- 2
- Troisième clic reçu
Une nouvelle exécution porte le score et son affichage à trois.
- score
- 3
- Affichage
- 3
État réinitialisé
Chaque appel commence par effacer le score.
- Page chargée
Le score commence à zéro.
- score
- 0
- Affichage
- 0
- Premier clic
Réinitialiser zéro puis ajouter un donne un.
- score
- 1
- Affichage
- 1
- Deuxième clic
L’ancienne valeur un est remplacée par zéro avant l’incrémentation.
- score
- 1
- Affichage
- 1
- Troisième clic
La même suite d’instructions redonne encore un ; il faut déplacer l’initialisation.
- score
- 1
- Affichage
- 1
État modifié, écran inchangé
Le calcul est correct mais la mise à jour du texte manque. L’affichage initial du document vaut zéro.
- Page chargée
La variable et le texte commencent à zéro.
- score
- 0
- Affichage
- 0
- Premier clic
Le gestionnaire augmente la variable. Aucune instruction ne change le texte.
- score
- 1
- Affichage
- 0
- Deuxième clic
L’état atteint deux. L’écran ne prouve donc pas que le clic a été ignoré.
- score
- 2
- Affichage
- 0
- Troisième clic
Le compteur interne atteint trois. Une mise à jour explicite du texte rendrait cette valeur visible.
- score
- 3
- Affichage
- 0
Un résultat visuel inchangé peut cacher plusieurs exécutions. Séparer état et affichage aide à corriger la cause.
De la compréhension à l’autonomie
À vous de résoudre
Cherchez d’abord par vous-même. Vérifiez les résultats demandés, utilisez les indices si nécessaire, puis comparez votre méthode à la correction.
Décrire la chaîne
Un bouton « Ajouter » augmente une variable points puis actualise un paragraphe. Nommez l’événement, le gestionnaire, l’état et l’affichage.
Indice 1
Séparez le geste, la fonction, la donnée et le composant visible.
Indice 2
Le paragraphe ne constitue pas automatiquement la variable du programme.
Comprendre la correction
L’événement est le clic sur le bouton. Le gestionnaire est la fonction associée à ce clic. La variable points représente l’état interne, et le texte du paragraphe représente l’affichage. Nommer séparément ces quatre éléments aide à expliquer un défaut lorsque le geste est reçu mais que le résultat visible ne change pas.
Un compteur bloqué à un
Le gestionnaire d’un clic contient points = 0, puis points = points + 1, puis l’affichage. Pourquoi chaque clic montre-t-il 1 ?
Indice 1
Le gestionnaire recommence depuis sa première instruction.
Indice 2
L’état doit être conservé entre les événements.
Comprendre la correction
Chaque clic réinitialise points à zéro avant d’ajouter un. Il faut initialiser la variable une fois en dehors du gestionnaire, puis seulement l’incrémenter lors des clics. La correction ne concerne pas la couleur du bouton ou l’événement reçu, mais la durée pendant laquelle l’état est conservé.
Une mise à jour invisible
Le gestionnaire augmente correctement score mais n’exécute plus compteur.textContent = score. Après trois clics, que peut-on observer ?
Indice 1
La donnée et le texte de la page sont deux états distincts.
Indice 2
Le navigateur n’invente pas le lien entre eux.
Comprendre la correction
La variable peut valoir trois alors que l’élément affiche encore zéro. L’incrémentation fonctionne, mais la mise à jour du document manque. Il faut rétablir l’affectation du texte après le calcul. Une observation de la variable et du DOM permet de distinguer ce défaut d’un gestionnaire qui ne serait jamais appelé.
Un contrôle côté client
Un formulaire bloque les âges négatifs dans le navigateur. Pourquoi le serveur doit-il quand même vérifier l’âge reçu ?
Indice 1
Les demandes peuvent être construites autrement qu’avec cette interface.
Indice 2
Le navigateur de l’utilisateur n’est pas une source de validation définitive.
Comprendre la correction
Un utilisateur ou un autre programme peut envoyer une requête sans suivre le formulaire prévu, ou modifier les données. Le contrôle côté client facilite une saisie correcte, mais le serveur doit vérifier le domaine autorisé avant de traiter la demande. Les deux contrôles ont donc des responsabilités complémentaires.
Deux clics et deux états
Un compteur commence à 2. Chaque clic ajoute 3 puis actualise le texte. Donnez état et affichage après deux clics. Comparez avec une version réinitialisant à 2 au début de chaque gestionnaire, puis avec une version sans actualisation du texte.
Indice 1
Tracez séparément la variable et le document.
Indice 2
Le texte initial vaut deux dans les trois versions.
Comprendre la correction
La version correcte atteint cinq puis huit, avec le même affichage. La version réinitialisée affiche cinq après chaque clic. La version sans actualisation possède un état final huit mais affiche toujours deux. Ces résultats distinguent un défaut de conservation de l’état d’un défaut de rendu.
Une saisie numérique en apparence
Un champ contient "12" et une seconde donnée contient "3". Le traitement doit calculer leur somme numérique. Donnez le résultat d’une concaténation, le résultat attendu et les étapes du gestionnaire. Indiquez un cas limite à vérifier.
Indice 1
Les valeurs saisies sont des textes.
Indice 2
La conversion doit précéder l’addition numérique.
Comprendre la correction
La concaténation donne "123", tandis que le résultat numérique attendu est quinze. Le gestionnaire lit les textes, vérifie qu’ils représentent des nombres autorisés, les convertit, additionne puis affiche le résultat. Une saisie vide doit être traitée selon une règle explicite, au lieu de produire silencieusement un résultat sans rapport avec le besoin.
Enregistrer deux fois la même intention
Deux fonctions distinctes sont enregistrées sur le clic d’un bouton ; chacune ajoute un au même score puis actualise le texte. Le score initial vaut zéro. Prévoyez le résultat après un clic puis après deux. Proposez un diagnostic si l’utilisateur attend un seul point par clic.
Indice 1
Un événement peut déclencher plusieurs gestionnaires enregistrés.
Indice 2
Chaque fonction réalise son propre ajout.
Comprendre la correction
Un clic déclenche deux ajouts et donne deux ; deux clics donnent quatre. Il faut examiner les enregistrements et conserver un seul traitement d’augmentation pour l’action attendue. Modifier seulement le texte du bouton ne corrigerait pas ce double traitement. La trace des appels permet de distinguer ce défaut d’un ajout de deux écrit dans une seule fonction.
Les erreurs qui méritent un détour
- Appeler le gestionnaire lors de son enregistrement
- Transmettez la fonction attendue pour qu’elle soit appelée au bon événement, pas son résultat immédiat.
- Confondre variable et texte affiché
- Une mise à jour explicite relie généralement les deux dans ces exemples simples.
La fiche à garder
L’essentiel à retenir
- L’événement déclenche une fonction enregistrée.
- Le traitement modifie un état puis éventuellement le document.
- Tester plusieurs événements révèle les réinitialisations involontaires.
Le prochain pas
Retrouver le catalogue de Première
Ce chapitre s’appuie sur le programme officiel de Première (PDF, nouvel onglet). Les explications et exercices sont proposés pour l’apprentissage.