La structure d'un JavaScript

Le javascript a une structure de programmation proche du langage C, moins riche naturellement.
Dans cette page, nous verrons :
Les commentaires
Le groupement d'instructions
Les tests conditionnels
Les structures de boucle
L'opérateur ternaire

Ecrire un commentaire

Les commentaires sont indispensables en programmation, pour retrouver simplement le fonctionnement d'un script sans avoir à décoder toutes les lignes de code. Un commentaire ne doit pas traduire ce qui est évident mais ajouter des informations pertinentes sur l'utilité d'une fonction ou les circonstances qui ont amené à un raisonnement.

Un commentaire est simplement ignoré par le navigateur.

Pour mettre en commentaire une partie de ligne, jusqu'au prochain retour à la ligne, utilisez // :

   var age=25; // Tout ce qui suit est un commentaire

Pour mettre en commentaire plusieurs lignes de code :

   /* Ceci est en commentaire ligne 1
   Ligne 2
   Dernière ligne */

Certains utilisent la syntaxe /* commentaire */ même sur une seule ligne, pour le rendre plus lisible.

Grouper des instructions en blocs

Comme en C, les instructions sont regroupées dans des blocs par les accolades { et }. Dans un script, il doit y avoir autant d'accolades ouvertes que d'accolades fermées.
Le groupement d'instructions est utile. Il permet par exemple de regrouper les instructions d'une fonction :

   function somme(a,b) {
      var sum=a+b;
      return sum;
   }

Cette fonction inutile retourne la somme de deux paramètres. L'ensemble de la fonction est entouré d'accolades.

Le test conditionnel

La programmation nécessite toujours des tests de condition pour réaliser telle ou telle action selon telle ou telle condition. Le javascript est riche en instructions de test de condition.

Ecrire une condition

Une condition en programmation est un test qui vaut soit vrai true, soit faux false. On parle de booléen.

Le test d'égalité est noté avec un double signe égal ==. Le signe est doublé car un signe simple signifie une affectation de valeur à une variable.

Le test de différence est noté !=. Le signe ! signifie la négation not, littéralement not equal.

Classiquement > signifie strictement supérieur et >= signifie supérieur ou égal. Inversement avec < et <=.

Quelques exemples de conditions :

var a=1, b=2, c=3;
console.log( a==1 );
console.log( a>b );
console.log( a<b );
console.log( a=="1" );

Ce qui donne à l'exécution dans la console du navigateur :

JavaScript n'est pas un langage fortement typé. On peut manipuler des variables sans trop se préoccuper de leur type précis, qu'il s'agisse d'entier, de nombre, de chaînes de caractères, ... Il existe donc un autre opérateur de condition pour tester l'égalité stricte de contenu et de type. Le triple égal === joue ce rôle. La notation !== signifie une différence de contenu ou de type.

Quelques exemples de conditions sur le type :

var a=1, b=2, c=3;
console.log( a===1 );
console.log( a==="1" );
console.log( a!=="1" );

Ce qui donne à l'exécution dans la console du navigateur :

Si dans ces exemples, a=="1" on voit que a!=="1" !

Test simple

L'instruction if permet de diriger l'exécution du script suivant le résultat d'un test.
Il y a 2 moyens d'utiliser if selon le nombre d'actions à réaliser.
Si l'action à réaliser tient en une instruction :

if (age<18) alert("Vous devez être majeur");

Ici, si la variable age est inférieur à 18, un message est affiché.

Si l'action à réaliser tient en plusieurs instructions, il faut utiliser les accolades pour grouper les différentes instructions dans un bloc. :

   if (age<18) {
      alert("Vous devez être majeur");
      window.location="mineur.php";
   }

Ici, si la variable age est inférieur à 18, un message est affiché et le visiteur est redirigé vers la page mineur.php.

Test Si - Sinon

Reprenons notre dernier exemple :

   if (age<18) {
      alert("Vous devez être majeur");
      window.location="mineur.php";
   } else {
      window.location="majeur.php";
   }

Ici, si le visiteur est mineur, il est redirigé vers mineur.php grâce au bloc if, sinon il est redirigé vers la page majeur.php via le bloc else.

Les structures de boucles

Comme en C, le javascript reconnaît les boucles itératives et les boucles conditionnelles.

Les boucles itératives

Une boucle itérative exécute un groupe d'instructions tant que le compteur d'itérations n'a pas atteint une valeur donnée.
Voici la syntaxe générale :

   for(initialisation; condition; opération) {
      // Vos instructions répétées
   }

L'instruction for attend 3 paramètres : initialisation permet d'initialiser la valeur du compteur au démarrage.
condition teste si le compteur a atteint la valeur limite. Tant que condition est vraie, la boucle continue.
operation permet d'incrémenter le compteur à chaque passage de la boucle.

Voici quelques exemples concrets.
Faire une boucle pour i variant de 0 à 100 inclus par pas de 1

   for (var i=0;i<=100;i=i+1)

Faire une boucle pour i variant de 10 à 0 exclus par pas de -1

   for (var i=10;i>0;i=i-1)

Voici une application mathématique. Il s'agit de calculer la somme des nombres de 1 à N.

Le formulaire de saisie se crée ainsi :

<form>
  Entrez la valeur de N = <input type="text" name="N" value="10">   
  <input type="button" value="Calculer" onClick="somme(this.form.N.value)">
</form>

La fonction qui calcule cette somme est déclarée :

function somme(N) {
  N=parseInt(N); // Fonction qui convertit N en entier
  console.log("Lancement de la fonction somme avec N="+N);
  var sum=0;
  for (var i=1; i<=N; i=i+1) {
     sum=sum+i;
  }
  console.log(sum);
  return sum;
}

Entrez N dans le champ texte et cliquez sur le bouton de calcul. La fonction somme() affiche dans la console le résultat.

Astuces d'écriture

Le javascript reprend du C la syntaxe particulière pour les additions et soustractions.
Ainsi, écrire a=a+1; est équivalent à a++;
Et inversement a=a-1; est équivalent à a--;

Dans la même idée, on peut aussi remplacer a=a+5; par a+=5;

Vous trouverez donc souvent les boucles for avec cette syntaxe :

for(var i=0; i<100; i++)

Les boucles conditionnelles

Il peut être utile de faire une boucle tant qu'une condition est vraie.
La boucle "tant que" est déclarée par while :

while (condition) {
  // Les instructions de la boucle
}

Ici, tant que condition est vraie, la boucle est exécutée.

Les tests multiples

Pour comparer une variable à plusieurs valeurs, utilisez l'instruction switch associées aux différents case à comparer, qui offre une syntaxe et une lisibilité très adaptées à ce besoin.

Ici, la variable myBrowser est comparée à différentes valeurs

Le bouton pour déclencher l'appel

<div class="btn radius btn-outline cursor-pointer" onclick="getBrowser()">Cliquez moi</div>

La fonction contenant le bloc switch.

function getBrowser() {
  console.log(myBrowser);
  switch(myBrowser) {
    case ("Firefox"):
      var s="Le panda roux";
      break;
    case ("Chrome"):
      var s="Google est partout";
      break;
    case ("Safari"):
      var s="La pomme est dans le navigateur";
      break;
    case ("Opera"):
      var s="Pourquoi pas";
      break;
    case ("Edge"):
      var s="Sérieusement ?";
      break;
    case ("Internet Explorer"):
      var s="Faut bien tester";
      break;
    default :
      var s= "Type inconnu";
  }
  console.log(s);
}

Cliquez sur le bouton pour lancer la structure switch.

N'oubliez pas le break dans chaque case, sinon, les instructions suivantes s'exécutent...

Combinaisons de conditions

Il est bien évidemment possible de combiner des tests ensemble pour créer des conditions plus complexes. JavaScript interprète les expressions du test en donnant la priorité aux tests les plus profonds dans la hiérarchie des parenthèses.

Le test logique ET est symbolisé par un double caractère "et commercial" &&. Le test logique OU est symbolisé par un double caractère "pipe" ||.

Quelques exemples de conditions combinées :

if ( (a==1) && (b==2) ) // Si a vaut 1 ET b vaut 2
if ( (a!=1) && (b==2) ) // Si a est différent de 1 ET b vaut 2
if ( (a!=1) || (b==2) ) // Si a est différent de 1 OU b vaut 2

L'opérateur ternaire

Le nom de cette syntaxe vient des 3 parties qui la composent. Sa forme très compacte la rend parfois difficile à comprendre. Le but est de retourner 2 valeurs selon le résultat d'une condition. La syntaxe est de ce type :

condition ? valeur_si_vrai : valeur_si_faux

Prenons le cas simple du choix entre "Bonjour" et "Bonsoir" selon l'heure de la journée.

  var dt=new Date();
  var heure=dt.getHours();
  console.log(heure);
  var txtAccueil = heure<18 ? "Bonjour" : "Bonsoir";
  document.write(txtAccueil + ", cher visiteur");

A l'exécution, le texte d'accueil adapté est affiché. La console contient la valeur de getHours().

Pour continuer

Continuez votre lecture avec le tutoriel sur le langage objet.