return · conversion · boucles · formulaires

1. Le piège de prompt()

prompt() renvoie toujours une string, même si on tape un chiffre.

let solde = prompt("Quel est votre solde ?");
// L’utilisateur tape 30 → solde vaut "30" (texte)
alert(solde + 10); // "3010" ❌  (concaténation, pas une addition)

Pourquoi ? "30" + 10 → JavaScript colle le texte → "3010".

2. Convertir en nombre — Number()

Fonction native qui transforme une string en number :

let solde = prompt("Quel est votre solde ?");
solde = Number(solde);
alert(solde + 10); // 40 ✅

Cas pratique — panier :

function calculerPanier() {
  let quantite = Number(prompt("Combien d'articles ?"));
  let prix = Number(prompt("Prix unitaire ?"));
  alert("Total : " + (quantite * prix) + " €");
}

3. Convertir en texte — .toString()

Pour transformer un nombre en chaîne :

let numeroCommande = 45;
let texte = numeroCommande.toString();
console.log("Commande n°" + texte); // Commande n°45

Utile pour afficher un numéro de facture, un code client, etc.

4. Tableau récap — conversions

Les champs HTML renvoient aussi du texte (comme prompt). Sans Number(), risque de bugs du type "3010".

5. Exercice — 3 boutons (menu)

Avant le formulaire : trois boutons + un message au clic.

<button type="button" id="btnSandwich">🥪 Sandwich</button>
<button type="button" id="btnSalade">🥗 Salade</button>
<button type="button" id="btnHamburger">🍔 Hamburger</button>
<p id="message">Aucun plat sélectionné.</p>

document.getElementById("btnSandwich").addEventListener("click", function () {
  document.getElementById("message").textContent = "Tu as choisi : 🥪 Sandwich";
});

Idem pour Salade et Hamburger. Exemple : exercices/exemples/boutons-menu/

6. Exercice — commande (quantités)

Formulaire avec 3 champs nombre. Au submit : afficher la commande sans les plats à 0.

Vous avez commandé 2 burgers et 1 sandwich.

Exemple : exercices/exemples/commande-menu/

7. Mini-cours HTML — formulaire

HTML = structure. Un formulaire = zone de saisie + bouton de validation.

<form id="formInscription">
  <label for="prenom">Prénom</label>
  <input id="prenom" type="text" required />

  <label for="age">Âge</label>
  <input id="age" type="number" required />

  <button type="submit">Valider</button>
</form>
<p id="feedback"></p>

for du label = id de l’input (même nom).

8. Mini-cours CSS — ultra simple

CSS = apparence. Pas besoin que ce soit beau : champs lisibles, un peu d’espace.

body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-top: 12px; }
input { display: block; width: 250px; padding: 4px; }
button { margin-top: 16px; padding: 6px 12px; }
#feedback { margin-top: 16px; }

display: block = l’élément passe à la ligne. margin = espace autour · padding = espace dedans.

9. JS sur le formulaire

• submit + preventDefault()
• Lire .value → Number() si besoin → if / else → message dans #feedback

Exemple complet : exercices/exemples/mini-formulaire/

10. Rappel express — Journée 1

Checklist « Je sais… »

• Expliquer pourquoi prompt + 10 peut donner "3010"
• Utiliser Number() avant un calcul
• Utiliser .toString() pour afficher un numéro
• Corriger une fonction qui mélange string et number
• Faire réagir 3 boutons au clic (addEventListener)
• Personnaliser les boutons avec des icônes (🥪 🥗 🍔)
• Commande : quantités + masquer les plats à 0
• Relier label for et input id
• Écrire un CSS minimal (display: block, marges)
• Créer un mini-formulaire HTML/CSS/JS
• Au submit : lire → convertir → décider → afficher