Programmation asynchrone§

1

Fonction anonyme§

2

Objets de premier niveau§

3

Fonctions anonymes§

4

Fonctions anonymes§

Exemple :

let b = document.querySelector("button");
b.addEventListener('click', function() {
  let i = document.getElementsByTagName("input")[0];
  i.value = Number(i.value) + 1;
});
5

Fonctions "flêches"§

En ES6, il existe une syntaxe plus compacte pour les fonctions anonymes. Au lieu d'écrire :

function (x, y) { return x+y; }

on peut utiliser la notation :

(x, y) => { return x+y; }

Dans le cas où la fonction comporte une unique instruction return, on peut même remplacer le corps de la fonction par l'expression à retourner :

(x, y) => x+y
6

Fonctions "flêches"§

Dans le cas où la fonction comporte exactement un argument, on peut ommettre les parenthèses autour de l'argument :

x => { console.log(x); return x+1; }

Autres exemples :

x => x+1
() => {
  console.log("Fonction flêche sans argument,");
  console.log("et comportant plusieurs instructions.");
}
7

Fonctions "flêches"§

Adaptation de l'exemple précédent :

let b = document.querySelector("button");
b.addEventListener('click', () => {
  let i = document.getElementsByTagName("input")[0];
  i.value = Number(i.value) + 1;
});

Note

Les fonctions "flêches" ne sont pas absolument équivalentes aux fonctions anonymes, mais la distinction concerne des notions non abordées dans ce chapitre.

Pour en savoir plus : https://stackoverflow.com/a/34361380

8

Modularité grâce aux fonctions anonymes§

Les variables déclarées hors de toute fonction, même préfixées par let, sont considérées par Javascript comme des variables globales.

Afin de contourner ce problème, il existe en Javascript une convention : on "enferme" tout le code du script dans une fonction anonyme, que l'on appelle immédiatement :

(function() {

// ... mon code Javascript ici ...

})();

Ainsi, on évite de polluer l'environnement global.

9

Autre exemple d'utilisation de fonctions anonymes§

let b1 = document.querySelector('button#b1');

b1.addEventListener("click", () => {
  let previousContent = b1.textContent;
  b1.textContent = "(en attente)";
  b1.disabled = true;
  setTimeout(() => {
    alert("message");
    b1.textContent = previousContent;
    b1.disabled = false;
  }, 2000);
});

Voir et modifier cet exemple.

10

Exécution asynchrone§

11

Motivation§

Dans l'exemple précédent, pourquoi utiliser la fonction setTimeout et non une fonction qui bloquerait l'exécution pendant 2s, comme on le ferait (par exemple) en Python, à l'image de l'exemple ci-dessous ?

// ⚠ MAUVAIS EXEMPLE ⚠
let previousContent = b1.textContent;
b1.textContent = "(en attente)";
b1.disabled = true;
sleep(2000); // fonction imaginaire (n'existe pas en JS)
alert("message");
b1.textContent = previousContent;
b1.disabled = false;

Note

La fonction sleep n'existe pas réellement en Javascript, et pour cause puisque ce n'est pas la bonne manière de faire.

12

Motivation§

13

Pour aller plus loin§

http://latentflip.com/loupe/

Loupe vous permet de visualiser la manière dont les événements sont gérés en Javascript.

La vidéo qui sert d'introduction est également une bonne introductions aux mécanismes mis en œuvre.

14

Portée et fermeture§

15

Portée (scope)§

16

Fermeture (closure)§

17

Gestion avancée d'événements§

18

Cheminement d'un événement§

19

Cheminement d'un événement§

Note

On peut également forcer un listener à se déclencher à la descente (capture d'un événement) plutôt qu'à sa remontée (bubbling). Pour cela on passera true en troisème paramètre de addEventListener.

20

Paramètre d'un listener§

21

Paramètre d'un listener§

document.getElementsByTagName("body")[0]
  .addEventListener("click", (evt) => {
    let msg = document.getElementById("msg");
    if (evt.target.tagName === "BUTTON") {
        msg.textContent = "Vous avez cliqué sur " +
           evt.target.textContent;
    } else {
        console.log(evt.target);
        msg.textContent = "Vous avez raté les boutons...";
    }
});

Voir et modifier cet exemple

22

AJAX§

23

Définition§

AJAX signifie

... mais en pratique, on peut échanger n'importe quoi avec le serveur, pas uniquement du XML, et notamment du JSON.

Note

AJAX permet donc aux pages HTML d'un site de communiquer avec l'API JSON de ce même site.

24

Exemple simple§

fetch('http://example.org').then((response) => {
    // cette fonction est appelée lorsque
    // les en-têtes de la réponse ont été reçu
    if (!response.ok) {
        throw ("Error " + response.status);
    }
    return response.json() // attend la contenu
}).then((data) => {
    // cette fonction est appelée lorsque
    // le contenu de la réponse a été reçu,
    // et analysé comme du JSON
    do_something_with(data);
}).catch((err) => {
    // cette fonction est appelée en cas d'erreur
    console.log(err);
});

Note

La fonction fetch est disponible dans les navigateurs modernes.

Elle succède à l'ancienne méthode, nommée XMLHttpRequest, encore très utilisée.

25

La fonction fetch§

26

La fonction fetch§

Exemple de requête POST :

fetch("/api/Appointments/", {
    method: 'POST',
    headers: { "content-type": "application/json" },
    body: JSON.stringify(appointment_data),
}).then((response) => {
  if (!response.ok) { throw new Error("POST failed"); }
}).catch((err) => {
  alert(err);
});
27