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.
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 renverratrue
oufalse
. - 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
etelse
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:
- Si vrai, Utiliser les instructions
if
etelse
pour afficher sur la console:Nombre pair!
si le nombre est pair.Nombre impair!
si le nombre est impair.
- Sinon, afficher sur la console
Ceci n'est pas un nombre!
- Si vrai, Utiliser les instructions
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 typeNumber
.possedePermis
: De typeBoolean
.
- Utiliser les instructions
if
etelse
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 valeurpossedePermis
est fausse.Vous êtes majeur, et vous pouvez conduire!
: si l'age est supèrieure à18
et la valeurpossedePermis
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 typenombre
.possedePermis
: De typeBoolean
.
- 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 valeurpossedePermis
est fausse.Vous êtes majeur, et vous pouvez conduire!
: si l'age est supèrieure à18
et la valeurpossedePermis
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
et6
:- 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
.
- Si faux, afficher
Jour incorrect!
.
- Si vrai, Utiliser l'insctruction
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 :
-
- 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.
-
- 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.
- 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
-
- 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
Commentaires

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.
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.
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.
Web
JavaScript
Initiation
Bases
Objets