Traduit de Anglais vers Français - www.onlinedoctranslator.

com

Technologies JS & Programmation Mobile

Professeur Amal Ourdou

E-mail:a.ourdou@usms.ma

1
Comment se déroulera ce cours ?
Note finale = 50% Tech JS + 50% Mobile

Note Tech JS = 50 % Examen + 30 % Projet + 20 % TP

Note Mobile = 50 % Examen + 30 % Projet + 20 % TP

Individuel ou équipe de deux personnes maximum pour le Projet (le cahier des charges sera envoyé ultérieurement)

Github sera utilisé pour stocker vos TP (un dépôt avec chaque TP dans un dossier séparé)

2
Technologies JS
JavaScript avancé
Compréhension de base et avancée du fonctionnement de Node.js
Express JS
Manuscrit
Angulaire

3
Introduction
Comment ça marche ?

Le navigateur utilise uniquement la version vanilla V8 pour des raisons de sécurité (vous ne pouvez pas accéder aux systèmes de fichiers locaux)

4
Introduction
Installation de Node.JS :https://nodejs.org/fr

Vous pouvez utiliser soit :

Noeud REPL
Lire
Évaluer
Imprimer

Boucle

Exécution de code dans un fichier JavaScript en ligne de commande

5
Introduction
Notes annexes :

Node.js est un environnement d'exécution JS => vous pouvez l'utiliser pour bien plus que du code côté serveur (sans se limiter aux serveurs), par exemple des scripts utilitaires, des outils de création,

etc.

Node.js dans le développement Web :

Créer un serveur et écouter les requêtes entrantes Gérer les

requêtes, valider les entrées, se connecter aux bases de données

Renvoyer des réponses (html, json ...)

6
JavaScript
Qu'est-ce que JS

Histoire

JS de base

JS avancé

7
Qu'est-ce que JS

JavaScript (JS) est un langage de programmation interprété léger (ou compilé juste à temps). Bien qu'il soit surtout connu comme langage de script pour les
pages Web, de nombreux environnements non liés aux navigateurs l'utilisent également, comme Node.js. JavaScript est un langage dynamique basé sur des
prototypes, multi-paradigmes, monothread, prenant en charge les styles orientés objet.

8
Spécification du langage ECMAScript
ECMA : Association européenne des fabricants d'ordinateurs

ECMA-262

Il s'agit d'une norme publiée par Ecma International. Elle contient la spécification d'un langage de script à usage général.

Script ECMA

ECMAScript ou ES - est un langage de programmation à usage général, normalisé par ECMA International selon le
document ECMA-262.
Bien que ECMAScript soit inspiré de JavaScript, ce sont des langages de programmation différents et ECMAScript n'est pas la
spécification de JavaScript.

JavaScript

Un langage de script à usage général dont la norme est ECMAScript. .

En lisant la spécification ECMAScript, vous apprendrez à créer un langage de script. En lisant la documentation JavaScript, vous
apprendrez à utiliser un langage de script.

9
JavaScript
JavaScript, avec HTML et CSS, est l'une des technologies de base du World Wide Web. JavaScript

peut être utilisé pour créer des applications côté serveur

JavaScript est également utilisé dans le développement d'applications mobiles pour créer des applications multiplateformes pouvant fonctionner à la fois sur iOS et Android.

JavaScript est également utilisé pour créer des applications de bureau

JavaScript est le langage de programmation le plus populaire selon l'enquête 2021 sur les développeurs Stack Overflow

10
Histoire
JavaScript a été créé en mai 1995 en 10 jours par Brendan Eich. Eich travaillait chez Netscape et a implémenté JavaScript pour leur
navigateur Web, Netscape Navigator.

En 1996, JavaScript 1.0 est sorti

En 1997, ECMAScript 1 a été publié et JavaScript est devenu une norme ECMA (ECMA-262). En

1998, ECMAScript 2 a été publié et Netscape 42 a été publié avec JavaScript 1.3. En 1999,

ECMAScript 3 a été publié et Netscape 62 a été publié avec JavaScript 1.5. En 2008, ECMAScript 4

a été abandonné.

2009 ECMAScript 5 est sorti

2011 IE 9 a été le premier navigateur à prendre en charge ES5

2014 Prise en charge complète d'ES5 dans tous les navigateurs

2015 ECMAScript 6 a été publié

2018 Prise en charge complète d'ES6 dans tous les navigateurs*

* Internet Explorer 11 ne prend pas en charge ES6.

11
JavaScript évolue : ne détruisez pas le Web
Une idée qui revient parfois est de nettoyer JavaScript en supprimant les anciennes fonctionnalités et les bizarreries. Si l'attrait de cette idée est évident,

elle présente également des inconvénients importants.

Supposons que nous créions une nouvelle version de JavaScript qui n'est pas rétrocompatible et que nous corrigions tous ses défauts. Nous rencontrerions

alors quelques problèmes.

Alors, quelle est la solution ? L’approche choisie pour ES6 s’appelle « One JavaScript » :

Les nouvelles versions sont toujours entièrement rétrocompatibles (mais il peut parfois y avoir des nettoyages mineurs, à peine perceptibles).

Les anciennes fonctionnalités ne sont pas supprimées ni corrigées. Au lieu de cela, de meilleures versions sont introduites. Un exemple est la déclaration de

variables via let, qui est une version améliorée de var.

Si des aspects de la langue sont modifiés, cela se fait dans le cadre de nouvelles constructions syntaxiques. Autrement dit, vous y consentez implicitement.

Nouvelles fonctionnalités :https://github.com/tc39/proposals/blob/main/finished-proposals.md

12
Plateformes
Plateformes sur lesquelles JavaScript peut être utilisé :

Navigateur Web

Node.js

13
La structure des navigateurs et de Node.js

14
Structure des navigateurs et de Node.js
Les structures des deux plates-formes JavaScript, navigateur Web et Node.js, sont similaires

La couche fondamentale est constituée du moteur JavaScript et des fonctionnalités « de base » spécifiques à la plateforme.

Deux API sont hébergées sur cette fondation :

La bibliothèque standard JavaScript fait partie de JavaScript proprement dit et s'exécute sur le moteur.

L'API de la plateforme est également disponible à partir de JavaScript. Elle permet d'accéder à des fonctionnalités spécifiques à la plateforme. Par exemple :

Dans les navigateurs, vous devez utiliser l'API spécifique à la plate-forme si vous souhaitez faire quoi que ce soit en rapport avec l'interface

utilisateur : réagir aux clics de souris, lire des sons, etc.

Dans Node.js, l'API spécifique à la plateforme vous permet de lire et d'écrire des fichiers, de télécharger des données via HTTP, etc.

15
Notions de base

16
Commentaires

// commentaire sur une seule ligne

/*
Commenter avec

plusieurs lignes

*/

17
Valeurs

18
Valeurs primitives :

Elles sont passées par valeur : lorsque des valeurs primitives sont affectées à des variables ou passées à des fonctions, leur contenu est copié. Elles

sont comparées par valeur : lorsque deux valeurs primitives sont comparées, leur contenu est comparé.

19
Objets : Ce sont des éléments composés de données.

Ils sont passés par identité : lorsque des objets sont affectés à des variables ou passés à des fonctions, leurs identités (pensez aux pointeurs) sont
copiées.

On les compare par identité : lorsqu’on compare deux objets, on compare leurs identités.
L'identité d'un objet est comme un pointeur (ou une référence transparente) vers les données réelles de l'objet sur le tas (pensez à la mémoire
principale partagée d'un moteur JavaScript).

Deux manières courantes de créer des objets :

L'objet littéral commence et se termine par des accolades {}.

constanteobj = {

d'abord:"Jeanne",

dernier:"Biche",

};

Le littéral de tableau commence et se termine par des crochets [].

constantefruits = ["fraise","pomme"];

20
Objets:
Les deux opérateurs typeof et instanceof permettent de déterminer le type d'une valeur x donnée :

si(type dex ==='chaîne') ···

si(xinstance deTableau) ···

Conseil:Règle empirique : typeof est pour les valeurs primitives ; instanceof est pour les objets.

21
Connexion à la console
// Impression d'une valeur sur la sortie standard (un autre appel de méthode)

console.enregistrer("Bonjour!");

// Impression des informations d'erreur sur l'erreur standard

console.erreur(« Quelque chose s'est mal passé ! »);

22
Déclaration des variables

constante(ES6 - 2015) crée des liaisons de variables immuables : chaque variable doit être initialisée immédiatement et nous ne pouvons pas attribuer une valeur différente

ultérieurement.

Vous ne pouvez PAS :

Réaffecter une valeur constante,

Réaffecter un tableau de constantes,

Réaffecter un objet constant,

Mais vous POUVEZ :

Modifier les éléments du tableau constant,

modifier les propriétés de l'objet constant.

// Déclaration et initialisation de x (liaison immuable) :

constantex =8;

// Cela provoquerait une TypeError :

// x = 9;

23
Déclaration des variables

laisser((ES6 - 2015) crée des liaisons de variables mutables :

// Déclaration de y (liaison mutable) :

laisseret;

// Nous pouvons attribuer une valeur différente à y :

y =3*5;
// Déclaration et initialisation de z :

laisserz =3*5;

24
Déclaration des variables

Quand utiliser let, const, var

1. Déclarez toujours les variables

2. Utilisez toujours const si la valeur ne doit pas être modifiée

3. Utilisez toujours const si le type ne doit pas être modifié (tableaux et objets)

4. N'utilisez let que si vous ne pouvez pas utiliser const

5. N'utilisez var que si vous DEVEZ prendre en charge les anciens navigateurs.

25
Déclaration des variables

Toutes les variables JavaScript doivent être identifiées par des noms uniques. Ces noms uniques sont appelés identifiants. Les identifiants peuvent être des noms

courts (comme x et y) ou des noms plus descriptifs (age, sum, totalVolume). Les règles générales de construction des noms de variables (identifiants uniques) sont

les suivantes :

1. Les noms peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar.

2. Les noms doivent commencer par une lettre.

3. Les noms peuvent également commencer par $ et _ .

4. Les noms sont sensibles à la casse (y et Y sont des variables différentes).

5. Les mots réservés (comme les mots-clés JavaScript) ne peuvent pas être utilisés comme noms.

26
Le scoop d'une variable
La portée d'une variable est la région d'un programme où elle est accessible.

Pelle à blocs

{
laisserx =2;

}
// x ne peut PAS être utilisé ici

Variables déclarées avec levarle mot-clé ne peut PAS avoir de portée de bloc.

{
varx =2;

}
// x PEUT être utilisé ici

27
 Scoop local

// le code ici ne peut PAS utiliser carName

fonctionmaFonction() {
laissernom_voiture ="Volvo";

// le code ici PEUT utiliser carName

// le code ici ne peut PAS utiliser carName

Fonction pelle

fonctionmaFonction() {
laissernom_voiture ="Volvo";// Portée de la fonction

fonctionmaFonction() {

constantenom_voiture ="Volvo";// Portée de la fonction

28
 Variables JavaScript globales : une variable déclarée en dehors d’une fonction devient GLOBALE.

laissernom_voiture ="Volvo";

// le code ici peut utiliser carName

fonctionmaFonction() {
// le code ici peut également utiliser carName

29
Déclarations de fonctions

Fonction simple

// add1() a les paramètres a et b

fonctionajouter1(a, b) {

retoura + b;
}
// Appel de la fonction add1()

console.enregistrer(ajouter1(5,2));

Une déclaration de fonction est toujours exécutée lorsqu'elle entre dans sa portée, quel que soit son emplacement dans cette portée. Cela vous
permet d'appeler une fonction foo() avant qu'elle ne soit déclarée :

foo();// D'ACCORD

fonctionfoo() {

retour123;
}

30
 Expressions de fonctions fléchées

Les expressions de fonction fléchées sont utilisées notamment comme arguments d'appels de fonctions et d'appels de méthodes. Si vous déclarez une fonction via

const ou let, elle n'est pas activée prématurément. Dans l'exemple suivant, vous ne pouvez utiliser bar() qu'après sa déclaration.

// le corps est un bloc de code

constanteajouter2= (a, b) => {

retoura + b;
};
// Appel de la fonction add2(),

console.enregistrer(ajouter2(5,2));

// Equivalent à add2 : le corps est une expression

constanteajouter3= (a, b) => a + b;

Même si une fonction g() n'est pas activée prématurément, elle peut être appelée par une fonction précédente f() (dans la même portée) si l'on respecte
la règle suivante : f() doit être invoquée après la déclaration de g().

constantef= () =>g();
constanteg= () =>123;

// Nous appelons f() après que g() ait été déclaré

31
Objets
// Création d'un objet simple via un objet littéral
constanteobj = {

d'abord:"Jeanne",// propriété
dernier:"Biche",// propriété
obtenir le nom complet() {

// propriété (méthode)
retource.premier +" "+ce.dernier;
},
};

// Obtenir une valeur de propriété

console.enregistrer(obj.premier);// Jeanne

// Définition d'une valeur de propriété

obj.premier ="Janey";

// Appel de la méthode

console.enregistrer(objetobtenir le nom complet());// 'Janey Doe'

32
Tableaux

constantearr = ['un','b','c'];

arr. longueur // Renvoie le nombre d'éléments

arr.trier() // Trie le tableau

// Obtenir un élément de tableau

console.enregistrer(arr[1]);

// Définition d'un élément de tableau

arr[1] ='R';

// Ajout d'un élément à un tableau :

arr.pousser('d');

()//convertit un tableau en une chaîne de valeurs de tableau (séparées par des virgules)

populaire()// supprime le dernier élément d'un tableau et renvoie la valeur qui a été « extraite »
pousser()// ajoute un nouvel élément à un tableau (à la fin)

rejoindre()// joint tous les éléments du tableau dans une chaîne, t se comporte comme toString(), mais en plus vous pouvez spécifier le séparateur
changement()// supprime le premier élément du tableau et « décale » tous les autres éléments vers un index inférieur.

décaler()// ajoute un nouvel élément à un tableau (au début) et « décale » les éléments plus anciens
33
Cartes

Avant ES6, JavaScript n'avait pas de structure de données pour les dictionnaires. ES6 a apporté les Maps, qui sont des dictionnaires de valeurs arbitraires à

des valeurs arbitraires. Une instance de Map mappe des clés à des valeurs. Un mappage clé-valeur unique est appelé une entrée.

// Créer une carte

constantefruits =nouveauCarte([

["pommes",500],
["bananes",300],
["oranges",200]

]);
// Créer une carte
constantefruits =nouveauCarte();

// Définir les valeurs de la carte

fruits.ensemble("pommes",500);

fruits.ensemble("bananes",300);

fruits.ensemble("oranges",200);

fruits.obtenir("pommes");

fruits.taille;
fruits.supprimer("pommes");
34
fruits.clair();
// Lister toutes les entrées

laissertexte =" ";

pour(constantexdefruits.entrées()) {
texte += x;
}

// Lister toutes les clés

laissertexte =" ";

pour(constantexdefruits.clés()) {
texte += x;
}

// Lister toutes les valeurs

laissertexte =" ";

pour(constantexdefruits.valeurs()) {
texte += x;

35
Ensembles

Un ensemble JavaScript est une collection de valeurs uniques. Chaque valeur ne peut apparaître qu'une seule fois dans un ensemble. Un ensemble peut contenir n'importe quelle valeur de n'importe quel type de

données.

constantelettres =nouveauEnsemble(["un","b","c"]);

constantelettres =nouveauEnsemble();

// Ajouter des valeurs à l'ensemble

courrier.ajouter("un");

courrier.ajouter("b");

courrier.ajouter("c");

pour(constantexdecourrier.valeurs()) {
console.enregistrer(x);

courrier.pour chaque(x =>console.enregistrer(x));

// Lister toutes les entrées

laissertexte =" ";

lettres.forEach (fonction(valeur) {
texte += valeur;
})
36
Énoncé conditionnel :
si(condition1) {
// bloc de code à exécuter si la condition 1 est vraie

}sinon si(condition2) {
// bloc de code à exécuter si la condition1 est fausse et la condition2 est vraie
}autre{

// bloc de code à exécuter si la condition1 est fausse et la condition2 est fausse

}

changer(expression) {
casx:

// bloc de code
casser;
caset:

// bloc de code
casser;
défaut:

// bloc de code
}

37
Boucles

pour(laisserje =0; i < voitures.length; i++) {

texte += voitures[i] +"<br>";

constantepersonne = {nom de famille:"John",lnom:"Biche",âge:25};

laissertexte =" ";

pour(laisserxdanspersonne) {

texte += personne[x];

constantenombres = [45,4,9,16,25];

laissertexte =" ";

Nombres.pour chaque(maFonction);

fonctionmaFonction(valeur, index, tableau) {

txt += valeur;
}
38
constantevoitures = ["BMW","Volvo","Mini"];

laissertexte =" ";

pour(laisserxdevoitures) {
texte += x;

laisserlangue ="JavaScript";

laissertexte =" ";

pour(laisserxdelangue) {

texte += x;
}

39
alors que(je <10) {
texte +="Le numéro est"+ je;

je++;
}

faire{

texte +="Le numéro est"+ je;

je++;
}alors que(je <10);

40
Cours
ES6 a introduit des classes. Les classes peuvent être considérées comme une partition de l'objet de type unique de la spécification en sous-types.
Elles nous donnent plus de types que les 7 types limités de la spécification. Chaque classe est le type des objets qu'elle a créés.

classePersonne{
constructor(nom) {

ce.name = nom;
}
décrire() {

retour`Personne nommée${this.nom}`;
}
statiqueNoms de journaux(personnes) {

for (const personneof personnes) {

console.enregistrer(personne.nom);

}
}
}

41
class Employés'étendPerson {
constructor(nom, titre) {

super(nom);
this.titre = titre;
}
describe() {
return super.describe() +` (${this.titre})`;
}
}

const Jeanne =nouveauEmployé("Jeanne", « Directeur technique »);

console.log(Jeanne.describe());

42
Gestion des exceptions

function Exception lancée() {

jeter du neufErreur("Problème!");

function capturesException() {

essayer{

throwsException();
} attraper(err) {

console.log(message d'erreur);

}
}

essayer-enfinetessayer-attraper-enfinsont également pris en charge.

Le code à l’intérieur de la clause finally est toujours exécuté à la fin d’une instruction try, peu importe ce qui se passe dans le bloc try ou dans la
clause catch.

43
Avancé

44
Objets
Pouvoir créer des objets directement (sans classes) est l’un des points forts de JavaScript.

const monObjet = {// objet littéral

maPropriété: 1,

maMéthode() {

return 2;
},// virgule!

obtenirmonAccesseur() {

return this.maPropriété;
}, // comma!

ensemblemyAccessor(valeur) {

this.myProperty = valeur;
}, // la dernière virgule est facultative

};

45
Se propageant dans les objets :

La syntaxe de propagation peut être utilisée lorsque tous les éléments d'un objet ou d'un tableau doivent être inclus dans un nouveau tableau ou objet, ou doivent être

appliqués un par un dans la liste des arguments d'un appel de fonction. Il existe trois endroits distincts qui acceptent la syntaxe de propagation :

Liste des arguments de fonction (myFunction(a, ...iterableObj, b))

Littéraux de tableau ([1, ...iterableObj, '4', 'five', 6])

Littéraux d'objet ({ ...obj, key: 'value' })

const original = {
un: 1,

b: {
c: 3,
},
};

const copiemodifiée = {// La propagation (...) copie un objet « dans » un autre :

. . . original,// propagation
d: 4,
};

46
Bien que la syntaxe semble la même, elles ont une sémantique légèrement différente.

Seules les valeurs itérables, commeTableauand Chaîne ,peut être réparti dans des littéraux de tableau et des listes d'arguments. De nombreux objets ne sont pas itérables, y

compris tous les objets simples qui n'ont pas de méthode Symbol.iterator :

const obj = {touche1: "valeur1"};

const tableau = [...obj];// TypeError : obj n'est pas itérable

En revanche, la répartition dans les littéraux d'objet énumère les propriétés propres de la valeur. Pour les tableaux classiques, tous les indices sont des propriétés propres

énumérables, de sorte que les tableaux peuvent être répartis dans des objets.

const tableau = [1, 2, 3];

const obj = { ...tableau };// { 0: 1, 1: 2, 2: 3 }

Tousprimitifspeut être réparti dans des objets. Seules les chaînes ont des propriétés propres énumérables, et la répartition de quoi que ce soit d'autre ne crée

pas de propriétés sur le nouvel objet.

constanteobj = { ...vrai, ..."test", ...10};

// { '0': 't', '1': 'e', '2': 's', '3': 't' }

47
Nous pouvons utiliser la diffusion pour créer une copie d'un objet original :

constanteoriginal = {un:1,b: {soutenir:vrai} };

constantecopie = {...original};

Le premier niveau de copie est en réalité une copie : si nous modifions des propriétés à ce niveau, cela n’affecte pas l’original.
Cependant, les niveaux plus profonds ne sont pas copiés. Par exemple, la valeur de .b est partagée entre l'original et la copie. La modification de .b dans la copie la

modifie également dans l'original.

Les copies profondes d'objets (où tous les niveaux sont copiés) sont notoirement difficiles à réaliser de manière générique. Par conséquent, JavaScript ne

dispose pas d'une opération intégrée pour elles (pour l'instant). Si nous avons besoin d'une telle opération, nous devons l'implémenter nous-mêmes.

48
Prototypes
Les prototypes sont le seul mécanisme d'héritage de JavaScript : chaque objet possède un prototype qui est soit nul, soit un objet. Dans ce dernier
cas, l'objet hérite de toutes les propriétés du prototype.

Dans la console du navigateur, créez l'objet suivant

constantemonObjet = {

ville:"Casablanca",

saluer() {
console.enregistrer(`Salutations de${ce.ville}`);
},
};

monObjet.saluer();// Salutations de Casablanca

Que voyez-vous lorsque vous tapez le nom de l'objet suivi d'un point dans la console, commemonObjet.

49
Quelles sont ces propriétés supplémentaires et d’où viennent-elles ?

Chaque objet en JavaScript possède une propriété intégrée, appelée sonprototype. Le prototype est lui-même un objet, donc le prototype aura son
propre prototype, créant ce qu'on appelle unchaîne prototype . La chaîne se termine lorsque nous atteignons un prototype qui a null comme propre
prototype.

Lorsque vous essayez d'accéder à une propriété d'un objet : si la propriété ne peut pas être trouvée dans l'objet lui-même, la recherche de la propriété est effectuée dans

le prototype. Si la propriété ne peut toujours pas être trouvée, la recherche est effectuée dans le prototype du prototype, et ainsi de suite jusqu'à ce que la propriété soit

trouvée ou que la fin de la chaîne soit atteinte, auquel casindéfiniest retourné.

Ainsi, lorsque nous appelons myObject.toString(), le navigateur :

chercheà la chaînedansmonObjet
je ne le trouve pas là, alors je regarde dans l'objet prototype demonObjetpour
le trouve là et l'appelle.

La méthode recommandée pour obtenir le prototype d'un objet :

Objet.obtenirPrototypeOf(objet:Objet) :Objet

50
1. Expliquez maintenant ce qui se passe ici :

constantemaDate =nouveauDate();

laisserobjet = maDate;

faire{

objet =Objet.obtenirPrototypeOf(objet);

console.enregistrer(objet);

}alors que(objet);

2. Que se passe-t-il si vous définissez une propriété dans un objet, alors qu'une propriété portant le même nom est définie dans le prototype
de l'objet ?

51
Il existe différentes manières de définir le prototype d'un objet en JavaScript, et nous en décrirons ici deux : Object.create() et les
constructeurs.

Utilisation de Object.create :

LeObjet.create()La méthode crée un nouvel objet et vous permet de spécifier un objet qui sera utilisé comme prototype du nouvel
objet.

constantepersonnePrototype = {

saluer() {

console.enregistrer("Bonjour!");

},
};

constantecarl =Objet.créer(personnePrototype);
carl.saluer();// Bonjour!

Ici, nous créons un objetpersonnePrototype ,qui a unsaluer()méthode. Nous utilisons ensuiteObjet.create()pour créer un nouvel objet avec
personnePrototypecomme son prototype. Maintenant, nous pouvons appelersaluer()sur le nouvel objet, et le prototype fournit son

implémentation.
52
Utiliser un constructeur

En JavaScript, toutes les fonctions ont une propriété nomméeprototype .Lorsque vous appelez une fonction en tant que constructeur, cette propriété est définie

comme le prototype de l'objet nouvellement construit (par convention, dans la propriété nommée __proto__ ).

constantepersonnePrototype = {

saluer() {

console.enregistrer("Bonjour, je m'appelle${ce.nom}!`);
},
};

fonctionPersonne(nom) {
ce.name = nom;

Objet.attribuer(Personne.prototype, personnePrototype);

// ou
// Personne.prototype.greet = personnePrototype.greet;

constantemehdi =nouveauPersonne("Mehdi");

Mehdi.saluer();// Bonjour, je m'appelle Mehdi !

53
Les propriétés qui sont définies directement dans l'objet, comme le nom ici, sont appelées propriétés propres, et vous pouvez vérifier si une propriété est

une propriété propre à l'aide de la fonction statiqueObjet.hasOwn()méthode:

constanteoumaima =nouveauPersonne("Oumaima");

console.enregistrer(Objet.possède(oumaima,"nom"));// vrai
console.enregistrer(Objet.possède(oumaima,"saluer"));// FAUX

Remarque : vous pouvez également utiliser la méthode non statique Object.hasOwnProperty() ici, mais nous vous recommandons d'utiliser

Object.hasOwn() si vous le pouvez.

54
Cours
Les classes sont fondamentalement une syntaxe compacte pour la configuration de chaînes de prototypes. Sous le capot, les classes de JavaScript ne sont pas conventionnelles.

Mais c'est quelque chose que nous voyons rarement lorsque nous travaillons avec elles. Notez que nous n'avons pas besoin de classes pour créer des objets. Nous pouvons

également le faire via des littéraux d'objet.

classePersonne{
# prénom;// (UN)

constructor(prénom) {
this.#firstName = prénom;// (B)
}
décrire() {
retour`Personne nommée${this.#prénom}`;
}
statiqueextraire les noms(personnes) {

return personnes.carte(personne => personne.#firstName);

}
};const Tarzan =new Person(« Tarzan »);

[ES2022] champ privé .#firstName. Contrairement aux propriétés, les champs privés doivent être déclarés (ligne A) avant de pouvoir être utilisés
(ligne B). Un champ privé n'est accessible qu'à l'intérieur de la classe qui le déclare. Il n'est même pas accessible par les sous-classes.
55
Sous-classe :

class Employés'étendPerson {
constructor(prénom, titre) {

super(prénom);
this.titre = titre;// (C)
}
describe() {
return super.describe() +
` (${this.titre})`;

}
}

const Jeanne =new Employé('Jeanne',« Directeur technique »);

56
Programmation asynchrone

57
Asynchronous programming
Dans sa forme la plus basique, JS est un langage synchrone, bloquant et monothread

Synchrone
Si nous avons deux fonctions qui enregistrent des messages sur la console, le code s'exécute de haut en bas, avec une seule ligne exécutée à un

moment donné

Blocage
Quelle que soit la durée d'un processus précédent, les processus suivants ne démarreront pas tant que le premier n'est pas terminé.

Si la fonction A devait exécuter un bloc de code intensif, JS doit le terminer sans passer à la fonction B. Même si ce code
prend 10 secondes ou 1 minute
L'application Web s'exécute dans un navigateur et exécute un bloc de code intensif sans rendre le contrôle au
navigateur. Le navigateur peut sembler gelé.
Un seul thread
Un thread est simplement un processus que votre programme JS peut utiliser pour exécuter une tâche

Chaque thread ne peut effectuer qu'une seule tâche à la fois

JS n'a qu'un seul thread appelé thread principal pour exécuter un code

58
Problème

fetchDataFromDB('endpoint') peut prendre 1 seconde ou même plus. Pendant ce

temps, nous ne pouvons pas exécuter d'autres codes

JS, s'il passe simplement à la ligne suivante sans attendre, nous avons une erreur car les données ne sont pas ce que nous attendons. Nous avons

besoin d'un moyen d'avoir un comportement asynchrone avec JS

59
Comment ?

JavaScript seul ne suffit pas

Nous avons besoin de nouveaux éléments extérieurs à JS pour nous aider à écrire du code asynchrone, c'est là que les navigateurs Web entrent en jeu.

Les navigateurs Web définissent des fonctions et des API qui nous permettent d'enregistrer des fonctions qui ne doivent pas être exécutées de manière synchrone et

qui doivent plutôt être invoquées de manière asynchrone lorsqu'un événement se produit.

Par exemple, cela peut être le passage du temps (setTimeout ou setInterval), l'interaction de l'utilisateur avec la souris
(addEventListener) ou l'arrivée de données sur le réseau (callbacks, Promises, async-await)

60
setTimeout()
La fonction setTimeout() exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Le

premier paramètre est une fonction à exécuter ou une référence à une fonction définie ailleurs

Le deuxième paramètre est un nombre représentant la durée en millisecondes à attendre avant d'exécuter le code

Après le deuxième paramètre, vous pouvez transmettre zéro ou plusieurs valeurs qui représentent les paramètres que vous souhaitez transmettre à la fonction

lors de son exécution.

fonctionsaluer(nom) {
console.enregistrer(`Bonjour${nom}`);

définirTimeout(saluer,2000,"Amal");

61
Pour effacer un délai d'attente, vous pouvez utiliser la méthode clearTimeout() en transmettant l'identifiant renvoyé par setTimeout en tant que paramètre

fonctionsaluer(nom) {
console.enregistrer(`Bonjour`);

constantetimeoutId =définirTimeout(saluer,2000);

effacerTimeout(timeoutId);

62
setInterval()
La fonction setInterval() exécute le même code à plusieurs reprises à intervalles réguliers. Le premier

paramètre est une fonction à exécuter ou une référence à une fonction définie ailleurs.

Le deuxième paramètre est un nombre représentant la durée en millisecondes

Après le deuxième paramètre, vous pouvez transmettre zéro ou plusieurs valeurs qui représentent les paramètres que vous souhaitez transmettre à la fonction

lors de son exécution.

fonctionsaluer(nom) {
console.enregistrer(`Bonjour`);

définirIntervalle(saluer,2000);

Les intervalles permettent à une tâche de s'exécuter indéfiniment, vous devez donc effacer l'intervalle lorsque cela est approprié.

constanteintervalleId =définirIntervalle(saluer,2000);
Intervalle d'effacement(intervalleId);

63
 Les temporisateurs et les intervalles ne font pas partie de JS lui-même. Ils sont implémentés par le navigateur et setTimeout et setInterval sont

essentiellement des noms donnés à cette fonctionnalité dans JS

Le paramètre de durée est le délai minimum, pas le délai garanti

Il est possible d'obtenir le même effet que setInterval avec un setTimeout récursif

Exercice: Écrivez l'équivalent de l'effet ci-dessous en utilisant setTimeout

définirIntervalle(fonctioncourir() {
console.enregistrer("Bonjour");

},1000);

64
Pour setTimeout, la durée est garantie entre les exécutions. Quel que soit le temps d'exécution, l'intervalle restera le
même
Pour setInterval, l'intervalle de durée inclut le temps nécessaire pour exécuter le code que vous souhaitez exécuter

Le code prend 40 ms pour s'exécuter, l'intervalle est de 60 ms

Le code prend 50 ms pour s'exécuter, l'intervalle est de 50 ms

si le code peut prendre plus de temps à s'exécuter, alors l'intervalle de temps lui-même => Recursive setTimeout

65
Rappels
En JavaScript, les fonctions sont des objets de première classe

Tout comme un objet, une fonction peut être passée en tant qu'argument à une fonction. Une fonction

peut également être renvoyée sous forme de valeurs à partir d'autres fonctions.

Toute fonction transmise en tant qu'argument à une autre fonction est appelée fonction de rappel en JavaScript. La fonction

qui accepte une fonction comme argument ou renvoie une fonction est appelée fonction d'ordre supérieur.

fonctionsaluer(nom) {
console.enregistrer(`Bonjour${nom}`);

fonctionsaluerAmal(salutFn) {

constantenom ="Amal";
saluerFn(nom);
}

saluerAmal(saluer);

Un rappel qui est exécuté immédiatement est appelé un rappel synchrone

66
Rappels asynchrones

Un rappel asynchrone est un rappel qui est souvent utilisé pour continuer ou reprendre l'exécution du code une fois qu'une opération
asynchrone est terminée.

Les rappels sont utilisés pour retarder l'exécution d'une fonction jusqu'à ce qu'un moment ou un événement particulier se soit produit.

La récupération des données prend du temps et nous ne pouvons exécuter la fonction que nous voulons qu'une fois les données récupérées et pas immédiatement.

Les fonctions de rappel vous permettent de retarder l'exécution d'une fonction.

67
Problème
Si vous avez plusieurs fonctions de rappel où chaque niveau dépend du résultat obtenu à partir du niveau précédent, l'imbrication des
fonctions devient si profonde que le code devient difficile à lire et à maintenir

chargerScript('1.js',fonction(erreur, script) {

si(erreur) {
gérerErreur(erreur);
}autre{

// ...
chargerScript('2.js',fonction(erreur, script) {
si(erreur) {

gérerErreur(erreur);
}autre{
// ...

chargerScript('3.js',fonction(erreur, script) {
si(erreur) {
gérerErreur(erreur);

}autre{
// ...continuer après que tous les scripts soient chargés (*)

}
});
}
}); 68
}
Promesses

Une promesse est simplement un objet en JS

Une promesse est toujours dans l'un des trois états

En attente : qui est l'état initial, ni rempli ni rejeté
Accompli : ce qui signifie que l'opération s'est terminée avec succès

Rejeté : ce qui signifie que l'opération a échoué

Les promesses nous aident à gérer le code asynchrone d'une manière beaucoup plus simple par rapport aux rappels.

L'enfer des rappels peut être évité avec les promesses

69
constantepromesse =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(() => {

résoudre(« Test de résolution »);

},5000);

});

constantepromis =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(() => {

rejeter(« Rejeter le test »);

},5000);

});

constantesurFulfillment= (résultat) => {

console.enregistrer(résultat);

console.enregistrer(« Sur l'accomplissement »);

};

constantesurRejeter= (erreur) => {

console.enregistrer(erreur);

console.enregistrer(« Sur rejet »);

};

promesse.alors(sur l'accomplissement);

promis.attraper(surRejeter);

70
Promesse.tout()

Interrogez plusieurs API et effectuez certaines actions, mais seulement une fois que toutes les API ont terminé leur chargement

constantepromesse1 =Promesse.résoudre(3);

constantepromesse2 =42;

constantepromesse3 =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(résoudre,100,"foo");
});

Promesse.tous([promesse1, promesse2, promesse3]).alors((valeurs) => {

console.enregistrer(valeurs);

});

Lepromesse.tout()la méthode prend un itérable de promesses en entrée et renvoie une promesse unique qui se résout en un tableau des
résultats des promesses d'entrée

La promesse renvoyée sera résolue lorsque toutes les promesses de l'entrée seront résolues

Il rejette immédiatement si l'une des promesses d'entrée est rejetée ou si la promesse génère une erreur, et rejettera tout

71
Promesse.allSettled()
Promesse.allSettled()attend que toutes les promesses d'entrée soient complétées, que l'une d'entre elles soit rejetée ou non

constantepromesse1 =Promesse.résoudre(3);

constantepromesse2 =42;

constantepromesse3 =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(rejeter,100,"foo");
});

Promesse.tous réglés([promesse1, promesse2, promesse3]).alors((valeurs) => {

console.enregistrer(valeurs);

});

72
Promesse.race()
LePromesse.race()la méthode renvoie une promesse qui se réalise ou se rejette dès qu'une des promesses d'entrée se réalise ou se rejette,
avec la valeur ou la raison de cette promesse.

constantepromesse1 =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(résoudre,500,"un");

});

constantepromesse2 =nouveauPromesse((résoudre, rejeter) => {

définirTimeout(résoudre,100,"deux");
});

Promesse.course([promesse1, promesse2]).alors((valeurs) => {

console.enregistrer(valeurs);

});

73
Exercice 1
/*
1. Imprimez « Programme démarré » au début de votre code

2. Créez une promesse qui se résout après 3 secondes

3. Déconnectez-vous de la promesse pendant qu'elle est en attente

4. Imprimez également « Programme en cours... »

5. Imprimez « Programme terminé » lorsque la promesse est terminée après 3 secondes

*/

74
Exercice 2
/*
1. Imprimez « Programme démarré » au début de votre code

2. Créez une promesse qui se résout après 3 secondes et se rejette après 2 secondes
3. Déconnectez-vous de la promesse pendant qu'elle est en attente

4. Imprimez également « Programme en cours... »

5. Imprimez « Programme terminé » si la promesse est tenue

6. Imprimez « Échec du programme » si la promesse est rejetée
*/

75
Exercice 3
/*
1. Imprimez « Programme démarré » au début de votre code

2. Créez une promesse qui se résout après 3 secondes

3. Déconnectez-vous de la promesse pendant qu'elle est en attente

4. Imprimez également « Programme en cours... »

5. Imprimez « Étape 1 terminée » lorsque la première promesse est remplie

6. Demandez à la première promesse de renvoyer une autre nouvelle promesse qui sera réalisée après 3 secondes avec le message « Étape 2 terminée »

7. Imprimez le message de la deuxième promesse après qu'elle soit accomplie (« étape 2 terminée »)
*/

76
Attente asynchrone

Le mot-clé async wait a été introduit dans ES2017

Le mot-clé async wait nous permet d'écrire du code complètement synchrone tout en effectuant des tâches asynchrones en
coulisses
Le mot clé async est utilisé pour déclarer des fonctions asynchrones

Les fonctions asynchrones sont des fonctions qui sont des instances deFonction asynchroneconstructor

Contrairement aux fonctions normales, les fonctions asynchrones renvoient toujours une promesse qui sera résolue avec la valeur renvoyée par la

fonction asynchrone, ou rejetée avec une exception non détectée dans la fonction asynchrone

// Fonction asynchrone

fonction asynchronesaluer() {

retour"Bonjour";
}
console.log(greet());

async function salut2() {

return Promise.résoudre("Hello");

}
greet2().then((valeur) =>console.log(valeur));
77
attendre

attendrele mot-clé peut être placé devant n'importe quelle fonction asynchrone pour mettre votre code en pause jusqu'à ce que cette promesse soit réglée et renvoie ses résultats

await ne fonctionne qu'à l'intérieur des fonctions asynchrones. Impossible à utiliserawait dans les fonctions normales

async function greet() {

laisserpromesse =new Promise((resolve, reject) => {

setTimeout(() =>resolve("Hello"),1000);
});

let résultat =await promesse;

console.log(résultat);

}
greet();

78
Boucle d'événement

JavaScript est monothread. Heureusement, le navigateur nous offre certaines fonctionnalités que le moteur JavaScript lui-même ne fournit pas :
une API Web. Cela inclut l'API DOM, setTimeout, les requêtes HTTP, etc. Cela peut nous aider à créer un comportement asynchrone et non
bloquant.

79
Exemple : Code synchrone
console.log('D'abord');

console.log('Deuxième');

console.log('Troisième');

80
Exemple : code setTimeput asynchrone

console.log("D'abord");

setTimeout(() => {
console.log("Deuxième");
},2000);

console.log("troisième");

81
Exemple : code de promesse asynchrone

console.log("First");

const promise = aller chercher("https://jsonplaceholder.typicode.com/posts/1")

. then((réponse) => réponse.json())
. then((json) =>console.log(json));

console.log("deuxième");

82
Exemple : setTimeout + code de promesse
setTimeout(() => {
console.log("First");

}, 0);

const promise = fetch("https://jsonplaceholder.typicode.com/posts/1")

. then((response) => response.json())

. then((json) => console.log(json));

let je;
pour(je =0; je <100000000; i++) {
//bloque pendant quelques secondes

}
console.log("second");

83
Voici un exemple qui démontre quedéfinirTimeoutne s'exécute pas immédiatement après l'expiration de son délai :

constantesecondes =nouveauDate().obtenir du temps() /1000;

définirTimeout(() => {
// affiche « 2 », ce qui signifie que le rappel n'est pas appelé immédiatement après 500 millisecondes.
console.enregistrer(`J'ai couru après${nouveauDate().getTime() /1000- secondes}secondes`);

},500);

alors que(vrai) {

si(nouveauDate().obtenir du temps() /1000- secondes >=2) {

console.enregistrer("Bien, en boucle pendant 2 secondes");

casser;

}
}

84
Zéro retard
Un délai nul ne signifie pas que le rappel sera déclenché après zéro milliseconde.définirTimeoutavec un délai de 0 (zéro)
milliseconde n'exécute pas la fonction de rappel après l'intervalle donné.

console.enregistrer("c'est le début");

définirTimeout(() => {
console.enregistrer(« Rappel 1 : ceci est un message de rappel »);
});// a une valeur de temps par défaut de 0

console.enregistrer("ceci est juste un message");

définirTimeout(() => {
console.enregistrer(« Rappel 2 : ceci est un message de rappel »);
},0);

console.enregistrer("c'est la fin");```

85