Cours 20 - Structures de contrôle itératives

Objectifs

Déroulement

  1. Introduction
  2. Un peu de théorie...
  3. Conclusion

requestAnimationFrame, setInterval et setTimeout

JavaScript est un langage synchrone

Ça veut dire qu'il va exécuter de manière séquentielle les instructions de haut en bas!
La structure séquentielle:

Instruction1;
Instruction2;

Un peu d'info sur le sujet

Le cas requestAnimationFrame()

La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.
Source

See the Pen LYZrppN by Jimmy Gilbert (@coachtechno) on CodePen.

Le cas setInterval(fonction, millisecondes)

//cette fonction sera exécutée à toutes les 3 secondes
setInterval(function(){
    console.log("Hello");
}, 3000);

Comment stopper un intervalle?
Avec clearInterval(id de l'intervalle);

let progression = 0;
let id = setInterval(loading, 10);
function loading() {
    if (progression == 100) {
        clearInterval(id);
    } else {
        progression++;
        console.log(progression+'%');
    }
}

Le cas setTimeout(fonction, millisecondes)

//cette fonction sera exécutée dans 5 secondes
setTimeout(function() {
    console.log("I'm here!");
}, 5000);
console.log("Where are you?");

À tester

See the Pen Cours 15 - setTimeout by Jimmy Gilbert (@coachtechno) on CodePen.

TODO

Les instructions itératives

Le for

Il y a 3 sortes de for:

1 For standard

    /* for (initialisation; condition; exécution en continu){
     //Instruction1
    }*/
    for (i = 0; i < 5; i++) {
     text += "The number is " + i + "<br>";
    }

2 For avec un tableau de valeurs

let cars = ['BMW', 'Volvo', 'Mini'];
let x;
for (x of cars) {
    text += x + "<br >");
}

3 For avec les propriétés d'un objet

let person = {fname:"John", lname:"Doe", age:25};
let text = "";
let x;
for (x in person) {
    text += person[x];
}

Le while

Il y a deux sortes de while:

while (i < 10) {
    text += "The number is " + i;
    i++;
}
do {
    text += "The number is " + i;
    i++;
}
while (i < 10);

Pourquoi avoir deux while?

À tester

See the Pen Cours 15 - Les instructions itératives by Jimmy Gilbert (@coachtechno) on CodePen.

TODO