Les langages Projet : un site complet L interactivité (JavaScript)

Donner vie à la page

Le JavaScript du festival suit toujours le même schéma :

écouter un événement (un clic, un envoi) ;
décider de ce qui change ;
changer une classe ou un attribut -- et laisser le CSS dessiner.

Un menu accessible

<button id="menu" aria-expanded="false" aria-controls="navigation">Menu</button>

aria-expanded dit aux lecteurs d'écran si le menu est ouvert. Le script le tient à jour en même temps que la classe :

const ouvert = navigation.classList.toggle("ouvert");
bouton.setAttribute("aria-expanded", String(ouvert));

toggle renvoie true si la classe vient d'être ajoutée.

Parcourir plusieurs éléments

for (const carte of document.querySelectorAll(".programme .carte")) {
    const visible = choix === "tous" || carte.dataset.categorie === choix;
    carte.classList.toggle("cache", !visible);
}

Avec un second argument, toggle(classe, condition) ajoute la classe si la condition est vraie et la retire sinon : pas besoin de if.

Un seul écouteur pour plusieurs boutons

document.querySelector(".filtres").addEventListener("click", (e) => {
    const bouton = e.target.closest("button");
    if (!bouton) return;
    ...
});

Un clic sur un bouton remonte jusqu'à ses parents : un seul écouteur sur le conteneur suffit. C'est la délégation d'événements.

Les données de l'utilisateur

Tout ce qui vient d'un champ s'insère avec textContent, jamais avec innerHTML : un nom comme <img onerror=...> doit s'afficher tel quel, pas s'exécuter.

3 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

Le menu facile lecon a valider
Filtrer le programme moyen lecon a valider
Les inscriptions difficile lecon a valider