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 //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");

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");