優雅的 JavaScript：現代程式設計入門

📚 內容概要

一本關於使用 JavaScript 進行現代程式設計的全面指南。課程涵蓋基本程式設計原理、JavaScript 語言規範、瀏覽器整合，以及使用 Node.js 進行伺服器端開發，包含五個真實世界的專案應用。

深入且優雅地探討 JavaScript 程式設計的核心。

作者： Marijn Haverbeke

致謝： 受到 454 名資金支持者支援；插圖由 Wasif Hyder、Max Xiantu、Margarita Martínez、José Menor、Jim Tierney、Dyle MacGregor、Jeff Avallone、Thomas Palef，以及 Antonio Perdomo Pastor 提供。

🎯 學習目標

1. 定義什麼是程式，並解釋電腦語言中不同層次的抽象。
2. 使用 JavaScript 的數字和算術運算子產生值。
3. 宣告並更新變數，同時遵守命名慣例與保留字限制。
4. 使用 do 迴圈、for 迴圈和 switch 陳述句實現穩健的控制流程，並透過縮排與註解維持乾淨的程式碼。
5. 使用多種語法定義與呼叫函數，處理參數、可選引數與嵌套詞法作用域。
6. 應用進階函數概念如遞迴、閉包與呼叫堆疊，解決複雜的演算法難題。
7. 使用專用的物件與陣列方法來管理複雜的資料結構與字串。
8. 實作高階函數（filter、map、reduce）以抽象邏輯並組合資料轉換。
9. 掌握原型鏈的導航與操作，建立結構化、可重用的物件實例與多型介面。
10. 實作多型介面以處理複雜的資料視覺化（表格）。

🔹 第一課：JavaScript 基礎與程式結構

概述： 本課介紹使用 JavaScript 的程式設計基礎概念，從程式的哲學定義過渡到實際的程式碼機制。學生將探索資料如何透過類型與位元表示，如何使用運算子操縱值，以及如何利用變數、表達式與陳述句來建構程式。課程也涵蓋 JavaScript 的獨特行為，例如自動類型轉換與短路求值。

學習成果：

• 定義什麼是程式，並解釋電腦語言中不同層次的抽象。
• 使用 JavaScript 的數字與算術運算子產生值。
• 宣告並更新變數，同時遵守命名慣例與保留字限制。

🔹 第二課：函數與複雜資料結構

概述： 本課探討結構化程式設計的基本元件，著重於進階控制流程、函數式程式設計技巧與複雜資料組織。學生將掌握如何將邏輯封裝在函數中，透過作用域與閉包管理變數可見性，並操縱可變物件以分析真實世界資料，例如統計相關性。

學習成果：

• 使用 do 迴圈、for 迴圈與 switch 陳述句實現穩健的控制流程，並透過縮排與註解保持程式碼清晰。
• 使用多種語法定義與呼叫函數，處理參數、可選引數與嵌套詞法作用域。
• 應用進階函數概念如遞迴、閉包與呼叫堆疊，解決複雜的演算法難題。

🔹 第三課：高階函數與原型

概述： 本課探討從基本資料操弄過渡到 JavaScript 中先進的函數式與物件導向模式。內容包括使用 Map 與全域物件進行高效資料儲存，高階函數如何抽象動作（過濾、轉換與總結），以及 JavaScript 物件系統的底層機制，包含原型、建構函數與多型。

學習成果：

• 使用專用的物件與陣列方法來管理複雜資料結構與字串。
• 實作高階函數（filter、map、reduce）以抽象邏輯並組合資料轉換。
• 掌握原型鏈的導航與操作，建立結構化、可重用的物件實例與多型介面。

🔹 第四課：物件導向與錯誤管理

概述： 本課探討 JavaScript 中進階的物件導向模式，重點在透過表格佈局介面實作多型，並設計一個模擬生態系（「電子生命」）。課程進一步轉入軟體可靠性議題，涵蓋「嚴格模式」、除錯技巧，以及結構化測試的重要性，以降低常見的程式設計錯誤。

學習成果：

• 實作多型介面以處理複雜的資料視覺化（表格）。
• 比較繼承與組合，以建立可擴展的物件結構。
• 管理高階函數與物件方法中的執行環境（this）。

🔹 第五課：模式比對與模組化

概述： 本課探討現代程式設計的雙重要求：處理複雜字串資料與將程式碼組織成可維護的結構。學生將學習使用正則表示式描述與操縱文字模式，接著探討模組化以隔離程式碼、管理命名空間並促進重用。

學習成果：

• 使用字面量與建構函數語法建立與測試正則表示式。
• 實作進階的模式比對技術，包括群組、回溯與非貪婪重複。
• 應用模組化設計原則，防止命名空間污染並解耦程式元件。

🔹 第六課：語言設計與網路環境

概述： 本課探討從結構化軟體設計過渡到自訂程式語言「Egg」的創造。課程進一步將這些概念連結至網路環境，詳細說明網路、HTML 與文件物件模型（DOM）如何共同構成瀏覽器的可程式化介面。學生將學習如何透過模組化管理程式複雜度，並使用 JavaScript 操控即時的網頁文件。

學習成果：

• 使用 define 函數實作穩健的模組系統，並管理複雜的相依性。
• 建構一個功能完整的解析器與評估器，針對領域特定語言，包含作用域與函數支援。
• 解釋網路架構，包括 TCP/IP、HTML 結構，以及瀏覽器沙盒的安全性影響。

🔹 第七課：事件與互動平台

概述： 本課探討文件物件模型（DOM）操控、CSS 樣式與複雜事件處理之間的協同作用，以創造互動式網頁體驗與遊戲。學生將學習如何控制版面與動畫，管理使用者輸入的異步性，透過時間技巧優化效能，並使用物件導向原則架構一個基於格子的平台遊戲。

學習成果：

• 操控 DOM 版面與樣式：使用 JavaScript 讀取元素尺寸、套用層疊樣式，並使用 CSS 定位與三角函數動畫化元素。
• 掌握事件協調：實作進階事件處理，包括傳播控制、阻止預設動作，以及管理特殊事件（鍵盤、滑鼠、捲軸與焦點）。
• 優化腳本執行：使用 Web Workers 進行背景處理，並運用防抖（debouncing）與節流（throttling）管理高頻率事件。

🔹 第八課：畫布繪圖與網路協定

概述： 本課探討從基於 DOM 的遊戲渲染過渡到高性能的 HTML5 畫布 API，同時介紹 2D 平台遊戲物理的基礎機制。學生將學習實作複雜遊戲邏輯，包括重力與碰撞偵測，並掌握指令式繪圖技術。此外，課程引入 HTTP 協定與 XMLHttpRequest 物件，以處理客戶端-伺服器通訊。

學習成果：

• 在遊戲環境中實作基於格子的碰撞偵測與重力驅動的運動。
• 使用 HTML5 畫布 API 渲染路徑、曲線、影像與動畫角色貼圖。
• 應用座標轉換（縮放、旋轉、翻轉）並使用 save 與 restore 管理上下文狀態。

🔹 第九課：進階表單與持久化應用

概述： 本課探討進階的網頁開發技術，聚焦於透過 XMLHttpRequest 與 Promise 進行非同步通訊、深入互動 HTML 表單欄位，以及客戶端資料持久化。學生將學習如何使用自訂標頭管理網路請求，並在非同步流程中處理錯誤，透過建構模組化的繪圖應用與持久化的筆記工具來實踐。

學習成果：

• 使用 XMLHttpRequest 與 Promise 鏈結配置並執行非同步網路請求。
• 操縱複雜的表單行為，包括焦點管理、欄位停用與檔案處理。
• 使用 localStorage 與 sessionStorage 在客戶端實作資料儲存，以維持應用程式狀態。

🔹 第十課：使用 Node.js 進行伺服器端開發

概述： 本課彌補進階客戶端互動與伺服器端邏輯之間的差距。學生將首先掌握複雜的畫布操控工具與瀏覽器安全限制，隨後轉入 Node.js 環境，建構非同步檔案伺服器與使用長輪詢與 RESTful 路由的即時網路應用。

學習成果：

• 實作進階繪圖工具（直線、擦除、噴塗、填滿）並管理畫布安全性（污漬化）。
• 使用 Node.js 執行伺服器端腳本，透過 NPM 管理相依性，並使用回呼與 Promise 處理非同步 I/O。
• 建構一個能進行檔案操作、處理 JSON 請求並透過長輪詢實作即時更新的功能性 HTTP 伺服器。