La manipulation du DOM est le sujet de la dernière partie du cours de JavaScript… J’ai alors pu voir plus en détail comment cibler des éléments pour les rendre dynamiques (en leur ajoutant un événement) !
Et dans un premier temps, faisons connaissance avec le DOM…
Le DOM, qu’est ce que c’est ?
D’après Wikipedia, le Document Object Modele (DOM) ou « modèle d’objets de document » concerne la page Web qui sera affichée dans le navigateur.
Le DOM représente le document affiché par une structure en arbre, comportant des nœuds. La représentation suivante permet alors de mieux visualiser ce qu’est le DOM pour une page web :
Affichage des éléments du DOM
L’affichage des différents éléments peut se faire grâce aux class
:
– ciblage.className
affichera le nom des class
– ciblage.classList
affichera un tableau. Cela permet alors d’utiliser contains( )
qui va récupérer ce qui est contenu dans le tableau. Ce qui permettra ensuite de vérifier si oui ou non il possède déjà la class
.
Par exemple :
<h1> </h1>
const titre = document.querySelector('h1'); titre.className = "text-right color-primary"; console.log(titre.className); console.log(titre.classList); if(titre.classList.contains("text-right")){ console.log("oui"); } else { console.log("non); }
Ajouter des éléments
Lors de la manipulation du DOM, il est aussi possible d’ajouter des éléments au fichier HTML. Pour cela on va principalement se servir des balises.
L’ajout va se faire en 2 temps :
– création de l’élément avec document.createElement( )
– ajout de l’élément comme enfant avec .appendChild( )
const nouveauTitre = document.createElement('h1'); const conteneur = document.getElementById('conteneur'); conteneur.appendChild(nouveauTitre);
Modifier un attribut
Il est aussi possible de modifier l’attribut d’une balise HTML directement depuis le fichier JS.
On utilisera le ciblage suivant :
setAttribute('attribute', 'value')
Par exemple, pour changer l’attribut défini sur une image voici le type de code que l’on pourrait alors trouver :
<img id="image" src="img/image.jpg" data-test="test">
const monImage = document.getElementById('image'); monImage.setAttribute('data-test', 'Nouveau texte alternatif');
Il est aussi possible de récupérer l’attribut d’une balise HTML en utilisant getAttribute('attribute')
Les événements
Pour dynamiser encore plus les pages HTML, on va ajouter des événements. On appelle événement une action dynamique qui s’effectue par exemple lorsque l’on clique avec la souris, lors de l’utilisation du clavier, etc.
Les événements peuvent ainsi se déclencher via la souris, le clavier, la fenêtre, le formulaire ou le document.
Ajouter un événement
Lorsque l’on souhaite ajouter un événement, on dit alors que l’on ajoute un événement d’écoute. En effet, la page va « écouter » ce que l’utilisateur fait avec .addEventListener
.
Pour cela, on va indiquer quel événement doit être « écouté » (un clic de souris, un scroll, etc.) et on indiquera ensuite dans une fonction quelle sera l’action à exécuter lors de cet événement.
maVariable.addEventListener('click', maFonction);
Pour faciliter la lecture, on va privilégier l’écriture de la fonction en fonction fléchée. Ce choix est d’autant plus pertinent que la fonction n’inclue aucun paramètre et qu’elle ne sera pas forcément utilisée ailleurs.
maVariable.addEventListener('click', () => { //instructions de la fonction })
Il est enfin possible de supprimer l’écoute d’un événement avec .removeEventListener
. Dans ce cas, il faudra donc bien penser à externaliser la fonction !
maVariable.removeEventListener('click', maFonction);
Les différents événements
Il existe de nombreux événements. Je vous liste ici les principaux événements que l’on peut ajouter sur une page HTML :
1. Souris
– click
– mouseenter
: la souris entre dans l’élément
– mouseleave
: la souris sort de l’élément
2. Clavier
– keydown
: lorsque l’utilisateur appuie sur une touche
– keyup
: lorsque l’utilisateur relâche la touche
Pour les événements clavier, chaque touche du clavier doit porter un numéro. Pour retrouver le numéro de la touche, il faut d’abord le chercher avec un événement d’écoute :
document.addEventListener('keydown', clavier); function clavier(e) { console.log(e.which); }
Il faut aussi bien se souvenir que l’utilisateur ne pense pas à se servir de son clavier quand il va sur un site. Il faut donc bien le mentionner pour qu’il utilise son clavier !
3. Fenêtre
L’écoute de l’événement doit donc cibler la fenêtre (window)
– scroll
: apparition d’un élément lors du scroll par exemple
window.addEventListener('scroll', maFonction);
– resize
: l’élément se réadapte par rapport à la taille de l’écran
4. Formulaire
– change
: dédié aux input, select ou textarea, il est relié à une value. Cet événement est pris en compte uniquement lorsque l’utilisateur change de champs (dès qu’on est plus focus sur ce champs)
– submit
: relié à la balise <form>
(donc au formulaire dans son ensemble). Il se déclenche au moment où l’on envoie le formulaire.
ciblage.addEventListener('submit', e => { e.preventDefault( ); })
5. Document
– DOM Content Loaded
: s’exécute quand le document HTML est chargé et analysé (et pas lorsque les images et le CSS le sont).
– load
: s’exécute quand la page (ou ce qu’on a visé) est totalement chargée. On peut aussi le mettre sur la fenêtre pour vérifier que tout est bien chargé.
La gestion du temps
Lorsque l’on ajoute des événements sur une page HTML, il peut aussi être nécessaire de gérer le temps de ces événements.
Pour cela, il existe différentes solutions.
setTimeout
Cette méthode est équivalente à un délai.
L’inconvénient de cette méthode est qu’elle ne permet pas de faire un affichage/non affichage continuel car cela ferait alors une énorme boucle.
setTimeout(maFonction, temps);
Attention, le temps est alors exprimé en millisecondes (ms).
setInterval
Cette méthode permet les répétitions jusqu’à ce qu’on lui dise d’arrêter (c’est une boucle). Le temps est aussi exprimé en ms.
const repet = setInterval(maFonction, 1000);
Pour arrêter la boucle, on utilise alors clearInterval()
clearInterval(repet);
Date
Cette classe permet de récupérer des informations sur les dates, des informations générales sur le jour.
const maintenant = new Date(); maintenant.getDay(); // affiche le numéro du jour (Dimanche = 0) maintenant.getDate(); // affiche le jour maintenant.getMonth(); // affiche le numéro du mois (Janvier = 0) maintenant.getFullYear(); // affiche toute l'année (2020 par exemple)
Mathématiques
Il existe enfin une fonctionnalité en JavaScript qui permet des opérations mathématiques : Math
(il est défini comme un objet).
– Math.round()
: créé un arrondi du chiffre.
– Math.floor()
: donne un arrondi du chiffre, à l’entier inférieur.
– Math.ceil()
: fait un arrondi du chiffre, à l’entier supérieur.
– variable.toFixed(*digits*)
: détermine le nombre de chiffre après la virgule (digits) pour arrondir un chiffre.
const nombre = 4.328; nombre.toFixed(2); // affiche 4.33
– Math.random()
donne un nombre aléatoirement entre 0 et 1.
Je vous mets ci-dessous une écriture qui permet alors d’être au plus juste par rapport aux probabilités :
Math.floor(Math.random() * (max + 1))
max
est la valeur maximale à atteindre, auquel on ajoute 1 car sinon elle ne sera jamais obtenue.
Par exemple, si on a un max de 10 et un nombre aléatoire de 0.999999, Math.floor(0.99999)
donnerai 9 (et on n’aurait jamais 10).
– Math.isNaN()
: ce n’est pas un nombre, c’est un booléen.
– Number(nombre)
: permet de convertir une valeur en numérique.
– Math.min()
: donne le minimum parmi les valeurs et Math.max()
donne le maxi.
Attention : si on a un tableau de valeurs, il faudra le convertir en liste en utilisant bien l’opérateur de décomposition « ..
» .
const numbers = [1, 2, 3, 4]; Math.max(..numbers); //donnera 4 Math.min(..numbers); //donnera 1
Les cours de JavaScript suivis pendant ma formation prennent donc fin. Ils m’ont permis de découvrir comment dynamiser une page HTML. Maintenant, il va me falloir faire encore des exercices supplémentaires pour mieux maîtriser ce langage… Et je compte bien le faire en mettant au point mon portfolio (c’est le premier projet que je me suis fixé ! ).
[spoiler] La suite portera sur les librairies… 🙂