Avec une calculatrice, pour obtenir un résultat, on tape un nombre - le premier terme -, un opérateur ( +, *, -, /, ... ), un second nombre et sur . C'est facile et rudimentaire.

L'avantage des calculatrices est la taille; elles tiennent dans la main.
Leur désavantage est l'écran : petit et sans couleurs, souvent limité à une seule ligne.

Les smartphones tiennent aussi dans la main, mais leur écran est plus grand et en couleurs.
Et, le fait qu'ils puissent lire des fichiers HTML offre d'autres avantages.

Grâce à la balise <label>, il est possible de lier un nombre à sa signification.
Largeur (cm) :

Grâce aux attributs de la balise <input>, il est possible de contrôler la donnée avant de l'utiliser. Par exemple, pour interdire une largeur négative.

Au lieu de la touche , on peut cliquer sur un bouton plus expressif
Par exemple,

Et, dans un formulaire, il n'est pas obligatoire d'introduire les données dans l'ordre.

Et, grâce au code CSS, il est possible de réaliser de très jolies interfaces.

Pour finir, les smartphones disposent d'un micro. Grâce à la reconnaissance vocale, il sera probablement prochainement possible de dire le nombre au lieu de le taper.

Les smartphones sont donc appelés à remplacer nos calculatrices. Ils ont déjà remplacés nos appareils photos, nos montres, réveils ...

Jusqu'ici, on utilisait des nombres entiers. Voyons tout de suite comment utiliser des nombres réels ( avec virgules ).

parseFloat()

Il est également possible de récupérer des nombres avec des décimales et de les additionner, à condition que l'utilisateur tape un point décimal au lieu d'une virgule décimale.

Dans les pays francophones, on écrit : 1.000.000,00 euros
Or, toute l'informatique a été inventée aux États-Unis ...
Aux États-unis, ce qui sépare la partie entière des décimales est le point décimal !
Dans les pays anglophones, on écrit : 1,000,000.00 dollars

Code HTML ( contenant du code JavaScript ) :

<script>

function additionner(){
    var nombre1=document.getElementById("nombre1").value;
    var nombre2=document.getElementById("nombre2").value;
    var resultat=parseFloat(nombre1)+parseFloat(nombre2);
    document.getElementById("result").value=resultat;
}

</script>

<form id="form1" onsubmit="additionner();return false;">
  <p>
    <input id="nombre1" required="required" />
    + <input id="nombre2" required="required" />
    <input type="submit" value="Additionner" />
  </p>
  <p>
    = <input type="text" readonly="readonly" class="fondGris" size="5" id="result" />
    <input type="reset" value="Effacer" />
  </p>
</form>

class="fondGris", souvenez-vous du mini-cours de CSS.

parseFloat() est une fonction qui ne prend que la partie du nombre (américain) mis entre ses parenthèses. Elle retourne un nombre ou NaN. Cette fonction ressemble fort à la fonction parseInt().

Ce code a un défaut. Si un des deux termes n'est pas un nombre, le résultat sera NaN !
Nous allons résoudre ce problème bientôt.

if

Vous savez que tout langage de programmation permet de regrouper les instructions sous un nom et de les appeler par ce nom. Une autre capacité est de mettre des données en mémoire. Voyons, une troisième capacité : faire des choix.

if ( en anglais ) = si ( en français )

Comment permettre au programme de faire un choix ?

Le programme va tester une condition mise entre parenthèses. Et, si la condition est vraie, alors il exécutera les instructions placées entre les accolades. Si elle est fausse, il "sautera" ces instructions et exécutera les éventuelles instructions après l'accolade fermante.

if ( condition ) { instruction1; instruction2, ...}

Attention, comme avec les fonctions, il n'y a jamais de point-virgule après l'accolade fermante.

La condition est écrite de telle sorte que la réponse soit vraie ou fausse.

Exemples :

   if ( nombre1 > nombre2 ) { ... }   /* nombre1 est-il supérieur à nombre2 ? */
   if ( nombre1 >= nombre2 ) { ... }  /* nombre1 est-il supérieur ou égal à nombre2 ? */
   if ( nombre1 < nombre2 ) { ... }   /* nombre1 est-il inférieur à nombre2 ? */
   if ( nombre1 <= nombre2 ) { ... }  /* nombre1 est-il inférieur ou égal à nombre2 ? */
   if ( nombre1 == nombre2 ) { ... }  /* nombre1 est-il égal à nombre2 ? */
   if ( nombre1 != nombre2 ) { ... }  /* nombre1 est-il différent à nombre2 ? */

>, >=, <, <=, == et != sont appelés des opérateurs de comparaison.
Lorsqu'il existe un opérateur de comparaison entre deux termes, le résultat est true ou false

Bonne nouvelle ! Les opérateurs de comparaison et la structure :
if ( condition ) { instruction1; instruction2, ...}
sont exactement les mêmes dans TOUS les langages de programmation.

Rappel : == veut dire égal
= veut dire ce qui est à droite, je le place à gauche
var nombre1 = 1; // 1 va dans le tiroir nombre1

<script>

function testerSiBebe(){

    var age = document.getElementById("age2").value;
    age=parseInt(age);

    if (age > 5) {
        alert("Tu n'es plus un bébé !");
    }

    alert("Fin du test");
}

</script>

<form id="form2" onsubmit="testerSiBebe();return false;">
  <p>Test 1 :
    <label> Quel est ton âge ?
      <input id="age2" required="required" type="number" min="1" autocomplete="off" />
    </label>
    <input type="submit" value="Tester l'âge" />
    <input type="reset" value="Effacer" />
  </p>
</form>

required="required" type="number" min="1" sont des contraintes.
Pour permettre à l'utilisateur de voir toute de suite son erreur, il vaut mieux placer le maximum de contraintes en HTML.

Rappel : autocomplete="off" sert à interdire les suggestions du navigateur ( qui retient les valeurs introduites dans des champs semblables ).

Si l'utilisateur tape un nombre d'années supérieur à 5, deux boîtes de dialogue s'affichent. La première affiche : "Tu n'es plus un bébé !". La seconde : "Fin du test".

Si l'utilisateur tape un nombre d'années inférieur à 6, une seule boîte de dialogue s'affiche : "Fin du test".

Le programme affiche une ou deux boîtes de dialogue. Le programme est capable de faire un choix en fonction de ce qu'indique l'utilisateur.

En C, il n'existe pas de booléens. Mais, il existe aussi des if.
En C, 0 vaut false ( et tout autre nombre vaut true )
Le JavaScript "conserve" cette possibilité, en conséquence :
if(0){...} // = if(false){...}
if(1){...} // = if(true){...}

Any value that is not false, undefined, null, 0, -0, NaN, ""(empty string), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. Source

Cependant, on aimerait afficher quelque chose si le nombre d'années n'est pas supérieur à 5. Comment faire ?

if ... else ...

else ( en anglais ) = dans l'autre cas ( en français )
else signifie " et si la condition n'est pas vraie ".

function testerSiEnfant(){
    var age = document.getElementById("age3").value;
    age=parseInt(age);

    if (age > 5) {
        alert("Tu n'es plus un bébé !");
    }
    else
    {
        alert("Tu es encore un bébé.");
    }
}

Ici, le programme choisit parmi les deux boîtes de dialogue celle qu'il doit afficher.


  if (...) {
    ...
  }
  else
  {
    ...
  }

/* équivaut à la forme condensée  (tout aussi lisible) ci-dessous : */

  if(...){
    ...
  }else{
    ...
  }

Cette forme condensée - }else{ - est préférée par la plupart des programmeurs. On y gagne deux lignes de code sans perte de lisibilité.

Le programmeur est autorisé de mettre un if dans un if ...

function testerSiAdulte(){
    var age = document.getElementById("age4").value;
    age=parseInt(age);

    if (age > 5) {

        if (age > 18){
            alert("Tu es devenu un adulte.");
        }else{
            alert("Tu n'es plus un bébé !");
        }

    }else{
        alert("Tu es encore un bébé.");
    }
}

Le programmeur est autorisé de mettre un if dans un else ...

function testerSiAdulte2() {
  var age = document.getElementById("age5").value;
  age = parseInt(age);

  if (age < 5) {
    alert("Tu es un bébé !");
  }else{

    if (age >= 18) {
      alert("Tu es devenu un adulte.");
    }else{
      alert("Tu es un enfant ou un adolescent.");
    }

  }

}

Le programmeur est autorisé de faire if ... else if ... else ...

On y gagne encore une ligne de code. Mais y gagne-t-on en lisibilité ?

function testerSiAdulte3() {
  var age = document.getElementById("age6").value;
  age = parseInt(age);

  if (age < 5) {
    alert("Tu es un bébé !");
  }else if(age >= 18){
    alert("Tu es devenu un adulte.");
  }else{
    alert("Tu es un enfant ou un adolescent.");
  }

}

Mettre if dans un else ou faire un else if revient au même !

Il est même autorisé à utiliser une série de else if.

function testerSiAdulte4() {
  var age = document.getElementById("age7").value;
  age = parseInt(age);

  if (age == 1) {
    alert("Tu as un an !");
  }else if(age == 2){
    alert("Tu as deux ans.");
  }else if(age == 3){
    alert("Tu as trois ans.");
  }else{
    alert("Tu es un enfant, un adolescent ou un adulte !");
  }

}

Le if ... else ... résout tous les cas puisqu'ils peuvent être imbriqués dans le else (ou dans le if).

function testerSiAdulte5() {
  var age = document.getElementById("age8").value;
  age = parseInt(age);

  if (age == 1) {
    alert("Tu as un an !!!");
  }else{
    if(age == 2){
      alert("Tu as deux ans !!!.");
    }else{
      if(age == 3){
         alert("Tu as trois ans !!!.");
      }else{
        alert("Tu es un enfant, un adolescent ou un adulte.");
      }
    }
  }

}

}

Toutefois, s'il est nécessaire de faire de nombreuses imbrications, la structure condition switch pourrait être utile, car elle condense le code tout en gardant sa lisibilité.

Puisque tous les cas peuvent être résous via un if...else, la structure switch ne sera pas abordée dans ce mini-cours.
Info sur le switch

isNaN()

Vous savez déjà que NaN signifie " pas un nombre ".
isNaN() signifie " N'est-ce pas un nombre ? ".

isNaN() est une fonction qui retourne true ou false selon ce qui est mis entre ses parenthèses. Si c'est un nombre américain ou pas.

function additionner2(){

    var nombre1=document.getElementById("nombr1").value;
    var nombre2=document.getElementById("nombr2").value;
    var resultat;

    if ( isNaN(nombre1) ){
        alert("La première donnée n'est pas un nombre.\nUtilisez un point décimal.");
    }
    else{
        if( isNaN(nombre2) ){
            alert("La deuxième donnée n'est pas un nombre.\nUtilisez un point décimal.");
        }
        else{
            resultat=parseFloat(nombre1)+parseFloat(nombre2);
            document.getElementById("result2").value=resultat;
        }
    }
}

Il est important de rendre le code lisible pour repérer plus vite les fautes.
Par exemple, une accolade manquante.

isNaN(nombre1) est la condition.
Elle ne contient pas d'opérateur de comparaison.
Une condition peut aussi contenir le résultat d'une fonction qui retourne un booléen.

nombre1 est le paramètre de la fonction isNaN().

Rappel : \n ordonne un retour à la ligne lors de l'affichage de la chaîne de caractères.

Rappel : = signifie qu'on met ce qui est à droite dans ce qui est à gauche.
Ici, on met la valeur de la variable resultat dans la valeur de l'attribut value de la balise <input>.

Attention. alert(isNaN("")) affiche false ...
Ainsi, à la question une chaîne de caractères vide est-elle pas-un-nombre, la réponse est false ...
Donc, si pas-un-nombre est faux, un-nombre est vrai ... Une chaîne vide serait un nombre !
La fonction isNaN() ne doit pas être utilisée avec une chaîne vide ou une variable dont la valeur est une chaîne vide.
Mais, alert(parseInt("")) affiche NaN ...

Plus d'info : isNaN()

En résumé, vous avez appris :

que, via la fonction parseFloat(), on peut transformer une chaîne en un nombre décimal, à condition que la chaîne correspond à un nombre à l'américaine.
que le programme peut faire des choix en fonction d'une condition.
if ( condition ) {...}
qu'il peut aussi exécuter des instructions si la condition n'est pas vraie
if ( condition ) {...} else {...}
qu'un if peut placer dans un if ou un else
- if ( condition1 ) { if ( condition2 ) {...} }
- if ( condition1 ) {...} else { if ( condition2 ) {...} }
- if ( condition1 ) { if ( condition2 ) {...} } else { if ( condition3 ) {...} }
qu'il faut écrire le code de manière lisible pour repérer plus vite une erreur.
qu'une instruction, comme une chaîne de caractères, doit être écrite sur une seule ligne de code
que les 6 opérateurs de comparaison sont : >, >=, <, <=, == et !=
et que le résultat d'une comparaison est : true ou false
que, dans une comparaison, " égal à " s'écrit ==
que la condition peut être remplacée par une fonction qui retourne : true ou false
que isNaN() est une fonction qui retourne true ou false selon ce qui est passé comme paramètre.
que le paramètre de isNaN() ne doit pas représenter une chaîne vide.

Mettre quelque chose entre les parenthèses d'une fonction s'appelle passer un paramètre à la fonction.