Technologies avancées du eLearning 2/exercices/Saisie de nombres

Énoncés dans le support de cours (diapos 16, 19, 21, 24 (première question) et 26).

Un codepen avec tout le code ci-dessous : https://codepen.io/lzbk/pen/gQvNXw

Fonction estChiffre

Nous avons vu plusieurs solutions possibles :

 1 //En utilisant un switch/case
 2 function estChiffre1(car){
 3    var resultat=false;
 4    switch(car){
 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          resultat = true;
16    }
17    return resultat;
18 }
19 
20 function estChiffre2(car){
21 //en utilisant l'ordre alphabétique (attention ça ne marche pas avec car<"10")
22    return (car>="0" && car<="9");
23 }
24 
25 function estChiffre3(car){
26 //en utilisant un tableau des caractères autorisés
27    var resultat = false ;
28    var tabChiffres = ["0","1","2","3","4","5","6","7","8","9"];
29    for(let i=0;i<tabChiffres.length;i++){
30       if(tabChiffres[i] == car){
31          resultat = true;
32       }
33    }
34    return resultat;
35 }
36 
37 function estChiffre4(car){
38 //avec un if
39    var resultat = false;
40    if (   car=="0"
41        || car=="1"
42        || car=="2"
43        || car=="3"
44        || car=="4"
45        || car=="5"
46        || car=="6"
47        || car=="7"
48        || car=="8"
49        || car=="9"
50     ){
51       resultat = true;
52    }
53    return resultat;
54 }

Fonction estNombre

Votre fonction est nombre doit passer le test suivant :

 1 console.debug("Test de estNombre()");
 2 console.log("Chaine vide : false attendu → " , estNombre(""));
 3 console.log("romains : false attendu → " ,estNombre("XIV"));
 4 console.log("1 : true attendu → " ,  estNombre("1"));
 5 console.log("123546590143 : true attendu → " ,  estNombre("123546590143"));
 6 console.log("1.62345 : true attendu → " , estNombre("1.62345"));
 7 console.log("-1 : true attendu → " , estNombre("-1"));
 8 console.log("-13240,2303458 : true attendu → " , estNombre("-13240,2303458"));
 9 console.log("12345a12235 : false attendu → " , estNombre("12345a12235"));
10 console.log("12345-12235 : false attendu → " , estNombre("12345-12235"));
11 console.log("23.34562.234 : false attendu → " , estNombre("23.34562.234"));
12 console.log(".345 : true attendu → " , estNombre(".345"));
13 console.log(", : false attendu → " , estNombre(","));
14 console.log("- : false attendu → " , estNombre("-"));

Correction

 1 //Prend une chaine de caractère et dit si c'est un nombre
 2 function estNombre(mot){
 3    //déclaration de variables
 4        //aVirgule : booléen qui dit si le “mot” comporte (déjà) une virgule
 5    var aVirgule = mot.charAt(0)==","
 6                   || mot.charAt(0)==".",
 7        //resultat : booléen qui dit si le mot est (pour le moment) un nombre
 8        resultat = estChiffre1(mot.charAt(0))
 9                   || ( mot.length > 1
10                        && (aVirgule || mot.charAt(0)=="-"));
11        //On initialise resultat à vrai si le premier caractère est un chiffre ou
12          //si c'est une virgule ou un moins, mais que le mot contient d'autres caractères 
13    /*On parcourt le reste du mot (mais on s'arrête dès qu'on est sûr que ce n'est pas un
14      nombre. Dès que résultat sera faux, (resultat && i<mot.length) sera faux.*/
15    for(let i=1;resultat && i<mot.length;i++){
16       if(mot.charAt(i)=="," || mot.charAt(i)=="."){
17           if(aVirgule){
18              resultat = false;
19           }
20           else{
21              aVirgule = true;
22           }
23       }
24       else if(!estChiffre1(mot.charAt(i))){
25          resultat = false;
26       }
27    }
28    return resultat;
29 }

Fonction saisieNombres

Cette fonction demande à l’utilisateur d’entrer des nombres, n’accepte que les nombres et les stocke dans un tableau tant qu’il n’a pas entré "stop" et ensuite renvoie le tableau.

Correction

 1 function saisieNombres(){
 2   var res = [],
 3       //initialisation de la boucle
 4       thePrompt = "Saisissez un nombre",
 5       input = prompt(thePrompt);
 6   while (input != "stop"){//condition pour rester dans la boucle
 7     /*début du traitement*/
 8     if(estNombre(input)){
 9       thePrompt = "Saisissez un nombre"
10       res.push(input);
11     }
12     else{
13       thePrompt = "On a dit un NOMBRE !!!"
14     }
15     /*Fin du traitement*/
16     input = prompt(thePrompt); //incrément
17   }
18   return res;
19 }

ArrayToTableToArray + somme, tri et mélange

fonction ArrayToTable

 1 function arrayToTable(leTableau, idTable){
 2   var elt = document.getElementById(idTable),res = true;
 3   if(elt == null){
 4     //L'identifiant n'existe pas
 5     console.error("arrayToTable : "+idTable + " n'existe pas dans le document.");
 6     res = false;
 7   }
 8   else if(elt.tagName != "table"){
 9     //L'identifiant n'existe pas
10     console.error("arrayToTable : "+idTable + " n'est pas une table.");
11     res = false;
12   }
13   else{
14     //on crée du contenu
15     let content =""
16     for(let i=0;i<leTableau.length;i++){
17       content += "<td>"+leTableau[i]+"</td>";
18     }
19     //on le met dans l'élément
20     elt.innerHTML = "<tr>"+content+"</tr>";
21   }
22   return res;
23 }

fonction somme

1 function somme(tab){
2   var res= 0;
3   for(let i=0;i<tab.length;i++){
4     res += tab[i];
5   }
6   return res;
7 }

fonction trier

Je propose deux solution, de tri par sélection il y en a pleiiiiin d'autres beaucoup plus efficaces.

 1 function trierAvecTabIntermédiaire(tab){
 2   var res = [],//le tableau trié
 3       idMin=0;//l'index de la valeur min du tableau
 4   while(tab.length>1){
 5     //tant qu'on n'a pas vidé le tableau non trié
 6     for(let i=1;i<tab.length;i++){
 7       //on recherche l'identifiant de l'élément min du tableau
 8       if(tab[i]<tab[idMin]){
 9         idMin=i;
10       }
11     }
12     //quand il est trouvé, on l'ajoute à la fin du tableau trié
13     res.push(tab[idMin]);
14     //on enlève l'élément trié du tableau non trié
15     tab.splice(idMin,1);
16     //on se prépare à rechercher l'élément le plus petit
17     idMin=0;
18   }
19   //on prend le dernier élément qui est le plus grand
20   res.push(tab[idMin]);
21   return res;
22 }
23 
24 function trierSansTabIntermédiaire(tab){
25   //solution sans tableau intermédiaire
26   var idMin=0,//identifiant de la plus petite valeur de la partie non triée du tableau
27       idDebTri=0;//identifiant du 1er élément non trié
28   while(idDebTri<tab.length-1){
29     //tant qu'on n'a pas tout trié
30     for(let i=idDebTri+1;i<tab.length;i++){
31       //on recherche le minimum de la partie non triée
32       if(tab[i]<tab[idMin]){
33         idMin=i;
34       }
35     }
36     //quand on l'a trouvée, on intervertit la valeur trouvé avec le contenu de la première case non triée
37     let tmpVal = tab[idDebTri];
38     tab[idDebTri]=tab[idMin];
39     tab[idMin] = tmpVal;
40     //la partie non triée commence donc à la case suivante
41     idDebTri++;
42     //on se prépare à rechercher le minimum
43     idMin=idDebTri;
44   }
45   //la dernière case est mécaniquement triée lors du dernier tour de boucle, puisque l'avant dernière est le minimum
46   return tab;
47 }
48 
49 function trier(tab){
50    //Je choisis une version pour la fonction trier
51    return trierSansTabIntermédiaire(tab);
52 }

fonction tableToArray

Ci-dessous une version qui marche avec des tableaux qui ne sont pas de la forme :

<table><tbody><tr><td>1</td><td>2</td></tr></tbody></table>

 1 function tableToArray(idTable){
 2   var elt = document.getElementById(idTable),
 3       res = [];
 4   if(elt == null){
 5     //L'identifiant n'existe pas
 6     console.error("arrayToTable : "+idTable + " n'existe pas dans le document.");
 7     res = false;
 8   }
 9   else if(elt.tagName != "TABLE"){
10     //L'identifiant n'existe pas
11     console.error("arrayToTable : "+idTable + " n'est pas une table.");
12     res = false;
13   }
14   else{//on a bien un tableau, on va prendre la 1ère ligne, tant pis s'il y en avait plus
15     var ligne = elt.firstChild;
16     while(ligne != null && ligne.tagName != "TR"){
17       if(ligne.tagName == "TBODY"){
18         ligne = ligne.firstChild;
19       }
20       else{
21         ligne = ligne.nextSibling;
22       }
23     }
24     ligne = ligne.children
25     //avec un tr intermédiaire, on est censés avoir un tableau d'éléments td.
26     for(let j=0;j<ligne.length;j++){
27       if(ligne[j].tagName="TD"){
28         //le innerHTML est une String, on le convertit en nombre
29         //(on veut pouvoir en faire la somme)
30         res.push(Number(ligne[j].innerHTML));
31       }
32     }
33   }
34   return res;
35 }

fonction randomize

On crée une fonction qui mélange un tableau JS :

 1 function randomize(tab){
 2   var res = [] ;
 3   while(tab.length > 1){
 4      //on tire au sort un entier entre 0 et la longueur du tableau moins 1
 5      let i = Math.floor(Math.random()*tab.length);
 6      //on copie dans res la case à cet indice
 7      res.push(tab[i]);
 8      //on supprime cette case pour ne pas la re-tirer au sort
 9      tab.splice(i,1);
10   }
11   res.push(tab[0])
12   return res ;
13 }

Réutilisation de ces fonctions pour trier et mélanger des tableaux d'un document HTML

sortTable

 1 function sortTable(idTable, idTableTriee){
 2   //on récupère la table HTML dans un tableau JS
 3   var tabTemporaire = tableToArray(idTable) ;
 4   //on trie ce tableau
 5   tabTemporaire = trier(tabTemporaire) ;
 6   //on ajoute la somme à la fin
 7   tabTemporaire.push(somme(tabTemporaire));
 8   //on met dans le DOM le tableau obtenu
 9   arrayToTable(tabTemporaire, idTableTriee);
10 }

randomizeTable

1 function randomizeTable(idTable, idTableMelangee){
2   //on récupère la table HTML dans un tableau JS
3   var tabTemporaire = tableToArray(idTable) ;
4   //on met la version mélangée de ce tableau dans l'élément d'id idTableMelangee
5   arrayToTable(randomize(tabTemporaire), idTableMelangee) ;
6 }