JS Lab

Bienvenue dans ton premier JS Lab !
 
Tu t’apprêtes à découvrir JavaScript à travers une approche 100% pratique.
Au programme : des séquences guidées pour explorer pas à pas les fondamentaux du langage.
 
Dans cette page tu trouveras : 
  •  

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

 

Retour en haut