Devoir pratique STI n°1 : la page du panier d'une librairie en ligne, ses lignes et le montant à payer en JavaScript

Exercice 1 : les lignes du panier (8 pts)

La librairie en ligne du lycée affiche le panier dans un tableau HTML : c'est la page panier.html suivante, reliée au fichier panier.js. Son bouton « Afficher le panier » appelle la fonction afficher(), donnée dans la page. Les prix sont en dinars, avec trois chiffres après la virgule (les millimes). Le style de la page contient la règle .total { font-weight: bold; } pour la cellule du total de chaque ligne.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon panier</title>
  <style>
    .total { font-weight: bold; }
  </style>
</head>
<body>
  <h1>Librairie du lycée : mon panier</h1>
  <table border="1">
    <thead><tr><th>Article</th><th>Prix</th><th>Quantité</th><th>Total</th></tr></thead>
    <tbody id="lignes"></tbody>
  </table>
  <input type="button" id="afficher" onclick="afficher()" value="Afficher le panier">
  <input type="button" id="plus" onclick="unStyloDePlus()" value="Un stylo de plus">
  <p id="apayer"></p>
  <script>
    var noms = ["Cahier", "Sac", "Stylo"];
    var prix = [2.5, 45, 0.75];
    var qtes = [3, 1, 4];
    function afficher() {
      var html = "";
      for (var i = 0; i < noms.length; i++) {
        html = html + ligneProduit(noms[i], prix[i], qtes[i]);
      }
      document.getElementById("lignes").innerHTML = html;
      document.getElementById("apayer").innerHTML = "À payer : " + formatPrix(aPayer(prix, qtes));
    }
    function unStyloDePlus() {
      qtes[2] = qtes[2] + 1;
      afficher();
    }
  </script>
  <script src="panier.js"></script>
</body>
</html>

• 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 formatPrix(x) qui renvoie le prix x écrit avec ecrire3, suivi d'un espace et de DT (1 pt).
• 3) Écrire la fonction ligneProduit(nom, prix, qte) qui renvoie le code HTML d'une ligne du tableau : le nom, le prix unitaire et le total (prix × qte) écrits avec formatPrix, et la quantité ; la cellule du total a la classe total (4 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.

Exemples : ecrire3(7.5) donne 7.500 et ecrire3(7.05) donne 7.050 ; formatPrix(7.5) donne 7.500 DT ; ligneProduit("Cahier", 2.5, 3) donne <tr><td>Cahier</td><td>2.500 DT</td><td>3</td><td class="total">7.500 DT</td></tr>.

Exercice 2 : le total à payer (12 pts)

Dans la page panier.html de l'exercice 1, le panier est donné par deux tableaux de même longueur : prix (le prix unitaire de chaque article, en dinars) et qtes (la quantité de chaque article), ici prix = [2.5, 45, 0.75] et qtes = [3, 1, 4]. Sous le tableau, la page écrit « À payer : 52.725 DT » avec formatPrix (exercice 1) et aPayer. Les fonctions suivantes s'ajoutent à panier.js.

La boutique fait une remise de 10 % sur un panier de 100 DT ou plus, de 5 % sur un panier de 50 DT ou plus, et aucune remise en dessous. Les montants sont arrondis au millime (trois chiffres après la virgule).

• 1) Écrire la fonction totalPanier(prix, qtes) qui renvoie la somme des prix[i] × qtes[i], arrondie au millime (4 pts).
• 2) Écrire la fonction remise(total) qui renvoie le montant de la remise pour un panier de ce total, arrondi au millime (4 pts).
• 3) Écrire la fonction aPayer(prix, qtes) qui renvoie le montant à payer : le total du panier moins la remise, arrondi au millime (4 pts).

Exemples : totalPanier([2.5, 45, 0.75], [3, 1, 4]) donne 55.5, remise(55.5) donne 2.775 et aPayer([2.5, 45, 0.75], [3, 1, 4]) donne 52.725.

Correction détaillée

Sujet original écrit pour Mission Carthage, dans le format d'un devoir pratique d'informatique (4ème Sciences de l'informatique, technologies du web). Ce n'est pas un sujet officiel.

Tout le programme : Bac Sciences de l'informatique · Revoir le cours · Tous les devoirs