WebAssembly - "你好，世界"

Hello, 有志於编程的朋友们！今天，我們將踏上一段令人興奮的旅程，探索WebAssembly的世界。別擔心如果你從未寫過一行代碼——我們會從最基礎的知識開始，逐步進行。在這個教學的結尾，你將創建自己的第一個WebAssembly程序，顯示經典的"你好，世界"訊息。那麼，我們來開始吧！

什麼是WebAssembly？

在我們開始編程之前，讓我們先了解什麼是WebAssembly。WebAssembly，通常縮寫為Wasm，是一種面向棧的虛擬機的二元指導格式。它被設計為高級語言如C、C++和Rust的編譯目標，以實現在網絡上的客戶端和服務器應用的部署。

可以把WebAssembly看作是在網頁瀏覽器中運行高性能代碼的一種方式。它就像是給你的網頁應用程序賦予了超能力！

配置我們的開發環境

要開始使用WebAssembly，我們需要配置我們的開發環境。在本教程中，我們將使用一個簡單的線上工具，叫做WasmFiddle（https://wasmldedle.net/）。它讓我們能夠在瀏覽器中直接編寫、編譯和運行WebAssembly代碼。

我們的第一個WebAssembly程序

步驟1：編寫C代碼

讓我們從編寫一個簡單的C程序開始，該程序打印"你好，世界"。別擔心如果你不熟悉C語言——我會解釋每一行代碼。

#include <stdio.h>

int main() {
printf("你好，世界!\n");
return 0;
}

讓我們分解一下：

1. #include <stdio.h>：這行告訴編譯器包含標準輸入/輸出庫，其中包含我們將要使用的printf函數。
2. int main()：這是我們程序的入口點，我們的程序從這裡開始執行。
3. printf("你好，世界!\n");：這行將"你好，世界!"打印到控制台。結尾的\n添加了一個新行。
4. return 0;：這表示我們的程序已經成功完成。

步驟2：編譯為WebAssembly

現在，讓我們將這段C代碼編譯為WebAssembly。在WasmFiddle中，你可以簡單地將C代碼粘貼到左側面板，然後點擊"Build"。WebAssembly代碼將會出現在中间面板。

步驟3：運行WebAssembly

為了運行我們的WebAssembly代碼，WasmFiddle在右側提供了一個JavaScript面板。以下是運行我們WebAssembly的代碼：

Module.onRuntimeInitialized = function() {
Module._main();
};

這段代碼告訴瀏覽器，一旦WebAssembly模塊初始化，就運行我們的main函數。

輸出

當你在WasmFiddle中點擊"Run"時，你應該會在頁面底部控制台輸出中看到"你好，世界!"。恭喜你！你剛剛運行了自己的第一個WebAssembly程序！

理解剛才發生了什麼

讓我們花一會兒時間理解剛才發生了什麼：

1. 我們編寫了一個簡單的C程序。
2. C程序被編譯成了WebAssembly，這是一種可以在網頁瀏覽器中運行的低級語言。
3. 我們使用JavaScript來加載和運行我們的WebAssembly代碼。
4. WebAssembly代碼執行了我們的printf函數，在控制台中顯示了"你好，世界!"。

這就像是我們教會了瀏覽器一門新語言，然後用這門語言向世界問好！

為什麼使用WebAssembly？

你可能會想，"為什麼要這麼麻煩，我們可以直接使用JavaScript呢？"這個問題問得好！WebAssembly有幾個優勢：

1. 性能：WebAssembly可以以接近本地速度運行，對於計算密集型任務來說，它比JavaScript快得多。
2. 語言選擇：你可以使用C、C++或Rust等語言編寫代碼，這些語言可能對某些任務更合適，或者對某些開發者來說更熟悉。
3. 安全性：WebAssembly在沙盒環境中運行，提供了額外的安全層次。

結論

恭喜你編寫並運行了自己的第一個WebAssembly程序！我們只不過是 touched the surface of what's possible with WebAssembly，但我希望這個教學能夠激發你對這項強大技術的興趣。

記住，每個專家都曾經是初學者。持續練習，保持好奇心，並不要害怕嘗試。誰知道呢？下一個革命性的網頁應用程序可能就是用你現在正在學習的WebAssembly技能開發的！

在我們的下一課中，我們將探索更複雜的WebAssembly示例，並學習如何將WebAssembly與HTML和CSS整合，以創建有互動性的網頁。在那之前，祝你編程愉快！

方法	描述
#include <stdio.h>	包含標準輸入/輸出庫
int main()	定義程序的主要函數，程序從這裡開始執行
printf()	將格式化的輸出打印到控制台
return 0;	表示程序成功完成
Module.onRuntimeInitialized	當WebAssembly模塊準備好時運行代碼的JavaScript方法
Module._main()	調用WebAssembly模塊中的main函數

Credits: Image by storyset