完成4個實作筆記

foodnoodle · foodnoodle · commit c97b76863266 · 2026-01-13T14:29:43.000+08:00
diff --git a/AI生成_基礎筆記/03_核心操作.md b/AI生成_基礎筆記/03_核心操作.md
@@ -85,7 +85,6 @@ console.log(passed); // Output: [85, 78, 90]
 
 // (補充) 原始陣列保持原樣
 console.log(scores); // Output: [85, 42, 78, 90, 55]
-
 ```
 
 > **💡 React 應用：** 實作「刪除」功能。要刪除 ID 為 5 的項目，其實是「保留 ID **不等於** 5 的所有項目」。
@@ -197,7 +196,6 @@ const total = cart.reduce((acc, current) => {
 
 // 3. 輸出結果
 console.log(total); // Output: 150
-
 ```
 
 ---
@@ -276,7 +274,6 @@ const {
 // 現在可以直接使用變數，不需要再寫 user.name 了
 console.log(name, age, role); 
 // Output: Willy 25 Admin
-
 ```
 
 #### 🔑 核心觀念重點整理
@@ -317,7 +314,6 @@ const coordinates = [121.5, 25.0];
 const [lng, lat] = coordinates;
 
 console.log(lng); // 121.5
-
 ```
 
 > **💡 React 應用：** `useState` Hook 的基礎。
@@ -340,7 +336,6 @@ const newItem = 4;
 // ✅ 正確：創造新陣列，包含舊資料 + 新資料
 const newList = [...oldList, newItem];
 console.log(newList); // [1, 2, 3, 4]
-
 ```
 
 ### 展開物件
@@ -355,7 +350,6 @@ const updatedUser = { ...user, age: 26 };
 
 console.log(updatedUser); // { name: "Willy", age: 26 }
 // 原本的 user 物件完全沒變 (Immutability)
-
 ```
 
 ---
diff --git a/程式柴_影片筆記/4個實作/01_黃綠紅選色器.md b/程式柴_影片筆記/4個實作/01_黃綠紅選色器.md
@@ -0,0 +1,99 @@
+### 實戰一：DOM 操作與事件監聽入門 ——「黃綠紅選色器」
+
+* **對應專案**：`CodeShiba/01 Color`
+* **專案目標**：做一個能切換標題、點擊色塊會顯示對應顏色的互動網頁。
+
+#### 1. 抓取 HTML 元素 (DOM Selection)
+
+要操作網頁上的元素，第一步就是把它們「抓」進 JavaScript 裡。
+
+* **`getElementById`**：抓取「唯一」的元素 (ID 是身分證)。
+> 範例：抓取切換按鈕與標題區塊。
+
+
+```javascript
+const changeTitleButton = document.getElementById('changeButton')
+let titleDiv = document.getElementById('title')
+```
+
+
+* **`querySelectorAll`**：一次抓取「多個」類似的元素 (Class 是制服)。
+> 範例：抓取所有 class 為 `.colorSquare` 的色塊按鈕，這會回傳一個 NodeList (類似陣列)。
+
+
+```javascript
+const squares = document.querySelectorAll('.colorSquare')
+```
+
+
+
+#### 2. 事件監聽 (Event Listeners)
+
+抓到元素後，我們要告訴程式：「當使用者做了什麼動作 (Event)，你要做什麼反應」。
+
+* **方法 A：`addEventListener` (標準寫法)**
+> 這是最正規的寫法，適合綁定複雜邏輯。範例中用來綁定點擊事件 (`click`) 到 `changeTitle` 函式。
+
+
+```javascript
+// 當 changeTitleButton 被 "click" 時，執行 changeTitle
+changeTitleButton.addEventListener("click", changeTitle);
+```
+
+
+* **方法 B：`.onclick` (簡潔寫法)**
+> 適合簡單的邏輯綁定。範例中用箭頭函式直接定義點擊後的行為。
+
+
+```javascript
+// 綁定 reset 事件
+resetGameBtn.onclick = () => resetScore()
+```
+
+
+
+#### 3. 批次處理 (ForEach Loop)
+
+當我們用 `querySelectorAll` 抓到一堆按鈕時，不可能一個一個去寫 `onclick`。這時 `forEach` 就派上用場了。
+
+> **核心觀念**：只要寫一次邏輯，就能套用到所有按鈕上。
+
+```javascript
+// squares 裡面有紅、黃、綠三個按鈕
+squares.forEach(square => {
+  // 對每一個 square (按鈕) 綁定 onclick
+  square.onclick = () => {
+    // 取得被點擊按鈕的 id (例如 'red')
+    _id = square.getAttribute('id')
+    // ...顯示結果
+  }
+})
+```
+
+#### 4. 修改內容與樣式 (Content & Style)
+
+互動的最後一步，就是將結果「顯示」給使用者看。
+
+* **修改 HTML 內容 (`innerHTML`)**：
+> 可以放入純文字，也可以放入 HTML 標籤。
+
+
+```javascript
+// 使用樣板字面值動態生成 HTML
+output.innerHTML = `<div class='colorSquare' id='${_id}'><p>你點到了: ${_id}</p></div>`
+```
+
+
+* **修改 CSS 樣式 (`style`)**：
+> 直接透過 JS 改變元素的外觀。
+
+
+```javascript
+// 把標題文字變成藍色
+titleDiv.style.color = `blue`
+```
+
+---
+
+**💡 實戰一總結：**
+這個練習讓我們習慣了 **「選取元素 (`querySelector`) -> 綁定事件 (`onclick`) -> 修改狀態 (`innerHTML/style`)」** 這樣的標準前端開發流程。
diff --git a/程式柴_影片筆記/4個實作/02_JS碼表.md b/程式柴_影片筆記/4個實作/02_JS碼表.md
@@ -0,0 +1,119 @@
+### 實戰二：計時器與狀態管理 ——「JS 碼錶」
+
+* **對應專案**：`CodeShiba/02 stopwatch`
+* **專案目標**：製作一個可以開始、暫停、重置的碼錶，精準到毫秒。
+
+#### 1. 時間控制核心 (SetInterval & ClearInterval)
+
+JavaScript 的時間不是連續流動的，而是透過「每隔多久執行一次函式」來模擬。
+
+* **啟動計時 (`setInterval`)**：
+> 設定一個鬧鐘，每隔 10 毫秒就呼叫一次 `timer()` 函式。注意要將回傳的 ID 存入變數 (`interval`)，這樣之後才能找到它並關掉。
+
+
+```javascript
+let interval = null; // 用來存放計時器的 ID
+
+buttonStart.onclick = () => {
+  // 重要檢查：如果 interval 是空的 (代表目前沒在跑)，才啟動新的
+  // 這防止了使用者狂按 Start 造成產生多個計時器疊加 (加速) 的 Bug
+  if (!interval) {
+    interval = setInterval(timer, 10);
+  }
+}
+```
+
+
+* **停止計時 (`clearInterval`)**：
+> 拿著剛剛存好的 ID (`interval`) 去取消鬧鐘。
+
+
+```javascript
+buttonStop.onclick = () => {
+  if (interval) {
+    clearInterval(interval); // 停止計時
+    interval = null;         // 歸零 ID，讓 Start 按鈕知道現在是停止狀態
+  }
+}
+```
+
+
+
+#### 2. 狀態變數管理 (State Management)
+
+網頁上看到的數字只是「顯示結果」，真正的數據都存在 JavaScript 的變數裡。
+
+* **定義狀態**：
+> 我們需要變數來記住現在跑了幾秒、幾毫秒。
+
+
+```javascript
+let seconds = 0;
+let m_seconds = 0;
+```
+
+
+* **重置狀態 (Reset)**：
+> 按下重置時，不只要把畫面歸零，更重要的是要把「背後的變數」也歸零，不然下次開始會從舊的時間繼續跑。
+
+
+```javascript
+buttonReset.onclick = () => {
+  // 先停止計時
+  if (interval) {
+    clearInterval(interval);
+    interval = null;
+  }
+  // 資料歸零
+  seconds = 0;
+  m_seconds = 0;
+  // 畫面歸零
+  displaySeconds.innerHTML = `00`;
+  displayMSeconds.innerHTML = `00`;
+}
+```
+
+
+
+#### 3. 邏輯判斷與補零 (String Formatting)
+
+這是新手最容易卡關的地方：如何讓 `9` 變成 `09`？如何讓毫秒滿 100 進位？
+
+* **進位邏輯**：
+> 在 `timer` 函式中，每次執行毫秒 `+1`，並檢查是否該進位。
+
+
+```javascript
+const timer = () => {
+  m_seconds++; 
+
+  // 進位檢查：如果毫秒超過 99
+  if (m_seconds > 99) {
+    m_seconds = 0; // 毫秒歸零
+    seconds++;     // 秒數加一
+    // ...更新畫面
+  }
+}
+```
+
+
+* **字串補零 (Padding)**：
+> 為了美觀，當數字小於 10 時，我們手動在前面加字串 `"0"`。
+
+
+```javascript
+if (Number(m_seconds) <= 9) {
+  displayMSeconds.innerHTML = `0${m_seconds}`;
+}
+
+if (Number(m_seconds) > 9) {
+  displayMSeconds.innerHTML = m_seconds;
+}
+```
+
+
+
+---
+
+**💡 實戰二總結：**
+這個專案教會了我們 **「變數 (Model) 與 畫面 (View) 分離」** 的概念。我們修改的是變數 (`seconds`)，然後再同步更新到畫面上。這是現代前端框架 (如 React/Vue) 的核心精神。
diff --git a/程式柴_影片筆記/4個實作/03_剪刀石頭布.md b/程式柴_影片筆記/4個實作/03_剪刀石頭布.md
@@ -0,0 +1,85 @@
+### 實戰三：遊戲邏輯與複雜判斷 ——「剪刀石頭布」
+
+* **對應專案**：`CodeShiba/03 paperscissorstone`
+* **專案目標**：製作一個能跟電腦對戰的猜拳遊戲，並即時顯示勝負結果。
+
+#### 1. 隨機數的藝術 (Random Choice)
+
+電腦要能隨機出拳，靠的是 JavaScript 內建的數學函式庫。
+
+* **`Math.random()`**：產生 0 ~ 0.999... 之間的隨機小數。
+* **`Math.floor()`**：無條件捨去小數點，變成整數。
+
+> **公式解析**：`Math.random() * 3` 會得到 0 ~ 2.99... 的數，再用 `floor` 捨去，就剛好得到 `0, 1, 2` 這三個整數，完美對應陣列的索引 (Index)。
+
+```javascript
+function getComputerChoice() {
+  let pssChoices = ['Stone', 'Paper', 'Scissors'];
+  // 隨機產生 0, 1, 2
+  let randomIndex = Math.floor(Math.random() * 3);
+  return pssChoices[randomIndex];
+}
+```
+
+#### 2. 優雅的勝負判斷 (Object Lookup Table)
+
+這是本專案最高級的技巧！新手通常會寫一大堆 `if (player=='Stone' && computer=='Scissors')`，寫起來又長又容易錯。
+
+> **高手寫法**：建立一個「規則物件 (Lookup Table)」，定義「每個拳種會贏誰」。
+> 這樣程式碼只有三行判斷：
+> 1. 一樣 -> 平手 (`0`)
+> 2. 玩家的拳會贏電腦 -> 贏 (`1`)
+> 3. 剩下情況 -> 輸 (`-1`)
+
+```javascript
+function getResult(playerChoice, computerChoice) {
+  // 定義勝利規則：Key (贏家) -> Value (輸家)
+  const rules = {
+    'Stone': 'Scissors',  // 石頭 贏 剪刀
+    'Scissors': 'Paper',  // 剪刀 贏 布
+    'Paper': 'Stone'      // 布 贏 石頭
+  };
+
+  // 判斷邏輯
+  if (playerChoice === computerChoice) return 0; // 平手
+  
+  // 檢查：玩家出的拳 (key)，對應到的輸家是否剛好是電腦 (value)？
+  if (rules[playerChoice] === computerChoice) return 1; // 獲勝
+  
+  return -1; // 否則就是輸
+}
+```
+
+#### 3. 邏輯與畫面分離 (Separation of Concerns)
+
+在這個專案中，程式碼被切分得很乾淨：
+
+* **純計算 (Logic)**：`getComputerChoice` 和 `getResult` 只負責算數學，完全不碰 HTML。
+* **純顯示 (DOM)**：`showResult` 只負責把算好的分數拿來顯示，完全不管規則。
+* **控制器 (Controller)**：`onClickPSS` 負責串接兩者。
+
+```javascript
+function onClickPSS(playerChoice) {
+  const computerChoice = getComputerChoice();     // 1. 產生數據
+  const score = getResult(playerChoice, computerChoice); // 2. 計算結果
+  showResult(score, playerChoice, computerChoice); // 3. 更新畫面
+}
+```
+
+#### 4. 動態顯示結果 (Template Logic)
+
+在 `showResult` 中，使用 `switch` 根據分數 (`-1, 0, 1`) 來決定顯示什麼文字，並利用樣板字面值將變數塞入句子中。記得要加上 `break` 來中斷 `switch` 喔!
+
+```javascript
+switch (score) {
+  case -1:
+    result.innerText = `你輸了! 你出了${playerChoice}，電腦出了${computerChoice}!`;
+    break;
+  // ... 其他 case
+}
+```
+
+---
+
+**💡 實戰三總結：**
+這個專案最大的收穫是學會了 **「用資料結構 (物件) 來簡化邏輯判斷」**。這招在未來處理複雜權限判斷或狀態對應時非常有用（例如：`statusMap = { 'pending': '等待中', 'success': '成功' }`）。
diff --git a/程式柴_影片筆記/4個實作/04_狗狗產生器.md b/程式柴_影片筆記/4個實作/04_狗狗產生器.md
diff --git a/程式柴_影片筆記/4個實作/05_補充-查表法.md b/程式柴_影片筆記/4個實作/05_補充-查表法.md
