JavaScript - 概覽

JavaScript 是什麼？

嘿，未來的編程超級巨星！? 我們一起來探索 JavaScript 的奇幻世界。想像你正在蓋房子 - HTML 是結構，CSS 是油漆和裝飾，那麼 JavaScript 呢？嗯，它就是讓你的房子變得有生命的魔法！

JavaScript - Overview

JavaScript 是一種高級的、解譯型編程語言，為網頁帶來互動性和動態效果。它就像戲劇中的導演，指揮著網頁舞台上所有的行為和反應。

我們來看一個簡單的例子：

alert("歡迎來到 JavaScript！");

當你運行這段代碼時，它會顯示一個彈出框，上面寫著 "歡迎來到 JavaScript！" 。與用戶開始互動竟如此簡單！

JavaScript 的歷史

大家來這裡，孩子們，故事時間到！?

JavaScript 於 1995 年誕生，由 Brendan Eich 在 Netscape 創造，只花了 10 天時間（這可真是個匆忙的「分娩」啊！）。它最初被命名為 "Mocha"，然後迅速改名為 "LiveScript"，最終定名為 "JavaScript"，以借 Java 的熱度。不過，JavaScript 與 Java 的關係，大概就像車與地毯一樣！

這裡有一個有趣的 facts：JavaScript 的第一個版本和我們現在使用的版本看起來大不相同。例如，函數的聲明方式如下：

function square(x) { return x * x }

但现在我們也可以使用箭頭函數：

const square = (x) => x * x;

兩者做的都是同一件事，但新版本更簡潔。進步了，不是嗎？

客戶端 JavaScript

客戶端 JavaScript 就像你瀏覽器的個人助手。它在用戶的電腦上運行，可以在不斷與伺服器通信的情況下，使網頁具有互動性。

我們來看一個客戶端 JavaScript 的簡單示例：

<button id="myButton">點我！</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("按鈕被點擊！");
});
</script>

在這段代碼中，我們告訴瀏覽器："嘿，當有人點擊這個按鈕時，給他們顯示一個提示。" 這一切都直接在用戶的瀏覽器中發生 - 沒有需要回傳伺服器！

伺服器端 JavaScript

現在，讓我們來談談伺服器端 JavaScript。這就像 JavaScript 在餐廳的廚房裡工作，為顧客（客戶）準備數據之前的工作。

Node.js 是運行伺服器端 JavaScript 最流行的平台。以下是一個 Node.js 伺服器的簡單例子：

const http = require('http');

const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!');
});

server.listen(8080, () => {
console.log('伺服器正在 8080 埠上運行');
});

這段代碼創建了一個伺服器，當訪問時會回應 "Hello World!"。這是 JavaScript，但它在伺服器上運行，而不是在瀏覽器中！

JavaScript 的優勢

JavaScript 就像瑞士軍刀一樣的編程語言。以下為何：

易於學習：它對初學者非常友好，就像那位讓學習變得有趣的酷炫老師。
多用途：它可以在瀏覽器、伺服器甚至機器人上運行！
豐富的介面：它可以創建有動態、互動的網頁。
減少伺服器負擔：它可以處理許多客戶端的任務。
豐富的生態系統：有許多庫和框架可供選擇。

以下是一個快速示例，展示 JavaScript 如何使網頁具有互動性：

let count = 0;
function incrementCounter() {
count++;
document.getElementById("counter").innerHTML = count;
}

這個函數增加計數器並更新頁面上的顯示，而且不需要重新加載！

JavaScript 的局限性

但讓我們實話實說 - 沒有東西是完美的，即使是 JavaScript。以下是一些局限性：

客戶端安全性：JavaScript 代碼對用戶可見，因此不能信任其安全性。
瀏覽器支援：不同的瀏覽器可能會以不同的方式解釋 JavaScript。
單繼承：與某些語言不同，JavaScript 只支持單一繼承。

以下是一個示例，展示瀏覽器差異可能導致的問題：

// 這在大多數現代瀏覽器中都能工作
const myArray = [1, 2, 3];
console.log(myArray.includes(2)); // true

// 但舊版瀏覽器可能不支持 'includes'
// 因此你可能需要這樣做：
console.log(myArray.indexOf(2) !== -1); // true

命令式與聲明式 JavaScript

現在，讓我們來谈谈兩種不同的 JavaScript 寫作風格：命令式和聲明式。

命令式 JavaScript 就像一步一步地指導如何烤蛋糕。而聲明式 JavaScript 則更像是描述蛋糕應該是什麼樣的，然後讓別人去弄清楚步驟。

以下是一個命令式的例子：

const numbers = [1, 2, 3, 4, 5];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
console.log(doubled); // [2, 4, 6, 8, 10]

以下是用聲明式方式做到同樣事情的例子：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

兩者都達到了同樣的結果，但聲明式版本更簡潔，一旦你熟悉了語法，通常也更容易閱讀。

JavaScript 開發工具

要編寫 JavaScript，你不需要太多東西 - 只需一個文本編輯器和一個瀏覽器就可以了！但有某些工具可以讓你的生活更輕鬆：

集成開發環境（IDEs）：如 Visual Studio Code 或 WebStorm。
版本控制系統：Git 是最流行的。
包管理器：npm（Node 包管理器）被廣泛使用。
任務運行器：如 Gulp 或 Webpack，自動化重复性任务。

以下是一個總結 JavaScript 開發工具的表格：

工具類型	示例
IDEs	Visual Studio Code, WebStorm, Atom
版本控制	Git, Mercurial
包管理器	npm, Yarn
任務運行器	Gulp, Webpack, Grunt

JavaScript 今天在哪裡？

自從 JavaScript 的謙遜開始以來，它已經走了很長一段路。今天，它無處不在！

網頁開發：仍然是它的主要領域。
移動應用開發：像 React Native 這樣的框架使用 JavaScript。
桌面應用程序：Electron 使得用 JavaScript 建立桌面應用程序成為可能。
伺服器端開發：Node.js 使得這成為可能。
物联网（IoT）：是的，JavaScript 可以控制你的智能冰箱！

以下是一個如何使用 JavaScript 在 IoT 中與 Raspberry Pi 一起工作的簡單示例：

const Gpio = require('onoff').Gpio;
const led = new Gpio(17, 'out');

setInterval(() => {
led.writeSync(led.readSync() ^ 1);
}, 1000);

這段代碼會讓連接到 Raspberry Pi 的 LED 燈每秒閃爍一次。JavaScript 控制實物 - 有多酷？

好了，各位，這就是 JavaScript 的風馴之旅。記住，最好的學習方式就是實踐，所以打開你的文本編輯器，開始編程吧。祝你在 JavaScript 世界裡玩得開心！?

Credits: Image by storyset