Devoir pratique STI n°8 : la page de la cantine, la date des commandes avec l'objet Date et le panier

Exercice 1 : la date des commandes (8 pts)

La page cantine.html, reliée au fichier cantine.js, est donnée. À son chargement, elle écrit dans le paragraphe jour « Commandes pour le 26 octobre 2026 » avec la fonction dateLongue, à écrire dans cantine.js :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Cantine du lycée</title>
</head>
<body onload="afficherJour()">
<h1>Cantine du lycée</h1>
<p id="jour"></p>
<select id="plat">
  <option value="4.500">Couscous</option>
  <option value="3.200">Lablabi</option>
  <option value="5.000">Kafteji</option>
</select>
<input type="number" id="qte" value="1">
<input type="button" value="Ajouter" onclick="ajouter()">
<input type="button" value="Vider" onclick="vider()">
<ul id="panier"></ul>
<p id="total">Total : 0.000 DT</p>
<script>
  function afficherJour() {
    document.getElementById("jour").innerHTML = "Commandes pour le " + dateLongue(2026, 10, 26);
  }
</script>
<script src="cantine.js"></script>
</body>
</html>

Pour construire une date, on écrit new Date(annee, mois - 1, jour) : les mois de l'objet Date vont de 0 (janvier) à 11 (décembre).

• 1) Écrire la fonction nomMois(m) qui renvoie le nom du mois m, de 1 (janvier) à 12 (décembre) : nomMois(10) donne « octobre » (4 pts).
• 2) Écrire la fonction dateLongue(a, m, j) qui crée la date avec new Date et la renvoie écrite en toutes lettres à l'aide de getDate(), getMonth() et getFullYear() : dateLongue(2026, 10, 25) donne « 25 octobre 2026 », et dateLongue(2026, 2, 30) donne « 2 mars 2026 », car l'objet Date passe tout seul au mois suivant (4 pts).

Exercice 2 : le panier de la cantine (12 pts)

Dans la page cantine.html de l'exercice 1, la valeur (value) de chaque option est le prix du plat en dinars. Les fonctions suivantes s'ajoutent à cantine.js.

• 1) Écrire la fonction ecrire3(x) qui renvoie une chaîne : le nombre x (positif ou nul) écrit avec exactement trois chiffres après la virgule, sans utiliser la méthode toFixed (3 pts).
• 2) Écrire la fonction lireQuantite() qui renvoie la quantité saisie dans le champ qte si c'est un entier entre 1 et 10, et 0 sinon (3 pts).
• 3) Écrire la fonction ajouter(), appelée par le bouton « Ajouter » : si la quantité est valide, elle ajoute au panier un élément <li> de la forme « Couscous x 2 = 9.000 DT » et met à jour le paragraphe total, par exemple « Total : 9.000 DT » ; sinon elle ne change rien. Les prix s'écrivent avec ecrire3 (4 pts).
• 4) Écrire la fonction vider(), appelée par le bouton « Vider » : elle vide le panier et remet le total à « Total : 0.000 DT » (2 pts).

Indication : Math.round(x * 1000) donne le prix en millimes. Les dinars sont la partie entière de sa division par 1000, les millimes le reste de cette division, écrit sur trois chiffres. Par exemple, ecrire3(4.5) donne 4.500 et ecrire3(3.05) donne 3.050.