Différences entre versions de « Technologies avancées du eLearning 2/exercices/Élèves »
De GBLL, TAL, ALAO, etc.
< Cours:Technologies avancées du eLearning 2
Ligne 202 : | Ligne 202 : | ||
== Méthode 2 : création d'objets pour limiter le nombre de tours de boucles == | == 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 <syntaxhighlight lang="javascript" inline>getPrenom()</syntaxhighlight>, <syntaxhighlight lang="javascript" inline>getNotes()</syntaxhighlight>, <syntaxhighlight lang="javascript" inline>moy()</syntaxhighlight> seront traitées en une seule fonction. | |
− | *<syntaxhighlight lang="javascript" inline>function estNombre(caractere)</syntaxhighlight> | + | |
+ | * <syntaxhighlight lang="javascript" inline>function estNombre(caractere)</syntaxhighlight> | ||
** {{code|caractere}} est un caractère (ou une <syntaxhighlight lang="javascript" inline>string</syntaxhighlight> de longueur 1 ; | ** {{code|caractere}} est un caractère (ou une <syntaxhighlight lang="javascript" inline>string</syntaxhighlight> de longueur 1 ; | ||
** renvoie un booléen : | ** renvoie un booléen : | ||
***<syntaxhighlight lang="javascript" inline>true</syntaxhighlight> si le caractère peut être contenu dans l'écriture d'un nombre ; | ***<syntaxhighlight lang="javascript" inline>true</syntaxhighlight> si le caractère peut être contenu dans l'écriture d'un nombre ; | ||
***<syntaxhighlight lang="javascript" inline>false</syntaxhighlight>sinon ; | ***<syntaxhighlight lang="javascript" inline>false</syntaxhighlight>sinon ; | ||
− | + | * <syntaxhighlight lang="javascript" inline>function traiterLigne(ligne)</syntaxhighlight> est la fonction qui regroupe les traitements de <syntaxhighlight lang="javascript" inline>getPrenom()</syntaxhighlight>, <syntaxhighlight lang="javascript" inline>getNotes()</syntaxhighlight> et <syntaxhighlight lang="javascript" inline>moy()</syntaxhighlight>. | |
− | * <syntaxhighlight lang="javascript" inline>function | + | ** 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 : | |
− | + | *** <syntaxhighlight lang="javascript" inline>prenom</syntaxhighlight>, le prénom de l'élève (<syntaxhighlight lang="javascript" inline>string</syntaxhighlight>) ; | |
− | + | *** <syntaxhighlight lang="javascript" inline>notes</syntaxhighlight>, un tableau de <syntaxhighlight lang="javascript" inline>Number</syntaxhighlight> avec les notes de l'élève ; | |
− | + | *** <syntaxhighlight lang="javascript" inline>moyenne</syntaxhighlight>, un <syntaxhighlight lang="javascript" inline>Number</syntaxhighlight>, sa moyenne ; | |
− | + | * <syntaxhighlight lang="javascript" inline>function ecrireLigne(semestre)</syntaxhighlight> | |
− | + | ** prend un objet tel que celui renvoyé par <syntaxhighlight lang="javascript" inline>traiterLigne</syntaxhighlight> ; | |
− | ** | + | ** et génère en conséquences une <syntaxhighlight lang="javascript" inline>string</syntaxhighlight> mise en forme en HTML ; |
− | + | * enfin <syntaxhighlight lang="javascript" inline>function traiterClasse(id)</syntaxhighlight> : | |
− | ** | + | ** prend {{code|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. | |
− | |||
− | |||
− | |||
− | * <syntaxhighlight lang="javascript" inline>function | ||
− | ** | ||
− | ** | ||
− | * <syntaxhighlight lang="javascript" inline>function | ||
− | ** {{code| | ||
− | |||
− | |||
− | |||
− | ** |
Version du 13 décembre 2017 à 21:56
É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 queNumber
).
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 unestring
de longueur 1 ;- renvoie un booléen :
true
si le caractère peut être contenu dans l'écriture d'un nombre ;false
sinon ;
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
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> : " + 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 unestring
de longueur 1 ;- renvoie un booléen :
true
si le caractère peut être contenu dans l'écriture d'un nombre ;false
sinon ;
function traiterLigne(ligne)
est la fonction qui regroupe les traitements degetPrenom()
,getNotes()
etmoy()
.- 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 deNumber
avec les notes de l'élève ;moyenne
, unNumber
, 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 ;
- prend un objet tel que celui renvoyé par
- 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.
- prend