Manipulation du DOM

Technologie web 2

Johan Girod

Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation pour les documents HTML

Le document est représenté sous forme d'arbre
Le DOM est implémenté par les navigateurs qui l'utilisent pour afficher la page
Le DOM est accessible aux programme JavaScript qui l'utilisent pour manipuler la page

Le document est représenté sous forme d'arbre

Le DOM est implémentée par les navigateurs

Rendering pipeline : parsing, render tree, layout, paint

C'est l'étape de parsing (ou analyse syntaxique)

Ressources

Le DOM est accessible aux programme JavaScript qui l'utilisent pour manipuler la page

Le DOM est accessible via l'objet document

L'API du DOM

Récupérer des noeuds

Lire et modifier les informations des noeuds


	/* Modifier le style */
	h1.style.backgroundColor = 'red';

	/* Lire et modifier les attributs */
	h1.setAttribute('data-id', 'my-id');
	h1.getAttribute('data-id'); // "my-id"
	a.href = 'https://google.com'; // Certains attributs sont accessibles et modifiables directement

Créer des noeuds et les insérer dans le DOM

Les attributs de formulaires

Supprimer et se déplacer entre les noeuds

À vous de jouer !

johangirod.com/cours

Exercices / TP

Mise en place

Ce TP est disponible sur gitlab. Vous pouvez le cloner avec la commande suivante

git clone https://sources.univ-jfc.fr/techno-web-2/tp-2.git

Utilisez les identifiants de votre compte universitaire pour vous connecter.

Ouvrez le dossier tp-2 dans votre éditeur de code (VSCode par exemple).

Ce projet contient un fichier index.html et un fichier script.js. Le fichier script.js est vide. C’est dans ce fichier que vous allez écrire votre code JavaScript.

Ouvrez le fichier index.html dans votre navigateur.

Exercice 1 : modifier un élément avec la console

Nous allons nous familiariser avec la modification du DOM en utilisant la console du navigateur.

Faire un clique droit sur la page et sélectionner « Inspecter » dans le menu contextuel. Cela ouvre l’inspecteur du navigateur et affiche le code HTML correspondant.
Cliquez sur l’onglet console et tapez la commande suivante :
```
$0;
```
Que contient la variable $0 ? Essayez de modifier l’élément selectionné dans l’inspecteur et de taper la commande $0 à nouveau. Que se passe-t-il ?
Faire en sorte que $0 pointe vers le noeud DOM <p> qui contient le texte « Bonjour tout le monde ! ». Vous pouvez vous aider du bouton « selection » en haut à gauche de l’inspecteur (sous forme de pointeur de souris). Il vous permet de selectionner un élement directement depuis la page web.
Dans la console, tapez la commande suivante pour changer le texte de l’élément sélectionné :
```
$0.textContent = 'Bonjour les amis !';
```
Changez la couleur du texte en rouge en utilisant la propriété `style de l’élément (voir la slide).
Supprimer le noeud de la page en utilisant la méthode remove().

Exercice 2 : modifier un élément avec du code JavaScript

Nous allons réaliser une diapositive d’images qui changent toute les 2 secondes.

Créez un fichier script.js et liez au fichier index.html en utilisant la balise <script> dans le <head> du fichier index.html.

<script defer async src="./script.js"></script>

Dans le fichier script.js, récuperez le noeud existant de l’image dans une variable imageNode. Le noeud HTML est une image img avec pour id diapo.
Créez une fonction changeImage() qui change l’attribut src pour une image aléatoire. Pour cela, générez un id aléatoire entre 1 et 500 et utilisez cet id pour construire l’url de l’image. Par exemple, si l’id aléatoire est 3, l’url vers l’image sera https://picsum.photos/id/3/400/400.
Appelez la fonction changeImage() toutes les 2 secondes en utilisant la fonction setInterval.
```
setInterval(changeImage, 2000);
```

Corrigé

Exercice 3 : Remplacer des éléments avec du code JavaScript

Écrire un script qui cache tous les éléments avec la class hidden par un rectangle noir (on pourra utiliser l’attribut style pour changer la couleur de fond).

Corrigé

Exercice 4 : Un memory en JavaScript

Nous allons développer un petit jeu de mémoire. Le but est de faire apparaitre 5 emoji aléatoires pendant 10 secondes. Ensuite, les emoji disparaissent et on pose la question à l’utilisateur : « Sous quelle carte se trouve l’emoji X ? ». L’utilisateur doit répondre en tapant le numéro de la carte. On retourne alors la carte correspondante à la réponse de l’utilisateur. Si la réponse est correcte, on affiche un message de félicitation.

Créez une fonction getRandomEmojis() qui retourne un tableau de 5 emoji aléatoires. Pour cela vous pourrez utiliser le tableau de base suivant :

// prettier-ignore
const emojis = [ '⛔️', '❇️', '🏰', '🐺', '⚜', '😅', '🚳', '🕞', '❣', '🏬', '🛎', '🌕', '🌃', '🏡', '🎑', '🍯', '🐍', '🔕', '🐿', '💮', '😹', '↕️', '🌵', '🕗', '♒️', '🚽', '🕋', '📔', '🛂', '🎒', '🐼', '♏️', '⏸', '🅰️', '🌈', '🌂', '🚣', '🎇', '❄️', '👙', '🌹', '🍸', '🛳', '🎟', '😱', '🕚', '👳', '😑', '⌚️', '💛', '🆚', '🔼', '🈯️', '☀️', '😳', '♊️', '🌖', '♋️', '🚀', '🚱', '🚊', '📿', '⏫', '9️⃣', '🗾', '🏜', '🍦', '✋', '🍀', '🗿', '🙎', '✖️', '🆕', '🎮', '🔒', '💸', '👲', '🏢', '🔑', '🐶', '👪', '😻', '🌼', '👠', '🧀', '👎', '🙌', '🐻', '🕐', '👯', '🕝', '😺', '😈', '💴', '🎾', '🚙', '❤️', '♑️', '🌲'];

Corrigé

Creer une fonction displayEmojis(emojis) qui prend en paramètre un tableau d’emoji et qui affiche les emoji dans le tag <ol> avec l’id emoji-game. Chaque emoji sera affichée dans un element <li>, par exemple : <li>☀️</li>.

Corrigé
Créer une fonction startGame qui appel successivement les fonctions getRandomEmojis et displayEmojis, puis appelez-là dans le corps du script. Vérifiez que les emojis s’affichent bien dans le navigateur.

Corrigé
Créer une fonction hideEmoji qui cache l’emoji de chacune des carte en modifiant la couleur à transparent. Appelez cette fonction dans startGame() après 5 secondes. Vous pouvez utiliser la fonction setTimeout pour appeler une fonction après un certain délai.

Corrigé
Créer une fonction askQuestion(randomEmojis) qui pose la question à l’utilisateur : « Sous quelle carte se trouve l’emoji ? ». <x> étant une des emojis qui se trouve sous une carte. Vous pourrez utiliser la fonction prompt vu au TP précédent. Cette fonction renvoie true si la réponse de l’utilisateur est correcte et false sinon.

Appeler cette fonction après 5100 millisecondes avec la fonction setTimeout.

Corrigé

Si la réponse de l’utilisateur est correcte, réafficher toutes les emojis et ajouter la class “success” à la div avec l’id emojis. Pour cela, on créera une fonction anonyme qui sera passée en argument de setTimeout, et qui appellera la fonction askQuestion

Corrigé
Si la réponse de l’utilisateur est incorrecte, réafficher toutes les emojis, et afficher le texte « Perdu 😔 » dans la div avec l’id emoji-game-message.

Corrigé
Bonus :

Faire en sorte que le jeu boucle tant que l’utilisateur ne trouve pas la bonne réponse, en affichant les emojis pendant 5 secondes puis en posant une nouvelle question.
Faire en sorte que le nombre d’emoji soit paramétrable.
Afficher le nombre d’essais de l’utilisateur lorsque l’utilisateur trouve la bonne réponse.