Plan
Langages Dynamiques
1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
Cours 4 2 Expressions régulières/Evènements/DOM ✓
JSON 3 Tableaux/JSON/AJAX/Asynchronisme
3.1 Tableaux
AJAX 3.2 JSON
Asynchronisme 3.3 AJAX
3.4 Traîtements Asynchrones
Promesses 3.5 Promesses
kn@[Link]
Array Array (interface impérative)
Les tableaux (classe Array) font partie de la bibliothèque standard Javascript. On peut
new Array(n) : Initialise un tableau de taille n (indicé de 0 à n-1) où toutes les cases
créer un tableau vide avec [].
valent undefined
let tab = [];
.length : renvoie la longueur du tableau
tab[35]; ∕∕undefined
tab[35] = "Hello"; ∕∕initialise la case 35 à "Hello" .toString() : applique .toString() à chaque élément et renvoie la concaténation
tab[0]; ∕∕toujours undefined; .push(e) : ajoute un élément en �n de tableau
[Link]; ∕∕36 ! indice le plus grand ayant été .pop() : retire et renvoie le dernier élément du tableau (unde�ned si vide)
∕∕initialisé + 1 .shift() : retire et renvoie le premier élément du tableau (unde�ned si vide)
.unshift(e) : ajoute un élément au défbut du tableau
.splice(i, n, e1, …, ek) : à partir de l'indice i, e�ace les éléments i à i+n-1 et insère
les éléments e1, …, ek
.sort(f) : trie le tableau en place suivant la fonction f, qui compare deux éléments et
doit renvoyer un nombre négatif, nul ou positif selon que le premier argument est
inférieur, égal ou supérieur au second. Si f est omise, alors les éléments sont
comparés selon leur valeur de chaînes de caractères.
3 / 34 4 / 34
Array (interface fonctionnelle) A�ectation par deconstruction (tableaux)
let couleurs = [ "rouge", "bleu", "vert", "jaune", "violet" ];
.forEach(f) : Applique la fonction f à tous les éléments du tableau. f reçoit trois ∕∕avant;
arguments (v, i, t) : let c_rouge = couleurs[0];
v : la valeur courante de la case visitée let c_bleu = couleurs[1];
let c_vert = couleurs[2];
i : l'indice courant (à partir de 0)
t : le tableau en entier ∕∕ maintenant
.map(f) : Applique la fonction f à tous les éléments du tableau et renvoie le tableau de let [ c_rouge, c_bleau, c_vert ] = couleurs;
∕∕ autres cases ignorées
résultat. f reçoit trois arguments (v, i, t), comme pour .forEach.
.filter(f) : Renvoie une copie du tableau dans laquelle se trouve tous les éléments du
let [ c_rouge, c_bleau, c_vert, ...autres ] = couleurs;
tableau initial pour lesquels f renvoie true. ∕∕ autres est un tableau à 2 cases [ "jaune", "violet" ]
.any(f) : Renvoie true si et seulement si f renvoie true pour un des éléments.
.every(f) : Renvoie true si et seulement si f renvoie true pour tous les éléments.
…
5 / 34 6 / 34
Fonctions variadiques Boucles « for each »
En Javascript, on peut toujours appeller une fonction avec un nombre quelconque On peut itérer sur une collection avec la construction for … of. Plusieurs objets de la
d'arguments. bibliothèque standard implémentent la méthode .entries() qui renvoie la collection des
entrées :
Si la fonction est dé�nie avec plus de paramètres, les paramètres manquant sont
initialisé à undefined let tab = [ "A", "B", "C", "D" ];
Si la fonction est dé�nie avec moins de paramètres, les arguments supplémentaires sont for (let e of tab) {
ignorés [Link](e); ∕∕ affiche "A" "B" "C" "D"
}
On peut dé�nir des fonctions variadiques:
function f (a, b, ...others) {∕∕ attentions, le ... for (let e of [Link]()) {
∕∕ fait partie de la syntaxe [Link](e); ∕∕ affiche [0,"A"] [1,"B"] [2,"C"], [3,"D"]
[Link](others); }
}
for (let [i,e] of [Link]()) { ∕∕avec un let destructurant
[Link](i, e); ∕∕ affiche 0 "A" 1 "B" 2 "C" 3 "D"
others est un tableau contenant les arguments en plus. Il ne peut y avoir qu'un seul
}
argument ...x qui doit être le dernier paramètre.
7 / 34 8 / 34
Plan JSON (ou, le nouveau XML)
Il est souvent utile de pouvoir échanger de l'information « structurée » entre applications
1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
2 Expressions régulières/Evènements/DOM ✓ ◆ Chargement et production simpli�ée (parseur/pretty-printer générique)
Validation stricte possible (notion de bonne formation, schéma)
3 Tableaux/JSON/AJAX/Asynchronisme
◆
3.1 Tableaux ✓ Solutions actuelles
3.2 JSON
◆ Format texte ad-hoc
3.3 AJAX ◆ Format texte structuré (CSV)
3.4 Traîtements Asynchrones ◆ Format binaire ad-hoc
3.5 Promesses ◆ XML
◆ JSON : JavaScript Object Notation (« Jay-zon »)
10 / 34
JSON : syntaxe JSON : syntaxe (suite)
Une valeur JSON est représenté par un sous-ensemble de la syntaxe Javascript pour les
objets. ◆ Pas de syntaxe pour des commentaires
◆ Une propriété est n'importe quelle chaine syntaxiquement valide
◆ null : la constante null ◆ Les tableaux peuvent contenir des types di�érents
◆ Booléens : les constates true ou false ◆ Les blancs en dehors des chaînes ne sont pas signi�catifs
◆ Nombres : les nombres au format IEEE-759 ◆ Les chaînes ne peuvent pas être sur plusieurs lignes
◆ Les chaînes de caractères : délimitées par des " (obligatoirement), avec les séquences
d'échappement usuelles (\n, …)
◆ Les tableaux : suite de valeurs séparées par des virgules, entre [ ]
◆ Des objets : les nom propriétés sont des chaines de caractères (séparés par des
virgules)
{ "nom" : "Nguyen",
"prénom" : "Kim",
"cours": [ "Javascript", "TER" ],
"full time" : true,
"age" : 3.6e1,
"hobby" : null }
11 / 34 12 / 34
API pour JSON [Link] (exemples)
L'objet JSON disponible en Javascript possède deux méthodes : [Link]("1");
> 1
◆ [Link](v) convertit la valeur v en une chaîne de caractères représentant son [Link]("[ 1, 2, \"3\", false ]");
> [1, 2, "3", false]
encodage JSON [Link]("null"); "\a"
◆ [Link](s) décode la chaîne s (représentant du JSON) en un objet Javascript > null
var o = [Link]("{ \"a\" : 1 }");
> undefined
o.a;
> 1
[Link]("{ a : 1 }");
> erreur
[Link]("{ ");
> erreur
[Link]("undefined");
> erreur
13 / 34 14 / 34
[Link] [Link] (exemple)
Beaucoup de règles : class Point {
constructor(x, y) {
◆ null, booléens, nombres, chaînes : convertis en leur représentation this.x = x;
this.y = y;
◆ tableaux : les éléments sont convertis. Si un élément est undefined ou une fonction, this.f = function () {};
null est inséré à la place }
◆ objets : move (i, j) {
this.x += i;
◆ si présente, la méthode .toJSON() de l'objet est utilisée pour renvoyer la chaîne
this.y += j;
représentant l'objet }
◆ sinon, les propriétés « énumérables » sont converties. Celle dont le contenu est une }
let p = new Point(1,2);
fonction ou unde�ned sont ignorées
◆ Si l'objet contient un cycle (let o = { }; o.x = o; …) une erreur est levée.
[Link](p);
> "{\"x\":1,\"y\":2}"
Les propriétés du prototype n'ont pas été énumérées, celle de l'objet qui est une fonction
(f) a été ignorée
15 / 34 16 / 34
Avantages/Inconvénients de JSON par rapport à XML Plan
Une fois parsée, la valeur JSON devient une valeur Javascript (utilisation directe des
propriétées) 1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
Une valeur XML devient un objet DOM, dans lequel il faut naviguer avec
2 Expressions régulières/Evènements/DOM ✓
.getFirstChild(), .getElementById(), ... 3 Tableaux/JSON/AJAX/Asynchronisme
Par contre JSON ne possède pas de notion de schéma bien établie (draft en cours) donc il 3.1 Tableaux ✓
faut valider « à la main » 3.2 JSON ✓
3.3 AJAX
3.4 Traîtements Asynchrones
3.5 Promesses
17 / 34
Asynchronous Javascript and XML XmlHttpRequest
Une application Web doit parfois échanger avec un serveur Web : Objet contenant les (nombreuses) méthodes permettant d'envoyer une requête GET ou
POST à un serveur distant :
◆ Calcul coûteux (en mémoire, temps, …)
◆ Centralisation (synchronisation de plusieurs clients, véri�cation d'identi�ants, de new XmlHttpRequest() : création de l'objet
.open(method, url, async) : crée une requête HTTP avec la méthode method (valant
licences, …)
◆ Accès à des données distantes "GET" ou "POST"), vers l'url url. Le booléen async (vrai par défaut) exécute un envoi
asynchrone. On le laissera toujours à vrai.
Utilisation de formulaires HTML : .send() : envoie la requête au serveur. L'appel retourne immédiatement si async valait
vrai lors de l'ouverture
◆ Nuit à l'interactivité (alternance client/serveur/client/serveur �xée, temps de .responseText : contient la réponse du serveur sous forme de chaîne de caractères
transmission) .status : le code HTTP de la réponse du serveur
◆ Perte de la page courante, nécessité de sauver l'état du client localement et de le .readyState : Un entier entre 0 (requête non envoyée) et 4 (résultat disponible)
restaurer
AJAX : API permettant d'envoyer des requêtes HTTP à un serveur depuis Javascript de
manière asynchrone, en tâche de fond et de récupérer le résultat
19 / 34 20 / 34
Traîtement asynchrone de la réponse Avantage/Inconvénients
On se connecte à l'évennement readystatechange de l'objet XmlHttpRequest. Exemple: Avantages :
let xhr = new XmlHttpRequest();
◆ Évite de recharger la page
[Link]("readystatechange", function (ev) { ◆ Permet d'envoyer plusieurs requêtes de manière asynchrone
if ([Link] == 200 && [Link] == 4) { ◆ Permet de faire autre chose (interaction utilisateur) en attendant que la réponse arrive
[Link]([Link]);
}
Inconvénient
});
[Link]("GET", "[Link]?user=toto", true);
[Link]();
◆ Sujet à la same origin policy (donc un script ne peut parler qu'au serveur qui l'a fourni),
sauf si le serveur accepte explicitement les connexions (il faut con�gurer le serveur Web
spécialement).
◆ Interface relativement bas-niveau
◆ Ne permet pas une communication temps réel
On peut demander un résultat d'un autre type que string (document HTML, objet JSON,
…)
21 / 34 22 / 34
Démo Plan
On souhaite faire une boite de texte qui propose de la complétion à partir d'un
dictionaire en français. 1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
On doit écrire une partie serveur et une partie client.
2 Expressions régulières/Evènements/DOM ✓
3 Tableaux/JSON/AJAX/Asynchronisme
3.1 Tableaux ✓
3.2 JSON ✓
3.3 AJAX ✓
3.4 Traîtements Asynchrones
3.5 Promesses
23 / 34
Rappels Modèle d'exécution Javascript
Le moteur d'exécution Javascript est mono-thread. Il ne permet donc pas de calculs
◆ Programmation événementielle : du code est exécuté en réponse à un évènement parallèles. Si on e�ectue un calcul coûteux (en temps), la page se « �ge ». Les navigateurs
externe interdisent ce genre de comportements.
◆ Calculs concurrents : un ensemble de tâches qui commencent et terminent sur un même Deux implications sur le code Javascript :
interval de temps
◆ Calculs parallèles : un ensemble de tâches qui s'exécutent au même moment 1. Les calculs « lents » à cause de condition externes (requêtes réseaux, une attente
(physique) d'évènement utilisateur, …) sont e�ectués de manière asynchrone
2. Les calculs intrinsèquement « coûteux » doivent être « découpés » manuellement par
Ces notions sont distinctes et toutes présentes en Javascript le programmeur.
On va explorer au travers d'exemple comment écrire du code respectant ces contraintes
en « pur javascript simple™ »
(Le cours 6 montrera les nouveautés du standard ECMAScript 6 et 7 qui permettent de
faire ça de manière élégante)
25 / 34 26 / 34
Mots mis en formes Plan
On veut modi�er l'exemple précédant du dictionnaire pour appeler, pour chaque mot
renvoyé, un deuxième service Web qui met ce mot en gras 1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
2 Expressions régulières/Evènements/DOM ✓
3 Tableaux/JSON/AJAX/Asynchronisme
3.1 Tableaux ✓
3.2 JSON ✓
3.3 AJAX ✓
3.4 Traîtements Asynchrones ✓
3.5 Promesses
27 / 34
Callback pyramid of Doom Promesses
Problèmes du code asynchrone
∕∕step 1 appelle une continuation en lui passant
∕∕la valeur qu'elle calcule de manière asynchrone ◆ Imbrication de fonctions rendant le code peu lisible ou peu modulaire
step1 (function (value1) {
◆ Gestion des erreurs dupliquées (dans chaque fonction intermédiaire)
…
step2(function (value2) { Solution : promesses (promises). Permettent de simuler du code séquentiel
…
step3(function (value3) {
…
step4(function (value4) {
∕∕ on peut enfin faire quelque chose avec value4
}
}
}
}
29 / 34 30 / 34
Utilisation : Promesses
let p = new Promise(function (success, failure) { let step1 = function (value1) {
return new Promise(function(success, failure) {
∕∕ faire quelque chose d'asynchrone ∕∕faire ce qu'on faisait avant.
};
∕∕ quand le resultat r est disponible faire };
success(r); ...
∕∕ si une erreur e se produit faire :
failure(e); var step4 = function (value4) {
}) return new Promise(function(success, failure) {
∕∕faire ce qu'on faisait avant.
L'objet Promise contient deux méthodes : };
};
◆ .then(f) appelée quand le resultat est disponible
◆ .catch(f) appelée en cas d'erreur
Comment ré-écrire le code ?
31 / 34 32 / 34
Promesses Support syntaxique, fonctions async
let p = new Promise(…); L'utilisation des promesses est encore simpli�ée par une syntaxe spéciale
[Link](step1) async function longFun() {
.then(step2) ∕∕ code qui prend du temps
.then(step3) return 4
.then(step4) }
.catch(function(e) {
[Link](e);
Les fonction async ne renvoient pas directement leur résultat, mais une promesse qui le
};
calcule.
let x = longFun(); ∕∕x ne vaut pas 42!
Autre méthodes utiles :
[Link]((res) => { [Link](res); });
◆ [Link](tab) renvoie une promesse qui se termine quand toutes les promesses
Au sein d'une fonction async on peut utiliser le mot clé await pour « attendre » une
du tableau tab sont terminées (et renvoie le tableau des valeurs)
promesse :
◆ [Link](tab) renvoie une promesse qui se termine quand l'une des promesses
async otherLongFun () {
du tableau tab est terminée let x = await longFun();
let y = await longFun();
let z = await longFun();
return x + y + z;
}
33 / 34 34 / 34