Technologies avancées du eLearning 2/transtypage automatique JS

JavaScript est un langage où les variables sont typées, mais de manière implicite… Elles sont aussi converties d'un type à l'autre de manière implicite. Ceci permet d'être très efficace dans l'écriture du programme, mais cela demande d'être capable d'anticiper les opération de transtypage (conversion d'un type à l'autre) qui seront effectuées par le navigateur. Pour nous en rendre compte en cours nous avons effectué en cours différentes manipulations :

Number vers String

Opérateur +

L'opérateur + n'a pas le même sens selon le type des opérandes :

• Avec un Number, c'est l'addition ;
• Avec un String, c'est la concaténation.

Le + s'exécute de gauche à droite (sauf parenthèse), si l'une de ses opérandes est une String, il s'agira d'une concaténation.

Opérateurs de comparaison

Les opérateurs de comparaison non-plus :

• Avec deux Numbers, c'est l'ordre arithmétique ;
• Avec deux Strings, c'est l'ordre alphabétique ;
• Avec un Number et un String, c'est variable…

Exemple

console.log(
   12 < 110, //true
   "12" < "110", //false
   12 < "110", //true
   12 > "110", //false
   12 < "a",  //false
   12 > "a" //false
)

Exemples

var unNombre = 1 ;
console.log(unNombre + unNombre + unNombre) ;
    // → 3 (Number)
console.log("1" + unNombre + unNombre) ;
    // → "111" (String)
console.log(unNombre + unNombre + "1") ;
    // → "21" (String)

String vers Boolean

Quand le système attend un booléen (comme dans les structures de contrôle if et while, par exemple), il va tenter de convertir ce qu'on lui envoie, selon les principes décrits dans la diapositive 12.

Exercice

Pour montrer ce fonctionnement, l'exercice suivant.

Créer un programme JS, qui demande à l'utilisateur une chaine de caractère (prompt) et qui lui redemande tant qu'il n'en a pas saisi une. Adapter ce programme pour qu'il utilise le transtypage.

Voir une correction

 1 //1ère étape, on demande à un utilisateur d'écrire quelque chose et on répond différemment selon ce qu'il fait
 2 var saisieUtilisateur = window.prompt("Écris moi qqch :");
 3 //version normale
 4 var reponseNonVide = (saisieUtilisateur != ""); //Booleen, vrai si la réponse est non vide
 5 if (reponseNonVide){
 6     window.alert("super");
 7 }
 8 else{
 9     window.alert("trop nul");
10 }
11 //version condensée
12    /*saisieUtilisateur est une chaine de caractère
13      Transtypée en booléen, elle vaudra vrai, si la chaine
14      est non-vide, faux, si elle est vide.
15      "if" attend un booléen, si on lui envoie une chaine de 
16      caractère il va la transtyper.
17      On peut donc se passer de notre booléen
18      (c'est pas forcément mieux, le code sera moins lisible
19       mais c'est possible)*/
20 var saisieUtilisateur = window.prompt("Écris moi qqch :");
21 if(saisieUtilisateur){
22     window.alert("super");
23 }
24 else{
25     window.alert("trop nul");
26 }
27 
28 //plus court
29    /*prompt envoie une chaine de caractères,
30      on peut donc se contenter de…*/
31 if(window.prompt("Écris moi qqch :")){
32     window.alert("super");
33 }
34 else{
35     window.alert("trop nul");
36 }
37 
38 //en boucle
39    //Version explicite
40 var saisieUtilisateur = window.prompt("Écris moi qqch :");
41 while(saisieUtilisateur == ""){
42 //Tant qu'il ne remplit rien
43    //on lui dit que ça ne va pas
44    window.alert("trop nul");
45    //on lui redemande
46    saisieUtilisateur = window.prompt("Écris moi qqch :");
47 }
48 //Quand on sort, c'est gagné
49 window.alert("super");
50    //Version condensée
51 while(!window.prompt("Écris moi qqch en boucle :")){
52 //Tant que promt renvoie une chaine qui s'apparente
53 //à un booléen dont le contraire est vrai…
54 //En d'autres termes, tant que prompt renvoie une chaine vide
55    //on dit que ça ne va pas et on redemande
56     window.alert("trop nul");
57 }
58 window.alert("super");