Introduction

• Trois couches de conception web

Comportement (JavaScript)

Présentation (CSS)

Contenu structuré (HTML 5)

 Motivation

JavaScript un langage incontournable du développement Web

https://www.w3schools.com/js/default.asp
 Motivation

Most popular
technologies in
2024

https://survey.stackoverflow
.co/2024/technology#most-
popular-technologies-
language-prof

7
 Motivation

Best
Programming
Languages to
Learn in 2025

https://www.fullstackacade
my.com/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
https://www.w3schools.com/js/default.asp
• 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
https://www.w3schools.com/js/default.asp

• 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

https://www.w3schools.com/js/default.asp

• 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 https://www.fullstackacademy.com/blog/nine-best-
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 Array.protype.includes
(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

https://www.w3schools.com/js/js_versions.asp 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) Node.js

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++) {
document.write("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 HelloWorld.php

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 HelloWorld.html

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 !

https://www.xenonstack.com/insights/guide-webassembly/

• 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

https://earth.google.com/web/

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="myScript.js">
</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="myScript2.js">
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=”monScript.js”>
<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 document.write 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() {
console.log("Bonjour!");
}

console.log(typeof message); // => function

console.log(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
tableau.length
• 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<tableau.length; i++)
console.log("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)
console.log("tableau[" + i + "] = "+tableau[i]);

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

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

tableau.forEach( (data,index)=> {
console.log("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) {
console.log(`${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;

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array
 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

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String
 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.

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math
 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(jour.getFullYear()); // 2025
https://developer.mozilla.org/fr/docs/Web/J let anniversaire = new Date(2002, 10, 25);
avaScript/Reference/Global_Objects/Date alert(anniversaire.toLocaleString());
// 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 = Math.PI;
var circle = new Function("radius", "pi", body);
console.log(circle(5, pi)); // => 78.5398..
 Fonctions globales

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

document.write(isFinite(Math.log(0))) ;
➔ false
document.write(isNaN("abcd")) ;
➔ true
document.write("12.34"+2) ;
➔ 12.342
document.write(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, obj.popriété_1=valeur_1;
propriété_2: valeur_2, obj.propriété_2=valeur_2,
… …
propriété_n: valeur_n obj.proprié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 Object.create().

const Animal = {
type: "Invertébrés", // Valeur par défaut
afficherType: function () {
console.log(this.type);
}
};
héritage
let animal1 = Object.create(Animal); let animal2 = Object.create(Animal);
// Redéfinit la propriété type
animal2.type = "poisson";

animal1.afficherType(); // Affiche "Invertébrés"

animal2.afficherType(); // 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) {

this.nom = Le_nom;
this.prenom = Le_prenom;
this.Code = Le_CODE;
}
let etd = new Etudiant("Mohamed", "Ben Ali", "1298742046");
console.log(`Votre nom est: ${etd.prenom}`);
 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) {

this.nom = Le_nom;
this.prenom = Le_prenom;
this.CODE = Le_CODE;
this.afficher = affiche_Etudiant;
}
function affiche_Etudiant() {
console.log(
`Votre nom et prénom est: ${this.nom} ${this.prenom} ,Votre CODE est: ${this.CODE}`
);
}
let etd = new Etudiant("Mohamed", "Ben Ali", "1298742046");
etd.afficher();
 Prototype en JavaScript

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

instances sans les dupliquer.
function Personne(nom, age) {
this.nom = nom;
this.age = age;
}
// Ajout de méthode au prototype
Personne.prototype.saluer = function () {
console.log(`Bonjour, je m'appelle ${this.nom}`);
};
const p1 = new Personne("Zineb", 22);
const p2 = new Personne("Reda", 25);
p1.saluer(); // Bonjour, je m'appelle Zineb Saluer() Mémoire
p2.saluer(); // 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) {

this.nom = nom; this.nom = nom;

this.age = age; this.age = age;

} this.saluer = function () {

Personne.prototype.saluer = function () { console.log(`Bonjour, je m'appelle ${this.nom}`);

console.log(`Bonjour, je m'appelle ${this.nom}`); };

}; }

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

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

console.log(p1.saluer === p2.saluer); // true (une console.log(p3.saluer === p4.saluer); // 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

Object.prototype ou en modifiant directement l'objet.

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

Object.prototype Modification d'objet

const Animal = {
const Animal = {
type: "Invertébrés",
type: "Invertébrés",
afficherType: function () {
afficherType: function () { console.log(this.type);
console.log(this.type); }

} };
// Créer un nouvel objet qui hérite de Animal
};
// Ajouter une nouvelle méthode à l'objet Animal let animal1 = Object.create(Animal);
// Ajouter une méthode au prototype de Animal
Animal.deplacer = function () {
Object.getPrototypeOf(Animal).deplacer = function () {
console.log("Je me déplace"); console.log("Je me déplace");
}; };
Animal.deplacer(); // Affiche "Je me déplace"
animal1.deplacer(); // 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 Object.prototype.
console.log(p1.toString()); // [object Object]

• toString() est défini dans Object.prototype, et comme p1 ne l’a pas

directement, JavaScript le cherche dans son prototype.

console.log(Object.getPrototypeOf(p1) === Personne.prototype); // true

console.log(Object.getPrototypeOf(Personne.prototype) === Object.prototype); // 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) {
this.libelle = libelle;
this.categorie = categorie;
this.prix = prix;
}
// Ajout de la méthode description() au prototype de Produit
Produit.prototype.description = function () {
console.log(
`Produit: ${this.libelle}, Catégorie: ${this.categorie}, Prix: ${this.prix} DH`
);
};
 Solution

function Commande() {
this.produits = []; // Tableau de produits
}
Commande.prototype.ajouter = function (produit) {
this.produits.push(produit);
console.log(`${produit.libelle} a été ajouté à la commande.`);
};
Commande.prototype.afficher = function () {
console.log("Liste des produits dans la commande :");
this.produits.forEach((produit) => produit.description());
};
 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);
commande1.ajouter(produit1);
commande1.ajouter(produit2);
commande1.ajouter(produit3);
// Affichage des produits de la commande
commande1.afficher();
 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) {
this.nom = nom;
this.cne = cne;
this.filiere = 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) {
this.nom = nom;
this.cne = cne;
this.filiere = filiere;
}
affiche() {
return `L'étudiant: ${this.nom} est inscrit en ${this.filiere}`;
}
}
const etd1 = new Etudiant("Ali", 123, "MIP");
console.log(etd1.affiche()); // L'étudiant: Ali est inscrit en MIP
 Classes en JavaScript ES6: Héritage

class Animal { class Chien extends Animal {

constructor(nom) { constructor(nom, race) {
this.nom = nom; super(nom); // Appelle le constructeur de la
} // classe parent
parle() { this.race = race;
console.log(`${this.nom} fait du }
bruit.`); parle() {
} console.log(`${this.nom} aboie.`);
} }
}
const myDog = new Chien("Rex", "Berger Allemand");
myDog.parle(); // 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;
}
}
console.log(MathUtil.add(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) { console.log(compte.getSolde()); // 100
this.#solde = montantinitial; compte.deposer(50);
}
getSolde() { console.log(compte.getSolde()); // 150
return this.#solde; //console.log(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) { console.log(person1.name); // Ali (grâce au getter)
this.#name = name; person1.name = "Omar"; // Utilisation du setter
}
get name() { console.log(person1.name); // Omar
return this.#name; person1.name = ""; // 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) {
this.libelle = libelle;
this.categorie = categorie;
this.prix = prix;
}
description() {
console.log(
`Produit: ${this.libelle},Catégorie: ${this.categorie},Prix: ${
this.prix} DH`
);
}
}
 Solution

class Commande {
constructor() {
this.listproduits = new Array();
}
ajouter(p) {
this.listproduits.push(p);
}
afficher() {
console.log("Liste des produits dans la commande :");
this.listproduits.forEach((produit) => produit.description());
}
}
 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();
commande.ajouter(produit1);
commande.ajouter(produit2);
commande.ajouter(produit3);
commande.afficher();
JavaScript
Programmation événementielle
 Déclenchement d’instructions JavaScript

• Programmation événementielle
• JavaScript = langage réactif
• L’interaction avec l’utilisateur est gérée via des événements
• Événement = tout changement d’état du navigateur

82
 Déclenchement d’instructions JavaScript

• Événements JavaScript
• blur : le focus est enlevé d’un objet
• focus : le focus est donné à un objet
• change : la valeur d’un champ de formulaire à été modifiée par l’utilisateur
• mouseover :la souris est déplacée sur un objet
• click : un clic souris est déclenché sur un objet
• select : un champ de formulaire est sélectionné (par tabulation)
• submit : un formulaire est soumis
• load : la page est chargée par le navigateur
• unload : l’utilisateur quitte la page

83
 Déclenchement d’instructions JavaScript

Il est possible de baser l’exécution de fonctions sur des

événements
Événements détectables
• Nom de l’événement précédé de on :
onBlur, onChange, onClick, onFocus, onLoad, onMouseover,
onSelect, onSubmit, onUnload
Association événement - action
• Dans le code HTML, identique à la déclaration d ’une propriété :
<nom_élément attributi = propriétéi événementj = "actionj" >
<button onClick=" envoyer()">Envoyer<button>

84
Déclenchement d’instructions JavaScript

85
Changer l’aspect du formulaire
 Changer l’aspect du formulaire

<form>
<input type="text" value="" name="texte1" onBlur="unchanger(this)" onFocus="changer(this)"/>
<input type="text" value="" name="texte2" onBlur="unchanger(this)" onFocus ="changer(this)"/>
<input type="submit"/>
</form>
<script>
let changer=function(texte){
texte.style.border="2px solid green";
}
let unchanger=function(texte){
texte.style.border="";
}
</script>
Contrôle du formulaire
 Contrôle du formulaire

<form onSubmit="return verifier()">

<input type="text" name="texte" value="" name="texte1" />
<input type="submit" />
</form>
<script>
let verifier=function(){
if (document.forms[0].elements["texte"].value==""){
alert("zone vide");
return false;
}
}
</script>
DOM
Document Object Model
 DOM = Document Object Model

• Le modèle d'objet du document (DOM) donne une

représentation en mémoire des objets du document.
• Un objet est un élément HTML.
• Le DOM est l'adresse par laquelle vous pouvez localiser un objet
de la page HTML.
• Un objet peut être récupéré et exploité par le Javascript (ou un
autre langage de programmation).
 DOM = Document Object Model

Le DOM est structuré

comme un arbre qui suit la
structure hiérarchique du
HTML.

Lorsqu'une page Web est chargée, le navigateur crée un modèle de document pour cette
page. La hiérarchie est utilisée pour organiser vos éléments HTML.
 Utilisation du DOM

A l’aide de Javascript :
• On peut sélectionner un élément (<p> par
exemple), et modifier sa couleur (DOM
document + DOM element).
• On peut sélectionner un élément et lui
assigner un événement (DOM document +
DOM events).
• On peut sélectionner les attributs ("title" par
exemple) et changer leur contenu (je remplace
title="image2" par title="beau tigre") (DOM
document + DOM attribute).
 DOM « document »

• Le DOM « document » qui permet de sélectionner un objet au sien d’un document:

▪ document.getElementById() ; // par son ID
▪ document.getElementsByName() ; // par son attribut « name »
▪ document.getElementsByTagName() ; // par son nom de balise HTML
▪ document.getElementsByClassName() ; // par son nom de la classe
 DOM « document »

• Deux autres méthodes basées sur les selecteurs CSS:

• querySelectorAll(selector): retourne tous les éléments correspondant
au selector css.
• querySelector(selector): retourne uniquement le premier élément
trouvé.
 DOM « element » +DOM « attribute »

• Le DOM « element » permet de faire une action sur les éléments

sélectionnés.
• Le DOM « attribute» permet de de modifier les attributs des
éléments sélectionnés
 DOM « events »

• Le DOM « events » permet de faire une action lors d'un

événement (exemple au clic de la souris)
 DOM « events »: addEventListener

La méthode addEventListener permet d’abonner à l’objet sur lequel elle est

invoquée une fonction pour l’événement précisé.

objet.addEventListener(eventType, listenerFunction)

➢ objet : l’objet ciblé (window, document ou un élément de la page).

➢ eventType : une chaîne de caractères désignant le type d’événement:

"click", "load", "change", "mouseover", "keypress" etc.

➢ listenerFunction : la fonction listener qui sera appelée lorsque l’événement se

produit
 DOM « events »: addEventListener

• click • Error
• dblclick • load
• mousedown • resize
• mousemove • scroll
• mouseover • unload
• mouseout • blur
• mouseup • change
• keydown • focus
• keypress • reset
• keyup • select
• abort • submit
 DOM « events »: addEventListener

• Exemple 1:
window.addEventListener('load',function(){
console.log('la page est totalement chargée');
});
➢Exemple 2:
document.addEventListener('DOMContentLoaded',function(){
let img = document.getElementsByTagName("img")[0];
img.addEventListener('mouseover',function(){
img.style.opacity=0.5;
});
img.addEventListener('mouseout',function(){
img.style.setProperty('opacity',1);
});
});
 DOM « events »: addEventListener

➢ dans une fonction listener, la variable this est définie et désigne l’objet qui a déclenché
l’événement typiquement l’élément du document.

➢ un objet event est créé pour chaque événement. Cet objet est passé en paramètre lors du
déclenchement de la fonction listener associée. Le type d’objet event varie selon
l’événement. Un objet event possède des propriétés qui informent sur l’événement.
 DOM « events »: addEventListener

document.addEventListener("DOMContentLoaded", () => {
let images = document.querySelectorAll("img");
Event interface
images.forEach((img) => {
img.addEventListener("mousemove", (event) => {
event.target.style.setProperty("opacity", 0.5);
});
}); Event interface
images.forEach((img) => {
img.addEventListener("mouseout", (event) => {
event.target.style.setProperty("opacity", 1);
});
});
});
 Modifier le DOM

• Deux Solutions pour modifier le DOM:

• innerHTML
• DOM « pur »
 Modifier le DOM: innerHTML

• Identifier un élément HTML

<div id="un_id"></div>
• Accéder à un élément
e = document.getElementById("un_id");
• Construire une chaîne contenant du HTML
s = "Voici <b>un texte</b>";
• Modifier le contenu de l’élément
e.innerHTML = s;
• Interprétation « automatique » par le navigateur du nouveau contenu
pour modifier le document
 Modifier le DOM « pur »

• Identifier un élément HTML

<div id="un_id"></div>
• Accéder à un élément
div
e = document.getElementById("un_id");
id="un_id"
• Créer un nœud de type « texte »
t1 = document.createTextNode('Voici ');
t2 = document.createTextNode('un texte'); Voici b

• Créer un nouveau nœud de type « balise »

b = document.createElement('b'); un texte

• Construire des liens de parenté

e.appendChild(t1);
b.appendChild(t2); e.appendChild(b);
 Exercice

• Ecrire une page HTML qui contient un script qui vérifie lors de la
soumission du formulaire, si le champ n’est pas vide, sinon, un
message d’erreur est affiché.
1. Utiliser innerHTML pour insérer le message dans la balise span, en gras avec
une couleur rouge.
2. Utiliser une modification manuelle sur le DOM.

//classe bootstrap
form-control is-valid

//classe bootstrap
form-control is-
invalid