Javascript

Contrôle du flux d'instructions

Bloc

L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades.

Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que if, for, while.

while (x < 10) {
  x++;
}

Instructions conditionnelles

Opérateur conditionnel ternaire

Syntaxe

Exemples

let autorisation = true;

console.log( autorisation ? "autorisé" : "interdit" ); //autorisé

let toto = { nom : "Toto", age : 25};

console.log( toto.age > 18 ? "majeur" : "mineur" ); //majeur

Valeurs équivalentes à false

Lors d'une conversion en booléen, les valeurs suivantes renvoient false (falsy values) :

• false
• undefined
• null
• 0
• NaN
• ""

Les autres valeurs, dont les objets, renvoient true.

Boolean(5); //true
Boolean(-1); //true
Boolean(0); //false
Boolean({}); //true
Boolean([]); //true
Boolean(5/0); // Infinity => true
Boolean( Number("toto") ); // NaN => false
Boolean("true"); //true
Boolean("false"); //true

Boucles et itération

Instruction for

Syntaxe

Exemple

for (let pas=0 ; pas<5 ; pas++) {
  // Ceci sera exécuté 5 fois
  // la variable "pas" ira de 0 à 4
  console.log("Faire un pas vers l'est");
}
						

Instruction while

Syntaxe

ou

Dans le deuxième cas, l'instruction sera exécutée au moins une fois, même si la condition est fausse.

Exemple

let n = 0;
let x = 0;

while (n < 3) {
  n++;
  x+= n;
}

break

Provoque la fin de l'instruction while, do-while, for, ou switch dans laquelle il est inscrit (la plus imbriquée).

let tab = ["toto","titi","tata"];

for (let i=0; i<tab.length; i++) {
  if (a[i] == "tata") break;
  console.log(a[i]);
}

continue

Termine l'itération courante de la boucle (la plus imbriquée) et passe à l'exécution de la prochaine itération.

let i = 0;
let n = 0;

while (i < 5) {
  i++;
  if (i == 3) continue;
  n += i;
}

n; //1 + 2 + 4 + 5

Gestion des exceptions

Gestion des exceptions

Problème

function dernierElement(tableau) {

  if (tableau.length === 0) {
    console.log("Le tableau est vide");
    return false;
  }

  return tableau.at(-1);
}
					

Ce code n'est pas très bon pour plusieurs raisons

• comment faire si je veux informer l'utilisateur que le tableau est vide, autrement que par la console ?
• Que se passe-t-il si le dernier élément du tableau contient la valeur false ?

Gestion des exceptions

Solution

La fonction jette (ou lève) une exception quand elle rencontre un cas anormal.

function dernierElement(tableau) {

  if (tableau.length === 0) throw new Error("Le tableau est vide");

  return tableau.at(-1);
}

C'est à l'appel de la fonction que l'on décide comment gérer l'erreur.

try { dernierElement([]); }
catch(e) { console.log(e); }

//ou

try { dernierElement([]); }
catch(e) { window.alert(e); }

Gestion des exceptions

Exemple complet

function verifNom(nom) {
  if (typeof nom !== "string") throw new Error(typeof nom + ": type incorrect");
  if ( !/^[a-z]+$/i.test(nom) ) throw new Error(nom + ": nom incorrect");
}

function verifAge(age) {
  if (typeof age !== "number") throw new Error(typeof age + ": type incorrect");
  if (age < 0 || age > 120) throw new Error(age + ": âge incorrect");
}

function verifChamps(obj) {
  if (typeof obj !== "object") throw new Error("verifChamps attend un objet");
  verifNom(obj.nom);
  verifAge(obj.age);
}

try {
    verifChamps({ nom : "Toto", age : 25 });
    verifChamps({ nom : "Toto" });
    verifChamps({ nom : 25, age : "Toto" });
}
catch(e) { window.alert(e); }

Asynchronisme

Exemple

let i=0;

window.setTimeout(() => i++, 1000);

console.log(i); //?

Asynchronisme

évènements

let img = new Image();

img.src = "http://www.meteofrance.com/vigilance/mn.gif";

console.log(img.width); //0
//car l'image est chargée de manière asynchrone

//mais
img.addEventListener("load", () => console.log(img.width) /* 71 */);

//quand l'image est chargée, l'évènement "load" est déclenché
//et les fonctions liées à l'évènement sont exécutées.

Asynchronisme

Callback hell

//Supposons que nous voulions charger une série d'images,
//les unes après les autres, avec une pause de 5 secondes entre chaque
let img = new Image();
img.src = "http://monServeur/monImage1.png";
img.addEventListener("load", () => {
  window.setTimeout(() => {
    let img = new Image();
    img.src = "http://monServeur/monImage2.png";
    img.addEventListener("load", () => {
      window.setTimeout(() => {
        let img = new Image();
        img.src = "http://monServeur/monImage3.png";
        img.addEventListener("load", () => {
          //etc etc
        });
      },5000);
    });
  },5000);
});

Asynchronisme

Callback hell, tentative d'amélioration

function chargerImage(src,callback) {
  let img = new Image();
  img.src = "http://monServeur/"+src;
  img.addEventListener("load", () => window.setTimeout(callback, 5000));
}

chargerImage("monImage1.png", () => {
  chargerImage("monImage2.png", () => {
    chargerImage("monImage3.png", () => {
      //etc etc
    });
  });
});