La page qui se remplit
Tu écris un message dans une conversation. Tu appuies sur envoyer. Le message apparaît dans la liste, sans que la page se recharge.
La page a changé pendant que tu la regardais. C’est JavaScript qui lit ce que tu écris, puis qui modifie la page.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| DOM | La page vue comme un arbre d’éléments, que JavaScript peut lire et changer. | body, h1, ul, li |
| Élément | Une balise de la page et son contenu. | <li>Lina</li> |
| Valeur du champ | Le texte que la personne a tapé dans un champ. | champ.value |
| Créer un élément | Fabriquer une nouvelle balise avec JavaScript. | document.createElement("li") |
| Classe | Un nom qu’on ajoute à un élément pour lui donner un style CSS. | classList.add("allume") |
| Ajouter à un parent | Mettre un nouvel élément à la fin d’un autre élément. | liste.appendChild(ligne) |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : lire un champ
<input id="prenom" placeholder="Ton prénom">
<button id="valider">Saluer</button>
<p id="salut"></p>
Lire, puis écrire
Pour lire ce que la personne a tapé, on utilise value sur le champ. C’est un texte.
Pour changer le texte d’un élément, on écrit dans textContent.
Le schéma est toujours le même : trouver l’élément, lire ou changer quelque chose.
Contrôle rapide : lire et écrire
À toi de jouer
Contrôle rapide : lire et écrire
3 questionsEssayez : vos réponses sont notées ici puis oubliées. Connectez-vous si vous voulez conserver votre score et reprendre là où vous en étiez.Se connecter pour conserver mon score
Tes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
À toi : ajouter un élément
<ul id="equipe">
<li>Lina</li>
</ul>
<button id="ajouter">Ajouter un joueur</button>
Exemple travaillé : ajouter un joueur
| Étape | Ligne de code | Effet |
|---|---|---|
| 1 | numero = numero + 1 | Le numéro passe de 1 à 2 |
| 2 | document.createElement("li") | Un li vide est fabriqué, hors de la page |
| 3 | ligne.textContent = "Joueur " + numero | Le li contient « Joueur 2 » |
| 4 | liste.appendChild(ligne) | Le li apparaît à la fin de la liste |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : changer le style
<p id="phrase">Cette phrase peut s’allumer.</p>
<button id="bascule">Allumer ou éteindre</button>