recursal/MDN huggingface dataset:
JavaScript asynchrone
=====================

Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.

#### Vous cherchez à devenir développeuse ou développeur web front-end ?

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

**Commencer**

Prérequis
---------

Le JavaScript asynchrone est un sujet assez avancé, et il vous est conseillé de travailler sur les modules Premiers pas en JavaScript et Blocs de construction de JavaScript avant d'attaquer cette leçon.

**Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.

Guides
------

Introduction au JavaScript asynchrone

Dans cet article, nous verrons ce que sont la programmation **synchrone** et **asynchrone**, pourquoi nous avons souvent besoin de techniques asynchrones, la façon dont les fonctions asynchrones ont été implémentées en JavaScript au cours du temps et les différents problèmes associés.

Comment utiliser les promesses

Ici, nous verrons les promesses et comment manipuler les API qui les utilisent. Nous introduirons également les mots-clés `async` et `await`.

Implémenter une API fonctionnant avec les promesses (en-US)

Cet article détaille comment implémenter sa propre API utilisant les promesses.

Introduction aux *workers*

Les *workers* permettent d'exécuter certaines tâches dans un fil d'exécution séparé, afin que le code principal soit réactif. Dans cet article, nous réécrirons une fonction synchrone dont l'exécution est longue en utilisant un *worker*.

Évaluations
-----------

Ordonnancer des animations (en-US)

Dans cette évaluation, on vous demande d'utiliser les promesses afin d'exécuter un ensemble d'animations dans un ordre donné.

Voir aussi
----------

* Programmation asynchrone (en anglais) à partir du fantastique livre en ligne Eloquent JavaScript de Marijn Haverbeke.
Les tableaux en HTML
====================

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

Prérequis
---------

Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez Introduction au HTML.

**Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

Guides
------

Ce module contient les articles suivants :

Bases à propos des Tableaux en HTML

Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.

Caractéristiques avancées des Tableaux HTML et accessibilité

Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.

Évaluation des connaissances
----------------------------

Structuration de données sur les planètes

Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
WebAssembly.Instance()
======================

Un objet **`WebAssembly.Instance`** représente un objet exécutable, avec un état, qui est une instance d'un module WebAssembly. Un objet `Instance` contient l'ensemble des fonctions WebAssembly exportées qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.

Constructeur
------------

`WebAssembly.Instance()`

Crée un nouvel objet `Instance`.

Propriétés des instances
------------------------

`Instance.prototype.exports`

Renvoie un objet dont les propriétés sont les fonctions exportées par l'instance de module WebAssembly afin qu'elles puissent être récupérées et utilisées en JavaScript. Cette propriété est uniquement accessible en lecture seule.

Exemples
--------

### Instancier un module WebAssembly de façon synchrone

Le constructeur `WebAssembly.Instance()` peut être appelé afin d'instancier un objet `WebAssembly.Module` de façon synchrone. Par exemple :


```js
const importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    let mod = new WebAssembly.Module(bytes);
    let instance = new WebAssembly.Instance(mod, importObject);
    instance.exports.exported\_func();
  });
```


La façon préconisée de récupérer un objet `Instance` est asynchrone, par exemple en utilisant la fonction `WebAssembly.instantiateStreaming()` de cette façon :


```js
const importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported\_func(),
);
```


Cet exemple illustre également comment la propriété `exports` est utilisée afin d'accéder aux fonctions exportées.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # instances |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.validate()
======================

La méthode statique **`WebAssembly.validate()`** permet de valider un tableau typé de *bytecode* WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (`true`) ou non (`false`).

Syntaxe
-------


```js
WebAssembly.validate(bufferSource)
```

### Paramètres

`bufferSource`

Un tableau typé ou un `ArrayBuffer` qui contient le *bytecode* du module qu'on souhaite valider.

### Valeur de retour

Un booléen qui indique si la source est un code WebAssembly valide (`true`) ou non (`false`).

### Exceptions

Si la valeur passée en argument n'est pas un tableau typé ou un `ArrayBuffer`, une exception `TypeError` sera levée.

Exemples
--------

Dans l'exemple suivant, (cf. le fichier `validate.html` du code source, ainsi que l'exemple *live*), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode `validate()` afin de vérifier si le module est valide.


```js
fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    const valid = WebAssembly.validate(bytes);
    console.log(
      `The given bytes are ${valid ? "" : "not "}a valid Wasm module`,
    );
  });
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-validate |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.compile()
=====================

La méthode statique **`WebAssembly.compile()`**, permet de compiler un module (`WebAssembly.Module`) à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode `WebAssembly.instantiate()` sera plus pertinente).

**Note :** Les pages web qui utilisent une CSP stricte peuvent bloquer la compilation WebAssembly et l'exécution des modules. Pour plus d'informations pour l'autorisation de la compilation et de l'exécution, voir la directive CSP `script-src`.

Syntaxe
-------


```js
WebAssembly.compile(bufferSource);
```

### Paramètres

`bufferSource`

Un tableau typé ou un `ArrayBuffer` contenant le *bytecode* du module WebAssembly qu'on souhaite compiler.

### Valeur de retour

Une promesse (`Promise`) dont la valeur de résolution est une instance de `WebAssembly.Module` qui représente le module compilé.

### Exceptions

* Si `bufferSource` n'est pas un tableau typé, une exception `TypeError` sera levée.
* Si la compilation échoue, la promesse sera rompue avec une exception `WebAssembly.CompileError`.
Exemples
--------

### Utiliser `compile()`

Dans l'exemple qui suit, on compile le *bytecode* `simple.wasm` grâce à la méthode `compile()` puis on envoie le contenu à un *worker* grâce à la méthode `postMessage()`.


```js
const worker = new Worker("wasm\_worker.js");

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.compile(bytes))
  .then((mod) => worker.postMessage(mod));
```


**Note :** Dans la plupart des cas, mieux vaudra utiliser `WebAssembly.compileStreaming()` qui est plus efficace que `compile()`.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-compile |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.Module()
====================

Un objet **`WebAssembly.Module`** contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être partagé avec des *web workers* et être instancié à plusieurs reprises.

Constructeur
------------

`WebAssembly.Module()`

Crée un nouvel objet `Module`.

Propriétés statiques
--------------------

`WebAssembly.Module.customSections()`

Soit un objet `Module` et une chaîne de caractères, cette méthode renvoie le contenu de l'ensemble des sections spécifiques du module avec le nom correspondant à la chaîne de caractères.

`WebAssembly.Module.exports()`

Soit un objet `Module`, cette méthode renvoie un tableau dont les éléments sont les descriptions de tous les exports déclarés.

`WebAssembly.Module.imports()`

Soit un objet `Module`, cette méthode renvoie un tableau dont les éléments sont les descriptions de tous les imports déclarés.

Exemples
--------

### Envoyer un module compilé à un *worker*

Dans l'exemple qui suit (voir le fichier source `index-compile.html` sur GitHub, et la démonstration correspondante), on compile le byte code chargé `simple.wasm` en utilisant la méthode `WebAssembly.compileStreaming()` puis en envoyant l'instance de `Module` résultante à un *worker* en utilisant `postMessage()`.


```js
let worker = new Worker("wasm\_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);
```


Au sein du *worker* (voir le fichier `wasm_worker.js`), on définit un objet d'import pour le module à utiliser puis on définit un gestionnaire d'évènement destiné à recevoir le module depuis le fil d'exécution principal. Lorsque le module est reçu, on en crée une instance avec la méthode `WebAssembly.instantiate()` puis on appelle une fonction exportée depuis l'instance.


```js
let importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

onmessage = function (e) {
  console.log("module reçu depuis le thread principal");
  let mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function (instance) {
    instance.exports.exported\_func();
  });
};
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # modules |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.compileStreaming()
==============================

La méthode statique **`WebAssembly.compileStreaming()`** permet de compiler un module WebAssembly (c'est-à-dire un objet `WebAssembly.Module`) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt `WebAssembly.instantiateStreaming()`.

**Note :** Les pages web qui utilisent une CSP stricte peuvent bloquer la compilation WebAssembly et l'exécution des modules. Pour plus d'informations pour l'autorisation de la compilation et de l'exécution, voir la directive CSP `script-src`.

Syntaxe
-------


```js
WebAssembly.compileStreaming(source)
```

### Paramètres

`source`

Un objet `Response` ou une promesse qui sera résolue en un tel objet et qui représentee la source du module WASM qu'on souhaite manipuler comme un flux et compiler.

### Valeur de retour

Un objet `Promise` dont la valeur de résolution est un objet `WebAssembly.Module` qui représente le module compilé.

### Exceptions

* Si `source` n'est pas un objet `Response` ou une promesse qui se résout en `Response`, la promesse est rejetée avec une exception `TypeError`.
* Si la compilation échoue, la promesse est rejetée avec une exception `WebAssembly.CompileError`.
* Si `source` est une promesse qui échoue, la promesse renvoyée par cette méthode échoue avec cette même erreur.
* Si l'objet `Result` de la source a une erreur (par exemple un mauvais type MIME), la promesse est rejetée avec une erreur.
Exemples
--------

Dans l'exemple suivant (également disponible sur GitHub : `compile-streaming.html` et avec le résultat *live*), on récupère un flux dedpuis un module .wasm puis on le compile en un objet `WebAssembly.Module`. La fonction `compileStreaming()` acceptant une promesse pour un objet `Response`, on peut directement passer l'appel à `fetch()` qui transfèrera la réponse dès que la promesse sera tenue.


```js
const importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.compileStreaming(fetch("simple.wasm"))
  .then((module) => WebAssembly.instantiate(module, importObject))
  .then((instance) => instance.exports.exported\_func());
```


Le module est ensuite instancié grâce à la fonction `WebAssembly.instantiate()`. Enfin, on appelle la fonction exportée.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly Web API # dom-webassembly-compilestreaming |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La page d'aperçu de WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript de WebAssembly
WebAssembly.Tag
===============

L'objet **`WebAssembly.Tag`** définit un *type* d'exception WebAssembly qui peut être levée depuis ou vers du code WebAssembly.

Lorsqu'on crée un objet `WebAssembly.Exception`, la balise (*tag*) définit les types de données et l'ordre des valeurs portées par l'exception. La même instance de cette balise doit être utilisée ensuite afin d'accéder aux valeurs portées par les exceptions déclenchées (par exemple, en utilisant la méthode `Exception.prototype.getArg()`).

Construire une instance de `Tag` crée une nouvelle balise unique. Cette balise peut ensuite être passée à un module WebAssembly pour qu'il l'importe et qui deviendra alors une balise typée, définie dans la *section des balises (*tag section*)* du module WebAssembly. On peut aussi exporter une balise définie dans un module pour l'utiliser afin d'inspecter les exceptions déclenchées par le module.

**Note :** Il n'est pas possible d'accéder aux valeurs d'une exception avec une autre balise qui décrirait la même structure. Il faut que ce soit exactement la même balise qui soit utilisée ! Cela permet de s'assurer que les modules WebAssembly puissent garder privées des informations sur les exceptions internes si nécessaire. Le code JavaScript peut toujours intercepter et relancer les exceptions qu'il ne peut pas inspecter.

Constructeur
------------

`WebAssembly.Tag()`

Crée un nouvel objet `WebAssembly.Tag`.

Méthodes des instances
----------------------

`Tag.prototype.type()`

Renvoie l'objet définissant le tableau des types de données de la balise (tel que défini lors de la construction).

Exemples
--------

Le fragment de code qui suit crée une nouvelle instance de `Tag`.


```js
const tagToImport = new WebAssembly.Tag({ parameters: ["i32", "f32"] });
```


Dans le fragment qui suit, on illustre comment on peut passer cette balise à un module **exemple.wasm** lors de l'instanciation, à l'aide d'un objet d'import.


```js
const importObject = { "extmod": {"exttag": tagToImport} }
WebAssembly.instantiateStreaming(fetch('exemple.wasm'), importObject )
  .then(obj => {
    …
```


Le module WebAssembly pourra alors importer la balise comme ceci :


```wasm
(module

  (import "extmod" "exttag" (tag $tagname (param i32 f32)) )
```


Si la balise est ensuite utilisée pour lever une exception qui atteint le code, on pourra l'utiliser pour inspecter les valeurs portées par l'exception.

**Note :** Il existe d'autres façons : on pourrait aussi utiliser la balise afin de créer un objet `WebAssembly.Exception` et la déclencher depuis une fonction appelée côté WebAssembly.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface: Exception Handling # tags |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Aperçu général de WebAssembly
* Concepts WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.Tag.prototype.type()
================================

La méthode **`type()`**, rattachée au prototype d'un objet `Tag`, permet d'accéder à la séquence des types de données associés à la balise.

L'objet renvoyé par la méthode sera le même que celui initialement passé au constructeur `Tag()`.

Syntaxe
-------


```js
type();
```

### Paramètres

Aucun.

### Valeur de retour

Un objet avec une propriété nommée `parameters` qui fait référence au tableau des types de données associés à cette instance `Tag`.

Il s'agit du même objet `type` qui a été initialement passé au constructeur `Tag()`.

Exemples
--------

Dans le fragment de code qui suit, on crée une balise avec deux types de données et on les consulte après à l'aide de `type()` pour les afficher dans la console :


```js
const tag = new WebAssembly.Tag({ parameters: ["i32", "i64"] });
console.log(tag.type());

// Affichera dans la console :
// Object { parameters: (2) […] }
// parameters: Array [ "i32", "i64" ]
// <prototype>: Object { … }
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface: Exception Handling # dom-tag-type |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Aperçu général de WebAssembly
* Concepts WebAssembly
* Utiliser l'API JavaScript WebAssembly
Constructeur pour WebAssembly.Tag()
===================================

Le constructeur **`WebAssembly.Tag()`** crée un nouvel objet `WebAssembly.Tag`.

Syntaxe
-------


```js
new WebAssembly.Tag(type);
```

### Paramètres

`type`

Un objet qui peut contenir la propriété suivante :

`parameters`

Un tableau de types de données (en-US) (`"i32"`, `"i64"`, `"f32"`, `"f64"`, `"v128"`, `"externref"`, `"anyfunc"`).


### Exceptions

`TypeError`

L'argument `type.parameters` n'est pas fourni, ne contient pas de valeur ou contient un descripteur de balise non pris en charge.

Exemples
--------

Ici, on crée une balise avec deux valeurs.


```js
const tag = new WebAssembly.Tag({ parameters: ["i32", "i64"] });
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface: Exception Handling # dom-tag-tag |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Aperçu général de WebAssembly
* Concepts WebAssembly
* Utiliser l'API JavaScript WebAssembly
Constructeur WebAssembly.Instance()
===================================

Le constructeur **`WebAssembly.Instance()`** crée un nouvel objet `Instance` qui représente une instance sans état et exécutable d'un `WebAssembly.Module`.

Syntaxe
-------

**Attention :** Étant donné que l'instanciation de grands modules peut être coûteuse, il est préférable d'utiliser le constructeur `Instance()` uniquement lorsqu'une instanciation synchrone est nécessaire. Par défaut et dans tous les autres cas, on privilégiera l'utilisation de la méthode asynchrone `WebAssembly.instantiateStreaming()`.


```js
new WebAssembly.Instance(module, importObject);
```

### Paramètres

*module*

L'objet `WebAssembly.Module` qu'on souhaite instancier.

*importObject* Facultatif

Un objet contenant les valeurs à importer dans l'instance nouvellement créée telles que des fonctions ou des objets `WebAssembly.Memory`. Il doit y avoir une propriété correspondante pour chaque import déclaré de `module` ou une exception `WebAssembly.LinkError` sera levée.

Exemples
--------

### Instancier un module WebAssembly de façon synchrone

Le constructeur `WebAssembly.Instance()` peut être appelé de façon synchrone afin d'instancier un objet `WebAssembly.Module` donné, par exemple :


```js
const importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    let mod = new WebAssembly.Module(bytes);
    let instance = new WebAssembly.Instance(mod, importObject);
    instance.exports.exported\_func();
  });
```


Toutefois, la méthode à privilégier pour obtenir une `Instance` est d'utiliser la fonction asynchrone `WebAssembly.instantiateStreaming()` comme ceci :


```js
const importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported\_func(),
);
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-instance-instance |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La page WebAssembly
* Concepts WebAssembly
* Utiliser l'API JavaScript WebAssembly