Technologies web dynamiques

avec JavaScript avancé Object

ion
act
str

e
anc
Ab
ES

erit
6

Inh
mor phism
Poly

G. Cherradi 2025
[Link]
PLAN
à Introduction (Web application, JavaScript avancé)

à Manipulation avancée du DOM et des événements

à Modules ES6 et Structuration du Code

à Programmation asynchrone (Callbacks, Promises, Async/Await)

à Programmation Orientée Objet (POO) en JavaScript

[Link]
à Manipulation de Données avec JSON/XML et APIs

à API Web, AJAX et Fetch Knowledge Check (Quiz) + Badges

à Introduction à [Link] (Front-end moderne)

à Introduction à [Link] (Back-end JavaScript)

à Optimisation et Sécurité [Link]

[Link]
3
Introduction au langage JavaScript

[Link]

[Link]
Introduction au langage JavaScript

[Link]

[Link]
Introduction au langage JavaScript
1. Le navigateur télécharge le fichier HTML
sous forme de bytes

2. À l’aide de l’encodage (UTF-8), le

navigateur transforme les octets en
caractères lisibles.

3. Le navigateur lit le texte caractère par

caractère, et il le découpe en tokens (Un
[Link]
token, c’est un petit morceau significatif).

4. Le navigateur transforme chaque token

en node (Un node, c’est un élément
vivant en mémoire).Chaque node est un
objet JavaScript interne.

5. Le navigateur organise tous les nodes en

arbre hiérarchique (DOM : document
object Model).
Document Object Model (DOM)

HTML Document Document Object Model (DOM)

Document

HTML

head body
[Link]

title
h1 div id=div1 div id=div2

My HTML Document
Heading p pclass =p2

P Tag 1 P Tag 2
CSS Object Model (CSSOM)
CSSOM :

[Link]
Document Object Model (DOM)

[Link]
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour créer du contenu dynamique pour les sites
web. C'est un langage de programmation léger, multiplateforme, mono-thread et dynamiquement
typé. JavaScript est un langage interprété qui exécute le code ligne par ligne, offrant ainsi une plus
grande flexibilité.

à JavaScript est un langage mono-thread, ce qui signifie qu'il exécute une seule tâche à la fois.

à Il prend en charge à la fois le développement côté client et côté serveur

[Link]
à Le type de données d'une variable est déterminé au moment de l'exécution en JavaScript.

à Polyvalent : JavaScript peut être utilisé pour une large gamme de tâches, allant de calculs
simples à des applications côté serveur complexes.

à Asynchrone : JavaScript peut gérer des tâches comme la récupération de données depuis
des serveurs sans bloquer l'interface utilisateur.

à Écosystème riche : Il existe de nombreuses bibliothèques et frameworks basés sur JavaScript,

tels que React, Angular et [Link], qui rendent le développement plus rapide et plus efficace.
Qu'est-ce que JavaScript ?
JavaScript est à la fois compilé et interprété. Le moteur V8 améliore les performances en interprétant
d'abord le code, puis en compilant les fonctions fréquemment utilisées pour accélérer leur exécution. Cela
rend JavaScript efficace pour les applications web modernes.

1. Analyseur syntaxique (Parser) : V8 commence par analyser le

code source JavaScript et le transforme en un arbre syntaxique
abstrait (AST).

2. Ignition (Interpréteur) : V8 interprète d’abord le JavaScript à

l’aide d’Ignition, un interpréteur léger.l convertit l’AST en bytecode,
une représentation intermédiaire du code. Cela permet une
exécution rapide sans attendre la compilation.

3. TurboFan (Compilateur Just-In-Time - JIT) :Pendant l’exécution,

V8 identifie les fonctions fréquemment utilisées (code chaud). Ces
fonctions sont compilées en code machine hautement optimisé
grâce à TurboFan. Cela accélère l’exécution en supprimant les
opérations inutiles.

4. Garbage Collector (Gestion de mémoire) : V8 possède un

Garbage Collector avancé qui libère automatiquement la mémoire
des objets inutilisés.

[Link]
3
Exemple de code JavaScript et son exécution dans V8
function sum(a, b) {
return a + b;
}
[Link](sum(2, 3));

mov eax, [rbp-8] // Charge `a` dans un registre

V8 lit le code source et le transforme en add eax, [rbp-12] // Ajoute `b`
Abstract Syntax Tree (AST), une ret // Retourne le résultat
représentation arborescente du code.
{
"type": "FunctionDeclaration", - Si elle est appelée souvent, V8 détecte
[Link]
"name": "sum", qu'elle est "chaude" (hot code) et l'envoie à
"params": ["a", "b"], TurboFan.
"body": {
"type": "ReturnStatement",
"expression": { L'optimisation inclut des techniques comme
"type": "BinaryExpression", l'inlining (remplacement d'un appel de
"operator": "+", fonction par son corps directement).
"left": "a",
"right": "b"}}}

- Si la fonction sum(2, 3) est appelée une

seule fois, elle restera en bytecode.
- Ignition, l'interpréteur de V8, prend l'AST et
le convertit en bytecode. LdaNamedProperty a
LdaNamedProperty b
Add
[Link] Return 3
Les bases du JavaScript : JavaScript interne

JavaScript interne: Le JavaScript peut être inséré directement dans un document HTML à l’aide de la balise
<script>. il est généralement inséré soit dans la section <head>, soit dans <body> du document.

<!DOCTYPE html>
<html>
<head></head>
<body>
<h2 style="color: blue;">
JavaScript interne : Code JS placé dans le code HTML
</h2> [Link]
<h3 id="demo" style="color: green;"> regardez la console </h3>

<script>
// Ceci est un commentaire sur une seule ligne
/* Ceci est un commentaire
sur plusieurs lignes */

[Link]("Bonjour ILSI"); // Affiche un message dans la console du navigateur

</script>

</body>
</html>
 Les bases du JavaScript : JavaScript externe
External JavaScript : Pour les projets de grande envergure ou lorsque vous réutilisez des scripts sur plusieurs fichiers HTML,
vous pouvez placer votre code JavaScript dans un fichier externe avec l'extension .js. Ce fichier est ensuite lié à votre document
HTML en utilisant l'attribut src à l'intérieur d'une balise <script>.
Avantages : // fichier [Link]
<!DOCTYPE html>
- Temps de chargement plus rapides : Les <html>
fichiers JavaScript externes sont mis en cache <head></head>
par le navigateur, ce qui évite de les recharger à<body>
chaque visite. <h2>JavaScript externe : Code JS dans un fichier séparé
</h2>
[Link]
- Meilleure lisibilité et maintenance : Séparer le <h3 id="demo" style="color: green;"> regardez la console
HTML et le JavaScript rend les deux plus faciles </h3>
à lire et à maintenir. <!-- Lien vers le fichier JavaScript externe -->
<script src="[Link]"></script>
- Séparation des responsabilités : En isolant la </body>
structure (HTML) du comportement (JavaScript), </html>
le code devient plus propre, mieux organisé et
plus modulaire.
// fichier [Link]
- Réutilisation du code :Un seul fichier JavaScript
externe peut être utilisé avec plusieurs pages [Link]("Bonjour ILSI");
HTML. Cela réduit les duplications et simplifie les
mises à jour.
Les bases du JavaScript : Versions de JavaScript (ECMAScript)
Aperçu des principales versions d'ECMAScript, de leurs années de sortie et des fonctionnalités
clés qu'elles ont introduites.

Version Année Fonctionnalités clés

ES5 2009 mode strict, prise en charge de JSON, getters/setters

ES6
[Link]
2015 let / const, classes, fonctions fléchées

ES7 à ES13 2016 – 2022 async/await, BigInt, opérateur d’enchaînement optionnel (?.)

ES14 2023 toSorted, findLast, blocs statiques

Les bases du JavaScript : Data Types
JavaScript propose plusieurs types de données, que l’on peut regrouper en deux grandes catégories :
les types primitifs et les types non primitifs.

Un type de données répond à ces

questions :

- Nature : C’est quoi ? (Texte,

nombre, booléen...)

- Stockage : Comment c’est

mémorisé ? (Pile vs Tas, octets...)

- Usage : Qu’est-ce qu’on peut en

faire ? (Calculs, méthodes, accès...)
Les bases du JavaScript : Data Types
Les types de données primitifs représentent des valeurs simples et ne peuvent pas être modifiés (immutables).
[Link] : représente les valeurs numériques (entiers et décimales)
let n = 42; let pi = 3.14;

2. String : représente du texte entouré de guillemets simples ou doubles

let s = "Bonjour tout le monde !";

3. Boolean : représente une valeur logique (true ou false)

let bool = true;

4. Undefined : Variable déclarée mais sans valeur assignée.

let a; [Link](a); // affiche undefined

5. Null — Valeur intentionnellement vide

let data = null;

Les bases du JavaScript : Data Types
Types non primitifs en JavaScript : Les types non primitifs sont des objets. Ils permettent de stocker
des collections de données ou des entités plus complexes.

Object — Représente des paires clé-valeur : Un objet permet de regrouper plusieurs informations
sous une même structure.
let obj = {
name: "ALI",
age: 25
};

Array — Représente une liste de valeurs

let a = ["red", "green", "blue"];

Function — Représente un bloc de code réutilisable

function fun() {
[Link]("ILISI 2025");
}
Les bases du JavaScript : Les variables
Une variable est un espace de stockage utilisé pour conserver en mémoire différents types de données. Elle peut ensuite être
exploitée dans les scripts. Le nom d'une variable peut inclure uniquement des caractères alphanumériques, le symbole $
(dollar) et le caractère _ (underscore). Cependant, elle ne doit pas commencer par un chiffre ni porter le nom d'une fonction
existante en JavaScript. Pour créer une variable, on la déclare et on lui attribue une valeur :

En JavaScript, les variables sont déclarées en utilisant les mots-clés var, let ou const.

var n = 5;
- Var : Le mot-clé var est utilisé pour déclarer
[Link](n);
une variable. Il a une portée globale ou une
var n = 20; // réaffectation autorisée
portée fonctionnelle. [Link]
[Link](n);

let n = 10;
- let : Le mot-clé let introduit dans ES6, a une n = 20; // La valeur peut être mise à jour
portée de bloc et ne peut pas être redéclaré // let n = 15; // Ne peut pas être redéclarée dans
dans la même portée. la même portée
[Link](n);

- const : Le mot-clé const déclare des const n = 100;

variables qui ne peuvent pas être réaffectées. // n = 200; Ceci provoquera une erreur
Il a également une portée de bloc. [Link](n);

[Link]
3
 On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la soustraction (-), la
Les bases du JavaScript
multiplication : Types
(*), la division de données
(/) et le modulo (%). Le modulo est le reste d'une division.
Par exemple :
<script>
JavaScript prend en charge divers types de données, qui peuvent être largement classés en types primitifs et non primitifs:
var number1 = 3,
number2 = 2, result;
result = number1 *
number2;
alert(result); //
var text ='J\'écris mon texte ici'; /* Avec des apostrophes, le \ sert à
échapper une apostrophe intégrée Affiche
dans: « le
6 »texte, pour ne pas que Javascript
pense que le texte s'arrête là.*/ </script>
ou :
<script>
var number = 3;
number = number + 5;
alert(number); //
Affiche : « 8 »
Les opérateurs arithmétiques : </script>
On peut utiliser 5 opérateurs arithmétiques : l'addition (+), laàsoustraction
qui équivaut : (-), la multiplication (*), la
division (/) et le modulo (%). Le modulo est le reste<script> d'une division. Par exemple : ou : qui équivaut à :
var number = 3;
number += 5;
alert(number); //
[Link] Affiche : « 8 » 3
Valeur vs Référence (Types primitifs vs Objets)
Stack Heap

newPerson= Ref#101 name: ‘MONA’

age : 24
person= Ref#101 isEmployed: false

name =’ALI’ Ref#101

newname =’AHMED’

name =’AHMED’
Les bases du JavaScript : Les opérateurs arithmétiques
- Les opérateurs arithmétiques :
On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la soustraction (-), la multiplication (*), la
division (/) et le modulo (%). Le modulo est le reste d'une division. Par exemple : ou : qui équivaut à :

var number1 = 3, var number = 3; var number = 3;

number2 = 2, result; number = number + 5; number += 5;
result = number1 *number2; alert(number); alert(number);
alert(result); //Affiche : « 8 » //Affiche : « 8 »
//Affiche : « 6 »

- La concaténation : Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une
autre, comme dans cet exemple :
var hi = 'Bonjour ', name ='ILISI’; var text = 'Bonjour ';
var result = hi + name; text += 'ilisi';
alert(result); alert(text);
// Affiche : « Bonjour ILISI » // Affiche « Bonjour ilisi ».

On peut convertir un nombre en chaîne de caractères avec l'astuce suivante :

var text, number1 = 4, number2 = 2;
text = number1 + '' + number2; /* on ajoute une chaîne de caractères vide
entre les deux nombres pour permettre une concaténation sans calcul */
alert(text); // Affiche : « 42 » 3
[Link]
Les bases du JavaScript : Les opérateurs de comparaison
Les huit opérateurs de comparaison

Il y en a 8 :
== : égal à
!= : différent de
=== : contenu et type de variable égal à
!== : contenu ou type de variable différent de
> supérieur à
>= supérieur ou égal à
< : inférieur à
<= : inférieur ou égal à

[Link]
3
Les bases du JavaScript : Data Types
Exploration des types de données et des variables en JavaScript : Comprendre les expressions
courantes

[Link](null === undefined) false

[Link](5 > 3 > 2) false

[Link]([ ] === [ ]) false

[Link]("10" < "9") true

[Link]("ALI"/5); NaN

[Link](Infinity > 1000) true

Les bases du JavaScript : JavaScript Arrays
Les bases du JavaScript : JavaScript Arrays

Méthode Description Exemple

concat() Combine deux tableaux et retourne un nouveau tableau. [1,2].concat([3,4]) // [1,2,3,4]

filter() Retourne un tableau contenant uniquement les éléments qui passent un test. [1,2,3,4].filter(n => n > 2) // [3,4]

pop() Supprime et retourne le dernier élément. let a=[1,2]; [Link](); // 2

slice() Retourne une partie du tableau sans le modifier. [1,2,3].slice(0,2) // [1,2]
unshift() Ajoute un ou plusieurs éléments au début. let a=[2,3]; [Link](1); // [1,2,3]
shift() Supprime et retourne le premier élément. let a=[1,2]; [Link](); // 1
sort() Trie un tableau (attention : tri alphabétique par défaut). [3,10,1].sort() // [1,10,3]

find() Retourne le premier élément qui respecte une condition. [1,2,3].find(n => n > 1) // 2
push() Ajoute un élément à la fin du tableau. let a=[1]; [Link](2); // [1,2]
reverse() Inverse l’ordre du tableau. [1,2,3].reverse() // [3,2,1]
map() Retourne un nouveau tableau après transformation de chaque élément. [1,2,3].map(n => n*2) // [2,4,6]

splice() Modifie le tableau (ajout, suppression ou remplacement). let a=[1,2,3]; [Link](1,1) // [1,3]

join() Transforme un tableau en chaîne séparée par un séparateur. ["a","b"].join("-") // "a-b"

toString() Transforme le tableau en texte (séparé par des virgules). [1,2,3].toString() // "1,2,3"
Les bases du JavaScript : Le Contexte d’Exécution (Execution Context).
Tout code JavaScript s’exécute à l’intérieur d’un contexte d’exécution, qui est un concept abstrait servant de
conteneur. Il contient toutes les informations sur l’environnement d’exécution du code actuel.
Lorsqu’un programme JavaScript s’exécute, un contexte d’exécution est créé, et son fonctionnement repose sur deux
phases principales.

1. Phase d'Allocation Mémoire (Memory Allocation Phase) : JavaScript réserve de l’espace mémoire pour toutes les
variables et fonctions du script.

2. Phase d'Exécution du Code (Thread d’exécution.) :

var number =2;

function square(num){
var res =num*num;
return res;
}

var square1=square(number);

[Link] Call stack

Les bases du JavaScript : fonctions
Fonctions déclarées (Function Declaration)
- Lorsqu'on a besoin d'une fonction réutilisable.
- Quand on veut bénéficier du hoisting (la fonction
function changeLight(color) {
peut être appelée avant sa déclaration).
[Link](color);
}
Le hoisting est un comportement en JavaScript où
direBonjour(); // Fonction appelée avant sa les déclarations de variables et de fonctions sont
définition déplacées en haut de leur portée avant l'exécution
du code. Cela signifie que vous pouvez utiliser une
function direBonjour() { fonction ou une variable avant même de la déclarer
[Link]("Bonjour !"); dans votre code.
}

Fonction anonyme (Function Expression)

- Lorsqu'on veut assigner une fonction à une
variable.
const maFonction = function() { - Pour des callbacks (ex: setTimeout).
[Link]("Hello !");
};

maFonction(); // Appelle la fonction Contrairement aux fonctions déclarées, les fonctions

anonymes ne sont pas hoistées !

3
Les bases du JavaScript : fonctions
Fonction en tant que paramètre (Callback Function)
Une fonction callback est une fonction passée en argument à une autre fonction et qui sera exécutée plus
tard. Cela permet d'exécuter du code asynchrone ou de personnaliser le comportement d'une fonction.

function greet(name, callback) {

[Link]("Hello, " + name);
callback();
} - Programmation événementielle (DOM)
- Flexibilité et réutilisabilité
function sayGoodbye() { - Couplage plus faible
[Link]("Goodbye!"); - Inversion de contrôle (IoC)
}

// Appel avec callback

greet("Alice", sayGoodbye);

Fonctions fléchées (Arrow Functions)

- Les arrow functions (=>) sont une syntaxe plus
const direBonjour = () => courte pour écrire des fonctions en JavaScript. Elles
[Link]("Bonjour !"); ont été introduites avec ES6 (ECMAScript 2015) et
direBonjour(); // Affiche "Bonjour !" présentent plusieurs avantages, notamment une
meilleure gestion du this.
Les bases du JavaScript : This
§ This dans l’espace global

Dans l’espace global, la valeur de this est l’objet global.

Cet objet dépend de l’environnement d’exécution :

- Navigateur → window
- [Link] → global

§ This dans une fonction normale

La valeur de this dépend de la manière dont la fonction est appelée.

=> En mode non strict :

si la fonction est appelée seule → this est remplacé par l’objet global.

=> En mode strict :

si la fonction est appelée seule → this vaut undefined.

3
Les bases du JavaScript : This
§ This dans les arrow functions

- Les arrow functions n’ont pas leur propre this.

- Elles héritent du this du contexte lexical englobant.

- On parle de lexical this.

§ This dans le DOM

- Dans un gestionnaire d’événement avec une fonction normale :

- this référence l’élément DOM qui a déclenché l’événement.

- Avec une arrow function :

- this n’est pas l’élément DOM (héritage lexical).

3
Manipulation du DOM: DOM?
Le DOM (Document Object Model) est une représentation en mémoire de la page web sous forme d’un arbre
d’objets.
Chaque balise = un objet

HTML Document Document Object Model (DOM)

Document

HTML

head body

title
h1 div id=div1 div id=div2

My HTML Document
Heading p pclass =p2

P Tag 1 P Tag 2
Manipulation du DOM ?
Pourquoi manipuler le DOM ?

La manipulation du DOM est essentielle pour rendre une

page web dynamique et interactive. Sans cela, une page
serait statique et l'utilisateur ne pourrait interagir avec
elle.

Sans la manipulation du DOM, une page web resterait

totalement statique : // 25

- aucun changement de texte,

- aucun bouton interactif,
- aucun formulaire intelligent,
- aucune animation ni mise à jour automatique.

[Link]
3
Manipulation du DOM : DOM APIs?

Le DOM API est un ensemble d’interfaces JavaScript permettant

d’interagir avec le DOM (Document Object Model).

L’API DOM est indispensable pour rendre une page web

interactive et dynamique. Elle fournit les méthodes nécessaires
pour :

C – Create : Créer des éléments dans le DOM, // 25

- Le DOM est ce que nous manipulons
R – Read : Récupérer des élemements depuis le DOM
- L’API DOM est ce qui nous permet de le
manipuler.
U – Update : Modifier des éléments existants,

D – Delete : Supprimer des éléments du DOM.

3
Manipulation du DOM : Récuperation d’un Élément DOM
1. [Link]("id") : Sélectionne un élément grâce à son identifiant unique.

HTML Js

<h1 id="title">Bonjour</h1> const h1 = [Link]("title"); // sélection par id

2. [Link]("class") : Sélectionne tous les éléments possédant une classe

donnée.

<p class="text">Paragraphe 1</p> const h1 = [Link]("text")

<p class="text">Paragraphe 2</p>

3. [Link]("tag") : Sélectionne tous les éléments ayant une balise (tag)

donnée.

const paragraphs = [Link]("p");

Manipulation du DOM : Récuperation d’un Élément DOM
3. [Link](selector) : Sélectionne le premier élément qui correspond au sélecteur CSS

HTML Js

<h1 id="title">Bonjour</h1> const h1 = [Link]("#title"); // sélection par id

<p class="text">Paragraphe 1</p> const firstP = [Link](".text"); // premier élément .text
<p class="text">Paragraphe 2</p> const div = [Link]("div"); // première balise <div>

=> Gère tous les sélecteurs CSS : .class, #id, tag, [attr], etc.

4. [Link](selector) : Sélectionne tous les éléments qui correspondent au sélecteur

(NodeList).

const allParagraphs = [Link](".text");

[Link](p => {
[Link]([Link]);
});

=> Indispensable pour modifier plusieurs éléments

Manipulation du DOM : Récuperation d’un Élément DOM

Type de sélection Exemple CSS querySelector()

"#box"
ID | Type de sélection #id | Exemple CSS | `querySelector()` |
| ----------------- | -------------------- | ---------------------- |
".item"
Classe | ID .class | `#id` | `"#box"` |
| Classe | `.class` | `".item"` |
"div"
Balise div
| Balise | `div` | `"div"` |
Descendant
| Descendant ul li
| `ul li` | `"ul li"` "ul |li"
| Enfant direct | `div > p` | `"div > p"` |
| Attribut div > |p`input[type='text']` | `"input[type='text']"` | "div > p"
Enfant direct
| Pseudo-class | `li:first-child` | `"li:first-child"` |
"input[type='text']"
Attribut | Multiple | `h1, h2`
input[type='text'] | `"h1, h2"` |
"li:first-child"
Pseudo-class li:first-child

"h1, h2"
Multiple h1, h2
Manipulation du DOM : Modification d’un Élément DOM
La modification du DOM consiste à changer le contenu, les attributs, les classes, ou le style d’un
élément existant dans la page. JavaScript permet de modifier dynamiquement l’apparence et le
comportement d’un élément sélectionné grâce aux propriétés du DOM.

1. Modifier le contenu texte : textContent => Change uniquement le texte

const title = [Link]("h1");

[Link] = "Nouveau titre";

2. Modifier le contenu HTML : innerHTML => Interprète du HTML

const div = [Link](".box");

[Link] = "<p>Paragraphe <strong>ajouté</strong></p>";

3. Modifier les attributs : setAttribute()

const img = [Link]("img");

[Link]("src", "[Link]");
[Link]("alt", "Nouvelle image");
Manipulation du DOM : Modification d’un Élément DOM
La modification du DOM consiste à changer le contenu, les attributs, les classes, ou le style d’un
élément existant dans la page. JavaScript permet de modifier dynamiquement l’apparence et le
comportement d’un élément sélectionné grâce aux propriétés du DOM.

4. Modifier les styles : [Link]

[Link] = "red";
[Link] = "30px";

5. Modifier les classes : classList

[Link]("active"); // Add
[Link]("active"); // Remove
[Link]("highlight"); // Alterner (toggle)
[Link]("active"); // Vérifier si une classe existe
Manipulation du DOM : Création d’un Élément DOM
La création d’éléments dans le DOM se fait en 3 étapes :

1. Créer l’élément : [Link]("tag"): Crée un nouvel élément HTML en mémoire

const div = [Link]("div");

2. Modifier ses propriétés / contenu :

[Link] = "Hello World!";

[Link]="purple";
[Link]= "Hello hello!";

3. [Link](node) : Ajoute un nœud enfant à un élément existant dans le DOM.

[Link](div);
Manipulation du DOM : Suppression d’un Élément DOM
1. [Link]() : Supprime directement l’element du DOM.

const p = [Link]("p");
[Link]();

2. [Link](child) : Suppression via le parent

const list = [Link]("ul");

const firstItem = [Link];

[Link](firstItem);

3. innerHTML = " " : Vider complètement un élément => Permet de supprimer tout le contenu d’un élément.

const container = [Link](".container");

[Link] = "";
Manipulation du DOM : Gestion des événements dans le DOM
JavaScript nous permet de gérer des événements tels que les clics, les frappes au clavier, les
mouvements de la souris, etc.

1. Ajouter un écouteur d’événement :

[Link]("btn").addEventListener("click", function() {
alert("Button Clicked!");
});

2. En JavaScript, on utilise removeEventListener() pour supprimer un écouteur ajouté avec

addEventListener().

// 1. Définir une fonction séparée / 3. Supprimer l'écouteur lorsqu’on clique sur

function handleClick() { "remove"
[Link]("Bouton cliqué !"); [Link]("click", () => {
} [Link]("click", handleClick);
[Link]("Événement supprimé !");
// 2. Ajouter l'écouteur });
[Link]("click", handleClick);
Manipulation du DOM : Web APIs (SetTimeout , setInterval)
- setTimeout est une Web API

- Elle permet d’exécuter une fonction une seule fois, après un certain délai.

setTimeout(fonction, délai_en_millisecondes);

- fonction = le code a executer

- délai_en_millisecondes=temps d’attente (en ms)

setTimeout(() => {

[Link]("Bonjour après 2 secondes");

}, 2000);

=> Afficher Bonjour aprés 2 ms

Manipulation du DOM : Web APIs (SetTimeout , setInterval)
- setInterval est une Web API

Elle permet d’exécuter une fonction de manière répétée, avec un intervalle de temps fixe.

setInterval(fonction, délai_en_millisecondes);

- fonction = le code a executer

- délai_en_millisecondes=temps entre deux exécutions (en ms)

setInterval(() => {

[Link]("Bonjour");

}, 1000);

=> Afficher Bonjour chaque 1000 ms

Manipulation du DOM : Web Storage API
Stockage côté client avec JavaScript

- JavaScript peut stocker des données côté client.

Objectif : garder des informations entre les pages ou pendant une session.

- Les Web Storage API sont fournies par le navigateur

Web storage API Durée de vie Exemple d’usage

localStorage Persistant (même après fermeture du navigateur) Stocker les préférences de l’utilisateur

sessionStorage Session en cours (fermeture onglet → effacé) Stocker l’utilisateur connecté temporairement

Cookies Définie par l’expiration Gestion de session serveur, suivi analytics

Manipulation du DOM : Web Storage API
API sessionStorage : Stockage temporaire côté client, spécifique à un onglet.

Syntaxe :

Utilité : transférer des données entre pages pendant une session.

Example:
Manipulation du DOM : Web Storage API
API localStorage: Stockage permanent côté client.
Syntaxe :

Utilité : préférences, thèmes, tokens persistants.

Example:
Manipulation du DOM : Web Storage API
Les Cookies: Stockage côté client pour sessions et suivi. Petit fichier texte stocké dans le navigateur.

Peut contenir :
- Identifiant de session
- Préférences utilisateur
- Données de suivi (analytics)
Envoyé automatiquement au serveur à chaque requête HTTP.
Syntaxe :

Utilité :
- Suivi des visites, pages consultées, interactions avec le site.
- Personnaliser les annonces en fonction des intérêts et du comportement de navigation.
- Stocker des choix de l’utilisateur : thème, langue, taille du texte, etc.
Les bases du JavaScript : JS object vs Json Object
Un objet JavaScript est une structure de données qui suit la notation key: value, où les clés ne sont
pas nécessairement des chaînes et les valeurs peuvent être de tout type (fonctions, objets imbriqués,
undefined, etc.).

const user = {
name: "Alice",
age: 25, {
isAdmin: false, "name": "Alice",
greet: function() { "age": 25,
[Link]("Hello, " + [Link]); "isAdmin": false
} }
};

[Link]([Link]); // Alice
[Link](); // Hello, Alice

Objet JSON
Un objet JSON (JavaScript Object Notation) est une chaîne de texte qui suit un format spécifique, utilisé pour
échanger des données entre serveurs et clients.

[Link]
Les bases du JavaScript : JS object vs Json

Conversion entre Objet JavaScript et JSON

const user = { const jsonString = '{"name": "Alice",

name: "Alice", "age": 25, "isAdmin": false}';
age: 25, const userObject =
isAdmin: false [Link](jsonString);
}; const jsonString = '{"name": "Alice", "age": 25, "isAdmin": false}';
const userObject = [Link](jsonString);
[Link]([Link]); //
const jsonString = [Link](user); Alice
[Link](jsonString); [Link]([Link]); // 25
// [Link]([Link]); // Alice
[Link]([Link]); // 25
{"name":"Alice","age":25,"isAdmin":false}

- Un objet JavaScript est utilisé en mémoire pour manipuler des données.

- Un objet JSON est une chaîne au format texte, utilisée pour le stockage et le transfert de données.

[Link]
Synchrone vs Asynchrone code
Les bases du JavaScript : Event loop

Js Engine
Web APIs
[Link]("Start");
Window
Call stack setTimeout(() => {
[Link]("setTimeout - setTimeout()
Callback"); - DOM APIs
},0); - Fetch()
- localStorage
- Console
[Link]("End"); co

Event loop

callback queue
3
Atelier (Manipulation DOM et Asynchrone) : MVC Pattern
MVC est un pattern architectural qui organise le code en trois parties distinctes
Model (Modèle)
Model (Modèle)
- Représente les données et la logique métier.
Représente- Exemple
les données et la logique
: les utilisateurs, métier.
les produits,...etc.

Exemple : les utilisateurs, leurs soldes et transactions dans ton E-Wallet.

View (Vue)
- Représente l’affichage à l’utilisateur.
View (Vue)
- Exemple : HTML + CSS pour le login et le dashboard.
Représente l’affichage à l’utilisateur.
Controller (Contrôleur)
- Gère les interactions utilisateur et fait le lien entre Model et View.
Exemple : HTML + CSS pour
- Exemple : gérerlelelogin etlelebouton
clic sur dashboard.
login, vérifier l’utilisateur et mettre à
jour l’affichage..
Controller (Contrôleur)

Avantage : Gère les interactions utilisateur et fait le lien entre Model et View.
- Séparation des responsabilités : chaque partie a un rôle clair .
- RéutilisableExemple
: on peut:appliquer
gérer le MVC
clic sur le bouton
à n’importe login,
quelle vérifierweb
application l’utilisateur et mettre à jour l’affichage.
ou desktop.
- Facilite le débogage et l’évolution : un changement dans la View n’impacte pas le Model.
- Prépare aux frameworks modernes : React, Angular, Vue, Django utilisent des concepts similaires.
Atelier (Manipulation DOM et Asynchrone) : MVC Pattern
Etape1 : créer une arborescence claire, afin de séparer les rôles (HTML, CSS, JS, données).

# Contient images, logos, icônes,

illustrations

l’endroit où on place tout le code source de ton

application

# Scripts JavaScript => le traitement js pour

rendre l’app dynamique

# Styles de l'application

# Scripts JavaScript
[Link] => # Données simulant le backend

# les interfaces utilisateurs => les pages HTML

Les bases du JavaScript : Notions Asynchrones
Le problème de gestion des callbacks imbriqués
- Lorsqu’on utilise des c allbac k s pour gér er des
opérations asynchrones (Ex: setTimeout, des requêtes
getUser(userId, (user) => { réseau ou des accès DB), on peut rencontrer ce qu’on
getOrders(user, (orders) => { appelle le « callback hell » ou « pyramid of doom ».
processOrders(orders, (processed) => {
sendEmail(processed, (confirmation) => { - Ce problème apparaît lorsque plusieurs callbacks sont
[Link]("Order Processed:",confirmation); imbriqués les uns dans les autres, rendant le code
}); difficile à lire, à maintenir et à déboguer.
});
}); - Il survient principalement dans des scénarios où
Le problème de gestion des callbacks imbriqués
chaque opération asynchrone dépend du résultat de la
});
précédente, ce qui entraîne une structure de code en
forme de pyramide.

- Lisibilité réduite : Le code devient difficile à lire et à comprendre avec l'augmentation des callbacks imbriqués.
- Gestion des erreurs complexe : Chaque callback doit vérifier s'il y a une erreur, ce qui peut être lourd, répétitif et difficile
à suivre.
- Maintenance compliquée : Ajouter de nouvelles étapes ou modifier des étapes existantes dans une chaîne de callbacks
peut entraîner des erreurs ou des incohérences.

Le callback hell n’est pas un bug, c’est une mauvaise structure de code.
Les bases du JavaScript : Notions Asynchrones
Le problème L'Inversion de Contrôle dans les Callbacks

L’inversion de contrôle, dans le contexte des callbacks, signifie que le développeur ne maîtrise plus directement le moment
d’exécution de son code.

En passant une fonction callback, l’exécution est confiée à l’Event Loop, ce qui peut rendre le flux du programme plus difficile à
comprendre, surtout lorsque les callbacks deviennent imbriqués.

Le problème de gestion des callbacks imbriqués

- Dans le code synchrone, le “quand” est immédiat et prévisible.

- Dans le code asynchrone, le “quand” est délégué au moteur JavaScript.

Les bases du JavaScript : Notions Asynchrones
Le problème L'Inversion de Contrôle dans les Callbacks
L'inversion de contrôle, dans le contexte des callbacks, fait référence au fait que vous perdez une partie du contrôle sur
l'exécution de votre code lorsque vous passez une fonction callback à une autre fonction. La fonction d'origine (celle qui
appelle le callback) ne sait pas exactement quand la fonction de rappel sera exécutée, ni dans quel ordre. Cela crée une forme
de délégation de contrôle qui peut entraîner une complexité croissante à mesure que le code devient plus imbriqué.

// Fonction principale
Le problème principal ici est que la fonction createCommande
function createCommande() {
délègue le contrôle à la fonction de rappel dans getDataFromServer,
[Link]('Début de la commande...');
et elle ne peut pas contrôler l'ordre d'exécution des actions suivantes.
Le problème de gestion des callbacks
Cela devient imbriqués
problématique quand :
getDataFromServer(function(data) {
processData(data);
saveData(data); - Il y a beaucoup de callbacks imbriqués.
});
- Le flux du programme devient difficile à suivre.
[Link]('Commande en cours...');
} - Vous devez faire des appels multiples dans un ordre précis, et les
erreurs dans l'une des étapes peuvent entraîner des effets en
createCommande(); chaîne.

3
Les bases du JavaScript : Notions Asynchrones (promise)
Une Promise en JavaScript est un objet représentant une opération asynchrone (qui prend du temps) qui n'est pas
encore terminée, mais qui finira bien par donner un résultat dans le futur, ou échouer.

// creation de la promesse
let verifierSiPair =(nombre) =>{
return new Promise((resolve, reject) => { Les promesses permettent
if (nombre % 2 === 0) { d'enchaîner plusieurs opérations
resolve(`Le nombre ${nombre} est pair.`); asynchrones de manière plus
lisiblefalse}';
} else { const jsonString = '{"name": "Alice", "age": 25, "isAdmin": et gérable, tout en
reject(`Le nombre ${nombre} est impair.`); centralisant la gestion des erreurs.
}
const userObject = [Link](jsonString);
});
} [Link]([Link]); // Alice
// Utilisation de la promesse [Link]([Link]); // 25
verifierSiPair(8)
.then(message => [Link](message)) // succès (résolu)
.catch(erreur => [Link](erreur)); //échec (rejeté)

Une Promise peut être dans trois états différents :

1. En attente (Pending) : La promesse n'est pas encore terminée. L'opération asynchrone est en cours.
2. Réussie (Fulfilled) : L'opération a été terminée avec succès, et tu as le résultat que tu attendais.
3. Échouée (Rejected) : L'opération a échoué, et il y a une erreur ou un problème.*
[Link]
3
Les bases du JavaScript : Notions Asynchrones (Promise)
Les promesses permettent de mieux gérer les opérations asynchrones en offrant une syntaxe plus claire et en
réduisant les risques de "callback hell".

function fetchData(url) { - Chaining (Chaînage) : Les promesses permettent

return new Promise((resolve, reject) => { d'enchaîner plusieurs opérations asynchrones de
setTimeout(() => { manière plus lisible, sans avoir à imbriquer les
const success = true; // Simulons un succès fonctions callback.
if (success) {
resolve("Données de l'API"); - Gestion des erreurs améliorée : Avec les
} else { promesses, les erreurs sont capturées de manière
reject("Erreur lors de la récupération des données"); centralisée via .catch(), ce qui rend la gestion des
} erreurs plus simple et plus lisible.
}, 2000);
}); - Syntaxe plus claire : Moins de risque de "callback
} hell" avec le chaînage des promesses. Cela rend
votre code plus lisible et plus facile à maintenir.
fetchData("[Link]
.then((data) => { - Gestion asynchrone plus fluide : Une promesse
[Link]("Réponse : ", data); peut être en attente (pending), résolue (fulfilled) ou
return getData("[Link] // Retourne une rejetée (rejected), ce qui permet de mieux gérer les
nouvelle promesse flux d'exécution.
})
.catch((error) => {
[Link]("Erreur : ", error);
});
[Link]
3
Les bases du JavaScript : Notions Asynchrones (Promise)
méthodes .then() et .catch() :

- .then() : Cette méthode est utilisée pour gérer la résolution d'une Promise. Elle prend une fonction callback qui sera
exécutée lorsque la Promise sera résolue avec succès (c'est-à-dire, lorsque l'état de la Promise passe de en attente à
résolue). La valeur que la Promise renvoie à l'intérieur de la fonction resolve() sera passée en paramètre à la fonction de
rappel dans .then().

- .catch() : Cette méthodeconst jsonString

est utilisée = '{"name":
pour gérer "Alice",
le rejet d'une "age":
Promise. 25,
Elle "isAdmin":
prend false}';
une fonction callback qui sera exécutée
lorsque la Promise sera rejetée. La raison du userObject
const rejet (en général un objet d'erreur) sera passée en paramètre à la fonction de
= [Link](jsonString);
callback dans .catch().
[Link]([Link]); // Alice
let checkEven = new Promise((resolve, reject)//=>
[Link]([Link]); 25 {
let number = 4;
if (number % 2 === 0)
resolve("The number is even!");
else
reject("The number is odd!");
});
checkEven
.then((message) => [Link](message)) // On success
.catch((error) => [Link](error)); // On failure

3
Les bases du JavaScript : Notions Asynchrones (async /await)
async / await est une syntaxe moderne de JavaScript qui permet d’écrire du code asynchrone de
manière plus lisible, plus proche du code synchrone.

- async / await repose entièrement sur les Promises

- Ce n’est pas un nouveau mécanisme, seulement une nouvelle écriture
- async / await ne change PAS la création de la Promise=> Il change uniquement la façon de l’utiliser.
let checkEven = new Promise((resolve, reject) => {
const
let jsonString
number = 4;= '{"name": "Alice", "age": 25, "isAdmin": false}';
const
if (number % 2userObject
=== 0) = [Link](jsonString);
resolve("The number is even!");
else [Link]([Link]); // Alice
reject("The number is odd!");
[Link]([Link]); // 25
});

checkEven async function testerNombre() {

.then((message) =>[Link](message))//succes const message = await checkEven;
.catch((error) =>[Link](error));//echec [Link](message); // succès
}
testerNombre();
Les bases du JavaScript : promises

const jsonString = '{"name": "Alice", "age": 25, "isAdmin": false}';

const userObject = [Link](jsonString);

[Link]([Link]); // Alice
[Link]([Link]); // 25

3
Les bases du JavaScript : Responsabilité Unique (SRP)
La Solution = l’utilisation des services pour implementer le principe de Responsabilité Unique (SRP).

Service : Un service est une unité logique indépendante du UI. Il permet de centraliser les actions
techniques (API, Storage,logique metier) pour rendre le code réutilisable et plus facile à tester.

En utilisant des services, nous transformons une structure désordonnée en une architecture
professionnelle inspirée de frameworks comme NestJS

//[Link]/skills/badges/

-> Gestion UI

-> la loqique metier

Les bases du JavaScript : Gestion des erreurs try/catch
Pourquoi la gestion des erreurs est essentielle ?

Dans une application réelle : Sans gestion des erreurs :

- une requête peut échouer - l’application plante

- une donnée peut être invalide - l’utilisateur ne comprend pas ce qui se passe
//[Link]/skills/badges/
- un service externe peut être indisponible - le système devient difficile à maintenir

- une règle métier peut être violée

La gestion des erreurs permet de rendre l’application fiable, lisible et robuste.

Les bases du JavaScript : Gestion des erreurs try/catch

Permettre au programme de continuer à s’exécuter même lorsqu’une erreur survient en interceptant et

en gérant l’exception

Bloc try Bloc catch

- Contient le code susceptible de générer une - Intercepte et gère l’exception

erreur
- Permet d’exécuter du code alternatif en cas
- Si une erreur se produit, l’exécution passe au d’erreur
//[Link]/skills/badges/
bloc catch correspondant.

Bloc finally (Optionnel) Flux d’exécution

- Toujours exécuté, que l’erreur survienne ou non - Le code du bloc try est exécuté
- Si pas d’erreur → catch ignoré
- Idéal pour nettoyer des ressources (fermer - Si erreur → exécution de catch
fichiers, libérer mémoire …) - finally s’exécute toujours (si présent)
Les bases du JavaScript : Gestion des erreurs try/catch
Syntaxe générale:

- On ne peut pas utiliser catch sans try

- On ne peut pas utiliser plusieurs try avec un seul

catch partagé

- On peut avoir plusieurs catch pour gérer

//[Link]/skills/badges/
différents types d’erreurs

- Le finally est facultatif mais très utile pour la

propreté du code

La structure est similaire dans de nombreux langages (C++,JS,Java, Python).

Les bases du JavaScript : throw + try / catch
Syntaxe générale:
async function payer(amount) {
if (amount <= 0) {
thrownew Error("Montant invalide"); throw permet de lever (déclencher) une
} erreur volontairement.
return"Paiement réussi";
} On utilise throw lorsqu’une règle métier n’est
try { //[Link]/skills/badges/
pas respectée ou lorsqu’une situation est
await payer(-10); invalide, même si JavaScript ne génère pas
automatiquement d’erreur.
} catch (e) {
[Link]([Link]);
}

throw permet de signaler explicitement une erreur et de forcer son traitement via try / catch.
Js coté serveur : Framework Nest JS
Pourquoi un backend ?

- Notre application E-wallet en JavaScript natif fonctionne… mais seulement en apparence

Problèmes du front-end seul

- Les données sont stockées dans le navigateur (sessionStorage, localStorage)

- Les données disparaissent si on change de navigateur ou d’appareil

//[Link]/skills/badges/

- N’importe qui peut modifier le code côté client

- Aucune vraie sécurité

- Aucune gestion multi-utilisateurs réelle

Un front-end seul n’est pas fiable pour une application réelle.

Js coté serveur : Framework Nest JS
Le backend est le cerveau et la mémoire de l’application.
Il permet de :

- stocker les données de manière permanente

- appliquer les règles métier

- sécuriser les opérations

- gérer plusieurs utilisateurs simultanément

//[Link]/skills/badges/
Le backend désigne tout ce qui fonctionne côté serveur.

Il inclut généralement :

- un web server (gestion HTTP)

- un application server (logique métier)

- une base de données

- parfois des services externes (auth, paiement…)

JavaScript côté serveur : Environnement [Link]

[Link] est un environnement d’exécution écrit en C++ qui permet d’exécuter du JavaScript côté serveur.

//[Link]/skills/badges/
JavaScript côté serveur : Environnement [Link]
installer l’environnement d’exécution [Link]
Étape 1 : Télécharger [Link] (LTS)

- Accéder au site officiel de [Link] npm (Node Package Manager)

- Télécharger la version LTS (Long Term Support) npm est le gestionnaire de paquets officiel de [Link].

- Lancer le programme d’installation Il permet de :

Étape 2 : Installer [Link]
- Installer des bibliothèques
//[Link]/skills/badges/
- Pendant l’installation :
- Gérer les dépendances d’un projet
- Conserver les options par défaut
- Exécuter des scripts
- Vérifier que l’option “Add to PATH” est activée

- Laisser l’option “Automatically install the necessary tools…” désactivée (facultatif)

Étape 3 : Vérifier l’installation

- Ouvrir un terminal (CMD, PowerShell ou Terminal)

- Vérifier les versions installées :

node -v
npm -v
JavaScript côté serveur : Environnement [Link]
Etape 4: Installation de NestJS
4.1 - Créer le dossier du projet
- Créer un dossier nommé Back-end
- Ce dossier contiendra tout le code côté serveur

4.2 - Ouvrir le dossier dans un éditeur de code

- Ouvrir le dossier Back-end avec un éditeur de code
(exemple : Visual Studio Code)

4.3 - Ouvrir le terminal

- Ouvrir le terminal intégré de l’éditeur//[Link]/skills/badges/
(Terminal → New Terminal)
- Vérifier que le terminal est bien positionné dans le dossier Back-end

4.4 - Installation et utilisation de la CLI NestJS

- npx @nestjs/cli new Ewallet_Backend

- Cette commande exécute la CLI NestJS sans installation globale.
- Elle permet de générer automatiquement l’architecture initiale du projet.

4.5- Démarrer le serveur web NestJS

- npm run start :dev

- Lance le serveur en mode dev ( Redémarrage automatique lors des modifications du code)
Introduction à NestJS

NestJS est un framework backend basé sur [Link]. Il utilise TypeScript et repose sur
Express pour gérer les requêtes HTTP. Il propose une architecture modulaire,
l’injection de dépendances et des décorateurs pour organiser le code. NestJS est
un framework opinioné.

Les Modules
//[Link]/skills/badges/
- Un module regroupe les parties de l’application liées à une même fonctionnalité.
- Toute application NestJS contient au moins un module : le module racine (AppModule)

Les Contrôleurs

- Les contrôleurs reçoivent les requêtes HTTP et renvoient les réponses.

- Ils définissent les routes avec des décorateurs comme @Get(), @Post(), etc.

Les Services (Providers)

- Les services contiennent la logique métier.

- Ils sont utilisés par les contrôleurs grâce à l’injection de dépendances.
Back End Server Nestjs
D- Vérifier la structure du projet :

Ce dossier contient toutes les dépendances installées par npm en fonction

des informations de [Link].

Le dossier src/ contient le code source de l'application.

- [Link] contient le contrôleur principal de votre application.
- [Link] est où vous configurez vos modules

utilisé//[Link]/skills/badges/ l Ces tests permettent de

pour stocker les fichiers de tests.
vérifier que ton code fonctionne correctement.

blueprint (plan) indique à npm ce dont ton projet a besoin pour

fonctionner correctement.

garantit que les dépendances de ton projet seront installées de manière

identique sur toutes les machines (ton ordinateur, ou sur un serveur).
La structure de base d'une application NestJS

Fichier Description Exemple d'utilisation

[Link] Contrôleur de base avec une seule route. Il gère les requêtes
HTTP entrantes et retourne les réponses appropriées.

- Utilise des décorateurs tels que @Controller et @Get (ainsi que

d'autres méthodes HTTP comme @Post, @Put, etc.) pour définir
une route
[Link] Module racine de l'application. Organise les contrôleurs, les
//[Link]/skills/badges/
services et importe d'autres modules.
Un module est un regroupement logique de composants
responsables d'une fonctionnalité ou d'une fonctionnalité
spécifique de l'application.
[Link] Service de base avec une méthode simple. Contient la logique
métier et est utilisé par les contrôleurs pour exécuter des
tâches.

[Link] Point d'entrée de l'application. Utilise NestFactory pour créer

une instance de l'application NestJS et définir les configurations
globales.
La structure de base d'une application NestJS

Le module racine constitue le point d’entrée de l’application NestJS.

Il permet à Nest de construire un graphe interne décrivant les
relations entre les modules et les fournisseurs afin de gérer
l’injection des dépendances.

//[Link]/skills/badges/
La structure de base d'une application NestJS
Les contrôleurs sont responsables du traitement des requêtes entrantes et de l’envoi des
réponses au client.

Les contrôleurs reçoivent les requêtes HTTP, appellent les services appropriés et renvoient les
réponses au client.

//[Link]/skills/badges/
La structure de base d'une application NestJS
Les providers d’un module sont des singletons par défaut. Pour les partager entre
modules, ils doivent être exportés..

//[Link]/skills/badges/

Chaque module est automatiquement un module partagé. Une fois créé, il peut être réutilisé par
n'importe quel module.
Back End Server Nest
Étape 2 : Création des Modules et API (Module 1 : Authentification )

npx nest generate module auth

npx nest generate controller auth
npx nest generate service auth

[Link]

import { Module } from '@nestjs/common';

//[Link]/skills/badges/
import { authController } from './[Link]';
import { authService } from './[Link]';

@Module({
controllers: [authController,],
providers: [authentService,]
})
export class authModule {}
Back End Server Nest
[Link]

import { Body, Controller, Get, Post, Query } from "@nestjs/common";

import { AuthService } from "./[Link]";
@Controller('auth')
export class AuthController {
constructor(private readonly authentService: AuthService) {}

@Post('register')
//[Link]/skills/badges/
register(@Body() body:{email: string, password:string}): string {
const {email, password}= body;
return [Link](email, password) ;
}

@Post('login')
login(@Body() body:{email: string, password: string}){
[Link](body)
const {email, password}= body;
return [Link](email, password);
}}
Back End Server Nest
[Link]
import { Injectable } from '@nestjs/common’;

@Injectable()
export class AuthentService {
private users= []; // tableau pour stocker les utilisateur

register(email: string , password : string) : string{

[Link]({email:email,password:password});
//[Link]/skills/badges/
return 'Utilisateur enregistré avec succès';
}
login(email: string , password : string) : string{
const user = [Link](
(user)=>[Link]===email&& [Link]===password);

return user ? 'connexion reussie': 'cridentials invalide';

}}
Back End Server Nest
fetch est une API JavaScript native permettant d’envoyer des requêtes HTTP (GET, POST, PUT, DELETE…) vers un
serveur.

- Intégrée au navigateur
- Basée sur les Promises
- Utilisée pour communiquer avec une API (backend)

Syntaxe de base Example Fetch avec Post

//[Link]/skills/badges/

Syntaxe avec async (recommandé)

Back End Server Nest Example Fetch avec Post

- [Link] transforme un objet JS en JSON

- Content-Type indique le format envoyé au serveur

- fetch retourne une Promise

- Une fois résolue, cette Promise donne un objet Response

- response est un objet HTTP, pas les données directement.

Il contient par exemple : //[Link]/skills/badges/

- [Link] → code HTTP (200, 404, 500…)

- [Link] → true / false

- [Link] → en-têtes HTTP

- [Link]() → méthode pour lire le body

Les données envoyées par le serveur ne sont pas directement accessibles.

Back End Server Nest
JSON (JavaScript Object Notation) est un format de données textuel, léger et lisible, utilisé pour échanger et stocker des
données structurées.

Caractéristiques Utilisé dans :

- Format texte - APIs REST

- Basé sur les objets JavaScript - Frontend ↔ Backend

- Facile à lire par l’humain - Fichiers de configuration

//[Link]/skills/badges/
- Facile à parser par les machines - Stockage simple de données

Structure d’un fichier JSON

Types de données supportés

- string
- number
- boolean
- object
- array
- null
Back End Server Nest
JSON (JavaScript Object Notation) est un format de données textuel, léger et lisible, utilisé pour échanger et stocker des
données structurées.

Lire un fichier JSON

import { promises as fs } from 'fs';

import * as path from 'path';
[Link] → lit le fichier
async getUsers() {
const filePath = [Link](__dirname,//[Link]/skills/badges/
'..', 'data', '[Link]'); [Link] → transforme le JSON en
objet JavaScript
const data = await [Link](filePath, 'utf-8');
return [Link](data); [Link] → chemin portable
}

import { promises as fs } from 'fs' : On importe la version asynchrone du module fs (File System).
import * as path from 'path'; Le module path permet de gérer les chemins de fichiers de façon portable.

[Link](): Current Working Directory

Back End Server Nest
JSON (JavaScript Object Notation) est un format de données textuel, léger et lisible, utilisé pour échanger et stocker des
données structurées.
Ajouter des données (Ecriture)

async addUser(user) {
const filePath = [Link](__dirname, '..', 'data', '[Link]'); [Link](...)

const data = await [Link](filePath, 'utf-8'); Écrit des données dans un fichier.
const users = [Link](data); //[Link]/skills/badges/
- Si le fichier existe → il est écrasé
[Link](user);
- S’il n’existe pas → il est créé
await [Link](filePath, [Link](users, null, 2));
}

Paramètre Rôle
users Objet JS à convertir
null Aucun filtre
2 Indentation (lisibilité)
Installation de PostgreSQL
1. Télécharger PostgreSQL
[Link]

Choisis
L'introduction le système
du Thunk permet d’exploitation
de découpler(windows, linux,
l'interface macOS)
utilisateur de la logique d'infrastructure. On observe une
abstraction à trois niveaux :
[Link] sous Windows
(Abstraction
Étapes : de l'UI) : Il devient agnostique des services techniques et ne communique qu'avec l'action
asynchrone5.(le Thunk).
Définir le mot de passe du super-utilisateur postgres
1. Lancer le fichier .exe
Le Thunk (Logique d'Orchestration) : Il centralise l'intelligence métier
- Note-le et(important
bien coordonnepourles appelspgAdmin,
PostGIS, aux différents
2. Cliquer sur Next services.
TypeORM…)

3. Choisir le dossier d’installation (laisser par défaut) - Port : 5432 AsyncStorage)

(par défaut, ne pas
Les Services (Abstraction Technique) : Ils isolent les outils tiers (Axios, duchanger)
reste de l'application,
facilitant ainsi: toute maintenance
4. Sélectionner les composants (recommandé) évolutive.
- Locale : Default

- PostgreSQL Server - Install → Finish

- pgAdmin 4

- Command Line Tools

NestJs : PostgreSQL avec TypeORM
Etape 1 : Installer les dépendances nécessaires
installer les paquets nécessaires pour TypeORM et PostgreSQL

npm install
L'introduction @nestjs/typeorm
du Thunk typeorml'interface
permet de découpler pg utilisateur de la logique d'infrastructure. On observe une
abstraction à trois niveaux :
Etape 2 : Configurer TypeORM :
configurer la connexion à la base de données et déclarer les entités.
Le Hook (Abstraction de l'UI) : Il devient agnostique des services techniques et ne communique qu'avec l'action
asynchrone (le Thunk).
[Link] configure la connexion
Le Thunk (Logique d'Orchestration) : Il centralise l'intelligence métier
à la base deetdonnées
coordonne les être
et doit appels aux différents
importé une seule
[Link] dans le module racine de l’application.

Les Services (Abstraction Technique) : Ils isolent les outils tiers (Axios, AsyncStorage) du reste de l'application,
facilitant ainsi toute maintenance évolutive.
l’option synchronize met automatiquement à jour
le schéma de la base de données à partir des
entités. Elle est utile en phase de développement,
mais dangereuse en environnement de production.
 NestJs : TypeORM
Etape 3 : Créer une Entity

Etape 4: Importer l’Entity dans son Module

Rendre l’entité exploitable via un Repository,
L'introduction du Thunk permet de découpler l'interface utilisateurpuisdel’utiliser
lRendre l’entité
dans exploitable via un Repository,
un service
puis l’utiliser dans un servicea logique d'infrastructure. On observe une abstraction à trois niveaux :

Le Hook (Abstraction de l'UI) : Il devient agnostique des services techniques et ne communique qu'avec l'action
asynchrone (le Thunk).

Le Thunk (Logique d'Orchestration) : Il centralise l'intelligence métier et coordonne les appels aux différents
services.

Les Services (Abstraction Technique) : Ils isolent les outils tiers (Axios, AsyncStorage) du reste de l'application,
facilitant ainsi toute maintenance évolutive.

forFeature([User]) : Active le repository

Un module peut contenir plusieurs entités,
(Repository<User>) d’une entité dans un module
tant qu’elles appartiennent au même domaine
métier
NestJs : TypeORM
Etape 5: Injection du Repository
Injecter le repository dans un service et implémenter les premières méthodes CRUD

- @InjectRepository(User)
L'introduction du Thunk permet de découpler l'interface utilisateur : demande
de la logique d'infrastructure. à NestJS
On observe une
le repository
abstraction à trois niveaux : activé

- Repository<User>
Le Hook (Abstraction de l'UI) : Il devient agnostique des services techniques et ne est l’API CRUD
communique fourniel'action
qu'avec par
TypeORM
asynchrone (le Thunk).

- Lemétier
Le Thunk (Logique d'Orchestration) : Il centralise l'intelligence service
et est le seul endroit
coordonne qui parle
les appels à la DB
aux différents
services.

Les Services (Abstraction Technique) : Ils isolent les outils tiers (Axios, AsyncStorage) du reste de l'application,
Étape 6 — Écrire les méthodes facilitant
CRUD deainsi toute maintenance évolutive.
base
- create() → crée l’objet (mémoire)
- save() → INSERT/UPDATE
- findOne() → SELECT
- find() → SELECT *
NestJs : Les relations TypeORM
Objectif

Relier des objets entre eux comme dans le monde réel.

Relation Signification
L'introduction du Thunk permet de découpler l'interface utilisateur de la logique d'infrastructure. On observe une
Exemples réels abstraction à trois OneToOne
niveaux : 1↔1

Le- Hook (Abstraction

Un User de l'UI) : IlAccounts
possède plusieurs devient agnostique des services techniques et ne communique
OneToMany 1→N qu'avec l'action
asynchrone (le Thunk).
- Un Account contient plusieurs Transactions ManyToOne N→1
Le Thunk (Logique d'Orchestration) : Il centralise l'intelligence métier et coordonne les appels aux différents
- Une Transaction appartient à un seul Account [Link] N↔N

Les Services (Abstraction Technique) : Ils isolent les outils tiers (Axios, AsyncStorage) du reste de l'application,
facilitant ainsi toute maintenance évolutive.
Les relations permettent de modéliser ces liens
NestJs : Les relations TypeORM Relation Signification
Relation OneToMany / ManyToOne (la plus utilisée) OneToOne 1↔1
Exemple métier OneToMany 1→N
L'introduction dupeut
- Un User Thunk
avoirpermet
plusieursde découpler l'interface utilisateur de la logique d'infrastructure. On observe une
Accounts
ManyToOne N→1
- Un Account appartient à un seul User abstraction à trois niveaux :
@OneToMany prend deux fonctions callback : ManyToMany N↔N
Le Hook (Abstraction de l'UI) : Il devient agnostique des services techniques et ne communique qu'avec l'action
- la première précise l’entité du côté Many asynchrone (le Thunk).

- la Thunk
Le deuxième précise la
(Logique propriété inverse :qui
d'Orchestration) pointe vers le
Il centralise One
l'intelligence métier et coordonne les appels aux différents
services.
@OneToMany( () => Account, (account) => [Link], {
cascade: true,})
Les Services
accounts: (Abstraction Technique) : Ils isolent les outils tiers (Axios, AsyncStorage) du reste de l'application,
Account[];
facilitant ainsi toute maintenance évolutive.
@ManyToOne( () => user, (user) => [Link])

user: User;

Un User possède plusieurs Account,

et chaque Account référence son User via la propriété user.
Introduction à [Link]
[Link] (souvent appelé simplement React) est une bibliothèque JavaScript populaire et open-source utilisée pour
construire des interfaces utilisateur (UI), principalement pour des applications à page unique (SPA - Single Page
Applications). Développée par Facebook (maintenant Meta), elle est maintenue par Facebook et une large communauté de
développeurs. React permet aux développeurs de créer des applications web rapides, évolutives et faciles à maintenir, avec
un accent particulier sur le rendu des interfaces utilisateur.

const jsonString
Principales caractéristiques = '{"name":
de [Link] : "Alice", "age": 25, "isAdmin": false}';
const userObject = [Link](jsonString);
- Architecture basée sur des composants : React
utilise une architecture basée sur des composants, ce
[Link]([Link]); // Alice
qui signifie que l'interface utilisateur est divisée en
[Link]([Link]); // 25
petites unités réutilisables appelées composants.
Chaque composant contient sa propre logique, son
rendu et son état. Cela facilite la gestion et l’évolution
des applications.

function Greeting() {
return <h1>Bonjour, le monde !</h1>;
}

3
Configuration et Installation d'un Projet React
Prérequis :
- Installer [Link]
- Vérifier l'installation avec les commandes suivantes :
node -v
npm -v
Création d'un projet React:
npx create-react-app traffic-control
cd traffic-control
npm start

Structure du projet généré :

- public/ : Contient [Link] et les fichiers statiques.

- src/ : Contient le code source React.
- node_modules/ : Bibliothèques installées via npm.
- [Link] : Liste des dépendances et scripts de
gestion du projet.

3
React Component
- Un composant React est une fonction ou une
classe JavaScript qui :
- Accepte des props (propriétés) en entrée.
- Retourne un élément React (écrit généralement
en JSX), qui définit la structure de l'interface
utilisateur :

§ une fonction java script : Statlss Component

//[Link]/skills/badges/
§ une classe héritant de la classe
[Link] : Statful Component

Un composant React est définit par :

§ l’état du composant (Component State) qui

représente le modèle
§ le comportement ( Behaviour ou Controller)
§ Structure de la vue du composant ( View )

94
ReactJS : Java Script XML (JSX)
- JSX (JavaScript XML) est une extension de syntaxe qui permet
d'écrire du code HTML directem ent dans du JavaS cr ipt .
Cependant, le navigateur ne comprend pas JSX, il doit donc être
transformé en JavaScript avant d’être exécuté import React from 'react';

- JSX ressemble à du HTML, mais c'est du JavaScript. Les balises

function App() {
comme <div> et <h1> sont en réalité des éléments React créés en
return (
arrière-plan.
<div>
<h1>Welcome To React Tutorial</h1>
</div>
- Chaque balise en JS X ( com m e < h1> ou < div> ) doit êt r e );
correctement fermée, y compris celles qui se ferment }
automatiquement comme <img />.
export default App;
- Tous les éléments retournés doivent être contenus dans un seul
parent (par exemple, le <div> ici).

- App est une fonction qui retourne l'interface utilisateur (UI). Elle est
exportée afin de pouvoir être utilisée ailleurs.

- L'importation de React avec import React from 'react'; est

nécessaire pour utiliser JSX, car JSX est transformé en JavaScript
grâce à React. 3
React Component
- Le moteur de rendu JSX est une partie
essentielle de React, qui transforme le
code JSX en instructions
compréhensibles par le moteur
JavaScript pour créer et manipuler le
DOM (Document Object Model).

- React utilise Babel, un transpilateur

JavaScript, pour convertir JSX //[Link]/skills/badges/
en
JavaScript standard.

- Le moteur de React génère un DOM

virtuel qui sera transformé et
synchroniser avec le DOM réel du
Navigateur.

- Le Virtual DOM optimise les

changements à apporter au niveau du
browser DOM. Ce qui lui permet
d’accélérer l’aspect réactif du rendu.
96
React Components : Virtual DOM
- Lorsqu’un élément change, le navigateur
doit recalculer la mise en page (reflow)
et redessiner (repaint) l’ensemble des
éléments affectés.

- Cela peut entraîner un effet en cascade,

où une modification sur un élément peut
impacter plusieurs autres éléments.

- Modifier plusieurs éléments un par un

entraîne de nombreux accès au DOM, ce
qui ralentit l’application.

- Contrairement à un simple objet

JavaScript en mémoire, le DOM est une
interface complexe gérée par le
navigateur, ce qui le rend plus lent à
modifie

[Link]
3
Premier Démo ReactJS : Todo List
Objectif:
Dans cette démo, nous allons créer une application de gestion de tâches ("Todo List") en utilisant ReactJS.
L'objectif est de comprendre les concepts fondamentaux de React tels que les composants, l'état (state), les
événements, et l'affichage dynamique.
Instructions :

1. Créer un composant TodoApp qui sera le composant principal de l'application.

2. Ajouter un état todos dans le composant principal pour stocker la liste des tâches.

[Link]éer un formulaire d'ajout de tâche avec un champ de texte et un bouton pour ajouter une nouvelle tâche à
la liste.

4. Afficher la liste des tâches sous forme d'éléments HTML dans une liste non ordonnée.

5. Ajouter un bouton "Supprimer" à chaque tâche pour permettre à l'utilisateur de supprimer une tâche.

6. Implémenter une fonctionnalité pour marquer une tâche comme terminée (en modifiant le style ou en
ajoutant une case à cocher).

3
ReactJS : ES6 array methods
Nouvelles méthodes des tableaux avec ES6

- Avec ES6, de nouvelles méthodes puissantes ont été introduites pour rendre la manipulation des tableaux plus facile et
plus fonctionnelle.
- Ces méthodes permettent de modifier, itérer et transformer les tableaux de manière concise et élégante.

map() : Créer un nouveau tableau avec des éléments const FruitList = [

transformés 'Banana',
'Avocado',
- La méthode map() crée un nouveau tableau avec les 'Strawberries',
résultats de l'appel d'une fonction pour chaque élément du 'Orange'
tableau. ];

- Ne modifie pas le tableau original function Examples() {

return (
<ul>
const numbers = [1, 2, 3, 4]; {[Link]((fruit, index) => (
const doubled = [Link](num => num * <li key={index}>{fruit}</li>
2); ))}
[Link](doubled); // [2, 4, 6, 8] </ul>
);
}
export default Examples;

[Link]
3
ReactJS : ES6 array methods
Nouvelles méthodes des tableaux avec ES6
- Avec ES6, de nouvelles méthodes puissantes ont été introduites pour rendre la manipulation des tableaux plus facile et
plus fonctionnelle.
- Ces méthodes permettent de modifier, itérer et transformer les tableaux de manière concise et élégante.

map() : Créer un nouveau tableau avec des filter() : Créer un tableau avec des éléments filtrés
éléments transformés - La méthode filter() crée un nouveau tableau avec les
- La méthode map() crée un nouveau tableau avec éléments qui satisfont la condition fournie.
les résultats de l'appel d'une fonction pour chaque - Les éléments qui ne passent pas le test sont simplement
élément du tableau. ignorés.

- Ne modifie pas le tableau original

const numbers = [1, 2, 3, 4]; const numbers = [1, 2, 3, 4];

const doubled = [Link](num => num * 2); const evenNumbers = [Link](num => num % 2
[Link](doubled); === 0);
// [2, 4, 6, 8] [Link](evenNumbers); // [2, 4]

3
ReactJS : ES6 array methods
Nouvelles méthodes des tableaux avec ES6
- Avec ES6, de nouvelles méthodes puissantes ont été introduites pour rendre la manipulation des tableaux plus facile et
plus fonctionnelle.
- Ces méthodes permettent de modifier, itérer et transformer les tableaux de manière concise et élégante.

splice() : Ajouter ou supprimer des éléments à un concat() : Fusionner deux tableaux

tableau
- La méthode splice() permet de supprimer, ajouter ou - La méthode concat() permet de fusionner plusieurs
remplacer des éléments dans un tableau. tableaux en un seul.
- Modifie le tableau original et renvoie les éléments - Retourne un nouveau tableau sans modifier les tableaux
supprimés. originaux.
[Link](start, deleteCount, item1, item2, ...)

const numbers = [1, 2, 3, 4, 5]; const array1 = [1, 2, 3];

[Link](2, 2, 6, 7); const array2 = [4, 5, 6];
// À partir de l'index 2, supprime 2 éléments et const merged = [Link](array2);
ajoute 6 et 7 [Link](merged); // [1, 2, 3, 4, 5, 6]
[Link](numbers); // [1, 2, 6, 7, 5]

const fruits = ['Pomme', 'Banane', 'Cerise'];

[Link]([Link]('Banane')); // true
[Link]([Link]('Mangue')); // false
3
ReactJS : ES6 array methods
Nouvelles méthodes des tableaux avec ES6
- Avec ES6, de nouvelles méthodes puissantes ont été introduites pour rendre la manipulation des tableaux plus facile et
plus fonctionnelle.
- Ces méthodes permettent de modifier, itérer et transformer les tableaux de manière concise et élégante.

splice() : Ajouter ou supprimer des éléments à un concat() : Fusionner deux tableaux

tableau
- La méthode splice() permet de supprimer, ajouter ou - La méthode concat() permet de fusionner plusieurs
remplacer des éléments dans un tableau. tableaux en un seul.
- Modifie le tableau original et renvoie les éléments - Retourne un nouveau tableau sans modifier les tableaux
supprimés. originaux.
[Link](start, deleteCount, item1, item2, ...)

const numbers = [1, 2, 3, 4, 5]; const array1 = [1, 2, 3];

[Link](2, 2, 6, 7); const array2 = [4, 5, 6];
// À partir de l'index 2, supprime 2 éléments et const merged = [Link](array2);
ajoute 6 et 7 [Link](merged); // [1, 2, 3, 4, 5, 6]
[Link](numbers); // [1, 2, 6, 7, 5]

const fruits = ['Pomme', 'Banane', 'Cerise'];

[Link]([Link]('Banane')); // true
[Link]([Link]('Mangue')); // false
3
ReactJS : Class based components
- Utilisent la syntaxe ES6 (class) class Counter extends Component {
constructor(props) {
- Doivent hériter de [Link] super(props);
// Initialisation de l'état local basé sur les props
- Utilisent un constructeur pour gérer l'état (state) [Link] = {
// `initialCount` provient des props
- Accèdent aux props via [Link] count: [Link],
};
Exemple : }
increment = () => {
[Link]({ count: [Link] + 1 });
Le composant « Counter» utilise le state interne pour
};
gérer l'état du compteur et reçoit la valeur initiale via les
render() {
props.
return (
<div>
[Link]({ key1: value1, key2: value2, ... }); <p>Compteur: {[Link]}</p>
<button onClick={[Link]}>Incrémenter</button>
[Link]((prevState, props) => ({ key1: newValue1})); </div>
);
}
}
export default Counter;
3
ReactJS : Le Cycle de Vie des Composants
Les composants de classe ont des méthodes du cycle de vie qui nous permettent de nous connecter à
des étapes spécifiques du cycle de vie du composant.

Montage (Mounting) :
- constructor(): Appelé lors de la création du composant.
- componentDidMount(): Appelé après que le composant soit ajouté au DOM (initialisation).

componentDidMount() {
[Link]("Composant monté !");
}

Mise à Jour (Updating) :

- shouldComponentUpdate(): Détermine si le composant doit se ré-render lorsque son état ou
ses props changent.
- componentDidUpdate(): Appelé après que le composant ait été mis à jour (re-rendu).

componentDidUpdate(prevProps, prevState) {
[Link]("Composant mis à jour !");
}
3
ReactJS : Le Cycle de Vie des Composants
Démontée (Unmounting) :

- componentWillUnmount(): Appelé juste avant que le composant ne soit retiré du DOM. Utile
pour effectuer des nettoyages.

componentWillUnmount() {
[Link]("Composant démonté !");
}

Demo pratique

3
ReactJS : Les Composants Fonctionnels
Composant Fonctionnel : Un composant fonctionnel est une fonction JavaScript qui prend des props en
entrée et retourne des éléments React.

import React from 'react';

const MyComponent = (props) => {

return <div>Hello, {[Link]}!</div>;
};

export default MyComponent;

3
ReactJS : Le Cycle de Vie dans CF
Depuis React 16.8, les Hooks permettent aux composants fonctionnels de gérer leur état et d'utiliser des effets secondaires,
comme les composants de classe. Cela remplace la gestion du cycle de vie dans les composants fonctionnels.

Les Hooks principaux :

- useState : Gère l'état dans les composants fonctionnels.

- useEffect : Gère les effets secondaires, remplaçant des méthodes comme componentDidMount,
componentDidUpdate, et componentWillUnmount.

Mounting (Montage): const ExampleComponent = () => {

const [count, setCount] = useState(0);
useEffect avec tableau de dépendances vide [] : // L'équivalent de componentDidMount
Agit comme componentDidMount, appelé une useEffect(() => {
fois après le montage. [Link]('Composant monté !');
},
[]); // Tableau vide signifie que cela ne se produit
qu'une fois (montée)

return (
<div>
</div>
);
};
3
ReactJS : Le Cycle de Vie dans CF
Updating (Mise à jour)
useEffect avec dépendances : Agit comme componentDidUpdate. Il se déclenche après chaque mise
à jour où les dépendances spécifiées changent.
useEffect(() => {
[Link]('Le compteur a changé');
[Link] = `Compteur: ${count}`;
}, [count]); // Se déclenche lorsque `count` change

Unmounting (Démontage)
Retour de la fonction de nettoyage dans useEffect : Agit comme componentWillUnmount,
permettant de nettoyer les effets secondaires.
useEffect(() => {
[Link]('Composant monté !');
// Retour de la fonction de nettoyage (équivalent de componentWillUnmount)
return () => {
[Link]('Composant démonté !');
};
}, []); // Cela se déclenche une seule fois, au démontage

componentDidMount  useEffect(() => {...}, [])

componentDidUpdate  useEffect(() => {...}, [dep])
componentWillUnmount useEffect(() => { return () => {...}; }, [])
3
ReactJS : UseRef Hook
Le hook useRef est utilisé pour garder une référence mutable à un élément du DOM ou une valeur qui persiste à travers les
re-rendus.
Contrairement à useState, useRef ne provoque pas un re-rendu lorsqu'il est mis à jour.
Utilisations principales :

1. Accéder à un élément DOM (par exemple, un input ou une image).

2. Stocker une valeur persistante sans déclencher de re-rendu (par exemple, une valeur de compteur).

const ref = useRef(initialValue);

- initialValue: La valeur initiale de la référence (peut être null ou toute autre valeur).
- [Link]: C'est la propriété qui contient la référence. Elle est modifiable sans provoquer un re-rendu.
function FocusInput() {
const inputRef = useRef(null);
const handleFocus = () => {
[Link](); // Utilisation de useRef pour donner le focus à l'input
};
return (
<div>
<input ref={inputRef} type="text" placeholder="Cliquez sur le bouton pour focus" />
<button onClick={handleFocus}>Donner le focus à l'input</button>
</div>
);} 3
Introduction aux APIs
Application Programming Interface (API) est un ensemble de règles et de protocoles permettant à différents logiciels ou
applications de communiquer entre eux. Elle définit les méthodes et les outils que les programmeurs peuvent utiliser pour
intégrer des fonctionnalités spécifiques dans leurs propres applications sans avoir à recréer ces fonctionnalités à partir de zéro.

- Une API sert de pont entre différentes applications ou services, permettant d'envoyer des requêtes, d'obtenir des
réponses et d'interagir de manière fluide avec d'autres systèmes.

- Les API sont couramment utilisées dans le développement d'applications mobiles, web, et de systèmes logiciels afin de
simplifier les tâches et d'améliorer l'interopérabilité entre différents systèmes.
Pourquoi le développement des APIs ?

Permettent à un logiciel d'exposer ses fonctionnalités pour être

utilisées par d'autres logiciels( ex : Maps API, Météo API, etc.)

Facilitent la réutilisation de la logique applicative pour créer

différents logiciels personnalisés (Ex: PayPal).

Développent des APIs ? Permettent de réutiliser la logique applicative sur différentes

plateformes.

Facilitent la communication entre le client et le serveur

Permettent de tester les applications plus rapidement, avec plus

de précision.
Les types d’APIs
1. API Web : Est une interface accessible via HTTP/HTTPS qui permet à différentes applications de communiquer sur
Internet. Ces API sont généralement utilisées pour interagir avec des services externes ou des systèmes distants, souvent en
utilisant des formats de données comme JSON ou XML.
Exemple :
Imaginons une API Web qui vous permet de récupérer des informations météorologiques pour une ville donnée.

URL de l'API : [Link]

Méthode HTTP : GET
Exemple de requête : GET [Link]
Response :
{
"weather": [
{
"main": "Clear",
"description": "clear sky"
}
],
"main": {
"temp": 289.92,
"pressure": 1010,
"humidity": 76
},
"name": "Paris"
}
3
Les types d’APIs
2. API Locales : est une API qui fonctionne sur le même système ou serveur que l'application qui la consomme. Elle permet
à une application de communiquer avec elle-même ou avec d'autres services locaux sur la même machine ou dans un
environnement contrôlé. Ces APIs sont souvent utilisées dans des applications de bureau ou dans des systèmes embarqués.
Exemple :
Imaginons une application de gestion des feux de signalisation dans une ville marocaine, par exemple à Rabat, qui
expose une API locale pour interagir avec le système de feux de circulation.

URL de l'API : [Link]

Méthode HTTP : POST

Exemple de requête : POST [Link]

Body : {
"intersection": "Avenue Mohammed V & Rue Al Quods",
"status": "green"
}
Réponse JSON :

{
"message": "Traffic light updated successfully",
"status": "green"
}
3
RE ST API
On distingue plusieurs types d’API Web selon leur architecture et leur mode de communication.
1. API REST (Representational State Transfer): est un type d’API web qui suit les principes de l’architecture REST.
Elle permet aux applications de communiquer entre elles via des requêtes HTTP en utilisant des endpoints (URL
spécifiques) pour accéder et manipuler des ressources.

Principes fondamentaux de REST:

- Stateless : Chaque requête est indépendante, le serveur ne conserve pas l’état du client.
- Utilisation le Protocol HTTP : REST utilise les méthodes standards du protocole HTTP :
- GET : récupérer des données
- POST : créer une nouvelle ressource
- PUT : mettre à jour une ressource existante
- DELETE : supprimer une ressource
- Format des données : REST utilise principalement JSON (mais peut aussi supporter XML).
- Architecture basée sur les ressources : Chaque ressource est identifiée par une URL unique.

3
Stateful vs Stateless Architecture
Dans une architecture stateful, le serveur conserve une trace de l’état ou des informations de session de chaque client
pendant toute la durée de la communication. Cela permet au serveur de se souvenir des requêtes précédentes, de maintenir
des sessions utilisateur et de suivre l’état de l’application au fil du temps. Les informations de session peuvent être stockées
dans la mémoire du serveur, une base de données, ou d'autres mécanismes persistants.

Dans une architecture Stateless, le serveur ne stocke aucune information de session client entre les requêtes. Chaque
requête envoyée par le client est traitée comme une transaction indépendante, sans dépendance aux interactions précédentes.
Les architectures Stateless sont conçues pour être plus évolutives et tolérantes aux pannes, car elles ne nécessitent pas de
ressources serveur pour conserver l’état du client.
Rest API
Les REST APIs respectent la notion de stateless architecture en appliquant les principes suivants :.

- Aucune session stockée côté serveur : le serveur ne conserve aucune information sur l’état du client entre les
requêtes. Chaque requête doit contenir toutes les informations nécessaires pour être traitée indépendamment.

Exemple: GET /users/123

Authorization: Bearer <token>

- Chaque requête est indépendante : Les requêtes envoyées au serveur REST doivent être autonomes. Cela signifie
que le serveur ne se souvient pas des requêtes précédentes et ne stocke pas d’état temporaire entre elles.

Exemple: GET /orders?userId=123

Authorization: Bearer <token>

- Les données de session sont gérées côté client : Dans une architecture REST stateless, si un état ou une session
est nécessaire, c'est au client de le gérer et de l'envoyer à chaque requête.

POST /checkout
Exemple: Content-Type: application/json
Authorization: Bearer <token>
{"cart": [
{ "productId": 1, "quantity": 2 },
{ "productId": 5, "quantity": 1 }]} 3
Introduction aux API Web et Fetch API
fetch est une fonction native de JavaScript permettant de faire des requêtes HTTP (GET, POST, PUT, DELETE, etc.) pour
récupérer ou envoyer des données entre le client (navigateur) et un serveur. fetch est basée sur des promesses et remplace
l'ancienne méthode XMLHttpRequest.

Pourquoi utiliser fetch ?

- Plus moderne et plus simple à utiliser que XMLHttpRequest.

- Supporte les promesses.
- Permet de récupérer facilement des données à partir d'API REST.
- Prise en charge nativement dans tous les navigateurs modernes.

fetch(url, options)
.then(response => [Link]()) // Convertit la réponse en JSON
.then(data => [Link](data)) // Utilise les données
.catch(error => [Link]('Erreur:', error)); // Gère les erreurs

url : L'URL à laquelle envoyer la requête (API, fichier, etc.).

options : Paramètres de la requête (méthode, en-têtes, corps de la requête, etc.) – optionnel.

3
Introduction aux API Web et Fetch API
Exemple Simple d'utilisation de fetch

fetch('[Link]
.then(response => {
if (![Link]) { // Vérifie si la réponse est correcte
throw new Error('Erreur de réseau');
}
return [Link](); // Convertir en JSON
})
.then(data => [Link](data)) // Afficher les données
.catch(error => [Link]('Erreur:', error)); // Capturer les
erreurs