Dans la partie précédente, nous avons découvert la logique de programmation en JavaScript, et nous avons manipulé des structures conditionnelles, des boucles et des fonctions. Nous avons fait une belle partie du chemin, mais pour l’instant, nous nous sommes contentés d’écrire dans la console. Notre prochaine étape est donc de manipuler directement une page HTML pour la rendre interactive. Dans le cadre de notre application Azertype, cela permettra d’afficher en HTML les mots à recopier et le score.
Notre première étape, dans ce chapitre, est d’établir un lien entre le code HTML et le code JavaScript. Cela nous permettra, dans le chapitre suivant, de modifier le code HTML directement depuis notre code JavaScript. Alors, avant de rentrer dans le vif du sujet, regardons ensemble comment une page web est structurée ! 😉
Appréhendez la structure d’une page web
Voici un exemple de body pour une page simple :
<body>
<header>
<h1>AzerType</h1>
</header>
<main>
<div>
<h2>Le jeu</h2>
<p>Un petit texte</p>
</div>
<div>
<h2>Une autre div</h2>
<p>Un autre texte</p>
</div>
</main>
<footer>
@Copyright : OpenClassrooms.
</footer>
</body>Ce code HTML est simple. Il est constitué d’un header avec un titre, d’un corps (main) et d’un footer.
Ouh là là là, ça devient un peu abstrait ton truc, là… 😅
C’est un peu imagé oui, mais revenons ensemble sur l’illustration de l’arbre DOM ci-dessous :
Chaque nœud de cet arbre DOM (header, main, div…) est un objet HTMLElement. Pour le dire autrement, JavaScript a regroupé dans un même objet deux choses :
les informations sur cet objet (son nom, son id, sa position, etc.) : ce sont les propriétés de l’objet ;
ce que cet objet est capable de faire (réagir au clic, par exemple) : ce sont les méthodes.
Récupérez un élément du DOM
Dans ce chapitre, notre but est de récupérer certains éléments de l’arbre DOM, qui a pour racine la balise body. Cependant, vous vous souvenez peut-être que nos fichiers JavaScript sont stockés dans la balise head, qui se situe avant le body.
Utilisez defer pour différer l’exécution du script
Pour manipuler le DOM, JavaScript doit ainsi construire une variable globale, document, qui est donc accessible depuis n’importe où dans notre code. Cependant, pour construire cette variable, la page HTML doit être chargée en entier. Or, le script étant lancé dans la balise head, avant que le body ne s’affiche à l’écran, la page HTML n’existe pas encore. Nous devons donc attendre que la page ait fini de charger avant d’utiliser la variable document.
<script src="scripts/config.js" defer></script>
<script src="scripts/script.js" defer></script>
<script src="scripts/main.js" defer></script>Utilisez différentes syntaxes pour récupérer un élément
JavaScript propose tout un éventail de méthodes pour récupérer les éléments du DOM. Dans ce chapitre, nous en aborderons trois :
getElementById ;
querySelector ;
querySelectorAll.
Récupérez un élément avec getElementById
Dans notre application par exemple, nous affichions jusqu’à maintenant le mot à recopier dans le texte du prompt. Désormais, notre objectif est de l’afficher dans une zone de la page dédiée.
Pour cela, nous pouvons commencer par créer une div dans le HTML. Pour la distinguer des autres, nous lui fournissons un id :
<body>
<div id="zoneProposition">Cachalot</div>
</body>Pour accéder à cette balise, nous allons donc écrire :
let baliseZoneProposition = document.getElementById("zoneProposition");
console.log(baliseZoneProposition);Ici, nous avons demandé à JavaScript, depuis document, donc toute la page : “Trouve-moi un élément HTML qui a pour id zoneProposition”. Puis nous avons mis le résultat dans la variable baliseZoneProposition.
Quand nous faisons un console.log de cette variable, nous constatons bien le contenu de notre variable baliseZoneProposition, et nous retrouvons bien notre div :
Ah oui…. Ca fait beaucoup d'informations, tout ça !
Eh oui… JavaScript propose beaucoup de propriétés et de méthodes sur les objets HTLMElement. Pour vous, ce sont autant d’opportunités d’aller les piocher en fonction de vos besoins !
Par exemple, pour afficher la hauteur de l’élément dans votre console, vous pouvez écrire :
console.log(baliseZoneProposition.clientHeight);Récupérez un élément QuerySelector
Lorsqu’on a un id sur nos éléments, document.getElementById est une bonne option pour les récupérer. Malheureusement, il arrive régulièrement que ça ne soit pas le cas !
Modifions légèrement le contenu de notre page HTML pour illustrer cela :
<body>
<div id="zoneProposition">
Entrez le mot : <span>Cachalot</span>
</div>
</body>Pour mettre le mot Cachalot en gras en CSS, nous aurions écrit :
#zoneProposition span {
font-weight: bold;
}Ce code signifie : “Il faut mettre la police d’écriture en gras pour tous les span contenus dans un élément qui a l’id zoneProposition.”
querySelector nous permet de trouver le premier élément qui correspond au sélecteur CSS proposé :
let baliseZonePropositionSpan = document.querySelector("#zoneProposition span");
console.log(baliseZonePropositionSpan);Et voilà le résultat dans la capture d’écran ci-dessous : nous voyons dans la console que nous avons bien trouvé notre span.
Récupérez plusieurs éléments avec QuerySelectorAll
Modifions à nouveau notre body :
<body>
<div class="zoneChoix">
<input type="radio" name="optionSource" id="mots" value="1" checked>
<label for="mots">Mots</label>
<input type="radio" name="optionSource" id="phrases" value="2">
<label for="phrases">Phrases</label>
</div>
<div class="zoneProposition">
Entrez le mot : <span>Cachalot</span>
</div>
</body>Dans ce code, j’ai ajouté une nouvelle div avec la classe zoneChoix. Cette div contient deux inputs de type radio.
Pour récupérer tous les inputs de type radio d’un seul coup, je peux donc écrire :
let listeInputRadio = document.querySelectorAll(".zoneChoix input");
console.log(listeInputRadio);Et voici le résultat : nous obtenons une NodeList.
Nous voyons bien ici notre NodeList. Pour reprendre l’image de l’arbre DOM, JavaScript a sélectionné dans cet arbre les nœuds qui correspondent à notre sélecteur CSS.
Nous allons devoir parcourir les différents éléments de cette liste un par un pour y accéder. Nous utiliserons donc une boucle :
for (let i = 0; i < listeInputRadio.length; i++) {
console.log(listeInputRadio[i]);
}Et voilà le résultat, nous retrouvons bien le détail de tous nos éléments :
Récapitulons en vidéo
Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :
À vous de jouer !
Dans cet exercice, je vous propose de récupérer plusieurs éléments dont nous aurons besoin dans le chapitre suivant, lorsque nous procéderons à la modification de la page.
Dans le fichier main.js :
Sélectionnez avec la méthode getElementById :
l’input dans lequel le joueur va écrire son texte ;
le bouton de validation.
Sélectionnez avec la méthode querySelector :
l’endroit où le mot proposé sera affiché ;
l’endroit où le score sera affiché.
Sélectionnez avec la méthode querySelectorAll :
les boutons radio de choix.
Corrigé
Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous :
En résumé
Une page web est constituée de balises HTML, et repose sur une structure que l’on appelle DOM. Cette structure permet de relier les balises entre elles.
Pour récupérer un élément du DOM :
utilisez defer dans l’inclusion de vos fichiers JS pour retarder leur prise en compte, afin que la variable document ait le temps d’être créée ;
partez du point d’entrée du DOM : la variable document ;
utilisez les méthodes adaptées : getElementById, querySelector ou querySelectorAll.
Bravo, vous avez franchi la première étape pour modifier le contenu de votre page HTML. Vous savez désormais récupérer des HMLTElements pour les manipuler depuis votre code ! Dans le prochain chapitre, nous allons modifier la page en ajoutant des éléments, ou en modifiant les classes CSS !
