Comment JavaScript modifie une page
JavaScript est le langage qui donne du comportement à une page web. Il lit et change le DOM (Document Object Model), l'arbre d'éléments que le navigateur construit à partir du HTML.
Un filtre de recherche, un menu qui s'ouvre ou un thème sombre sont des changements du DOM faits par un script.
À la fin de cette leçon
Remarque
Je peux changer le texte et l'apparence d'une page avec JavaScript.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| DOM | la page telle que le navigateur la garde, sous forme d'arbre | |
| Sélectionner | retrouver un élément de la page depuis le script | |
| Variable | un nom qui garde une valeur | var titre |
| Fonction | un bloc de code qu'on appelle par son nom | |
| Classe | une étiquette posée sur un élément pour le style | class="cache" |
| Écouteur | un code qui attend un événement et réagit |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Le DOM est l'arbre de la page
Le navigateur lit le HTML et construit un arbre. Le body est une branche de html. Un ul est une branche du body, et chaque li est une branche du ul.
Le script ne change pas le fichier HTML. Il change l'arbre que le navigateur garde, et la page affichée suit aussitôt.
Il faut d'abord trouver l'élément
document.getElementById("count") renvoie l'élément dont l'identifiant est count. document.querySelector(".plat") renvoie le premier élément de classe plat. document.querySelectorAll(".plat") les renvoie tous, dans une liste.
On garde le résultat dans une variable, puis on le change.
Exemple : changer un texte
<h1 id="titre">Menu du jour</h1>
<p id="info">Aucun plat choisi.</p>Changer une classe change l'apparence
Au lieu de régler des couleurs une à une en JavaScript, on ajoute ou on retire une classe, et le CSS fait le reste. element.classList.add("cache") ajoute la classe. remove la retire.
toggle l'ajoute si elle manque et la retire sinon. C'est ce que fait le bouton de thème de la page du labo.
Exemple : cacher et montrer un plat
<ul>
<li id="gratin">Gratin</li>
<li>Soupe</li>
</ul>Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Le script js.py lit app.js, le script de la page d'exemple. Il écrit ses mots en anglais : function, listens for, looks up id.
Lister ce que définit le script
docker exec jupyter python3 steps/js.pyAffiché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 comment le script trouve ses éléments
docker exec jupyter grep -n "getElementById" 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 où le script change une classe
docker exec jupyter grep -n "classList" 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.
Ce que fait le script de la page
Le premier Run liste deux fonctions, filterDishes et toggleTheme, trois écouteurs et quatre éléments retrouvés par leur identifiant. Le second Run montre ces quatre lignes, de la 3 à la 6.
Le troisième montre deux lignes, la 13 et la 22. Dans les deux cas, le script change une classe, hidden ou dark, et le CSS change l'apparence.
Un écouteur attend un événement puis réagit
Une ligne comme bouton.addEventListener("click", changer) dit : quand on clique sur bouton, appelle la fonction changer. Le premier mot est l'élément, le second est le type d'événement.
Un script peut ajouter plusieurs écouteurs. La leçon suivante les étudie en détail.
Exemple : un bouton qui change le titre
<h1 id="titre">Menu</h1>
<button id="bouton" type="button">Changer le titre</button>Une erreur fréquente
Attention
Beaucoup écrivent le script avant les éléments, puis reçoivent une erreur : l'élément n'existe pas encore. Placez la balise script à la fin du body, comme la page du labo, pour que le navigateur ait déjà construit les éléments.