Javascript : notions avancées
Dans cette page tu trouveras :
Conditions & boucles
Les conditions
Les conditions (if, else if, else) permettent de contrôler le déroulement d’un programme. Elles vérifient si une expression logique (un test) est vraie ou fausse, et exécutent un bloc de code en conséquence.
On combine souvent ça avec des opérateurs de comparaison (===, !==, >, <, >=, <=) et logiques (&&, ||, !).
- if : vérifie une première condition.
- else if : permet de tester une autre condition si la précédente est fausse.
- else : s’exécute uniquement si aucune des conditions précédentes n’est vraie.
En d’autres termes, elles permettent de prendre des décisions dans le code en fonction de différentes situations.
Les boucles (for, while)
La boucle for
La boucle for est utilisée lorsque l’on sait combien de fois on veut répéter une instruction. Elle est souvent employée pour parcourir une liste, compter un certain nombre de fois, ou répéter une action sur une plage de valeurs.
Imaginons que l’on veut dire bonjour à 3 élèves :
- élève = 1 : on commence à 1 (le premier élève)
- élève <= 3 : la boucle continue tant qu’on n’a pas dépassé le 3ᵉ élève
- élève++ : on ajoute +1 à chaque tour pour passer à l’élève suivant
La boucle while
La boucle while répète un bloc de code tant qu’une condition est vraie.
Contrairement à for, on ne sait pas forcément à l’avance combien de fois la boucle va s’exécuter : cela dépend de la condition.
Ici, la répétition n’est pas fixée à l’avance :
- La boucle continue tant que bonbons > 0.
- Si on avait commencé avec 5 bonbons → la boucle tourne 5 fois.
- Si on avait commencé avec 20 bonbons → elle tourne 20 fois.
- Si le sac était déjà vide (bonbons = 0) → elle ne tourne pas du tout.
Astuce : si tu peux, préfère for quand tu sais combien de fois tu répètes, et while quand la répétition dépend d’une condition.
Les évènements
Un événement est une action qui se produit dans la page ou dans le navigateur, comme :
- Un clic de souris
- Une touche du clavier pressée
- Le chargement d’une page
- Le défilement de la fenêtre
En JavaScript, on peut “écouter” ces événements et réagir en exécutant une fonction quand ils surviennent.
A retenir :
- Les événements décrivent ce qui arrive (clic, saisie, défilement…)
- On les écoute toujours avec addEventListener
- Chaque type d’événement correspond à une interaction précise
addEventListener : écouter les événements
C’est l’outil central pour gérer les événements en JavaScript.
Chaque fois que tu veux réagir à un clic, une touche ou tout autre événement, tu dois utiliser addEventListener.
- element : l’objet sur lequel on écoute l’événement (un bouton, le document, la fenêtre…).
- « typeEvenement » : une chaîne de texte indiquant le nom de l’événement (« click », « keydown », « scroll », etc.).
- fonction : le code qui s’exécute quand l’événement survient.
Pourquoi addEventListener est recommandé ?
- On peut écouter plusieurs événements du même type sur le même élément
- On peut supprimer un écouteur si besoin (removeEventListener)
- Plus flexible et plus moderne que l’ancienne méthode onclick
À retenir : Peu importe l’événement que tu veux utiliser, il faudra toujours passer par addEventListener pour l’écouter.
Évènements liés à la souris
click : quand on clique avec le bouton gauche de la souris.
dblclick : quand on fait un double clic rapidement.
contextmenu : quand on fait un clic droit (ouvre normalement le menu contextuel).
mousemove : quand on déplace la souris.
mouseenter : quand la souris entre dans une zone (par ex. sur la page ou un élément).
mouseleave : quand la souris quitte une zone.
Évènements liés au clavier
keydown : quand on appuie sur une touche du clavier (se déclenche immédiatement).
keyup : quand on relâche une touche du clavier.
Évènements liés aux formulaires
submit : quand on envoie un formulaire (ex. en appuyant sur Entrée ou sur un bouton).
change : quand on modifie la valeur d’un champ et qu’on sort du champ.
input : quand on modifie le contenu d’un champ en direct (chaque frappe est détectée).
focus : quand un champ reçoit le curseur (il devient actif).
blur : quand un champ perd le curseur (on clique ailleurs).
Événements de la fenêtre / document
load : quand la page est entièrement chargée (HTML, CSS, images…).
resize : quand on redimensionne la fenêtre du navigateur.
scroll : quand on fait défiler la page (vers le haut ou le bas).
Événements divers
transitionend : quand une transition CSS est terminée.
animationend : quand une animation CSS est terminée.
DOM & Sélecteurs
C’est quoi le DOM ?
Le DOM (Document Object Model) est comme une carte en arbre de ta page HTML. Chaque balise (<h1>, <p>, <div>, etc.) est comme une boîte dans cet arbre.
Avec JavaScript, on peut :
- Trouver une boîte (sélectionner une balise, une classe, un id)
- Agir dessus (changer le texte, la couleur, ajouter/enlever des éléments…)
En résumé : le DOM, c’est ton HTML vu par JavaScript.
Exemple :
- <ul> est une “boîte” avec l’id= »menu ».
- Chaque <li> est une “boîte” avec la classe « item ».
Javascript va pouvoir interagir directement en se « connectant » à la balise, sa class css, ou son id css. Pour cela on va utiliser un sélecteur.
Les sélecteurs
Les sélecteurs permettent de cibler un élément précis dans notre page HTML.
On peut sélectionner un contenu :
- en appelant sa balise HTML
- sa classe CSS
- ou son id CSS
En pratique, on commence par trouver l’élément que l’on veut manipuler… puis souvent, on en profite pour le modifier (changer son texte, sa couleur, etc.).
👉 La partie “modification du contenu” sera vue juste après, dans le chapitre suivant.
document.getElementById()
Ce sélecteur permet de trouver une balise grâce à son identifiant (id).
Un id doit être unique dans toute la page : il ne peut y avoir qu’un seul élément avec le même id.
document.querySelector()
Ce sélecteur permet de trouver le premier élément qui correspond à un sélecteur CSS.
On peut utiliser un nom de balise, une classe (avec un . devant) ou un identifiant (avec un # devant).
document.querySelectorAll()
Ce sélecteur permet de trouver tous les éléments qui correspondent à un sélecteur CSS.
Il retourne une liste d’éléments que l’on peut parcourir pour agir sur chacun d’eux.
document.getElementsByClassName()
Ce sélecteur permet de trouver tous les éléments qui possèdent une certaine classe.
Il retourne une collection vivante : si le contenu de la page change, la collection se met à jour automatiquement.
document.getElementsByTagName(tag)
Ce sélecteur permet de trouver tous les éléments qui possèdent une certaine balise HTML, comme p, li ou h1.
Il retourne également une collection vivante qui évolue si le DOM change.
Modifier le contenu et la structure
JavaScript peut changer ta page ! C’est ce qui permet de rendre une page interactive et vivante.
Une page HTML n’est pas figée, grâce à JavaScript, on peut :
- Changer du texte
- Ajouter ou supprimer des éléments
- Modifier des images, liens, attributs…
- Changer le style CSS (couleur, taille, etc.)
textContent : modifier le texte
textContent sert à lire ou remplacer le texte brut d’un élément. Il n’interprète pas le HTML, il écrit seulement du texte.
Résultat : le texte “Bonjour” est remplacé par “Salut tout le monde !”.
innerHTML : modifier le contenu HTML
innerHTML sert à lire ou remplacer le HTML intérieur d’un élément. Contrairement à textContent, il peut contenir des balises.
Résultat : l’intérieur de <div> devient Texte important en gras.
Ajouter des éléments : appendChild
Avec appendChild, on peut créer un élément avec document.createElement puis l’ajouter à la page.
Résultat : la liste <ul> contient maintenant un <li> en plus avec le texte “Chien”.
Supprimer des éléments : remove
Avec remove, on peut aussi retirer un élément de la page.
Modifier des attributs : setAttribute
Avec setAttribute, on peut modifier les attributs des balises : source d’image, lien, titre, etc.
Sur cet exemple, la première partie change l’image, la seconde change un lien
Modifier les classes CSS : classList
Avec classList, on peut ajouter, retirer ou basculer une classe CSS.
Modifier le style directement : .style
Avec .style, on peut modifier le CSS d’un élément directement depuis JavaScript.
Résultat : le mot “Bonjour” devient rouge, grand et en gras.
