coopernet Réussir son site web et ses applications de la conception à la réalisation

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.

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");
}

Chaînage optionnel (optional chaining) (?.)

Voir la documentation

L'opérateur ?. fonctionne de manière similaire à l'opérateur de chaînage ., à ceci près qu'au lieu de causer une erreur si une référence est null ou undefined, l'expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n'existe pas.

Ex : 

obj.last?.toUpperCase()

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 ?

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 ?

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 (améliorés !)
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);
}