線上課程
從基礎到進階，系統性學習程式開發與 AI 技術
免費課程
JavaScript 2026 完整教學課程
從零開始，掌握 2026 年必備的 JavaScript 現代語法、非同步、DOM 操作與完整工具鏈。
JavaScript 程式語言網頁設計入門
從零開始學習 JavaScript，網頁設計入門課程。包含 60 堂詳細教學。
React 基礎入門
從零開始學習 React，打造你的第一個應用
開始上課
Lesson: 開始上課
1-3 Chrome Network 認識網路面版工具
Lesson: 1-3 Chrome Network 認識網路面版工具
2-1~2-2 Dom 是什麼？動態新增頁面內容 createElement setAttribute hasAttribute
Lesson: 2-1~2-2 Dom 是什麼？動態新增頁面內容 createElement setAttribute hasAttribute
2-3 getElementById, codepen full 的 console 方法
Lesson: 2-3 getElementById, codepen full 的 console 方法
3-1 var、let、const 的用法與差異
Lesson: 3-1 var、let、const 的用法與差異
1-2 Console 指令是什麼？
Lesson: 1-2 Console 指令是什麼？
3-2~3-3 變數識別字規則 var let 的差異
Lesson: 3-2~3-3 變數識別字規則 var let 的差異
4-1 Number、Boolean 和 String 基本類型
Lesson: 4-1 Number、Boolean 和 String 基本類型
4-2 parseInt、parseFloat 轉換為 Number
Lesson: 4-2 parseInt、parseFloat 轉換為 Number
4-3 toString 轉換為 String 字串連接
Lesson: 4-3 toString 轉換為 String 字串連接
5-1 算術運算子
Lesson: 5-1 算術運算子
5-2 比較運算子 關係運算子 Comparison, Relation operators
Lesson: 5-2 比較運算子 關係運算子 Comparison, Relation operators
6-1 字串的標示方式
Lesson: 6-1 字串的標示方式
6-2 字串的跳脫表示法
Lesson: 6-2 字串的跳脫表示法
5-3 邏輯運算子 位元運算子
Lesson: 5-3 邏輯運算子 位元運算子
6-3 字串的常用方法 length indexOf slice substr replace
Lesson: 6-3 字串的常用方法 length indexOf slice substr replace
7-2 querySelector 與 CSS 選擇器
Lesson: 7-2 querySelector 與 CSS 選擇器
197-3 querySelectorAll getElement的比較
Lesson: 197-3 querySelectorAll getElement的比較
8-2 Lab02 如何用 JS 寫一個九九乘法表| 間隔如何用 tab 實作 | 如何 console.log 不換行 |
Lesson: 8-2 Lab02 如何用 JS 寫一個九九乘法表| 間隔如何用 tab 實作 | 如何 console.log 不換行 |
7-1 getElement Id Tagname ClassName
Lesson: 7-1 getElement Id Tagname ClassName
8-1 If…Else, Switch 條件陳述式與 Block 區塊概念
Lesson: 8-1 If…Else, Switch 條件陳述式與 Block 區塊概念
8-2 迴圈 For, do... while, while 陳述式是什麼？
Lesson: 8-2 迴圈 For, do... while, while 陳述式是什麼？
8-3 Label | Break | Continue 陳述式與迴圈控制
Lesson: 8-3 Label | Break | Continue 陳述式與迴圈控制
9-1 Object 類型的特點，OOP 物件導向
Lesson: 9-1 Object 類型的特點，OOP 物件導向
9-2 Object 物件表達式、取用方法、使用實例
Lesson: 9-2 Object 物件表達式、取用方法、使用實例
9-3 如何使用 For/in 迴圈與 For/of 的差別
Lesson: 9-3 如何使用 For/in 迴圈與 For/of 的差別
9-3 補充 Alert, prompt, confirm
Lesson: 9-3 補充 Alert, prompt, confirm
10-1 Array 陣列特點 變數儲存資料
Lesson: 10-1 Array 陣列特點 變數儲存資料
10-2 Array Length, [index], For 迴圈掃描
Lesson: 10-2 Array Length, [index], For 迴圈掃描
10-3 Array 的方法 indexOf, push, pop, shift, splice, join, slice
Lesson: 10-3 Array 的方法 indexOf, push, pop, shift, splice, join, slice
10-3 Lab03 02 撲克牌發牌-長度修正-發牌順序選人亂序
Lesson: 10-3 Lab03 02 撲克牌發牌-長度修正-發牌順序選人亂序
10-3 Lab03 03 撲克牌發牌-隨意發牌-直到發完
Lesson: 10-3 Lab03 03 撲克牌發牌-隨意發牌-直到發完
10-3 Lab03 撲克牌發牌-發牌順序選人亂序
Lesson: 10-3 Lab03 撲克牌發牌-發牌順序選人亂序
11-2 Object, Array 淺複製與深複製
Lesson: 11-2 Object, Array 淺複製與深複製
11-3 JSON.parse() JSON.stringify()
Lesson: 11-3 JSON.parse() JSON.stringify()
12-1 Function 函式，函式宣告，呼叫函式 call function
Lesson: 12-1 Function 函式，函式宣告，呼叫函式 call function
12-2 匿名函式 Anonymous 表達式 Expressions 陳述式 Statements, Function Expressions
Lesson: 12-2 匿名函式 Anonymous 表達式 Expressions 陳述式 Statements, Function Expressions
12-3 箭頭函式 Arrow function ES6, rest parameter
Lesson: 12-3 箭頭函式 Arrow function ES6, rest parameter
13-1 什麼是變數領域 Scope ? 靜態 vs 動態作用域 全域區域變數
Lesson: 13-1 什麼是變數領域 Scope ? 靜態 vs 動態作用域 全域區域變數
13-2 區域變數 Function Scope, Block Scope 的差異 | 區域全域變數的差異
Lesson: 13-2 區域變數 Function Scope, Block Scope 的差異 | 區域全域變數的差異
13-3 Closure 閉包
Lesson: 13-3 Closure 閉包
11-1 JSON 是什麼？為什麼比 XML 好？
Lesson: 11-1 JSON 是什麼？為什麼比 XML 好？
14-1 Date 時間
Lesson: 14-1 Date 時間
14-3 setInterval 的用法 clearInterval
Lesson: 14-3 setInterval 的用法 clearInterval
14-2 setTimeout, clearTimeout 延時執行程式
Lesson: 14-2 setTimeout, clearTimeout 延時執行程式
15-1 Math in JS 數學物件, random 亂數與 floor 無條件捨去
Lesson: 15-1 Math in JS 數學物件, random 亂數與 floor 無條件捨去
9-3 補充2 按下按鈕到 Yahoo 奇摩 - VS Code Go to URL
Lesson: 9-3 補充2 按下按鈕到 Yahoo 奇摩 - VS Code Go to URL
15-3 環狀排列物件 建立佇列 Cirular Queue
Lesson: 15-3 環狀排列物件 建立佇列 Cirular Queue
15-2 三角函數: 使用 Math 來處理 sin, cos, tan 與 Pi
Lesson: 15-2 三角函數: 使用 Math 來處理 sin, cos, tan 與 Pi
16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
Lesson: 16-2 Window 子物件 - 環境物件 - location, screen, history, 全域
16-1 Window 物件 - alert, confirm, prompt, open, close
Lesson: 16-1 Window 物件 - alert, confirm, prompt, open, close
16-3 Document 常用的方法
Lesson: 16-3 Document 常用的方法
17-1 Event: onclick(), Event flow
Lesson: 17-1 Event: onclick(), Event flow
17-2 addEventListener
Lesson: 17-2 addEventListener
18-1 Ajax 介紹與運作流程
Lesson: 18-1 Ajax 介紹與運作流程
17-2 範例 addEventListener: Bubbling, Capturing
Lesson: 17-2 範例 addEventListener: Bubbling, Capturing
18-2 Ajax Demo 範例程式: XMLHttpRequest
Lesson: 18-2 Ajax Demo 範例程式: XMLHttpRequest
18-2 Ajax : XMLHttpRequest and Response
Lesson: 18-2 Ajax : XMLHttpRequest and Response
18-3 Ajax Fetch Demo 範例程式: .then .catch
Lesson: 18-3 Ajax Fetch Demo 範例程式: .then .catch
18-3 Ajax : Fetch 的屬性與方法
Lesson: 18-3 Ajax : Fetch 的屬性與方法
01-1 2026 的 JavaScript 版圖：引擎大戰
探索 2026 年的 JavaScript 生態系，了解 Node.js、Deno 與 Bun 的瀏覽器大戰，並選擇最適合你的學習路徑。
02-1 變數革命：為什麼 var 已死？
為什麼 2026 年絕對不該再用 var？一次搞懂 let 與 const 的正確使用時機，以及「預設 const」的現代開發準則。
02-2 現代型別系統：BigInt, Symbol 與字串模板
深入了解 2026 JavaScript 的七大原始型別，分辨 null 與 undefined 的差異，並掌握字串模板 (Template Literals)。
Chapter 2: Variables and the Modern Type System
Learn how to manage data in 2026 using let, const, and the modern type system including BigInt and Symbols.
03-1 運算子大補帖：從基礎到現代語法
掌握 JavaScript 2026 運算子：算術、比較、邏輯，以及現代必備的 Nullish Coalescing (??) 與 Optional Chaining (?.)。
03-2 邏輯運算與真假值 (Truthy & Falsy)
學會像電腦一樣思考：Boolean 邏輯、Truthy/Falsy 值，以及如何利用「短路求值」寫出更簡潔的條件判斷。
Chapter 3: Operators and Expressions
Mastering mathematical, logical, and specialized modern operators in JavaScript.
04-1 邏輯控制：if, else 與現代迴圈
掌握現代 JavaScript 的邏輯控制。從傳統的 if/else 到 2026 年推薦的聲明式迴圈處理。
04-2 優雅的崩潰：Error Handling 與 Try/Catch
學會處理意外。使用 try/catch 抓取錯誤，並理解 2026 年現代 Web 開發中的錯誤處理最佳實務。
Chapter 4: Control Flow and Error Handling
Controlling the flow of your application with conditional logic and modern error handling.
05-1 函數革命：箭頭函數與作用域
解析 2026 年的主流函數語法。理解箭頭函數與普通函數的差異，並搞懂讓無數開發者頭痛的「作用域 (Scope)」。
05-2 記憶魔法：閉包 (Closures) 與柯里化
揭開 JavaScript 最強大的魔法：閉包。學習如何利用閉包建立私有數據，以及柯里化 (Currying) 在現代開發中的應用。
Chapter 5: Mastering Functions in 2026
Deep dive into functions, scope, and the modern syntax that defines 2026 JavaScript.
01-2 打造專業級開發環境：VS Code 與 Bun
手把手教學：安裝 VS Code、設定開發生產力 Extensions，並安裝 Bun 環境運行你的第一行程式。
06-1 資料的容器：物件與 JSON
理解 JavaScript 中最核心的資料結構：物件。從基礎字面量到現代解構與展開運算。
06-2 繼承之謎：原型與 this 指向
深入探討 JavaScript 的物件繼承機制。理解原型、原型鏈，以及讓無數開發者困惑的 this 關鍵字。
Chapter 6: Advanced Objects and Prototypes
Understanding objects, prototypes, and how JavaScript handles complex data structures.
07-1 集合的藝術：陣列基礎與遍歷
掌握 JavaScript 中最常用的有序集合。學習基礎操作、遍歷技巧，以及 2026 年必備的陣列方法。
07-2 資料流動：Map、Filter 與不可變之美
學習函數式陣列處理。掌握 Map, Filter, Reduce 三劍客，並理解為何「不可變性 (Immutability)」是現代框架的靈魂。
Chapter 7: Modern Arrays and Immutable Methods
Learn modern array manipulation using functional methods and the latest immutable array features.
08-1 文字的魔力：字串與模板字面量
掌握 JavaScript 中的文字處理。學習模板字面量、標籤函數，以及 2026 年現代字串處理技巧。
08-2 文字捕手：正規表達式基礎
學習如何解析文字的模式。掌握正規表達式的基礎語法、Capture Groups，並學會在實戰中驗證表單。
Chapter 8: Strings, Regex, and Intl
Advanced string manipulation, Regular Expressions, and the Intl API for globalized applications.
09-2 程式的暫停鍵：產生器 (Generators)
學習控制代碼的「暫停」與「恢復」。掌握產生器函數 (*), yield 關鍵字，以及如何處理無限序列。
09-1 遍歷之理：反覆運算子 (Iterators)
探索 JavaScript 的迭代協議。理解 Symbol.iterator 如何讓物件變得可以被迴圈，並學習內建的 Iterable 物件。
Chapter 9: Iterators, Generators, and Modern Loops
Efficiently looping over data and using Generators for complex state management.
10-1 正視承諾：Promise 與網路請求
擺脫回調地獄。深入理解 Promise 的三種狀態、鏈式調用，以及如何使用 Fetch API 進行現代網路請求。
10-2 語法糖的極致：Async 與 Await
異步編程的最終解決方案。學習如何編寫可讀性最高的 Async 函數，並掌握異步環境下的錯誤捕捉技巧。
Chapter 10: Asynchronous JS: Promises and Async/Await
Master the asynchronous nature of JavaScript using Promises, Async/Await, and modern resolution patterns.
11-1 網頁的操作者：DOM 選擇器與操作
學習如何直接控制網頁內容。掌握現代 DOM 選擇器、屬性操作，以及動態建立元素的技術。
11-2 效能之辯：Real DOM 與 Virtual DOM
深入理解 DOM 的效能瓶頸。探討什麼是 Virtual DOM，以及現代框架如何透過 Diff 算法減少瀏覽器的重繪負擔。
Chapter 11: The Modern DOM and Event Delegation
Interact with the web page directly using modern DOM APIs and event handling.
12-1 代碼的拼圖：Modules 與 ESM 規範
學習如何組織大型代碼庫。理解 ES Modules (ESM) 的匯入與匯出，並解析它與 CommonJS 的歷史淵源。
12-2 極速工作流：Bun 與 Vite 的開發實踐
掌握當代最強建置組合。深入學習 Bun 的執行效率與 Vite 的開發體驗，並理解為何現代開發不再需要 Webpack。
Chapter 12: Modules, ESM, and Build Tools
Organizing code with ES Modules, understanding Import Maps, and using modern build tools like Vite and Biome.
13-1 結構化思維：類別 (Class) 基礎
學習 JavaScript 現代物件導向基礎。掌握 Class 語法、構造函數 (Constructor)，以及如何實例化對象。
13-2 能力繼承：Extends 與 Super
學習物件導向的核心：繼承。掌握 extends 關鍵字、super 調用，以及如何重寫 (Override) 父類別的方法。
Chapter 13: Classes and Modern OOP
Mastering classes, private fields, static blocks, and the modern way to write Object-Oriented JavaScript.
14-2 實時通訊：WebSockets 入門
建立動態實時應用。學習 WebSocket 協議、建立長連線，以及如何實作雙向通訊機制（聊天室範例）。
14-1 網路連結：Fetch API 與 REST 原則
學習如何與伺服器溝通。掌握 RESTful API 原則、使用 Fetch 發送 GET/POST 請求，以及處理響應數據。
15-1 資料的記憶：LocalStorage 與 Cookies
讓資料持久化。學習如何使用 LocalStorage、SessionStorage 儲存用戶偏好，以及 Cookies 在安全性上的應用。
Chapter 14: Network Requests and Communication
Fetching data from APIs, handling streams, and real-time communication with WebSockets.
15-2 瀏覽器的硬碟：IndexedDB 入門
學習瀏覽器內建的 NoSQL 資料庫。掌握 IndexedDB 的異步操作、Object Stores，以及處理大量結構化數據。
Chapter 15: Client-Side Storage and Persistence
Managing persistence with LocalStorage, IndexedDB, and the new Cookie Store API.
16-1 效能診斷：Core Web Vitals 與數據指標
學習如何衡量網頁速度。理解 Core Web Vitals (LCP, FID, CLS) 指標，並學會使用 Chrome DevTools 進行診斷。
16-2 資源追蹤：記憶體洩漏與垃圾回收
找出消耗資源的元兇。學習 JavaScript 垃圾回收機制、辨識常見記憶體洩漏場景，並學習使用 Memory Profiler。
Chapter 16: Performance and Memory Management
Writing efficient code, avoiding memory leaks, and using Web Workers for heavy computation.
17-1 數位護盾：XSS 與內容安全策略
學習如何防範最常見的網頁攻擊。理解跨站腳本攻擊 (XSS) 的原理，並掌握內容安全策略 (CSP) 的實作技巧。
17-2 請求真偽：CSRF 攻防實戰
保護你的伺服器請求。理解跨站請求偽造 (CSRF) 的攻擊手段，並學習如何使用 SameSite Cookie 與防禦 Header。
Chapter 17: JavaScript Security Best Practices
Securing your JavaScript applications against common vulnerabilities like XSS and CSRF.
18-1 終章起點：現代應用的建築美學
把拼圖拼起來。學習如何將前面所學的組合成一個大型架構，探討狀態管理、排版規範與代碼拆分策略。
18-2 時代脈動：2026 生態系回顧與展望
掌握時代脈動。回顧 JS 的發展歷程，探討 2026 年最火紅的工具（如 Bun, signals）以及未來的語法提案。
Chapter 18: Final Project - Real-time Dashboard
Bringing it all together by building a real-time, interactive dashboard using everything we've learned.
專業課程
02-3 (付費) 深度解析：記憶體模型與執行環境
資深工程師必修：深入記憶體管理 (Stack vs Heap)、執行環境 (Execution Context)、Hosting 機制與 TDZ (Temporal Dead Zone)。
03-3 (付費) 進階運算：邏輯賦值與位元操作
進階運算子應用：邏輯賦值運算子 (Logical Assignment)、位元運算子 (Bitwise) 基礎與權限設計應用。
01-3 (付費) 掌握現代工具鏈：Biome 與專案結構
深入解析 2026 工具鏈。學習配置 Biome 進行極速 Linting/Formatting，並理解現代專案結構標準。
04-3 (付費) 進階流控：模式匹配與狀態管理
(Pro) 邁向資深開發者。探索模式匹配、複雜狀態機處理，以及如何避免過深的回圈與巢狀。
05-3 (付費) 函數式編程：Pipe, Compose 與純粹性
(Pro) 將你的函數提升至藝術等級。學習純函數、副作用控制、以及利用 Pipe/Compose 構建聲明式代碼。
06-3 (付費) 物件攔截：Proxy 與 Reflect
(Pro) 掌握現代框架的核心：攔截物件行為。學習 Proxy 與 Reflect 進行數據響應式開發與高階封裝。
07-3 (付費) 效能巔峰：TypedArrays 與記憶體分佈
(Pro) 突破 JavaScript 的記憶體極限。學習 TypedArrays、ArrayBuffer 與 DataView，處理高效能二進位數據。
08-3 (付費) 跨越國界：Intl 國際化與進階匹配
(Pro) 邁向國際化產品。學習使用 Intl API 處理多國語言貨幣與日期，並探索 2026 年正規表達式的進階特性。
09-3 (付費) 數據洪流：異步迭代與 Streams
(Pro) 處理海量動態數據。學習異步迭代協議、for-await-of，以及使用 Web Streams API 進行高效能資源處理。
10-3 (付費) 幕後英雄：Event Loop 與 Web Workers
(Pro) 成為性能大師。揭秘 JavaScript 的異步心臟：Event Loop。學習如何使用 Web Workers 在後台處理運算，避免阻塞主執行緒。
11-3 (付費) 事件藝術：事件委派與效能優化
(Pro) 優化你的事件處理。學習事件冒泡、捕獲機制，並掌握事件委派技術以大幅提升複雜 UI 的效能。
13-3 (付費) 封裝之極：私有成員與 Mixins
(Pro) 建立真正安全的類別。掌握 ES2026 私有欄位 (#)、靜態屬性，以及進階的 Mixins 模式來構建複雜系統。
14-3 (付費) 推播架構：SSE 與高效能輪詢
(Pro) 選擇正確的通訊架構。深入比較 WebSocket、SSE (Server-Sent Events) 與過往的 Polling 技術，並實作一個資料流處理器。
12-3 (付費) 工程化之路：CI/CD 與品質優化
(Pro) 邁向工業化開發。理解 Tree Shaking、Minification 優化原理，並學習如何使用 GitHub Actions 建立自動化部署流程。
15-3 (付費) 離線第一：數據同步與衝突處理
(Pro) 打造強大的 PWA。結合 Service Worker 進行離線緩存，並學習資深開發者如何處理本地與伺服器的數據同步與衝突。
16-3 (付費) 計算極速：WebAssembly 與多執行緒
(Pro) 突破 JS 運算上限。學習 WebAssembly 整合、多執行緒技術，以及在 2026 年如何編寫負擔最輕的程式碼。
17-3 (付費) 加密基石：Web Crypto 與現代認證
(Pro) 掌握最高等級的安全開發。學習使用 Web Crypto API 處理敏感數據，並深入探討 JWT 認證流程與現代 Auth 框架實作。
18-3 (付費) 下一站：資深工程師的修煉地圖
(Pro) 突破新手村的最後一哩路。提供資深工程師的成長地圖，探討 AI 共創時代下的技術轉型與高階發展建議。