Scribd
Importer
47 vues107 pages

DOM Ajax IndexedDB

Transféré par

Narjis Abi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
47 vues107 pages

DOM Ajax IndexedDB

Transféré par

Narjis Abi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 107

Partie III :

Langage JS TP2

Pr. Brahim HMEDNA


2

Définition

JavaScript (JS)

Un langage de script ( interprété ) coté client


Créé en 1995 par Netscape, nom initial était
LiveScript .

Brendan Eich
3

JavaScript (JS)
Langage de programmation qui ajoute
de l'interactivité à votre site web

Manipulation Animations Formulaires Communication


du contenu dynamiques avec le serveur
4

Le code JavaScript est exécuté


par le moteur JavaScript du
navigateur.

Analyser le code pour vérifier sa


syntaxe et sa validité.

Exécuter le code ligne par ligne


<!DOCTYPE html>
<html>
<head> Js interne
<title>Ma page web</title>

<script>
console.log("Le script est exécuté !");
</script>

</head>

<body>
<h1>Mon titre</h1>
<p>Du contenu intéressant ici.</p>
</body>
</html>
<!DOCTYPE html>
<html> Js interne
<head>
<title>Ma page web</title>
</head>
<body>
<h1>Mon titre</h1>
<p>Du contenu intéressant ici.</p>

<script>
console.log("Le script est exécuté !");
</script>

</body>
</html>
<!DOCTYPE html> JS externe
<html>
<head>
<title>Ma page web</title>
<script src="mon_script.js"></script>
</head>

<body>
<h1>Mon titre</h1>
HTML contenu
<p>Du downloadintéressant
analyser exécuter
ici.</p> HTML
</body>
</html> time
<!DOCTYPE html> JS externe
<html>
<head>
<title>Ma page web</title>
<script async src="mon_script.js"></script>
</head>

<body> HTML exécuter HTML


<h1>Mon titre</h1>
analyser
<p>Du contenu intéressant ici.</p>
</body> download
</html>
time
9

Notre premier script JS

<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
Chrome devtools
<script>
console.log(" hello FSA ");
</script>
</head>
<body>
<h1>Mon titre</h1>
<p>Du contenu intéressant ici.</p>
</body>
</html>
10

DOM :
Document
Object Model
<!DOCTYPE html> Arbre DOM
(Document Object Model)
<html>
Document
<head>
<title> MonSite </title> html
<meta charset="utf-8">
head body
</head>
<body> title meta

</body> MonSite Utf-8

</html>
<!DOCTYPE html> Arbre DOM
<html> Document
<head>
<title> MonSite </title> html
<meta charset=“utf-8">
</head> head body
<body>
<div> title div
<p> meta
apprendre html
MonSit p
<a href="https://www.coursera.org" >
e Utf-8
coursera
</a>
Apprendre
</p>
html
a
</div>
</body> href
Coursera
3
Arbre DOM
4
2
JS
navigateur

1 Code HTML
Qu'est-ce que le DOM

DOM (Document Object Model)


est une représentation orientée objet de la structure et
contenu d’une page web.

• Chaque élément HTML est un objet avec propres


propriétés et méthodes
• Le DOM fournit une API qui permet à JavaScript,
d'interagir avec le document
Terminologie <P id="p1" class="title">
Bonjour le monde !
</P>
Element
id P
className
p1
InnerHTML
title
Style
Bonjour le monde !
…
getAttribute(nom)
getAttribute(nom)
setAttribute(nom, valeur)
setAttribute(nom,
valeur)
DOM

Sélectionner des Navigation Modifier les Evènements


éléments DOM éléments
DOM

Sélectionner des Navigation Modifier les Evènements


éléments DOM éléments
getElementById( )
est utilisée pour accéder à un élément HTML
spécifique en utilisant la valeur unique de son
attribut id

document.getElementById("id") ;
19

getElementById( )
<div id="monDiv">
<span id="monSpan">
Bonjour le monde !
</span>
</div>

<script>
let el = document.getElementById("monSpan") ;
console.log(el) ;
// <span id="monSpan"> Bonjour le monde ! </span>
</script>
getElementsByTagName( )
Permet de récupérer tous les éléments HTML d'une
page web qui ont un nom de balise spécifique

document.getElementsByTagName("div") ;
21

getElementsByTagName( )

<div id="monDiv">
<P> Bonjour le monde ! </P>
</div>
<P> Deuxième paragraphe </P>

<script>
let par = document.getElementsByTagName("P") ;
console.log(par[0]) ; // <P> Bonjour le monde ! </P>
console.log(par[1]) ; // <P> Deuxième paragraphe </P>
</script>
getElementsByName( )
est utilisée pour sélectionner tous les éléments HTML
d'une page web qui ont un attribut name spécifique

document.getElementsByName("myname") ;
23

getElementsByName( )

<form>
<input type="checkbox" name="fruit" value="pomme">
<input type="checkbox" name="fruit" value="banane">
</form>

<script>
let fr = document.getElementsByName("fruit") ;
console.log(fr[0]) ;
// <input type="checkbox" name="fruit" value="pomme">
</script>
getElementsByClassName( )
Retourne la liste des éléments HTML à partir de leur
classe

document.getElementsByClassName("myClass") ;
25

getElementsByClassName( )

<ul>
<li class="item"> JAVA </li>
<li class="item"> C++ </li>
</ul>

<script>
let lang = document.getElementsByClassName("item") ;
console.log(lang[1]) ;
// <li class="item"> C++ </li>
</script>
querySelector( )
Permet de sélectionner le premier élément HTML
d'une page web qui correspond à un sélecteur CSS
donné.

document.querySelector("sélecteur css") ;
27

querySelector( )

<ul>
<li class="item"> JAVA </li>
<li class="item"> C++ </li>
</ul>

<script>
let lang = document.querySelector(".item") ;
console.log(lang) ;
// <li class="item"> JAVA </li>
</script>
28

querySelector( )

<ul>
<li class="item1"> PHP </li>
<li class="item2"> C++ </li>
<li class="item2"> C </li>
</ul>

<script>
let lang = document.querySelector(".item2") ;
console.log(lang) ;
// <li class="item2"> C++ </li>
</script>
29

querySelector( )

<ul>
<li class="item1"> JAVA </li>
<li class="item2"> C++ </li>
<li id="item3"> C </li>
</ul>

<script>
let lang = document.querySelector("#item3") ;
console.log(lang) ;
// <li class="item2"> C </li>
</script>
querySelectorALL( )
Permet de sélectionner tous les éléments HTML
d'une page web correspondant à un sélecteur CSS
donné.

document.querySelectorALL("sélecteur css") ;
31

querySelectorAll( )

<ul>
<li class="item"> JAVA </li>
<li class="item"> C++ </li>
<li class="item"> C </li>
</ul>

<script>
let lang = document.querySelectorAll(".item") ;
console.log(lang[2]) ;
// <li class="item2"> C </li>
</script>
Résumé
document.getElementById("myId")

document. getElementByTagName("p")

document. getElementByClassName("title")

Sélectionner des document. querySelector(".item")


éléments

document. querySelectorAll("#card")
DOM

Sélectionner des Navigation Modifier les Evènements


éléments DOM éléments
Document

La navigation dans le
DOM html
permet de se déplacer head
d'un élément à un body
autre en utilisant les
relations de parenté title meta div
entre les éléments

p a
Document

La navigation dans le
DOM html
permet de se déplacer head
d'un élément à un body
autre en utilisant les
relations de parenté title meta div
entre les éléments

p a
36

childNodes
permet d'accéder à tous les éléments enfants directs
d'un élément HTML donné

html <script>
let el =document.querySelector("html");
let Els = el.childNodes ;
ChildNodes // Els[0] → <head> </head>
head body </script>
37

parentNode

Elle renvoie le nœud parent direct d'un nœud donné.

html <script>
let el =document.querySelector("body");
let Pel = el.parentNode ;
ParentNode // Pel → <head> </head>
head body </script>
38

firstChild

La propriété firstChild renvoie le premier nœud


enfant d'un élément.

html <script>
let els =document.querySelector("html");
FirstChild
let premierElement = els.firstChild;
// <head> </head>
head body </script>
39

LastChild
La propriété lastChild renvoie le dernier nœud enfant
d'un élément.

html let liste = document.querySelector(“html");


<script>
let dernierElement = liste.lastChild;
let els =document.querySelector("html");
LastChild
let dernierElement = els.lastChild;
// <body> </body>
head body </script>
40

nextSibling
elle renvoie le nœud qui suit immédiatement un
nœud donné

html
<script>
let el =document.querySelector("head");
let bodyElement = el.nextSibling ;
head body
// <body> </body>
NextSibling </script>
41

previousSibling
elle renvoie le nœud qui précède immédiatement un
nœud donné

html let liste = document.querySelector(“body");


<script>
let headElement = liste.previousSibling;
let el =document.querySelector("body");
let headElement = el.previousSibling ;
// <head> </head>
head body </script>
PreviousSibling
Résumé
el.childNodes

el. parentNode

el.FirstChild

el.LastChild
Navigation
DOM el.NextSibling

el.previousSibling
DOM

Sélectionner des Navigation Modifier les Evènements


éléments DOM éléments
innerHTML
permet de modifier tout le contenu HTML d'un
élément

document.getElementById("id").innerHTML = " new ";


45

innerHTML

<div id="monDiv">
Avant

<P> Bonjour le monde ! </P>


</div>

<script>
let mydiv = document.getElementById("monDiv") ;
mydiv.innerHTML = " <h1> hello FSA ! </h1>"
</script>

<div id="monDiv">
Apres

<h1> hello FSA </h1>


</div>
46

innerHTML

<div id="monDiv">
Avant

<P> Bonjour le monde ! </P>


</div>

<script>
let mydiv = document.getElementById("monDiv") ;
mydiv.innerHTML += " <h1> hello FSA ! </h1>"
</script>
<div id="monDiv">
Apres

<P> Bonjour le monde ! </P>


<h1> hello FSA </h1>
</div>
innerText
permet de modifier tout le contenu textuel d'un
élément

document.getElementsById("id").innerText = " new Text ";


48

innerText

<div>
Avant

<P id="monPar"> hello </P>


</div>

<script>
let myPar = document.getElementById("monPar") ;
myPar.innerText = " Bonjour le monde ! " ;
</script>

<div>
Apres

<P id="monPar"> Bonjour le monde ! </P>


</div>
setAttribute
C'est une méthode fondamentale pour manipuler les
attributs des éléments HTML en JavaScript

el.setAttribute("Nom" , "valeur");
50

setAttribute

<div>
Avant

<img id="profil" src="photo1.jpg">


</div>

<script>
let image = document.getElementById("profil") ;
image.setAttribute("src", "photo2.jpg") ;
</script>

<div>
Apres

<img id="profil" src="photo2.jpg">


</div>
51

setAttribute

<div>
Avant

<h1 id="title"> Bonjour FSA </h1>


</div>

<script>
let T = document.getElementById("title") ;
T.setAttribute("style", "color:red") ;
</script>

<div>
Apres

<h1 id="title" style="color:red" > Bonjour FSA </h1>


</div>
style
Elle permet d'accéder à tous les propriétés CSS d'un
élément et de les modifier dynamiquement

el.style.propriete = "valeur";
53

Style

<div>
Avant

<h1 id="title"> Bonjour FSA </h1>


</div>

<script>
let T = document.getElementById("title") ;
T.style.color = "red" ;
</script>

<div>
Apres

<h1 id="title" style="color:red" > Bonjour FSA </h1>


</div>
classList
C'est une propriété fondamentale pour gérer les
classes CSS d'un élément HTML en JavaScript

el.classList.add = "newClass";
55

ClassList

<div>
Avant

<h1 id="title" class ="t1" > Bonjour FSA </h1>


</div>
<script>
let T = document.getElementById("title") ;
T.ClassList.add("t2") ;
T.ClassList.remove("t1") ;
</script>
<div>
Apres

<h1 id="title" class ="t2" > Bonjour FSA </h1>


</div>
createElement()
crée un nouvel élément (vide) et retourne l’objet
DOM correspondant

let NewElP = document.createElement("nomDeLaBalise");


<div id="monDiv">
Avant

<h1> Bonjour le monde ! </h1>


</div>
let NewElP = document.createElement("P");
NewElP.innerHTML = "hello world";
let el = document.getElementById("monDiv") ;
el.appendChild(NewElP)

<div id="monDiv">
<h1> Bonjour le monde ! </h1>
Apres

<p> hello world </p>


</div>
Remove()
est une méthode simple et directe pour supprimer
un élément HTML du DOM.

el.remove();
59

Supprimer un élément
<div>
Avant

<p id="monP"> Bonjour le monde ! </p>


</div>

<script>
let el = document.getElementById("monP") ;
el.remove() ;
</script>
<div>
Apres

</div>
Résumé InnerHTML

InnerText

Style

SetAttribute()

ClassList()
Modifier les
éléments
createElement()

Remove()
DOM

Sélectionner des Navigation Modifier les Événements


éléments DOM éléments déclencheurs
Evènement
Les événements permettent aux utilisateurs d'interagir
avec le contenu Web et d'effectuer une action spécifique

clics de souris mouvements Saisies au


de curseur clavier
Ecouteur d’évènement

btnEl.onevent = function() { } ;

Acheter
évènement
Utilisateur Fonction
64

OnClick

<button id="buy"> Acheter </button>

<script>
let btn = document.getElementById("buy") ;
btn.onclick = function() {
// Code à exécuter au clic
};
</script>
65

addEventListener

<button id="buy"> Acheter </button>

<script>
let btn = document.getElementById("buy") ;
btn.addEventListener('click', function() {
// Code à exécuter au clic
});
</script>
66

addEventListener

<button id="buy"> Acheter </button>

<script>
let btn = document.getElementById("buy") ;
function commander() {
// Code à exécuter au clic
};
btn.addEventListener('click’, commander);
</script>
67

ondblclick onkeypress

Quand un texte est double- Lorsqu'un utilisateur appuie


cliqué

Onfocus onLoad

Lorsqu'un champ de saisie Une fois la page chargée


devient actif

onmouseover onSubmit

Lorsque la souris survole un Lorsqu'un utilisateur clique


élément sur le bouton d'envoi
Résumé

el.onevent = function() { } ;

el.addEventListener( )
Événements
déclencheurs
AJAX
Asynchronous Javascript and XmlHttpRequest
70

Communication Client-Serveur
Le mode Synchrone
Client

Serveur
1 Requête HTTP

3 Réponse

Pendant ce temps, le client est bloqué et ne peut rien faire d'autre.


Une fois la réponse reçue, le client affiche la nouvelle page (rechargement complet).
71

Les limites de la communication synchrone

Blocage de Mauvaise expérience Performance


l'interface utilisateur limitée
72

Communication Client-Serveur
Le mode asynchrone
Client

Serveur
Requête HTTP
1 GET /APi/products

3 HTTP/2 200 OK
content/type: application/json
[{id: 123 , name: "Espresso", price: 7 }] 2

Le client continue d'interagir avec la page pendant le traitement de la requête.


Permet de mettre à jour seulement les parties nécessaires de la page
73

AJAX
Asynchronous Javascript and XmlHttpRequest

AJAX = JavaScript + XML (ou JSON).

C'est un ensemble de techniques qui permet à une


page web de communiquer avec un serveur en
arrière-plan, sans avoir à se recharger complètement.
74

XmlHttpRequest (XHR)
un objet JavaScript (API) qui permet d'effectuer des
requêtes HTTP asynchrones.

Il est le pilier Largement peut recevoir données


d'AJAX depuis supporté par des données récupérées
plus de 25 ans. tous les aux formats utilisées pour
navigateurs XML et JSON. modifier le
HTML via
JavaScript/DOM.
75

Introduction à fetch()

fetch() est une API moderne qui simplifie les requêtes


asynchrones en JavaScript. nous permet d'effectuer des requêtes
ajax semblables à XMLHttpRequest (XHR)

Syntaxe plus concise et plus lisible (basée sur les Promesses)

Décode les formats courants (JSON, texte, blob,...).

Gère automatiquement les redirections HTTP.


76

'

Anatomie d’une requête fetch()

URL de la ressource à récupérer

fetch('api.example.com/data', {options} )

Objet optionnel qui permet de


configurer la requête
77

'

Anatomie d’une requête fetch()

Un objet Headers pour


La méthode HTTP (GET, POST, PUT, DELETE). définir les en-têtes HTTP

fetch('api.example.com/add’, {
method: 'POST',
headers: { "Content-type": "application/json " },
body: { … }
})

Les données envoyées avec la requête. Peut


être du texte, JSON, un FormData, etc
78

Pendding .then() .then()


Fetch ()

.catch()

fetch() renvoie une promesse (Promise).


.then() est une méthode des promesses qui permet d'enchaîner des actions à effectuer
lorsque la promesse est résolue (la requête est terminée).
.catch() est une méthode des promesses qui permet de capturer et de gérer les erreurs qui
surviennent lors d'une requête Fetch.
79

'

.then() la promesse est tenue


Fetch renvoie un objet Response qui représente la réponse
du serveur à votre requête.

fetch('api.example.com/data’, {
method: 'Get',
headers: { "Content-type": "application/json " }
})
.then(function (res) => { return res.json(); } )
.then(function (data) => { console.table(data) )
80

.catch() la promesse est rejetée


.catch() est une méthode des promesses qui permet de capturer
et de gérer les erreurs qui surviennent lors d'une requête Fetch.

fetch('api.example.com/data) ’, {
method: 'Get',
headers: { "Content-type": "application/json " },
}
.then(function (res) => { return res.json(); } )
.then(function (data) => { console.table(data) )
.catch(function (err) => { console.log( err ); } )
81

'

Anatomie d’une requête fetch()

La méthode HTTP (GET, POST, PUT, DELETE, etc.).

fetch('api.example.com/add', {
method: 'POST',
headers: { "Content-type": "application/json " },
body: JSON.stringify({
title:'Espresso',
price:'7.5’
})
})
82

'

Anatomie d’une requête fetch()

Un objet Headers pour


définir les en-têtes HTTP

fetch('api.example.com/add', {
method: 'POST',
headers: { "Content-type": "application/json " },
body: JSON.stringify({
title:'Espresso',
price:'7.5’
})
})
83

'

Anatomie d’une requête fetch()

fetch('api.example.com/add', {
method: 'POST',
headers: { "Content-type": "application/json " },
body: JSON.stringify({
title:'Espresso',
price:'7.5’
})
}) Les données envoyées avec la requête. Peut
être du texte, JSON, un FormData, etc
84

'

Anatomie d’une requête fetch()


fetch('api.example.com/add', {
method: 'POST',
headers: { "Content-type": "application/json" },
body: JSON.stringify({
title:'Espresso',
price:'7.5’
})
})
.then(function (res) => { return res.json(); } )
.then(function (data) => { console.table(data) )
85

'

Anatomie d’une requête fetch()


fetch('api.example.com/add', {
method: 'POST',
headers: { "Content-type": "application/json" },
body: JSON.stringify({
title:'Espresso',
price:'7.5'
})
})
.then(function (res) => { return res.json(); } )
.then(function (data) => { console.table(data) )
.catch(function (err) => { console.log( err ); } )
Stockage pour le Web
Utiliser IndexedDB
87

Offline First
La connexion Internet peut être
instable ou inexistante lors de vos
déplacements.
88

Offline First
le web, même sans connexion.

• Le mode hors ligne n'est plus une


exception, mais une partie intégrante de
l'expérience.
• Les applications web fonctionnent même
sans connexion internet.
89

Offline First : Pourquoi l'adopter

Fonctionne Performance UX Économie de


partout ressources
90

En mode online

Internet
Web App Web storage

Cache API
91

En mode offline

Internet
Web App Web storage

Cache API
92

Cookies

Local Storage
Web Storage Session Storage
Les technologies
essentielles InedexedDB
93

Qu’est-ce que IndexedDb ?

▪ Base de données NoSQL intégrée au navigateur.


▪ Stocker des volumes importants de données.
▪ Stocker des données sous forme d'objets JavaScript ,
blobs, images ...
▪ Utilise des index pour effectuer des recherches rapides.
▪ Prend en charge les transactions pour la fiabilité.
94

Pourquoi choisir IndexedDB ?

▪ Peut stocker plusieurs gigaoctets de données selon le


navigateur.
▪ Recherche rapide grâce aux index.
▪ Transactions pour garantir l'intégrité des données.
▪ Ne bloque pas l'interface utilisateur.
▪ compatible avec tous les navigateurs modernes
95

Vérifier la prise en charge d'IndexedDB


Méthode 1
1. Ouvrir chrome DevTools
2. Accéder à la console.
3. Taper indexedDB et appuyer
sur Entrée.

Méthode 2

1. Ouvrir chrome DevTools


2. Aller dans l'onglet "Application".
3. Vérifier la présence de la
section "IndexedDB"
96

Terminologie
Navigateur

DB1 DB2

Object Stores

IndexedDB
97

DB1

Préférences
Produits

Produits { id: 123 , name: "Espresso", price: 7 }


{ id: 124 , name: "Blend", price: 13 }
utilisateur
98

// Open (or create) the database


var openReq = indexedDB.open("MyDatabase", 1);

Nom de la base de
Version
données
99

IndexedDB.Open(dbName, dbVersion)

Database
NO yes
exists ?

dbVersion >
Upgrade yes current version

no

dbVersion =
Success yes no Fall
current version
100

// Open (or create) the database


var open = indexedDB.open("MyDatabase", 1);

open.onupgradeneeded = function() {

};
101

// Open (or create) the database


var openReq = indexedDB.open("MyDatabase", 1);

open.onupgradeneeded = function() {
// Creates an object store: Magasin d’objets
var db = openReq.result;
var store = db.createObjectStore("ProductStore",
{keyPath: "id"});

};
Clé primaire
102

Toutes les opérations de données (lecture,


écriture, suppression) dans IndexedDB doivent
être effectuées au sein d'une transaction.

1. Obtenir une référence à la base de


données
2. Ouvrir une transaction
Transaction 3. Accéder au magasin d'objets
4. Effectuer les opérations
103

// Open (or create) the database


var open = indexedDB.open("MyDatabase", 1);

open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore",
{keyPath: "id"});
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
};
104

ProductStore

# (key-path) id value
{ id: 123 ,
0 123 name: "Espresso",
price: 7 }
{ id: 124,
1 124 name: "Blend",
price: 13 }
105

// Open (or create) the database


var open = indexedDB.open("MyDatabase", 1);
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore",
{keyPath: "id"});
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
// Add some data
store.put({id: 123 , name: "Espresso", price: 7});
store.put({id: 124, name: "Blend", price: 13 });
};
106

// Open (or create) the database


var open = indexedDB.open("MyDatabase", 1);
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore",
{keyPath: "id"});
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
// Query the data
var Product = store.get(123);
Product.onsuccess = function() {
console.log(Product.result.name); // => "John"
};
};
107

// Open (or create) the database


var open = indexedDB.open("MyDatabase", 1);
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore",
{keyPath: "id"});
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
//all data
var getAllProducts = store.getAll();
getAllProducts.onsuccess = function() {
console.log(getAllProducts.result);
};
};

Vous aimerez peut-être aussi