Actions

Cours

Différences entre versions de « Technologies avancées du eLearning 2/transtypage automatique JS »

De GBLL, TAL, ALAO, etc.

< Cours:Technologies avancées du eLearning 2
Ligne 8 : Ligne 8 :
  
 
=== Exemples ===
 
=== Exemples ===
<syntaxhighlight lang="JavaScript">
+
<syntaxhighlight lang="javascript">
  var unNombre = 1 ;
+
var unNombre = 1 ;
 
console.log(unNombre + unNombre + unNombre) ;
 
console.log(unNombre + unNombre + unNombre) ;
 
     // → 3 (Number)
 
     // → 3 (Number)
Ligne 16 : Ligne 16 :
 
console.log(unNombre + unNombre + "1") ;
 
console.log(unNombre + unNombre + "1") ;
 
     // → "21" (String)
 
     // → "21" (String)
<syntaxhighlight>
+
</syntaxhighlight>
 +
 
 +
== {{code|String}} vers {{code|Boolean}} ==
 +
Quand le système attend un booléen (comme dans les structures de contrôle <syntaxhighlight lang="javascript" inline>if</syntaxhighlight> et <syntaxhighlight lang="javascript" inline>while</syntaxhighlight>, 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.
 +
{{encart|Créer un programme JS, qui demande à l'utilisateur une chaine de caractère (<syntaxhighlight lang="javascript" inline>prompt</syntaxhighlight>) et qui lui redemande tant qu'il n'en a pas saisi une. Adapter ce programme pour qu'il utilise le transtypage.}}
 +
 
 
<span id="correction" class="mw-customtoggle-correction1">Voir une correction</span>
 
<span id="correction" class="mw-customtoggle-correction1">Voir une correction</span>
<div  class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction1">
+
<syntaxhighlight lang="javascript" class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction1">
 +
//1ère étape, on demande à un utilisateur d'écrire quelque chose et on répond différemment selon ce qu'il fait
 +
var saisieUtilisateur = window.prompt("Écris moi qqch :");
 +
//version normale
 +
var reponseNonVide = (saisieUtilisateur != ""); //Booleen, vrai si la réponse est non vide
 +
if (reponseNonVide){
 +
    window.alert("super");
 +
}
 +
else{
 +
    window.alert("trop nul");
 +
}
 +
//version condensée
 +
  /*saisieUtilisateur est une chaine de caractère
 +
    Transtypée en booléen, elle vaudra vrai, si la chaine
 +
    est non-vide, faux, si elle est vide.
 +
    "if" attend un booléen, si on lui envoie une chaine de
 +
    caractère il va la transtyper.
 +
    On peut donc se passer de notre booléen
 +
    (c'est pas forcément mieux, le code sera moins lisible
 +
      mais c'est possible)*/
 +
if(saisieUtilisateur){
 +
    window.alert("super");
 +
}
 +
else{
 +
    window.alert("trop nul");
 +
}
 +
 
 +
//plus court
 +
  /*prompt envoie une chaine de caractères,
 +
    on peut donc se contenter de…*/
 +
if(window.prompt("Écris moi qqch :")){
 +
    window.alert("super");
 +
}
 +
else{
 +
    window.alert("trop nul");
 +
}
 +
 
 +
//en boucle
 +
while(!window.prompt("Écris moi qqch en boucle :")){
 +
    window.alert("trop nul");
 +
}
 +
window.alert("super");
 +
</syntaxhighlight>

Version du 15 novembre 2018 à 14:32

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

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.

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ère étape, on demande à un utilisateur d'écrire quelque chose et on répond différemment selon ce qu'il fait
var saisieUtilisateur = window.prompt("Écris moi qqch :");
//version normale
var reponseNonVide = (saisieUtilisateur != ""); //Booleen, vrai si la réponse est non vide
if (reponseNonVide){
    window.alert("super");
}
else{
    window.alert("trop nul");
}
//version condensée
   /*saisieUtilisateur est une chaine de caractère
     Transtypée en booléen, elle vaudra vrai, si la chaine
     est non-vide, faux, si elle est vide.
     "if" attend un booléen, si on lui envoie une chaine de 
     caractère il va la transtyper.
     On peut donc se passer de notre booléen
     (c'est pas forcément mieux, le code sera moins lisible
      mais c'est possible)*/
if(saisieUtilisateur){
    window.alert("super");
}
else{
    window.alert("trop nul");
}

//plus court
   /*prompt envoie une chaine de caractères,
     on peut donc se contenter de…*/
if(window.prompt("Écris moi qqch :")){
    window.alert("super");
}
else{
    window.alert("trop nul");
}

//en boucle
while(!window.prompt("Écris moi qqch en boucle :")){
    window.alert("trop nul");
}
window.alert("super");