diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 07:37:51 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-11 07:37:51 +0100 |
commit | a8fb2ac407174bff7ea35cd5fff146cb43a49e4e (patch) | |
tree | 78c594aa0a245625f511dbec1ea214c33b729813 /files | |
parent | 9cebbc49c1c7b098636f4914914e7d5c3fad775c (diff) | |
download | translated-content-a8fb2ac407174bff7ea35cd5fff146cb43a49e4e.tar.gz translated-content-a8fb2ac407174bff7ea35cd5fff146cb43a49e4e.tar.bz2 translated-content-a8fb2ac407174bff7ea35cd5fff146cb43a49e4e.zip |
Prepare WebAssembly section for Markdown conversion (#2978)
* Remove summary and some partly translated / outdated doc
* Remove some ltr dir in p and headings
* fix notes and other errors
* fix absolute and english links and a remaining image
Diffstat (limited to 'files')
-rw-r--r-- | files/fr/_wikihistory.json | 11 | ||||
-rw-r--r-- | files/fr/webassembly/c_to_wasm/index.html | 6 | ||||
-rw-r--r-- | files/fr/webassembly/concepts/index.html | 22 | ||||
-rw-r--r-- | files/fr/webassembly/exported_functions/index.html | 16 | ||||
-rw-r--r-- | files/fr/webassembly/index.html | 27 | ||||
-rw-r--r-- | files/fr/webassembly/loading_and_running/index.html | 12 | ||||
-rw-r--r-- | files/fr/webassembly/understanding_the_text_format/index.html | 503 | ||||
-rw-r--r-- | files/fr/webassembly/using_the_javascript_api/index.html | 22 |
8 files changed, 50 insertions, 569 deletions
diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 0efc5264eb..e80b0abae4 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -42414,17 +42414,6 @@ "BenoitDel" ] }, - "WebAssembly/Understanding_the_text_format": { - "modified": "2020-11-08T19:45:23.458Z", - "contributors": [ - "duduindo", - "lassana.drame.avenir", - "SphinxKnight", - "neilbryson", - "afauroux", - "marcpicaud" - ] - }, "WebAssembly/Using_the_JavaScript_API": { "modified": "2020-02-29T07:32:23.744Z", "contributors": [ diff --git a/files/fr/webassembly/c_to_wasm/index.html b/files/fr/webassembly/c_to_wasm/index.html index 9c3ce1ea61..b55618c1de 100644 --- a/files/fr/webassembly/c_to_wasm/index.html +++ b/files/fr/webassembly/c_to_wasm/index.html @@ -12,7 +12,7 @@ translation_of: WebAssembly/C_to_wasm --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Quand vous avez écrit un module de code dans un langage comme le C/C++, vous pouvez ensuite le compiler en WebAssembly en utilisant un outil comme <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Regardons comment cela fonctionne.</p> +<p>Quand vous avez écrit un module de code dans un langage comme le C/C++, vous pouvez ensuite le compiler en WebAssembly en utilisant un outil comme <a href="/fr/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Regardons comment cela fonctionne.</p> <h2 id="Mise_en_place_de_lenvironnement_Emscripten">Mise en place de l'environnement Emscripten</h2> @@ -108,7 +108,7 @@ int main(int argc, char ** argv) { </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez spécifier, comme sortie, juste le fichier* JavaScript "glue" au lieu de la sortie HTML en specifiant un fichier .js au lieu d'un fichier HTML dans le flag<code>-o</code> . Par exemple: <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. Vous pouevz ensuite votre propre fichier HTML à partir de rien bien que ce soit une approche plus compliquée. Il est généralement plus simple d'utiliser le template HTML fournit.</p> +<p><strong>Note :</strong> Vous pouvez spécifier, comme sortie, juste le fichier* JavaScript "glue" au lieu de la sortie HTML en specifiant un fichier .js au lieu d'un fichier HTML dans le flag<code>-o</code> . Par exemple: <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. Vous pouevz ensuite votre propre fichier HTML à partir de rien bien que ce soit une approche plus compliquée. Il est généralement plus simple d'utiliser le template HTML fournit.</p> <p>* Emscripten necessite une grande variété de code Javascript "glue" pour gérer les allocations memoire, les fuites memoires et bien d'autres problèmes.</p> </div> @@ -143,7 +143,7 @@ void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) { <p>By default, Emscripten-generated code always just calls the <code>main()</code> function, and other functions are eliminated as dead code. Putting <code>EMSCRIPTEN_KEEPALIVE</code> before a function name stops this from happening. You also need to import the <code>emscripten.h</code> library to use <code>EMSCRIPTEN_KEEPALIVE</code>.</p> <div class="note"> - <p><strong>Note</strong>: We are including the <code>#ifdef</code> blocks so that if you are trying to include this in C++ code, the example will still work. Due to C versus C++ name mangling rules, this would otherwise break, but here we are setting it so that it treats it as an external C function if you are using C++.</p> + <p><strong>Note :</strong> We are including the <code>#ifdef</code> blocks so that if you are trying to include this in C++ code, the example will still work. Due to C versus C++ name mangling rules, this would otherwise break, but here we are setting it so that it treats it as an external C function if you are using C++.</p> </div> </li> <li> diff --git a/files/fr/webassembly/concepts/index.html b/files/fr/webassembly/concepts/index.html index a92cfd0fec..2d770e0eea 100644 --- a/files/fr/webassembly/concepts/index.html +++ b/files/fr/webassembly/concepts/index.html @@ -5,7 +5,7 @@ translation_of: WebAssembly/Concepts --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Cet article explique les concepts de fonctionnement de WebAssembly, y compris ses objectifs, les problèmes qu'il résout et la manière dont il s'exécute dans le moteur de rendu du navigateur.</p> +<p>Cet article explique les concepts de fonctionnement de WebAssembly, y compris ses objectifs, les problèmes qu'il résout et la manière dont il s'exécute dans le moteur de rendu du navigateur.</p> <h2 id="Quest-ce_que_WebAssembly">Qu'est-ce que WebAssembly ?</h2> @@ -27,7 +27,7 @@ translation_of: WebAssembly/Concepts </ul> <div class="note"> -<p><strong>Note </strong>: WebAssembly aura également des usages en dehors du web et des environnements JavaScript (voir <a href="http://webassembly.org/docs/non-web/">Non-web embeddings</a>).</p> +<p><strong>Note :</strong> WebAssembly aura également des usages en dehors du web et des environnements JavaScript (voir <a href="http://webassembly.org/docs/non-web/">Non-web embeddings</a>).</p> </div> <h2 id="Comment_WebAssembly_sintègre_dans_la_plateforme_web">Comment WebAssembly s'intègre dans la plateforme web ?</h2> @@ -36,7 +36,7 @@ translation_of: WebAssembly/Concepts <ul> <li>Une machine virtuelle (VM) qui exécute le code de la Web app, e.g le code JavaScript qui fait tourner vos applications.</li> - <li>Une ensemble de <a href="/en-US/docs/Web/API">Web APIs</a> que la Web app peut appeler pour contrôler les fonctionnalités des navigateurs/appareils et réaliser des actions (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, etc.).</li> + <li>Une ensemble de <a href="/fr/docs/Web/API">Web APIs</a> que la Web app peut appeler pour contrôler les fonctionnalités des navigateurs/appareils et réaliser des actions (<a href="/fr/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/fr/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>, <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a>, etc.).</li> </ul> <p>Historiquement, la VM était seulement capable de charger le JavaScript. Cela fonctionnait bien pour nous comme le JavaScript est assez puissant pour résoudre la majeure partie des problèmes que les gens rencontrent sur Internet. Nous nous sommes, cependant, confrontés à des problèmes de performances lors de l'utilisation de JavaScript pour des cas d'utilisations plus avancés comme les jeux 3D, la réalité virtuelle et augmentée, la vision artificielle, l'édition d'image/vidéo, et un nombre de domaines qui demandent des performances natives ( voir <a href="http://webassembly.org/docs/use-cases/">Cas d'utilisations WebAssembly</a> pour plus d'informations).</p> @@ -59,7 +59,7 @@ translation_of: WebAssembly/Concepts <p>Il y a différents concepts clefs nécessaires pour comprendre comment fonctionne WebAssembly dans le navigateur. Tous ces concepts se retrouvent totalement dans l'API WebAssembly JavaScript.</p> <ul> - <li><strong>Module </strong>: Représente un binaire WebAssembly qui a été compilé en code exécutable par le navigateur. Un module est sans état et - comme un <a href="/en-US/docs/Web/API/Blob">Blob</a> - peut donc être explicitement<a href="/en-US/WebAssembly/Caching_modules"> mis en cache dans IndexedDB</a> ou partagé entre le contexte fenêtre et les workers (via <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). Un module déclare des imports et exports au même titre qu'un module ES2015.</li> + <li><strong>Module </strong>: Représente un binaire WebAssembly qui a été compilé en code exécutable par le navigateur. Un module est sans état et - comme un <a href="/fr/docs/Web/API/Blob">Blob</a> - peut donc être explicitement<a href="/fr/WebAssembly/Caching_modules"> mis en cache dans IndexedDB</a> ou partagé entre le contexte fenêtre et les workers (via <code><a href="/fr/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). Un module déclare des imports et exports au même titre qu'un module ES2015.</li> <li><strong>Mémoire </strong>: Représente un ArrayBuffer redimensionnable qui contient un tableau d'octets contiguë accessible en lecture/écriture par les instructions bas niveau d'accès mémoire du WebAssembly.</li> <li><strong>Table</strong> : Représente un tableau typé de référence (comme par exemple des fonctions) qui ne peut pas être stocké de manière brute en mémoire (pour des raisons de sécurité et de portabilité).</li> <li><strong>Instance </strong>: Représente un module associé avec tous les états qu'il utilise à l'exécution à savoir la mémoire, la table précédemment citée et un ensemble de données importées. Une instance est comme un module ES2015 qui a été chargée dans un contexte global avec un ensemble d'imports.</li> @@ -80,7 +80,7 @@ translation_of: WebAssembly/Concepts <p>D'autres outils verront sans aucun doute le jour à l'avenir. Pour le moment, il y a trois points d'entrée principaux :</p> <ul> - <li>Porter une application C/C++ avec <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</li> + <li>Porter une application C/C++ avec <a href="/fr/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</li> <li>Écrire ou générer WebAssembly directement au niveau assembleur.</li> <li>Écrire une application Rust et cibler WebAssembly en sortie.</li> </ul> @@ -91,7 +91,7 @@ translation_of: WebAssembly/Concepts <p>L'outil Emscripten est capable de prendre du code source C/C++ et de le compiler dans un module .wasm, de générer le code "glue" JavaScript nécessaire pour charger et exécuter le module et de créer un document HTML capable d'afficher les résultats d'exécution du code.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p> +<p><img alt="" src="emscripten-diagram.png"></p> <p>En résumé, le principe de fonctionnement est le suivant :</p> @@ -102,7 +102,7 @@ translation_of: WebAssembly/Concepts </ol> <div class="note"> -<p><strong>Note</strong> : Il existe des propositions future pour <a href="http://webassembly.org/docs/gc/"> permettre au WebAssembly d'appeler directement l'API Web</a>.</p> +<p><strong>Note :</strong> Il existe des propositions future pour <a href="http://webassembly.org/docs/gc/"> permettre au WebAssembly d'appeler directement l'API Web</a>.</p> </div> <p>Le code "passe-plat" en JavaScript n'est pas aussi simple que vous pourriez l'imaginer. Pour le moment, Emscripten implémente des librairies C/C++ populaire comme <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>, et une partie de <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>. Ces bibliothèques sont implémentées sous forme d'API Web et donc chacune d'entre elles requiert un peu de code JavaScript "passe-plat" pour relier WebAssembly à l'API Web sous-jacente.</p> @@ -111,7 +111,7 @@ translation_of: WebAssembly/Concepts <p>Le document HTML généré charge le fichier JavaScript contenant le code "passe-plat" et écrit stdout dans un {{htmlelement("textarea")}}. Si l'application utilise OpenGL, le HTML contient aussi un élément {{htmlelement("canvas")}} qui est utilisé comme cible de rendu. Il est vraiment simple de modifier la sortie Emscripten pour en faire l'application web que vous souhaitez.</p> -<p>Vous pouvez trouver toute la documentation sur Emscripten à l'adresse <a href="http://emscripten.org">emscripten.org</a>, et un guide pour exploiter la chaîne de compilation et ainsi compiler votre propre application C/C++ en wasm à l'adresse <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm">Compiler du C/C++ en WebAssembly</a>.</p> +<p>Vous pouvez trouver toute la documentation sur Emscripten à l'adresse <a href="http://emscripten.org">emscripten.org</a>, et un guide pour exploiter la chaîne de compilation et ainsi compiler votre propre application C/C++ en wasm à l'adresse <a href="/fr/docs/WebAssembly/C_to_wasm">Compiler du C/C++ en WebAssembly</a>.</p> <h3 id="Écrire_du_WebAssembly_directement">Écrire du WebAssembly directement</h3> @@ -119,7 +119,7 @@ translation_of: WebAssembly/Concepts <p>De la même manière que les langages assembleur physiques, le format binaire du WebAssembly a une représentation textuelle. Ces deux formats ont un fonctionnement équivalents. Vous pouvez écrire ou générer ce format à la main et ensuite le convertir au format binaire avec un des nombreux <a href="http://webassembly.org/getting-started/advanced-tools/">outils de conversion texte vers binaire WebAssembly</a>.</p> -<p>Pour un guide simple sur comment réaliser ceci, regarder notre article <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Text_format_to_wasm">Convertir le WebAssembly au format text en wasm</a>.</p> +<p>Pour un guide simple sur comment réaliser ceci, regarder notre article <a href="/fr/docs/WebAssembly/Text_format_to_wasm">Convertir le WebAssembly au format text en wasm</a>.</p> <h2 id="En_résumé">En résumé</h2> @@ -130,6 +130,6 @@ translation_of: WebAssembly/Concepts <ul> <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li> <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> - <li><a href="/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a>— trouvez comment charger votre propre module WebAssembly dans une page web.</li> - <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — trouvez comment utiliser les autres fonctionnalités majeures de l'API JavaScript WebAssembly.</li> + <li><a href="/fr/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a>— trouvez comment charger votre propre module WebAssembly dans une page web.</li> + <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — trouvez comment utiliser les autres fonctionnalités majeures de l'API JavaScript WebAssembly.</li> </ul> diff --git a/files/fr/webassembly/exported_functions/index.html b/files/fr/webassembly/exported_functions/index.html index bac7e74c52..94bf4140b5 100644 --- a/files/fr/webassembly/exported_functions/index.html +++ b/files/fr/webassembly/exported_functions/index.html @@ -5,7 +5,7 @@ translation_of: WebAssembly/Exported_functions --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Les fonctions WebAssembly exportées sont la représentation des fonctions WebAssembly dans JavaScript. Cet article décrit un plus en détail à quoi elle correspondent...</p> +<p>Les fonctions WebAssembly exportées sont la représentation des fonctions WebAssembly dans JavaScript. Cet article décrit un plus en détail à quoi elle correspondent...</p> <h2 id="Exportée..._quoi">Exportée... quoi?</h2> @@ -14,8 +14,8 @@ translation_of: WebAssembly/Exported_functions <p>Vous pouvez exporter les fonctions WebAssembly de deux manières:</p> <ul> - <li>Par un appel à <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> sur une table existante.</li> - <li>Par un appel à une fonction exportée à partir de l'instance d'un module wasm via <code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code>.</li> + <li>Par un appel à <code><a href="/fr/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> sur une table existante.</li> + <li>Par un appel à une fonction exportée à partir de l'instance d'un module wasm via <code><a href="/fr/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code>.</li> </ul> <p>Dans les deux cas, vous obtenez le même genre de wrapper pour la fonction sous jacente. Du point de vue de JavaScript, une fonction wasm est une fonction JavaScript— A la différence prés qu'elles sont encapsulées par l'instance d'une fonction exportée wasm et qu'il y a un nombre limité de façon d'y accéder.</p> @@ -39,20 +39,20 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) <p>Dans cet exemple, nous créons une table (<code>otherTable</code>) à partir de JavaScript en utilisant le constructeur {{jsxref("WebAssembly.Table")}}, puis nous chargeons table.wasm dans notre page en utilisant la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}.</p> -<p>Nous pouvons ensuite accéder aux fonctions exportées à partir du module, récupérer les références de chaque fonction via <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a></code> et logguer le résultat de chacune d'elles dans la console. Enfin, nous utilisons <code>set()</code> avec la table <code>otherTable</code> afin de lui fournir les references aux mêmes functions que la table <code>tbl</code>.</p> +<p>Nous pouvons ensuite accéder aux fonctions exportées à partir du module, récupérer les références de chaque fonction via <code><a href="/fr/docs/WebAssembly/API/Table/get">tbl.get()</a></code> et logguer le résultat de chacune d'elles dans la console. Enfin, nous utilisons <code>set()</code> avec la table <code>otherTable</code> afin de lui fournir les references aux mêmes functions que la table <code>tbl</code>.</p> <p>Pour vérifier que cela à fonctionné correctement, nous récupérons les références de la table <code>otherTable</code> et imprimons également les résultats dans la console, et les résultats sont identiques aux précédents.</p> <h2 id="Des_fonctions_à_part_entière">Des fonctions à part entière</h2> -<p>Dans l'exemple précédent, la valeur de retour de chaque appel à <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> est une fonction WebAssembly exportée — exactement ce dont nous avons parlé jusqu'à maintenant.</p> +<p>Dans l'exemple précédent, la valeur de retour de chaque appel à <code><a href="/fr/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> est une fonction WebAssembly exportée — exactement ce dont nous avons parlé jusqu'à maintenant.</p> <p>Il vaut la peine d'être noté que ceux sont des fonctions JavaScript à part entière, en plus d'être un emballage à des fonctions WebAssembly. Si vous chargez l'exemple ci-dessus dans un navigateur compatible avec WebAssembly, et excécutez les lignes suivantes dans votre console:</p> <pre class="brush: js">var testFunc = otherTable.get(0); typeof testFunc;</pre> -<p>Vous obtiendrez le résultat <code>function</code> en valeur de retour. Cette fonction peut effectuer tout ce qu'une fonction Javascript classique peut effectuer — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code>, etc. <code>testFunc.toString()</code> retourne un résultat intéressant:</p> +<p>Vous obtiendrez le résultat <code>function</code> en valeur de retour. Cette fonction peut effectuer tout ce qu'une fonction Javascript classique peut effectuer — <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code>, etc. <code>testFunc.toString()</code> retourne un résultat intéressant:</p> <pre class="brush: js">function 0() { [native code] @@ -63,7 +63,7 @@ typeof testFunc;</pre> <p>Some other particulars to be aware of with exported WebAssembly functions:</p> <ul> - <li>Their <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> property is the number of declared arguments in the wasm function signature.</li> - <li>Their <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> property is the <code>toString()</code> result of the function's index in the wasm module.</li> + <li>Their <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> property is the number of declared arguments in the wasm function signature.</li> + <li>Their <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> property is the <code>toString()</code> result of the function's index in the wasm module.</li> <li>If you try to call a exported wasm function that takes or returns an i64 type value, it currently throws an error because JavaScript currently has no precise way to represent an i64. This may well change in the future though — a new int64 type is being considered for future standards, which could then be used by wasm.</li> </ul> diff --git a/files/fr/webassembly/index.html b/files/fr/webassembly/index.html index f5c326b968..02b351d7b9 100644 --- a/files/fr/webassembly/index.html +++ b/files/fr/webassembly/index.html @@ -9,19 +9,17 @@ translation_of: WebAssembly --- <div>{{WebAssemblySidebar}}{{SeeCompatTable}}</div> -<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly est un nouveau type de code qui peut être exécuté dans un navigateur web moderne. C'est un langage bas niveau, semblable à l'assembleur permettant d'atteindre des performances proches des applications natives (par exemple écrites en C/C++) tout en fonctionnant sur le Web. WebAssembly est conçu pour fonctionner en lien avec JavaScript.</p> +<p>WebAssembly est un nouveau type de code qui peut être exécuté dans un navigateur web moderne. C'est un langage bas niveau, semblable à l'assembleur permettant d'atteindre des performances proches des applications natives (par exemple écrites en C/C++) tout en fonctionnant sur le Web. WebAssembly est conçu pour fonctionner en lien avec JavaScript.</p> -<h2 dir="ltr" id="En_résumé">En résumé</h2> +<h2 id="En_résumé">En résumé</h2> -<p dir="ltr">WebAssembly représente une avancée fondamentale de la plateforme web. Il permet d'exécuter du code (éventuellement écrit depuis différents langages) sur le Web avec des performances similaires aux applications natives.</p> +<p>WebAssembly représente une avancée fondamentale de la plateforme web. Il permet d'exécuter du code (éventuellement écrit depuis différents langages) sur le Web avec des performances similaires aux applications natives.</p> -<p dir="ltr">WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly.</p> +<p>WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly.</p> -<p dir="ltr">WebAssembly est conçu comme un standard web par le <a href="https://www.w3.org/community/webassembly/">groupe communautaire du W3C pour WebAssembly</a> auquel participe les différents éditeurs de navigateur.</p> +<p>WebAssembly est conçu comme un standard web par le <a href="https://www.w3.org/community/webassembly/">groupe communautaire du W3C pour WebAssembly</a> auquel participe les différents éditeurs de navigateur.</p> -<div class="row topicpage-table"> -<div class="section"> -<h2 dir="ltr" id="Guides">Guides</h2> +<h2 id="Guides">Guides</h2> <dl> <dt><a href="/fr/docs/WebAssembly/Concepts">Les concepts de WebAssembly</a></dt> @@ -41,10 +39,8 @@ translation_of: WebAssembly <dt><a href="/fr/docs/WebAssembly/Text_format_to_wasm">Convertir un fichier texte WebAssembly en wasm</a></dt> <dd>Cet article détaille comment convertir un module WebAssembly rédigé dans un format texte en un fichier binaire .wasm.</dd> </dl> -</div> -<div class="section"> -<h2 dir="ltr" id="Référence_de_l'API_JavaScript">Référence de l'API JavaScript</h2> +<h2 id="Référence_de_l'API_JavaScript">Référence de l'API JavaScript</h2> <dl> <dt>{{jsxref("Objets_globaux/WebAssembly", "WebAssembly")}}</dt> @@ -66,12 +62,11 @@ translation_of: WebAssembly <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> <dd>Crée un nouvel objet WebAssembly <code>RuntimeError</code>.</dd> </dl> -</div> -</div> -<h2 dir="ltr" id="Exemples">Exemples</h2> -<ul dir="ltr"> +<h2 id="Exemples">Exemples</h2> + +<ul> <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li> <li>Notre dépôt GitHub <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> qui contient plusieurs exemples.</li> </ul> @@ -101,7 +96,7 @@ translation_of: WebAssembly <h2 id="Voir_aussi">Voir aussi</h2> -<ul dir="ltr"> +<ul> <li><a href="http://webassembly.org/">webassembly.org</a></li> <li><a href="https://hacks.mozilla.org/category/webassembly/">Les articles WebAssembly sur Mozilla Hacks</a> ou sur <a href="https://tech.mozfr.org/tag/WebAssembly">tech.mozfr.org en français</a></li> <li><a href="https://www.w3.org/community/webassembly/">Le groupe communautaire W3C sur WebAssembly</a></li> diff --git a/files/fr/webassembly/loading_and_running/index.html b/files/fr/webassembly/loading_and_running/index.html index a4bffec293..2fd18151de 100644 --- a/files/fr/webassembly/loading_and_running/index.html +++ b/files/fr/webassembly/loading_and_running/index.html @@ -19,7 +19,7 @@ translation_of: WebAssembly/Loading_and_running <h2 id="En_utilisant_Fetch">En utilisant Fetch</h2> -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> est une API qui facilite la récupération de ressources sur le réseau.</p> +<p><a href="/fr/docs/Web/API/Fetch_API">Fetch</a> est une API qui facilite la récupération de ressources sur le réseau.</p> <p>La façon la plus rapide et la plus efficace de récupérer un module wasm (webassembly) est d'utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, qui accepte comme premier argument un appel de fonction <code>fetch()</code>, et s'occupe de récupérer, compiler, et instancier le module en une seule et même étape, en accedant directement au flux de code binaire provenant du serveur:</p> @@ -50,11 +50,11 @@ translation_of: WebAssembly/Loading_and_running }</pre> <div class="note"> -<p><strong>Note</strong>: En règle générale, on ne s'intéresse qu'à l'instance, mais il peut être utile de préserver le module afin de le mettre ultérieurement en cache, de le partager avec un autre worker ou window via <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, ou tout simplement pour créer d'autres instances.</p> +<p><strong>Note :</strong> En règle générale, on ne s'intéresse qu'à l'instance, mais il peut être utile de préserver le module afin de le mettre ultérieurement en cache, de le partager avec un autre worker ou window via <code><a href="/fr/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, ou tout simplement pour créer d'autres instances.</p> </div> <div class="note"> -<p><strong>Note</strong>: Un chargement supplémentaire du module nécessite un object de type {{jsxref("WebAssembly.Module")}} comme argument, et retourne une promesse contenant directement un objet de type instance comme résultat. Voir <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Second overload example</a>.</p> +<p><strong>Note :</strong> Un chargement supplémentaire du module nécessite un object de type {{jsxref("WebAssembly.Module")}} comme argument, et retourne une promesse contenant directement un objet de type instance comme résultat. Voir <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Second overload example</a>.</p> </div> <h3 id="Mise_en_marche_du_code_webassembly">Mise en marche du code webassembly</h3> @@ -75,12 +75,12 @@ translation_of: WebAssembly/Loading_and_running })</pre> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations sur la façon dont fonctionne l'exportation au sein d'un module webassembly, lisez <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a>, et <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations sur la façon dont fonctionne l'exportation au sein d'un module webassembly, lisez <a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a>, et <a href="/fr/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a>.</p> </div> <h2 id="En_utilisant_XMLHttpRequest">En utilisant XMLHttpRequest</h2> -<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> est plus ancien que Fetch, mais peut toujours être utiliser afin récupérer un array buffer. En supposant que notre module se nome <code>simple.wasm</code>:</p> +<p><code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> est plus ancien que Fetch, mais peut toujours être utiliser afin récupérer un array buffer. En supposant que notre module se nome <code>simple.wasm</code>:</p> <ol> <li>Créer une nouvel instance {{domxref("XMLHttpRequest()")}}, afin d'utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} nécessaire pour ouvrir une requête. Paramètrer la requête avec une méthode <code>GET</code>, et y déclarer le chemin du fichier que nous souhaiter récupérer.</li> @@ -104,5 +104,5 @@ request.onload = function() { };</pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez retrouver un autre exemple sur <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a>.</p> +<p><strong>Note :</strong> Vous pouvez retrouver un autre exemple sur <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a>.</p> </div> diff --git a/files/fr/webassembly/understanding_the_text_format/index.html b/files/fr/webassembly/understanding_the_text_format/index.html deleted file mode 100644 index 7ed8645381..0000000000 --- a/files/fr/webassembly/understanding_the_text_format/index.html +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: Comprendre le format texte de WebAssembly -slug: WebAssembly/Understanding_the_text_format -translation_of: WebAssembly/Understanding_the_text_format ---- - -<p>Afin de permettre aux humains de lire et d'éditer du code WebAssembly, il y a une représentation textuelle du format binaire wasm. C'est une forme intermédiaire conçue pour être affic<span class="hidden"> </span><span class="hidden"> </span>hée dans les éditeurs de texte, les outils de développeurs intégrés aux navigateurs web, etc. Cet article montre comment ce format fonctionne sur le plan syntaxique, mais aussi comment il se combine avec le code binaire sous-jacent — ainsi que l'objet JavaScript englobant qui représente wasm.</p> - <div><p><strong>Note :</strong> Ceci est potentiellement exagéré si vous êtes un développeur web cherchant uniquement à charger un module wasm dans une page pour l'utiliser dans votre code (voir <a href="https://developer.mozilla.org/fr/docs/WebAssembly/Using_the_JavaScript_API">Utilisez l'API JavaScript de WebAssembly</a>). Mais il est plus utile si, en revanche, vous voulez écrite des modules wasm pour optimiser les performances de votre librairies Javascript, ou construire votre propre compilateur WebAssembly</p></div> - -<h2 id="S-expressions">S-expressions</h2> - -<p>Dans le format binaire comme dans le format textuel, l'unité de code fondamentale en WebAssembly est le module. Dans le format textuel, un module est représenté par une grosse S-expression. Les S-expressions sont un format simple et ancien pour représenter des arbres logiques, et en conséquence, nous pouvons considérer un module comme un arbre de noeuds décrivant la structure du module et de son code. A l'inverse de l'Arbre Syntaxique Abstrait d'un langage de programmation, l'arbre de WebAssembly est assez plat, et consiste pour beaucoup en une liste d'instructions.</p> - -<p>Tout d'abord, regardons à quoi ressemble une S-expression. Chaque noeud de l'arbre se situe à l'intérieur d'un couple de parenthèses — <code>( ... )</code>. Le premier label dans ces parenthèses indique le type de noeud. Ensuite, il y a une liste de noeufs ou d'attributs séparés par des espaces. Donc si l'on considère la S-expression WebAssembly suivante :</p> - -<pre>(module (memory 1) (func))</pre> - -<p>Celle-ci représente un arbre avec un noeud racine "module" ainsi que deux noeuds enfants, un "memory" avec l'attribut 1, ainsi qu'un noeud "func". Nous allons bientôt voir ce que ces noeuds signifient.</p> - -<h3 id="Le_plus_basique_des_modules">Le plus basique des modules</h3> - -<p>Commençons avec la version la plus simple et la plus courte possible d'un module wasm.</p> - -<pre>(module) (commençons avec la version la plus simple et la plus courte possible d'un module wasm.) </pre> - -<p>Celui-ci est totalement vide, mais reste un module valide.</p> - -<p>Si l'on convertit notre module en binaire (voir <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a>), nous obtenons l'en-tête de module de 8 octets, décrite dans le <a href="https://webassembly.org/docs/binary-encoding/#high-level-structure">format binaire</a>.</p> - -<pre>0000000: 0061 736d ; WASM_BINARY_MAGIC -0000004: 0100 0000 ; WASM_BINARY_VERSION</pre> - -<h3 id="Ajouter_des_fonctionnalités_à_votre_module">Ajouter des fonctionnalités à votre module</h3> - -<p>Un module vide n'étant clairement pas très intéressant, prenons le temps d'y ajouter du code.</p> - -<p>Tout code dans un module WebAssembly est regroupé en fonctions, qui ont la structure suivante (en pseudo-code):</p> - -<pre>( func <signature> <locals> <body> )</pre> - -<ul> - <li>La <strong>signature </strong>déclare les arguments de la fonction ainsi que ses valeurs de retour.</li> - <li>Les <strong>locals</strong> sont un peu comme des variables JavaScript, mais avec des type explicitement déclarés.</li> - <li>Le <strong>body</strong> est juste une liste d'instructions bas-niveau.</li> -</ul> - -<p>Donc les fonctions WebAssembly se rapprochent beaucoup des fonctions dans les autres langages, à l'exception près qu'elles sont représentées par un S-expression.</p> - -<h2 id="Signatures_et_Paramètres">Signatures et Paramètres</h2> - -<p>La signature est une séquence de déclaration des différents types d'arguments, suivie par une liste de déclarations des différents types pour les valeurs de retours. Il est important de noter que :</p> - -<ul> - <li>L'absence de (result) signifie que la fonction ne retourne rien.</li> - <li>Dans la version actuelle, il peut y avoir au plus 1 type de retour, mais cette règle <a href="https://webassembly.org/docs/future-features/#multiple-return">va être assouplie à l'avenir</a>.</li> -</ul> - - - -<p>Chaque argument possède un type déclaré explicitement. Quatre types sont actuellement disponibles dans wasm</p> - -<ul> - <li><code>i32</code>: Entier 32-bit</li> - <li><code>i64</code>: Entier 64-bit</li> - <li><code>f32</code>: Nombre à virgule flottante 32-bit float</li> - <li><code>f64</code>: Nombre à virgule flottante 64-bit float</li> -</ul> - -<p>Un argument seul s'écrit <code>(param i32)</code> et le type de retour s'écrit <code>(result i32)</code>, donc une fonction binaire prenant deux entiers 32-bit and et retournant un nombre à virgule flottante 64-bit s'écrirait ainsi :</p> - -<pre>(func (param i32) (param i32) (result f64) ... )</pre> - -<p>Après la signature, les variables locales sont listées avec leur type, par exemple <code>(local i32)</code>. Les arguments sont juste des variables locales initialisées avec avec la valeur de l'argument correspondant, passé par la fonction appelante.</p> - -<h2 id="Récupérer_et_définir_les_variables_locales_et_les_arguments">Récupérer et définir les variables locales et les arguments</h2> - -<p>Les variables locales et les arguments peuvent être lus et écrits par le corps de la fonction, via les instructions <code>get_local</code> et <code>set_local</code>.</p> - -<p>Les commandes <code>get_local</code>/<code>set_local</code> désignent l'élément à récupérer/définir par son index numérique : les arguments sont référencés en premier, par ordre de déclaration, suivis par les variables locales, par ordre de déclaration également. Donc, en considérant la fonction suivante :</p> - -<pre>(func (param i32) (param f32) (local f64) - get_local 0 - get_local 1 - get_local 2)</pre> - -<p>L'instruction <code>get_local 0</code> récupère l'argument i32, <code>get_local 1</code> récupère l'argument f32, et <code>get_local 2</code> récupère la variable locale f64.</p> - -<p>Il y a un hic à cette manière de procéder. Le fait d'utiliser des index numériques pour faire références à des éléments du code peut être déroutant. Le format textuel de wasm vous permet pour éviter cela de nommer les arguments, variables locales et autres éléments du code, en incluant un nom préfixé par un symbol dollar (<code>$</code>) juste avant la déclaration du type.</p> - -<p>Ainsi, vous pourriez ré-écrire la signature précédente ainsi :</p> - -<pre>(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)</pre> - -<p>Et ensuite, vous pourriez écrire <code>get_local $p1</code> en lieu et place de <code>get_local 0</code>, etc. (Lorsque ce texte sera converti en binaire, le code de sortie contiendra uniquement l'entier)</p> - -<h2 id="Automates_à_pile">Automates à pile</h2> - -<p>Avant que nous puissions écrire le corps d'une fonction, nous devons aborder une dernière chose : <strong>les automates à pile</strong> (<em>Stack machines</em> en anglais). Bien que le navigateur compile le wasm en quelque chose de plus efficace, l'éxecution de wasm est définie par un automate à pile où l'idée de base est que chaque type d'instruction ajoute ou retire un certain nombre de valeurs <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code> à une pile.</p> - -<p>Par exemple, <code>get_local</code> est destinée à ajouter sur la pile la valeur de la variable qu'elle lit, et <code>i32.add</code> retire deux valeurs <code>i32</code> (il récupère implicitement les deux précédentes valeurs ajoutée sur la pile), calcule leur somme (modulo 2^32) et ajoute la valeur i32 résultante.</p> - -<p>Lorsqu'une fonction est appelée, elle débute avec une pile vide qui est peu à peu remplie et vidée durant l'exécution du corps de la fonction. Par exemple, après l'exécution de la fonction suivante :</p> - -<pre>(func (param $p i32) - get_local $p - get_local $p - i32.add)</pre> - -<p>La pile contient exactement une valeur i32 — le résultat de l'expression (<code>$p + $p</code>), qui est calculé par <code>i32.add</code>. La valeur de retour d'une fonction est simplement la dernière valeur restante de la pile.</p> - -<p>Les règles de validation de WebAssembly s'assurent de l'intégrité de la pile : si vous déclarez un <code>(result f32)</code>, alors la pile doit contenir exactement un <code>f32</code> à la fin. S'il n'y a pas de type de retour, alors la pile doit être vide.</p> - -<h2 id="Notre_premier_corps_de_fonction">Notre premier corps de fonction</h2> - -<p>Comme mentionné plus haut, le corps de la fonction est simplement une liste d'instructions qui s'enchaînent lorsque la fonction est appelée. En reprenant tout ce que nous avons déjà appris, nous pouvons enfin définir un module contenant notre simple fonction :</p> - -<pre>(module - (func (param $lhs i32) (param $rhs i32) (result i32) - get_local $lhs - get_local $rhs - i32.add))</pre> - -<p>Cette fonction prend deux arguments, fait leur somme, et retourne le résultat.</p> - -<p>Il y a évidemment beaucoup plus de choses qui peuvent être faites au sein du corps d'une fonction, mais pour l'instant nous allons rester dans la simplicité. Vous verrez beaucoup plus d'exemples au fur et à mesure. Pour avoir la liste exhaustive du code machine disponible, consultez <a href="https://webassembly.org/docs/semantics/">cette page</a>.</p> - -<h3 id="Appeler_la_fonction">Appeler la fonction</h3> - -<p>Notre fonction ne va pas faire grand chose en soi — maintenant nous devons l'appeler. Mais comment faire ? Un peu comme un module ES2015, les fonctions wasm doivent être explicitement exportées par une déclaration <code>export</code> dans le module.</p> - -<p>A l'image des variables locales, les fonctions sont identifiées par un index, mais par commodité, elle peuvent être nommées. Commençons par cela en premier : nous allons ajouter un nom précédé d'un symbole dollar, juste après le mot-clé <code>func</code>:</p> - -<pre>(func $add … )</pre> - -<p>Maintenant, nous allons ajouter la déclaration d'export, qui prend cette forme :</p> - -<pre>(export "add" (func $add))</pre> - -<p>Ici, <code>add</code> est le nom par lequel la fonction sera identifiée dans JavaScript, tandis que <code>$add</code> correspond à la fonction WebAssembly dans le module qui sera exportée.</p> - -<p>Notre module final ressemble à ceci (pour l'instant) :</p> - -<pre>(module - (func $add (param $lhs i32) (param $rhs i32) (result i32) - get_local $lhs - get_local $rhs - i32.add) - (export "add" (func $add)) -)</pre> - -<p>Si vous voulez suivre l'exemple, sauvegardez le module ci-dessus dans un fichier appelé <code>add.wat</code> , puis convertissez-le en un fichier binaire appelé <code>add.wasm</code> via wabt (cf. <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> pour plus de détails).</p> - -<p>Ensuite, nous allons charger notre binaire dans un tableau typé appelé <code>addCode</code> (comme décrit dans <a href="/en-US/docs/WebAssembly/Fetching_WebAssembly_bytecode">Fetching WebAssembly Bytecode</a>), le compiler et l'instantier, puis exécuter notre fonction <code>add</code> dans JavaScript (nous pouvons désormais obtenir <code>add()</code> dans la propriété <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">exports</a></code> de l'instance):</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('add.wasm')) -.then(obj => { - console.log(obj.instance.exports.add(1, 2)); // "3" -});</pre> - -<div class="note"> -<p><strong>Note</strong>: Vous pouvez récupérer cet exemple via GitHub : <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html">add.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/add.html">démo</a>). Voir aussi {{jsxref("WebAssembly.instantiate()")}} pour plus de détails à propos de la fonction d'instanciation, ainsi que <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a></code> pour le code source de <code>fetchAndInstantiate()</code>.</p> -</div> - -<h2 id="Sapproprier_les_fondamentaux">S'approprier les fondamentaux</h2> - -<p>Maintenant que nous avons vu les aspects basiques, continuons sur des fonctionnalités plus avancées.</p> - -<h3 id="Appeler_des_fonctions_à_partir_dautres_fonctions_du_même_module">Appeler des fonctions à partir d'autres fonctions du même module</h3> - -<p>L'instruction <code>call</code> appelle une fonction à partir de son index ou de son nom. Par exemple, le module suivant contient deux fonctions — l'une d'entre elle retourne la valeur 42, tandis que l'autre retourne le résultat de l'appel de la première plus un:</p> - -<pre>(module - (func $getAnswer (result i32) - i32.const 42) - (func (export "getAnswerPlus1") (result i32) - call $getAnswer - i32.const 1 - i32.add))</pre> - -<div class="note"> -<p><strong>Note</strong>: <code>i32.const</code> définit simplement un entier 32-bit et l'ajoute à la pile. Vous pouvez remplacer <code>i32</code> par n'importe quel autre type disponible, et changer la valeur du const comme vous le souhaitez (ici, nous avons défini la valeur <code>42</code>).</p> -</div> - -<p>Dans cet exemple, vous avez sûrement remarqué la section <code>(export "getAnswerPlus1")</code> , déclarée juste après la déclaration <code>func</code> de la seconde fonction. C'est un moyen plus rapide de déclarer que nous voulons exporter cette fonction, et de définir le nom avec lequel nous voulont l'exporter.</p> - -<p>Ceci revient à inclure une déclaration de fonction séparée en dehors de la fonction, autre part dans le module, de la même façon que ce que nous avons déjà fait précédemment :</p> - -<pre>(export "getAnswerPlus1" (func $functionName))</pre> - -<p>Voici le code JavaScript pour appeler notre module ci-dessus :</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('call.wasm')) -.then(obj => { - console.log(obj.instance.exports.getAnswerPlus1()); // "43" -});</pre> - -<div class="note"> -<p><strong>Note</strong>: Vous pouvez récupérer cet exemple via GitHub: <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">démo</a>). A nouveau, voir <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a></code> pour les sources de <code>fetchAndInstantiate()</code>.</p> -</div> - -<h3 id="Importer_des_fonctions_depuis_JavaScript">Importer des fonctions depuis JavaScript</h3> - -<p>Nous avons déjà vu du JavaScript appeler des fonctions WebAssembly, mais que dites-vous d'appeler des fonctions JavaScript depuis WebAssembly ? En fait, WebAssembly n'a pas nativement connaissance de JavaScript, mais il possède une méthode générique d'import de fonctions qui peut accepter des fonctions wasm ou JavaScript. Voici un exemple :</p> - -<pre>(module - (import "console" "log" (func $log (param i32))) - (func (export "logIt") - i32.const 13 - call $log))</pre> - -<p>WebAssembly has a two-level namespace so the import statement here is saying that we’re asking to import the <code>log</code> function from the <code>console</code> module. You can also see that the exported <code>logIt</code> function calls the imported function using the <code>call</code> instruction we introduced above.</p> - -<p>Imported functions are just like normal functions: they have a signature that WebAssembly validation checks statically, and they are given an index and can be named and called.</p> - -<p>JavaScript functions have no notion of signature, so any JavaScript function can be passed, regardless of the import’s declared signature. Once a module declares an import, the caller of {{jsxref("WebAssembly.instantiate()")}} must pass in an import object that has the corresponding properties.</p> - -<p>For the above, we need an object (let's call it <code>importObject</code>) such that <code>importObject.console.log</code> is a JavaScript function.</p> - -<p>This would look like the following:</p> - -<pre class="brush: js">var importObject = { - console: { - log: function(arg) { - console.log(arg); - } - } -}; - -WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) -.then(obj => { - obj.instance.exports.logIt(); -});</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html">logger.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html">see it live also</a>).</p> -</div> - -<h3 id="WebAssembly_Memory">WebAssembly Memory</h3> - -<p>The above example is a pretty terrible logging function: it only prints a single integer! What if we wanted to log a text string? To deal with strings and other more complex data types, WebAssembly provides <strong>memory</strong>. According to WebAssembly, memory is just a large array of bytes that can grow over time. WebAssembly contains instructions like <code>i32.load</code> and <code>i32.store</code> for reading and writing from <a href="http://webassembly.org/docs/semantics/#linear-memory">linear memory</a>.</p> - -<p>From JavaScript’s point of view, it’s as though memory is all inside one big (resizable) {{domxref("ArrayBuffer")}}. That’s literally all that asm.js has to play with (except that it isn't resizable; see the asm.js <a href="http://asmjs.org/spec/latest/#programming-model">Programming model</a>).</p> - -<p>So a string is just a sequence of bytes somewhere inside this linear memory. Let's assume that we’ve written a suitable string of bytes to memory; how do we pass that string out to JavaScript?</p> - -<p>The key is that JavaScript can create WebAssembly linear memory instances via the {{jsxref("WebAssembly.Memory()")}} interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. Memory instances have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">buffer</a></code> getter, which returns an <code>ArrayBuffer</code> that points at the whole linear memory.</p> - -<p>Memory instances can also grow, for example via the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> method in JavaScript. When growth occurs, since <code>ArrayBuffer</code>s can’t change size, the current <code>ArrayBuffer</code> is detached and a new <code>ArrayBuffer</code> is created to point to the newer, bigger memory. This means all we need to do to pass a string to JavaScript is to pass out the offset of the string in linear memory along with some way to indicate the length.</p> - -<p>While there are many different ways to encode a string’s length in the string itself (for example, C strings); for simplicity here we just pass both offset and length as parameters:</p> - -<pre>(import "console" "log" (func $log (param i32) (param i32)))</pre> - -<p>On the JavaScript side, we can use the <a href="/en-US/docs/Web/API/TextDecoder">TextDecoder API</a> to easily decode our bytes into a JavaScript string. (We specify <code>utf8</code> here, but many other encodings are supported.)</p> - -<pre class="brush: js">consoleLogString(offset, length) { - var bytes = new Uint8Array(memory.buffer, offset, length); - var string = new TextDecoder('utf8').decode(bytes); - console.log(string); -}</pre> - -<p>The last missing piece of the puzzle is where <code>consoleLogString</code> gets access to the WebAssembly <code>memory</code>. WebAssembly gives us a lot of flexibility here: we can either create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> object in JavaScript and have the WebAssembly module import the memory, or we can have the WebAssembly module create the memory and export it to JavaScript.</p> - -<p>For simplicity, let's create it in JavaScript then import it into WebAssembly. Our <code>import</code> statement is written as follows:</p> - -<pre>(import "js" "mem" (memory 1))</pre> - -<p>The <code>1</code> indicates that the imported memory must have at least 1 page of memory (WebAssembly defines a page to be 64KB.)</p> - -<p>So let's see a complete module that prints the string “Hi”. In a normal compiled C program, you’d call a function to allocate some memory for the string, but since we’re just writing our own assembly here and we own the entire linear memory, we can just write the string contents into global memory using a <code>data</code> section. Data sections allow a string of bytes to be written at a given offset at instantiation time and are similar to the <code>.data</code> sections in native executable formats.</p> - -<p>Our final wasm module looks like this:</p> - -<pre>(module - (import "console" "log" (func $log (param i32 i32))) - (import "js" "mem" (memory 1)) - (data (i32.const 0) "Hi") - (func (export "writeHi") - i32.const 0 ;; pass offset 0 to log - i32.const 2 ;; pass length 2 to log - call $log))</pre> - -<div class="note"> -<p><strong>Note</strong>: Above, note the double semi-colon syntax (<code>;;</code>) for allowing comments in WebAssembly files.</p> -</div> - -<p>Now from JavaScript we can create a Memory with 1 page and pass it in. This results in "Hi" being printed to the console:</p> - -<pre class="brush: js">var memory = new WebAssembly.Memory({initial:1}); - -var importObj = { console: { log: consoleLogString }, js: { mem: memory } }; - -WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) -.then(obj => { - obj.instance.exports.writeHi(); -});</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find the full source on GitHub as <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html">logger2.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html">also see it live</a>).</p> -</div> - -<h3 id="WebAssembly_tables">WebAssembly tables</h3> - -<p>To finish this tour of the WebAssembly text format, let’s look at the most intricate, and often confusing, part of WebAssembly: <strong>tables</strong>. Tables are basically resizable arrays of references that can be accessed by index from WebAssembly code.</p> - -<p>To see why tables are needed, we need to first observe that the <code>call</code> instruction we saw earlier (see {{anch("Calling functions from other functions in the same module")}}) takes a static function index and thus can only ever call one function — but what if the callee is a runtime value?</p> - -<ul> - <li>In JavaScript we see this all the time: functions are first-class values.</li> - <li>In C/C++, we see this with function pointers.</li> - <li>In C++, we see this with virtual functions.</li> -</ul> - -<p>WebAssembly needed a type of call instruction to achieve this, so we gave it <code>call_indirect</code>, which takes a dynamic function operand. The problem is that the only types we have to give operands in WebAssembly are (currently) <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code>.</p> - -<p>WebAssembly could add an <code>anyfunc</code> type ("any" because the type could hold functions of any signature), but unfortunately this <code>anyfunc</code> type couldn’t be stored in linear memory for security reasons. Linear memory exposes the raw contents of stored values as bytes and this would allow wasm content to arbitrarily observe and corrupt raw function addresses, which is something that cannot be allowed on the web.</p> - -<p>The solution was to store function references in a table and pass around table indices instead, which are just i32 values. <code>call_indirect</code>’s operand can therefore simply be an i32 index value.</p> - -<h4 id="Defining_a_table_in_wasm">Defining a table in wasm</h4> - -<p>So how do we place wasm functions in our table? Just like <code>data</code> sections can be used to initialize regions of linear memory with bytes, <code>elem</code> sections can be used to initialize regions of tables with functions:</p> - -<pre>(module - (table 2 anyfunc) - (elem (i32.const 0) $f1 $f2) - (func $f1 (result i32) - i32.const 42) - (func $f2 (result i32) - i32.const 13) - ... -)</pre> - -<ul> - <li>In <code>(table 2 anyfunc)</code>, the 2 is the initial size of the table (meaning it will store two references) and <code>anyfunc</code> declares that the element type of these references is "a function with any signature". In the current iteration of WebAssembly, this is the only allowed element type, but in the future, more element types will be added.</li> - <li>The functions (<code>func</code>) sections are just like any other declared wasm functions. These are the functions we are going to refer to in our table (for example’s sake, each one just returns a constant value). Note that the order the sections are declared in doesn’t matter here — you can declare your functions anywhere and still refer to them in your <code>elem</code> section.</li> - <li>The <code>elem</code> section can list any subset of the functions in a module, in any order, allowing duplicates. This is a list of the functions that are to be referenced by the table, in the order they are to be referenced.</li> - <li>The <code>(i32.const 0)</code> value inside the <code>elem</code> section is an offset — this needs to be declared at the start of the section, and specifies at what index in the table function references start to be populated. Here we’ve specified 0, and a size of 2 (see above), so we can fill in two references at indexes 0 and 1. If we wanted to start writing our references at offset 1, we’d have to write <code>(i32.const 1)</code>, and the table size would have to be 3.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Uninitialized elements are given a default throw-on-call value.</p> -</div> - -<p>In JavaScript, the equivalent calls to create such a table instance would look something like this:</p> - -<pre class="brush: js">function() { - // table section - var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); - - // function sections: - var f1 = function() { … } - var f2 = function() { … } - - // elem section - tbl.set(0, f1); - tbl.set(1, f2); -};</pre> - -<h4 id="Using_the_table">Using the table</h4> - -<p>Moving on, now we’ve defined the table we need to use it somehow. Let's use this section of code to do so:</p> - -<pre>(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail -(func (export "callByIndex") (param $i i32) (result i32) - get_local $i - call_indirect (type $return_i32))</pre> - -<ul> - <li>The <code>(type $return_i32 (func (param i32)))</code> block specifies a type, with a reference name. This type is used when performing type checking of the table function reference calls later on. Here we are saying that the references need to be functions that return an <code>i32</code> as a result.</li> - <li>Next, we define a function that will be exported with the name <code>callByIndex</code>. This will take one <code>i32</code> as a parameter, which is given the argument name <code>$i</code>.</li> - <li>Inside the function, we add one value to the stack — whatever value is passed in as the parameter <code>$i</code>.</li> - <li>Finally, we use <code>call_indirect</code> to call a function from the table — it implicitly pops the value of <code>$i</code> off the stack. The net result of this is that the <code>callByIndex</code> function invokes the <code>$i</code>’th function in the table.</li> -</ul> - -<p>You could also declare the <code>call_indirect</code> parameter explicitly during the command call instead of before it, like this:</p> - -<pre>(call_indirect (type $return_i32) (get_local $i))</pre> - -<p>In a higher level, more expressive language like JavaScript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. The pseudo code would look something like <code>tbl[i]()</code>.</p> - -<p>So, back to the typechecking. Since WebAssembly is typechecked, and <code>anyfunc</code> means "any function signature", we have to supply the presumed signature of the callee at the callsite, hence we include the <code>$return_i32</code> type, to tell the program a function returning an <code>i32</code> is expected. If the callee doesn’t have a matching signature (say an <code>f32</code> is returned instead), a {{jsxref("WebAssembly.RuntimeError")}} is thrown.</p> - -<p>So what links the <code>call_indirect</code> to the table we are calling? The answer is that there is only one table allowed right now per module instance, and that is what <code>call_indirect</code> is implicitly calling. In the future, when multiple tables are allowed, we would also need to specify a table identifier of some kind, along the lines of</p> - -<pre>call_indirect $my_spicy_table (type $i32_to_void)</pre> - -<p>The full module all together looks like this, and can be found in our <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat">wasm-table.wat</a> example file:</p> - -<pre>(module - (table 2 anyfunc) - (func $f1 (result i32) - i32.const 42) - (func $f2 (result i32) - i32.const 13) - (elem (i32.const 0) $f1 $f2) - (type $return_i32 (func (result i32))) - (func (export "callByIndex") (param $i i32) (result i32) - get_local $i - call_indirect (type $return_i32)) -)</pre> - -<p>We load it into a webpage using the following JavaScript:</p> - -<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('wasm-table.wasm')) -.then(obj => { - console.log(obj.instance.exports.callByIndex(0)); // returns 42 - console.log(obj.instance.exports.callByIndex(1)); // returns 13 - console.log(obj.instance.exports.callByIndex(2)); // returns an error, because there is no index position 2 in the table -});</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html">wasm-table.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html">see it live also</a>).</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Just like Memory, Tables can also be created from JavaScript (see <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table">WebAssembly.Table()</a></code>) as well as imported to/from another wasm module.</p> -</div> - -<h3 id="Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking</h3> - -<p>Because JavaScript has full access to function references, the Table object can be mutated from JavaScript by the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">grow()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">get()</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">set()</a></code> methods. When WebAssembly gets <a href="http://webassembly.org/docs/gc/">reference types</a>, WebAssembly code will be able to mutate tables itself with <code>get_elem</code>/<code>set_elem</code> instructions.</p> - -<p>Because tables are mutable, they can be used to implement sophisticated load-time and run-time <a href="http://webassembly.org/docs/dynamic-linking">dynamic linking schemes</a>. When a program is dynamically linked, multiple instances share the same memory and table. This is symmetric to a native application where multiple compiled <code>.dll</code>s share a single process’s address space.</p> - -<p>To see this in action, we’ll create a single import object containing a Memory object and a Table object, and pass this same import object to multiple <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate">instantiate()</a></code> calls.</p> - -<p>Our <code>.wat</code> examples look like so:</p> - -<p><code>shared0.wat</code>:</p> - -<pre>(module - (import "js" "memory" (memory 1)) - (import "js" "table" (table 1 anyfunc)) - (elem (i32.const 0) $shared0func) - (func $shared0func (result i32) - i32.const 0 - i32.load) -)</pre> - -<p><code>shared1.wat</code>:</p> - -<pre>(module - (import "js" "memory" (memory 1)) - (import "js" "table" (table 1 anyfunc)) - (type $void_to_i32 (func (result i32))) - (func (export "doIt") (result i32) - i32.const 0 - i32.const 42 - i32.store ;; store 42 at address 0 - i32.const 0 - call_indirect (type $void_to_i32)) -)</pre> - -<p>These work as follows:</p> - -<ol> - <li>The function <code>shared0func</code> is defined in <code>shared0.wat</code>, and stored in our imported table.</li> - <li>This function creates a constant containing the value <code>0</code>, and then uses the <code>i32.load</code> command to load the value contained in the provided memory index. The index provided is <code>0</code> — again, it implicitly pops the previous value off the stack. So <code>shared0func</code> loads and returns the value stored at memory index <code>0</code>.</li> - <li>In <code>shared1.wat</code>, we export a function called <code>doIt</code> — this fucntion creates two constants containing the values <code>0</code> and <code>42</code>, then calls <code>i32.store</code> to store a provided value at a provided index of the imported memory. Again, it implicitly pops these values off the stack, so the result is that it stores the value <code>42</code> in memory index <code>0</code>,</li> - <li>In the last part of the function, we create a constant with value <code>0</code>, then call the function at this index 0 of the table, which is <code>shared0func</code>, stored there earlier by the <code>elem</code> block in <code>shared0.wat</code>.</li> - <li>When called, <code>shared0func</code> loads the <code>42</code> we stored in memory using the <code>i32.store</code> command in <code>shared1.wat</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: The above expressions again pop values from the stack implicitly, but you could declare these explicitly inside the command calls instead, for example:</p> - -<pre>(i32.store (i32.const 0) (i32.const 42)) -(call_indirect (type $void_to_i32) (i32.const 0))</pre> -</div> - -<p>After converting to assembly, we then use <code>shared0.wasm</code> and <code>shared1.wasm</code> in JavaScript via the following code:</p> - -<pre class="brush: js">var importObj = { - js: { - memory : new WebAssembly.Memory({ initial: 1 }), - table : new WebAssembly.Table({ initial: 1, element: "anyfunc" }) - } -}; - -Promise.all([ - WebAssembly.instantiateStreaming(fetch('shared0.wasm'), importObj), - WebAssembly.instantiateStreaming(fetch('shared1.wasm'), importObj) -]).then(function(results) { - console.log(results[1].instance.exports.doIt()); // prints 42 -});</pre> - -<p>Each of the modules that is being compiled can import the same memory and table objects and thus share the same linear memory and table "address space".</p> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html">shared-address-space.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html">see it live also</a>).</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>This finishes our high-level tour of the major components of the WebAssembly text format and how they get reflected in the WebAssembly JS API.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The main thing that wasn’t included is a comprehensive list of all the instructions that can occur in function bodies. See the <a href="http://webassembly.org/docs/semantics">WebAssembly semantics</a> for a treatment of each instruction.</li> - <li>See also the <a href="https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax">grammar of the text format</a> that is implemented by the spec interpreter.</li> -</ul> diff --git a/files/fr/webassembly/using_the_javascript_api/index.html b/files/fr/webassembly/using_the_javascript_api/index.html index 7e21dc4511..7e200a4247 100644 --- a/files/fr/webassembly/using_the_javascript_api/index.html +++ b/files/fr/webassembly/using_the_javascript_api/index.html @@ -5,10 +5,10 @@ translation_of: WebAssembly/Using_the_JavaScript_API --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Si vous avez déjà <a href="/en-US/docs/WebAssembly/C_to_wasm">compilé un module depuis un autre langage en utilisant des outils comme Emscripten</a>, ou <a href="/en-US/docs/WebAssembly/Loading_and_running">chargé et éxecuté vous-même le code</a>, l'étape suivante est d'en apprendre plus à propos des autres fonctionnalités de l'API JavaScript WebAssembly. Cet article vous enseigne ce que vous aurez besoin de connaître.</p> +<p>Si vous avez déjà <a href="/fr/docs/WebAssembly/C_to_wasm">compilé un module depuis un autre langage en utilisant des outils comme Emscripten</a>, ou <a href="/fr/docs/WebAssembly/Loading_and_running">chargé et éxecuté vous-même le code</a>, l'étape suivante est d'en apprendre plus à propos des autres fonctionnalités de l'API JavaScript WebAssembly. Cet article vous enseigne ce que vous aurez besoin de connaître.</p> <div class="note"> -<p><strong>Note</strong>: Si vous n'êtes pas familier avec les concepts de base mentionnés dans cet article et vous avez besoin de plus d'explication, lisez d'abord <a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a>.</p> +<p><strong>Note :</strong> Si vous n'êtes pas familier avec les concepts de base mentionnés dans cet article et vous avez besoin de plus d'explication, lisez d'abord <a href="/fr/docs/WebAssembly/Concepts">WebAssembly concepts</a>.</p> </div> <h2 id="Quelques_exemples_simples">Quelques exemples simples</h2> @@ -16,7 +16,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>Parcourons quelques exemples illustrant l'utilisation de l'API Webassembly Javascript, et en particulier la manière dont elle peut être utilisé pour charger un module wasm au sein d'une page web. </p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver des exemples de code dans notre repo GitHub <a href="https://github.com/mdn/webassembly-examples">webassembly-examples</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver des exemples de code dans notre repo GitHub <a href="https://github.com/mdn/webassembly-examples">webassembly-examples</a>.</p> </div> <h3 id="Préparation">Préparation</h3> @@ -25,7 +25,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <li>Premièrement nous avons besoin d'un module wasm ! Récupérez notre fichier <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> et sauvegardez une copie dans un nouveau document sur votre machine locale.</li> <li>Ensuite, assurez-vous d'utiliser un navigateur supportant WebAssembly. Firefox 52+ et Chrome 57+ supportent WebAssembly par défaut.</li> <li>Pour poursuivre, créez un simple fichier nommé <code>index.html</code> dans le même dossier que votre fichier wasm (vous pouvez utiliser notre <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">template simple</a> si vous n'en avez pas de facilement accessible).</li> - <li>Maintenant, pour nous aider à comprendre ce qui se passe ici, regardons la représentation textuelle de notre module wasm (que nous rencontrons aussi dans <a href="/en-US/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Converting WebAssembly format to wasm</a>): + <li>Maintenant, pour nous aider à comprendre ce qui se passe ici, regardons la représentation textuelle de notre module wasm (que nous rencontrons aussi dans <a href="/fr/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Converting WebAssembly format to wasm</a>): <pre>(module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") @@ -78,7 +78,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>In Firefox 54+, the Developer Tool Debugger Panel has functionality to expose the text representation of any wasm code included in a web page. To view it, you can go to the Debugger Panel and click on the “wasm://” entry.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15823/wasm-debug.png"></p> +<p><img alt="" src="wasm-debug.png"></p> <p>Starting soon in Firefox, in addition to viewing WebAssembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) WebAssembly using the text format. See <a href="https://www.youtube.com/watch?v=R1WtBkMeGds">WebAssembly debugging with Firefox DevTools</a> for a video preview.</p> @@ -126,7 +126,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>Note: En raison du caractère immuable de la longueur de byte d'un {{domxref("ArrayBuffer")}}, après une opération {{jsxref("Memory.prototype.grow()")}} réussie, le buffer getter retourne un nouvel objet ArrayBuffer (avec la nouvelle longeur de byte du buffer) et tous les objets ArrayBuffer précédents se retrouve en état "dissocié", ou déconnectés de l'espace mémoire dont ils étaient issus initialement.</p> -<p>Tout comme les fonctions, les espaces mémoires linéaires peuvent être définis à l'intérieur du module, ou bien importés. De manière similaire aux fonctions, un module peut également exporter sa mémoire. Cela signifie que Javascript peut accéder à la mémoire d'une instance WebAssembly soit en créant un nouveau <code>WebAssembly.Memory</code> afin de le passer en import à cette instance, soit en recevant un export Memory (via <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>).</p> +<p>Tout comme les fonctions, les espaces mémoires linéaires peuvent être définis à l'intérieur du module, ou bien importés. De manière similaire aux fonctions, un module peut également exporter sa mémoire. Cela signifie que Javascript peut accéder à la mémoire d'une instance WebAssembly soit en créant un nouveau <code>WebAssembly.Memory</code> afin de le passer en import à cette instance, soit en recevant un export Memory (via <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>).</p> <h3 id="Exemple_avancé_pour_lutilisation_mémoire">Exemple avancé pour l'utilisation mémoire</h3> @@ -160,7 +160,7 @@ console.log(sum);</code></pre> </li> </ol> -<p>Note: vous pouvez remarquer que nous avons créé la vue {{domxref("Uint32Array")}} sur le champ buffer de l'objet Memory (<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), et pas sur l'objet Memory lui même.</p> +<p>Note: vous pouvez remarquer que nous avons créé la vue {{domxref("Uint32Array")}} sur le champ buffer de l'objet Memory (<code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), et pas sur l'objet Memory lui même.</p> <p>Les imports Memory fonctionnent de la même manière que les imports fonctions, à la différence prés que les objets Memory véhiculent des valeurs au lieu de fonctions Javscripts. Les imports Memory sont utiles pour deux raisons:</p> @@ -181,7 +181,7 @@ console.log(sum);</code></pre> <p>Lorsque l'appel à un pointeur sur fonction est nécessaire, le caller WebAssembly fournit l'index de la référence à appeler. La valeur de cet index est controlée par rapport au valeurs limites données à l'instantiation de la table (safety bounds checked), et cela avant que l'appel par référence à la fonction soit effectué. Autrement dit, les tables sont actuellement des primitives bas niveau utilisées pour compiler des fonctionnalités de language de programmation bas niveau, de manière sûre et portable.</p> -<p>Les Tables peuvent être modifiées via <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>, which updates one of the values in a table, and <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>, which increases the number of values that can be stored in a table. This allows the indirectly-callable set of functions to change over time, which is necessary for <a href="http://webassembly.org/docs/dynamic-linking/">dynamic linking techniques</a>. The mutations are immediately accessible via <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> in JavaScript, and to wasm modules.</p> +<p>Les Tables peuvent être modifiées via <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>, which updates one of the values in a table, and <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>, which increases the number of values that can be stored in a table. This allows the indirectly-callable set of functions to change over time, which is necessary for <a href="http://webassembly.org/docs/dynamic-linking/">dynamic linking techniques</a>. The mutations are immediately accessible via <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> in JavaScript, and to wasm modules.</p> <h3 id="Un_exemple_de_table">Un exemple de table</h3> @@ -213,7 +213,7 @@ console.log(tbl.get(1)()); // 42</code></pre> </li> </ol> -<p>Ce code accède à chaque fonction référencée contenue dans la table, et l' instancie afin d'imprimer sa valeur de retour dans la console — à noter que chaque référence de fonction est obtenue à l'aide de la méthode <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>, suivie d'une paire suplémentaire de parenthèses pour finaliser l'invocation de la fonction.</p> +<p>Ce code accède à chaque fonction référencée contenue dans la table, et l' instancie afin d'imprimer sa valeur de retour dans la console — à noter que chaque référence de fonction est obtenue à l'aide de la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>, suivie d'une paire suplémentaire de parenthèses pour finaliser l'invocation de la fonction.</p> <p><strong>Note</strong>: Vous pouvez retoruver la démo complète sur <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (voir également <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">live</a>).</p> @@ -277,7 +277,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) <li>Une instance mémoire ou table peut être utilisée par 0-N instances de module — ces instances partagent toutes le même espace d'adressage, rendant possible l'implémentation d'un lien dynamique.</li> </ul> -<p>Vous pouvez voir la mise en application du concept de multiplicité dans notre article Understanding text format — voir en particulier la section <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking</a>.</p> +<p>Vous pouvez voir la mise en application du concept de multiplicité dans notre article Understanding text format — voir en particulier la section <a href="/fr/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking</a>.</p> <h2 id="Résumé">Résumé</h2> @@ -287,6 +287,6 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) <ul> <li><a href="http://webassembly.org/">webassembly.org</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="/fr/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> </ul> |