Web et interaction

HTML décrit la structure et le sens du contenu. Un élément est généralement délimité par une balise ouvrante et une balise fermante. <p>Bonjour</p> représente un paragraphe ; <h1>Mes mesures</h1> est un titre principal. Les éléments peuvent être imbriqués. Cette organisation ne se réduit pas à un alignement visuel : elle indique quels contenus appartiennent à une même partie. Un titre reste un titre même si une règle de style lui donne une petite taille.

Un document simple contient un élément html, une partie head pour les informations du document et une partie body pour le contenu de la page. Dans head, title donne notamment le titre de l’onglet ; il ne remplace pas le h1 visible dans body. L’attribut lang de html indique la langue du document. Les liens emploient l’élément a avec un attribut href. Les boutons emploient button. Il est préférable de choisir l’élément qui correspond à l’action plutôt que de donner seulement une apparence de bouton à un paragraphe.

Le navigateur représente le document chargé par un arbre d’objets appelé DOM. Un programme JavaScript peut retrouver certains de ces objets puis en lire ou modifier des propriétés. L’attribut id sert à identifier un élément de manière unique dans le document. La classe, indiquée par class, peut être partagée par plusieurs éléments pour les regrouper. Confondre ces deux rôles provoque des sélections imprécises : un identifiant répété ne garantit plus que l’on vise l’objet voulu.

CSS associe des règles de présentation aux éléments sélectionnés. Dans button { color: navy; }, button est le sélecteur ; color est une propriété ; navy est sa valeur. Les accolades délimitent l’ensemble des déclarations. Un sélecteur .action vise les éléments de classe action ; #ajouter vise l’élément d’identifiant ajouter. La couleur d’un bouton peut donc changer sans modifier son sens HTML ni la fonction exécutée lors d’un clic.

La présentation concerne notamment les couleurs, les espacements, les dimensions et la disposition. Le comportement concerne les actions et les modifications de l’état de l’application. Une règle CSS n’effectue pas un calcul de moyenne. Un gestionnaire JavaScript peut calculer cette moyenne puis modifier le texte affiché. Pour lire une page, pose trois questions distinctes : quels objets existent, comment sont-ils présentés et que se passe-t-il lorsqu’on agit ? Cette séparation aide à localiser un défaut.

Une interface doit rester compréhensible sans dépendre seulement d’une couleur. Un bouton doit porter un texte qui annonce son action ; un champ doit être associé à un libellé. Le clavier permet de déplacer le focus et d’activer les composants adaptés. Les éléments HTML natifs fournissent déjà de nombreux comportements utiles. Choisir un vrai bouton facilite donc l’interaction par plusieurs moyens, alors qu’une simple zone colorée exige souvent du code supplémentaire et peut rester inutilisable au clavier.

Un événement signale un fait observé par le navigateur : clic, saisie dans un champ ou soumission d’un formulaire. Une fonction associée à cet événement est un gestionnaire. L’installation du gestionnaire ne signifie pas qu’il a déjà été exécuté. La page est chargée, le programme retrouve le bouton, il enregistre une fonction pour l’événement click, puis cette fonction sera appelée lors d’une activation. Il faut donc distinguer le moment de l’enregistrement et celui de l’action.

La méthode document.getElementById("ajouter") retrouve l’élément possédant cet identifiant. Pour réussir, l’élément doit déjà exister lorsque cette instruction est exécutée. Un script peut être chargé avec defer pour attendre l’analyse du document. Une faute dans l’identifiant peut conduire à ne trouver aucun objet. La console du navigateur permet de repérer ce type d’erreur, mais il faut ensuite vérifier que le bouton et le texte visés sont bien ceux attendus dans la page.

Dans ce programme, n est un nombre tandis que textContent reçoit le texte à afficher. String transforme explicitement le nombre en chaîne. Le gestionnaire modifie l’état puis l’affichage ; si l’une de ces deux étapes manque, le résultat visuel peut rester incorrect. Si l’on réinitialise n à 0 dans la fonction avant chaque augmentation, chaque clic produit 1. Un tableau de trace après chaque activation permet de distinguer ce défaut d’un bouton qui ne déclenche aucune action.

Pour adapter un comportement, on commence par son cahier des charges. Si un bouton doit augmenter de 2, il faut changer l’opération sur l’état et vérifier que le libellé annonce désormais cette action. Si un bouton doit remettre le compteur à zéro, son gestionnaire doit affecter 0 puis rafraîchir le texte. Changer seulement le texte affiché laisserait la variable inchangée : au clic suivant sur Ajouter, l’ancienne valeur réapparaîtrait augmentée. L’interface et l’état doivent rester cohérents.

Un clic ne provoque pas obligatoirement un échange réseau. Modifier textContent agit dans le navigateur. Une actualisation complète de la page recrée ici l’état initial, car le programme n’enregistre n dans aucun stockage persistant. Une page peut aussi utiliser un serveur ou un stockage local, mais cette possibilité ne doit pas être supposée à partir de son apparence. Les outils du navigateur permettent d’observer séparément le document, la console et les requêtes réseau.

Ouvre S’entraîner à l’adresse /exercices. Pour t’exercer, explique une interaction avant de modifier son code, puis vérifie une suite d’actions et une activation au clavier.