Groupe 3
JAVASCRIPT
AVANCE
Partie 3 du cours de JavaScript
Dirigé par :
[Link] MBONGO ESSINGONE Ghandy Steeve
AND
EME
MEMBRES DU
MBO
Joha
ne L i dv
ige GROUPE VAS S A L ay
USS
ENG
UI M
BOU
AL A
01 BIGN
OU M BA
te
D I
t
02
Jacq a de
ues Bern o reil
03
D an r B
MBA is Ja nv i e
NZA
H OU M D OU M
Jasm HO
04
i ne E
sme GNI
I HA
NDJA
NTC
ra l d
a 05 NG HO U MOU KA
HOU
AN E U BOUE
06
mm MO
anue nne
o
07
l li e Ver
PLAN
Introduction
DETAILLE
1. Fonctions Avancées 2. Programmation Asynchrone
1.1. Les Closures 2.1. setTimeout et setInterval
1.2. Fonctions de rappel (Callbacks) 2.2. Les Promesses (Promise)
1.3. Fonctions récursives 2.3. Async/Await
3. Gestion des Erreurs 4. Manipulation Avancée des
3.1. Le Bloc try...catch Objets
3.2. Gestion des erreurs dans les 4.1. Prototypes et Héritage
Promesses et Async/Await 4.2. Méthodes Statique et
d’Instance
4.3. [Link], [Link]
Conclusion
et [Link]
INTRODUCTI
ON
JavaScript est un langage de programmation utilisé principalement pour créer des
interactions sur les sites web, comprendre les notions avancées permettra de mieux
organiser le code et d’aborder des sujets comme l’asynchrone ou l’héritage. Nous allons
explorer :
[Link] fonctions avancées (closures, callbacks, fonctions récursives)
[Link] programmation asynchrone (setTimeout, setInterval, Promesses, Async/Await)
[Link] gestion des erreurs (try...catch, erreurs dans les promesses et async/await)
[Link] manipulation avancée des objets (prototypes, héritage, méthodes statiques,
[Link], etc.)
VS
1. Fonctions Avancées
Les fonctions avancées en JavaScript permettent
d'améliorer la modularité et l'efficacité du code.
Elles incluent :
1. Fonctions Avancées
VS 1.1 LES CLOSURES
Concept
Une closure est une fonction qui « se souvient » de
l’environnement dans lequel elle a été créée, même
après que la fonction parente ait terminé son exécution.
Cela signifie que la fonction interne continue d’avoir
accès aux variables de la fonction externe.
Pourquoi c’est
utile ?
•Pour créer des variables « privées »
•Pour conserver un état entre plusieurs appels de
fonction
Explication
[Link] fonction createCounter déclare une variable count
initialisée à 0.
[Link] retourne une fonction anonyme qui, lorsqu’elle est
appelée, incrémente count et affiche sa valeur.
3.Même après la fin de l’exécution de createCounter, la
fonction retournée a toujours accès à la variable count grâce
à la closure.
1. Fonctions Avancées
VS 1.2 FONCTIONS DE RAPPELS(CALLBACKS)
Concept
Une fonction de rappel est une fonction que l’on passe
en argument à une autre fonction, pour qu’elle soit
exécutée à un moment précis (souvent après la fin d’un
traitement).
Pourquoi c’est
utile ?
•Pour exécuter du code après un événement ou une
opération (comme une lecture de fichier ou une réponse
d’un serveur).
•Pour éviter le « callback hell » en organisant le code de
façon modulaire. Explication
[Link] prend deux paramètres : une chaîne de caractères
(name) et une fonction (callback).
[Link] affiche « Bonjour » suivi du nom.
[Link], elle exécute la fonction de rappel, ici sayGoodbye,
qui affiche « Au revoir ! ».
1. Fonctions Avancées
VS 1.3 FONCTIONS RECURSIVES
Concept
Une fonction récursive s’appelle elle-même pour
résoudre un problème en le décomposant en sous-
problèmes plus simples.
Pourquoi c’est
utile ?
•Pour résoudre des problèmes qui se définissent de
manière récursive (par exemple, calculer une
factorielle, parcourir des structures de données comme
les arbres).
Explication pas à pas
1. La fonction factorielle vérifie d’abord si n vaut 0. Dans ce
cas, elle retourne 1 (cas de base qui arrête la récursion).
2. Sinon, elle retourne n multiplié par le résultat de
factorielle(n-1).
3. Pour n = 5, le calcul se décompose ainsi :
o factorielle(5) = 5 * factorielle(4)
o factorielle(4) = 4 * factorielle(3)
o … et ainsi de suite jusqu’à factorielle(0).
VS
2. Programmation Asynchrone
JavaScript est souvent utilisé dans des contextes où
certaines opérations (comme récupérer des données sur
le web) prennent du temps. La programmation
asynchrone permet d’exécuter du code sans bloquer
l’exécution globale.
2. Programmation Asynchrone
VS 2.1 setTimeout et setInterval
setTimeo
ut setInterv
Permet d’exécuter une fonction après un
certain délai.
al
Exemple Similaire à setTimeout, mais exécute la fonction à
intervalles réguliers..
Exemple
Explication
[Link] message "Début" s’affiche immédiatement.
[Link] planifie l’exécution de la fonction
anonyme après 2000 millisecondes (2 secondes). Explication
3."Fin" s’affiche avant le message retardé, montrant •La fonction est exécutée toutes les secondes.
que le code continue de s’exécuter pendant l’attente. •Après 5 exécutions, on arrête l’intervalle avec
clearInterval.
2. Programmation Asynchrone
VS 2.2 Les Promesses (Promise)
Concept
Une promesse est un objet qui représente une
opération asynchrone. Elle peut être dans l’un des trois
états :
•En attente (pending)
•Réussie (fulfilled)
•Échouée (rejected)
Pourquoi c’est utile ?
•Pour éviter des chaînes de callbacks et gérer le
code asynchrone de manière plus lisible.
Explication
[Link] fonction getData est déclarée avec async, ce qui permet
d’utiliser await à l’intérieur.
[Link] mot-clé await suspend l’exécution jusqu’à ce que la
promesse soit résolue (ici, après 2 secondes).
[Link] bloc try...catch est utilisé pour gérer d’éventuelles
erreurs pendant l’exécution asynchrone.
2. Programmation Asynchrone
VS 2.3 Async/Await
Concept
Async/Await est une syntaxe introduite pour simplifier la
gestion des promesses.
•Une fonction déclarée avec async retourne
automatiquement une promesse.
•L’opérateur await permet d’attendre que la promesse
soit résolue avant de continuer l’exécution du code.
Pourquoi c’est utile ?
•On écrit du code plus proche de la synchronisation
classique !
Explication
[Link] fonction fetchData retourne une nouvelle promesse.
2.À l’intérieur de la promesse, on simule une opération
asynchrone qui, après 2 secondes, appelle resolve pour
indiquer le succès.
[Link]() est utilisé pour traiter le résultat en cas de succès.
[Link]() permet de capturer les erreurs (si on avait utilisé
reject).
3. Gestion des Erreurs
La gestion des erreurs en JavaScript permet de prévenir
et traiter les bugs dans un programme.
3. Gestion des Erreurs
3.1 Bloc Try…Catch
Concept
try...catch permet d’essayer d’exécuter un
bloc de code et, en cas d’erreur, d’exécuter
un autre bloc pour gérer cette erreur.
Explication
[Link] bloc try contient du code qui pourrait lancer
une erreur.
[Link] une erreur est lancée, le bloc catch intercepte
l’erreur et permet de la traiter, par exemple en
affichant un message.
3. Gestion des Erreurs
3.1 Gestion des erreurs dans les Promesses et Async/Await
•Avec les promesses
Explication
•Dans les promesses, catch() est utilisé pour
attraper et gérer les erreurs.
•Avec async/await, on entoure l’appel avec •Avec Async/Await (utilisation de try...catch) :
try...catch pour capturer les erreurs de la promesse
rejetée.
4. Manipulation avancée des objets
Les objets sont au cœur de JavaScript et leur
manipulation avancée permet d’exploiter pleinement
leurs capacités.
4. Manipulation avancée des objets
4.1 Prototypes et Héritage
Concept
En JavaScript, presque tout est un objet. Les objets
peuvent hériter des propriétés et méthodes d’un
autre objet via ce que l’on appelle le prototype.
L’héritage par prototype permet de partager des
méthodes entre plusieurs objets sans les dupliquer.
Explication
[Link] fonction Person sert de constructeur pour créer des
objets avec un attribut name.
[Link] méthode sayHello est ajoutée à [Link], ce
qui signifie que tous les objets créés avec Person auront
accès à cette méthode.
4. Manipulation avancée des objets
4.2 Méthodes Statique et d’Instance
Concept
•Méthodes d’instance : Disponibles sur les instances
créées d’une classe.
•Méthodes statiques : Disponibles sur la classe elle-
même, et non sur ses instances.
Explication
Ici nous avons fait l’usage d’un exemple avec une classe
•[Link] peut être appelée directement sans créer
d’instance.
•Pour multiply, on doit d’abord créer une instance avec new
MathUtils().
4. Manipulation avancée des objets
4.3 [Link], [Link], [Link]
1. [Link]
Permet de créer un nouvel objet en utilisant un autre objet comme
prototype. Explication :
•child hérite de la méthode greet définie dans parent grâce au
prototype
2. [Link]
Permet de copier les propriétés d’un ou plusieurs objets source
dans un objet cible. Explication :
•Les propriétés de source sont copiées dans target.
3. [Link]
Permet de définir une propriété avec des attributs précis (par
exemple, si la propriété est modifiable ou non).
Explication :
Ici, [Link] est utilisé pour créer une propriété
prop avec une valeur fixe (42) et pour contrôler ses attributs.
CONCLUSION
Ce cours nous a permis de découvrir des concepts avancés de JavaScript de
manière détaillée :
•Les fonctions avancées pour organiser et réutiliser du code (closures, callbacks,
récursion)
•La programmation asynchrone pour gérer des opérations qui prennent du temps
(setTimeout, Promesses, Async/Await)
•La gestion des erreurs afin de rendre ton code plus robuste
•La manipulation avancée des objets pour créer des structures d’objets flexibles
et réutilisables
MERCII
I!