Diagramme de flux

Lors de la création d'un programme, il est régulièrement nécessaire de faire des choix qui vont influencer le déroulement du parcours dans lequel est engagé l'utilisateur.

Diagramme flux authentification

On peut visualiser ces parcours via des diagrammes de flux. Ces choix s'opèrent dans le code à l'aide de "structures" de contrôle dont vous pourrez voir les principales dans cette page

Condition if ...else

let i = 2;
if(i > 2) {
  console.log("i est supérieur à 2");
}else {
  console.log("i est inférieur ou égal à 2");
}
/* == ceci est une comparaison */
if(i == 2){
  console.log("i est égal à 2");
}

boucle for

for(let i = 0; i < 10; i ++) {
  console.log(i);
} 

boucle while

let i = 0;
while(i < 10) {
  console.log(2*i+1);
  i++;
} 

 

Comparaison

Cas des types primitifs

Dans le cas des types primitifs, js va comparer les valeurs (avec ou sans transtypage)

let i = 2;   // type : number
let j = "2"; // type : string
if(i==j){// le == fait du transtypage
  console.log("i est égal à j");
}
if(i===j){// le === ne fait pas de transtypage
  console.log("i est égal à j");
}else {
  console.log("i n'est pas égal à j");
}

A votre avis que va afficher le code ci dessus ?

"i est égal à j"
"i n'est pas égal à j"

Cas des types objet

Dans le cas des objets, js va comparer non pas les valeurs mais les références. Plus d'infos

let i = 2;
let j = i;
if (i === j) console.log('i et j identiques');

let p1 = {"name": "Bob"};
let p2 = {"name": "Bob"};
let p3 = p1;
if (p1 == p2) console.log('p1 et p2 identiques');
if (p1 == p3) console.log('p1 et p3 identiques');

A votre avis que va afficher le code ci dessus ?

i et j identiques
p1 et p3 identiques

Parcours des propriétés d'un objet - boucle for ... in

const jc = {
  nom: "Dusse",
  prenom: "Jean-Claude",
  sePresenter: function(){
    console.log("Bonjour, je m'appelle " +
    this.prenom + " " + this.nom);
  }
}
for(let key in jc) {
  console.log(key + " : " + jc[key]);
}

// LES OBJETS EN JS SONT DES TABLEAUX ASSOCIATIFS
console.log(jc.nom);
console.log(jc["nom"]);
console.log(jc.sePresenter());
console.log(jc["sePresenter"]());

Parcours d'un tableau à index avec la boucle for

// Tableau littéral à index
var personnages = ["Harry","Hermione","Ron","Voldemore"];

let taille = personnages.length;

for(var i = 0; i < personnages.length; i ++) {
  console.log(personnages[i]);
}

Parcours d'un tableau à index avec la boucle for ... of

const fruits = ["Cerise", "Pomme"];
for(let elt of fruits) {
  console.log(elt);
}