JavaScript 核心技術與實作應用彙整

本專案集結了 JavaScript (ES6+) 的核心概念筆記、現代語法特性分析，以及四個階段性實戰練習。內容旨在鞏固 JavaScript 基礎，並銜接現代前端框架（如 React）的開發需求。

📂 目錄結構

• AI 生成基礎筆記：涵蓋 React 開發必備的 JS 核心知識。
• 教學影片精華筆記：系統化整理 6 小時課程之技術重點。
• 實戰小專案：透過 DOM 操作、非同步處理與邏輯封裝建立實作經驗。

---

🚀 學習 React 前的 JS 必修重點

在深入前端框架前，本專案重點整理了以下基石觀念：

• 變數與作用域：理解 let 與 const 的區塊作用域，以及 var 的提升（Hoisting）行為。
• 核心陣列操作：熟練 map()、filter()、reduce()、find() 等不改變原始陣列的資料處理方法。
• 非同步程式設計：掌握 Promise 狀態與 async / await 現代語法，並運用 Fetch API 處理 JSON 資料。
• 現代語法糖：包含解構賦值（Destructuring）、展開運算子（Spread Operator ...）、可選連鎖（Optional Chaining ?.）與三元運算子。

---

🛠️ 實戰專案說明

本倉庫包含四個循序漸進的 Web 實作項目：

1. 黃綠紅選色器 (Color Picker)

• 重點技術：DOM 元素抓取 (querySelector)、事件監聽 (addEventListener)、forEach 批次處理按鈕邏輯。
• 目標：熟悉「選取元素 -> 綁定事件 -> 修改樣式/內容」的標準流程。

2. JS 碼錶 (Stopwatch)

• 重點技術：setInterval 與 clearInterval 的時間控制、狀態變數管理、字串補零處理。
• 目標：理解資料模型（Model）與畫面顯示（View）分離的初步概念。

3. 剪刀石頭布 (Rock Paper Scissors)

• 重點技術：Math.random() 應用、查表法 (Lookup Table) 邏輯封裝。
• 目標：捨棄冗長的 if-else，改用物件對照表處理複雜的勝負判斷。

4. 狗狗產生器 (Dog Generator)

• 重點技術：fetch 非同步資料串接、try...catch 錯誤保護機制、動態圖片渲染。
• 目標：模擬真實前端開發中與 API 連線並處理加載狀態（Loading/Error/Success）的場景。

---

💡 進階補充

• 查表法應用：利用物件或陣列取代多重 switch 或 if-else，提升程式碼可讀性與擴充性。
• 箭頭函式與 IIFE：解析匿名函式立即執行（Immediately Invoked Function Expression）的特性及其在閉包與環境隔離中的作用。
• this 綁定規則：對比傳統函式的動態綁定與箭頭函式的詞法作用域（Lexical this）綁定差異。

---

📈 建議學習路徑

本專案建議遵循以下順序進行能力提升：

1. 熟練 JavaScript (ES6+)：掌握現代語法基礎。
2. 學習 React：建立前端介面開發能力。
3. 學習 Node.js & Express：掌握後端 API 開發。
4. 學習 MongoDB：掌握資料模型設計與資料庫串接。