Cours:Technologies avancées du eLearning 2/exercices/Élèves

Énoncé

On a un document HTML, qui contient une liste d’étudiant avec les notes obtenues lors du semestre, sous la forme suivante :

<h2>Facile</h2>
<ul id="fastoche">
  <li>Maegan : 4, 8, 10, 12</li>
  <li>Ajay : 15, 16, 12, 16</li>
  <li>Sheri : 9, 10, 11, 15</li>
  <li>Marianne : 10, 10, 10, 10</li>
</ul>
<h2>Moins facile</h2>
<ul id = "moyen">
  <li>Gus : 4, 5.5, 9, 9.5, 10</li>
  <li>Sammy : 3, 17</li>
  <li>Belinda : 8.5, 11, 20</li>
</ul>
<h2>Très difficile</h2>
<ul id="chaud">
  <li>Brayden: 12, 14  , 8.5 ; 12 ;</li>
  <li>Kassidy : 13, 3.5 ;</li>
  <li>Jonas : 18, 19, 16.5, 10.</li>
</ul>

On veut créer du code qui permette automatiquement de :

• Mettre en italiques le nom de l’élève ;
• Mettre en gras les notes supérieures à la moyenne ;
• Calculer et souligner la moyenne.

Informations utiles

• DOMelt.children → renvoie un tableau avec la liste des enfants d’un élément ;
• mot.charAt(i) → (i+1)^e caractère d’une chaine ;
• chaineOuTableau.length → nombre d’éléments ;
• Number("25") → 25 (en tant que Number).

Méthode 1 : une analyse descendante

On va procéder progressivement et créer un ensemble de fonctions que nous regrouperons ensuite :

• function getEleves(id)
  • id est une chaine de caractères contenant l'identifiant d'un élément du DOM ;
  • renvoie la liste des éléments contenus dans l'élément d'identifiant du DOM ;
• function getPrenom(ligne)
  • ligne est une chaine de caractères (telle que le contenu des <li> ci-dessus ;
  • renvoie une chaine de caractères ne contenant que le prénom de l'élève ;
• function getNotes(ligne)
  • ligne est une chaine de caractères (telle que le contenu des <li> ci-dessus ;
  • renvoie un tableau de Number avec toutes les notes ;
  • cette fonction nécessite une autre fonction :
    function estNombre(caractere)
    • caractere est un caractère (ou une string de longueur 1 ;
    • renvoie un booléen :
      • true si le caractère peut être contenu dans l'écriture d'un nombre ;
      • falsesinon ;
• function moy(tabNotes)
  • tabNotes est un tableau de notes (Number) ;
  • renvoie un Number représentant la moyenne des nombres dans le tableau ;
• function bilan(ligne)
  • ligne est une chaine de caractères (telle que le contenu des <li> ci-dessus ;
  • renvoie une chaine de caractère répondant aux contraintes de l'énoncé ;
• function traite(id)
  • id est un identifiant d'élément du DOM qui contient une liste d'élève ;
  • remplace le contenu de l'élément par les informations mises en forme.

Correction

• https://codepen.io/lzbk/pen/EbLGKQ

Voir une correction

  1 function getEleves(id){
  2   //récupère les élèves d'une liste quelconque
  3 	var elt = document.getElementById(id);
  4 	return elt.children;
  5 }
  6 
  7 /***********************
  8  * Fonction utilitaire *
  9  ***********************/
 10 //pour savoir si un caractère est un nombre (ou peut en faire partie)
 11 function estNombre(char){
 12   var resultat;
 13 //voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch
 14   switch(char){
 15     case "0":
 16     case "1":
 17     case "2":
 18     case "3":
 19     case "4":
 20     case "5":
 21     case "6":
 22     case "7":
 23     case "8":
 24     case "9":
 25     case ".":
 26       resultat = true;
 27       break;
 28     default:
 29       resultat = false;
 30   }
 31   return resultat;
 32 }
 33 
 34 /**************************
 35  * Traitement d'une ligne *
 36  **************************/
 37 //pour récupérer un prénom
 38 function getPrenom(ligne){
 39   var i=0;
 40   var resultat = "";
 41   //On parcourt la ligne jusqu'à trouver un espace
 42  //ou deux points      
 43   while (i < ligne.length
 44       && ligne.charAt(i) != " "
 45       && ligne.charAt(i) != ":"){
 46     resultat += ligne.charAt(i);
 47     i++;
 48   }
 49   //Si on a parcouru toute la ligne, c'est qu'on
 50  //n'a pas pu finaliser tout le prénom
 51   if(i==ligne.length){
 52     resultat=false;
 53   }
 54   return resultat;
 55 }
 56 
 57 function getNotes(ligne){
 58   var resultat = [],
 59       nbCourant = -1; //utilisé pour savoir si on a passé les ':'
 60   for(let i=0;i<ligne.length;i++){
 61     if(nbCourant == -1){//nbCourant reste à -1 
 62       if(ligne.charAt(i) == ":"){//jusqu'à ce qu'on ait trouvé ":"
 63         nbCourant = "";
 64       }
 65     }
 66     //on a passé les ":"
 67     else if(estNombre(ligne.charAt(i))){
 68       //on a un chiffre on l'ajoute au nombre courant
 69       nbCourant += ligne.charAt(i); //chaine de caractère      
 70     }
 71     else if(nbCourant!==""){
 72       /* on était en train de copier un nombre
 73          sinon nbCourant vaudrait -1 ou "" */
 74       resultat.push(Number(nbCourant));
 75       nbCourant = ""; 
 76     }
 77   }
 78   if(nbCourant!=="" && nbCourant!==-1){
 79     /* si la ligne se termine par un nombre il faut l'ajouter au résultat avant de partir…*/
 80     resultat.push(Number(nbCourant));
 81   }
 82   return resultat ;
 83 }
 84 
 85 //pour calculer la moyenne on fait la somme de toutes les notes
 86 function moy(tabNotes){
 87   let i=0,
 88       somme = 0,
 89       res = false ;
 90   
 91   while(i<tabNotes.length){
 92     somme = somme + tabNotes[i];
 93     i++;
 94   }
 95   if(i!=0){//pas de division par 0
 96     res = somme/i ; //i == tabNotes.length si on est sorti de la boucle
 97   }
 98   return res ;
 99 }
100 
101 /***************
102  *  Affichage  *
103  ***************/
104 //On réécrit le contenu en fonction de la ligne considérée
105 function bilan(ligne){
106   var resultat = "";
107   var tabNotes = getNotes(ligne);
108   for(let i=0; i<tabNotes.length;i++){
109     if(resultat != ""){//virgule entre les notes
110       resultat = resultat + ", "
111     }
112     if(tabNotes[i]>=10){
113       resultat = resultat + "<b>" + tabNotes[i] + "</b>";
114     }
115     else{
116       resultat = resultat + tabNotes[i];
117     }
118   }
119   return "<i>" + getPrenom(ligne) + "</i>&nbsp;: " + resultat + " → <u>" + moy(tabNotes) + "</u>";
120 }
121 
122 /*************************
123  * traitement de la page *
124  *************************/  
125 function traiter(id){
126   var tabElt = getEleves(id);
127   for(let i=0;i<tabElt.length;i++){
128     tabElt[i].innerHTML = bilan(tabElt[i].innerHTML);
129   }
130 }
131 
132 /***********************
133  * Programme principal *
134  ***********************/
135 traiter("fastoche");
136 traiter("moyen");
137 traiter("chaud");

Méthode 2 : création d'objets pour limiter le nombre de tours de boucles

Dans cette méthode, le code sera moins lisible car, en substance, les fonctions getPrenom(), getNotes(), moy() seront traitées en une seule fonction.

• function estNombre(caractere)
  • caractere est un caractère (ou une string de longueur 1 ;
  • renvoie un booléen :
    • true si le caractère peut être contenu dans l'écriture d'un nombre ;
    • falsesinon ;
• function traiterLigne(ligne) est la fonction qui regroupe les traitements de getPrenom(), getNotes() et moy().
  • cette fonction prendra en entrée une chaine de caractères contenant les informations non mises en forme ;
  • elle renverra un objet composite muni de 3 attributs :
    • prenom, le prénom de l'élève (string) ;
    • notes, un tableau de Number avec les notes de l'élève ;
    • moyenne, un Number, sa moyenne ;
• function ecrireLigne(semestre)
  • prend un objet tel que celui renvoyé par traiterLigne ;
  • et génère en conséquences une string mise en forme en HTML ;
• enfin function traiterClasse(id) :
  • prend id : une chaine de caractères contenant l'identifiant d'un élément du DOM ;
  • et modifie en conséquence cet élément du DOM.

Correction

https://codepen.io/lzbk/pen/OOBYJq

Voir une correction

 1 //pour savoir si un caractère est un nombre (ou peut en faire partie)
 2 function estNombre(char){
 3   var resultat;
 4   switch(char){
 5     case "0":
 6     case "1":
 7     case "2":
 8     case "3":
 9     case "4":
10     case "5":
11     case "6":
12     case "7":
13     case "8":
14     case "9":
15     case ".":
16       resultat = true;
17       break;
18     default:
19       resultat = false;
20   }
21   return resultat;
22 }
23 
24 //Pour récupérer toutes les informations nécessaires
25 function traiterLigne(ligne){
26 	var i=0;
27 	var resultat = {"prenom":"",
28                   "notes":[ ],
29                   "moyenne":false};
30 	while (i < ligne.length
31 		 && ligne.charAt(i) != " "
32 		 && ligne.charAt(i) != ":"){
33 		resultat.prenom += ligne.charAt(i);
34 		i++;
35 	}
36   if(i==ligne.length){
37     resultat=false;
38   }
39   else{
40     let nbCourant = "",
41         somme = 0;
42     while(i <= ligne.length){
43       if (i < ligne.length
44        && estNombre(ligne.charAt(i))){
45         nbCourant += ligne.charAt(i); //chaine de caractère
46       }
47       else if(nbCourant!==""){
48         let laNote = Number(nbCourant);
49         somme += laNote ;
50         resultat.notes.push(laNote);
51         nbCourant = "";
52       }
53       i++;
54     }
55     if(resultat.notes.length>0){
56       resultat.moyenne = somme/resultat.notes.length
57     }
58   }
59 	return resultat;
60 }
61 
62 function ecrireLigne(semestre){
63   var resultat = "<i>" + semestre.prenom + "</i>&nbsp;: ";
64   for(let i=0; i<semestre.notes.length;i++){
65     if(i > 0){//pour les séparateurs
66       resultat = resultat +", "
67     }
68     if(semestre.notes[i]>=10){
69       resultat = resultat + "<b>" + semestre.notes[i] + "</b>";
70     }
71     else{
72       resultat = resultat + semestre.notes[i];
73     }
74   }
75   resultat = resultat + " → <u>" + semestre.moyenne + "</u>";
76   return resultat;
77 }
78 
79 //prend un tableau du DOM et stocke les données extraites
80 //dans un tableau d'objets composites
81 function traiterClasse(id){
82   var elt = document.getElementById(id),
83       tableauDOM = elt.children;
84   for(let i=0;i<tableauDOM.length;i++){
85     tableauDOM[i].innerHTML = ecrireLigne(traiterLigne(tableauDOM[i].innerHTML));
86   }
87 }
88 
89 //Programme principal
90 traiterClasse("fastoche");
91 traiterClasse("moyen");
92 traiterClasse("chaud");