JS Lab
Mise en route pour débuter
Pour commencer, télécharge ce dossier.
Il contient :
- Un fichier index.html déjà préparé
- Un fichier script.js prêt à accueillir ton code
Mise en route :
- Ouvre ce dossier dans ton vscode
- Ouvre index.html dans ton navigateur pour voir le rendu visuel (grâce à l’extension Go live)
- Clique sur le fichier script.js, et c’est là que tu vas suivre chaque séquence pas à pas, guidé(e) par ton animateur.
- Prépare-toi à tester, modifier, expérimenter… bref, c’est parti on code !
Les Séquences
Séquence 1 : La console XX
Objectif : Afficher un message dans la console du navigateur.
- Pour cela, utilise la fonction console.log().
💡 Astuce : Ouvre les outils développeur (F12) -> onglet Console pour voir le résultat.
Séquence 2 : Sélectionner un élément par son ID XX
Objectif : Modifier le contenu d’un élément HTML avec son ID.
- Pour cela, utilise la méthode getElementById
Séquence 3 : Modifier un texte simple XX
Objectif : Changer le texte brut d’un élément.
- Pour cela, utilise la propriété .innerText
Séquence 4 : Sélectionner un élément avec une classe XX
Objectif : Modifier le texte d’un élément identifié par sa classe.
- Pour cela, utilise la méthode querySelector
Séquence 5 : Réagir à un clic XX
Objectif : Quand on clique sur un bouton, un message s’affiche ou un texte est modifié.
- Tu peux utiliser querySelector pour sélectionner le bouton, et addEventListener(« click », …) pour réagir à l’action.
Séquence 6 : Modifier le style d’un élément XX
Objectif : Changer la couleur ou la taille d’un élément avec JavaScript.
- Pour cela, utilise .style suivi de la propriété CSS que tu veux modifier (comme color, fontSize, etc.).
Séquence 7 : Réagir au passage de la souris XX
Objectif : Quand on passe la souris sur un élément, il change de couleur ou réagit.
- Pour cela, utilise addEventListener(« mouseover », …) pour détecter le survol.
Séquence 8 : Modifier plusieurs éléments à la fois XX
Objectif : Modifier tous les éléments ayant la même classe.
- Utilise querySelectorAll pour les sélectionner, puis une boucle pour agir sur chacun.
Séquence 9 : Modifier du contenu HTML XX
Objectif : Changer le contenu d’un élément en y ajoutant du HTML (gras, lien, etc.).
- Pour cela, utilise .innerHTML
Séquence 10 : Les variables let et const XX
Objectif : Déclarer deux variables, une qui peut changer et une qui ne doit pas changer. Puis afficher ces informations dans la page.
- Pour cela, utilise let, const et modifie le texte d’un élément avec innerText