1. Objectif du jour
Découvrir Math.random() et createElement avec le dé encourageant, réussir le juste prix, puis améliorer son code avec Claude Code.
2. Nouvelles notions
| Notion | À retenir |
|---|---|
Math.random() | Nombre aléatoire entre 0 et 1 (exclu) |
Math.floor(Math.random() * 6) + 1 | Face d’un dé (entier 1 à 6) |
Math.floor(Math.random() * 100) + 1 | Entier aléatoire de 1 à 100 (juste prix) |
Boucle for + total = total + face | Lancer plusieurs dés et additionner |
.style.display | "none" cache · "block" montre |
createElement + appendChild | Créer une balise en JS puis l’ajouter à la page |
keyup | Réagir à chaque touche dans un champ |
isNaN(...) | « Ce n’est pas un nombre » |
3. Rappels utiles
| Notion | Journée | À retenir |
|---|---|---|
| Variables, console, opérateurs | J1 | Stocker, tester, calculer |
Dialogues + fonctions + return | J1 | Interagir et réutiliser du code |
Number() / .toString() | J2 | Éviter le piège "3010" |
submit + preventDefault | J2 | Valider sans recharger la page |
4. Mini-exercice — le dé encourageant
Exemple : ouvrir l’exemple · ~20–30 min.
- HTML : champ
#quantite(1 à 3), bouton#btnLancer,#resultat,#historique - JS :
Number(quantite)→ si hors 1–3 → message d’erreur - Boucle
for: un tirage 1–6 par dé → total = somme des faces - Afficher le détail + le total ; ajouter une ligne avec
createElement
5. Exercice — le juste prix
Exemple : ouvrir l’exemple.
- HTML : titre, input
#prix, bouton,#erreur,#message - CSS : formulaire 400px, fond gris, titre jaune, bouton bleu
- JS : aléatoire →
keyup→submit→verifier()aveccreateElement
6. Atelier IA (repères)
- Intro IA (Claude Code) — bons prompts, toujours vérifier dans le navigateur.
- Ouvrir un dossier d’exercice (`de-encourageant` ou `juste-prix`).
- Demander une modif précise + relire le diff.
- Tester dans Chrome comme un utilisateur.
7. Prompts types
- « Explique ce script ligne par ligne, en français, pour un débutant. »
- « Change uniquement [X] dans mon juste prix. Ne casse pas le reste. »
- « Propose une modification pour [besoin], sans casser le reste. Montre le diff. »
- « Quelles lignes dois-je tester après ce changement ? »
L’IA accélère ; toi tu valides le comportement dans le navigateur.