JavaScript et interactivité
Chapitres, TP et corrigés consultables ; les TP sont principalement à réaliser hors de la page. Trois questions d’entraînement interactif facultatif sont proposées dans ce module, sans note ni validation automatique. Le manuel de formation est également consultable depuis le lien en haut de page. Les durées sont des repères pour organiser le parcours ; les lectures, activités, travaux pratiques et évaluations ne doivent pas être additionnés deux fois.
Dans ce module — Accès rapide
MODULE 5 — JavaScript et interactivité
12 heures • Bloc A : Comprendre et construire • Niveau débutant • Édition pédagogique V2.2
1. Finalité et compétences
À la fin de ce module, l’apprenant sait expliquer le rôle de JavaScript, relier un fichier script.js à index.html, écouter un événement, modifier un texte du document et conserver un choix non sensible dans localStorage. Il doit aussi savoir diagnostiquer une erreur simple sans assistance de l’IA.
2. Déroulement des 12 heures
Séquence 1 (2 h) — Rôle de JavaScript, console et première instruction.
Séquence 2 (2 h) — Variables, chaînes, nombres, conditions et fonctions.
Séquence 3 (2 h) — DOM, sélection des éléments et événements.
Séquence 4 (2 h) — Interaction accessible : bouton et message.
Séquence 5 (2 h) — Stockage local, limites et confidentialité.
Séquence 6 (2 h) — Tests, débogage, TP autonome et évaluation.
3. Comprendre la place de JavaScript
HTML décrit le contenu, CSS règle son apparence et JavaScript peut modifier le comportement de la page. JavaScript s’exécute ici dans le navigateur. Il ne faut pas le confondre avec Java. Une page informative doit rester lisible même si le script ne se charge pas.
Voir un exemple, essayer et vérifier
Je vois — exemple concret : Le bouton existe grâce au HTML. JavaScript écoute son clic et remplace un message « En attente » par « Bonjour ! ». Le changement de texte est le résultat observable.
J’essaie — petit geste : Décrivez à voix haute ou par écrit les trois étapes : action du visiteur → événement détecté → message affiché.
Je vérifie — si cela ne fonctionne pas : Si le clic ne produit rien, vérifiez la présence du bouton, le chargement du script et les erreurs de console.
Comprendre et essayer — exemple guidé
Je vois : HTML et CSS décrivent et présentent ; JavaScript peut changer le contenu en réponse à une action.
J’essaie : Distinguez une action réalisable en HTML/CSS d’une interaction nécessitant JavaScript.
Je vérifie : Une modification de contenu ou de style est distinguée d’un comportement déclenché par une action.
Autre façon de faire : Classez des exemples en « contenu », « apparence » ou « comportement » sur papier.
Pour reprendre plus tard : Gardez le tableau de classement avec les éléments qui vous ont fait hésiter et la distinction à revoir.
4. Premières notions, expliquées
Variable
const crée une liaison qui ne peut pas être réaffectée ; let permet une réaffectation. Exemple : const nom = "Camille" ;Faire défiler horizontalement pour voir les lignes longues.
Condition
if (condition) { ... } exécute des instructions seulement si la condition est vraie.
Fonction
Une fonction regroupe des instructions réutilisables. Exemple : function saluer() { return "Bonjour"; }
DOM
Le Document Object Model représente les éléments HTML comme des objets manipulables par JavaScript.
Événement
Un clic, une saisie ou une touche peuvent déclencher une fonction. addEventListener associe une réaction à un événement.
Stockage local
localStorage conserve des chaînes de caractères dans le navigateur, pour l’origine du site. Il ne remplace ni un compte utilisateur ni une sauvegarde garantie.
5. Faire évoluer le projet des modules 3 et 4
Nous conservons exactement les sections Présentation, Compétences et Contact, ainsi que style.css. Nous ajoutons un petit panneau interactif dans la section Présentation, puis un script externe chargé avec defer dans <head>. Conserver les fichiers réalisés aux modules 3 et 4 ; les ajouts JavaScript sont décrits dans les étapes suivantes.
Comprendre et essayer — exemple guidé
Je vois : Une zone de résultat rend l'effet du script observable sans remplacer la navigation existante.
J’essaie : Ajoutez une zone de résultat au projet existant sans modifier sa navigation.
Je vérifie : La zone de résultat apparaît sans supprimer ni modifier les liens existants.
Autre façon de faire : Ajoutez la zone de résultat dans une copie locale ; vérifiez que les liens existants fonctionnent encore.
Pour reprendre plus tard : Conservez votre production de l’activité 2, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
Étape A — Le HTML ajouté dans la section Présentation
<div class="interaction">
<button type="button" id="bonjour">Afficher un message</button>
<p id="message" role="status" aria-live="polite">Aucun message affiché.</p>
<label for="pseudo">Votre prénom (facultatif)</label>
<input id="pseudo" type="text" maxlength="40" autocomplete="off">
<button type="button" id="memoriser">Mémoriser ce prénom</button>
<button type="button" id="effacer">Effacer le prénom</button>
</div>Faire défiler horizontalement pour voir les lignes longues.
button déclenche une action ; id identifie chaque élément ; label associe une consigne au champ ; role="status" et aria-live permettent d’annoncer les changements de texte aux technologies d’assistance.
Comprendre et essayer — exemple guidé
Je vois : Un identifiant mal orthographié empêche le script de retrouver l'élément visé.
J’essaie : Repérez les identifiants HTML utilisés par le script et leur correspondance exacte.
Je vérifie : Chaque identifiant référencé dans le script existe une seule fois dans le document HTML.
Autre façon de faire : Sur une copie des fichiers, reliez chaque identifiant HTML à sa référence dans le script.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
Étape B — Charger le script
Dans <head>, ajouter : <script src="script.js" defer></script>. defer permet d’exécuter le script après l’analyse du HTML, sans bloquer sa lecture.
Étape C — Comprendre script.js ligne par ligne
const bouton = document.querySelector("#bonjour"); // Sélectionne le bouton grâce à son identifiant.
const message = document.querySelector("#message"); // Sélectionne le paragraphe qui affichera le résultat.Faire défiler horizontalement pour voir les lignes longues.
bouton.addEventListener("click", () => { // Déclenche une fonction au clic.
message.textContent = "Bonjour et bienvenue !"; // Modifie le texte sans interpréter du HTML.
}); // Ferme la fonction et l’appel à addEventListener.Faire défiler horizontalement pour voir les lignes longues.
Exemple complet de script.js — à recopier dans le fichier (TP 1 à 4) :
const bouton = document.querySelector("#bonjour");
const message = document.querySelector("#message");
const champ = document.querySelector("#pseudo");
const memoriser = document.querySelector("#memoriser");
const effacer = document.querySelector("#effacer");Faire défiler horizontalement pour voir les lignes longues.
bouton.addEventListener("click", () => {
const prenom = champ.value.trim();Faire défiler horizontalement pour voir les lignes longues.
message.textContent = prenom ? "Bonjour " + prenom + " !" : "Bonjour et bienvenue !";
});
function sauvegarderPrenom(valeur) {Faire défiler horizontalement pour voir les lignes longues.
try {
localStorage.setItem("prenom", valeur);
return true;
} catch (erreur) {Faire défiler horizontalement pour voir les lignes longues.
message.textContent = "Stockage indisponible : le prénom ne sera pas conservé.";
return false;
}
}Faire défiler horizontalement pour voir les lignes longues.
memoriser.addEventListener("click", () => {
const prenom = champ.value.trim();Faire défiler horizontalement pour voir les lignes longues.
if (sauvegarderPrenom(prenom)) message.textContent = "Prénom mémorisé sur cet appareil.";
});Faire défiler horizontalement pour voir les lignes longues.
effacer.addEventListener("click", () => {
champ.value = "";
try { localStorage.removeItem("prenom"); } catch (erreur) { /* stockage indisponible */ }
message.textContent = "Prénom effacé du formulaire.";
});Faire défiler horizontalement pour voir les lignes longues.
try {
champ.value = localStorage.getItem("prenom") || "";
} catch (erreur) {Faire défiler horizontalement pour voir les lignes longues.
message.textContent = "Stockage indisponible : saisie possible sans mémorisation.";
}Faire défiler horizontalement pour voir les lignes longues.
Fin de l’exemple. Tester d’abord le clic, puis la saisie, la mémorisation, le rechargement et l’effacement. Ne saisir qu’un prénom fictif pour l’exercice.
Comprendre et essayer — exemple guidé
Je vois : Le script s'exécute dans un ordre défini, mais un gestionnaire d'événement attend une action.
J’essaie : Suivez l’ordre des instructions de script.js et expliquez quand un événement est déclenché.
Je vérifie : L’écouteur est associé à l’élément attendu et le changement ne survient qu’après l’événement.
Autre façon de faire : Annotez le script ligne par ligne, puis déclenchez l’événement dans le navigateur pour confirmer l’ordre.
Pour reprendre plus tard : Conservez uniquement l’exemple anonymisé, la correction retenue et l’affirmation ou la donnée qu’il faudra contrôler.
6. Stocker un choix avec prudence
localStorage.setItem("prenom", valeur) enregistre une chaîne ; getItem la relit ; removeItem la supprime. La donnée reste propre au navigateur et à l’origine du site, et peut disparaître si l’utilisateur efface ses données ou change d’appareil. Sur une page ouverte en file://, le comportement de localStorage peut varier selon les navigateurs : le TP prévoit un message d’erreur explicite et une solution de repli. Ne jamais y stocker de mot de passe, secret ou donnée sensible.
Comprendre et essayer — exemple guidé
Je vois : Une donnée locale peut survivre au rechargement sans être envoyée à un serveur.
J’essaie : Enregistrez un choix non sensible et observez s’il persiste après rechargement.
Je vérifie : La valeur non sensible est retrouvée après actualisation ; aucune donnée personnelle n’est enregistrée.
Autre façon de faire : Sans compte, testez localStorage dans un navigateur avec une page de démonstration locale : modifiez un choix, rechargez et vérifiez sa conservation. Sur papier, décrivez le protocole, sans déclarer la persistance testée.
Pour reprendre plus tard : Conservez votre production de l’activité 5, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
7. Méthode de diagnostic
1. Vérifier les noms exacts : index.html, style.css, script.js.
2. Ouvrir les outils de développement (souvent F12) puis la console.
3. Lire la première erreur et identifier fichier et ligne.
4. Contrôler les id HTML et les sélecteurs querySelector.
5. Modifier une seule chose, recharger, retester au clavier et sur mobile.
6. Revenir à la dernière version fonctionnelle si nécessaire.
8. Travaux pratiques guidés
TP 1 — Premier clic (30 min)
Ajouter le bouton, charger script.js, afficher un message, puis expliquer les trois lignes essentielles.
Corrigé commenté et approfondissement — à consulter après votre essai
Consignes de vérification : Vérifier que le bouton est présent avant d’associer son écouteur. Cliquez, puis rechargez : le message doit se mettre à jour uniquement après le clic.
Livrable : extrait de code fonctionnel, preuve de test et explication personnelle du comportement observé.
Afficher le corrigé commenté et les critères de réussite
Le bouton déclenche un changement visible, sans erreur dans la console. Exemple : document.querySelector("#saluer").addEventListener("click", () => { document.querySelector("#message").textContent = "Bonjour !"; });. Si la sélection vaut null, contrôler l’identifiant et le moment de chargement du script.
Comprendre et essayer — exemple guidé
Je vois : Un clic doit produire une modification visible et compréhensible de la page.
J’essaie : Associez un bouton à un texte qui change après clic.
Je vérifie : Le clic modifie le texte visible et ne déclenche pas d’erreur JavaScript.
Autre façon de faire : Sans abonnement, créez un bouton et un élément de texte dans une page HTML locale, ajoutez un gestionnaire de clic puis vérifiez que le texte change réellement. Un schéma papier peut préparer le code mais ne valide pas le clic.
Pour reprendre plus tard : Gardez le tableau de classement avec les éléments qui vous ont fait hésiter et la distinction à revoir.
TP 2 — Une condition (30 min)
Modifier le texte selon que le champ prénom est vide ou non ; utiliser trim() pour retirer les espaces.
Corrigé commenté et approfondissement — à consulter après votre essai
Consignes de vérification : Saisissez un prénom, puis seulement des espaces, puis un champ vide. Notez les trois résultats et expliquez le rôle de trim().
Livrable : extrait de code fonctionnel, preuve de test et explication personnelle du comportement observé.
Afficher le corrigé commenté et les critères de réussite
const prenom = champ.value.trim(); message.textContent = prenom ? `Bonjour ${prenom}` : "Bonjour à tous";. Les espaces seuls donnent le message générique. Éviter innerHTML pour afficher une saisie utilisateur.
Pourquoi cette réponse ? Ce corrigé est un exemple de démarche, non une solution unique. Comparez le résultat à la consigne, aux contraintes du module et à la preuve attendue. Si un élément diffère, identifiez précisément lequel avant de modifier votre travail.
Exemple ou vérification autonome Refaites une petite variante de l’exercice et conservez le résultat observé. Si le résultat ne correspond pas à l’attendu, vérifiez les fichiers, les noms et les étapes dans l’ordre.
Comprendre et essayer — exemple guidé
Je vois : Une condition introduit plusieurs chemins d'exécution qu'il faut tester séparément.
J’essaie : Ajoutez une condition et vérifiez séparément ses deux issues.
Je vérifie : Les deux valeurs testées produisent deux résultats distincts et attendus.
Autre façon de faire : Sans abonnement, créez une condition dans un fichier JavaScript local et testez ses deux issues dans le navigateur. Sur papier, vous pouvez prévoir les résultats, mais pas confirmer l’exécution.
Pour reprendre plus tard : Notez le résultat attendu, l’observation obtenue et l’éventuel écart à reproduire à la prochaine séance.
TP 3 — Une erreur volontaire (30 min)
Renommer temporairement l’id du bouton ; constater l’erreur, trouver la cause et rétablir le fonctionnement.
Corrigé commenté et approfondissement — à consulter après votre essai
Consignes de vérification : Changez exprès l’identifiant HTML du bouton sans modifier le JavaScript. Notez le symptôme, l’erreur console, la cause et la réparation. Restaurer ensuite le bon identifiant.
Livrable : extrait de code fonctionnel, preuve de test et explication personnelle du comportement observé.
Afficher le corrigé commenté et les critères de réussite
Symptôme : le clic ne produit plus rien ; cause probable : querySelector renvoie null ; erreur possible : Cannot read properties of null (reading addEventListener). Correction : harmoniser les identifiants et vérifier que le script s’exécute après création du DOM.
Comprendre et essayer — exemple guidé
Je vois : Une erreur de nom peut interrompre le script ; la console aide à identifier sa cause.
J’essaie : Introduisez volontairement une faute de nom puis identifiez le message d’erreur.
Je vérifie : La console indique une erreur liée au nom fautif ; le rétablissement du nom supprime l’erreur.
Autre façon de faire : Sans compte, créez une copie locale du script, modifiez volontairement un nom de variable, ouvrez la console du navigateur et relevez le message exact ; restaurez ensuite le nom. Sur papier, anticipez seulement le type d’erreur.
Pour reprendre plus tard : Conservez votre production de l’activité 8, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
TP 4 — Mémoire locale (45 min)
Enregistrer un prénom facultatif, actualiser la page, constater sa restauration puis l’effacer. Vérifier le cas où le stockage est indisponible.
Corrigé commenté et approfondissement — à consulter après votre essai
Consignes de vérification : Enregistrez un prénom non sensible, rechargez, puis effacez-le à l’aide d’un bouton dédié. Testez aussi un mode où le stockage est bloqué : l’interface doit rester utilisable.
Livrable : extrait de code fonctionnel, preuve de test et explication personnelle du comportement observé.
Afficher le corrigé commenté et les critères de réussite
Dans try/catch : localStorage.setItem("prenom", valeur) ; lecture avec getItem ; suppression avec removeItem. Si une exception survient, conserver le fonctionnement sans persistance et afficher une information discrète. Ne jamais stocker de secret ni d’information personnelle sensible.
Comprendre et essayer — exemple guidé
Je vois : Conserver une préférence impose aussi de prévoir comment l'effacer.
J’essaie : Enregistrez une préférence, rechargez et ajoutez un moyen de l’effacer.
Je vérifie : La préférence persiste après rechargement puis disparaît après activation de l’effacement.
Autre façon de faire : Sans abonnement, enregistrez une préférence dans le stockage local, rechargez, puis effacez les données du site et vérifiez que la préférence disparaît. Une simulation écrite ne remplace pas ces trois observations.
Pour reprendre plus tard : Conservez votre production de l’activité 9, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
TP 5 — Accessibilité (30 min)
Tester Tabulation, Entrée et Espace ; vérifier le focus visible et le message annoncé.
Corrigé commenté et approfondissement — à consulter après votre essai
Consignes de vérification : Avec la souris débranchée, utilisez Tab, Entrée et Espace. Vérifiez l’ordre de focus, le contraste de l’indicateur et la lecture du message dans une région aria-live.
Livrable : extrait de code fonctionnel, preuve de test et explication personnelle du comportement observé.
Afficher le corrigé commenté et les critères de réussite
Utiliser un véritable <button type="button"> plutôt qu’un div cliquable ; CSS :focus-visible pour le focus ; <p id="message" aria-live="polite"> pour annoncer un changement non urgent. Le bouton doit être activable par Entrée ou Espace.
Comprendre et essayer — exemple guidé
Je vois : Un bouton accessible doit fonctionner sans souris et rendre son résultat perceptible.
J’essaie : Activez le bouton au clavier et vérifiez que le résultat est annoncé textuellement.
Je vérifie : Tab atteint le bouton, Entrée ou Espace l’active et le résultat est visible en texte.
Autre façon de faire : Sans compte, ouvrez la page locale au clavier : utilisez Tab, Maj+Tab et Entrée pour contrôler l’ordre du focus et l’activation du bouton. Une grille papier sert à consigner les résultats, pas à les présumer.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
Entraînement interactif facultatif — V0.6.0
Ces questions complémentaires ne constituent ni une note ni une validation de compétence. Aucune réponse n’est enregistrée.
9. Autoévaluation — dix questions
1. Que fait JavaScript que HTML seul ne fait pas ?
2. À quoi sert defer ?
3. Quelle différence entre const et let ?
4. Que représente le DOM ?
5. Que renvoie querySelector si aucun élément ne correspond ?
6. Pourquoi employer textContent plutôt que innerHTML pour afficher un prénom ?
7. Quel événement écoute le bouton ?
8. Comment supprimer une valeur de localStorage ?
9. Pourquoi localStorage ne constitue-t-il pas une sauvegarde fiable entre appareils ?
10. Que vérifier si un clic ne produit aucun effet ?
Afficher le corrigé
10. Corrigé de l’autoévaluation
1. Il peut réagir aux actions et modifier la page.
2. Il diffère l’exécution du script externe après l’analyse du document.
3. const ne peut pas être réaffecté, let peut l’être.
4. La représentation manipulable du document HTML.
5. null.
6. Pour traiter le prénom comme du texte et éviter d’injecter du HTML.
7. click.
8. removeItem("clé").
9. Les données sont locales au navigateur, à l’origine et peuvent être effacées.
10. Le fichier chargé, la console, les identifiants et les écouteurs d’événements.
11. Exercice autonome (60 min)
Sans demander de code à l’IA : ajouter un bouton « Changer le message » qui alterne entre deux phrases ; mémoriser le dernier choix si le stockage est disponible ; ajouter un bouton de remise à zéro ; vérifier le fonctionnement au clavier et après rechargement. Fournir trois captures (mobile, ordinateur, console sans erreur) et un paragraphe expliquant chaque changement.
12. Grille de réussite et transition
☐ HTML reste sémantique et lisible sans JavaScript.
☐ Le script est externe et les événements fonctionnent.
☐ Le stockage est facultatif et effaçable.
☐ Les erreurs courantes sont identifiées dans la console.
☐ L’apprenant explique et reproduit le résultat sans IA.
Fin du bloc A — 56 heures cumulées. Le module 6 introduira Git et GitHub pour conserver l’historique de cette réalisation, comparer les modifications et préparer la publication.
Comprendre et essayer — exemple guidé
Je vois : Une grille de recette compare les exigences aux preuves observées, pas aux intentions.
J’essaie : Évaluez le projet avec la grille de réussite et notez un point restant à corriger.
Je vérifie : La grille relève au moins un succès observable et une anomalie assortie d’une action corrective.
Autre façon de faire : Remplissez la grille sur papier, puis vérifiez chaque critère technique dans la page locale.
Pour reprendre plus tard : Conservez votre production de l’activité 11, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
Atelier d’approfondissement — parcours guidé
Ce parcours complète les travaux pratiques du module. Il peut être réalisé sans abonnement payant et ne constitue pas une évaluation certifiante.
Ce que vous allez apprendre — Faire fonctionner une interaction JavaScript et vérifier son état accessible.
Matériel nécessaire — Ordinateur, éditeur de texte et navigateur avec JavaScript activé.
Organisation sur deux écrans — Vous pouvez lire ce cours sur téléphone et effectuer les manipulations sur ordinateur. Gardez les deux appareils à portée de vue ; aucun transfert de données entre eux n’est obligatoire.
Programmer un bouton afficher/masquer
Comment procéder concrètement
- Créez un dossier atelier-js avec index.html et app.js.
- Copiez dans chaque fichier la partie correspondante de l’exemple du corrigé.
- Ouvrez index.html et repérez le bouton « Afficher l’aide ».
- Activez-le avec la souris puis avec Tab et Entrée ; le texte doit apparaître et le libellé changer.
- Activez-le de nouveau ; le texte doit disparaître. En cas de problème, ouvrez la console du navigateur et notez le message.
Si vous n’avez qu’un téléphone — Sur téléphone, testez le bouton au toucher ; pour la création et le contrôle au clavier, privilégiez un ordinateur.
Repères pratiques — Séparer le HTML du JavaScript
À réaliser concrètement : Dans le dossier « projet-fil-rouge », gardez index.html et style.css. Créez app.js à côté. Placez la balise <script src="app.js" defer></script> dans <head> du HTML, le bouton et le paragraphe dans <body>, et uniquement les instructions JavaScript dans app.js. Le mini-exemple autonome du corrigé est une alternative de test : ne remplacez pas votre projet sans sauvegarde.
Si vous êtes bloqué : Si le bouton ne réagit pas, vérifiez l’orthographe de app.js et les identifiants ; si la console indique null, comparez les sélecteurs aux id du HTML.
Essai autonome, sans recopier le modèle : Changez le texte d’aide et vérifiez qu’il apparaît et disparaît au clavier.
Étape 1 — Préparer le HTML
À faire : Ajoutez un bouton et une zone d’aide.
Exemple ou résultat modèle : <button id="aide" type="button" aria-expanded="false">Afficher l’aide</button><p id="texte-aide" hidden>Commencez par lire la consigne.</p>
Vérification : La zone est masquée au chargement.
Étape 2 — Ajouter le JavaScript
À faire : Placez le script dans un fichier app.js chargé avec defer.
Exemple ou résultat modèle : const b = document.querySelector('#aide'); const p = document.querySelector('#texte-aide'); b.addEventListener('click', () => { p.hidden = !p.hidden; b.setAttribute('aria-expanded', String(!p.hidden)); });
Vérification : Chaque clic inverse la visibilité et l’attribut aria-expanded.
Étape 3 — Tester au clavier
À faire : Atteignez le bouton avec Tab, puis activez-le avec Entrée et Espace.
Exemple ou résultat modèle : Le texte apparaît puis disparaît sans souris.
Vérification : Aucune erreur n’apparaît dans la console.
Si cela ne fonctionne pas : pistes de dépannage
Aucune réaction : vérifiez le nom app.js, src et defer. Erreur « null » : vérifiez les identifiants aide et texte-aide dans le HTML et le JavaScript.
Afficher le corrigé commenté
Corrigé modèle : l’état visible dépend de p.hidden ; aria-expanded vaut true lorsque l’aide est visible. Vérifiez les identifiants si le bouton ne réagit pas.
Exemple complet à reproduire
Fichier : index.html
<!doctype html><html lang="fr"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Aide interactive</title><script src="app.js" defer></script>
</head><body>
<button id="aide" type="button" aria-expanded="false" aria-controls="texte-aide">Afficher l’aide</button>
<p id="texte-aide" hidden>Commencez par lire la consigne.</p>
</body></html>Fichier : app.js
const bouton = document.querySelector('#aide');
const aide = document.querySelector('#texte-aide');
bouton.addEventListener('click', () => {
aide.hidden = !aide.hidden;
const ouvert = !aide.hidden;
bouton.setAttribute('aria-expanded', String(ouvert));
bouton.textContent = ouvert ? 'Masquer l’aide' : 'Afficher l’aide';
});Fichier ou livrable modèle : index.html + app.js. Copiez ou adaptez ce contenu dans votre propre dossier de travail.
Pourquoi ce corrigé est valable
Le chargement defer garantit que les éléments existent au moment où le script les recherche. L'état visuel et aria-expanded évoluent ensemble. Le bouton HTML fonctionne avec Entrée et Espace. Testez l'état initial et deux clics successifs.
Preuve de vérification attendue
Après réalisation, conservez le fichier produit et une note indiquant la manipulation testée, le résultat réellement observé et les éventuelles limites. Ne cochez pas un test non effectué.
Bilan personnel : notez ce qui fonctionne, ce qui reste à vérifier et une amélioration possible. Aucun résultat de cet atelier n’est envoyé au site.
Complément de corrigé TP — exemple de vérification et diagnostic
Interaction JavaScript — Tester l’état avant et après le clic, puis au clavier. Vérifier que le script chargé correspond au fichier édité et que le message obtenu est compréhensible.
Variante autonome : changer un seul élément de votre réalisation, prévoir le résultat, effectuer le test et consigner ce qui a réellement été observé. Plusieurs solutions sont acceptables si elles satisfont les critères du TP.
Laboratoire ludique facultatif — Le bouton qui prend vie
Activer HTML, CSS et JavaScript pour comprendre leurs effets visibles.
J’observe, j’essaie, je comprends. Aucune note ni classement. Cette activité facultative n’est pas nécessaire pour poursuivre le parcours et ne valide pas, à elle seule, une compétence. Tu peux recommencer autant de fois que tu le souhaites.
Ouvrir l’activité Le bouton qui prend vieL’activité s’ouvre dans une page dédiée, adaptée au téléphone et utilisable au clavier. Le retour au module est prévu. Aucune donnée n’est envoyée à un serveur.