Actions

Cours

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 29 : Ligne 29 :
 
* <syntaxhighlight lang="javascript" inline>chaineOuTableau.length</syntaxhighlight> → nombre d’éléments ;
 
* <syntaxhighlight lang="javascript" inline>chaineOuTableau.length</syntaxhighlight> → nombre d’éléments ;
 
* <syntaxhighlight lang="javascript" inline>Number("25")</syntaxhighlight> →  25 (en tant que {{code|Number}}).
 
* <syntaxhighlight lang="javascript" inline>Number("25")</syntaxhighlight> →  25 (en tant que {{code|Number}}).
 +
== Méthode 1 ==
 +
On va procéder progressivement et créer un ensemble de fonctions que nous regrouperons ensuite :
 +
* <syntaxhighlight lang="javascript" inline>function getEleves(id)</syntaxhighlight>
 +
** {{code|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 ;
 +
* <syntaxhighlight lang="javascript" inline>function getPrenom(ligne)</syntaxhighlight>
 +
** {{code|ligne}} est une chaine de caractères (telle que le contenu des <syntaxhighlight lang="html" inline><li></syntaxhighlight> ci-dessus ;
 +
** renvoie une chaine de caractères ne contenant que le prénom de l'élève ;
 +
* <syntaxhighlight lang="javascript" inline>function getNotes(ligne)</syntaxhighlight>
 +
** {{code|ligne}} est une chaine de caractères (telle que le contenu des <syntaxhighlight lang="html" inline><li></syntaxhighlight> ci-dessus ;
 +
** renvoie un tableau de <syntaxhighlight lang="javascript" inline>Number</syntaxhighlight> avec toutes les notes ;
 +
** cette fonction nécessite une autre fonction :<br /><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 ;
 +
*** 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>false</syntaxhighlight>sinon ;
 +
* <syntaxhighlight lang="javascript" inline>function moy(tabNotes)</syntaxhighlight>
 +
** {{code|tabNotes}} est un tableau de notes (<syntaxhighlight lang="javascript" inline>Number</syntaxhighlight>) ;
 +
** renvoie un <syntaxhighlight lang="javascript" inline>Number</syntaxhighlight> représentant la moyenne des nombres dans le tableau ;
 +
* <syntaxhighlight lang="javascript" inline>function bilan(ligne)</syntaxhighlight>
 +
** {{code|ligne}} est une chaine de caractères (telle que le contenu des <syntaxhighlight lang="html" inline><li></syntaxhighlight> ci-dessus ;
 +
** renvoie une chaine de caractère répondant aux contraintes de l'énoncé ;
 +
* <syntaxhighlight lang="javascript" inline>function traite(id)</syntaxhighlight>
 +
** {{code|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
 +
{{TODO|mettre une correction cachée}}

Version du 7 décembre 2017 à 13:10

É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

Méthode 1

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 mettre une correction cachée!

Récupérée de « https://wiki.lezinter.net/w/index.php?title=Cours:Technologies_avancées_du_eLearning_2/exercices/Élèves&oldid=23538 »