Javascript

◼Les fonctions
• Déclaration de fonctions
✓ Syntaxe :
◼ function nomFonction(paramètres){
//corps de la fonction }
✓ Exemple :
◼ function produit(a, b){
return a*b;}
✓ Fonction expression
◼ Exemple : const x = function(a, b){return a*b};
la variable qui enregistre une fonction expression peut être utilisée
comme une fonction : let z=x(4,3);

ASSALE Adjé Louis JavaScript 1

 Javascript
◼Les fonctions
• Déclaration de fonctions
✓ Le constructeur de fonction : Function()
◼ Une fonction peut être définie à l’aide du constructeur de fonction
◼ Exemple :
const maFonction = new Function ("a", "b", "return a*b");
let x = maFonction(4, 3);
◼ Habituellement, on utilise la syntaxe suivante :
◼ Exemple : const maFonction = function (a, b){return a*b};

let x = maFonction(4, 3);

✓ Fonction s’auto-invoquant
◼ Exemple : (function(){
let x = Bonjour; // je m’invoque moi-même
})();
2
fonction anonyme s’auto-invoquant
 Javascript
◼Les fonctions
• Déclaration de fonctions
✓ Les fonctions comme des objets
◼ L’opérateur typeof renvoie "function" pour les fonctions
◼ La propriété arguments.length revoie le nombre d’arguments reçu quand
la fonction est invoquée
function maFonction (a, b){;
return arguments.length;}
◼ La méthode toString() retourne la fonction comme une chaine:
◼ Exemple : function maFonction(a, b){

return a*b;}
let text = maFonction.toString();

ASSALE Adjé Louis JavaScript 3

 Javascript
◼Les fonctions
• Déclaration de fonctions
✓ Arrow fonction (fonctions fléchées =>)
◼ Avant //ES5
var x = function(x, y) {
return x*y;}
◼ Maintenant //ES6
const x = (x, y) => x*y; 0u
const x = (x, y) => { return x*y;}
◼ On omet le return et les accolades ({ }) que si la fonction n’a qu’une
seule instruction
◼ Si la fonction n’a qu’un seul paramètre on peut omettre les parenthèses :
exemple : hello = val => "Hello" + val;
◼ Les arrow fonctions ne sont pas supportées par le navigateur IE11 et
antérieur 4
 Javascript
◼Les fonctions
• Les paramètres des fonctions
✓ Paramètres et arguments de fonctions
◼ Syntaxe de définition de fonction
function nomFonction(paramètre1, paramètre2, paramètre3) {
// code de la fonction
}
◼ Les paramètres de fonction sont les noms listés dans la définition de la
fonction
◼ Les arguments de fonction sont les valeurs réelles passées à (et reçues
par) la fonction
◼ Règles des paramètres :
◼ On ne spécifie pas le type des paramètres lors de la déclaration

◼ La fonction ne vérifie pas les types des arguments passés

◼ La fonction ne vérifie pas le nombre d’arguments reçu

5
 Javascript
◼Les fonctions
• Les paramètres des fonctions
✓ Paramètres par défaut de fonctions
◼ Si une fonction est appelée avec un paramètre manquant la valeur
undefined est assignée à ce paramètre. Ce qui peut être gênant des fois
◼ ES6 permet de définir des fonctions avec des paramètres à valeur par
défaut. Exemple : function maFonction(x, y=10){
return x + y;}
maFonction(5);
✓ Fonctions à nombre de paramètres variable (…) :
◼ Le (…) permet de traite l’argument comme un tableau.
Exemple : function sum(…args){ let sum = 0;
for(let arg of args) sum += arg;
return sum;}
let x = sum(4, 9, 11, 15, 21); 6
 JavaScript
◼Les fonctions
• JavaScript Callbacks
✓ Définition
◼ Un callback est une fonction passée comme argument à une autre
◼ Cette technique permet à une fonction d’appeler une autre
◼ Une fonction callback peut s’exécuter après qu’une autre est finie
✓ Exemple sans callback
◼ function affiche(somme){
document.getElementById(demo).innerHTML = somme;}
function monCalculateur(num1, num2){
let som = num1 + num2;
affiche(som);} Le problème ici, on ne peut pas
monCalculateur(2, 5); empêcher la fonction monCaculateur
d’afficher le résultat
ASSALE Adjé Louis JavaScript 7
 JavaScript
◼Les fonctions
• JavaScript Callbacks
✓ Exemple avec callback
◼ function affiche(somme){
document.getElementById(demo).innerHTML = somme;}
function monCalculateur(num1, num2, monCallback){
let som = num1 + num2;
monCallback(som);}
monCalculateur(2, 5, affiche);
◼ Ici, affiche est appelée fonction callback, il est passé en argument de la
fonction monCalculateur
◼ Remarquer quand l’on passe une fonction en argument, on ne met pas
les parenthèses à cette fonction

ASSALE Adjé Louis JavaScript 8

 JavaScript
◼Les fonctions
• JavaScript Callbacks
✓ Exemple2 avec callback
◼ // Créer un tableau
const mesNombres = [4, 1, -20, -3, -4, 5, 8, -7];
//Appel de supprNeg avec un callback
const posNombres = supprNeg(mesNombres, (x) => x>=0);
//Affichage du résultat
document.getElementById(demo).InnerHTML = posNombres
//définition de la fonction supprNeg
function supprNeg(nombres, callback){
const monTableau = [];
for(const x in nombres){
if(callback(x)){
monTableau.push(x);} }
return monTableau;
} 9
 JavaScript
◼Les fonctions
• JavaScript Callbacks
✓ Quand utiliser un callback?
◼ Les exemples précédents sont simples pour montrer la syntaxe du
callback
◼ Là où les callbacks sont intéressants, c’est dans les fonctions
asynchrones où une fonction doit attendre une autre fonction (comme
attendre le chargement d’um fichier)

ASSALE Adjé Louis JavaScript 10

 JavaScript
◼Les fonctions
• JavaScript Asynchrone
✓ principe
◼ « je finirai plus tard! »
◼ Les fonctions s’exécutant en parallèle avec d’autres fonctions sont
appelées asynchrones
◼ Un bon exemple est la fonction JavaScript setTimeout()
✓ Exemple : attente d’un Timeout
◼ setTimeout(maFonction, 3000);
function maFonction(){
document.getElementById(demo).innerHTML = je vous aime!!;
◼ Dans cet exemple, maFonction est le callback, elle sera appelée après
3s. La valeur 3000 est exprimée en millisecondes

ASSALE Adjé Louis JavaScript 11

 JavaScript
◼Les fonctions
• JavaScript Asynchrone
✓ Exemple : attente d’un Timeout
◼ Autre écriture
◼ setTimeout(function() {maFonction(je vous aime!!);}, 3000);
function maFonction(valeur){
document.getElementById(demo).innerHTML = valeur;
◼ Dans cet exemple, function(){maFonction(je vous aime!!);} est utilisée
comme un callback, c’est une fonction complète.

ASSALE Adjé Louis JavaScript 12

 JavaScript
◼Les fonctions
• JavaScript Asynchrone
✓ Exemple : attente par intervalle
◼ La fonction setIntervals() prend en paramètre un callback qui
s’exécutera à chaque intervalle de temps
◼ setInterval(maFonction, 1000);
function maFonction(){
let d = new Date();
document.getElementById(demo).innerHTML =
d.getHours() + : + d.getMinutes() + : + d.getSeconds();
}
◼ Dans l’exemple, la fonction maFonction() sera appelée chaque seconde

ASSALE Adjé Louis JavaScript 13

 JavaScript
◼Les fonctions
• JavaScript Asynchrone
✓ Alternatives à callback
◼ Avec la programmation asynchrone, les programmes JavaScript peuvent
démarrer des tâches de longue durée et continuer à exécuter d’autres
tâches en parallèle
◼ Cependant, les programmes asynchrones sont difficiles à écrire et
difficile à déboguer
◼ À cause de ça, les méthodes JavaScript asynchrones les plus modernes
n’utilisent pas de callbacks. À la place, la programmation asynchrone en
JavaScript est résolue à l’aide de Promises.

ASSALE Adjé Louis JavaScript 14

 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ principe
◼ « je promets un résultat »
◼ « Producing code » est du code qui va prendre un certain temps
◼ « Consuming code » est du code qui doit attendre le résultat
◼ Une Promise est un objet JavaScript qui lie le « producing code » et le
« consuming code ».
✓ Syntaxe :
◼ Un objet « Promise » contient à la fois le « producing code » et les
appels au « consuming code »

ASSALE Adjé Louis JavaScript 15

 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ Syntaxe :
◼ Let maPromise = new Promise(function(maSolution, monRejet){
// « producing code » (peut prendre un certain temps)

maSolution(); //quand succès

monRejet(); //quand erreur
});
//« consuming code »(qui doit attendre une promesse tenue)
maPromise.then(
function(value){ /* code en cas de succès*/}
function(error){/* code en cas d’erreur*/}
◼ Quand le « producing code » obtient le résultat, il devrait appeler l’un
des 2 callbacks :
16
 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ Syntaxe :
◼ Quand le « producing code » obtient le résultat, il devrait appeler l’un
des 2 callbacks :
◼ Résultat Appel
succès maSolution(result value)
Erreur monRejet(error object)
✓ Propriétés de l’objet Promise
◼ Un objet « Promise » en JavaScript peut être :
◼ Pending

◼ Fulfilled

◼ Rejected

ASSALE Adjé Louis JavaScript 17

 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ Propriétés de l’objet Promise
◼ L’objet Promise prend en charge 2 propriétés : state and result
◼ Quand la propriété state de l’objet Promise est pending
(working), la propriété result est indéfinie
◼ Quand la propriété state de l’objet Promise est fulfilled, la
propriété result est une valeur
◼ Quand la propriété state de l’objet Promise est rejected, la
propriété result est un objet erreur
◼ L’on ne peut pas accéder aux propriétés state et result de l’objet Promise
◼ On utilise les méthodes de l’objet Promise

ASSALE Adjé Louis JavaScript 18

 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ Comment utiliser un objet « Promise »
◼ Syntaxe :
◼ maPromise.then(

function(value){/*code en cas de succès*/}

function(error){/*code en cas d’erreur*/}
);
◼ Promise.then() prends 2 arguments, un callback pour le succès et un
autre en cas d’échec
◼ Les 2 sont optionnels, ainsi on peut ajouter un callback pour le succès
ou l’échec seulement

ASSALE Adjé Louis JavaScript 19

 JavaScript
◼Les Promises
• JavaScript objet Promise
✓ Comment utiliser un objet « Promise »
◼ Par exemple :
◼ function affiche(somme){

document.getElementById(demo).innerHTML = somme;}
let maPromise = new Promise(function(maSolution, monRejet){
let x=0;
//producing code (cela peut prendre du temps)
if (x==0)
maSolution(OK);
else
monRejet(Erreur);
});
.maPromise.then(
function(value){affiche(value)}
20
function(error){affiche(error)});
 JavaScript
◼Les Promises
• JavaScript objet Promise Exemples
✓ Attente d’un timeout
◼ Exemple avec callback
◼ setTimout(function(){maFonction(je vous aime!!);}, 3000);

function maFonction(valeur){
document.getElementById(demo).innerHTML = valeur; }
◼ Exemple avec Promise
◼ let maPromise = new Promise(function(maSolution, monRejet) {

setTimeout(fumction(){maSolution(je vous aime!!);}, 3000);

});
maPromise.then(function(valeur){
document.getElementById(demo).innerHTML = valeur;
});
◼ Ici l’objet Promise n’a qu’un seul callback celui du succès 21
 JavaScript
◼Les Promises
• JavaScript objet Promise Exemples
✓ Attente d’un fichier
◼ Exemple avec callback
◼ function getFile(monCallback){

let req = new XMLHTTPRequest();

req.open(GET, monFichier.html);
req.onload = function(){
if(req.status == 200)
monCallback(req.responseTEXT);
else
monCallback(Erreur:, + req.status);
}
req.send();
}
getFile(affiche(); 22
 JavaScript
◼Les Promises
• JavaScript objet Promise Exemples
✓ Attente d’un fichier
◼ Exemple avec Promise
◼ let maPromise = new Promise(function(maSolution, monRejet){

let req = new XMLHTTPRequest();

req.open(GET, monFichier.html);
req.onload = function(){
if(req.status == 200)
maSolution(req.response);
else
monRejet(Fichier non trouvé);
}
req.send();
});
23
 JavaScript
◼Les Promises
• JavaScript objet Promise Exemples
✓ Attente d’un fichier
◼ Exemple avec Promise (suite)
◼ maPromise.then(

function(value){affiche(value);}
function(error){affiche(error);}
);

ASSALE Adjé Louis JavaScript 24

 JavaScript
◼Les Promises
• JavaScript Async
✓ Principe
◼ async et await rendent les promesses plus faciles à écrire
◼ async fait qu’une fonction renvoie un objet « Promise »
◼ await fait attendre une fonction pour une promesse
✓ Syntaxe de Async
◼ Le mot clé async devant une fonction l’a fait renvoyé une Promise
◼ Exemple :
◼ async function maFonction(){

return Bonjour;}
◼ Ce qui équivaut à :

function maFonction(){
return Promise.resolve(Bonjour);} 25
 JavaScript
◼Les Promises
• JavaScript Async
✓ Syntaxe de Async
◼ Exemple : Voici comment utiliser la promesse
◼ maFonction().then(

function(valeur){/* code en cas de réussite*/}

function(erreur){/*code en cas d’erreur*/}
);
✓ Exemple async :
◼ Exemple :
◼ async function maFonction(){

return Bonjour;}
maFonction().then(
function(valeur){affiche(valeur);}
function(erreur){affiche(erreur);} 26
 JavaScript
◼Les Promises
• JavaScript Async
✓ Exemple async :
◼ Exemple :
◼ Ou simplement si l’on attend une valeur normale pas une erreur

◼ async function maFonction(){

return Bonjour;}
maFonction().then(
function(valeur){affiche(valeur);}
);

ASSALE Adjé Louis JavaScript 27

 JavaScript
◼Les Promises
• JavaScript Async
✓ Syntaxe await
◼ Le mot clé await ne peut être utilisé que dans une fonction asynchrone
◼ Le mot clé await fait que la fonction suspend l’exécution et attend une
promesse résolue avant de continuer
◼ let valeur = await promise;
✓ Exemples await :
◼ Syntaxe basique
◼ async function affiche(){

let maPromise = new Promise(function(resolve, reject){

resolve(je vous aime);});
document.getElementById(demo).innerHTML = await
maPromise;
} 28
 JavaScript
◼Les Promises
• JavaScript Async
✓ Exemples await :
◼ Syntaxe basique (suite)
◼ affiche();

◼ Les deux arguments (resolve et reject) sont prédéfinis par

JavaScript. On les appelle quand la fonction exécuteur est prête
◼ Souvent l’on n’a pas besoin de la fonction reject

◼ Exemple sans reject

◼ async function affiche(){

let maPromise = new Promise(function(resolve){

resolve(je vous aime);});
document.getElementById(demo).innerHTML = await
maPromise;
}
affiche(); 29
 JavaScript
◼Les Promises
• JavaScript Async
✓ Exemples await :
◼ En attente d’un timeout
◼ async function affiche(){
let maPromise = new Promise(function(resolve){
setTimeout (function() {resolve(je vous aime);}, 3000);
});
document.getElementById(demo).innerHTML = await
maPromise;
}
affiche();

ASSALE Adjé Louis JavaScript 30

 JavaScript
◼Les Promises
• JavaScript Async
✓ Exemples await :
◼ En attente d’un fichier
◼ async function getFile(){
let maPromise = new Promise(function(resolve){
let req = new XMLHTTPRequest();
req.open(GET, monFichier.html);
req.onload = function(){
if(req.status == 200)
resolve(req.response);
else
resolve(Fichier non trouvé);
}
req.send();
}); 31
 JavaScript
◼Les Promises
• JavaScript Async
✓ Exemples await :
◼ En attente d’un fichier (suite)
◼ document.getElementById(demo).innerHTML = await
maPromise;
}
getFile();

ASSALE Adjé Louis JavaScript 32

 JavaScript
◼Les Classes
• Création
✓ Principe
◼ Utiliser le mot clé class pour créer une class
◼ Toujours ajouter une méthode appelée constructor()
✓ Syntaxe
class NomClasse {
◼
constructor(){ …}
…
}
class Voiture{
✓ Exemple :
constructor(nom, annee){
this.nom = nom;
this.annee = annee ;
}
ASSALE Adjé Louis JavaScript 33
 JavaScript
◼Les Classes
• Utilisation
✓ Principe
◼ Une classe sert à créer des objets
✓ Exemple :
◼ const maVoiture1 = new Voiture(Ford, 2014);
const maVoiture2 = new Voiture(Audi, 2019);
✓ La méthode constructor()
◼ C’est une méthode spéciale :
◼ Elle est exécutée automatiquement quand un nouvel objet est créé

◼ Elle est utilisée pour initialiser les propriétés des objets

ASSALE Adjé Louis JavaScript 34

 JavaScript
◼Les Classes
• Les méthodes de classes
✓ Principe
◼ Elles sont créées avec la même syntaxe que les méthodes des objets
◼ On peut ajouter autant de méthodes
✓ Syntaxe :
◼ class NomClasse {
constructor(){ …}
methode_1(){ …}
methode_2(){ …}
…
}

ASSALE Adjé Louis JavaScript 35

 JavaScript
◼Les Classes
• Les méthodes de classes
class Voiture{
✓ Exemple :
constructor(nom, annee){
this.nom = nom;
this.annee = annee ;
}
}
age(x){
return x - this.annee;}

const date = new Date();

let an = date.getFullYear();

const maVoiture = new Voiture(Ford, 2014);

document.getElementById(demo).innerHTML =
ASSALE Adjé Louis ma voiture est vielle de + maVoiture.age(an) + ans; 36
 JavaScript
◼Les Classes
• Héritage de classes
✓ Principe
◼ Pour créer une classe héritière, on utilise le mot clé extends
◼ la classe héritière hérite de toutes les méthodes de l’autre classe
✓ Exemple : class Voiture{
constructor(lenom){
this.nom = lenom;
}
present(){
return je possède une + this.nom;
}
}
ASSALE Adjé Louis JavaScript 37
 JavaScript
◼Les Classes
• Héritage de classes
✓ Exemple : class Model extends Voiture{
constructor(lenom, lemodel){
super(lenom);
this.model = lemodel;
La méthode super() se }
réfère à la classe mère
affiche(){
return this.present() + elle est une + this.model;}
}

let maVoiture = new Model(Ford, Mustang);

document.getElementById(demo).innerHTML =
ASSALE Adjé Louis maVoiture.affiche(); 38
 JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Définition et principe :
◼ Les getters et setters sont des méthodes permettant d’accéder aux
propriétés
◼ Pour ajouter des getters et setters, on utilise les mots clés get et set
◼ Le nom du getter/setter ne doit pas être le même que le nom de la
propriété
◼ Certains programmeurs utilisent le caractère « _ » avant le nom de la
propriété pour séparer le getter/setter de la propriété
◼ Bien que le getter/setter soit une méthode, on l’utilise comme une
propriété

ASSALE Adjé Louis JavaScript 39

 JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 1 : création de getter/setter pour la propriété « carname »
◼ class Car{
constructor(brand){
this,carname = brand;
}
get cnam(){
return this.carname;
} const maVoiture = new Car(Ford);
set cnam(x){ Document.getElementById(demo).innerHTML
this.carname = x; = maVoiture.cnam;
}
}
ASSALE Adjé Louis JavaScript 40
 JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 2 : utilisation de « _ »
◼ class Car{
constructor(brand){
this,_carname = brand;
}
get carname(){
return this._carname;
}
set carname(x){ const maVoiture = new Car(Ford);
this._carname = x; document.getElementById(demo).innerHTML
} = maVoiture.carname;
}
ASSALE Adjé Louis JavaScript 41
 JavaScript
◼Les Classes
• Accesseurs (getters) et mutateurs (setters)
✓ Exemples :
◼ Exemple 3 : utilisation du setter
◼ class Car{
constructor(brand){
this,_carname = brand;
}
get carname(){
return this._carname;
} const maVoiture = new Car(Ford);
set carname(x){ maVoiture.carname = Volvo;
this._carname = x; document.getElementById(demo).innerHTML
} = maVoiture.carname;
}
ASSALE Adjé Louis JavaScript 42
 JavaScript
◼Les Classes
• Méthodes statiques
✓ Principe :
◼ Les méthodes statiques se définissent dans la classe
◼ On ne peut pas appeler une méthode statique à partir d’une instance,
seulement à partir de la classe objet
◼ class Car{

constructor(name){
this,name = name;
} const maVoiture = new Car(Ford);
static hello(){ //appel de hello correct
return Hello!!; document.getElementById(demo).innerHTML
} = Car.hello();
}

ASSALE Adjé Louis JavaScript 43

 Javascript
◼Travaux pratiques Nº1
• Exercices du fichier TD_ JavaScript_avancé

ASSALE Adjé Louis JavaScript 44