balle avec gravité

Explorer un projet JavaScript sur JSFiddle

Dans cette activité, tu vas ouvrir un projet JavaScript en ligne, l’examiner, le modifier et le faire évoluer comme un vrai·e développeur·se front-end.
Public : ~ 11 → 18 ans Support parfait pour TP “découverte JS / HTML / CSS”

1) Ouvrir le projet JSFiddle

Commence par ouvrir ce lien dans un nouvel onglet (clic droit > Ouvrir dans un nouvel onglet) :

🔗 https://jsfiddle.net/Amatewasu/3mx2agr5/50/

JSFiddle est un bac à sable (sandbox) qui te permet d’écrire du code HTML, CSS et JavaScript directement dans le navigateur et de voir le résultat en temps réel.

Sur JSFiddle, tu verras en général 4 panneaux : HTML, CSS, JavaScript et Result (le rendu). Ton objectif : comprendre comment le code dans les 3 premiers panneaux fabrique ce que tu vois dans le dernier. 🔍

2) Comprendre la structure HTML / CSS / JS

Sur la page JSFiddle, observe les onglets :

• HTML : structure de la page (balises, titres, boutons, canvas…)
• CSS : styles (couleurs, tailles, positions, police…)
• JavaScript : comportement (logique, animations, réactions aux clics…)
• Result : aperçu en direct du résultat.

Exercice 1 — repérage
Dans le projet :

• Repère au moins un élément HTML important (par ex. un <div>, un <canvas>, un bouton…)
• Repère dans le CSS où sont définies ses couleurs / dimensions
• Repère dans le JavaScript une fonction qui semble contrôler ce qui se passe à l’écran

3) Modifier quelque chose de visible

Avant de tout réécrire, on commence par un petit “hack” : changer un détail visible pour vérifier que l’on comprend bien le lien entre le code et le rendu.

Exercice 2 — “Je touche, ça change”

• Dans l’onglet CSS, trouve une couleur (par ex. #ff0000, red, rgb(…)) et remplace-la par une autre.
• Clique sur le bouton Run (triangle ▶️ en haut de JSFiddle).
• Vérifie que le changement est bien visible dans le panneau Result.

💡 Conseil : ne change qu’une seule chose à la fois, puis teste. C’est comme faire des expériences en labo : on garde le contrôle sur ce qu’on modifie.

4) Explorer le JavaScript

Le cœur du projet est dans l’onglet JavaScript. Tu y trouveras probablement :

• des variables (let, const, var),
• des fonctions (function ... ou const x = () => { }),
• des boucles (for, while),
• des écouteurs d’évènements (addEventListener) ou des appels pour redessiner une animation.

Exercice 3 — lecture de code

1. Repère une fonction qui semble être appelée souvent (par ex. une boucle d’animation ou de mise à jour).
2. Ajoute au début de cette fonction une ligne :

   console.log("La fonction se lance !");

3. Ouvre la console du navigateur (F12 > onglet “Console”), clique sur Run dans JSFiddle et regarde les messages qui s’affichent.

🧪 La console est l’endroit idéal pour “espionner” le fonctionnement interne de ton code pendant qu’il tourne.

5) Défis : faire évoluer le projet

Maintenant que tu as pris en main le projet, voici quelques idées de modifications possibles (choisis-en au moins 2, plus si tu te sens à l’aise) :

• Défi Couleurs : modifier la palette (fond, objets, texte…) pour créer ton propre thème.
• Défi Vitesse : si quelque chose se déplace ou s’anime, essaie de ralentir / accélérer le mouvement.
• Défi Taille : agrandir ou réduire certains éléments (taille d’un canvas, d’une police, d’une balle, etc.).
• Défi Paramètre : transformer une constante (ex : const SPEED = 3) en variable contrôlable par l’utilisateur (champ texte, slider, bouton…).

Journal d’expériences (à compléter)

• Test 1 : ce que j’ai changé → ____________________ Résultat → ____________________
• Test 2 : ce que j’ai changé → ____________________ Résultat → ____________________
• Test 3 : ce que j’ai changé → ____________________ Résultat → ____________________

6) Fiche élève : ce que tu dois savoir à la fin

À la fin de cette activité, tu dois être capable de :

• Expliquer à quoi servent les onglets HTML, CSS, JavaScript et Result dans JSFiddle.
• Repérer dans le code où est défini au moins un élément visible du projet.
• Modifier au moins une couleur / taille / vitesse et observer l’effet à l’écran.
• Utiliser console.log() pour mieux comprendre ce que fait une fonction.
• Décrire une amélioration personnelle que tu as apportée au projet.

Mini QCM — JSFiddle & projet JavaScript

Teste rapidement tes connaissances avant de passer à l’activité suivante.

1. 1. Dans JSFiddle, l’onglet CSS sert surtout à :
   a) Écrire la logique du programme.
   b) Définir les couleurs, tailles, polices, mise en page.
   c) Afficher le résultat final.
2. 2. L’onglet Result montre :
   a) Le code HTML brut.
   b) Les messages de la console.
   c) Le rendu visuel produit par le HTML/CSS/JS.
3. 3. Quel est le rôle de console.log() ?
   a) Changer la couleur d’un élément.
   b) Afficher des informations dans la console pour suivre ce que fait le programme.
   c) Effacer le contenu de la page.
4. 4. Quand tu cliques sur le bouton Run dans JSFiddle :
   a) Seul le JavaScript est exécuté.
   b) HTML, CSS et JavaScript sont rechargés pour mettre à jour le résultat.
   c) Le projet est automatiquement téléchargé sur ton ordinateur.
5. 5. Si tu veux modifier la vitesse d’une animation, il est courant de changer :
   a) Une variable de type nombre (par ex. SPEED, dt, etc.).
   b) Le titre de l’onglet HTML.
   c) L’adresse du lien JSFiddle.