Introduction

• Trois couches de conception web

Comportement (JavaScript)

Présentation (CSS)

Contenu structuré (HTML 5)

 Motivation

JavaScript un langage incontournable du développement Web

[Link]
 Motivation

Most popular
technologies in
2024

[Link]
.co/2024/technology#most-
popular-technologies-
language-prof

7
 Motivation

Best
Programming
Languages to
Learn in 2025

[Link]
[Link]/blog/nine-best-
programming-languages-
to-learn
Quelques idées fausses

8
 Quelques idées fausses

• JavaScript est la version script de Java.

• Non ! JavaScript n'a (presque) rien à voir avec Java !
JavaScript Java
• Créé par Netscape (dec. 1995) • Créé par Sun Microsystems (mai 1995)

• Syntaxe dérivée du C/C++ • Syntaxe dérivée du C/C++

• Langage interprété : • Langage compilé :
• Pas de compilation • Compilation vers du ByteCode
• Exécution directe dans un • Exécution nécessite machine
interpréteur virtuelle Java
• Typage dynamique • Type statique
• Plus de souplesse mais moins • Contrôles à la compilation, moins
de contrôles souple mais plus robuste

• Modèle objet à base de Prototypes • Modèle objet à base de Classes

• Un vrai langage fonctionnel • Un langage impératif

9
 Quelques idées fausses
[Link]
• JavaScript est le langage du Web
JavaScript serait donc la
seule technologie
applicative côté client ? • Mais avec :
• JavaScript intégré en standard aux • le développement d'AJAX (Asynchronous
navigateurs Web JavaScript and XML)
• la normalisation du langage et un meilleur
support par tous les navigateurs
• l'introduction de HTML5 (et de ses
nombreuses API JavaScript)

JavaScript
• D'autres technologies ont été est revenu
développées pour s'exécuter côté au tout 1er
client
plan
- Adobe Flash
8
- applets Java
 Quelques idées fausses
[Link]

• JavaScript est pour les clients Web

• oui… mais pas que.

• JSON s'impose de
plus en plus comme
• Historiquement un format d'échange • Depuis 2009/2010 de plus
de données
JavaScript intégré aux en plus présent côté serveur
navigateurs

9
 Quelques idées fausses

[Link]

• JavaScript est un langage simple et facile à apprendre

• Cela se discute… JavaScript n'est pas un langage sans
défauts et il peut être parfois délicat à utiliser [Link]
programming-languages-to-learn

"La plupart des langages contiennent des

bons et des mauvais éléments. … Le
JavaScript est un langage particulièrement
bien loti en ce qui concerne les mauvais
éléments… Mais le JavaScript contient
heureusement un certain nombre d'éléments
exceptionnellement bons…"
Douglas Crockford
JavaScript, les bons éléments
Ed. Pearson France, 2013
1
Historique

succès stagnation l'essor

initial

1
 Historique

ECMAScript 4 ECMAScript 6*
JScript début des travaux let, const
(MS IE 3.0) classes et modules
ECMAScript 3 ECMAScript 4 Chrome
ECMAScript 2 abandon moteur ECMAScript 7
Javascript V8 opérateur **
ECMA-262 Ed.1 [Link]
(ECMAScript 1) ECMAScript 5 ECMAScript 8
TC39 commitee mode strict async/wait
(Mai) Brendan Eich 🡪Mocha JSON
ECMAScript 9
(Sep.) Mocha 🡪LiveScript Node JS
propriétés rest/spread,
(Dec.) LiveScript 🡪JavaScript basé sur V8
iteration asynchrone
(Netscape Navigator 2.0) de Chrome
ajouts aux RegExp 1
ECMA stands for - European Computer Manufacturer's Association
 Support par les différents navigateurs

ES5 ES6 ES7 ES8 ES9

ECMAScript 5 ECMAScript 6 ECMAScript7

Navigateur Version Date Version Date Version Date
Chrome 23 Sept. 2012 68 Avr. 2017 68 Mai 2018
Firefox 21 Avr. 2013 54 Juin 2017
IE 9 Mars 2011 - - - -
Edge 10 Sept. 2012 14 Août 2016
Safari 6 Juil. 2012 10 Sept. 2016
Opera 15 Juil. 2013 55 Août 2017 47 Juil. 2018

[Link] 13
 Environnements d'exécution JavaScript

• Analyse et exécution du code JavaScript sont effectué par un moteur Javascript

(JavaScript Engine) qui s'exécute dans un environnement hôte.

Navigateur web (browser) [Link]

JavaScript
Engine
Chrome: V8
Firefox: SpiderMonkey
Environnement JS
Environnement JS Safari: WebKit

14
 JavaScript dans un navigateur

Et alors ? En quoi
• Code JavaScript peut être inclus dans des pages HTML JavaScript est-il si différent
d'autres langages comme
PHP, JSP, ASP ?

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<title>Hello world</title> <title>Hello world</title>
</head> </head>
<body> <body>
<h1>Hello</h1> <h1>Hello</h1>
<p> <p>
<script> <?php
for ( i = 0 ; i < 5; i++) { for ($i=0; $ i < 5; $i++) {
[Link]("Hello World !</br>"); echo "Hello World !</br>";
} }
</script> ?>
</p> </p>
</body> </body>
</html> </html>
1
 JavaScript dans le navigateur

• un script PHP s'exécute côté serveur

GET [Link]

le moteur PHP exécute le

script PHP et produit le
code HTML qui est renvoyé
au client

1
 JavaScript dans le navigateur
• un script JavaScript s'exécute côté client (dans le navigateur)

GET [Link]

C'est le moteur JavaScript du La page HTML est renvoyée telle

navigateur qui interprète le quelle au navigateur.
script et modifie la page HTML
 WebAssembly

• JavaScript n'est plus tout seul !

[Link]

• WebAssembly
- Nouveau type de code pouvant être exécuté dans les navigateurs
modernes
- Format binaire compact, rapide à charger et à exécuter
🡪 performances proches du code natif
- Conçu pour être une cible de compilation efficace pour des
langages source de bas niveau (C, C++, Rust, …)
1
 WebAssembly: exemple

Google Earth :
cartographie 3D

[Link]

1
 WebAssembly
Assembleur : représente le langage
machine sous une forme textuelle
lisible par un humain

Pour être exécutés les programmes écrits

dans un langage de haut niveau doivent
être traduits en langage machine
WebAssembly : pas un véritable langage d'assemblage

Chaque type de processeur

nécessite un code machine Code intermédiaire ne ciblant pas de
(assembleur) spécifique machine spécifique
Quand le navigateur charge du code
WebAssembly, il peut rapidement le
traduire en code machine 20
 Intégration de JavaScript dans HTML
fichier HTM L

<head>
<script>
• la balise <scr ipt> délimite code JavaScript statement
</script>

• peut être insérée soit dans l'entête (<head>) soit dans <script src="[Link]">
</script>
le corps (<body>) de la page HTML
</head>
• les scripts sont exécutés dans leur ordre <b…
o d y>
d'apparition dans la page code HTML
….
o Placer les scripts dans l'en tête pour qu'ils soient
chargés et exécutés avant la construction et <script>
statement
l'affichage de la page …
o Par défaut, les scripts placés dans le body sont </script>
exécutés au fur et à mesure que celui-ci est …
chargé et que le DOM est construit.=> met en code HTML
attente le moteur d'analyse HTML/CSS. ….
o Souvent les scripts sont placés à la fin du corps <script src="[Link]">
de la page (juste avant </body>) => améliorer la </script>
vitesse de chargement de la page.

2
 Intégration de JavaScript dans HTML

Il existe 2 manières pour insérer un code JavaScript dans une page HTML:

JavaScript dans HTML JavaScript à l'extérieur du HTML

<html>
<html>
<head>
<head>
<title>Page HTML</title>
<title>Page HTML</title>
</head>
<script src=”[Link]”>
<body>
</script>
<script>
</head>
alert(‘bonjour’);
<body>
</script>
</body>
</body>
</html>
</html>
 Entrée et sortie de données avec JS

• 3 types de boites de messages peuvent être affichés en utilisant Javascript :

Alerte, Confirmation et Invite
• Méthode alert(): Sert à afficher à l’utilisateur des informations simples de type texte. Une fois
que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte
• Méthode confirm(): Permet à l’utilisateur de choisir entre les boutons OK et Annuler.
• Méthode prompt(): La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée
• La méthode [Link] permet d ’écrire du code HTML dans la page WEB
Entrée et sortie de données avec JS
 Structures de contrôle

• Test conditionnel : if … else …

25
 Structures de contrôle

• Boucle itérative :
for(initialisation ; condition ; opération ) { ... instructions ... }

26
 Structures de contrôle

• Boucle conditionnelle
while(condition) { ... instructions ... }

27
 Concaténation des chaines de caractères
avec des expressions
• On peut utiliser l’opérateur + pour faire la • On peut utiliser les littéraux de gabarits
concaténation: (template literal)
 Fonctions simples

Syntaxe:
function nom_fonction ([param1, …]){
//Corps de la fonction
}

Corps de la fonction :
Déclaration des variables,
Instructions réalisées par la fonction,
Instruction return pour renvoyer une valeur ou un objet (Facultative)

29
 Déclaration de variables

4 façons pour déclarer une variable en JavaScript :

• En utilisant le mot clé var, • Les mots-clés let et const ont été ajoutés à
• Déclarer
Le mot clé
La JavaScript
variable uneconst
let
estvariable
permet
permet
accessiblesans
de de
déclarer
mot clé
dans
• En utilisant le mot clé let, en 2015: ECMAScript 6 ou ES6.
déclarer
permet
une
toute
• Les variable
deux de
unedéclarer
dont
variable
ladéclarations
fonction le
etune
let ou contenu
dontvariable
le peut
globalement
const créent des
• En utilisant le mot clé const,
contenu
globale
changé.
si elle est
variables quidans
est inchangeable.
tout
déclarée
ont une le script.
hors
portée bloc d'une
• Ne rien utiliser. • Elles n'existent que dans le bloc le plus interne
fonction.
qui les entoure.

30
 Déclaration de variables

• Utilisation de l’instruction
[var , let , const , ] variable=valeur;
• Pas de typage (détection automatique par l’interpréteur)
• Nom de variable sensible à la casse.
• Portée :
• globale  visibilité dans tout le script (var (en dehors de la fonction), ou sans
mot clé)
• fonction  visibilité dans la fonction la où elle a été déclarée (var (dans la
fonction)
• bloc  visibilité dans le bloc interne (let ou const)

31
 Portée de variables

Déclaration Portée de variables

var Fonction/globale
let bloc
const bloc
Sans mot clé globale

• var : La variable est accessible dans toute la fonction où elle est déclarée. Si elle est déclarée en
dehors d’une fonction, elle devient globale.
• let et const : La variable est limitée au bloc ({}) dans lequel elle est déclarée.
• Sans mot clé : La variable est automatiquement ajoutée à l'objet global (window dans les
navigateurs), ce qui peut causer des problèmes.
 Portée fonction et portée globale

• Une variable déclarée avec le mot clé var pourra avoir deux portées: globale ou fonction.
• La portée d’une variable déclarée par var dépend de l’endroit où elle est déclarée :
• Portée globale: déclarée en dehors de la fonction.
• Portée fonction: déclarée à l’intérieur d’une fonction aura une portée limitée à cette
seule fonction.
• Une variable déclarée globale est accessible depuis l’objet global window.
 Portée fonction et portée globale
• Si on n’utilise pas de mot clé dans la déclaration de variables, on crée des
variables globales.
• => Déconseiller à faire
 Déclaration de variables: portée bloc

• Avant ES6 (2015), JavaScript n'avait que la portée globale et la portée

fonction.
• ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et
const.
• Ces deux mots-clés fournissent une portée bloc.
• Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles
depuis l'extérieur du bloc

35
Déclaration de variables: portée bloc
 Déclaration de variables: let vs const

• Une variable déclarée avec let est modifiable : • Une variable déclarée avec const est immuable :
 Expressions de Fonction

• En JavaScript les fonctions sont des objets

• On peut affecter une fonction à une variable
syntaxe :
const nom_fonction= function const nom_fonction=([param1,…])=>{
([param1, …]){ //Corps de la fonction
//Corps de la fonction }
}

38
 Expressions de Fonction et Portée

const nom_fonction=([param1,…])=>{
//Corps de la fonction
}
• const et let permet d’empêcher la redéfinition de la fonction une deuxième
fois puisqu’ils sont de type bloc.
• Si on a une seule instruction dans une fonction, on peut ne pas utiliser le mot
clé return ni d’accolades { }.
 Fonctions anonymes

Pour que cette fonction s’appelle automatiquement:

(()=>{//Corps de la fonction})();
• Pas de nom pour la fonction
• => Isoler les variables déclarées au sein de la fonction au monde extérieur.
JavaScript
Objets natifs standards
 Objets globaux

• Plusieurs objets prédéfinis (globaux) en JavaScript:

• Array, Boolean, Date, Function, Number, Object, RegExp, Map, Set, String….
• L’opérateur Typeof
• L'opérateur typeof renvoie une chaîne de caractères indiquant quel est le type de
l'opérande.

let titre="Les raisins de la colère";

typeof titre; //retourne string

function message() {
[Link]("Bonjour!");
}

[Link](typeof message); // => function

[Link](message instanceof Object); // => true
 Tableau de données (Objet array)

• Déclaration par l’utilisation de var/let.

• Le premier élément du tableau est indexé à 0.
• Il est possible de déclarer un tableau sans dimension fixée: Sa taille
s'adapte en fonction du contenu.

// création implicite d’un tableau

let mon_tableau = ["Ali", 'Mohamed', "Sarah", 10, 6];

// création d’un tableau de 10 éléments

let mon_tableau = Array(10);

// création d’un tableau avec l’opérateur « new »

let mon_tableau = new Array(10);
let mon_tableau = new Array();
 Utilisation de tableaux

• Accès aux éléments d’un tableau: Utilisation des crochets : [ ]

let tableau=new Array();
tableau[0]=10;
tableau[1]=5;

• La proprièté length
[Link]
• Parcourir un tableau
// Parcourir un tableau sans connaître le nombre
d'éléments
let tableau= new Array(1, "a", 9) ;
for (let i=0; i<[Link]; i++)
[Link]("tableau[" + i + "] = "+tableau[i]); 44
 Utilisation de tableaux

• Parcourir un tableau sans connaitre le nombre d’éléments

let tableau= new Array(1, "a", 9);

tableau[200] = 12;
for (let i in tableau)
[Link]("tableau[" + i + "] = "+tableau[i]);

• Parcourir un tableau sans connaitre le nombre d’éléments avec ES6

let tableau = new Array(1, "a", 9);

[Link]( (data,index)=> {
[Link]("tab["+index+"]="+data);
});
 Tableaux associatifs

• L’indice est une chaîne de caractères

La propriété length de l’objet Array() pour ce genre de tableau ne fonctionne pas.

for (let key in tab) {
[Link](`${key}=${tab[key]}`);
46
}
 L'objet Array

Il y a des méthodes pour manipuler l’objet Array :

• concat( ) : permet de concaténer 2 tableaux;
• join( ) : converti un tableau en chaîne de caractères;
• slice( ) : retourne une section du tableau;
• push(): Ajoute un ou plusieurs éléments à la fin du tableau.
• pop() : Retire le dernier élément du tableau et renvoie cet élément.
• splice(): Ajoute et/ou retire des éléments du tableau.
• sort( ) : permet le trier des éléments du tableau;
• reverse( ) : inverse le classement des éléments du tableau;

[Link]
 L'objet String

L'objet String permet de manipuler les chaînes de caractères

• Propriété :
• length : retourne la longueur de la chaîne de caractères;
• Méthodes :
• Opérations sur les chaînes
• concat(str) : retourne la chaîne concaténée avec str
• split(str) : retourne, sous forme de tableau, les portions de la chaînes
délimitées par str
• substring(debut,fin) : extrait une sous-chaîne, depuis la
position debut (incluse) à fin (excluse).
• substr(debut,i) : extrait une sous-chaîne, depuis la position debut, en
prenant i caractères
 L'objet String

• Opérations sur les caractères

• charAt(i) : retourne le ième caractère
• indexOf(str) : retourne la position de str dans la chaîne (-1 si elle n'est pas trouvée)
• lastIndexOf(str) : idem, mais renvoie la position de la dernière occurrence de str
• toLowerCase() : retourne la chaîne en minuscules
• toUpperCase() : retourne la chaîne en majuscules

[Link]
 L'objet Math

• Propriétés :
• E : renvoie la valeur de la constante d'Euler (~2.718);
• LN2 : renvoie le logarithme népérien de 2 (~0.693);
• LN10 : renvoie le logarithme népérien de 10 (~2.302);
• LOG2E : renvoie le logarithme en base 2 de e (~1.442);
• LOG10E : renvoie le logarithme en base 10 de e (~0.434);
• PI : renvoie la valeur du nombre pi (~3.14159);
• SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
• SQRT2 : renvoie la racine carrée de 2 (~1.414);
 L'objet Math

• Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( )
sont les opérations mathématiques habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.

[Link]
 L'objet Date

• Méthodes
• Constructeur
• getDay(), attention de 0 (dimanche) à 6 (samedi)…
• getDate() / setDate()
• getMonth() / setMonth(), attention de 0 à 11…
• getYear() / setYear() / getFullYear() / setFullYear()
• getHours()/ setHours()
• getMinutes() / setMinutes()
• getTime() / setTime() let jour = new Date();
alert([Link]()); // 2025
[Link] let anniversaire = new Date(2002, 10, 25);
avaScript/Reference/Global_Objects/Date alert([Link]());
// 25/11/2002 00:00:00
 L’objet Function

• Une fonction est bien un objet.

• Les fonctions JavaScript sont un type spécial d'objets, appelés objets de fonction.
• Un objet fonction comprend une chaîne qui contient le code réel de la fonction.
• Bien que cela ne soit pas recommandé, vous pouvez créer un nouvel objet fonction
en transmettant au constructeur Function le nom et le corps de la fonction.

var body = "return pi * radius * radius";

var pi = [Link];
var circle = new Function("radius", "pi", body);
[Link](circle(5, pi)); // => 78.5398..
 Fonctions globales

• eval(chaine)
• isFinite(nombre)
• isNaN(objet)
• parseFloat(chaine)
• parseInt(chaine)
 Fonctions supérieures

[Link](isFinite([Link](0))) ;
➔ false
[Link](isNaN("abcd")) ;
➔ true
[Link]("12.34"+2) ;
➔ 12.342
[Link](parseFloat("12.34")+2) ;
➔ 14.34
JavaScript
Objets propres
 Déclaration et création d’objets: Objets propres

• Création d’objets avec des initialiseurs d'objets (objets littéraux).

const obj= { const obj = new Object();

propriété_1: valeur_1, [Link]été_1=valeur_1;
propriété_2: valeur_2, [Link]été_2=valeur_2,
… …
propriété_n: valeur_n [Link]été_n= valeur_n;
};

▪Les objets sont créés de la même façon qu'avec new Object().

▪Les objets créés à partir d'une expression littérale seront des instances d'Object.
 Déclaration et création d’objets: Objets propres

▪ Les objets peuvent également être créés en utilisant la méthode [Link]().

const Animal = {
type: "Invertébrés", // Valeur par défaut
afficherType: function () {
[Link]([Link]);
}
};
héritage
let animal1 = [Link](Animal); let animal2 = [Link](Animal);
// Redéfinit la propriété type
[Link] = "poisson";

[Link](); // Affiche "Invertébrés"

[Link](); // Affiche "poisson"
 Déclaration et création d’objets: Objets propres

Création d’objets propres en utilisant un constructeur

• Par appel d’une fonction qui va créer les propriétés de l’objet.
• Utilisation de this pour faire référence à l’objet courant
• On crée une instance de l'objet avec new.

function Etudiant(Le_nom, Le_prenom, Le_CODE) {

[Link] = Le_nom;
[Link] = Le_prenom;
[Link] = Le_CODE;
}
let etd = new Etudiant("Mohamed", "Ben Ali", "1298742046");
[Link](`Votre nom est: ${[Link]}`);
 Déclaration et création d’objets: Objets propres

• Déclaration de méthodes
• Association de fonctions dans la création de l’objet.

function Etudiant(Le_nom, Le_prenom, Le_CODE) {

[Link] = Le_nom;
[Link] = Le_prenom;
[Link] = Le_CODE;
[Link] = affiche_Etudiant;
}
function affiche_Etudiant() {
[Link](
`Votre nom et prénom est: ${[Link]} ${[Link]} ,Votre CODE est: ${[Link]}`
);
}
let etd = new Etudiant("Mohamed", "Ben Ali", "1298742046");
[Link]();
 Prototype en JavaScript

• Le prototype permet de partager des méthodes entre les

instances sans les dupliquer.
function Personne(nom, age) {
[Link] = nom;
[Link] = age;
}
// Ajout de méthode au prototype
[Link] = function () {
[Link](`Bonjour, je m'appelle ${[Link]}`);
};
const p1 = new Personne("Zineb", 22);
const p2 = new Personne("Reda", 25);
[Link](); // Bonjour, je m'appelle Zineb Saluer() Mémoire
[Link](); // Bonjour, je m'appelle Reda
 Prototype en JavaScript

Ajout de la méthode au prototype Définie directement dans le constructeur

function Personne(nom, age) { function Personne(nom, age) {

[Link] = nom; [Link] = nom;

[Link] = age; [Link] = age;

} [Link] = function () {

[Link] = function () { [Link](`Bonjour, je m'appelle ${[Link]}`);

[Link](`Bonjour, je m'appelle ${[Link]}`); };

}; }

const p1 = new Personne("Ali", 25); const p3 = new Personne("Omar", 20);

const p2 = new Personne("Zineb", 22); const p4 = new Personne("Sara", 23);

[Link]([Link] === [Link]); // true (une [Link]([Link] === [Link]); // false

seule instance de la méthode est partagée) (chaque instance a sa propre copie)
 Ajouter une méthode au prototype d'un objet littéral

• En JavaScript, les objets littéraux ne sont pas des constructeurs et n'ont pas de propriété
prototype directement accessible.

• On peut ajouter des méthodes ou propriétés à leur prototype interne en utilisant

[Link] ou en modifiant directement l'objet.

const Animal = {
type: "Invertébrés", // Valeur par défaut
afficherType: function () {
[Link]([Link]);
}
};
 Ajouter une méthode au prototype d'un objet littéral

[Link] Modification d'objet

const Animal = {
const Animal = {
type: "Invertébrés",
type: "Invertébrés",
afficherType: function () {
afficherType: function () { [Link]([Link]);
[Link]([Link]); }

} };
// Créer un nouvel objet qui hérite de Animal
};
// Ajouter une nouvelle méthode à l'objet Animal let animal1 = [Link](Animal);
// Ajouter une méthode au prototype de Animal
[Link] = function () {
[Link](Animal).deplacer = function () {
[Link]("Je me déplace"); [Link]("Je me déplace");
}; };
[Link](); // Affiche "Je me déplace"
[Link](); // Affiche "Je me déplace"
 Chaînage de prototype (Prototype Chain)

• Chaque objet en JavaScript hérite d’un prototype.

• Par défaut, les objets héritent de [Link].
[Link]([Link]()); // [object Object]

• toString() est défini dans [Link], et comme p1 ne l’a pas

directement, JavaScript le cherche dans son prototype.

[Link]([Link](p1) === [Link]); // true

[Link]([Link]([Link]) === [Link]); // true
 Exercice

1. Définir une fonction constructeur « Produit » avec les attributs libelle , catégorie et
prix.
2. Ajouter la méthode description() au prototype de « Produit » pour afficher son détail.
3. Définir une fonction constructeur « Commande » qui comporte un attribut tableau de
produits.
4. Ajouter les méthodes ajouter() et afficher() au prototype de « Commande » pour
ajouter des produits au tableau et afficher l’ensemble de produits
5. Créer une instance de « Commande » et y ajouter des produits.
6. Afficher les produits d’une commande en utilisant la méthode affiche().
 Solution

// Définition de la fonction constructeur Produit

function Produit(libelle, categorie, prix) {
[Link] = libelle;
[Link] = categorie;
[Link] = prix;
}
// Ajout de la méthode description() au prototype de Produit
[Link] = function () {
[Link](
`Produit: ${[Link]}, Catégorie: ${[Link]}, Prix: ${[Link]} DH`
);
};
 Solution

function Commande() {
[Link] = []; // Tableau de produits
}
[Link] = function (produit) {
[Link](produit);
[Link](`${[Link]} a été ajouté à la commande.`);
};
[Link] = function () {
[Link]("Liste des produits dans la commande :");
[Link]((produit) => [Link]());
};
 Solution

// Création d'une instance de Commande

const commande1 = new Commande();
// Création et ajout de produits à la commande
const produit1 = new Produit("Laptop", "Électronique", 7500);
const produit2 = new Produit("Smartphone", "Électronique", 3500);
const produit3 = new Produit("Casque Audio", "Accessoires", 800);
[Link](produit1);
[Link](produit2);
[Link](produit3);
// Affichage des produits de la commande
[Link]();
 Classes en JavaScript ES6

• En ES6, les classes ont été introduites pour offrir une syntaxe
plus claire et plus structurée pour la création d'objets et
l'héritage.
• Elles sont en réalité une surcouche aux fonctions
« constructeur » et au prototype.
• On peut déclarer une classe avec le mot-clé class
 Classes en JavaScript ES6: Constructeur

• Le constructeur est une méthode spéciale utilisée pour initialiser

les propriétés d'un objet lors de sa création.
class Etudiant {
constructor(nom, cne, filiere) {
[Link] = nom;
[Link] = cne;
[Link] = filiere;
}
}
const etd1 = new Etudiant("Ali", 123, "MIP");
 Classes en JavaScript ES6: Méthodes

Les classes permettent de définir des méthodes directement dans leur corps :
class Etudiant {
constructor(nom, cne, filiere) {
[Link] = nom;
[Link] = cne;
[Link] = filiere;
}
affiche() {
return `L'étudiant: ${[Link]} est inscrit en ${[Link]}`;
}
}
const etd1 = new Etudiant("Ali", 123, "MIP");
[Link]([Link]()); // L'étudiant: Ali est inscrit en MIP
 Classes en JavaScript ES6: Héritage

class Animal { class Chien extends Animal {

constructor(nom) { constructor(nom, race) {
[Link] = nom; super(nom); // Appelle le constructeur de la
} // classe parent
parle() { [Link] = race;
[Link](`${[Link]} fait du }
bruit.`); parle() {
} [Link](`${[Link]} aboie.`);
} }
}
const myDog = new Chien("Rex", "Berger Allemand");
[Link](); // Rex aboie.
 Classes en JavaScript ES6: Statique

• Les méthodes statiques appartiennent à la classe et non aux

instances (Objets).

class MathUtil {
static add(a, b) {
return a + b;
}
}
[Link]([Link](5, 3)); // 8
 Classes en JavaScript ES6: Encapsulation

À partir de ES2020, on peut utiliser # pour rendre une propriété privée.

class CompteBancaire { const compte = new CompteBancaire(100);

#solde = 0; // Propriété privée
constructor(montantinitial) { [Link]([Link]()); // 100
this.#solde = montantinitial; [Link](50);
}
getSolde() { [Link]([Link]()); // 150
return this.#solde; //[Link](compte.#solde); // Erreur :
}
deposer(montant) { Propriété privée
if (montant > 0) {
this.#solde += montant;
}
}
}
 Classes en JavaScript ES6: Accesseurs
(get et set)

On peut utiliser des getters et setters pour contrôler l'accès aux

propriétés.
class Person { const person1 = new Person("Ali", 25);
#name;
constructor(name, age) { [Link]([Link]); // Ali (grâce au getter)
this.#name = name; [Link] = "Omar"; // Utilisation du setter
}
get name() { [Link]([Link]); // Omar
return this.#name; [Link] = ""; // Erreur gérée par le setter
}
set name(newName) {
this.#name = newName;
}
}
 Exercice

• Refaire l’exercice précédent en utilisant les classes.

 Solution

class Produit {
constructor(libelle, categorie, prix) {
[Link] = libelle;
[Link] = categorie;
[Link] = prix;
}
description() {
[Link](
`Produit: ${[Link]},Catégorie: ${[Link]},Prix: ${
[Link]} DH`
);
}
}
 Solution

class Commande {
constructor() {
[Link] = new Array();
}
ajouter(p) {
[Link](p);
}
afficher() {
[Link]("Liste des produits dans la commande :");
[Link]((produit) => [Link]());
}
}
 Solution

const produit1 = new Produit("Laptop", "Électronique", 7500);

const produit2 = new Produit("Smartphone", "Électronique",
3500);
const produit3 = new Produit("Casque Audio", "Accessoires",
800);
const commande = new Commande();
[Link](produit1);
[Link](produit2);
[Link](produit3);
[Link]();