上門編程教學課程內容
課程簡介
本課程專為希望快速掌握 WebAssembly（Wasm） 核心概念與開發實務的學員設計，三小時內帶領學員從底層原理到實際應用，全面認識這項改變 Web 開發生態的新興技術。
WebAssembly 是由 W3C 提出的 高效能二進位運算格式，可與 JavaScript 平行執行，讓 Web 與伺服器具備接近原生程式的效能。它能讓開發者使用 C、C++、Rust、Go、AssemblyScript 等語言 編譯後於瀏覽器或 Node.js 中執行，實現跨平台、高效能的應用。
課程以「理論理解×實作操作」為主軸，涵蓋 Wasm 架構、環境建置、程式編譯部署與前端整合，協助學員在短時間內能編譯、執行與應用 WebAssembly 模組。
適合對象：
學習成果：
-
理解 WebAssembly 的運作架構、記憶體模型與與 JavaScript 互通機制
-
掌握 Wasm 模組的編譯、匯入與執行方法
-
能使用 Emscripten 或 Rust 工具鏈建立 WebAssembly 專案
-
實作基本模組串接（Web UI / Node.js 應用 / 瀏覽器 API 整合）
-
為進一步開發高效 Web App 或跨語言運算奠定基礎
課程時長
3 小時（180 分鐘）
理論講解與實作操作比例：約 3 : 7
課程大綱
第一部份：WebAssembly 技術概論與應用前景（30 分鐘）
-
WebAssembly 的誕生與標準化背景
-
為何 Wasm 能提升 Web 效能（Binary Format、Stack Machine 架構）
-
與 JavaScript 的協同作業：互補而非取代
-
主流開發途徑介紹：Emscripten、Rust、AssemblyScript、TinyGo
-
實作示例：瀏覽器中運行簡易 Wasm 範例（Hello, WebAssembly）
第二部份：開發環境建置與程式編譯流程（40 分鐘）
-
安裝必要工具鏈：
-
C/C++ → Emscripten
-
Rust → wasm-pack
-
原始程式碼與編譯命令解析（emcc、wasm-pack build）
-
生成對應檔案：.wasm、.js glue code
-
WebAssembly 模組匯入與執行流程（WebAssembly.instantiate）
-
實作練習：將 C 函數編譯為 Wasm 並於瀏覽器中呼叫
第三部份：記憶體模型與函數互操作（40 分鐘）
-
WebAssembly 記憶體空間（Linear Memory）
-
模組導入與導出（Import / Export Functions）
-
與 JavaScript 資料交互（參數傳遞與回傳值轉換）
-
WebAssembly Text Format（.wat）語法認識
-
實作範例：建立基本數學函數模組並於 JS 中使用
第四部份：實務應用開發與視覺化整合（40 分鐘）
-
使用 Emscripten 建立完整 Web 專案（HTML + Wasm + JS + CSS）
-
File System 模擬與多文件操作
-
繪圖應用：以 Wasm 控制 Canvas 或 WebGL 元件
-
效能比較：原生 JS vs C++ via Wasm
-
實作：製作互動式計算或圖像處理小應用
第五部份：延伸應用與前瞻技術概覽（30 分鐘）
-
WebAssembly System Interface (WASI) 介紹
-
在 Node.js、Edge Computing、伺服器端的使用案例
-
模組封裝與部署策略（NPM + Wasm 模組管理）
-
安全性與沙盒隔離機制
-
進階學習方向：Rust + WebAssembly + React / Vue 整合開發
