優雅的 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)以抽象邏輯並組合資料轉換。 - 掌握原型鏈的導航與操作,建立結構化、可重用的物件實例與多型介面。
- 實作多型介面以處理複雜的資料視覺化(表格)。
課程 共 10 课时 · 预计 30.0h
課程
Lesson
This lesson introduces the concept of programming as the art of subduing complexity by creating immaterial logic that directs physical hardware. Students will learn the fundamental structure of JavaScript, including the roles of variables, control flow, and the distinction between statements and expressions.
This lesson explores advanced control flow in JavaScript, focusing on sophisticated iteration patterns like for loops, do-while loops, and multi-way branching with switch statements. Students will learn to manage program execution precisely using break and continue keywords, modular arithmetic, and nested loops to solve complex algorithmic challenges.
This lesson explores the concept of abstraction in programming, focusing on how to transition from imperative, hardware-level logic to declarative, human-readable code. Students will learn to implement and refine flexible functions, such as range and sum, while analyzing the performance trade-offs associated with the abstraction tax.
This lesson explores interface-based polymorphism by defining a standardized Table Interface that allows layout engines to process diverse data types through a consistent set of methods. Students will learn to implement flexible, decoupled systems by using defensive programming techniques and interface contracts to manage object rendering and alignment.
This lesson introduces Regular Expressions (RegExp) in JavaScript, covering how to define patterns using literal notation or constructors and how to use the .test() method for validation. Students will learn to manage case sensitivity, handle special characters through escaping, and apply these techniques to dynamic string matching tasks.
This lesson explores the evolution of JavaScript module systems, focusing on how to prevent namespace pollution through techniques like Immediately Invoked Function Expressions (IIFEs) and closures. Students will learn to design robust, encapsulated code by creating private scopes and structured public interfaces for their modules.
AI020: Events and Interactive Platforms (Lesson 7) explores the technical foundations of building dynamic web experiences through DOM manipulation, regular expressions, and event handling. Students will learn to transform static content into interactive environments by implementing efficient workflows for real-time feedback and user input tracking.
This lesson explores the performance advantages of the HTML5 Canvas API over SVG for high-density graphics by utilizing a 2D rendering context to bypass DOM overhead. Students will also examine the role of the transport layer in web applications, specifically analyzing the performance trade-offs between TCP and UDP for data transmission.
This lesson explores the necessity of asynchronous programming in web development to prevent UI freezing caused by synchronous I/O operations. Students will learn to implement event-driven patterns and browser persistence APIs to maintain responsive, high-performance applications during network-intensive tasks.
This lesson explores advanced Canvas API techniques for building interactive drawing tools, focusing on state management, composite operations, and mathematical constraints. Students will learn to implement dynamic features like spray brushes and erasers by manipulating canvas context properties and handling mouse events through higher-order patterns.