JavaScript

Boucles et Fonctions

Pr. Ahmed Drissi el maliani

FSR, March 20, 2025 1/64

Plan

Les Boucles

Les Fonctions

2/64
Différents Types de Boucles en JavaScript

JavaScript prend en charge différents types de boucles :

• while : boucle qui parcourt un bloc de code tant qu’une condition spécifiée est
vraie.
• do/while : boucle similaire à while, mais elle garantit l’exécution du code au
moins une fois, même si la condition est fausse dès le début.
• for : boucle qui parcourt un bloc de code un nombre d’itérations spécifié.
• for/in : boucle qui parcourt les propriétés d’un objet.
• for/of : boucle qui parcourt les valeurs d’un objet itérable.

3/64
Syntaxe de la boucle while

Syntaxe :
while ( condition ) {
// s e q u e n c e de c o d e
}

• La boucle while permet d’exécuter une séquence de code tant que la condition
est vraie.
• La condition est évaluée avant chaque itération.
• Assurez-vous que celle-ci évolue pour éviter une boucle infinie.
• Une variable compteur est souvent utilisée pour contrôler le nombre d’itérations.

4/64
Exercice : Moyenne de 10 nombres saisis

Calculer et afficher la moyenne de 10 nombres lus au clavier.

5/64
Exercice : Moyenne de 10 nombres saisis

Calculer et afficher la moyenne de 10 nombres lus au clavier.

v a r n b l u , c p t , somme , moyenne ;
cpt = 1;
somme = 0 . 0 ;
w h i l e ( c p t <= 1 0 ) {
n b l u = p a r s e F l o a t ( prompt ( ” Nombre n ” + cpt + ” : ” ) ) ;
somme += n b l u ;
c p t ++;
}
moyenne = somme / 1 0 ;
document . w r i t e ( ” Moyenne : ” + moyenne ) ;

6/64
Syntaxe de la boucle do while

Syntaxe :
do {
// s e q u e n c e de c o d e
} while ( condition );

• La boucle do while exécute une séquence de code au moins une fois.

• La condition est évaluée après la première exécution.
• Elle est utile lorsque l’on veut s’assurer qu’un bloc de code s’exécute au moins une
fois.

7/64
l e t nombre ;
do {
nombre = prompt ( ” E n t r e z un nombre e n t r e 1 e t 10 : ” ) ;
} w h i l e ( nombre < 1 | | nombre > 1 0 ) ;
c o n s o l e . l o g ( ” Vous a v e z s a i s i un nombre v a l i d e : ” , nombre ) ;

l e t nombre = prompt ( ” E n t r e z un nombre e n t r e 1 e t 10 : ” ) ;

w h i l e ( nombre < 1 | | nombre > 1 0 ) {

nombre = prompt ( ” E n t r e z un nombre e n t r e 1 e t 10 : ” ) ;
}

c o n s o l e . l o g ( ” Vous a v e z s a i s i un nombre v a l i d e : ” , nombre ) ;

• Exécution initiale garantie : Le code s’exécute au moins une fois avant la

vérification.
• Évite l’initialisation inutile : Plus propre que while dans certains cas.
• Clarté du code : La condition est vérifiée après la première entrée utilisateur.

8/64
Exercice: Moyenne d’une série de nombres avec do while
Sujet : Calculer et afficher la moyenne de n nombres saisis au clavier (liste terminée
par un zéro).
Explication :
• La boucle do while garantit que l’utilisateur entre au moins un nombre.
• La somme et le compteur sont mis à jour à chaque itération.
• La boucle s’arrête lorsque l’utilisateur entre 0.
cpt = 0;
somme = 0 . 0 ;
do {
n b l u = p a r s e F l o a t ( prompt ( ” Nombre ( 0 p o u r f i n i r ) : ” ) ) ;
c p t ++;
somme += n b l u ;
} w h i l e ( n b l u != 0 ) ;

i f ( c p t == 1 ) {
document . w r i t e ( ” Aucun nombre s a i s i ” ) ;
} else {
moyenne = somme / ( c p t − 1 ) ;
document . w r i t e ( ” Moyenne : ” + moyenne ) ;
} 9/64
Exercice

Énoncé
1. Écrivez une boucle while qui génère un nombre aléatoire ([Link] ( ) )
jusqu’à obtenir un nombre supérieur à 0.8.

10/64
Solution

l e t nombre = 0 ;
l e t compteur = 0 ;

w h i l e ( nombre <= 0 . 8 ) {
nombre = Math . random ( ) ;
c o m p t e u r++;
c o n s o l e . l o g ( ‘ E s s a i $ { c o m p t e u r } : $ { nombre } ‘ ) ;
}
c o n s o l e . l o g ( ‘ Nombre > 0 . 8 t r o u v en $ { c o m p t e u r } e s s a i s ‘ ) ;

11/64
Boucle for - Syntaxe

• Cette boucle n’est utilisable que quand le nombre d’itérations à effectuer est
connu en début de traitement.
• La syntaxe est la suivante :

Syntaxe
f o r ( compteur = v a l e u r i n i t i a l e ; v a l e u r f i n a l e de c o m p t e u r ;
i n c r e m e n t a t i o n du c o m p t e u r )
{
s e q u e n c e de c o d e
}

12/64
Boucle for - Syntaxe

• La progression du compteur est gérée par la boucle for.

• Il n’est pas nécessaire de définir une valeur initiale pour le compteur avant la
boucle.
• La boucle prend en compte la valeur initiale, la valeur finale et
l’incrémentation/décrémentation.
• La valeur du compteur ne doit pas être modifiée dans la séquence de code.

13/64
Exercice : Moyenne d’une série de 10 nombres saisis au clavier

Sujet :
• Calculer la moyenne de 10 nombres saisis au clavier par l’intermédiaire d’une
boucle for.

14/64
Solution

Code JavaScript
/∗ D e c l a r a t i o n de v a r i a b l e s l o c a l e s ∗/
v a r n b l u , c p t , somme , moyenne ;

/∗ I n i t i a l i s a t i o n s ∗/
somme = 0 . 0 ;

/∗ B o u c l e de t r a i t e m e n t ∗/
f o r ( c p t = 1 ; c p t <= 1 0 ; c p t++) {
n b l u = p a r s e F l o a t ( prompt ( ” Nombre n ” + cpt ) ) ;
somme = somme + p a r s e F l o a t ( n b l u ) ;
}

/∗ A f f i c h a g e du r e s u l t a t ∗/
moyenne = somme / 1 0 ;
document . w r i t e ( ” Moyenne : ” + moyenne ) ;

15/64
Scope des Variables dans les Boucles

Lorsque vous utilisez une boucle, la portée de la variable dépend du mot-clé utilisé
(var ou let).
• var crée une variable à portée globale ou de fonction.
• let crée une variable à portée de bloc, limitée à l’intérieur de la boucle.

16/64
Exemple avec var

Exemple :
var i = 5;

f o r ( v a r i = 0 ; i < 1 0 ; i ++) {
// some c o d e
}

// I c i , i v a u t 10

Dans cet exemple, l’utilisation de var dans la boucle redéclare la variable i en dehors
de la boucle, ce qui fait que la valeur de i après la boucle est 10.

17/64
Explication de l’Exemple avec var

• La variable i est déclarée avant la boucle.

• La déclaration à l’intérieur de la boucle avec var redéfinit la variable i en dehors
de la boucle.
• À la fin de la boucle, i vaut 10, car var a une portée globale ou de fonction.

18/64
Exemple avec let

Exemple :
let i = 5;

f o r ( l e t i = 0 ; i < 1 0 ; i ++) {
// some c o d e
}

// I c i , i vaut 5

Cette fois-ci, la variable i déclarée avec let dans la boucle n’affecte pas la variable i
en dehors de la boucle.

19/64
Explication de l’Exemple avec let

• La variable i est déclarée avant la boucle avec let.

• La déclaration à l’intérieur de la boucle, également avec let, crée une nouvelle
variable i limitée à la portée de la boucle.
• En dehors de la boucle, la variable i garde sa valeur initiale (5).

20/64
Exercice : Boucles for

Énoncé
1. Créez une boucle for qui calcule la somme des nombres de 1 à 10.

21/64
Solution

l e t somme = 0 ;
f o r ( l e t i = 1 ; i <= 1 0 ; i ++) {
somme += i ;
}
c o n s o l e . l o g ( ” La somme d e s nombres de 1 10 e s t : ” , somme ) ;

22/64
La boucle for/in
Syntaxe :
f o r ( key i n o b j e c t ) {
// c o d e b l o c k t o be e x e c u t e d
}

Exemple :
c o n s t p e r s o n = { fname : ” John ” , lname : ” Doe ” , a g e : 2 5 } ;

l e t text = ””;
for ( l e t x in person ) {
t e x t += p e r s o n [ x ] ; // A f f i c h e : ” John Doe 25 ”
}

Explication de l’exemple :
• La boucle for/in itère sur les propriétés de l’objet person.
• À chaque itération, la clé (x) est récupérée.
• La clé est utilisée pour accéder à la valeur correspondante de cette clé.
• La valeur est récupérée par person[x].
23/64
La boucle for/in sur les tableaux

Syntaxe :
for ( variable in array ) {
// c o d e
}

La boucle for/in permet de parcourir les indices d’un tableau en JavaScript.

24/64
Exemple de for/in sur un tableau

Exemple :
c o n s t numbers = [ 4 5 , 4 , 9 , 1 6 , 2 5 ] ;

l e t txt = ””;
f o r ( l e t x i n numbers ) {
t x t += numbers [ x ] ; // A f f i c h e : ”45 4 9 16 25”
}

Cet exemple parcourt un tableau numbers et concatène les éléments dans txt.

25/64
Explication de l’exemple

Dans cet exemple :

• La boucle for/in parcourt les indices du tableau numbers.
• À chaque itération, la variable x prend la valeur de l’indice actuel.
• Ensuite, on utilise numbers[x] pour accéder à la valeur du tableau à cet indice.

26/64
Avertissement sur l’utilisation de for/in

Ne pas utiliser for/in sur un tableau si l’ordre est important.

• L’ordre des indices dans un tableau peut varier en fonction de l’implémentation.
• Cela signifie que les éléments du tableau peuvent ne pas être accessibles dans
l’ordre attendu.

27/64
Alternatives recommandées

Si l’ordre des éléments est important, il est préférable d’utiliser :

• Une boucle for classique.
• Une boucle for/of.

28/64
La Boucle for/of

La boucle for of permet d’itérer sur les valeurs d’un objet itérable (comme les
tableaux, les chaı̂nes de caractères, les cartes, etc.). Elle est particulièrement utile pour
traiter directement les éléments de l’objet.
• La syntaxe générale est la suivante :
for ( v a r i a b l e of i t e r a b l e ) {
// b l o c de c o d e a e x e c u t e r
}

• La variable reçoit la valeur de chaque propriété au fur et à mesure de l’itération.

• L’objet itérable peut être un tableau, une chaı̂ne de caractères, etc.

29/64
Exemple de Boucle sur un Tableau

Exemple avec un tableau :

c o n s t c a r s = [ ”BMW” , ” V o l v o ” , ” M i n i ” ] ;

l e t text = ””;
for ( l e t x of cars ) {
t e x t += x ; // ”BMW V o l v o M i n i ”
}

Ici, la boucle for of itère sur les éléments du tableau cars et ajoute chaque élément
à la variable text.

30/64
Dans l’exemple précédent :
• La variable x prend successivement les valeurs des éléments du tableau cars.
• La valeur de chaque élément (par exemple, "BMW", "Volvo", etc.) est ajoutée à la
variable text.
• Après la fin de l’itération, text contiendra toutes les valeurs concaténées du
tableau.

31/64
Boucle sur une Chaı̂ne de Caractères

Exemple avec une chaı̂ne de caractères :

l e t language = ” JavaScript ”;

l e t text = ””;
f o r ( l e t x of language ) {
t e x t += x ;
}

Cette boucle itère sur chaque caractère de la chaı̂ne language et ajoute chaque
caractère à text.

32/64
Résumé de la Boucle for/of

• La boucle for of permet de parcourir les valeurs d’un objet itérable.

• Elle est plus simple à utiliser pour accéder aux éléments d’un tableau ou d’une
chaı̂ne de caractères par rapport à for in.
• Elle peut être utilisée sur différents objets itérables : tableaux, chaı̂nes, Maps,
NodeLists, etc.

33/64
Exercice: Boucles spéciales

Énoncé
1. Créez un objet ”personne” avec au moins 3 propriétés et utilisez for...in pour
afficher ses propriétés et valeurs.

const personne = {
nom : ” Dupont ” ,
prenom : ” J e a n ” ,
a ge : 3 0 ,
p r o f e s s i o n : ” Developpeur ”
};

34/64
Solution

const personne = {
nom : ” Dupont ” ,
prenom : ” J e a n ” ,
a ge : 3 0 ,
p r o f e s s i o n : ” Developpeur ”
};

f o r ( l e t prop i n personne ) {
c o n s o l e . l o g ( ‘ ${ prop } : ${ personne [ prop ] } ‘ ) ;
}

35/64
Plan

Les Boucles

Les Fonctions

36/64
Introduction aux Fonctions en JavaScript

• Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche
particulière.
• Une fonction JavaScript est exécutée lorsque ”quelque chose” l’invoque
(l’appelle).
• Les fonctions sont définies par le mot-clé function.

37/64
Pourquoi Utiliser des Fonctions ?

L’utilisation des fonctions présente plusieurs avantages :

• Réutilisation du code.
• Possibilité de réutiliser le même code avec des arguments différents pour obtenir
des résultats variés.
• Modularité : séparer les différentes tâches de votre programme en fonctions
distinctes.

38/64
Syntaxe des Fonctions JavaScript

La syntaxe d’une fonction JavaScript est la suivante :

• Une fonction est définie par le mot-clé function, suivi du nom de la fonction.
• Les paramètres sont listés entre parenthèses ().
• Le code de la fonction est placé entre des crochets {}.
Exemple de structure de fonction :
f u n c t i o n nomDeFonction ( param1 , param2 ) {
// c o d e a e x e c u t e r
}

39/64
Exemple de Fonction JavaScript

Exemple d’une fonction qui calcule le produit de deux nombres p1 et p2 :

f u n c t i o n m y F u n c t i o n ( p1 , p2 ) {
r e t u r n p1 ∗ p2 ;
}

40/64
Paramètres et Arguments des Fonctions

Les paramètres sont les noms définis dans la fonction, et les arguments sont les valeurs
passées lors de l’appel de la fonction.
• Les paramètres sont définis lors de la création de la fonction.
• Les arguments sont passés à la fonction lorsqu’elle est appelée.
• Les arguments se comportent comme des variables locales à l’intérieur de la
fonction.

41/64
Invocation de Fonction

Le code à l’intérieur d’une fonction s’exécute lorsqu’elle est invoquée :

• Lorsqu’un événement survient (ex. clic de bouton).
• Lorsqu’elle est appelée directement dans le code JavaScript.
• Elle peut également être auto-invoquée, c’est-à-dire exécutée sans être
explicitement appelée.

42/64
Exemple d’Invocation de Fonction

Exemple d’appel de fonction et retour de valeur :

l e t x = myFunction (4 , 3 ) ;

f u n c t i o n myFunction ( a , b ) {
// La f o n c t i o n r e t o u r n e l e p r o d u i t de a e t b
return a ∗ b ;
}

Dans cet exemple, la valeur retournée par la fonction est assignée à la variable x.

43/64
Les Fonctions Utilisées Comme Valeurs de Variables

Les fonctions peuvent être utilisées de la même manière que les variables, dans des
formules, des affectations et des calculs.
Exemple :
let x = toCelsius (77);
l e t t e x t = ” La t e m p e r a t u r e e s t ” + x + ” C e l s i u s ” ;

Ou bien, la fonction peut être utilisée directement :

let t e x t = ” La t e m p e r a t u r e e s t ” + t o C e l s i u s ( 7 7 ) + ” C e l s i u s ” ;

44/64
Variables Locales

Les variables déclarées dans une fonction JavaScript deviennent locales à cette
fonction. Elles ne peuvent être accédées qu’à l’intérieur de la fonction dans laquelle
elles sont déclarées.

45/64
Exemple de Variables Locales

// c o d e h e r e can NOT u s e carName

f u n c t i o n myFunction ( ) {
l e t carName = ” V o l v o ” ;
// c o d e h e r e CAN u s e carName
}

// c o d e h e r e can NOT u s e carName

Dans cet exemple :

• La variable carName est locale à la fonction myFunction.
• Elle ne peut être utilisée que dans le corps de cette fonction.
• En dehors de la fonction, elle n’est pas accessible.

46/64
Caractéristiques des Variables Locales

• Les variables locales sont créées au début de l’exécution d’une fonction.

• Elles sont supprimées une fois que la fonction a terminé son exécution.
• Les mêmes noms de variables peuvent être utilisés dans différentes fonctions sans
conflit.

47/64
Exercice: Fonctions basiques

Énoncé
1. Créez une fonction qui calcule le carré d’un nombre.

48/64
Solution

f u n c t i o n c a l c u l e r C a r r e ( nombre ) {
r e t u r n nombre ∗ nombre ;
}

c o n s o l e . l o g ( ” Le c a r r e de 5 e s t : ” , c a l c u l e r C a r r e ( 5 ) ) ;

49/64
Fonctions Auto-invoquées (Self-Invoking)

Les expressions de fonctions peuvent être rendues auto-invoquées. Cela signifie qu’elles
sont appelées automatiquement.
• Une expression de fonction s’exécute automatiquement si elle est suivie de ().
• Vous devez entourer la fonction avec des parenthèses pour indiquer qu’il s’agit
d’une expression de fonction.

50/64
Exemple de Fonction Auto-invoquée

( function () {
l e t x = ” Hello ! ! ” ; // J e m’ i n v o q u e moi−meme
})();

La fonction ci-dessus est en fait une fonction anonyme auto-invoquée (fonction sans
nom).

51/64
Exemple de Fonction Auto-invoquée

( f u n c t i o n ( nom ) {
l e t x = ” Hello ! ! ” ; // J e m’ i n v o q u e moi−meme
} ) ( ” Karim ” ) ;

La fonction ci-dessus est en fait une fonction anonyme auto-invoquée (fonction sans
nom).

52/64
Fonction auto-invoquée

Énoncé : Modifier la fonction compterJusqua en une fonction auto-invoquée.

f u n c t i o n compterJusqua ( n ) {
f o r ( l e t i = 1 ; i <= n ; i ++) {
console . log ( i );
}
}

// A p p e l de l a f o n c t i o n
compterJusqua ( 5 ) ;

53/64
Solution

( function (n) {
f o r ( l e t i = 1 ; i <= n ; i ++) {
console . log ( i );
}
})(5);

54/64
Les Fonctions sont des Objets

En JavaScript, les fonctions sont considérées comme des objets.

• L’opérateur typeof retourne "function" pour les fonctions.
• Les fonctions ont des propriétés et des méthodes.
• Par exemple, [Link] retourne le nombre d’arguments reçus par la
fonction.

55/64
Propriétés et Méthodes des Fonctions - Exemple

f u n c t i o n myFunction ( a , b ) {
r e t u r n arguments . l e n g t h ;
}

l e t argsCount = myFunction (4 , 3 ) ; // a r g s C o u n t e s t e g a l a 2

56/64
Fonctions Fléchées (Arrow Functions)

Les fonctions fléchées offrent une syntaxe plus concise pour définir des expressions de
fonction.
• Elles n’ont pas le mot-clé function,
• Si la ofnction a une seule ligne, on peut aussi enlever le mot-clé return et les
crochets .
Syntaxe de base :
c o n s t m a F o n c t i o n = ( param1 , param2 ) => {
r e t u r n param1 + param2 ;
};

57/64
Exemple de Fonction Fléchée

// F o n c t i o n t r a d i t i o n n e l l e
var x = function (x , y ) {
return x ∗ y ;
}

// F o n c t i o n f l e c h e e
c o n s t x = ( x , y ) => x ∗ y ;

Vous pouvez omettre le mot-clé return et les crochets seulement pour des fonctions
simples à une seule instruction.
Il est recommandé de garder return et les crochets.
c o n s t x = ( x , y ) => { r e t u r n x ∗ y } ;

58/64
Fonction avec un seul paramètre

c o n s t c a r r e = x => x ∗ x ;
console . log ( carre (5)); // A f f i c h e 25

Si la fonction a un seul paramètre, les parenthèses autour du paramètre sont

facultatives.

59/64
Fonction sans paramètre

c o n s t d i r e B o n j o u r = ( ) => c o n s o l e . l o g ( ” B o n j o u r ” ) ;
direBonjour (); // A f f i c h e ” B o n j o u r ”

Si la fonction n’a aucun paramètre, on utilise simplement des parenthèses vides ().

60/64
Fonction avec plusieurs paramètres

c o n s t a d d i t i o n = ( a , b ) => a + b ;
console . log ( addition (3 , 4 ) ) ; // A f f i c h e 7

61/64
Fonction avec plusieurs lignes

c o n s t s o u s t r a c t i o n = ( a , b ) => {
let result = a − b;
return result ;
};
console . log ( s o u s t r a c t i o n (10 , 3 ) ) ; // A f f i c h e 7

Lorsque le corps de la fonction contient plusieurs lignes, il faut utiliser des accolades {}
et explicitement un return pour renvoyer une valeur.

62/64
Exercice: Fonctions fléchées

Énoncé
1. Transformez la fonction calculerCarre

f u n c t i o n c a l c u l e r C a r r e ( nombre ) {
r e t u r n nombre ∗ nombre ;
}

c o n s o l e . l o g ( ” Le c a r r e de 5 e s t : ” , c a l c u l e r C a r r e ( 5 ) ) ;

63/64
Solution

c o n s t c a l c u l e r C a r r e = ( nombre ) => nombre ∗ nombre ;

c o n s o l e . l o g ( ” Le c a r r e de 6 e s t : ” , c a l c u l e r C a r r e ( 6 ) ) ;

64/64