Faculté des Sciences El Jadida

Programmation Web 2
JavaScript

Prof. Mohamed NABIL

Département Informatique
Année Universitaire 2024/2025

Prof. NABIL Mohamed 1

 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Comprendre les écouteurs d'événements

Les écouteurs d'événements fonctionnent comme des gestionnaires d'événements,

à la différence que vous pouvez affecter autant d'écouteurs d'événements à un
événement particulier (click) sur un élément particulier (button).

Pour comprendre le fonctionnement des écouteurs d'événements, nous prenons

l’exemple suivant.

Prof. NABIL Mohamed 151

 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Comprendre les écouteurs d'événements

<button id="myBtn">Click Me</button> On ne peut affecter qu'un

<script> seul gestionnaire
// Defining custom functions d'événement à un
function firstFunction() {
alert("The first function executed successfully!"); événement particulier sur
} un élément particulier.
function secondFunction() { Le W3C a introduit un
alert("The second function executed successfully");
modèle d'événement plus
}
// Selecting button element flexible (écouteurs
let btn = [Link]("myBtn"); d'événements).
// Assigning event handlers to the button Tout élément HTML peut
[Link] = firstFunction;
[Link] = secondFunction; // This one overwrite the first avoir plusieurs écouteurs
</script> d'événements.
Prof. NABIL Mohamed 152
 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Comprendre les écouteurs d'événements

La syntaxe des écouteurs d'événements est comme suit:

[Link](event, function, useCapture);

Les paramètres:
event: type d'événement.
function: fonction d'écoute.
useCapture: booléen supplémentaire (facultatif spécifie s'il faut utiliser le bullage
ou la capture d'événements : bubbling or capturing events).

Prof. NABIL Mohamed 153

 JavaScript

4. Événements JavaScript
e. Les écouteurs d'événements (Event Listeners)
Comprendre les écouteurs d'événements

<button id="myBtn">Click Me</button>

<script>
// Defining custom functions
function firstFunction() {
alert("The first function executed successfully!");
}
function secondFunction() {
alert("The second function executed successfully");
}
// Selecting button element
let btn = [Link]("myBtn");
// Assigning event listeners to the button
[Link]("click", firstFunction); // instead of [Link] = firstFunction;
[Link]("click", secondFunction); // instead of [Link] = secondFunction;
</script> Prof. NABIL Mohamed 154
 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Ajout d'écouteurs d'événements aux événements

Comme pour un gestionnaire d'événements, vous pouvez affecter différents
écouteurs d'événements à différents types d'événements sur un même élément.

Par exemple:

Affecter différentes fonctions d'écouteurs d'événements aux événements

« click », « mouseover » et « mouseout » sur un élément button.

Prof. NABIL Mohamed 155

 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Ajout d'écouteurs d'événements aux événements

<button id="myBtn">Click Me</button>

// Assigning event listeners to the button
<script>
[Link]("click", sayHello);
// Selecting button element
let btn = [Link]("myBtn"); [Link]("mouseover", setHoverColor);
// Defining custom functions [Link]("mouseout", setNormalColor);
function sayHello() { </script>
alert("Hi, how are you doing?");
}
function setHoverColor() {
[Link] = "yellow";
}
function setNormalColor() {
[Link] = "";
}
Prof. NABIL Mohamed 156
 JavaScript

4. Événements JavaScript
f. Les écouteurs d'événements (Event Listeners)

Suppression d'écouteurs d'événements

Vous pouvez utiliser la méthode removeEventListener() pour supprimer un
écouteur d'événements précédemment associé à la méthode addEventListener().

<button id="myBtn">Click Me</button>

<script>
// Selecting button element
let btn = [Link]("myBtn");
// Defining custom functions
function sayHello() {
alert("Hi, how are you doing?");
}
// Assigning event listener to the button
[Link]("click", sayHello);
// Removing event listener
btn. removeEventListener("click", sayHello);
</script> Prof. NABIL Mohamed 157
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
Supposons que vous ayez assigné un gestionnaire d'événements de clic à un lien
hypertexte imbriqué dans un paragraphe.
<p>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
</p>
Si vous cliquez sur ce lien, le gestionnaire sera exécuté.
Si on l’assigne au paragraphe qui contient ce lien.
<p onclick="alert('You have clicked a link!');">
<a href="#" >Click Me</a>
</p>
Un clic sur le lien déclenchera le gestionnaire d'événements de clic de l’élément p.
Les événements n'affectent pas seulement l'élément cible (a) qui les a généré, mais ils
parcourent l'arborescence DOM pour atteindre leur cible(p).
C'est ce qu'on appelle la propagation
Prof. d'événements.
NABIL Mohamed 158
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Le concept de propagation d'événements a été introduit pour gérer les situations
où plusieurs éléments de la hiérarchie DOM ayant une relation parent-enfant
possèdent des gestionnaires d'événements pour le même événement (un clic de
la souris par exemple).
La question est désormais de savoir quel événement de clic de l'élément sera
traité en premier lorsque l'utilisateur cliquera sur l'élément interne.

<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P </p>
</div>
</form> Prof. NABIL Mohamed 159
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

La propagation des événements se déroule en deux phases : la capture et le
bouillonnement (capturing and bubbling).

Prof. NABIL Mohamed 160

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

bubbling
Lorsqu'un événement se produit sur un élément, il exécute d'abord les
gestionnaires sur celui-ci, puis sur son parent, puis sur les autres ancêtres.

<form onclick="alert('form')">FORM Un clic sur le contenu de <p> exécute

<div onclick="alert('div')">DIV d'abord onclick sur ce <p> puis sur le
<p onclick="alert('p')">P </p> <div>, puis sur le <form> et ainsi de
</div> suite jusqu'à l'objet document.
</form>
Ainsi, si nous cliquons sur <p>, nous verrons trois alertes : p → div → form.
Ce processus est appelé bubbling, car les événements bubble de l'élément interne
vers les parents, sont comme une Prof.
bulle dans
NABIL l'eau.
Mohamed a focus event does not bubble
161
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

[Link] et this
L'élément le plus profondément imbriqué à l'origine de l'événement est appelé
élément cible (target element), accessible via [Link].
[Link] est l'élément cible qui a déclenché l'événement ; il ne se change pas
pendant le processus de remontée.
This (=[Link]) est l'élément actuel, celui sur lequel un gestionnaire
est en cours d'exécution.
<form onclick="alert('form')">FORM
<div >DIV
<p >P </p>
</div>
</form>
Prof. NABIL Mohamed 162
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

[Link] et this
Dans cet exemple, nous avons un seul <form onclick="alert('form')">FORM
gestionnaire [Link], il peut intercepter <div >DIV
<p >P </p>
tous les clics dans le formulaire. Quel que soit
</div>
l'emplacement du clic, il remonte jusqu'à </form>
<form> et exécute le gestionnaire.
Dans le gestionnaire [Link] :
this (=[Link]) est l'élément
<form>, car le gestionnaire est exécuté sur lui.
[Link] est l'élément dans le formulaire
sur lequel le clic a été effectué. Prof. NABIL Mohamed 163
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
[Link] et this
<!DOCTYPE html> div, p, a{
<html> padding: 15px 30px;
<head> display: block;
<meta charset="utf-8"> border: 2px solid #000;
<link rel="stylesheet" href="[Link]"> background: #fff;
</head> }
<body>
A click shows both [Link] and this to compare: let div = [Link]("wrap");
<div id="wrap">DIV [Link] = function(event) {
<p class= "hint">P [Link] = "lightblue";
<a href= "#">A </a> setTimeout(() => {
</p> alert("target = " + [Link] + ",
</div> this = " + [Link]);
<script src="[Link]"></script> [Link] = ''
</body> }, 0);
Prof. NABIL
} Mohamed 164
</html>
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Arrêter le bubbling
Un événement de bubbling part de l'élément cible directement vers le haut.
Normalement, il remonte jusqu'à <html>, puis vers l'objet document.
Certains événements atteignent même la fenêtre, appelant tous les gestionnaires
sur le chemin.
Pour éviter cette situation, vous pouvez empêcher la remontée des événements
dans l'arborescence DOM à l'aide de la méthode [Link]().

Prof. NABIL Mohamed 165

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
Arrêter le bubbling: [Link]()
<!DOCTYPE html> div, p, a{
<html> padding: 15px 30px;
<head> display: block;
<meta charset="utf-8"> border: 2px solid #000;
<link rel="stylesheet" href="[Link]"> background: #fff;
</head> }
<body>
<div id="wrap">DIV function showAlert(event) {
<p class= "hint">P alert("You clicked: "+ [Link]);
<a href= "#">A </a> [Link]();
</p> }
</div>
<script src="[Link]"></script> let elems = [Link]("div, p, a");
</body> for(let elem of elems) {
</html> [Link]("click", showAlert);
Prof. NABIL
} Mohamed 166
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Arrêter le bubbling
Si un élément possède plusieurs gestionnaires d'événements sur un même
événement, même si l'un d'eux arrête le bubbling, les autres continuent de
s'exécuter (c-à-d [Link]() arrête le mouvement ascendant, mais
tous les autres gestionnaires s'exécutent sur l'élément actuel).
Pour arrêter le bubbling et empêcher l'exécution de tout autre écouteur attaché au
même élément pour le même type d'événement, on utilise la méthode
stopImmediatePropagation().

Prof. NABIL Mohamed 167

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
Arrêter le bubbling: stopImmediatePropagation()
<!DOCTYPE html> div, p, a{
<html> padding: 15px 30px;
<head> display: block;
<meta charset="utf-8"> border: 2px solid #000;
<link rel="stylesheet" href="[Link]"> background: #fff;
</head> }
<body> function sayHi() {
<div onclick="alert('You clicked: ' + [Link])">DIV alert("Hi, there!");
<p onclick="alert('You clicked: ' + [Link])">P [Link]();
<a href= "#" id=“link">A </a> }
</p> function sayHello() {
</div> alert("Hello World!");
<script src="[Link]"></script> }
</body> let link = [Link]("link");
</html> [Link]("click", sayHi);
Prof. NABIL Mohamed
[Link]("click", sayHello); 168
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Empêcher l'action par défaut: preventDefault()
Certains événements sont associés à une action par défaut (cliquer sur le bouton
d'envoi d'un formulaire).
Vous pouvez empêcher ces actions par défaut avec la méthode preventDefault() de
l'objet événement.
Cependant, empêcher les actions par défaut n'arrête pas la propagation de
l'événement; celui-ci continue de se propager dans l'arborescence DOM comme
d'habitude.

Prof. NABIL Mohamed 169

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
Empêcher l'action par défaut: preventDefault()
<body>
<form action="/examples/html/[Link]" method="post" id="users">
<label>First Name:</label>
<input type="text" name="first-name" id="firstName">
<input type="submit" value="Submit" id="submitBtn">
</form>
<script>
let btn = [Link]("submitBtn");
[Link]("click", function(event) {
let name = [Link]("firstName").value;
alert("Sorry, " + name + ". The preventDefault() won't let you submit this form!");
[Link](); // Prevent form submission
});
</script>
</body> Prof. NABIL Mohamed 170
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Capturing
L'événement passe d'abord par la chaîne des ancêtres jusqu'à l'élément cible.
D’une autre façon, Les événements se propagent de Window à travers
l'arborescence DOM jusqu'au nœud cible.

Par exemple, si l'utilisateur clique sur un lien hypertexte, cet événement de clic
passera par l'élément <html>, l'élément <body> et l'élément <p> contenant le lien.

Si un ancêtre (c'est-à-dire un parent, un grand-parent, etc.) de l'élément cible et

que la cible elle-même possède un écouteur d'événement de capture spécialement
enregistré pour ce type d'événement, ces écouteurs sont exécutés pendant cette
phase.
Prof. NABIL Mohamed 171
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Capturing
La phase de capture était invisible pour nous, car les gestionnaires ajoutés en
utilisant on<event>-property ou en utilisant des attributs HTML ou en utilisant
addEventListener(event, handler) à deux arguments ne savent rien de la capture,
ils ne s'exécutent que sur la cible et bubbling phase.
Pour capturer un événement lors de la phase capturing, nous devons définir
l'option capture du gestionnaire sur true.

Prof. NABIL Mohamed 172

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Capturing

[Link](..., {capture: true})

// or, just "true" is an alias to {capture: true}
[Link](..., true)
Il existe deux valeurs possibles pour l'option capture :
Si la valeur est false (par défaut), le gestionnaire est défini sur la phase bubbling.
Si la valeur est true, le gestionnaire est défini sur la phase capturing.

Prof. NABIL Mohamed 173

 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)
Comprendre la propagation des événements
Capturing
<!DOCTYPE html> div, p, a{
<html> padding: 15px 30px;
<head> display: block;
<meta charset="utf-8"> border: 2px solid #000;
<link rel="stylesheet" href="[Link]"> background: #fff;
</head> }
<body>
<div id="wrap">DIV function showTagName() {
<p class= "hint">P alert(« capturing: "+ [Link]);
<a href= "#">A </a> }
</p>
let elems = [Link]("div, p, a");
</div>
for(let elem of elems) {
<script src="[Link]"></script> [Link]("click", showTagName, true);
</body>
}
</html> Prof. NABIL Mohamed 174
 JavaScript

4. Événements JavaScript
f. Propagation des événements JavaScript (Event Propagation)

Comprendre la propagation des événements

Capturing

La capture d'événements ne fonctionne qu'avec les écouteurs d'événements

enregistrés avec la méthode addEventListener() lorsque le troisième argument
est défini sur true.
Les méthodes traditionnelles d'attribution de gestionnaires d'événements,
comme onclick, onmouseover, etc., ne fonctionneront pas avec capturing.

Prof. NABIL Mohamed 175

 JavaScript

5. Méthodes d'emprunt JavaScript (JavaScript Borrowing Methods)

a. Emprunter des méthodes à des objets

En JavaScript, nous pouvons let objA = {

name: "object A",
emprunter des méthodes à d'autres say: function(greet) {
alert(greet + ", " + [Link]);
objets pour créer des fonctionnalités
}
sans hériter de toutes leurs }
propriétés et méthodes. [Link]("Hi"); // Displays: Hi, object A
JavaScript fournit deux méthodes
let objB = {
pour tous les fonction d’objets : name: "object B"
call() et apply(), qui permettent }

d'invoquer une fonction comme s'il /* The objB doesn't have say() method, but it can
s'agissait d'une méthode d'un autre borrow it from objA */
[Link](objB, "Hello"); // Displays: Hello, object B
objet.
Prof. NABIL Mohamed 176
 JavaScript

5. Méthodes d'emprunt JavaScript (JavaScript Borrowing Methods)

b. Différence entre les méthodes call() et apply()

let objA = {
La syntaxe de la méthode apply() est
name: "object A",
quasiment identique à celle de say: function(greet) {
alert(greet + ", " + [Link]);
call(). }
La seule différence réside dans le }

fait que la méthode call() utilise une [Link]("Hi"); // Displays: Hi, object A
liste d'arguments comme
let objB = {
call(thisObj, arg1, arg2, ...). name: "object B"
}
Tandis que la méthode apply()
utilise un tableau d'arguments /* The objB doesn't have say() method, but it can borrow
it from objA */
comme apply(thisObj, [argsArray]). [Link](objB, ["Hello"]); // Displays: Hello, object
B
Prof. NABIL Mohamed 177
 JavaScript

5. Méthodes d'emprunt JavaScript (JavaScript Borrowing Methods)

c. Utilisation de méthodes intégrées

La méthode apply() vous permet

let numbers = [3, -7, 10, 8, 15, 2];
également d'utiliser des méthodes
// Defining function to find maximum value
intégrées pour effectuer certaines
Let max= [Link](null, numbers);
tâches rapidement et facilement.
Alert(max); //outputs: 15
Remarque: Le nouvel opérateur de
propagation en ES6 s’appelle spread let numbers = [3, -7, 10, 8, 15, 2];

(…) offre un moyen plus rapide // Defining function to find maximum value

d'obtenir la valeur maximale ou Let max= [Link](…numbers);

minimale d'un tableau sans utiliser Alert(max); //outputs: 15

la méthode apply().

Prof. NABIL Mohamed 178

 JavaScript

5. Méthodes d'emprunt JavaScript (JavaScript Borrowing Methods)

c. Utilisation de méthodes intégrées

Cependant, spread (...) et apply()

échoueront ou renverront un
résultat incorrect si le tableau let numbers = [3, -7, 10, 8, 15, 2];

contient trop d'éléments (des // Using reduce method

dizaines de milliers). let max = [Link](function(a, b) {

Dans ce cas, vous pouvez utiliser return [Link](a, b);

[Link]() pour trouver la });

valeur maximale ou minimale d'un Alert(max); //outputs: 15
tableau numérique, en comparant
chaque valeur.

Prof. NABIL Mohamed 179

 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

a. Blocs de code (Code blocks)

ES6 introduit le nouveau mot-clé let pour déclarer des variables.

Avant ES6, la seule façon de déclarer une variable en JavaScript était le mot-clé var.
Les variables déclarées avec le mot-clé var ont une portée global, tandis que les
variables déclarées avec le mot-clé let ont une portée bloc ({}) et ne sont pas
globale.
La portée d'un bloc signifie simplement qu'une nouvelle portée est créée entre
deux accolades ({}). Par conséquent, Si une variable (let) est déclarée à l’intérieur
d’un bloc de code {...}, elle n’est visible qu’à l’intérieur de ce bloc.

Prof. NABIL Mohamed 180

 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

a. Blocs de code (Code blocks)

{ {
let message = "Hello"; // only visible in this block var message = "Hello"; // only visible in this block
alert(message); // Hello alert(message); // Hello
} }
alert(message); // Error: message is not defined alert(message); // Hello

{
// show message // show message // show message
let message = "Hello"; let message = "Hello"; var message = "Hello";
alert(message); alert(message); alert(message);
} // show another message // show another message
let message = "Goodbye"; var message = "Goodbye";
{ // Error: variable already declared // Goodbye
// show another message alert(message); alert(message);
let message = "Goodbye";
alert(message);
}
Prof. NABIL Mohamed 181
 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

a. Blocs de code (Code blocks)

Pour if, for, while et ainsi de suite, les variables de type let déclarées dans {...} ne
sont également visibles qu'à l'intérieur :

if (true) { for (let i = 0; i < 3; i++) {

let phrase = "Hello!"; // the variable i is only visible inside this for
alert(phrase); // Hello! alert(i); // 0, then 1, then 2
} }
alert(phrase); // Error, no such variable! alert(i); // Error, no such variable

Prof. NABIL Mohamed 182

 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

b. Comprendre les fermetures JavaScript

function makeCounter() {
La variable counter ne peut pas être
// Local variable
manipulée de l'extérieur, car elle est locale à
let counter = 0;
la fonction makeCounter().
// Manipulating the 'counter' variable
Alors, sa valeur n'augmentera pas après un
return counter += 1;
appel de fonction ultérieur, car chaque appel
}
de la fonction réinitialise sa valeur.
// Calling the function
La fermeture JavaScript peut résoudre ce
[Link](makeCounter()); // Prints: 1
problème.
[Link](makeCounter()); // Prints: 1

Prof. NABIL Mohamed 183

 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

b. Comprendre les fermetures JavaScript

Une fermeture (closure) est une fonction interne qui a accès à la portée de la fonction
parente, même après la fin de l’exécution de cette fonction parente.
Cela se fait en créant une fonction à l'intérieur d'une autre fonction.
function makeCounter() {
let counter = 0;
La fonction interne make() est renvoyée par la
// Nested function
function make() { fonction externe makeCounter().
counter += 1; La valeur de myCounter est donc la fonction
return counter;
}
interne make(), et l'appel de myCounter
return make; appelle effectivement make().
}
let myCounter = makeCounter();
[Link](myCounter()); // Prints: 1
[Link](myCounter()); // Prints: 2 Prof. NABIL Mohamed 184
 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

b. Comprendre les fermetures JavaScript

function makeCounter() { La fonction interne make() peut toujours accéder à

la valeur de la variable counter définie dans la
let counter = 0;
fonction externe, même si l'exécution de la fonction
// Nested function
makeCounter() est déjà terminée.
function make() {
Cela se produit car les fonctions JavaScript forment
counter += 1;
des fermetures.
return counter;
Les fermetures stockent en interne les références à
} leurs variables externes et peuvent accéder à leurs
return make; valeurs et les mettre à jour.
} Lorsque la fonction externe ayant terminé son
let myCounter = makeCounter(); exécution, aucune autre partie du code ne peut
[Link](myCounter()); // Prints: 1 accéder à la variable counter ni la manipuler.
[Link](myCounter()); // Prints: Prof. Seule
2 NABIL la fonction interne y a un accès exclusif.
Mohamed 185
 JavaScript

6. Portée variable, fermeture (Variable scope, closure)

b. Comprendre les fermetures JavaScript

function makeCounter() { // Anonymous function expression

let counter = 0; let myCounter = (function() {
// Nested function let counter = 0;
function make() {
// Nested anonymous function
counter += 1;
return function() {
return counter;
counter += 1;
}
return counter;
return make;
}
}
let myCounter = makeCounter(); })();
[Link](myCounter()); // Prints: 1 [Link](myCounter()); // Prints: 1
[Link](myCounter()); // Prints: 2 [Link](myCounter()); // Prints: 2
Prof. NABIL Mohamed 186
 JavaScript

7. JavaScript Object Notation (JSON)

a. Qu'est-ce que JSON

JSON est un format d'échange de données extrêmement léger, facile et rapide à analyser
et à générer, permettant l'échange de données entre le serveur et le client.
Comme XML, JSON est un format textuel facile à écrire et à comprendre (pour les
développeurs et ordinateurs).
Contrairement à XML, les structures de données JSON utilisent moins de bande passante
que leurs versions XML.
JSON repose sur deux structures de base qui sont Objet et tableau.
En JSON, les noms de propriétés ou clés sont toujours des chaînes, tandis que la valeur
peut être une chaîne, un nombre, true ou false, null, ou meme un objet ou un tableau.
Les chaînes doivent être entourées de guillemets doubles "" et peuvent contenir des
caractères d'échappement tels que \n, \t et \.
Prof. NABIL Mohamed 187
 JavaScript

7. JavaScript Object Notation (JSON)

a. Qu'est-ce que JSON

A JSON object A JSON array

{ {
"book": { "fruits": [
"name": "Harry Potter and the Goblet of Fire", "Apple",
"author": "J. K. Rowling", "Banana",
"year": 2000, "Strawberry",
"genre": "Fantasy Fiction", "Mango"
"bestseller": true ]
} }
}

Prof. NABIL Mohamed 188

 JavaScript

7. JavaScript Object Notation (JSON)

b. Analyse des données JSON en JavaScript

En JavaScript, la méthode [Link]()

// Store JSON data in a JS variable
permet facilement analyser les
let json = '{"name": "Peter", "age": 22, "country": "United States"}';
données JSON reçues du serveur web.

// Converting JSON-encoded string to JS object

Cette méthode analyse une chaîne
let obj = [Link](json);
JSON et construit la valeur ou l'objet
JavaScript décrit par la chaîne. // Accessing individual value from JS object

Supposons que nous ayons reçu la alert([Link]); // Outputs: Peter

chaîne codée JSON suivante d'un alert([Link]); // Outputs: 22

serveur Web : alert([Link]); // Outputs: United States

{"name": "Peter", "age": 22, "country":

"United States"}
Prof. NABIL Mohamed 189
 JavaScript

7. JavaScript Object Notation (JSON)

b. Analyse des données JSON en JavaScript (Modèles littéraux)

Les modèles littéraux sont créés à l'aide d'un accent grave (` `) au lieu des guillemets
doubles (" ") ou simples (' ') habituels.
Les modèles littéraux offrent un moyen simple et clair de créer des chaînes
multilignes et d'effectuer des interpolations de chaînes.

Il est désormais possible d'intégrer des variables ou des expressions dans une chaîne
à n'importe quel endroit, sans difficulté.

Les variables ou expressions peuvent être placées à l'intérieur de la chaîne grâce à la

syntaxe ${...}.

Prof. NABIL Mohamed 190

 JavaScript

7. JavaScript Object Notation (JSON)

b. Analyse des données JSON en JavaScript (Modèles littéraux)

// Simple multi-line string // Multi-line string

let str = `The quick brown fox let str = ‘The quick brown fox\n\t’
jumps over the lazy dog.`; + ‘jumps over the lazy dog.’;
// String with embedded variables and expression // // Creating string using variables and expression
let a = 10; let a = 10;
let b = 20; let b = 20;
let result = `The sum of ${a} and ${b} is ${a+b}.`; let result = ‘The sum of ’+a+‘ and ‘+b+’ is ‘+(a+b)+’.’;
[Link](result); // The sum of 10 and 20 is 30. [Link](result); // The sum of 10 and 20 is 30.

Prof. NABIL Mohamed 191

 JavaScript

7. JavaScript Object Notation (JSON)

c. Analyse de données JSON imbriquées en JavaScript

Les objets et tableaux JSON peuvent également être imbriqués.

Un objet JSON peut contenir arbitrairement d'autres objets JSON, des tableaux, des
tableaux imbriqués, des tableaux d'objets JSON, etc.
/* Storing multi-line JSON string in a JS variable using the new ES6 template literals */
let json = `{
"book": {
"name": "Harry Potter and the Goblet of Fire",
"author": "J. K. Rowling",
"year": 2000,
"characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
"genre": "Fantasy Fiction",
"price": {
"paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
}
}
}`; Prof. NABIL Mohamed 192
 JavaScript

7. JavaScript Object Notation (JSON)

c. Analyse de données JSON imbriquées en JavaScript

// Converting JSON object to JS object // Printing all the values from the resulting object
let obj = [Link](json); printValues(obj);
// Define recursive function to print nested values [Link]("<hr>");
function printValues(obj) { // Printing a single value
for(let k in obj) { [Link](obj["book"]["author"] + "<br>");
if(obj[k] instanceof Object) { // Prints: J. K. Rowling
printValues(obj[k]); [Link](obj["book"]["characters"][0] +
} else { "<br>"); // Prints: Harry Potter
[Link](obj[k] + "<br>"); [Link](obj["book"]["price"]["hardcover
}; "]); // Prints: $20.32
}
}; Prof. NABIL Mohamed 193
 JavaScript

7. JavaScript Object Notation (JSON)

d. Encodage de données au format JSON en JavaScript

Lors de l’interaction avec une page web, nous pouvons envoyer au serveur un objet ou
une valeur JavaScript.
JavaScript propose à cet effet la méthode [Link]() qui convertit une valeur
JavaScript en chaîne JSON.

// Sample JS object // Sample JS array

let obj = {"name": "Peter", "age": 22, let arr = ["Apple", "Banana", "Mango",
"country": "United States"}; "Orange", "Papaya"];
// Converting JS object to JSON string // Converting JS array to JSON string
let json = [Link](obj); let json = [Link](arr);
alert(json); alert(json);

La chaîne JSON résultante est appelée « objet JSON codé, sérialisé ou stringifié».
Pour plus d’information: [Link]
Prof. NABIL Mohamed 194
 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

a. Rest (indroduit en ES6)

Le paramètre Rest (repos) permet de passer un nombre arbitraire de paramètres à une

fonction sous forme de tableau.
Rest est particulièrement utile lorsque vous souhaitez passer des paramètres à une
fonction sans connaître le nombre nécessaire.
Le paramètre Rest est spécifié en préfixant un paramètre nommé par l'opérateur de
repos (...array).
Le paramètre repos ne peut être que le dernier de la liste des paramètres, et il ne peut y
avoir qu'un seul paramètre repos.

function sortNames(...names) { // les paramètres de la fonction deviennent un tableau

return [Link]();
}
alert(sortNames("Sarah", "Harry", "Peter")); // Harry,Peter,Sarah
alert(sortNames("Tony", "Ben", "Rick",
Prof. "Jos")); // John,Jos,Rick,Tony
NABIL Mohamed 195
 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

a. Rest (indroduit en ES6)

Lorsque le paramètre Rest est le seul paramètre d'une fonction, il obtient tous les
arguments passés à la fonction,

function sortNames(...names) { // les paramètres de la fonction deviennent un tableau

return [Link]();
}
alert(sortNames("Sarah", "Harry", "Peter")); // Harry,Peter,Sarah
alert(sortNames("Tony", "Ben", "Rick", "Jos")); // John,Jos,Rick,Tony

Sinon il obtient le reste des arguments qui dépasse le nombre de paramètres nommés.

function myFunction(a, b, ...args) {

return args;
}
alert(myFunction(1, 2, 3, 4, 5)); // 3,4,5
alert(myFunction(-7, 5,Prof.
0, -2, 4.5,
NABIL 1, 3)); // 0,-2,4.5,1,3
Mohamed 196
 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

b. L'opérateur Spread (indroduit en ES6)

L'opérateur de propagation (Spread) (...) exécute la fonction exactement inverse de

l'opérateur Rest.
Il répartit (divise) un tableau et transmet les valeurs à la fonction spécifiée.

function addNumbers(a, b, c) {
return a + b + c;
}
let numbers = [5, 12, 8];
// ES5 way of passing array as an argument of a function
alert([Link](null, numbers)); // 25
// ES6 spread operator
alert(addNumbers(...numbers)); // 25
Prof. NABIL Mohamed 197
 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

b. L'opérateur Spread (indroduit en ES6)

L'opérateur de propagation peut également être utilisé pour insérer les éléments d'un
tableau dans un autre tableau sans utiliser les méthodes de tableau telles que push(),
unshift() concat(), etc.

let pets = ["Cat", "Dog", "Parrot"];

let bugs = ["Ant", "Bee"];
// Creating an array by inserting elements from other arrays
let animals = [...pets, "Tiger", "Wolf", "Zebra", ...bugs];
alert(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

Prof. NABIL Mohamed 198

 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

c. Affectation de déstructuration

L'affectation de déstructuration est une expression qui simplifie l'extraction de valeurs

de tableaux, ou de propriétés d'objets, dans des variables distinctes grâce à une syntaxe
plus concise.
Il existe deux types d'expressions d'affectation de déstructuration : l'affectation de
tableau et l'affectation d'objet.
L'affectation de déstructuration de tableau:

// ES5 syntax // ES6 syntax

var fruits = ["Apple", "Banana"]; let fruits = ["Apple", "Banana"];
var a = fruits[0]; // Array destructuring assignment
var b = fruits[1]; let [a, b] = fruits;
alert(a); // Apple alert(a); // Apple
alert(b); // Banana alert(b); // Banana
Prof. NABIL Mohamed 199
 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

c. Affectation de déstructuration

Nous pouvons également utiliser l'opérateur Rest dans l'affectation de

déstructuration du tableau.

// ES6 syntax
let fruits = ["Apple", "Banana", "Mango"];
let [a, ...r] = fruits;
alert(a); // Apple
alert(r); // Banana,Mango
alert([Link](r)); // true

Prof. NABIL Mohamed 200

 JavaScript

8. Les paramètres Rest and Spread, et la Déstructuration (Destructuring)

c. Affectation de déstructuration

L'affectation de déstructuration d'objet

// ES5 syntax // ES6 syntax

var person = {name: "Peter", age: 28}; let person = {name: "Peter", age: 28};
var name = [Link]; // Object destructuring assignment
var age = [Link]; let {name, age} = person;
alert(name); // Peter alert(name); // Peter
alert(age); // 28 alert(age); // 28

Prof. NABIL Mohamed 201

 JavaScript

9. Classes
Dans ES5 et les versions antérieures, les
classes n'existaient pas en JavaScript. class Rectangle {
// Class constructor
Les classes ont été introduites dans ES6, qui constructor(length, width) {
ressemblent à celles d'autres langages [Link] = length;
orientés objet (Java, PHP, etc.), mais leur [Link] = width;
fonctionnement diffère. }
// Class method
Les classes ES6 facilitent la création d'objets, getArea() {
l'implémentation de l'héritage grâce au mot- return [Link] * [Link];
clé extends et la réutilisation du code. }
}
Nous pouvons déclarer une classe en
utilisant le mot-clé class suivi d'un nom de
classe. let rectangle = new Rectangle(10, 5);
alert([Link]()); // 50
Par convention, le nom de classe commence
par une majuscule.
Prof. NABIL Mohamed 202
 JavaScript

// Square class inherits from the Rectangle class

9. Classes -héritage class Square extends Rectangle {
La classe Square hérite de Rectangle grâce // Child class constructor
au mot-clé extends. constructor(length) {
Les classes qui héritent d'autres classes // Call parent's constructor
super(length, length);
sont appelées classes dérivées ou classes
}
enfants. // Child class method
De plus, vous devez appeler super() dans getPerimeter() {
le constructeur de la classe enfant avant return 2 * ([Link] + [Link]);
d'accéder au contexte (this). }
}
class Rectangle {
// Class constructor let rectangle = new Rectangle(10, 5);
constructor(length, width) {
alert([Link]()); // 50
[Link] = length;
[Link] = width; let square = new Square(5);
} alert([Link]()); // 25
// Class method alert([Link]()); // 20
getArea() {
alert(square instanceof Square); // true
return [Link] * [Link];
} alert(square instanceof Rectangle); // true
} [Link](rectangle
NABIL Mohamed instanceof Square); // false 203
 JavaScript

10. Gestion des erreurs

Il arrive que votre code JavaScript ne s'exécute pas aussi bien que prévu, ce qui
entraîne une erreur.
Plusieurs raisons peuvent être à l'origine d'une erreur, par exemple :
• Un utilisateur a peut-être saisi une valeur non valide dans un champ de
formulaire.
• Le référencement d'objets ou de fonctions inexistants.
• Des données incorrectes ont été envoyées ou reçues du serveur web.
• Etc.
Ces types d'erreurs sont appelées erreurs d'exécution, car elles se produisent lors de
l'exécution du script.
Une application professionnelle doit être capable de gérer correctement ces erreurs
d'exécution.
Cela implique généralement d'informer l'utilisateur du problème de manière plus
claire et plus précise.
Prof. NABIL Mohamed 204
 JavaScript

10. Gestion des erreurs

a. L'instruction try...catch
JavaScript fournit l'instruction try-catch pour intercepter les erreurs d'exécution et les gérer
correctement.
Tout code susceptible de générer une erreur doit être placé dans le bloc try de l'instruction, et le
code de gestion de l'erreur doit être placé dans le bloc catch.

try {
// Code that may cause an error
} catch(error) {
// Action to be performed when an error occurs
}
Si une erreur survient à un moment quelconque du bloc try, l'exécution du code est
immédiatement transférée du bloc try au bloc catch.
Si aucune erreur ne survient dans le bloc try, le bloc catch est ignoré et le programme continue
son exécution après l'instruction try-catch.
Prof. NABIL Mohamed 205
 JavaScript

10. Gestion des erreurs

a. L'instruction try...catch

try {
let greet = "Hi, there!";
[Link](greet);
// Trying to access a non-existent variable
[Link](welcome);
// If error occurred following line won't execute
alert("All statements are executed successfully.");
} catch(error) {
// Handle the error
alert("Caught error: " + [Link]);
}
// Continue execution
[Link]("<p>Hello World!</p>");
Prof. NABIL Mohamed 206
 JavaScript

10. Gestion des erreurs

b. L'instruction try...catch…finally
Le code à l'intérieur du bloc finally s'exécutera toujours, qu'une erreur se soit produite ou
non dans le bloc try.

// Storing the time when execution start

let start = [Link]();
try {
// the base to the exponent power
alert([Link](num, num));
} catch(e) {
alert([Link]);
} finally {
// Displaying the time taken to execute the code
alert("Execution took: " + ([Link]() - start) + "ms");
}
Prof. NABIL Mohamed 207
 JavaScript

10. Gestion des erreurs

c. Génération d'erreurs (Throwing Errors)

Nous avons vu jusqu'à présent les erreurs générées automatiquement par l'analyseur
JavaScript en cas d'erreur.
Cependant, il est également possible de générer une erreur manuellement à l'aide de
l'instruction throw.
La syntaxe générale de cette instruction est : throw expression.
L'expression peut être un objet ou une valeur de n'importe quel type de données.
Il est toutefois préférable d'utiliser des objets, de préférence avec les propriétés name
et message.
Le constructeur JavaScript intégré Error() offre un moyen pratique de créer un objet
d'erreur.

Prof. NABIL Mohamed 208

 JavaScript

10. Gestion des erreurs

c. Génération d'erreurs (Throwing Errors)

function squareRoot(number) { try {

// Throw error if number is negative squareRoot(625);
if(number < 0) { squareRoot(-9);

throw new Error("Sorry, can't calculate square squareRoot(100);

// If error is thrown following line won't execute
root of a negative number.");
alert("All calculations are performed successfully.");
} else {
} catch(e) {
return [Link](number); alert([Link]);
} } finally {
} // Displaying the time taken to execute the code
// Storing the time when execution start alert("Execution took: " + ([Link]() - start) + "ms");
}
let start = [Link]();
Prof. NABIL Mohamed 209
 JavaScript

10. Gestion des erreurs

d. Types d'erreurs (Types Error)

L'objet Error est le type de base de toutes les erreurs et possède deux propriétés
principales qui sont:
name : spécifie le type d'erreur.
message : contient un message décrivant l'erreur en détail.

Toute erreur générée sera une instance de l'objet Error.

Plusieurs types d'erreurs peuvent survenir lors de l'exécution d'un programme

JavaScript, tels que RangeError, ReferenceError, SyntaxError, TypeError, etc.

Prof. NABIL Mohamed 210

 JavaScript

10. Gestion des erreurs

d. Types d'erreurs (Types Error)

RangeError
Une erreur RangeError est générée lorsque vous utilisez un nombre hors de la plage
de valeurs autorisées.

let num = 12.735;

try {
[Link](200); // RangeError: toFixed() digits argument must be between 0 and 100
let array = new Array(-1); //RangeError: Invalid array length
} catch(e) {
[Link]([Link] + ": " + [Link]);
}

Prof. NABIL Mohamed 211

 JavaScript

10. Gestion des erreurs

d. Types d'erreurs (Types Error)

ReferenceError
Une ReferenceError est généralement générée lorsque vous tentez de référencer ou
d'accéder à une variable ou à un objet qui n'existe pas.

let firstName = "Mohamed";

try {
[Link](firstname); //ReferenceError: firstname is not defined
} catch(e) {
[Link]([Link] + ": " + [Link]);
}

Prof. NABIL Mohamed 212

 JavaScript

10. Gestion des erreurs

d. Types d'erreurs (Types Error)

SyntaxError
Une erreur de syntaxe est générée à l'exécution en cas de problème de syntaxe dans
votre code JavaScript.

try {
[Link](mohamed'); // SyntaxError: missing ) after argument list
} catch(e) {
[Link]([Link] + ": " + [Link]);
}

Prof. NABIL Mohamed 213

 JavaScript

10. Gestion des erreurs

d. Types d'erreurs (Types Error)

TypeErro
Une erreur TypeError est générée lorsqu'une valeur n'est pas du type attendu. Par
exemple, lors de l'appel d'une méthode de chaîne sur un nombre, d'une méthode de
tableau sur une chaîne, etc.

Let num = 125;

let greet = "Hello World!";
try {
[Link](); //TypeError: [Link] is not a function
[Link]();
} catch(e) {
[Link]([Link] + ": " + [Link]);
}
Prof. NABIL Mohamed 214
 JavaScript

11. Programmation asynchrone en JavaScript

Programmation Synchrone

• Le code s’exécute ligne par ligne, dans l’ordre.

• Chaque ligne bloque la suivante jusqu’à ce qu’elle soit terminée.
• Si une tâche prend du temps (comme lire un fichier ou appeler une API),
tout le programme attend.

[Link]("Début");
const data = getData();
// Imaginons que ça prend 3 secondes: tout s’arrête pendant son exécution
[Link](data);
[Link]("Fin");
Début
data
Fin Prof. NABIL Mohamed 215
 JavaScript

11. Programmation asynchrone en JavaScript

Programmation Asynchrone
Le code peut démarrer une tâche et continuer sans attendre qu’elle se
termine.

[Link]("Début");
setTimeout( function() {[Link]("Données reçues");}, 2000);
// Affiché après 2 secondes
[Link]("Fin");

Début
Fin
Données reçues
Le programme ne se bloque pas pendant les 2 secondes, il continue !

Prof. NABIL Mohamed 216

 JavaScript

11. Programmation asynchrone en JavaScript

Les applications réelles doivent gérer des tâches telles que : Récupérer des
données depuis une API, Lire des fichiers, Répondre aux saisies utilisateur.

Si JavaScript attendait la fin de chacune de ces tâches, l'application se figeait.

C'est là qu'intervient la programmation asynchrone : elle permet à JavaScript de

démarrer une tâche, de poursuivre l'exécution d'autres codes et de gérer le
résultat ultérieurement.

La programmation asynchrone est une technique qui permet à votre programme

de démarrer une tâche potentiellement longue tout en restant réactif aux autres
événements pendant son exécution, sans avoir à attendre sa fin.

Prof. NABIL Mohamed 217

 JavaScript

11. Programmation asynchrone en JavaScript

Pour gérer le code asynchrone, JavaScript utilise :

• Les Fonctions callbacks

• Les Promesses (Promises)

• Async/Await

• La boucle d'événements (The Event Loop)

• Etc.

Prof. NABIL Mohamed 218

 JavaScript

11. Programmation asynchrone en JavaScript

Callback
Une fonction de rappel (callback) est une fonction qui est passée à une autre fonction en tant
que argument et elle ne s'exécute qu'après la fin de la tâche de la fonction conteneur.
Lorsque nous passons une fonction de rappel en argument à une autre fonction, nous
transmettons uniquement la définition de la fonction.

<body>
<button type="button" id="myBtn">Click Me</button>
<p id="demo">pp</p>
<script>
sum = (a,b)=>(a+b); // function sum(a,b){return a+b;}
product = (a,b)=>(a*b); // function product(a,b){return a*b;}
function operation(a, b, callback){
[Link]("demo").innerHTML = callback(a,b);
}
operation(5, 3, sum);
</script>
</body> Prof. NABIL Mohamed 219
 JavaScript

11. Programmation asynchrone en JavaScript

Callback
<body>
<button type="button" id="myBtn">Click Me</button>
<p id="demo">pp</p>
<script>
sum = (a,b)=>(a+b); // function sum(a,b){return a+b;}
time = (a,b)=>(a*b); // function sum(a,b){return a*b;}
function operation(a, b, callback){
[Link]("demo").innerHTML = callback(a,b);
}
operation(5, 3, sum);
</script>
</body>
sum est passé sans parenthèses () — ce qui signifie que nous passons la fonction elle-même, et
non le résultat de son appel.
Prof. NABILde
Si vous écriviez sum(), vous passeriez le résultat Mohamed
l'exécution de sum, et non la fonction. 220
 JavaScript

11. Programmation asynchrone en JavaScript

Callback Hell

function asyncFunction1(callback) {
[Link]("Async Function 1 Done");
callback();
asyncFunction1(function(){
}
asyncFunction2(function(){
function asyncFunction2(callback) { asyncFunction3(function(){
[Link]("Async Function 2 Done"); [Link]("All Async Functions Completed");
callback();
});
}
});
function asyncFunction3(callback) { });
[Link]("Async Function 3 Done");
callback();
}
Prof. NABIL Mohamed 221
 JavaScript

11. Programmation asynchrone en JavaScript

Promise
Imaginons que vous souhaitiez acheter un nouveau téléphone. Vous ouvrez alors une application
de messagerie pour contacter un magasin de téléphonie.

access a Promise

Promise

Promise
Promise
gets
gets
rejected
resolved
Prof. NABIL Mohamed 222
 JavaScript

11. Programmation asynchrone en JavaScript

Promise

Cette illustration illustre le fonctionnement de l'objet Promise en JavaScript :

Une Promise est comparable au message automatisé (Hello! thank you for contacting
….). Elle représente un état d'attente qui doit être honoré ultérieurement.

L'agent humain indiquant que le modèle de téléphone est disponible est similaire à la
méthode resolve(), qui indique que la Promesse est honorée.

L'agent vous informant que vous contactez le mauvais magasin est similaire à la
méthode reject(), qui indique que la Promesse ne peut être honorée en raison d'une
erreur.

Prof. NABIL Mohamed 223

 JavaScript

11. Programmation asynchrone en JavaScript

Promise
let promis = new Promise( function(resolve, reject) { Lors de la création d'un nouvel objet
let isTrue = true; Promise, nous devons passer une
// "Producing Code" (May take some time) fonction callback qui sera appelée
if (isTrue) {
immédiatement avec deux arguments :
resolve('Promise resolved'); // when successful
les fonctions resolve() et reject().
} else {
Selon le résultat de la Promise, la
reject('Promise rejected'); // when error
fonction resolve() ou reject() sera
}
}); appelée pour mettre fin à l'état
// "Consuming Code" (Must wait for a fulfilled Promise) d'attente.
[Link]( Pour gérer l'objet Promise, vous devez
function(value){[Link](value);}, chaîner l'appel de fonction avec les
function(error){[Link](error);} fonctions then() et catch().
); Prof. NABIL Mohamed 224
 JavaScript

11. Programmation asynchrone en JavaScript

Promise

let promis = new Promise( function(resolve, reject) { Lors de la création d'un nouvel objet
let isTrue = true; Promise, nous devons passer une
if (isTrue) { fonction callback qui sera appelée
resolve('Promise resolved'); immédiatement avec deux arguments :
} else { les fonctions resolve() et reject().
Selon le résultat de la Promise, la
reject('Promise rejected');
fonction resolve() ou reject() sera
}
appelée pour mettre fin à l'état
});
d'attente.
promis
Pour gérer l'objet Promise, vous devez
.then(function(value){[Link](value);})
chaîner l'appel de fonction avec les
.catch(function(error){[Link](error);});
fonctions then() et catch().
Prof. NABIL Mohamed 225
 JavaScript

11. Programmation asynchrone en JavaScript

Promise
//Callback
function fct(value, callback){
setTimeout(callback(value), 2000);
}
function myFunction(value) {
[Link]("demo").innerHTML = value;
}
fct("This is a callback function!", myFunction);

//Promise
let promis = new Promise( function(resolve, reject) {
setTimeout(function(){ resolve("This is promise object!"); }, 2000);
});
[Link](function(value) {
[Link]("demo").innerHTML = value;
}); Prof. NABIL Mohamed 226
 JavaScript

11. Programmation asynchrone en JavaScript

Async/await
La syntaxe "async/await" est utilisée spécialement pour gérer les promesses de
manière plus confortable. Elle est facile à comprendre et à utiliser.
Le mot-clé async peut être placé avant une fonction. Ce mot devant une fonction
signifie que cette fonction renvoie toujours une promesse. Les autres valeurs sont
automatiquement incluses dans une promesse résolue.

async function f() { function f() {

return "You are good students"; return [Link](" You are good students");
} }
f().then( f().then(
value => {alert(value);} value => {alert(value);}
); );

async garantit que la fonction renvoie une promesse et y encapsule les non-
promesses. Prof. NABIL Mohamed 227
 JavaScript

11. Programmation asynchrone en JavaScript

Async/await
Le mot-clé await ne fonctionne qu'avec les fonctions asynchrones. Il fait attendre JavaScript
jusqu'à ce que la promesse soit réglée et renvoie son résultat.
Le code de niveau supérieur, jusqu'à la première expression await incluse, est exécuté de
manière synchrone. Ainsi, une fonction asynchrone sans expression await s'exécutera de manière
synchrone.
En revanche, si une expression await est présente dans le corps de la fonction, celle-ci
s'exécutera toujours de manière asynchrone.
async function f() { await suspend littéralement
let promise = new Promise((resolve, reject) => { l’exécution de la fonction
setTimeout(() => resolve("done!"), 1000)
jusqu’à ce que la promesse
});
soit réglée, puis la reprend
let result = await promise; // wait until the promise resolves
alert(result); // "done!" avec le résultat de la
} promesse.
f(); Prof. NABIL Mohamed 228
 JavaScript

11. Programmation asynchrone en JavaScript

Async/await

Le mot-clé await est autorisé dans le corps de la fonction, ce qui permet d'écrire un
comportement asynchrone basé sur les promesses dans un style plus clair et d'éviter
la nécessité de configurer explicitement les chaînes de promesses.

async function f() {

function f() {
let promise = new Promise((resolve, reject) => {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
setTimeout(() => resolve("done!"), 1000)
});
});
let result = await promise;
return promise;
alert(result); // "done!"
}
}
f().then(alert);;
f();

Prof. NABIL Mohamed 229

 JavaScript

12. Les Modules

ES6 introduit les modules basés sur des fichiers, où chaque module est représenté par
un fichier .js distinct.

Les modules JavaScript vous permettent de diviser votre code en fichiers distincts.

Cela facilite la maintenance d'une base de code.

Les modules sont importés depuis des fichiers externes à l'aide de l'instruction import.

Les modules s'appuient également sur type="module" dans la balise <script>.

Prof. NABIL Mohamed 230

 JavaScript

12. Les Modules

<!DOCTYPE html>
[Link] <html lang="en">
let greet = "Hello World!"; <head>
const PI = 3.14; <meta charset="utf-8">
function multiplyNumbers(a, b) { <title>ES6 Module Demo</title>
return a * b; </head>
} <body>
// Exporting variables and functions <script type="module" src="[Link]"></script>
export { greet, PI, multiplyNumbers }; </body>
</html>

[Link]
import { greet, PI, multiplyNumbers } from './[Link]';
alert(greet); // Hello World!
alert(PI); // 3.14
alert(multiplyNumbers(6, 15)); // 90 Prof. NABIL Mohamed 231
 JavaScript

12. Les Modules

[Link]
1. Install [Link] ➔[Link]
sous PowerShell
# Télécharger et installer fnm :
winget install [Link]
# Télécharger et installer [Link] :
fnm install 22
# Vérifier la version de [Link] :
node -v # Doit afficher "v22.14.0".
# Vérifier la version de npm :
npm -v # Doit afficher "10.9.2".
2. Install npm package globally
npm -g install static-server
3. Go to the folder you want to serve and Run the server
static-server
Lancer votre app via le client, par exempleProf.
dans notre
NABIL cas : [Link]
Mohamed 232