Retour

3/ Javascript: Blocs structurels

Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.

Dans ce module nous allons voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues: les conditions et les boucles.

Code Final sur Github

Prérequis

Il est conseillé d'avoir suivi les chapitres précédents:

1/ Javascript: Introduction

2/ Javascript: Les variables

Les blocs

En JavaScript, un bloc est une section de code entourée de deux accolades, { et }.

Les blocs sont utilisés pour regrouper des instructions afin qu'elles puissent être traitées ensemble.

console.log("Racine du fichier");

// Bloc 1
{
  console.log("Bloc de profondeur 1");
  
  // Sous bloc 1
  {
    console.log("Bloc de profondeur 2");
  }
}

// Bloc 2
{
  console.log("Bloc de profondeur 1");
}

console.log("Racine du fichier");

L'indentation est une technique utilisée en programmation pour organiser visuellement le code en alignant les blocs de code de manière à ce qu'ils soient faciles à lire et à comprendre.

Cela implique généralement de placer des espaces ou des tabulations avant chaque ligne de code dans un bloc.

En structurant correctement le code avec une indentation cohérente, les développeurs peuvent facilement identifier les blocs de code et les instructions qui appartiennent à chaque bloc.

Cela facilite également la détection des erreurs et des bogues dans le code.

La portée

La portée des variables détermine l'endroit où une variable peut être utilisée dans le code.

En JavaScript, il y a trois types de déclaration de variables : var, let et const. Chacun d'entre eux a une portée différente.

var: La déclaration de variable a portée global. Cela signifie que la variable est disponible dans le contexte globale de l'execution du code, c'est à dire dans tous les blocs et a l'exterieure.
let: La déclaration de variable a portée de bloc ou locale. Cela signifie que la variable est disponible à l'intérieur du bloc où elle a été déclarée, ainsi que dans tous les blocs imbriqués à l'intérieur de ce bloc.

Voici un exemple pour clarifier ces concepts :

// Bloc
{
  // Déclaration de variable à portée globale dans un bloc
  var a = 1;
  
  // Déclaration de variable a portée locale dans un bloc
  let b = 2;

  // Sous bloc
  {
    // Variable globale accéssible dans les sous blocs
    console.log(a); // 1

    // Variable locale accessible dans les sous blocs
    console.log(b); // 2
  }
}

// Variable globale accéssible a l'exterieure du bloc de déclaration
console.log(a); // 1

// Variable locale non accessible a l'exterieure du bloc de déclaration
console.log(b); // b is not defined

1/ Les conditions

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres.

Par exemple afficher le lien Page de profil ou le lien Se connecter suivant si l'utilisateur s'est déjà connecté à notre site ou pas.

1.1/ Instruction if ... else

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript.

L'instruction if nous permet décider de l'execution ou non d'un bloc de code suivant une condition fournit entre les parenthèse suivant l'insctruction.

L'insctruction if peut être suivit par l'instruction else qui détermine le bloc à executer si la condition et fausse.

Voici un exemple pour illustrer le propos:

if (condition) {
  //code à exécuter si la condition est true
} else {
  //sinon exécuter cet autre code à la place
}

Le mot‑clé if suivie de parenthèses ().
Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe-t-elle ? »).
Cette condition se servira des opérateurs de comparaison, opérateurs d'égalites et opérateurs de logique que nous avons étudié dans le précédent module, et renverra true ou false.
Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
Le mot‑clé else.
Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — il sera exécuté seulement si la condition renvoie pas false.

Ainsi le code suivant permet d'afficher dans la console Vous êtes majeur! si le age est supérieure à 18, sinon ile affichera Vous êtes mineur!:

let age = 25;
if (age > 18) {
  console.log("Vous êtes majeur!")
} else {
  console.log("Vous êtes mineur!")
}

Affiche:

"Vous êtes majeur!"

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

let age = 12;
if (age > 18) {
  console.log("Vous êtes majeur!");
}
console.log("La suite du code")

Affiche:

"La suite du code"

Exercices

Exercice 1

Récuperer l'entré par l'utilisateur en utilisant la boite de dialogue.
Utiliser les instructions if et else pour afficher sur la console:
- C'est un nombre! si l'utilisateur a entré un nombre.
- Ce n'est pas un nombre! si l'utilisateur n'a pas entré un nombre.

Solutions

// Demander a l'utilisateur d'entrer un nombre
const entrerUtilisateur = prompt('Entrez quelque chose.');

// tester si l'entrée n'est pas un nombre avec la fonction isNaN (is Not a Number)
if(isNaN(entrerUtilisateur)){
  // Si vrai, la variable n'est pas un nombre
  console.log("Ce n'est pas un nombre!");
}else{
  // Si faux, la variable n'est un nombre
  console.log("C'est un nombre!");
}

Il est aussi possible d'éxécuter le fonction prompt directement dans la fonction isNaN, ce qui permet d'ommettre la variable intermédiaire entrerUtilisateur:

if(isNaN(prompt('Entrez quelque chose'))){
  console.log("Ce n'est pas un nombre!");
}else{
  console.log("C'est un nombre!");
}

Exercice 2

Récuperer un nombre entré par l'utilisateur en utilisant la boite de dialogue.
Tester si l'entrée est un nombre:
1. Si vrai, Utiliser les instructions if et else pour afficher sur la console:
  - Nombre pair! si le nombre est pair.
  - Nombre impair! si le nombre est impair.
2. Sinon, afficher sur la console Ceci n'est pas un nombre!

Solutions

// Demander a l'utilisateur d'entrer un nombre
const nombre = prompt('Entrez un nombre');

// tester si l'entrée n'est pas un nombre avec la fonction isNaN (is Not a Number)
if(isNaN(nombre)){
  // Si vrai, la variable n'est pas un nombre
  console.log("Ce n'est pas un nombre!");
}else{
  // Si faux, la variable n'est un nombre
  // tester si le reste de la division du nombre sur deux est égale a 0
  if(nombre % 2 === 0){
    // Si vrai, le nombre est pair
    console.log("Nombre pair!");
  }else{
    // Si faux, le nombre est impair
    console.log("Nombre impair!");
  }
}

Exercice 3

Déclarer deux variables:
- age : De type Number.
- possedePermis : De type Boolean.
Utiliser les instructions if et else pour afficher sur la console:
- Vous êtes mineure!: si l'age est infèrieure à 18.
- Vous êtes majeur, mais ne pouvez pas conduire!: si l'age est supèrieure à 18 mais que la valeur possedePermis est fausse.
- Vous êtes majeur, et vous pouvez conduire!: si l'age est supèrieure à 18 et la valeur possedePermis est vraie.

Solutions

Solution 1:

// Déclaration des variables
const age = 22;
const possedePermis = true;

// Tester si l'age est infèrieure a 18
if(age < 18){
  // Si vrai, mineure
  console.log("Vous êtes mineure!");
}else{
  // Si faux, majeur
  // Tester si possedePermis est vrai
  if(possedePermis){
  // Si vrai, peux conduire
  console.log("Vous êtes majeur, et vous pouvez conduire!");
  }else{
    // Si faux, ne peut pas conduire
    console.log("Vous êtes majeur, mais ne pouvez pas conduire!");
  }
}

1.2/ Opérateur ternaire

Voici une autre syntax pour ajouter une condition à notre code.

L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false.

Elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false.

Voici la syntaxe générale :

( condition ) ? exécuter ce code : exécuter celui‑ci à la place

L'équivalent de la condition précédente en utilisant l'opérateur ternaire serait:

let age = 20;

// Alternative 1
age > 18  ? console.log("Vous êtes majeur!") : console.log("Vous êtes mineur!"); // Vous êtes majeur!

 // Alternative 2
console.log(age > 18  ? "Vous êtes majeur!" : "Vous êtes mineur!"); // Vous êtes majeur!

// Alternative 3
console.log(`Vous êtes ${age > 18 ? "majeur" : "mineur"}!`); // Vous êtes majeur!

Exercices

Exercice 1

Récuperer un nombre entré par l'utilisateur en utilisant la boite de dialogue.
Utiliser l'opérateur ternaire pour afficher sur la console:
- Nombre pair! si le nombre est pair.
- Nombre impair! si le nombre est impair.

Solutions

// Demander a l'utilisateur d'entrer un nombre
const nombre = prompt('Entrez un nombre');

// tester si le reste de la division du nombre sur deux est égale a 0
console.log(`Nombre ${ nombre % 2 === 0 ? "pair": "impair" }!`)

Il est aussi possible d'éxécuter le fonction prompt directement dans la condition de l'opérateur ternaire, ce qui permet d'ommettre la variable intermédiaire nombre:

console.log(`Nombre ${ prompt('Entrez un nombre') % 2 === 0 ? "pair": "impair" }!`)

Exercice 2

Déclarer deux variables:
- age : De type nombre.
- possedePermis : De type Boolean.
Utiliser les l'opérateur ternaire pour afficher sur la console:
- Vous êtes mineure!: si l'age est infèrieure à 18.
- Vous êtes majeur, mais ne pouvez pas conduire!: si l'age est supèrieure à 18 mais que la valeur possedePermis est fausse.
- Vous êtes majeur, et vous pouvez conduire!: si l'age est supèrieure à 18 et la valeur possedePermis est vraie.

Solutions

Solution 1:

// Déclaration des variables
const age = 22;
const possedePermis = true;

console.log( age < 18 ? "Vous êtes mineure!" : possedePermis ? "Vous êtes majeur, et vous pouvez conduire!" : "Vous êtes majeur, et vous pouvez conduire!" );

1.3/ Instruction switch

Les instructions if...else font bien le travail d'iguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient.

Elles sont principalement adaptées aux cas où vous avez un choix binaire.

Quand nous avons un système de conditions plus complexe, avec plusieurs testes, les code peut devenir très vite illisible.

Les instructions switch prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec.

Voici un peu de pseudo-code, pour vous donner l'idée :

switch (expression) {
case choix1:
  exécuter ce code
  break;

case choix2:
  exécuter ce code à la place
  break;

// incorporez autant de case que vous le souhaitez

default:
  sinon, exécutez juste ce code
}

Et un exemple simple pour mieux comprendre:

let couleur = "rouge";
switch (couleur) {
case "rouge":
  console.log("C'est une couleur chaude!"); // "C'est une couleur chaude!"
  break;

case "bleu":
  console.log("C'est une couleur froide!")
  break;

case "vert":
  console.log("C'est une couleur froide!")
  break;

default:
  console.log("Je ne connais pas cette couleur!")
}

Ce qui affiche:

"C'est une couleur chaude!"

Il est important de savoir que si une condition est validée, la suite du code sera exécuter, pour toutes les autres instructions, même si la condition reste fausse.

Voici l'exemple précédent en ommettant le mot clé break:

let couleur = "rouge";
switch (couleur) {
case "rouge":
  console.log("C'est une couleur chaude!"); // "C'est une couleur chaude!"
  // Omission du 'break';

case "bleu":
  console.log("C'est une couleur froide!"); // "C'est une couleur froide!"
  break;

case "vert":
  console.log("C'est une couleur froide!");
  break;

default:
  console.log("Je ne connais pas cette couleur!");
}

Ce qui affiche:

"C'est une couleur chaude!"
"C'est une couleur froide!"

Pour arrêter le l'execution du code une fois entré dans un cas, nous utilisons le break.

Mais pourquoi cela fonctionne-t-il de cette manière?

C'est pour avoir la possibilité d'utiliser un OU afin d'éviter de dupliquer du code.

Dans notre exemple, les instructions sont les mêmes pour la couleur bleu et vert.

Si nous voulons éviter de dupliquer on peut utiliser cette syntaxe:

let couleur = "bleu";
switch (couleur) {
case "rouge":
  console.log("C'est une couleur chaude!");
  break;

case "bleu":
case "vert":
  console.log("C'est une couleur froide!"); // "C'est une couleur froide!"
  break;

 default:
  console.log("Je ne connais pas cette couleur!");
}

Ce qui affiche:

"C'est une couleur froide!"

Exercices

Exercice 1

Récuperer un nombre entré par l'utilisateur en utilisant la boite de dialogue et le stocker dans une variable nommée numeroJour.
Tester si le nombre entré est entre 0 et 6:
1. Si vrai, Utiliser l'insctruction switch pour afficher sur la console:
  - Lundi si le nombre est égale à 0.
  - Mardi si le nombre est égale à 1.
  - Mercredi si le nombre est égale à 2.
  - Jeudi si le nombre est égale à 3.
  - Vendredi si le nombre est égale à 4.
  - Weekend si le nombre est égale à 5 ou à 6.
2. Si faux, afficher Jour incorrect!.

Solutions

// Demander a l'utilisateur d'entrer un nombre
const numeroJour = prompt('Entrez un nombre entre 0 et 6');

if(numeroJour >= 0 && numeroJour <= 6){
  switch (numeroJour) {
    case 0:
      console.log("Lundi");
      break;
    case 1:
      console.log("Mardi");
      break;
    case 2:
      console.log("Mercredi");
      break;
    case 3:
      console.log("Jeudi");
      break;
    case 4:
      console.log("Vendredi");
      break;
    case 5:
    case 6:
      console.log("Weekend");
      break;
  }
}else{
  console.log("Jour incorrect!");
}

Il est aussi possible d'éviter de tester si le nombre est entre 0 et 6, et utiliser la case par défaut pour avoir le meme résultat:

const numeroJour = prompt('Entrez un nombre entre 0 et 6');
switch (numeroJour) {
    case 0:
      console.log("Lundi");
      break;
    case 1:
      console.log("Mardi");
      break;
    case 2:
      console.log("Mercredi");
      break;
    case 3:
      console.log("Jeudi");
      break;
    case 4:
      console.log("Vendredi");
      break;
    case 5:
    case 6:
      console.log("Weekend");
      break;
    default:
      console.log("Jour incorrect!");
  }

2/ Les boucles

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques jusqu'à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter.

2.1/ La boucles for

La première, celle que vous utiliserez le plus souvent, est la boucle for :

for (initialisation; condition de sortie; expression finale) {
  // code à exécuter
}

Le mot-clé for, suivi par des parenthèses. A l'intérieur des parenthèses, on a trois éléments :

1. Une initialisation : il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
1. Une condition de sortie : comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte. Tant que cette condition est true, la boucle continu de s'éxecuter.
1. Une expression finale : elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.

Des accolades contenant un bloc de code : ce code sera exécuté chaque fois que la boucle itère.

Voici un exemple qui de boucle qui vas itérer 11 fois et affichera la valeur de la variable compteur dans la console:

for (let compteur = 0; compteur <= 10; compteur++) {
  console.log(`Itération ${compteur}.`)
}

Ce qui affiche:

  Itération 0
  Itération 1
  Itération 2
  Itération 3
  Itération 4
  Itération 5
  Itération 6
  Itération 7
  Itération 8
  Itération 9
  Itération 10

Exercices

Exercice 1

Utilisez une boucle for, pour afficher les tous nombre pairs entre 0 et 50:

Solutions

Solution 1:

// Un boucle entre 0 et 20 avec compteur incrémenté de 1
for (let compteur = 0; compteur <= 20; compteur++) {
  // Tester si reste de division par deux est égale a 0
  if(compteur % 2 === 0){
    // Ici veut dire que compteur est un nombre pair
    console.log(`Nombre pair: ${compteur}`);
  }
}

Solution 2:

// Un boucle entre 0 et 10 avec compteur incrémenté de 1
for (let compteur = 0; compteur <= 10; compteur++) {
    // Mutiplication du compteur par 2 ce qui donne un nombre pair
    console.log(`Nombre pair: ${compteur * 2}`);
}

Solution 3:

// Un boucle entre 0 et 20 avec compteur incrémenté de 2
for (let compteur = 0; compteur <= 20; compteur = compteur + 2) {
    // compteur sera toujours pair car il est incrémenté par deux
    console.log(`Nombre pair: ${compteur}`);
}

Ce qui affiche:

Nombre pair: 0
Nombre pair: 2
Nombre pair: 4
Nombre pair: 6
Nombre pair: 8
Nombre pair: 10
Nombre pair: 12
Nombre pair: 14
Nombre pair: 16
Nombre pair: 18
Nombre pair: 20

Exercice 2

Demander et stocker un nombre entré par l'utilisateur en utilisant la boite de dialogue, dans une variable nommée nombre.
Utilisez une boucle for, pour afficher la table de multiplication de ce nombre entre 0 et 10:

Solutions

let nombre = prompt('Entrez un nombre.');
for (let compteur = 0; compteur <=10; compteur++) {
  console.log(`${compteur} x ${nombre} = ${nombre * compteur}`)
}

Ce qui affiche:

  0 x 7 = 0
  1 x 7 = 7
  2 x 7 = 14
  3 x 7 = 21
  4 x 7 = 28
  5 x 7 = 35
  6 x 7 = 42
  7 x 7 = 49
  8 x 7 = 56
  9 x 7 = 63
  10 x 7 = 10

2.2/ while et do…while

for n'est pas le seul type de boucle disponible en JavaScript.

Par exemple la boucle while, qui fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter, plutôt que ces deux éléments soient inclus dans les parenthèses.

La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while.

// Déclaration du compteur avant la boucle
let compteur = 0;

// Boucle tant que le compteur est infèrieure a 10
while (compteur <= 10) {
  // Afficke l'itération
  console.log(`Itération ${compteur}`);

  //Expression finale: incrémenter le compteur
  compteur++;
}

console.log(compteur); // 11

La boucle do…while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

let compteur = 11;
do {
  console.log(`Itération ${compteur}`)
  compteur++;
} while (compteur <= 10);

console.log(compteur); // 12

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

Le différenciateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while.

Dans une boucle do…while, le code à l'intérieur des accolades est toujours exécuté au moins une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté).

Attention : Avec while et do…while, comme avec toutes les boucles, vous devez vous assurer que l'initialiseur est incrementé pour qu'il atteigne finalement la condition de sortie.

Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera.

C'est ce qu'on appelle une boucle infinie.

Exercices

Exercice 1

Utilisez une boucle while ou do...while, pour demander à l'utilisateur en boucle d'entrer un nombre tant qu'il n'est pas correcte.

Solutions

let potentielNombre = prompt("Entrez un nombre.");

while(isNaN(potentielNombre)){
  potentielNombre = prompt("Ceci n'est pas un nombre! Entrez un nombre.")
}

console.log(`Votre nombre est ${potentielNombre}`);

Conclusion

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles et des boucles en JavaScript pour le moment.

Dans le prochain chapitre, nous allons aborder le concept des fonctions, essentiel de la programmation qui permettent de stocker un bloc de code dans une variable afin de l'appeler/executer plus tard.

Aller plus loin

Précedent: Javascript: Les variables

Suivant: Javascript: Les fonctions

Commentaires

IsLoading

Javascript: Initiation

Apprendre les bases du langage Javascript, pour construire des pages web dynamiques et interactives.

Exemple: Les variables, les blocs structurels, les fonctions, les objets, la manipulation du DOM...

Niveau:

JavaScript

Album

1/ Javascript: introduction

Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.

Dans ce chapitre nous allons voir comment Javascript fonctionne et apprendre à utiliser les outils nécessaires pour développer avec ce langage.

Niveau:

Web

JavaScript

Bases

2/ Javascript: Les variables

Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.

Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.

Niveau:

Web

JavaScript

Initation

Bases

Variables

4/ Javascript: les fonctions

Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard.

Niveau:

Web

JavaScript

Initiation

Bases

Fonctions

5/ JavaScript: les objets

Apprendre les bases pour développer en JavaScript, pour construire des pages web dynamiques et interactives.

Dans ce premier article consacré aux objets en JavaScript, nous verrons les fondamentaux de la syntaxe objet en JavaScript et comment les manipuler.

Niveau:

Web

JavaScript

Initiation

Bases

Objets

6/ JavaScript: le DOM

Apprendre les bases pour développer en JavaScript, pour construire des pages web dynamiques et interactives.

Dans ce module, nous allons explorer ce que sont les API, et comment utiliser l'API du navigateur pour créer des page dynamiques et interactives.

Niveau:

Web

JavaScript

Initiation

Bases

DOM