優雅的 JavaScript：現代程式設計入門
一份全面的現代程式設計指南，使用 JavaScript。課程涵蓋基本程式設計原理、JavaScript 語言規範、瀏覽器整合以及使用 Node.js 的伺服器端開發，包含五個真實世界的專案應用。
課程總覽
📚 內容概要
一本關於使用 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 提供。
🎯 學習目標
- 定義什麼是程式，並解釋電腦語言中不同層次的抽象。
- 使用 JavaScript 的數字和算術運算子產生值。
- 宣告並更新變數，同時遵守命名慣例與保留字限制。
- 使用
do迴圈、for迴圈和switch陳述句實現穩健的控制流程，並透過縮排與註解維持乾淨的程式碼。 - 使用多種語法定義與呼叫函數，處理參數、可選引數與嵌套詞法作用域。
- 應用進階函數概念如遞迴、閉包與呼叫堆疊，解決複雜的演算法難題。
- 使用專用的物件與陣列方法來管理複雜的資料結構與字串。
- 實作高階函數（
filter、map、reduce）以抽象邏輯並組合資料轉換。 - 掌握原型鏈的導航與操作，建立結構化、可重用的物件實例與多型介面。
- 實作多型介面以處理複雜的資料視覺化（表格）。
課程
概述： 本課介紹使用 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 環境，建構非同步檔案伺服器與使用長輪詢與 RESTful 路由的即時網路應用。
學習成果：
- 實作進階繪圖工具（直線、擦除、噴塗、填滿）並管理畫布安全性（污漬化）。
- 使用 Node.js 執行伺服器端腳本，透過 NPM 管理相依性，並使用回呼與 Promise 處理非同步 I/O。
- 建構一個能進行檔案操作、處理 JSON 請求並透過長輪詢實作即時更新的功能性 HTTP 伺服器。