Differences
This shows you the differences between two versions of the page.
|
alf:laboratoare:11 [2019/05/06 10:01] teodor.deaconu [Solutions] |
alf:laboratoare:11 [2021/05/25 00:37] (current) diana.ghindaoanu |
||
|---|---|---|---|
| Line 3: | Line 3: | ||
| ===== Syntax - forme text ===== | ===== Syntax - forme text ===== | ||
| - | Lisez le tutorial a [[https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format|Mozilla Web Assembly Tutorial]]. | + | Avant de commencer le TP, lisez le tutoriel suivant: [[https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format|Mozilla Web Assembly Tutorial]]. |
| - | La documentation de Web Assembly est disponible a [[http://webassembly.org/docs/semantics/|WebAssembly Semantics]] | + | Pour plus d'informations, la documentation de Web Assembly est disponible ici: [[https://webassembly.github.io/spec/core/index.html|WebAssembly Specification]] et [[https://webassembly.github.io/spec/core/appendix/index-instructions.html|Index of Instructions]] |
| ===== Utilisation de Web Assembly ===== | ===== Utilisation de Web Assembly ===== | ||
| - | On va utilizes la page pour Web Assembly a [[https://cdn.rawgit.com/WebAssembly/wabt/aae5a4b7/demo/wat2wasm/|wat2wasm]] | + | Pour tester les exemples présentés dans ce TP, on va utiliser la page destinée a Web Assembly: [[https://webassembly.studio/|Web Assembly Studio]] |
| - | Web Assembly est utilisé à partir de Javascript. | + | Si vous voulez commencer votre travail a partir d'un programme deja créé, vous pouvez accéder a ce [[https://webassembly.studio/?f=9o45ipku27|lien]] |
| - | Pour la partie de Javascript, ecrivez le code suivante | + | Si vous choisissez de créer votre propre projet, tout d'abour vous devez suivre ces étapes: |
| - | <code javascript> | + | |
| - | const wasmInstance = | + | |
| - | new WebAssembly.Instance(wasmModule, { | + | |
| - | io:{ | + | |
| - | print: console.log | + | |
| - | } | + | |
| - | }); | + | |
| - | </code> | + | |
| - | Un example de web assembly est: | + | Sélectionnez l’option **Empty Wat Project** et appuyez sur **Create**: |
| - | <code> | + | {{ :alf:laboratoare:tp12-1.jpg?500&nolink }} |
| - | (module | + | |
| - | (import "io" "print" (func $print (param $s i32))) | + | Dans la nouvelle fenetre ouverte, vous pouvez modifier les fichiers qui se trouvent dans le dossier //src//. Pour la partie JavaScript, vous allez modifier le code source du fichier ''main.js'', en le remplacant comme dans l'exemple suivant : |
| - | (func $start | + | {{ :alf:laboratoare:tp12-2.jpg?500&nolink }} |
| - | i32.const 120 | + | |
| - | call $print | + | |
| - | ) | + | |
| - | (start $start) | + | |
| - | ) | + | |
| - | </code> | + | Dans le fichier ''main.wat'', vous allez trouver le code suivant : |
| + | {{ :alf:laboratoare:tp12-3.jpg?500&nolink }} | ||
| + | |||
| + | Ici, on a créé une fonction qui réalise l’opération d’addition entre 2 numéros donnés comme paramètres et qui retourne le résultat (la somme). L’appel de cette fonction a été realisé précédemment dans le fichier ''main.js'' | ||
| + | |||
| + | |||
| + | <note> | ||
| + | Après avoir modifié le contenu d’un fichier, vous devez sauvegarder les changements (Ctrl+S ou le bouton **Save**). | ||
| + | </note> | ||
| + | |||
| + | Pour exécuter le programme, vous devez appuyer sur le bouton **Build&Run** et le résultat de votre programme sera affiché dans la section **Output**. | ||
| - | ===== Trasnlation de code en Web Assembly ==== | + | ===== Translation de code en Web Assembly ==== |
| ==== Program Principal ==== | ==== Program Principal ==== | ||
| Line 65: | Line 62: | ||
| (module | (module | ||
| (func $sum (param $a i32) (param $b i32) (result i32) | (func $sum (param $a i32) (param $b i32) (result i32) | ||
| - | get_local $a | + | local.get $a |
| - | get_local $b | + | local.get $b |
| i32.add | i32.add | ||
| return | return | ||
| Line 88: | Line 85: | ||
| (func $name (local $a i32) (result i32) | (func $name (local $a i32) (result i32) | ||
| i32.const 0; | i32.const 0; | ||
| - | set_local $a | + | local.set $a |
| - | get_local $a | + | local.get $a |
| return | return | ||
| ) | ) | ||
| Line 99: | Line 96: | ||
| <code wat> | <code wat> | ||
| (module | (module | ||
| - | (import "io" "print" (func $print (param $n i32)) | + | (import "io" "print" (func $print (param i32))) |
| - | ;; use the print function | + | (func $start |
| - | i32.const 120 | + | i32.const 120 |
| - | call $print | + | call $print) |
| + | (export "start" (func $start)) | ||
| ) | ) | ||
| + | </code> | ||
| + | |||
| + | === Structure du fichier Javascript pour afficher la valeur sur l'ecran=== | ||
| + | |||
| + | <code javascript> | ||
| + | fetch('../out/main.wasm').then(response => | ||
| + | response.arrayBuffer() | ||
| + | ).then(bytes => WebAssembly.instantiate(bytes, { | ||
| + | io: { | ||
| + | print: console.log | ||
| + | } | ||
| + | })).then(results => { | ||
| + | let instance = results.instance; | ||
| + | // instance is your webassembly module | ||
| + | let asm = instance.exports; | ||
| + | // asm is an object with all the items that you exported | ||
| + | console.log (asm.start()); | ||
| + | }).catch(console.error); | ||
| + | |||
| </code> | </code> | ||
| Line 121: | Line 138: | ||
| <code wat> | <code wat> | ||
| ;; import the print function | ;; import the print function | ||
| - | get_local $a | + | local.get $a |
| - | get_local $b | + | local.get $b |
| i32.gt | i32.gt | ||
| if | if | ||
| - | get_local $a | + | local.get $a |
| call $print | call $print | ||
| else | else | ||
| - | get_local $b | + | local.get $b |
| call $print | call $print | ||
| end | end | ||
| Line 150: | Line 167: | ||
| block $endwhile | block $endwhile | ||
| loop $while | loop $while | ||
| - | get_local $a | + | local.get $a |
| i32.const 120 | i32.const 120 | ||
| i32.gt | i32.gt | ||
| br_if $endwhile | br_if $endwhile | ||
| - | get_local $a | + | local.get $a |
| call $print | call $print | ||
| - | get_local $a | + | local.get $a |
| i32.const 1 | i32.const 1 | ||
| i32.add | i32.add | ||
| - | set_local $a | + | local.set $a |
| br $while | br $while | ||
| end $while | end $while | ||
| Line 177: | Line 194: | ||
| ;; import the print function | ;; import the print function | ||
| i32.const 1 | i32.const 1 | ||
| - | set_local $i | + | local.set $i |
| block $endfor | block $endfor | ||
| loop $for | loop $for | ||
| - | get_local $i | + | local.get $i |
| i32.const 120 | i32.const 120 | ||
| i32.gt | i32.gt | ||
| br_if $endfor | br_if $endfor | ||
| - | get_local $i | + | local.get $i |
| call $print | call $print | ||
| - | get_local $i | + | local.get $i |
| i32.const 1 | i32.const 1 | ||
| i32.add | i32.add | ||
| - | set_local $i | + | local.set $i |
| br $for | br $for | ||
| end $for | end $for | ||
| Line 209: | Line 226: | ||
| ;; import the print function | ;; import the print function | ||
| i32.const 1 | i32.const 1 | ||
| - | set_local $a | + | local.set $a |
| loop $dowhile | loop $dowhile | ||
| - | get_local $a | + | local.get $a |
| call $print | call $print | ||
| - | get_local $a | + | local.get $a |
| i32.const 1 | i32.const 1 | ||
| i32.add | i32.add | ||
| - | set_local $a | + | local.set $a |
| - | get_local $a | + | local.get $a |
| i32.const 120 | i32.const 120 | ||
| i32.le | i32.le | ||
| Line 225: | Line 242: | ||
| ==== Exercises ==== | ==== Exercises ==== | ||
| - | - Ecrivez le code WebAssembly pour le calcul de l'expression (2 + 3 * (7 + 5)). Écrivez-le en utilisant du papier ou un éditeur de texte. (**2p**) | + | Pour les exercices suivants, vous pouvez écrire et envoyer le code source dans des fichiers texte. Vous devez ajouter aussi le code WAT, que le code JavaScript. Pour tester la validité de vos programmes, vous devez utiliser [[https://webassembly.studio/?f=9o45ipku27|le project]]. |
| - | - Ecrire un programme qui a une fonction de démarrage et imprime le jour actuel du mois. (**1p**) | + | |
| - | - Ecrivez un programme qui affiche la somme de deux variables locales de la fonction start. (**1p**) | + | <note info>Veuillez utiliser Firefox ou Chrome.</note> |
| - | - Ecrire un programme avec une fonction qui calcule la soustraction de deux nombres. Utilisez la fonction. (**1p**) | + | |
| - | - Ecrire une fonction qui vérifie si un nombre est impair. Imprimer 1 si c'est le cas, 0 sinon. (**1p**) | + | <note important> |
| - | - Ecrire une fonction qui imprime tous les nombres de 1 à 1000. (**1p**) | + | Pour ces exercices que vous allez résoudre en Web Assembly Studio, vous allez utiliser ''get_local'' et ''set_local'' au lieu de ''local.get'' et ''local.set''. |
| - | - Ecrire une fonction qui calcule la puissance d'un nombre. La fonction reçoit deux paramètres: le nombre et la puissance. (**1p**) | + | </note> |
| - | - Ecrire une fonction qui vérifie si un nombre est premier. (**2p**) | + | |
| + | - Ecrivez dans un fichier **ex1.txt** le code WebAssembly pour le calcul de l'expression 5-4*2/(1+3).(**1.5p**) | ||
| + | - Ecrivez un programme (//wat// et //js//) qui a une fonction de démarrage //start// et affiche sur l'écran le numéro correspondant a votre date de naissance. Utilisez [[https://webassembly.studio/?f=lmyi28gq7it|l'exemple]]. (**1p**) | ||
| + | - Ecrivez un programme qui initialise 3 variables **locales** avec les valeurs 4, 5 et 6 dans la fonction //start// et calcule le résultat de l'expression ''a+b%c''. (**1p**) | ||
| + | - Ecrivez un programme avec qui inclut la déclaration d'une fonction qui calcule et affiche la moyenne arithmétique des 3 numéros donnés comme parametres. Appelez la fonction dans la fonction //start//. (**1.5p**) | ||
| + | - Ecrivez une fonction qui calcule de reste de la disivion de son parametre par 5. Dans la fonction //start//, appelez la fonction //is_divisible// avec le parametre 25. (**1p**) | ||
| + | - Ecrivez une fonction qui affiche sur l'ecran le cube de chaque nombre de l'intervalle [1, 10]. (**2p**) | ||
| + | - Ecrivez une fonction //sq_sum// qui calcule la somme des racines carrées des nombres //pairs// d'un intervalle donné. La fonction reçoit deux paramètres qui représentent les limites de l'intervalle et affiche sur l'écran le résultat. Dans la fonction //start//, appelez la fonction //sq_sum// avec les parametres 0 et 3. (**2p**) | ||
| + | - Ecrivez une fonction qui vérifie si un nombre est premier et affichez 1 si le nombre est premier et 0 dans le cas contraire. (**2p**) | ||
| <hidden> | <hidden> | ||
