Le JS c'est trop dur

C'est bien de sélectionner des éléments mais on en fait quoi ?

Dans dans l'exemple du dessus, on utilise javascript pour modifier le style des éléments que l'on a sélectionné(on a changé la couleur de fond).
On utilise un element.style et on définit le changement que l'on souhaite avec la propriété CSS.

Une autre manière de modifier le style, on peut ajouter aux éléments que l'on souhaite une classe. Pour l'exemple, on va réutiliser l'appel d'une fonction avec onclick pour voir la différence.

Ainsi, de la même manière on peut supprimer une classe et la remplacer. On utilise le className ou le classList

On fait le point :

Ajouter une classe : .className += "laclasse" ou .classList.add('laclasse')
Plusieurs classes : même méthode mais on met un espace entre chaque classe
Modifier une classe : .className = "laclasse"
Supprimer une classe : .classList.remove('laclasse')

On oublie pas de sélectionner l'élément que l'on souhaite modifier avant !

On continue encore la modification !

Tu as compris la demonstration ?

Pour voir les différentes modifications que l'on apporte avec javascript, on est passé par onclick qui nous permet d'appeler une fonction avec un clic sur un élément précis. Mais qu'est ce que c'est réellement ?

Dans cet exemple, on réalise deux choses de manière différente : en premier, on modifie la taille du texte en passant notre souris dessus. En second, on modifie la couleur du texte en fonction que la souris soit sur le texte ou non.

Tout ce que nous faisons se produit grâce à la notion d'événement :

onclick : pour un clic sur l'élément
ondblclick : pour un double clic sur l'élément
onmouseover : pour le passage de la souris sur un élément
onmouseout : pour la sortie de la souris d'un élément
De nombreux autres événements existent...

Du coup, comment on s'occupe de ça ?

L'utilisation du .addEventListener nous permet de gérer les différents événements que l'on souhaite et déclencher des fonctions précises. On a la possibilité d'agir plusieurs fois si les événements se répètent.

Avec tous ces éléments, on a la possibilité de gérer une animation rapide :

Il est joli l'exemple mais on peut expliquer ?

Pour cette fois on joue avec les classes CSS qui donnent à notre box deux styles différents. Avec l'événement, on créé une fonction qui execute un changement de classe lors de l'appel de la fonction avec JS (ici avec un double clic).

On passe d'une classe à une autre à l'infini avec toggle. Même utilisation de classList qu'avec l'ajout ou la suppression, cette fois-ci on décide de basculer.

Petit plus ici, on rend le changement plus fluide avec des transitions CSS. Regarde à quoi ressemble le code :

Ok j'ai tout compris mais les fonctions trop compliquées ça fonctionne comment ?

Avec tous les éléments que l'on a vu, on peut comprendre le principe de certaines fonctions. On reprend l'exemple du changement de couleur de fond vu dans la première demonstration.

var x, i;
x = document.querySelectorAll(".class-pink");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "pink";
}

On connait déjà le contenu des actions que l'on fait, maintenant il faut traduire chaque ligne.

On déclare des variables var pour y stocker des éléments, ici x et i.
On attribue alors à x les éléments que l'on souhaite avec notre querySelectorAll.

La partie qui semble compliquée, mais qui ne l'est pas lorsque l'on comprend toutes les conditions : on fait une boucle for avec la variable i que l'on peut considérer comme un compteur, qui commence à 0 jusqu'à la longueur "length" de notre x (pour rappel, qui contient nos éléments). Ce i s'incrémente avec le ++. Cette ligne d'aparence compliquée nous permet de créer la boucle afin d'effectuer la même action plusieurs fois pour tous les éléments que l'on souhaite.

Donc, pour tous les éléments que l'on a en x avec en propriété i, on effectue le changement de couleur

Moins facile que lorsque l'on a un seul élément, on automatise avec des fonctions. Pour notre compréhension, on peut changer ces lettres x et i par des mots concrets :