Show page

Differences

This shows you the differences between two versions of the page.

--- alf:laboratoare:11 [2020/04/27 21:59]
alexandru.radovici removed
+++ alf:laboratoare:11 [2021/05/25 00:37] (current)
diana.ghindaoanu
@@ Line 5: / Line 5: @@
 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]].
-Pour plus d'informations, la documentation de Web Assembly est disponible ici: [[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 =====
-Pour tester les exemples présentés dans ce TP, on va utiliser la page destiné a Web Assembly : [[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 peut etre utilisé en Javascript de la maniere suivante:
+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]]
-<code javascript>
+Si vous choisissez de créer votre propre projet, tout d'abour vous devez suivre ces étapes:
-const wasmInstance =
-      new WebAssembly.Instance(wasmModule, {
-         io:{
-           print: console.log
-         }
-      });
-</code>
-Un exemple 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
+Dans le fichier ''main.wat'', vous allez trouver le code suivant :
-    )
+{{ :alf:laboratoare:tp12-3.jpg?500&nolink }}
-  (start $start)
- )
+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''
-</code>
-Le programme ci-dessus va afficher sur l'écran la valeur ''120''.
+<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**.
 ===== Translation de code en Web Assembly ====
@@ Line 64: / Line 62: @@
 (module
   (func $sum (param $a i32) (param $b i32) (result i32)
-    get_local $a
+    local.get $a
-    get_local $b
+    local.get $b
     i32.add
     return
@@ Line 87: / Line 85: @@
   (func $name (local $a i32) (result i32)
     i32.const 0;
-    set_local $a
+    local.set $a
-    get_local $a
+    local.get $a
     return
     )
@@ Line 98: / Line 96: @@
 <code wat>
 (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>
@@ Line 120: / Line 138: @@
 <code wat>
 ;; import the print function
-get_local $a
+local.get $a
-get_local $b
+local.get $b
 i32.gt
 if
-   get_local $a
+   local.get $a
    call $print
 else
-   get_local $b
+   local.get $b
    call $print
 end
@@ Line 149: / Line 167: @@
 block $endwhile
   loop $while
-    get_local $a
+    local.get $a
     i32.const 120
     i32.gt
     br_if $endwhile
-    get_local $a
+    local.get $a
     call $print
-    get_local $a
+    local.get $a
     i32.const 1
     i32.add
-    set_local $a
+    local.set $a
     br $while
   end $while
@@ Line 176: / Line 194: @@
 ;; import the print function
 i32.const 1
-set_local $i
+local.set $i
 block $endfor
   loop $for
-    get_local $i
+    local.get $i
     i32.const 120
     i32.gt
     br_if $endfor
-    get_local $i
+    local.get $i
     call $print
-    get_local $i
+    local.get $i
     i32.const 1
     i32.add
-    set_local $i
+    local.set $i
     br $for
   end $for
@@ Line 208: / Line 226: @@
 ;; import the print function
 i32.const 1
-set_local $a
+local.set $a
 loop $dowhile
-  get_local $a
+  local.get $a
   call $print
-  get_local $a
+  local.get $a
   i32.const 1
   i32.add
-  set_local $a
+  local.set $a
-  get_local $a
+  local.get $a
   i32.const 120
   i32.le
@@ Line 224: / Line 242: @@
 ==== Exercises ====
-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://cdn.rawgit.com/WebAssembly/wabt/aae5a4b7/demo/wat2wasm/|wat2wasm]].
+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]].
-  - Ecrivez dans un fichier **ex1.txt** le code WebAssembly pour le calcul de l'expression 3*(5+6)/7-5.(**2p**)
-  - Ecrivez un programme qui a une fonction de démarrage //start// et affiche sur l'écran le mois actuel (numéro). (**1p**)
+<note info>Veuillez utiliser Firefox ou Chrome.</note>
-  - Ecrivez un programme qui initialise 3 variables locales avec les valeurs 5, 6 et 3 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 le rapport entre 2 numéros donnés comme parametres. Appelez la fonction de division dans la fonction //start//. (**1p**)
+<note important>
-  - Ecrivez une fonction qui vérifie si un numéro est divisible par 3. La fonction va afficher sur l'écran le reste de la division ''x/3''. Dans la fonction //start//, appelez la fonction //is_divisible// avec le parametre 6. (**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''.
-  - Ecrivez une fonction qui affiche sur l'ecran le carré de chaque nombre de l'intervalle [10, 20]. (**1p**)
+</note>
-  - Ecrivez une fonction //sq_sum// qui calcule la somme des racines carrées des nombres 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 1 et 4. (**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. (**1p**)
+  - 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>

Cours

TP

Simplifiee

Seminaires

Devoir

Ressources

alf/laboratoare/11.1588013979.txt.gz · Last modified: 2020/04/27 21:59 by alexandru.radovici

Show page Old revisions

Media Manager Back to top