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
Ā