msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 10/20, 100 files)

Browse Source
update-translations
localizeflow[bot] 1 week ago
parent aae8ad6035
commit e11291bd14
100 changed files with 16240 additions and 3180 deletions
Show Stats Download Patch File Download Diff File

54
translations/hk/7-bank-project/1-template-route/assignment.md
Unescape View File

@ -1,26 +1,60 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8223e429218befa731dd5bfd22299520",
"translation_date": "2025-08-24T00:09:55+00:00",
"original_hash": "df0dcecddcd28ea8cbf6ede0ad57d673",
"translation_date": "2026-01-06T12:51:16+00:00",
"source_file": "7-bank-project/1-template-route/assignment.md",
"language_code": "hk"
}
-->
# 改善路由
## 指引
## 指示
目前的路由宣告僅包含要使用的模板 ID，但在顯示新頁面時，有時需要更多功能。讓我們透過以下兩個額外功能來改進路由的實現：
既然你已建立基本的路由系統，現在是時候以專業功能加以強化，提升用戶體驗和提供更好的開發工具。實際應用程式不僅僅需要模板切換，還需要動態頁面標題、生命週期掛勾和可擴充架構。
- 為每個模板設定標題，並在模板變更時更新窗口標題為新標題。
- 增加一個選項，在模板變更後執行一些程式碼。我們希望每次顯示儀表板頁面時，在開發者主控台中打印 `'Dashboard is shown'`。
在此作業中，你將擴充你的路由實作，加入兩個常見於生產環境網頁應用程式的重要功能。這些增強會讓你的銀行應用感覺更完善，並為未來功能奠定基礎。
路由宣告目前只包含要使用的模板 ID，但顯示新頁面時有時需要更多資訊。讓我們透過兩個額外功能改進路由實作：
### 功能一：動態頁面標題
**目標：** 為每個模板設定標題，並在模板更換時更新瀏覽器視窗標題。
**重要原因：**
- **提升**使用者體驗，顯示具描述性的瀏覽器分頁標題
- **增強**輔助技術與螢幕閱讀器的可存取性
- **提供**更好的書籤與瀏覽器歷史上下文
- **遵循**專業網站開發最佳實務
**實作方式：**
- **擴充** routes 物件，包含每條路由的標題資訊
- **修改** `updateRoute()` 函式，動態更新 `document.title`
- **測試**在不同頁面切換時標題是否正常變更
### 功能二：路由生命週期掛勾
**目標：** 新增在模板切換後執行程式碼的選項。我們希望每次顯示儀表板頁面時，在開發者控制台印出 `'Dashboard is shown'`。
**重要原因：**
- **啟用**特定路由載入時執行自訂邏輯
- **提供**分析、記錄或初始化程式碼的掛勾
- **建立**支援更複雜路由行為的基礎
- **展示**網站開發中觀察者模式的概念
**實作方式：**
- **新增**路由設定的可選回呼函式屬性
- **模板渲染完成後執行**該回呼函式（如存在）
- **確保**此功能能作用於任何含有定義回呼的路由
- **測試**造訪儀表板時，控制台訊息是否出現
## 評分標準
| 評分標準 | 卓越 | 合格 | 需要改進 |
| -------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| | 兩個功能均已實現並正常運作。標題和程式碼新增功能也適用於在 `routes` 宣告中新增的路由。 | 兩個功能均正常運作，但行為是硬編碼的，無法透過 `routes` 宣告進行配置。新增第三個具有標題和程式碼新增功能的路由無法運作或僅部分運作。 | 其中一個功能缺失或未正常運作。 |
| 標準 | 優異 | 合格 | 需要改進 |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| | 兩項功能皆已實作並正常運作。標題與程式碼新增亦可支援 `routes` 宣告中添加的新路由。 | 兩項功能皆可運作，但行為為硬編碼，無法透過 `routes` 宣告設定。無法或部分可用於添加第三條帶標題與程式碼的路由。 | 缺少其中一項功能或功能無法正常運作。 |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用此翻譯而引起的任何誤解或誤釋不負任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

972
translations/hk/7-bank-project/2-forms/README.md
View File

File diff suppressed because it is too large Load Diff

160
translations/hk/7-bank-project/2-forms/assignment.md
Unescape View File

@ -1,25 +1,165 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "474f3ab1ee755ca980fc9104a0316e17",
"translation_date": "2025-08-24T00:01:08+00:00",
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
"translation_date": "2026-01-06T12:48:34+00:00",
"source_file": "7-bank-project/2-forms/assignment.md",
"language_code": "hk"
}
-->
# 為你的銀行應用程式設計樣式
# 使用現代 CSS 美化您的銀行應用程式
## 指引
## 專案概覽
建立一個新的 `styles.css` 檔案，並在你現有的 `index.html` 檔案中加入一個連結到該檔案。在你剛建立的 CSS 檔案中，加入一些樣式，讓 *登入* 和 *儀表板* 頁面看起來整潔美觀。嘗試設計一個色彩主題，為你的應用程式打造專屬的品牌形象。
將您功能完善的銀行應用程式轉化為視覺上吸引、專業外觀的網頁應用程式，使用現代 CSS 技巧。您將建立一套一致的設計系統，提高使用者體驗，同時維持可及性與響應式設計原則。
> 提示：如果需要，你可以修改 HTML 並新增新的元素和類別。
此任務挑戰您應用當代網頁設計模式，實施一致的視覺識別，並打造用戶既喜愛又直覺易用的介面。
## 指示
### 第一步：設置您的樣式表
**建立您的 CSS 基礎：**
1. **建立** 一個名為 `styles.css` 的新檔案於您的專案根目錄
2. **在** `index.html` 檔案中連結此樣式表： ```html
<link rel="stylesheet" href="styles.css">
```
3. **開始** 使用 CSS 重設與現代預設值：
```css
/* Modern CSS reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
}
```
### 第二步：設計系統需求
**實作這些基本設計元素：**
#### 顏色調色盤
- **主色**：選擇專業的顏色用於按鈕和重點元素
- **次要色**：用於強調及次要動作的互補色
- **中性色**：用於文字、邊框及背景的灰色系
- **成功/錯誤色**：成功狀態使用綠色，錯誤狀態使用紅色
#### 排版
- **標題階層**：清晰分辨 H1、H2 及 H3 元素
- **正文字體**：易讀字體大小（最小 16px）及適當行高
- **表單標籤**：清晰且可及的文字樣式
#### 版面配置與間距
- **一致間距**：使用間距刻度（8px、16px、24px、32px）
- **格線系統**：有組織的表單及內容區塊佈局
- **響應式設計**：以行動裝置為起點的斷點設計
### 第三步：元件樣式
**為這些特定元件設計樣式：**
#### 表單
- **輸入欄位**：專業邊框、聚焦狀態與驗證樣式
- **按鈕**：懸停效果、禁用狀態及載入指示
- **標籤**：清楚定位及必填欄位指示
- **錯誤訊息**：顯著錯誤樣式與有用的提示訊息
#### 導航
- **頁首**：乾淨且具品牌識別的導航區域
- **連結**：明顯的懸停狀態與啟用指示
- **標誌/標題**：具特色的品牌元素
#### 內容區域
- **區塊**：不同區域間清晰的視覺分隔
- **卡片**：若使用卡片式佈局，包含陰影及邊框
- **背景**：適當運用空白及細膩背景
### 第四步：進階功能（選擇性）
**考慮實作這些高級功能：**
- **暗模式**：可在亮/暗主題間切換
- **動畫**：細緻過渡與微互動效果
- **載入狀態**：表單提交時的視覺反饋
- **響應式圖片**：針對不同螢幕尺寸做優化的圖片
## 設計靈感
**現代銀行應用特色：**
- **乾淨、極簡設計**搭配豐富的空白
- **專業色彩方案**（藍色、綠色或精緻的中性色）
- **明確視覺階層**與顯著的行動呼籲按鈕
- **達到 WCAG 準則的可及對比**
- **適用所有裝置的響應式佈局**
## 技術需求
### CSS 組織架構
```css
/* 1. CSS Custom Properties (Variables) */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
/* Add more variables */
}
/* 2. Base Styles */
/* Reset, typography, general elements */
/* 3. Layout */
/* Grid, flexbox, positioning */
/* 4. Components */
/* Forms, buttons, cards */
/* 5. Utilities */
/* Helper classes, responsive utilities */
/* 6. Media Queries */
/* Responsive breakpoints */
```
### 可及性需求
- **色彩對比**：確保普通文字至少有 4.5:1 對比度
- **聚焦指標**：鍵盤導覽可見的聚焦狀態
- **表單標籤**：正確與輸入欄位關聯
- **響應式設計**：適用寬度從 320px 至 1920px 的螢幕
## 評分標準
| 評分標準 | 優異 | 合格 | 需要改進 |
| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
| | 所有頁面看起來整潔易讀，擁有一致的色彩主題，不同的區塊能夠清晰地突顯出來。 | 頁面有樣式，但缺乏主題，或者區塊未能清楚地劃分。 | 頁面缺乏樣式，區塊看起來雜亂無章，資訊難以閱讀。 |
| 評分標準 | 優秀 (A) | 稱職 (B) | 有待發展 (C) | 需改進 (F) |
|----------|----------|----------|--------------|------------|
| **設計系統** | 實施完整設計系統，色彩、排版與間距一致 | 使用一致樣式，有明確設計模式及良好視覺階層 | 基本樣式，有些一致性問題或設計元素缺失 | 樣式極少且不一致，設計衝突 |
| **使用者體驗** | 建立直覺、專業介面，具優異可用性與視覺吸引力 | 提供良好體驗，導航清楚，內容易讀 | 基本可用，需加強 UX | 可用性差，難以導航或閱讀 |
| **技術實作** | 使用現代 CSS 技巧，程式結構有組織，遵守最佳實踐 | 有效運用 CSS，組織良好且技術適當 | CSS 正常運作，但組織或現代技術不足 | CSS 實作差，含技術問題或瀏覽器相容性問題 |
| **響應式設計** | 完全響應，適用所有裝置尺寸且效果優良 | 響應良好，部分畫面大小有輕微問題 | 基本響應，部分佈局存在問題 | 無響應或行動裝置嚴重問題 |
| **可及性** | 達 WCAG 標準，具優秀鍵盤導覽及讀屏支援 | 良好可及性，對比及聚焦指標適當 | 基本可及性考量，有少部分缺失 | 可及性差，行動不便使用者難以使用 |
## 提交指南
**提交內容包含：**
- **styles.css**：您的完整樣式表
- **更新後的 HTML**：您所修改的任何 HTML 檔
- **截圖**：展示桌面與行動裝置上設計的圖片
- **README**：簡述您的設計選擇與色彩調色盤
**加分項目：**
- **CSS 自訂屬性**，以維持可維護的主題化
- **進階 CSS 功能**，如 Grid、Flexbox 或 CSS 動畫
- **效能考量**，如優化 CSS 與檔案大小
- **跨瀏覽器測試**，確保不同瀏覽器相容性
> 💡 **專家提示**：先從行動裝置設計開始，再為大螢幕增強功能。此行動優先 (mobile-first) 方法確保您的應用程式在所有裝置上均良好運行，並遵循現代網頁開發最佳實踐。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為準，應視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用此翻譯而引起的任何誤解或誤釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

845
translations/hk/7-bank-project/3-data/README.md
View File

File diff suppressed because it is too large Load Diff

143
translations/hk/7-bank-project/3-data/assignment.md
Unescape View File

@ -1,27 +1,144 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
"translation_date": "2025-08-24T00:06:07+00:00",
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
"translation_date": "2026-01-06T12:54:17+00:00",
"source_file": "7-bank-project/3-data/assignment.md",
"language_code": "hk"
}
-->
# 重構及添加註解到你的程式碼
# 代碼重構與文件編寫作業
## 指引
## 學習目標
隨著你的代碼庫不斷增長，定期重構程式碼對於保持其可讀性和可維護性至關重要。請添加註解並重構你的 `app.js`，以提升代碼質量：
完成此作業後，您將練習專業開發者日常使用的關鍵軟體開發技能。您將學會如何組織代碼以維護性為主、透過抽象減少重複，並為未來的開發者（包括您自己）撰寫文件說明。
- 抽取常數，例如伺服器 API 的基礎 URL
- 將相似的代碼進行統一處理：例如，你可以創建一個 `sendRequest()` 函數，將 `createAccount()` 和 `getAccount()` 中使用的代碼整合起來
- 重新組織代碼，使其更易於閱讀，並添加註解
乾淨且具備良好文件說明的代碼，對於多位開發者協作且代碼庫隨時間演進的真實網頁開發專案至關重要。
## 評分標準
## 作業概述
| 評分標準 | 優秀 | 合格 | 有待改進 |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| | 程式碼有註解，分為不同部分且易於閱讀。常數已被抽取，並創建了一個統一的 `sendRequest()` 函數。 | 程式碼乾淨，但仍可通過添加更多註解、抽取常數或進行統一處理來進一步改進。 | 程式碼混亂，沒有註解，常數未被抽取，且代碼未進行統一處理。 |
您的銀行應用程式中的 `app.js` 檔案已隨著登入、註冊與儀表板功能大幅成長。現在是時候使用專業開發實務來重構這份代碼，以提升可讀性、可維護性，並減少冗餘代碼。
## 指示
請透過實作以下三個核心重構技巧，轉換您目前的 `app.js` 程式碼：
### 1. 抽取設定常數
**任務**：在檔案頂部建立一個配置區段，包含可重用的常數。
**實作建議：**
- 抽取目前多處硬編碼的伺服器 API 基底 URL
- 建立多個函式中出現的錯誤訊息常數
- 考慮抽取多次使用的路由路徑與元素 ID
**示範架構：**
```javascript
// 配置常數
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
LOGIN: '/login',
DASHBOARD: '/dashboard'
};
```
### 2. 建立統一的請求函式
**任務**：建置一個可重用的 `sendRequest()` 函式，消除 `createAccount()` 與 `getAccount()` 之間的重複代碼。
**需求：**
- 支援 GET 與 POST 請求
- 包含完善的錯誤處理
- 支援不同的 URL 端點
- 接受可選的請求主體資料
**函式簽名建議：**
```javascript
async function sendRequest(endpoint, method = 'GET', data = null) {
// 你嘅實現寫喺度
}
```
### 3. 加入專業程式碼文件說明
**任務**：使用清楚且有助於理解邏輯「為什麼」的註解對代碼進行說明。
**文件說明標準：**
- 為函式加入說明目的、參數和回傳值的文件注釋
- 對複雜邏輯或商業規則添加內聯註解
- 使用區塊標題將相關函式組織在一起
- 解釋任何不明顯的程式樣式或瀏覽器特有的應變措施
**文件說明示範風格：**
```javascript
/**
* Authenticates user and redirects to dashboard
* @param {Event} event - Form submission event
* @returns {Promise<void>} - Resolves when login process completes
*/
async function login(event) {
// 防止預設表單提交，以便使用 JavaScript 處理
event.preventDefault();
// 你的實作方式…
}
```
## 成功標準
您的重構代碼應展現以下專業開發實務：
### 優異實作
- ✅ **常數**：所有魔術字串與 URL 均已抽取為清楚命名的常數
- ✅ **DRY 原則**：共用請求邏輯整合成可重用的 `sendRequest()` 函式
- ✅ **文件說明**：函式包含明確的 JSDoc 注釋說明目的與參數
- ✅ **組織架構**：利用區塊標題及一致的格式化對代碼進行合理分組
- ✅ **錯誤處理**：利用新請求函式強化錯誤處理機制
### 足夠實作
- ✅ **常數**：大部分重複值已抽取，僅有少量硬編碼殘留
- ✅ **因式分解**：基本的 `sendRequest()` 函式已建立，但可能未涵蓋所有邊界狀況
- ✅ **註解**：主要函式已註解，但有些說明尚可更完整
- ✅ **可讀性**：代碼整體組織良好，但仍有待改進之處
### 需加強
- ❌ **常數**：大量魔術字串與 URL 仍散佈於檔案中未抽取
- ❌ **重複**：類似函式間仍有明顯重複代碼
- ❌ **文件說明**：缺少或不足的註解，未能有效說明程式碼功能
- ❌ **組織架構**：代碼缺乏明確結構與邏輯分組
## 測試您的重構代碼
重構完成後，請確認您的銀行應用程式仍能正常運作：
1. **測試所有使用者流程**：註冊、登入、儀表板顯示及錯誤處理
2. **驗證 API 呼叫**：確認 `sendRequest()` 可同時用於帳戶建立與查詢
3. **檢查錯誤情境**：使用無效憑證及模擬網路錯誤測試
4. **檢視主控台輸出**：確保重構過程未新增新的錯誤訊息
## 提交指引
提交您的重構後的 `app.js` 檔案，應包含：
- 清楚的區段標題組織不同功能
- 一致的代碼格式與縮排
- 完整的 JSDoc 文件說明所有函式
- 頂部附簡短註解說明您的重構思路
**額外挑戰**：建立一個簡單的代碼文件（`CODE_STRUCTURE.md`），說明您的應用架構及各函式如何協同運作。
## 與真實世界的連結
此作業模擬專業開發者定期進行的代碼維護工作。在業界環境中：
- **代碼審查**會像此作業一樣評估可讀性與可維護性
- **技術債務**避免因未定期重構與文件產生
- **團隊協作**仰賴清楚且具良好文件的代碼令新成員能快速理解
- **Bug 修復**在有良好抽象與組織的代碼庫中更為容易
您在本次練習中培養的技能──抽取常數、消除重複、撰寫清晰文件──是專業軟體開發的基礎。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為具權威性的來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。我們致力確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件應視為權威依據。對於重要資訊，建議諮詢專業人工翻譯。本公司對於因使用本翻譯而引致的任何誤解或誤譯概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

700
translations/hk/7-bank-project/4-state-management/README.md
Unescape View File

@ -1,73 +1,242 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b46acf79da8550d76445eed00b06c878",
"translation_date": "2025-10-03T12:50:45+00:00",
"original_hash": "b807b09df716dc48a2b750835bf8e933",
"translation_date": "2026-01-06T12:54:43+00:00",
"source_file": "7-bank-project/4-state-management/README.md",
"language_code": "hk"
}
-->
# 建立銀行應用程式第4部分：狀態管理概念
# 建立銀行應用程式 第4部分：狀態管理概念
## 課前測驗
## ⚡ 接下來5分鐘可完成的事項
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/47)
**忙碌開發者的快速啟動路徑**
### 簡介
```mermaid
flowchart LR
A[⚡ 5 分鐘] --> B[診斷狀態問題]
B --> C[建立中央狀態物件]
C --> D[加入 updateState 函數]
D --> E[看到即時改善]
```
- **第1分鐘**：測試目前的狀態問題 - 登入，重新整理頁面，觀察登出
- **第2分鐘**：用 `let state = { account: null }` 替換 `let account = null`
- **第3分鐘**：建立簡易的 `updateState()` 函式用於受控更新
- **第4分鐘**：更新一個函式以使用新的模式
- **第5分鐘**：測試更可預測且易於除錯的狀態管理
**快速診斷測試**：
```javascript
// 之前：分散狀態
let account = null; // 刷新後遺失！
// 之後：集中狀態
let state = Object.freeze({ account: null }); // 可控且可追蹤！
```
**為何這很重要**：5分鐘內，您將體驗從混亂的狀態管理轉變為可預測且易於除錯的模式。這是讓複雜應用程式易於維護的基礎。
## 🗺️ 您透過狀態管理大師之路的學習旅程
```mermaid
journey
title 從分散狀態到專業架構
section 問題診斷
Identify state loss issues: 3: You
Understand scattered updates: 4: You
Recognize architecture needs: 6: You
section 集中控制
Create unified state object: 5: You
Implement controlled updates: 7: You
Add immutable patterns: 8: You
section 增加持久性
Implement localStorage: 6: You
Handle serialization: 7: You
Create session continuity: 9: You
section 平衡新鮮度
Address data staleness: 5: You
Build refresh systems: 8: You
Achieve optimal balance: 9: You
```
**您的學習目標**：本課結束時，您將建立一套專業等級的狀態管理系統，可處理持久化、資料鮮度及可預測的更新——這些模式正是生產系統中使用的。
## 課前小測驗
[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/47)
## 介紹
隨著網頁應用程式的規模增大，追蹤所有數據流變得越來越困難。哪些程式碼獲取數據，哪些頁面使用數據，數據需要在何時何地更新……很容易導致程式碼混亂且難以維護。尤其是當需要在應用程式的不同頁面之間共享數據時，例如用戶數據。*狀態管理*的概念一直存在於各類程式中，但隨著網頁應用程式的複雜性不斷增加，狀態管理已成為開發過程中的關鍵點。
狀態管理就像航行者號太空船上的導航系統——當一切運作順暢時，你幾乎感覺不到它的存在。但當事情出錯時，它就決定了你是能抵達星際空間，還是迷失在宇宙虛空中。在網頁開發中，狀態代表應用程式需要記住的一切：使用者登入狀態、表單資料、導覽歷史和臨時介面狀態。
在這最後一部分，我們將重新審視我們建立的應用程式，重新思考如何管理狀態，以支持瀏覽器在任何時候刷新，並在用戶會話之間持續保存數據。
隨著您的銀行應用程式從簡單的登入表單演進成更複雜的應用，您很可能已遇到一些常見挑戰。重新整理頁面時用戶意外登出。關閉瀏覽器所有進度消失。除錯時你得在多重函式中追蹤相同資料的多種寫入方式。
### 前置條件
這些並非程式編寫不佳的跡象——而是當應用達到某種複雜度門檻時，必然會出現的成長痛。每位開發者都會在應用從「概念驗證」進展到「可投入生產」時遇到這類挑戰。
您需要完成本課程的網頁應用程式的[數據獲取](../3-data/README.md)部分。此外，您需要安裝 [Node.js](https://nodejs.org) 並[在本地運行伺服器 API](../api/README.md)，以便管理帳戶數據。
在本課中，我們將實作集中式狀態管理系統，將您的銀行應用程式轉變為可靠且專業的產品。您將學會可預測地管理資料流，適當地持久化使用者會話，並創造現代網路應用所需的流暢用戶體驗。
您可以通過在終端執行以下命令來測試伺服器是否正常運行：
## 先決條件
在深入狀態管理概念之前，請確保您的開發環境已正確設定，且銀行應用程式基礎已建立。本課程直接建立在本系列前幾部分的概念與程式碼之上。
請確保您已備妥以下組件後再繼續：
**必要設定：**
- 完成[資料擷取課程](../3-data/README.md) - 您的應用程式應能成功載入並顯示帳戶資料
- 在您的系統上安裝[Node.js](https://nodejs.org)以執行後端API
- 本機啟動[伺服器API](../api/README.md)來處理帳戶資料操作
**測試您的環境：**
在終端機執行以下指令，以驗證API伺服器是否正常運作：
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
# -> 應該返回 "Bank API v1.0.0" 作為結果
```
**此指令功能：**
- **送出** GET 請求至您本機的API伺服器
- **測試**連線且驗證伺服器回應
- **回傳**API版本資訊（如一切正常）
## 🧠 狀態管理架構概述
```mermaid
mindmap
root((狀態管理))
Current Problems
Session Loss
頁面重新整理問題
瀏覽器關閉影響
變數重置問題
Scattered Updates
多重修改點
除錯挑戰
不可預測行為
Incomplete Cleanup
登出狀態問題
記憶體洩漏
安全性疑慮
Centralized Solutions
Unified State Object
單一真實來源
可預測結構
可擴充基礎
Controlled Updates
不可變模式
使用 Object.freeze
基於函數的更改
State Tracking
歷史管理
除錯可見性
變更稽核
Persistence Strategies
localStorage Integration
會話持續性
JSON 序列化
自動同步
Data Freshness
伺服器更新
過期資料處理
平衡優化
Storage Optimization
最小資料
效能重點
安全性考量
```
**核心原理**：專業的狀態管理在可預測性、持久化和效能之間取得平衡，打造從簡單互動到複雜應用流程皆可擴展的可靠用戶體驗。
---
## 重新思考狀態管理
## 診斷目前的狀態問題
在[上一課](../3-data/README.md)中，我們在應用程式中引入了一個基本的狀態概念，即全局變數 `account`，它包含當前登錄用戶的銀行數據。然而，我們目前的實現存在一些缺陷。嘗試在儀表板頁面刷新瀏覽器。會發生什麼？
就像福爾摩斯檢視案發現場，我們必須完全了解當前實作中到底發生了什麼，才能破解消失的使用者會話之謎。
目前程式碼有三個問題：
讓我們執行一個簡單實驗，揭露潛藏的狀態管理挑戰：
- 狀態未持久化，瀏覽器刷新會將您帶回登錄頁面。
- 有多個函數修改狀態。隨著應用程式的增長，這可能使追蹤更改變得困難，並且容易忘記更新某些部分。
- 狀態未清理，因此當您點擊*登出*時，帳戶數據仍然存在，即使您已回到登錄頁面。
**🧪 嘗試這個診斷測試：**
1. 登入您的銀行應用並導航至儀表板
2. 重新整理瀏覽器頁面
3. 觀察您的登入狀態發生了什麼
我們可以逐一更新程式碼以解決這些問題，但這會導致程式碼重複並使應用程式更加複雜且難以維護。或者，我們可以暫停幾分鐘，重新思考我們的策略。
若您被導回登入畫面，您就遇到了經典的狀態持久化問題。這是因為我們目前的實作將使用者資料儲存在會在每次頁面載入時重置的 JavaScript 變數中。
> 我們真正想要解決的問題是什麼？
**目前的實作問題：**
[狀態管理](https://en.wikipedia.org/wiki/State_management)的核心在於找到一個良好的方法來解決以下兩個特定問題：
來自我們[前一課程](../3-data/README.md)中簡易的 `account` 變數造成三個重大問題，影響使用者體驗與程式碼可維護性：
- 如何使應用程式中的數據流易於理解？
- 如何確保狀態數據始終與用戶界面保持同步（反之亦然）？
| 問題 | 技術原因 | 使用者影響 |
|---------|--------|----------------|
| **會話丟失** | 頁面重新整理清空 JavaScript 變數 | 使用者需頻繁重新認證 |
| **更新分散** | 多個函式直接改寫狀態 | 除錯難度逐漸升高 |
| **清理不完整** | 登出未清除所有狀態引用 | 潛在安全與隱私風險 |
一旦解決了這些問題，您可能面臨的其他問題要麼已經解決，要麼變得更容易解決。有許多可能的方法可以解決這些問題，但我們將採用一種常見的解決方案，即**集中化數據及其更改方式**。數據流將如下所示：
**架構挑戰：**
![顯示 HTML、用戶操作和狀態之間數據流的示意圖](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.hk.png)
宛如鐵達尼號的隔艙設計看似堅固，卻在多艙同時淹水時崩潰，單獨修補這些問題無法解決根本架構缺陷。我們需要全面的狀態管理解決方案。
> 我們在此不會涵蓋數據自動觸發視圖更新的部分，因為它涉及到更高級的[反應式編程](https://en.wikipedia.org/wiki/Reactive_programming)概念。如果您有興趣深入研究，這是一個不錯的後續主題。
> 💡 **我們到底想達成什麼？**
✅ 市面上有許多不同方法的狀態管理庫，[Redux](https://redux.js.org) 是一個流行的選擇。了解其使用的概念和模式通常是一個很好的方式，可以幫助您了解在大型網頁應用程式中可能面臨的問題以及如何解決。
[狀態管理](https://en.wikipedia.org/wiki/State_management) 實際上是兩大基本問題的解決：
### 任務
1. **我的資料在哪？**：追蹤我們擁有什麼資訊及其來源
2. **是否資訊一致？**：確保使用者所見即資料實際情況
**我們的策略：**
不再蛇行亂撞，而是建立 **集中式狀態管理** 系統。想像有一名非常有組織的專責人員主控所有重要事物：
![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.hk.png)
```mermaid
flowchart TD
A[用戶操作] --> B[事件處理器]
B --> C[更新狀態函數]
C --> D{狀態驗證}
D -->|有效| E[創建新狀態]
D -->|無效| F[錯誤處理]
E --> G[物件凍結]
G --> H[更新本地儲存]
H --> I[觸發介面更新]
I --> J[用戶看到變更]
F --> K[用戶看到錯誤]
subgraph "狀態管理層"
C
E
G
end
subgraph "持久層"
H
L[本地儲存]
H -.-> L
end
```
**理解此資料流：**
- **集中管理**所有應用狀態於單一位置
- **路由**所有狀態變更透過受控函式
- **確保**介面與當前狀態同步
- **提供**清晰且可預測的資料管理模式
> 💡 **專業洞見**：本課專注於基礎概念。對於複雜應用，像是[Redux](https://redux.js.org)等函式庫提供了更進階的狀態管理功能。理解這些核心原則將有助您精通任何狀態管理庫。
> ⚠️ **進階主題**：我們這裡不會介紹由狀態變更自動觸發的UI更新，此屬於[反應式編程](https://en.wikipedia.org/wiki/Reactive_programming)範疇。可視為學習之路的優秀後續課題！
### 任務：集中狀態結構
讓我們開始將分散的狀態管理轉換成集中系統。這第一步為接下來的所有改進奠定基礎。
**步驟1：建立中央狀態物件**
我們將從一些重構開始。替換 `account` 的聲明：
取代簡單的 `account` 宣告：
```js
let account = null;
```
改為：
改為有結構的狀態物件：
```js
let state = {
@ -75,31 +244,112 @@ let state = {
};
```
這個想法是將我們的應用程式數據*集中化*到一個單一的狀態對象中。目前狀態中只有 `account`，因此變化不大，但這為未來的擴展奠定了基礎。
**為何這改動重要：**
- **集中管理**所有應用資料於單一地點
- **為未來擴充狀態屬性做好準備**
- **建立狀態與其它變數間清晰界線**
- **確立隨應用成長而擴展的設計模式**
**步驟2：更新狀態存取模式**
修改函式以使用新的狀態結構：
我們還需要更新使用它的函數。在 `register()` 和 `login()` 函數中，將 `account = ...` 替換為 `state.account = ...`;
**在 `register()` 與 `login()` 函式中**，將：
```js
account = ...
```
在 `updateDashboard()` 函數的頂部，添加以下行：
改為：
```js
state.account = ...
```
**在 `updateDashboard()` 函式頂部**新增：
```js
const account = state.account;
```
這次重構本身並未帶來太多改進，但其目的是為接下來的更改奠定基礎。
**這些更新達成：**
- **維持既有功能同時改善結構**
- **為更先進的狀態管理做準備**
- **建立一致的狀態資料存取模式**
- **奠定集中式狀態更新的基礎**
> 💡 **注意**：此重構尚未立即解決問題，但為後續強力改進打造關鍵基礎！
### 🎯 教學點檢：集中原則
**暫停反思**：您剛實作出集中式狀態管理的基礎。這是關鍵架構決策。
**自我評估：**
- 您能說明為何集中狀態於單一物件比分散變數更好嗎？
- 若忘記更新某函式改用 `state.account`，會發生什麼事？
- 此模式如何為您的程式碼準備好先進功能？
## 追蹤數據更改
**實務連結**：您學到的集中模式正是現代框架如 Redux、Vuex 和 React Context 的架構基礎。您正在建構大型應用的同樣架構思維。
現在我們已經設置了 `state` 對象來存儲數據，下一步是集中更新。目的是使追蹤任何更改及其發生時間變得更容易。
**挑戰題**：若需新增使用者偏好（主題、語言）到應用狀態，您會把它們加在哪？如何擴展？
為了避免對 `state` 對象進行更改，將其視為[*不可變*](https://en.wikipedia.org/wiki/Immutable_object)是一個良好的做法，這意味著它完全不能被修改。這也意味著如果您想更改其中的任何內容，必須創建一個新的狀態對象。通過這樣做，您可以防止潛在的[副作用](https://en.wikipedia.org/wiki/Side_effect_(computer_science))，並為應用程式的新功能（例如實現撤銷/重做）打開可能性，同時使調試更容易。例如，您可以記錄對狀態所做的每次更改，並保留更改的歷史記錄，以了解錯誤的來源。
## 實作受控狀態更新
在 JavaScript 中，您可以使用 [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) 創建對象的不可變版本。如果嘗試更改不可變對象，將引發異常。
狀態集中後，下一步是建立受控資料修改機制。這種作法確保狀態變更可預測且易於除錯。
✅ 您知道*淺層*和*深層*不可變對象的區別嗎？您可以在[這裡](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze)閱讀相關內容。
核心原理像空中交通管制：不允許多個函式獨立更改狀態，而是所有改動都經由單一、受控函式。此模式提供清晰監控變更時機和方式。
**不可變狀態管理：**
我們將視 `state` 物件為[*不可變物件*](https://en.wikipedia.org/wiki/Immutable_object)，意即永不直接修改它。每次變更都會建立一個新的狀態物件，內含更新後的資料。
此策略初看起來似乎比直接修改效率低，但它在除錯、測試及維持應用可預測性方面優勢明顯。
**不可變狀態管理的好處：**
| 好處 | 說明 | 影響 |
|---------|-------------|--------|
| **可預測性** | 變更僅透過受控函式發生 | 降低除錯與測試難度 |
| **歷史追蹤** | 每個狀態變更都建立新物件 | 支援復原/重做功能 |
| **避免副作用** | 無意外修改 | 預防神祕錯誤 |
| **效能優化** | 容易判斷狀態是否變更 | 支援高效介面更新 |
**JavaScript的不可變性：`Object.freeze()`**
JavaScript 提供 [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) 防止物件被修改：
```js
const immutableState = Object.freeze({ account: userData });
// 任何嘗試修改 immutableState 嘅行為都會引發錯誤
```
**解析此處發生的事：**
- **防止**直接指派或刪除屬性
- **若嘗試修改會拋出例外**
- **確保**狀態變更必須走受控函式
- **建立**狀態更新明確規範
> 💡 **深入了解**：可參考[MDN文件](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) 中淺層與深度不可變物件的差異。這對複雜狀態結構至關重要。
```mermaid
stateDiagram-v2
[*] --> StateV1: 初始狀態
StateV1 --> StateV2: updateState('account', newData)
StateV2 --> StateV3: updateState('account', anotherUpdate)
StateV3 --> StateV4: updateState('preferences', userSettings)
note right of StateV1
Object.freeze()
不變性
可除錯
end note
note right of StateV2
新對象被創建
保留之前狀態
可預測的變化
end note
```
### 任務
讓我們創建一個新的 `updateState()` 函數：
讓我們建立新的 `updateState()` 函式：
```js
function updateState(property, newData) {
@ -110,9 +360,9 @@ function updateState(property, newData) {
}
```
在此函數中，我們創建了一個新的狀態對象，並使用[*展開運算符 (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)從之前的狀態中複製數據。然後，我們使用[方括號表示法](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` 覆蓋狀態對象的特定屬性。最後，我們使用 `Object.freeze()` 鎖定對象以防止修改。目前狀態中僅存儲 `account` 屬性，但使用此方法，您可以在狀態中添加任意多的屬性。
此函式中，我們利用[*展開(...)*運算子](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)創建新的狀態物件，複製先前狀態資料，之後用[中括號符號](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` 覆寫特定屬性。最後用 `Object.freeze()` 鎖定物件防止修改。現在狀態中只有 `account` 屬性，但此設計容許您隨時新增多個狀態屬性。
我們還需要更新 `state` 的初始化，以確保初始狀態也是不可變的：
此外，我們同時更新 `state` 初始值，確保初始狀態也被凍結：
```js
let state = Object.freeze({
@ -120,21 +370,21 @@ let state = Object.freeze({
});
```
之後，更新 `register` 函數，將 `state.account = result;` 替換為：
接著，在 `register` 函式中將 `state.account = result;` 改為：
```js
updateState('account', result);
```
對 `login` 函數進行相同的操作，將 `state.account = data;` 替換為：
同理，在 `login` 函式中將 `state.account = data;` 改為：
```js
updateState('account', data);
```
現在我們可以趁機修復用戶點擊*登出*時帳戶數據未清除的問題。
我們也趁此機會修正使用者點擊*登出*時帳戶資料未清除的問題。
創建一個新的函數 `logout()`：
建立新函式 `logout()`：
```js
function logout() {
@ -143,49 +393,123 @@ function logout() {
}
```
在 `updateDashboard()` 中，將重定向 `return navigate('/login');` 替換為 `return logout();`;
在 `updateDashboard()` 中，將導向 `return navigate('/login');` 改為 `return logout()`；
嘗試註冊新帳戶，登出並再次登錄，檢查是否一切正常。
嘗試註冊新帳戶，登出再登入，確認一切功能正常。
> 提示：您可以通過在 `updateState()` 的底部添加 `console.log(state)` 並打開瀏覽器的開發工具中的控制台來查看所有狀態更改。
> 小提示：您可以在 `updateState()` 函式底部新增 `console.log(state)`，開啟瀏覽器開發者工具的控制台查看所有狀態變更。
## 持久化狀態
## 實作資料持久化
大多數網頁應用程式需要持久化數據才能正常工作。所有關鍵數據通常存儲在數據庫中，並通過伺服器 API 訪問，例如我們的用戶帳戶數據。但有時，將某些數據存儲在瀏覽器中運行的客戶端應用程式中也是有益的，這可以改善用戶體驗或提高加載性能。
先前發現的會話丟失問題需要持久化方案，讓使用者狀態在瀏覽器會話間得以保存。這使我們的應用從短暫體驗轉變為可靠且專業的工具。
當您想在瀏覽器中持久化數據時，有幾個重要問題需要問自己：
想像原子鐘即便斷電也能維持精準時間，因為它將關鍵狀態存放在非揮發性記憶。網頁應用同理，需要持久化存儲機制，以保存重要使用者資料穿越瀏覽器會話與頁面重整。
- *數據是否敏感？* 您應避免在客戶端存儲任何敏感數據，例如用戶密碼。
- *您需要保存這些數據多久？* 您是僅在當前會話中訪問這些數據，還是希望永久保存？
**資料持久化的策略性問題：**
根據您的需求，有多種方法可以在網頁應用程式中存儲信息。例如，您可以使用 URL 存儲搜索查詢，並使其可在用戶之間共享。您還可以使用[HTTP Cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies) 如果需要與伺服器共享數據，例如[身份驗證](https://en.wikipedia.org/wiki/Authentication)信息。
在實作持久化前，請考慮以下關鍵因素：
另一個選擇是使用瀏覽器提供的多種存儲數據的 API，其中有兩個特別值得注意：
| 問題 | 銀行應用情境 | 決策影響 |
|----------|-------------------|----------------|
| **資料是否敏感？** | 帳戶餘額、交易歷史 | 選擇安全的儲存方式 |
| **應該持續多久？** | 登入狀態 vs. 臨時介面設定偏好 | 選擇適當的儲存時間 |
| **伺服器需要它嗎？** | 驗證令牌 vs. 介面設定 | 判斷共享需求 |
- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)：一個[鍵值存儲](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)，允許跨不同會話持久化特定於當前網站的數據。存儲在其中的數據永不過期。
- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)：其工作方式與 `localStorage` 相同，但存儲在其中的數據在會話結束（瀏覽器關閉時）時會被清除。
**瀏覽器儲存選項：**
請注意，這兩個 API 只允許存儲[字符串](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)。如果您想存儲複雜對象，則需要使用 [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 將其序列化為 [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) 格式。
現代瀏覽器提供多種儲存機制，每種皆為不同使用情境設計：
✅ 如果您想創建一個不依賴伺服器的網頁應用程式，也可以使用 [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) 在客戶端創建數據庫。這適用於高級用例或需要存儲大量數據的情況，因為它使用起來更為複雜。
**主要儲存 API：**
### 任務
1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**：持久的[鍵值儲存](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
- **持久**保存資料於瀏覽器會話間無限期
- **可持續**瀏覽器重啟與電腦重開後依然存在
- **限制於**特定網站網域範圍
- **適合**用戶偏好設定及登入狀態
我們希望用戶在明確點擊*登出*按鈕之前保持登錄狀態，因此我們將使用 `localStorage` 存儲帳戶數據。首先，定義一個用於存儲數據的鍵。
2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**：臨時會話儲存
- 在活動會話期間**功能與 localStorage 相同**
- 瀏覽器分頁關閉時**自動清除**
- **理想用於**不需持續的暫存資料
3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**：伺服器共享儲存
- 會**自動隨每次伺服器請求發送**
- **適合**[驗證](https://en.wikipedia.org/wiki/Authentication)令牌
- **大小有限制**且可能影響效能
**資料序列化需求：**
`localStorage` 與 `sessionStorage` 僅能儲存[字串](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)：
```js
// 將物件轉換為 JSON 字串以便儲存
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));
// 檢索時將 JSON 字串解析回物件
const savedAccount = JSON.parse(localStorage.getItem('account'));
```
**了解序列化：**
- 使用 [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) **將 JavaScript 物件轉換為 JSON 字串**
- 使用 [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) **從 JSON 解析回物件**
- **自動處理**複雜的巢狀物件與陣列
- **無法處理**函式、未定義值及循環參考
> 💡 **進階選項**：針對複雜離線應用及大型資料集，考慮使用 [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)。它提供完整的客戶端資料庫，但實作較為繁複。
```mermaid
quadrantChart
title 瀏覽器儲存選項
x-axis 低複雜度 --> 高複雜度
y-axis 短期 --> 長期
quadrant-1 專業工具
quadrant-2 簡易持久性
quadrant-3 臨時儲存
quadrant-4 進階系統
localStorage: [0.3, 0.8]
sessionStorage: [0.2, 0.2]
HTTP Cookies: [0.6, 0.7]
IndexedDB: [0.9, 0.9]
Memory Variables: [0.1, 0.1]
```
### 任務：實作 localStorage 持久性
讓我們實作持久化儲存，讓使用者在未明確登出前持續保持登入。我們將使用 `localStorage` 於瀏覽器會話間儲存帳戶資料。
**步驟 1：定義儲存設定**
```js
const storageKey = 'savedAccount';
```
然後在 `updateState()` 函數的末尾添加以下行：
**此常數提供：**
- **建立**一致的儲存資料識別標誌
- **避免**儲存鍵名稱拼字錯誤
- **方便**日後需更換儲存鍵時調整
- **遵循**可維護程式碼的最佳實務
**步驟 2：新增自動持久化**
於 `updateState()` 函式結尾加入這行：
```js
localStorage.setItem(storageKey, JSON.stringify(state.account));
```
通過這樣做，用戶帳戶數據將被持久化並始終保持最新，因為我們之前已集中化了所有狀態更新。這是我們開始從之前的所有重構中受益的地方 🙂。
**解析執行流程：**
- **將**帳戶物件轉換為 JSON 字串存檔
- **以**一致的儲存鍵保存資料
- **每當狀態更新時自動執行**
- **確保**儲存資料隨時與當前狀態保持同步
由於數據已保存，我們還需要在應用程式加載時恢復它。由於我們將開始擁有更多初始化程式碼，因此創建一個新的 `init` 函數可能是一個好主意，該函數還包括之前在 `app.js` 底部的程式碼：
> 💡 **架構優勢**：由於所有狀態更新都集中在 `updateState()`，加入持久化只需一行程式碼，展現良好架構設計的威力！
**步驟 3：於應用載入還原狀態**
建立初始化函數來還原儲存資料：
```js
function init() {
@ -194,7 +518,7 @@ function init() {
updateState('account', JSON.parse(savedAccount));
}
// Our previous initialization code
// 我們之前的初始化代碼
window.onpopstate = () => updateRoute();
updateRoute();
}
@ -202,17 +526,63 @@ function init() {
init();
```
在此，我們檢索保存的數據，如果有任何數據，我們會相應地更新狀態。重要的是在更新路由*之前*執行此操作，因為在頁面更新期間可能有程式碼依賴於狀態。
**理解初始化流程：**
- **從 localStorage 讀取**先前儲存的帳戶資料（如有）
- **解析** JSON 字串回 JavaScript 物件
- **用受控更新函式**更新狀態
- **分頁載入時自動還原**使用者會話
- **於路由更新前執行**，確保狀態可用
**步驟 4：優化預設路由**
更新預設路由以善用持久化：
於 `updateRoute()`，替換：
```js
// 替換：return navigate('/login');
return navigate('/dashboard');
```
**此改動理由：**
- **有效利用**新持久化系統
- **讓**儀表板能處理驗證檢查
- **若無已保存會話，自動導向登入頁**
- **打造更流暢的用戶體驗**
**測試您的實作：**
1. 登入您的銀行應用
2. 重新整理瀏覽器頁面
3. 確認仍保持登入且在儀表板頁面
4. 關閉並重新開啟瀏覽器
5. 回到應用驗證仍持續登入
🎉 **成就解鎖**：您已成功實作持久狀態管理！您的應用現在表現如專業網頁應用。
### 🎯 教學檢查：持久化架構
我們還可以將*儀表板*頁設為應用程式的默認頁面，因為我們現在正在持久化帳戶數據。如果未找到數據，儀表板會負責重定向到*登錄*頁面。在 `updateRoute()` 中，將回退 `return navigate('/login');` 替換為 `return navigate('/dashboard');`。
**架構理解**：您已實作出平衡使用者體驗與資料管理複雜度的進階持久層。
現在登錄應用程式並嘗試刷新頁面。您應該停留在儀表板頁面。通過此更新，我們已解決所有初始問題...
**掌握重點概念**：
- **JSON 序列化**：將複雜物件轉為可儲存的字串
- **自動同步**：狀態變更自動觸發儲存
- **會話恢復**：應用可於中斷後復原用戶上下文
- **集中管理持久化**：一個更新函式處理所有儲存
## 刷新數據
**產業連結**：此持久化模式為漸進式網頁應用（PWA）、離線優先應用及現代行動網頁體驗的基礎。您正在打造生產級能力。
...但我們可能也創造了一個新問題。糟糕！
**反思問題**：若需同一設備支持多用戶帳號，您會如何修改此系統？請考慮隱私與安全性。
使用 `test` 帳戶進入儀表板，然後在終端運行以下命令以創建新交易：
## 平衡持久化與資料新鮮度
我們的持久系統成功維持使用者會話，卻帶來新挑戰：資料陳舊。當多使用者或應用修改同一伺服器資料時，當地快取資訊便會過時。
此狀況如維京航海家同時依賴存有的星圖與當前星象觀測。星圖提供穩定性，但需即時觀測來應付變化。同理，我們的應用需要持久使用者狀態及最新伺服器資料兼顧。
**🧪 發現資料新鮮度問題：**
1. 使用 `test` 帳戶登入儀表板
2. 開啟終端機執行下列指令模擬他方交易：
```sh
curl --request POST \
@ -221,15 +591,47 @@ curl --request POST \
http://localhost:5000/api/accounts/test/transactions
```
現在嘗試在瀏覽器中刷新儀表板頁面。會發生什麼？您是否看到新的交易？
由於 `localStorage` 的狀態被無限期持久化，但這也意味著在您登出應用程式並再次登錄之前，它永遠不會更新！
解決此問題的一種可能策略是每次加載儀表板時重新加載帳戶數據，以避免數據過時。
3. 在瀏覽器刷新儀表板頁面
4. 注意是否看到新的交易紀錄
**此測試示範：**
- **顯示**本地儲存可能變得「過時」
- **模擬**真實世界資料於應用外部更新
- **揭露**持久化與資料鮮度之間的衝突
**資料陳舊挑戰：**
| 問題 | 原因 | 使用者影響 |
|---------|-------|-------------|
| **資料陳舊** | localStorage 不會自動過期 | 使用者看到過時資訊 |
| **伺服器更改** | 其他應用/用戶變更相同資料 | 各平台資料不同步 |
| **快取與真實差異** | 本地快取與伺服器狀態不符 | 不佳用戶體驗與混淆 |
**解決策略：**
我們將實作「載入時刷新」方案，平衡持久化優點與資料新鮮需求。此方式維持流暢體驗同時確保資料正確。
```mermaid
sequenceDiagram
participant U as 用戶
participant A as 應用程式
participant L as 本地存儲
participant S as 伺服器
U->>A: 打開應用程式
A->>L: 載入已保存狀態
L-->>A: 返回緩存數據
A->>U: 立即顯示界面
A->>S: 獲取最新數據
S-->>A: 返回當前數據
A->>L: 更新緩存
A->>U: 用最新數據更新界面
```
### 任務：實作資料刷新系統
### 任務
建立系統自動從伺服器抓取最新資料，同時維持持久狀態管理優點。
創建一個新的函數 `updateAccountData`：
**步驟 1：建立帳戶資料更新器**
```js
async function updateAccountData() {
@ -247,9 +649,15 @@ async function updateAccountData() {
}
```
此方法檢查我們當前是否已登錄，然後從伺服器重新加載帳戶數據。
**此函式邏輯說明：**
- **檢查**用戶是否登入（state.account 是否存在）
- **無有效會話即導向登出**
- **利用現有 `getAccount()` 函式從伺服器取得新資料**
- **伺服器錯誤時優雅處理，登出無效會話**
- **使用受控更新系統更新狀態為最新**
- **觸發 `updateState()` 自動儲存 localStorage**
創建另一個名為 `refresh` 的函數：
**步驟 2：建立儀表板刷新處理器**
```js
async function refresh() {
@ -258,7 +666,15 @@ async function refresh() {
}
```
此函數更新帳戶數據，然後負責更新儀表板頁面的 HTML。這是我們需要在儀表板路由加載時調用的函數。使用以下程式碼更新路由定義：
**刷新函式實現：**
- **協調**資料刷新與介面更新流程
- **等待**新資料載入後更新顯示
- **確保**儀表板展現最即時資訊
- **保持**資料管理與介面更新分離清晰
**步驟 3：與路由系統整合**
更新路由配置以自動觸發刷新：
```js
const routes = {
@ -267,28 +683,126 @@ const routes = {
};
```
現在嘗試刷新儀表板，它應顯示更新的帳戶數據。
**整合方式說明：**
- **每次儀表板路由載入時執行刷新**
- **確保用戶瀏覽儀表板時看到最新資料**
- **保留既有路由結構同時新增資料新鮮度**
- **建立路由特定初始化一致模式**
**測試您的資料刷新系統：**
1. 登入您的銀行應用
2. 執行之前的 curl 指令建立新交易
3. 重新整理儀表板或離開再回來
4. 確認新交易立刻出現
🎉 **完美平衡**：您的應用成功結合持久狀態順暢體驗與最新伺服器資料準確性！
## 📈 您的狀態管理精通時間軸
```mermaid
timeline
title 專業狀態管理旅程
section 問題識別
State Issues Diagnosis
: 識別會話丟失問題
: 理解零散的更新問題
: 認識架構需求
section 架構基礎
Centralized State Design
: 建立統一的狀態物件
: 實施受控的更新模式
: 制定不可變原則
Predictable Updates
: 精通 Object.freeze() 用法
: 構建便於調試的系統
: 建立可擴展的模式
section 持久化精通
localStorage Integration
: 處理 JSON 序列化
: 實現自動同步
: 創造會話連續性
Data Freshness Balance
: 解決陳舊性挑戰
: 建立刷新機制
: 優化效能與準確性的平衡
section 專業模式
Production-Ready Systems
: 實施錯誤處理
: 創造可維護的架構
: 遵循業界最佳實踐
Advanced Capabilities
: 準備框架整合
: 準備應對複雜狀態需求
: 實時功能的基礎
```
**🎓 畢業里程碑**：您已使用類似 Redux、Vuex 等專業狀態庫的原理，成功建構完整狀態管理系統。這些模式可從簡易應用擴展至企業級應用。
---
**🔄 下一階段能力：**
- 準備掌握狀態管理框架（Redux、Zustand、Pinia）
- 準備實作 WebSockets 實時功能
- 有能力打造離線優先漸進式網頁應用（PWA）
- 奠定狀態機與觀察者等進階模式的基礎
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
**描述：** 為銀行應用實作包含撤銷/重做功能的完整狀態管理系統。本挑戰將幫助您練習進階狀態管理概念，包括狀態歷史追蹤、不變式更新及介面同步。
**提示：** 建立強化狀態管理系統，包含：1) 一個追蹤所有過去狀態的歷史陣列，2) 可回復前一狀態的撤銷與重做功能，3) 儀表板的撤銷/重做按鈕，4) 最多保存10個歷史狀態以防資源浪費，5) 使用者登出時清理歷史紀錄。確保撤銷/重做對帳戶餘額變更生效，並可持久於瀏覽器刷新後。
更多資訊請見[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰：儲存優化
您已有效處理使用者會話、資料刷新與狀態管理。然而，請思考目前方法是否在儲存效率與功能間達到最佳平衡。
如同棋手分辨必需子力與可犧牲兵卒，有效狀態管理需識別哪些資料必須持久保存，哪些應由伺服器保持即時更新。
**優化分析：**
評估您的 localStorage 實作並考慮以下策略問題：
- 維持用戶認證需最少的資訊是什麼？
- 哪些資料變動頻率高且本地快取效益低？
- 如何優化儲存提升效能同時不損使用體驗？
此類架構分析展現經驗豐富開發者同時考量功能與效率的能力。
**實作策略：**
- **鑑別**必須持久保存的核心資料（可能只需用戶身份標識）
- **修改** localStorage 實作只存儲關鍵會話資料
- **確保**儀表板訪問時總從伺服器載入最新資料
- **測試**優化方案同時維持相同使用體驗
## 🚀 挑戰
**進階考量：**
- **比較**保存完整帳戶資料與僅保存認證令牌的利弊
- **紀錄**您的決策與原因供團隊未來參考
現在我們每次加載儀表板時都會重新加載帳戶數據，您認為我們是否仍然需要持久化*所有帳戶*數據？
此挑戰助您養成考慮用戶體驗與應用效率的專業開發者思維。請慢慢嘗試不同方案！
嘗試一起合作更改 `localStorage` 中保存和加載的內容，以僅包含應用程式正常運行所需的絕對必要數據。
## 講義結束測驗
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/48)
[講義結束測驗](https://ff-quizzes.netlify.app/web/quiz/48)
## 作業
[實現「新增交易」對話框](assignment.md)
[實作「新增交易」對話框](assignment.md)
以下是完成作業後的範例結果：
以下為完成作業後的示範結果：
![截圖顯示範例「新增交易」對話框](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.hk.png)
![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f1.hk.png)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們盡力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威版本。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

165
translations/hk/7-bank-project/4-state-management/assignment.md
Unescape View File

@ -1,37 +1,164 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f23a868536c07da991b1d4e773161e25",
"translation_date": "2025-08-24T00:15:11+00:00",
"original_hash": "50a7783473b39a2e0f133e271a102231",
"translation_date": "2026-01-06T12:57:07+00:00",
"source_file": "7-bank-project/4-state-management/assignment.md",
"language_code": "hk"
}
-->
# 實現「新增交易」對話框
# 實作「新增交易」對話框
## 指引
## 概述
我們的銀行應用程式仍然缺少一個重要功能：輸入新交易的可能性。
運用你在前四節課中學到的所有知識，實現一個「新增交易」對話框：
你的銀行應用程式現在已有穩固的狀態管理和資料持久化功能，但缺少一個真正銀行應用需要的重要功能：讓使用者新增自己的交易。在這個作業中，你將實作一個完整的「新增交易」對話框，並與你現有的狀態管理系統無縫整合。
- 在儀表板頁面新增一個「新增交易」按鈕
- 可以選擇建立一個帶有 HTML 模板的新頁面，或者使用 JavaScript 來顯示/隱藏對話框的 HTML，而不離開儀表板頁面（你可以使用 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 屬性，或者 CSS 類別來實現）
- 確保你處理了[鍵盤和螢幕閱讀器的無障礙性](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
- 實現一個 HTML 表單來接收輸入數據
- 從表單數據創建 JSON 數據並發送到 API
- 使用新數據更新儀表板頁面
本作業結合了你在四堂銀行課程中學到的所有內容：HTML 模板、表單處理、API 整合和狀態管理。
查看 [伺服器 API 規範](../api/README.md) 以了解需要調用的 API 以及預期的 JSON 格式。
## 學習目標
以下是完成作業後的範例結果：
完成此作業後，你將能夠：
- **建立** 使用者友善的對話框介面來輸入資料
- **實作** 支援鍵盤和螢幕閱讀器的無障礙表單設計
- **整合** 新功能至現有的狀態管理系統
- **練習** API 通訊與錯誤處理
- **應用** 現代網頁開發模式於實際功能
![顯示「新增交易」對話框範例的截圖](../../../../7-bank-project/4-state-management/images/dialog.png)
## 指示
### 步驟 1：新增交易按鈕
**建立** 一個「新增交易」按鈕於你的控制台頁面，使用者可以輕易找到並存取。
**需求：**
- **將** 按鈕放在控制台中合適的位置
- **使用** 明確且行動導向的按鈕文字
- **套用** 與現有介面設計一致的樣式
- **確保** 按鈕可由鍵盤操作存取
### 步驟 2：對話框實作
從以下兩種方法中選擇一種來實作你的對話框：
**選項 A：獨立頁面**
- **建立** 新的 HTML 模板用於交易表單
- **新增** 一個路由至你的路由系統
- **實作** 導航至表單頁面與返回功能
**選項 B：模態對話框（建議）**
- **使用** JavaScript 於控制台內顯示/隱藏對話框，不離開控制台頁面
- **使用** [`hidden` 屬性](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 或 CSS 類別實作
- **打造** 流暢的使用體驗，包含適當的焦點管理
### 步驟 3：無障礙實作
**確保** 對話框符合[模態對話框無障礙標準](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)：
**鍵盤導覽：**
- **支援** 使用 Escape 鍵關閉對話框
- **將** 焦點鎖定於對話框內開啟狀態
- **關閉後** 將焦點回復至觸發按鈕
**螢幕閱讀器支援：**
- **添加** 適切的 ARIA 標籤與角色
- **對** 對話框開啟/關閉做出螢幕閱讀器公告
- **提供** 清楚的表單欄位標籤與錯誤訊息
### 步驟 4：表單建立
**設計** HTML 表單以收集交易資料：
**必填欄位：**
- **日期**：交易發生時間
- **描述**：交易用途說明
- **金額**：交易金額（正數為收入，負數為支出）
**表單特色：**
- **於送出前** 驗證使用者輸入
- **提供** 明確的錯誤提示
- **包含** 有助於輸入的 placeholder 及標籤
- **樣式** 與你現有的設計一致
### 步驟 5：API 整合
**將** 你的表單與後端 API 連接：
**實作步驟：**
- **參考** [伺服器 API 規格](../api/README.md) 確認正確的端點與資料格式
- **從表單輸入產生** JSON 資料
- **利用適當的錯誤處理** 發送資料至 API
- **向使用者顯示** 成功或失敗訊息
- **優雅處理** 網路錯誤問題
### 步驟 6：狀態管理整合
**更新** 你的控制台以加入新交易：
**整合需求：**
- **新增交易成功後** 重新整理帳戶資料
- **更新** 控制台顯示，不需重新載入頁面
- **確保** 新交易即時出現
- **維持** 整個流程中的狀態一致性
## 技術規格
**API 端點詳情：**
參考 [伺服器 API 文件](../api/README.md) 了解：
- 交易資料所需 JSON 格式
- HTTP 方法與端點 URL
- 預期回應格式
- 錯誤回應處理
**預期結果：**
完成作業後，你的銀行應用應具備完整且專業的「新增交易」功能：
![顯示「新增交易」對話框範例的截圖](../../../../translated_images/dialog.93bba104afeb79f1.hk.png)
## 測試你的實作
**功能測試：**
1. **確認** 「新增交易」按鈕明顯且可存取
2. **測試** 對話框能正確開啟與關閉
3. **確認** 表單驗證對所有必填欄位有效
4. **檢查** 成功新增的交易能立即於控制台顯示
5. **確保** 錯誤處理對無效資料及網路問題有效
**無障礙測試：**
1. **僅使用鍵盤** 執行整個操作流程
2. **使用螢幕閱讀器測試** 確保適當公告
3. **驗證** 焦點管理運作正常
4. **檢查** 全部表單元件有適當標籤
## 評分標準
| 評分標準 | 優秀 | 合格 | 需要改進 |
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
| | 完全按照課堂中學到的最佳實踐實現了新增交易功能。 | 實現了新增交易功能，但未完全按照課堂中學到的最佳實踐，或者僅部分功能正常運作。 | 新增交易功能完全無法運作。 |
| 評分標準 | 優異 | 適當 | 需要改進 |
| -------- | --------- | -------- | ----------------- |
| **功能性** | 新增交易功能完美運作，使用體驗優秀，符合所有課程最佳實務 | 新增交易功能正常，可能未完全遵循部分最佳實務或有少許使用障礙 | 新增交易功能部分運作，或存在嚴重使用障礙 |
| **程式碼品質** | 程式碼條理清晰，遵循既有設計模式，具備完善錯誤處理，且與現有狀態管理無縫整合 | 程式碼可運作，但可能有組織不佳或部分與現有程式不一致 | 程式碼結構問題嚴重，或無法良好整合既有系統 |
| **無障礙** | 完整支援鍵盤導覽、螢幕閱讀器，符合 WCAG 指南，並具優良焦點管理 | 基本無障礙功能有實作，但可能缺少部分鍵盤導覽或螢幕閱讀器支援 | 幾乎無或未實作無障礙功能 |
| **使用者體驗** | 介面直覺流暢，反饋清晰，互動順暢且具專業外觀 | 使用體驗良好，反饋或視覺設計有少許可改善之處 | 使用體驗差，介面混亂或缺乏反饋 |
## 額外挑戰（選做）
完成基本需求後，可考慮以下增強功能：
**強化功能：**
- **新增** 交易類別（餐飲、交通、娛樂等）
- **實作** 即時反饋的輸入驗證
- **為進階使用者建立** 鍵盤快捷鍵
- **增加** 交易編輯與刪除功能
**進階整合：**
- **實作** 新增交易的復原功能
- **新增** 由 CSV 檔案匯入大量交易功能
- **建立** 交易搜尋與篩選功能
- **實作** 資料匯出功能
這些進階功能將幫助你練習更高階的網頁開發觀念，打造更完整的銀行應用程式！
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

701
translations/hk/8-code-editor/1-using-a-code-editor/README.md
Unescape View File

@ -1,196 +1,639 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
"translation_date": "2025-10-03T08:55:48+00:00",
"original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
"translation_date": "2026-01-06T12:23:51+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/README.md",
"language_code": "hk"
}
-->
***
# 使用代碼編輯器：掌握 [VSCode.dev](https://vscode.dev)
**歡迎！**
本課程將帶你從基礎到進階使用 [VSCode.dev](https://vscode.dev)——一個功能強大的基於網頁的代碼編輯器。你將學習如何自信地編輯代碼、管理項目、追蹤更改、安裝擴展以及像專業人士一樣進行協作——全部都可以直接在瀏覽器中完成，無需安裝。
***
## 學習目標
完成本課程後，你將能夠：
- 高效地在任何項目上使用代碼編輯器，隨時隨地
- 使用內建的版本控制無縫追蹤工作
- 通過編輯器自定義和擴展提升你的開發工作流程
***
## 先決條件
開始之前，請**註冊一個免費的 [GitHub](https://github.com) 帳戶**，它可以幫助你管理代碼倉庫並與全球開發者協作。如果你還沒有帳戶，[點擊這裡創建一個](https://github.com/)。
***
## 為什麼使用基於網頁的代碼編輯器？
像 VSCode.dev 這樣的**代碼編輯器**是你編寫、編輯和管理代碼的指揮中心。它擁有直觀的界面、豐富的功能，並且可以直接通過瀏覽器訪問，你可以：
- 在任何設備上編輯項目
- 避免安裝的麻煩
- 即時協作和貢獻
一旦熟悉了 VSCode.dev，你就能隨時隨地應對各種編碼任務。
***
## 開始使用 VSCode.dev
打開 **[VSCode.dev](https://vscode.dev)**——無需安裝，無需下載。使用 GitHub 登錄可以解鎖完整功能，包括同步你的設置、擴展和倉庫。如果系統提示，請連接你的 GitHub 帳戶。
加載後，你的工作區將如下所示：
![Default VSCode.dev](../../../../8-code-editor/images/default-vscode-dev)
VSCode.dev 的界面分為三個核心部分：
- **活動欄：** 包括 🔎（搜索）、⚙️（設置）、文件、源代碼控制等圖標。
- **側邊欄：** 根據選擇的活動欄圖標改變上下文（默認為 *Explorer*，顯示文件）。
- **編輯器/代碼區域：** 右側最大部分——你實際編輯和查看代碼的地方。
# 使用程式碼編輯器：精通 VSCode.dev
記得《駭客任務》中尼歐必須連接到龐大的電腦終端來進入數碼世界嗎？現今的網頁開發工具則完全相反——強大功能，可隨時隨地使用。VSCode.dev 是一款基於瀏覽器的程式碼編輯器，將專業的開發工具帶到任何有網絡連接的裝置上。
就像印刷機讓書籍普及到每個人，而不只是修道院的書吏一樣，VSCode.dev 讓編碼變得民主化。你可以在圖書館電腦、學校實驗室或任何有瀏覽器可用的地方工作。無需安裝，沒有「我需要特定設置」的限制。
完成本課程後，你將會了解如何操作 VSCode.dev、直接在瀏覽器中打開 GitHub 倉庫，以及使用 Git 進行版本控制——這些都是專業開發者每日依賴的技能。
## ⚡ 下一 5 分鐘你可以做什麼
**忙碌開發者的快速入門路徑**
```mermaid
flowchart LR
A[⚡ 5 分鐘] --> B[訪問 vscode.dev]
B --> C[連接 GitHub 帳戶]
C --> D[打開任何儲存庫]
D --> E[即時開始編輯]
```
- **第 1 分鐘**：前往 [vscode.dev](https://vscode.dev) — 無需安裝
- **第 2 分鐘**：使用 GitHub 登入以連接你的倉庫
- **第 3 分鐘**：試試網址技巧：將任何倉庫的 `github.com` 改成 `vscode.dev/github`
- **第 4 分鐘**：建立新檔案，觀看語法高亮自動啟用
- **第 5 分鐘**：透過「原始碼控制」面板修改並提交變更
**快速測試網址**：
```
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
```
**為什麼這很重要**：5 分鐘內，你將體驗到隨時隨地使用專業工具編碼的自由。這是開發的未來——可及、強大又即時。
## 🗺️ 你的雲端開發學習旅程
```mermaid
journey
title 從本地設置到雲端開發高手之路
section 了解平台
探索基於網頁的編輯：4: You
連接至 GitHub 生態系統：6: You
精通介面導航：7: You
section 檔案管理技巧
建立及組織檔案：5: You
使用語法高亮編輯：7: You
導覽專案結構：8: You
section 版本控制精通
了解 Git 整合：6: You
練習提交工作流程：8: You
掌握協作模式：9: You
section 專業自訂化
安裝強大擴充功能：7: You
設定開發環境：8: You
建構個人工作流程：9: You
```
**你的旅程目標**：完成本課後，你將掌握一個專業的雲端開發環境，能在任何裝置上工作，使用與大型科技公司開發者相同的工具進行編碼。
## 你將學到什麼
在一起學習後，你將能：
- 像熟悉家一樣導航 VSCode.dev —— 不迷路地找到所需功能
- 直接在瀏覽器中打開任意 GitHub 倉庫，立即開始編輯（非常神奇！）
- 使用 Git 跟蹤變更，像專家一樣保存進度
- 透過擴充功能強化編輯器，使編碼更快樂、更高效
- 自信地建立及組織專案檔案
## 你需要準備什麼
需求很簡單：
- 一個免費的 [GitHub 帳戶](https://github.com)（需要時我們會指導如何註冊）
- 對網頁瀏覽器有基本認識
- 《GitHub 基本概念》課程提供有用背景，但非必須
> 💡 **GitHub 新手？** 註冊帳戶免費且僅需幾分鐘。就像圖書卡讓你能借閱全球書籍，GitHub 帳戶讓你接觸到網路上各種程式碼倉庫。
## 🧠 雲端開發生態系統總覽
```mermaid
mindmap
root((VSCode.dev 精通))
Platform Benefits
Accessibility
裝置獨立
無需安裝
即時更新
通用存取
Integration
GitHub 連接
儲存庫同步
設定持久化
協作準備
Development Workflow
File Management
專案結構
語法高亮
多標籤編輯
自動儲存功能
Version Control
Git 整合
提交流程
分支管理
變更追蹤
Customization Power
Extensions Ecosystem
生產力工具
語言支援
主題選項
自訂快捷鍵
Environment Setup
個人偏好
工作區設定
工具整合
工作流程優化
Professional Skills
Industry Standards
版本控制
程式碼品質
協作
文件撰寫
Career Readiness
遠端工作
雲端開發
團隊專案
開源
```
**核心理念**：雲端開發環境代表了編碼的未來——提供專業級工具，可及、協作並且不受平台限制。
## 為什麼 web-based 程式碼編輯器很重要
在網際網路出現前，不同大學的科學家難以共享研究。1960年代，ARPANET 的出現連接了不同地點的電腦。基於網頁的程式碼編輯器遵循同一原則——無論身處何地或使用何種裝置，都能使用強大工具。
程式碼編輯器就像你的開發工作空間，讓你撰寫、編輯並組織程式碼檔案。專業編輯器不同於簡單文字編輯器，提供語法高亮、錯誤偵測和專案管理功能。
VSCode.dev 將這些功能帶入瀏覽器：
**基於 Web 編輯的優勢：**
| 功能 | 描述 | 實際好處 |
|---------|-------------|----------|
| **跨平台獨立** | 任何有瀏覽器的裝置均可執行 | 在不同電腦間無縫工作 |
| **免安裝** | 透過網址訪問 | 避免軟體安裝限制 |
| **自動更新** | 永遠使用最新版本 | 無需手動更新即可使用新功能 |
| **倉庫整合** | 直接連接 GitHub | 不需本地檔案管理即可編輯程式碼 |
**實務意義：**
- 不同環境間工作連續性
- 不受作業系統限制界面一致
- 即時協作能力
- 降低本地儲存需求
## 探索 VSCode.dev
正如瑪麗·居里實驗室內雖空間簡單卻配備先進設備，VSCode.dev 也將專業開發工具濃縮在瀏覽器介面中。這款 Web 應用提供與桌面程式碼編輯器相同核心功能。
首先在瀏覽器中前往 [vscode.dev](https://vscode.dev)。介面無需下載或系統安裝——雲端運算原理的直接應用。
### 連接你的 GitHub 帳戶
如同亞歷山大·格雷厄姆·貝爾電話連接遠方，連結 GitHub 帳戶將 VSCode.dev 與你的程式碼倉庫橋接。當系統提示使用 GitHub 登入時，建議接受連接。
**GitHub 整合提供：**
- 在編輯器內直接存取你的倉庫
- 跨裝置同步設定與擴充功能
- 流暢的保存到 GitHub 工作流程
- 個人化開發環境
### 認識你的新工作區
一切載入後，你將看到一個簡潔美觀的工作區，設計來幫助你專注於重要的事——你的程式碼！
![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.hk.png)
**這是你的區域導覽：**
- **活動欄**（左側條）：主導航含資源管理器 📁、搜尋 🔍、原始碼控制 🌿、擴充功能 🧩、設定 ⚙️
- **側邊欄**（旁邊面板）：根據你選擇的功能顯示相關資訊
- **編輯區域**（中間大空間）：魔法所在——你的主要寫碼區域
**花點時間探索：**
- 按一下活動欄圖示，看看各個功能
- 注意側邊欄如何根據選擇更新資訊——相當酷吧？
- 資源管理器 (📁) 可能是你主要使用的地方，好好熟悉它
```mermaid
flowchart TB
subgraph "VSCode.dev 介面架構"
A[活動列] --> B[檔案總管 📁]
A --> C[搜尋 🔍]
A --> D[原始碼管理 🌿]
A --> E[擴充功能 🧩]
A --> F[設定 ⚙️]
B --> G[檔案樹]
C --> H[尋找與取代]
D --> I[Git 狀態]
E --> J[擴充功能市集]
F --> K[設定]
L[側邊欄] --> M[內容面板]
N[編輯區域] --> O[程式碼檔案]
P[終端機/輸出] --> Q[命令列]
end
```
## 打開 GitHub 倉庫
點擊圖標探索功能，但記得返回 _Explorer_ 保持位置。
在網路出現前，研究者必須親赴圖書館查閱資料。GitHub 倉庫也類似，是遠端儲存的程式碼集合。VSCode.dev 省去了將倉庫下載到本地的傳統步驟即可編輯。
***
這項功能可以讓你即時訪問任何公開倉庫，進行查看、編輯或貢獻。以下是兩種打開倉庫的方法：
## 打開 GitHub 倉庫
### 方法一：點擊操作法
### 方法一：通過編輯器
當你剛開始用 VSCode.dev，想打開特定倉庫時，這是簡單且適合新手的方式：
1. 打開 [VSCode.dev](https://vscode.dev)。點擊 **"Open Remote Repository"**。
**操作流程：**
![Open remote repository](../../../../8-code-editor/images/open-remote-repository)
1. 如果還沒在，先前往 [vscode.dev](https://vscode.dev)
2. 在歡迎頁尋找「Open Remote Repository」按鈕並點擊
或者使用 _命令面板_（Ctrl-Shift-P，Mac 上為 Cmd-Shift-P）。
![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.hk.png)
![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.hk.png)
3. 貼上任何 GitHub 倉庫網址（試試這個：`https://github.com/microsoft/Web-Dev-For-Beginners`）
4. 按 Enter，見證魔法發生！
- 選擇該選項。
- 粘貼你的 GitHub 倉庫 URL（例如 `https://github.com/microsoft/Web-Dev-For-Beginners`），然後按 Enter。
**進階技巧 - 指令面板快捷鍵：**
如果成功，你將看到整個項目加載並準備好進行編輯！
想感受成為編碼魔法師的感覺？試試這個鍵盤快捷鍵：Ctrl+Shift+P（Mac 上為 Cmd+Shift+P），開啟指令面板：
***
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.hk.png)
### 方法二：通過 URL 快速打開
**指令面板就像你所有操作的搜尋引擎：**
- 輸入「open remote」立刻找到開啟遠端倉庫功能
- 記住你最近開啟過的倉庫（超方便！）
- 習慣後會覺得速度快得驚人
- 基本上就是 VSCode.dev 的「嘿 Siri，但用於編碼」
將任何 GitHub 倉庫 URL 替換 `github.com` 為 `vscode.dev/github`，即可直接在 VSCode.dev 中打開。
例如：
### 方法二：網址改寫技巧
- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`
就像 HTTP 和 HTTPS 使用不同協議但域名結構相同，VSCode.dev 使用的網址模式也模擬 GitHub 的系統。任何 GitHub 倉庫網址都可以修改成直接用 VSCode.dev 打開。
此功能能快速訪問任何項目。
**網址轉換格式：**
***
| 倉庫類別 | GitHub 網址 | VSCode.dev 網址 |
|----------------|---------------------|----------------|
| **公開倉庫** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
| **個人專案** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
| **任何可訪問倉庫** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
## 編輯項目中的文件
**使用方法：**
- 將 `github.com` 替換成 `vscode.dev/github`
- 其他 URL 部分保持不變
- 適用於任何公開可訪問倉庫
- 立刻進入編輯狀態
倉庫打開後，你可以：
> 💡 **改變人生的技巧**：將你最愛倉庫的 VSCode.dev 版加入書籤。我有「編輯個人作品集」跟「修正文檔」這類書籤，點開就直達編輯模式！
### 1. **創建新文件**
- 在 *Explorer* 側邊欄中，導航到你想要的文件夾或使用根目錄。
- 點擊 _‘New file ...’_ 圖標。
- 命名你的文件，按 **Enter**，文件會立即出現。
**該用哪種方法？**
- **介面法**：適合探索或忘記準確倉庫名稱時用
- **網址技巧**：知道確切位置時快速上手
![Create a new file](../../../../8-code-editor/images/create-new-file)
### 🎯 教學檢視：雲端開發存取
### 2. **編輯和保存文件**
**停下來想想**：你剛學會兩種透過瀏覽器存取程式碼倉庫的方法，這代表了開發工作方式的根本改變。
- 點擊 *Explorer* 中的文件以在代碼區域中打開。
- 根據需要進行更改。
- VSCode.dev 會自動保存你的更改，但你也可以按 Ctrl+S 手動保存。
**快速自我測試：**
- 你能說明為什麼 Web 編輯免除了傳統「開發環境設置」嗎？
- 網址改寫技巧比本地 git 克隆有什麼好處？
- 這種方法如何改變你對開源專案貢獻的可能性？
![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.hk.png)
**現實連結**：GitHub、GitLab與Replit等大型公司打造的開發平台皆基於這些雲端優先原則。你正在學習全球專業開發團隊使用的工作流程。
### 3. **使用版本控制追蹤和提交更改**
**挑戰題**：雲端開發如何改變學校的程式設計教學？試想裝置需求、軟體管理與協作可能性。
VSCode.dev 集成了 **Git** 版本控制！
## 使用檔案與專案
- 點擊 _'Source Control'_ 圖標查看所有更改。
- `Changes` 文件夾中的文件顯示新增（綠色）和刪除（紅色）。
![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.hk.png)
現在你已經打開一個倉庫，開始建構吧！VSCode.dev 為你提供建立、編輯及組織程式碼檔案所需一切。把它想成你的數位工作坊——所有工具盡在你手旁。
- 點擊文件旁的 `+` 準備提交更改。
- 點擊撤銷圖標 **丟棄** 不需要的更改。
- 輸入清晰的提交信息，然後點擊勾號提交並推送。
讓我們深入介紹那些將佔你大部分編碼流程的日常任務。
要返回 GitHub 倉庫，選擇左上角的漢堡菜單。
### 建立新檔案
![Stage & commit changes](../../../../8-code-editor/images/edit-vscode.dev)
就像建築師辦公室整理藍圖一樣，VSCode.dev 中檔案建立有條理。系統支援所有標準網頁開發檔案類型。
***
**建立檔案流程：**
## 使用擴展提升功能
1. 在資源管理器側邊欄中導航到目標資料夾
2. 將滑鼠移到資料夾名稱旁，會出現「新檔案」圖示（📄+）
3. 輸入包含正確副檔名的檔名（如 `style.css`、`script.js`、`index.html`）
4. 按 Enter 建立檔案
擴展可以為 VSCode.dev 添加語言支持、主題、調試工具和生產力工具——讓你的編碼生活更輕鬆、更有趣。
![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.hk.png)
### 瀏覽和管理擴展
**命名規範：**
- 使用描述性名稱以表明檔案用途
- 包含副檔名以啟用正確語法高亮
- 專案中保持命名一致
- 使用小寫字母及連字號，避免空格
- 點擊活動欄上的 **Extensions 圖標**。
- 在 _'Search Extensions in Marketplace'_ 框中搜索擴展。
### 編輯與保存檔案
![Extension details](../../../../8-code-editor/images/extension-details)
真正的樂趣開始！VSCode.dev 編輯器充滿貼心功能，讓編碼體驗流暢直覺。就像有一位超棒的寫作助手，但專門為程式碼設計。
- **已安裝：** 所有你添加的擴展
- **熱門：** 行業最受歡迎的擴展
- **推薦：** 根據你的工作流程量身定制
**你的編輯流程：**
![View extensions](
1. 點擊資源管理器中的任意檔案以在主區域打開
2. 開始輸入，觀看 VSCode.dev 為你提供顏色標示、建議及錯誤提示
3. 用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存工作——但它也會自動保存！
![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.hk.png)
***
**編碼時有趣的事情：**
- 程式碼會被漂亮地著色，閱讀方便
- VSCode.dev 會根據你的輸入做自動補全（比自動更正還智能）
- 在你保存前就能抓到錯字和錯誤
- 可同時打開多個檔案標籤，像瀏覽器分頁一樣
- 背景自動保存所有變更
### 1. **安裝擴展**
> ⚠️ **快速提示**：雖然自動保存可靠，但養成按 Ctrl+S 或 Cmd+S 的習慣不錯。這能立刻保存並觸發額外的錯誤檢查功能。
- 在搜索框中輸入擴展名稱，點擊它，並在編輯器中查看詳細信息。
- 點擊側邊欄或主代碼區域中的 **藍色安裝按鈕**。
### 透過 Git 進行版本控制
![Install extensions](../../../../8-code-editor/images/install-extension)
就像考古學家詳細記錄挖掘層次，Git 跟蹤你程式碼的歷史變化。它保存專案歷程，必要時可回溯舊版本。VSCode.dev 整合了 Git 功能。
### 2. **自定義擴展**
**原始碼控制介面：**
- 找到你已安裝的擴展。
- 點擊 **齒輪圖標** → 選擇 _Extension Settings_，根據喜好微調行為。
1. 透過活動欄中的 🌿 圖示打開原始碼控制面板
2. 已修改檔案會出現在「Changes」區域
3. 顏色標示變更類型：綠色代表新增，紅色代表刪除
![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.hk.png)
**保存工作（提交工作流程）：**
```mermaid
flowchart TD
A[對檔案進行更改] --> B[在源代碼控制中查看更改]
B --> C[點擊 + 將更改加入暫存區]
C --> D[撰寫描述性提交訊息]
D --> E[點擊勾選標記提交]
E --> F[將更改推送到 GitHub]
```
```mermaid
stateDiagram-v2
[*] --> Modified: 編輯檔案
Modified --> Staged: 按 + 來暫存
Staged --> Modified: 按 - 來取消暫存
Staged --> Committed: 新增訊息並提交
Committed --> [*]: 同步至 GitHub
state Committed {
[*] --> LocalCommit
LocalCommit --> RemotePush: 自動同步
}
```
**步驟指引：**
- 點擊檔案旁 "+" 圖示，將想要保存的檔案「暫存」起來
- 仔細檢查你對所有已暫存更改是否滿意
- 寫一段簡短的說明解釋你做了什麼（這就是你的「提交訊息」）
- 點擊勾選按鈕將所有內容保存至 GitHub
- 如果你改變主意，撤銷圖示允許你放棄更改
**撰寫良好提交訊息（比你想像的容易！）：**
- 只需描述你做了什麼，例如「新增聯絡表單」或「修正壞掉的導覽」
- 保持簡短有力 – 想像成推文長度，而非論文
- 開頭使用動作動詞如「新增」、「修正」、「更新」或「移除」
- **良好範例**：「新增響應式導覽選單」、「修正行動版版面問題」、「更新色彩以改善可及性」
> 💡 **快速導航提示**：使用左上角的漢堡選單 (☰) 快速返回你的 GitHub 倉庫，並查看你線上提交的更改。這就像你編輯環境與 GitHub 項目主頁之間的橋樑！
## 透過擴充功能強化功能
就像工匠的工作坊擁有各種專用工具一樣，VSCode.dev 也可以藉由擴充功能來客製化，增添特定的能力。這些由社群開發的外掛解決常見的開發需求，例如程式碼格式化、即時預覽和強化的 Git 整合。
擴充功能市集提供成千上萬個由全球開發者創建的免費工具。每個擴充功能皆針對特定工作流程挑戰提供解決方案，讓你建立符合個人需求和偏好的專屬開發環境。
```mermaid
mindmap
root((擴充生態系統))
Essential Categories
Productivity
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Code Quality
Prettier
ESLint
Spell Checker
Error Lens
Language Support
HTML CSS Support
JavaScript ES6
Python Extension
Markdown Preview
Themes & UI
Dark+ Modern
Material Icon Theme
Peacock
Rainbow Brackets
Discovery Methods
Popular Rankings
Download Counts
User Ratings
Recent Updates
Community Reviews
Recommendations
Workspace Suggestions
Language-based
Workflow-specific
Team Standards
```
### 尋找適合你的擴充功能
擴充功能市集結構清晰，所以你不會迷失，輕鬆找到所需。它設計用於幫助你探索特定工具，以及你甚至不知道存在的酷炫東西！
**進入市集的方法：**
1. 點擊活動列中的擴充功能圖示 (🧩)
2. 瀏覽或搜尋特定項目
3. 點擊任何看起來有趣的項目以了解更多
![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.hk.png)
**你會看到的內容：**
| 區塊 | 內容 | 為何有用 |
|----------|---------|----------|
| **已安裝** | 你已安裝的擴充功能 | 你的個人程式工具箱 |
| **熱門** | 大眾最愛 | 多數開發者推薦的 |
| **推薦** | 專案的智慧建議 | VSCode.dev 的貼心推薦 |
**讓瀏覽更簡易的原因：**
- 每個擴充功能會顯示評分、下載數及用戶評論
- 有截圖和清晰的功能說明
- 清楚標記相容性資訊
- 類似擴充會被建議，方便比較選擇
### 安裝擴充功能（超簡單！）
為編輯器新增功能只需點擊按鈕。擴充功能幾秒鐘內完成安裝並立即生效—不需重新啟動，也不用等。
**你需要做的步驟：**
1. 搜尋你想要的功能（試試搜尋 "live server" 或 "prettier"）
2. 點擊看起來不錯的擴充功能，查看詳情
3. 閱讀功能說明並確認評分
4. 按下藍色的「安裝」按鈕，搞定！
![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
**幕後發生的事：**
- 擴充功能會自動下載並完成設定
- 新功能立刻在介面中出現
- 立即開始運作（真的這麼快！）
- 如果你已登入，擴充還會同步到所有裝置
**建議初學時安裝的擴充功能：**
- **Live Server**：你編碼時網站會即時更新（超神奇！）
- **Prettier**：自動讓你的程式碼美觀且專業
- **Auto Rename Tag**：改一個 HTML 標籤，對應的也會同步更新
- **Bracket Pair Colorizer**：用顏色標記括號，避免搞混
- **GitLens**：強化 Git 功能，提供豐富資訊
### 自訂你的擴充功能
大多數擴充功能都有設定可以調整，讓它們符合你的使用習慣。就像調整汽車座椅和後視鏡，每個人的偏好都不同！
**調整擴充功能設定：**
1. 在擴充功能面板找到已安裝的擴充
2. 點選名稱旁邊的小齒輪圖示 (⚙️)
3. 從下拉選單中選「擴充功能設定」
4. 依照工作流程調整到自己喜歡的狀態
![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.hk.png)
**常見調整項目：**
- 程式碼格式設定（tab 或空白鍵、最大行長等）
- 哪些鍵盤快速鍵觸發不同動作
- 擴充作用的檔案類型
- 開啟或關閉特定功能，保持界面簡潔
### 管理你的擴充功能
當你發現更多好用擴充，會希望保持擴充清單整齊且順暢運作。VSCode.dev 讓這一切管理起來非常方便。
**你可以進行的操作：**
| 操作 | 何時有用 | 小技巧 |
|--------|---------|----------|
| **停用** | 測試是否是擴充功能導致問題 | 如果會想再用，停用比刪除好 |
| **解除安裝** | 完全移除不需要的擴充功能 | 保持環境乾淨且效率 |
| **更新** | 獲取最新功能和錯誤修正 | 通常會自動，但值得確認 |
**我的管理方式：**
- 每隔幾個月檢視已安裝擴充，移除不再用的
- 維持擴充最新版，確保功能與安全
- 如果覺得速度變慢，暫時禁用擴充來測試
- 大型更新時會閱讀更新說明，常有新功能！
> ⚠️ **效能提示**：擴充功能很棒，但太多會拖慢速度。專注在真正提升你工作效率的，不用怕刪除從未使用過的。
### 🎯 教學檢核：開發環境客製化
**架構認知**：你已學會使用社群開發的擴充，打造專業開發環境。這就像企業團隊建立標準化工具鏈。
**掌握的核心概念**：
- **擴充發掘**：尋找解決特定開發需求的工具
- **環境設定**：依個人或團隊偏好調整工具
- **效能最佳化**：在功能與系統效能間取得平衡
- **社群協作**：利用全球開發者社群的創作
**業界連結**：擴充生態系是 VS Code、Chrome DevTools 及現代 IDE 等主要開發平台的動力。理解如何評估、安裝和設定擴充是專業開發流程必備技能。
**反思問題**：你會如何為 10 人開發團隊設定標準化開發環境？請考慮一致性、效能和個人偏好。
## 📈 你的雲端開發精熟時間軸
```mermaid
timeline
title 專業雲端開發之旅
section 平台基礎
雲端開發理解
: 精通基於網頁的編輯概念
: 連接 GitHub 整合模式
: 操控專業介面
section 工作流程精通
檔案與專案管理
: 建立有組織的專案結構
: 精通語法高亮的好處
: 處理多檔案編輯工作流程
版本控制整合
: 理解 Git 視覺化
: 練習提交訊息標準
: 精通變更追蹤工作流程
section 環境自訂
擴充生態系統
: 發掘生產力擴充功能
: 配置開發喜好設定
: 優化效能與功能
專業設定
: 建立一致的工作流程
: 創建可重複使用的配置
: 制定團隊標準
section 產業準備
雲端優先開發
: 精通遠端開發作法
: 理解協作工作流程
: 建立平台獨立技能
專業實務
: 遵循產業標準
: 創建可維護的工作流程
: 準備團隊環境
```
**🎓 畢業里程碑**：你已成功掌握使用專業科技公司開發者相同工具和流程的雲端開發。這些技能代表軟體開發的未來。
**🔄 下一階段能力**：
- 準備探索進階的雲端開發平台（Codespaces、GitPod）
- 能夠在分散式開發團隊中合作
- 具備為全球開源專案貢獻的能力
- 建立現代 DevOps 與持續整合流程的基礎
## GitHub Copilot Agent 挑戰 🚀
就像 NASA 太空任務的系統化方法，這挑戰要求你全面應用 VSCode.dev 技能完成完整工作流程。
**目標：** 展示運用 VSCode.dev，在網頁開發工作流程的熟練度。
**專案需求：** 使用 Agent 模式協助完成：
1. 分叉現有倉庫或建立新倉庫
2. 建立包含 HTML、CSS 及 JavaScript 檔案的功能性專案結構
3. 安裝並設定三個增進開發效能的擴充功能
4. 練習版本控管並撰寫描述性提交訊息
5. 嘗試建立與修改功能分支
6. 在 README.md 文件中紀錄流程與學習心得
此練習將所有 VSCode.dev 概念統整為實務工作流程，可應用於未來開發專案。
深入了解 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
![Modify extension settings](../../../../8-code-editor/images/extension-settings)
## 作業
### 3. **管理擴展**
你可以：
是時候實際應用所學了！我準備了一個實作專案，讓你練習我們涵蓋的全部內容：[使用 VSCode.dev 建立履歷網站](./assignment.md)
- **禁用：** 暫時關閉擴展但保留安裝
- **卸載：** 如果不再需要，永久移除擴展
此作業帶你從頭到尾用瀏覽器建構專業履歷網站。你會使用所有探索過的 VSCode.dev 功能，完成後不僅擁有美觀網站，也對新流程充滿信心。
找到擴展，點擊齒輪圖標，選擇 "Disable" 或 "Uninstall"，或者使用代碼區域中的藍色按鈕。
## 持續探索並提升技能
***
你已打下堅實基礎，但還有更多精彩內容待發掘！以下是提升 VSCode.dev 技能的資源與建議：
## 作業
**官方文件推薦收藏：**
- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – 瀏覽器編輯的完整指南
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – 當你想要更強大的雲端力量時
測試你的技能：[使用 vscode.dev 創建一個簡歷網站](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
**後續可試的酷功能：**
- **鍵盤快捷鍵**：學習讓你成為編碼忍者的快速鍵組合
- **工作區設定**：為不同專案類型設置不同環境
- **多根目錄工作區**：同時操作多個倉庫（非常方便！）
- **終端機整合**：直接在瀏覽器存取命令列工具
***
**練習建議：**
- 投入開源專案，使用 VSCode.dev 貢獻程式碼—回饋社群的好方法！
- 試用不同擴充找到你的完美設定
- 建立常用網站類型的專案模板
- 練習 Git 工作流程，如分支與合併—團隊合作中的關鍵技能
## 深入探索和自學
---
- 通過 [VSCode Web 官方文檔](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 深入了解。
- 探索進階工作區功能、快捷鍵和設置。
**你已精通瀏覽器開發！** 🎉 就像可攜式儀器讓科學家能在偏遠地點研究一樣，VSCode.dev 讓你從任何連網裝置進行專業編碼。
***
這些技能反映當前產業實務，很多專業開發者使用雲端開發環境以追求靈活與可及性。你已學會的工作流程，能從個人專案擴展至大型團隊協作。
**現在你已準備好隨時隨地使用 VSCode.dev 進行編碼、創建和協作！**
將這些技術運用到你的下一個開發專案吧！🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件乃透過 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。本公司對於因使用本翻譯而引起的任何誤解或誤釋不負任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

738
translations/hk/8-code-editor/1-using-a-code-editor/assignment.md
Unescape View File

@ -1,263 +1,593 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bd3aa6d2b879c30ea496c43aec1c49ed",
"translation_date": "2025-08-29T15:09:44+00:00",
"original_hash": "effe56ba51c38d7bdfad1ea38288666b",
"translation_date": "2026-01-06T12:26:51+00:00",
"source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
"language_code": "hk"
}
-->
# 使用 vscode.dev 建立履歷網站
# 使用 VSCode.dev 建立履歷網站
_當招聘人員要求你的履歷時，你能直接發送一個網址給他們，這是不是很酷？_ 😎
建立一個專業的履歷網站，展示你的技能和經驗，以互動且現代的形式呈現，從而提升你的職業前景。與直接傳送傳統 PDF 不同，想像一下能向招聘者提供一個時尚、響應式的網站，既展示你的資格，也展現你的網頁開發能力。
<!----
TODO: 添加一張可選的圖片
![使用代碼編輯器](../../../../translated_images/webdev101-vscode-dev.f53c14e8dad231ea09d9e07a2db4a01551d2dc6cdf21225038389e11156af023.hk.png)
> 手繪筆記由 [作者名稱](https://example.com) 提供
---->
這個實作作業讓你將所有 VSCode.dev 技能付諸實踐，同時建立對你的職涯真正有用的東西。你將體驗完整的網頁開發工作流程——從建立版本庫到部署——全部在瀏覽器中完成。
<!---
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/3)
---->
完成此專案後，你將擁有一個專業的線上存在，能輕鬆與潛在雇主分享，隨著你的技能成長而更新，並根據個人品牌進行客製化。這正是展現真實世界網頁開發技能的實際專案。
## 目標
## 學習目標
完成這個任務後，你將學會：
完成這個作業後，你將能夠：
- 建立一個網站來展示你的履歷
- **使用 VSCode.dev 建立和管理完整的網頁開發專案**
- **使用語意化 HTML 元素架構專業網站**
- **利用現代 CSS 技術設計響應式版面**
- **使用基本網頁技術實作互動功能**
- **部署可分享 URL 的線上網站**
- **在開發過程中展現版本控制最佳實務**
### 先決條件
## 先備條件
1. 一個 GitHub 帳戶。如果你還沒有帳戶，請前往 [GitHub](https://github.com/) 註冊。
開始此作業前請確保你已：
## 步驟
- 擁有 GitHub 帳戶（如尚無，請至 [github.com](https://github.com/) 註冊）
- 完成 VSCode.dev 課程，熟悉介面導覽與基本操作
- 具備基本 HTML 結構與 CSS 樣式概念
**步驟 1：** 建立一個新的 GitHub 儲存庫，命名為 `my-resume`
## 專案設置與版本庫建立
**步驟 2：** 在你的儲存庫中建立一個 `index.html` 文件。我們需要在 github.com 上至少添加一個文件，因為空的儲存庫無法在 vscode.dev 中打開。
讓我們從建立專案基礎開始。這個流程模擬真實開發時適當建立版本庫和規劃結構的作法。
點擊 `creating a new file` 鏈接，輸入文件名稱 `index.html`，然後選擇 `Commit new file` 按鈕。
### 第 1 步：建立你的 GitHub 版本庫
![在 github.com 上建立新文件](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hk.png)
建立專屬版本庫能確保你的專案從一開始就有良好組織與版本控管。
**步驟 3：** 打開 [VSCode.dev](https://vscode.dev)，選擇 `Open Remote Repository` 按鈕。
1. **前往** [GitHub.com](https://github.com) 並登入帳號
2. **點擊** 右上角的綠色「New」按鈕或「+」圖示
3. **命名**你的版本庫為 `my-resume`（或依個人喜好如 `john-smith-resume`）
4. **加入**簡短描述：「專業履歷網站，使用 HTML 和 CSS 建立」
5. **選擇**「Public」使履歷能讓潛在雇主存取
6. **勾選**「Add a README file」以建立初始專案說明
7. **點擊**「Create repository」完成設置
複製你剛剛為履歷網站建立的儲存庫的網址，並將其粘貼到輸入框中：
> 💡 **版本庫命名技巧**：使用清楚且專業的名稱來表明專案目的，有助於分享給雇主或作品集展示。
_將 `your-username` 替換為你的 GitHub 用戶名_
### 第 2 步：初始化專案結構
因 VSCode.dev 需要有至少一個檔案才能打開版本庫，我們先在 GitHub 上直接建立主要 HTML 檔。
1. **點擊**新版本庫中的「creating a new file」連結
2. **輸入**檔案名稱為 `index.html`
3. **加入**以下初始 HTML 結構：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Professional Resume</title>
</head>
<body>
<h1>Your Name</h1>
<p>Professional Resume Website</p>
</body>
</html>
```
https://github.com/your-username/my-resume
```
✅ 如果成功，你將在瀏覽器中的文本編輯器中看到你的項目和 `index.html` 文件。
![建立新文件](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hk.png)
4. **輸入**提交訊息：「Add initial HTML structure」
5. **點擊**「Commit new file」儲存變更
![在 GitHub 建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056.hk.png)
**這初始設置達成的效果：**
- **建立**正確的 HTML5 文件結構，使用語意標籤
- **包含**視窗元標籤，以支援響應式設計
- **設定**描述性頁面標題，顯示於瀏覽器分頁
- **打下**專業內容組織的基礎
## 在 VSCode.dev 工作
確立版本庫基礎後，我們轉至 VSCode.dev 進行主要開發。此網頁編輯器具備專業網頁開發所需的各項工具。
### 第 3 步：在 VSCode.dev 開啟專案
1. **於新分頁開啟** [vscode.dev](https://vscode.dev)
2. **點擊**歡迎畫面的「Open Remote Repository」
3. **從 GitHub 複製**你的版本庫 URL 並貼上輸入框
格式：`https://github.com/your-username/my-resume`
*將 `your-username` 替換成你的 GitHub 使用者名稱*
4. **按下** Enter 載入專案
✅ **成功指標**：你會看到專案檔案呈現在側邊欄中，且能在主要編輯區編輯 `index.html`。
![專案載入 VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.hk.png)
**介面中你將看到：**
- **Explorer 側邊欄**：**顯示**版本庫檔案與資料夾結構
- **編輯區**：**呈現**選取檔案內容供編輯
- **活動列**：**提供**存取原始碼控制、擴充功能等
- **狀態列**：**顯示**連線狀態與當前分支資訊
### 第 4 步：建立你的履歷內容
**步驟 4：** 打開 `index.html` 文件，將以下代碼粘貼到代碼區域並保存。
用完整的履歷結構替換 `index.html` 中的佔位內容。此 HTML 提供專業資格展示的基礎。
<details>
<summary><b>負責履歷網站內容的 HTML 代碼。</b></summary>
<summary><b>完整 HTML 履歷結構</b></summary>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Your Name - Professional Resume</title>
</head>
<body>
<header id="header">
<h1>Your Full Name</h1>
<hr>
<p class="role">Your Professional Title</p>
<hr>
</header>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>你的名字在這裡！</title>
</head>
<body>
<header id="header">
<!-- 履歷標題，包含你的名字和職稱 -->
<h1>你的名字在這裡！</h1>
<hr>
你的角色！
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>聯絡方式</h2>
<!-- 聯絡信息，包括社交媒體 -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">在這裡填寫你的電子郵件</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">在這裡填寫你的用戶名！</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">在這裡填寫你的用戶名！</a>
</p>
</section>
<section>
<h2>技能</h2>
<!-- 你的技能 -->
<ul>
<li>技能 1！</li>
<li>技能 2！</li>
<li>技能 3！</li>
<li>技能 4！</li>
</ul>
</section>
<section>
<h2>教育背景</h2>
<!-- 你的教育背景 -->
<h3>在這裡填寫你的課程！</h3>
<p>
在這裡填寫你的學校名稱！
</p>
<p>
開始日期 - 結束日期
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>關於我</h2>
<!-- 關於你的簡介 -->
<p>在這裡寫一段關於自己的簡介！</p>
</section>
<section>
<h2>工作經驗</h2>
<!-- 你的工作經驗 -->
<h3>職位名稱</h3>
<p>
公司名稱在這裡 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 描述你做了什麼！</li>
<li>任務 2 - 描述你做了什麼！</li>
<li>描述你的貢獻成果/影響</li>
</ul>
<h3>職位名稱 2</h3>
<p>
公司名稱在這裡 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 描述你做了什麼！</li>
<li>任務 2 - 描述你做了什麼！</li>
<li>描述你的貢獻成果/影響</li>
</ul>
</section>
</article>
</main>
</body>
</html>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:your.email@domain.com">your.email@domain.com</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="https://github.com/your-username">github.com/your-username</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
</p>
</section>
<section>
<h2>SKILLS</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>Problem Solving</li>
</ul>
</section>
<section>
<h2>EDUCATION</h2>
<h3>Your Degree or Certification</h3>
<p>Institution Name</p>
<p>Start Date - End Date</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<div class="job">
<h3>Job Title</h3>
<p class="company">Company Name | Start Date – End Date</p>
<ul>
<li>Describe a key accomplishment or responsibility</li>
<li>Highlight specific skills or technologies used</li>
<li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
</ul>
</div>
<div class="job">
<h3>Previous Job Title</h3>
<p class="company">Previous Company | Start Date – End Date</p>
<ul>
<li>Focus on transferable skills and achievements</li>
<li>Demonstrate growth and learning progression</li>
<li>Include any leadership or collaboration experiences</li>
</ul>
</div>
</section>
<section>
<h2>PROJECTS</h2>
<div class="project">
<h3>Project Name</h3>
<p>Brief description of what the project accomplishes and technologies used.</p>
<a href="#" target="_blank">View Project</a>
</div>
</section>
</article>
</main>
</body>
</html>
```
</details>
將你的履歷細節替換掉 HTML 代碼中的 _佔位文字_。
**客製化指引：**
- **用真實資訊**取代所有佔位文字
- **根據經驗和職涯重點**調整區塊
- **視需要**新增或刪減區段（如證照、志工、語言）
- **加入**連結至你的實際個人資料與專案
### 第 5 步：建立支援檔案
專業網站需有組織的檔案架構。建立 CSS 樣式表與設定檔。
**步驟 5：** 將滑鼠懸停在 My-Resume 資料夾上，點擊 `New File ...` 圖標，並在你的項目中建立兩個新文件：`style.css` 和 `codeswing.json` 文件。
1. **將滑鼠移至** Explorer 側邊欄的專案資料夾名稱
2. **點擊**出現的「新增檔案」圖示（📄+）
3. **依序建立**下列檔案：
- `style.css`（樣式與版面）
- `codeswing.json`（預覽擴充功能設定）
**步驟 6：** 打開 `style.css` 文件，將以下代碼粘貼進去並保存。
**建立 CSS 檔案 (`style.css`):**
<details>
<summary><b>用於格式化網站佈局的 CSS 代碼。</b></summary>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
<summary><b>專業 CSS 樣式</b></summary>
```css
/* Modern Resume Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
max-width: 960px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
/* Header Styling */
header {
text-align: center;
margin-bottom: 3em;
padding: 2em;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3em;
letter-spacing: 0.1em;
margin-bottom: 0.2em;
font-weight: 300;
}
.role {
font-size: 1.3em;
font-weight: 300;
margin: 1em 0;
}
/* Main Content Layout */
main {
display: grid;
grid-template-columns: 35% 65%;
gap: 3em;
margin-top: 3em;
background: white;
padding: 2em;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Typography */
h2 {
font-size: 1.4em;
font-weight: 600;
margin-bottom: 1em;
color: #667eea;
border-bottom: 2px solid #667eea;
padding-bottom: 0.3em;
}
h3 {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5em;
color: #444;
}
/* Section Styling */
section {
margin-bottom: 2.5em;
}
#mainLeft {
border-right: 1px solid #e0e0e0;
padding-right: 2em;
}
/* Contact Links */
section a {
color: #667eea;
text-decoration: none;
transition: color 0.3s ease;
}
section a:hover {
color: #764ba2;
text-decoration: underline;
}
/* Icons */
i {
margin-right: 0.8em;
width: 20px;
text-align: center;
color: #667eea;
}
/* Lists */
ul {
list-style: none;
padding-left: 0;
}
li {
margin: 0.5em 0;
padding: 0.3em 0;
position: relative;
}
li:before {
content: "▸";
color: #667eea;
margin-right: 0.5em;
}
/* Work Experience */
.job, .project {
margin-bottom: 2em;
padding-bottom: 1.5em;
border-bottom: 1px solid #f0f0f0;
}
.company {
font-style: italic;
color: #666;
margin-bottom: 0.5em;
}
/* Responsive Design */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
gap: 2em;
}
#mainLeft {
border-right: none;
border-bottom: 1px solid #e0e0e0;
padding-right: 0;
padding-bottom: 2em;
}
h1 {
font-size: 2.2em;
}
body {
padding: 10px;
}
}
/* Print Styles */
@media print {
body {
background: white;
color: black;
font-size: 12pt;
}
header {
background: none;
color: black;
box-shadow: none;
}
main {
box-shadow: none;
}
}
```
</details>
**步驟 6：** 打開 `codeswing.json` 文件，將以下代碼粘貼進去並保存。
**建立設定檔 (`codeswing.json`):**
{
```json
{
"scripts": [],
"styles": []
}
}
```
**CSS 功能說明：**
- **使用** CSS Grid 實現專業響應式版面
- **採用**現代漸層色彩設計頁首
- **包含**滑鼠懸停效果與平滑過渡
- **支援**所有裝置大小的響應設計
- **加入**列印友善樣式以利匯出 PDF
### 第 6 步：安裝與設定擴充功能
擴充功能提升開發體驗，提供即時預覽與工作流程工具。CodeSwing 擴充對網頁專案特別有用。
**安裝 CodeSwing 擴充：**
1. **點擊**活動列的擴充功能圖示（🧩）
2. **在搜尋框**輸入「CodeSwing」
3. **從結果中**選擇 CodeSwing 擴充
4. **點擊**藍色「Install」安裝
![安裝 CodeSwing 擴充](../../../../8-code-editor/images/install-extension.gif)
**CodeSwing 功能：**
- **啟用**編輯時即時預覽網站
- **即時顯示**變更，無需手動重新整理
- **支援**多種檔案類型（HTML、CSS、JavaScript）
- **提供**整合式開發環境體驗
**安裝後的即時效果：**
安裝完成後，你會在編輯器看到履歷網站的即時預覽，方便你隨時檢視網站外觀。
**步驟 7：** 安裝 `Codeswing 擴展`，以便在代碼區域中可視化履歷網站。
![CodeSwing 即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hk.png)
點擊活動欄上的 _`Extensions`_ 圖標，輸入 Codeswing。點擊展開活動欄上的 _藍色安裝按鈕_ 或在選擇擴展以加載更多信息後，使用代碼區域中出現的安裝按鈕進行安裝。安裝擴展後，觀察你的代碼區域，查看項目變化 😃
**強化介面說明：**
- **分割檢視**：一側顯示程式碼，一側顯示即時預覽
- **即時更新**：輸入時立即反映變更
- **互動預覽**：可測試連結及互動元素
- **手機模擬**：方便測試響應式設計
![安裝擴展](../../../../8-code-editor/images/install-extension.gif)
### 第 7 步：版本控制與發布
安裝擴展後，你的屏幕上將顯示以下內容。
履歷網站完成後，使用 Git 儲存工作並上線。
![Codeswing 擴展運行效果](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hk.png)
**提交變更：**
如果你對所做的更改感到滿意，將滑鼠懸停在 `Changes` 資料夾上，點擊 `+` 按鈕以暫存更改。
1. **點擊**活動列的原始碼控制圖示（🌿）
2. **檢視**「變更」區段的所有新增和修改檔案
3. **點擊**每個檔案旁的「+」圖標暫存變更
4. **輸入**描述性提交訊息，例如：
- 「Add complete resume website with responsive design」
- 「Implement professional styling and content structure」
5. **點擊**勾選（✓）提交並推送修改
輸入提交信息 _(描述你對項目所做的更改)_，並通過點擊 `check` 提交更改。完成項目後，選擇左上角的漢堡菜單圖標返回 GitHub 上的儲存庫。
**有效提交訊息範例：**
- 「新增專業履歷內容與樣式」
- 「實作行動裝置相容之響應式設計」
- 「更新聯絡資訊與專案連結」
恭喜 🎉 你已經在幾個步驟內使用 vscode.dev 建立了你的履歷網站。
> 💡 **專業技巧**：好的提交訊息有助於追蹤專案演進，也展現細心，這是雇主看重的特質。
## 🚀 挑戰
**存取已發布網站：**
提交完畢後，透過左上選單（☰）回到 GitHub 版本庫。你的履歷網站已受版本控管，準備好部署分享。
打開一個你有權限進行更改的遠端儲存庫，更新一些文件。接下來，嘗試建立一個包含更改的新分支並提交 Pull Request。
## 結果與後續
<!----
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/4)
---->
**恭喜！🎉** 你已成功利用 VSCode.dev 建立專業履歷網站。你的專案展示了：
## 回顧與自學
**展示的技術能力：**
- **版本庫管理**：建立並組織完整專案架構
- **網頁開發**：運用現代 HTML5 與 CSS3 建置響應式網站
- **版本控制**：實施有效 Git 工作流程與有意義的提交
- **工具熟練度**：有效利用 VSCode.dev 介面與擴充功能系統
**達成的專業成果：**
- **線上存在感**：可共享的 URL 展現資格
- **現代格式**：互動式替代傳統 PDF 履歷
- **技術證明**：具體展示你的網頁開發能力
- **易於更新**：可持續改進及客製化的基礎
### 部署選擇
為讓雇主存取你的履歷，可考慮下列主機方案：
**GitHub Pages（推薦）：**
1. 前往 GitHub 版本庫設定
2. 捲動至「Pages」區段
3. 選擇「Deploy from a branch」，指定「main」分支
4. 即可透過 `https://your-username.github.io/my-resume` 存取網站
**其他平台選項：**
- **Netlify**：自動部署，支援自訂域名
- **Vercel**：快速部署，具現代化主機功能
- **GitHub Codespaces**：內建預覽的開發環境
### 功能增強建議
持續提升技能，加入以下功能：
**技術提升：**
- **JavaScript 互動性**：新增平滑捲動或互動元件
- **暗/亮主題切換**：實現主題切換及平滑過渡
- **聯絡表單**：啟用潛在雇主直接聯繫
- **SEO 優化**：加入 meta 標籤與結構化資料，提升搜尋能見度
**內容增潤：**
- **專案作品集**：連結 GitHub 倉庫與現場示範
- **技能視覺化**：建立進度條或技能評分系統
- **推薦語區**：新增同事或導師推薦
- **部落格整合**：加入部落格，展現學習歷程
## GitHub Copilot Agent 挑戰 🚀
使用代理模式完成以下挑戰：
**說明：** 強化你的履歷網站，加入展現專業網頁開發能力與現代設計原則的進階功能。
**提示：** 在既有履歷網站基礎上，實作這些進階功能：
1. 新增暗/亮主題切換並具平滑過渡效果
2. 建立帶動畫進度條的互動技能區
3. 實作具表單驗證的聯絡表單
4. 加入帶懸停效果與模態視窗的專案作品集區
5. 含有至少 3 篇學習歷程樣本文章的部落格區
6. 使用適當 meta 標籤、結構化資料和效能優化提升 SEO
7. 使用 GitHub Pages 或 Netlify 發布強化後網站
8. 在 README.md 中記錄全部新功能與截圖
你的強化網站應展現現代網頁開發的精通，包括響應式設計、JavaScript 互動性以及專業部署流程。
## 挑戰延伸
想進一步挑戰嗎？試試這些進階挑戰：
**📱 手機優先重新設計：** 使用 CSS Grid 和 Flexbox 完全重建網站，符合手機優先設計原則
**🔍 SEO 優化：** 實現全方位 SEO 改善，包括 meta 標籤、結構化資料與效能優化
**🌐 多語系支援：** 新增國際化功能，支持多種語言
**📊 分析整合：** 加入 Google Analytics，追蹤訪客互動並優化內容
**🚀 效能優化：** 在所有分類取得完美 Lighthouse 分數
## 複習與自我學習
利用這些資源擴展知識：
**VSCode.dev 進階功能：**
- [VSCode.dev 文件](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - 網頁編輯完整指南
- [GitHub Codespaces](https://docs.github.com/en/codespaces) - 雲端開發環境
**網頁開發最佳實踐：**
- **響應式設計**：研習 CSS Grid 與 Flexbox 實現現代版面布局
- **無障礙設計**：學習 WCAG 指南以實現包容性網頁設計
- **效能**：使用 Lighthouse 等工具進行優化
- **SEO**：了解搜尋引擎優化的基本原理
**專業發展：**
- **作品集建立**：創建更多項目以展示多樣化技能
- **開源貢獻**：參與現有項目以獲得協作經驗
- **社交網絡**：在開發者社群分享你的履歷網站以獲取反饋
- **持續學習**：保持對網頁開發趨勢和技術的更新
---
閱讀更多關於 [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 的內容以及它的其他功能。
**你的下一步驟：** 與朋友、家人或導師分享你的履歷網站，聽取他們的反饋。利用他們的建議反覆修改和完善你的設計。記住，這個項目不只是履歷，而是展示你作為網頁開發者成長的證明！
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件由AI翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

2431
translations/hk/9-chat-project/README.md
View File

File diff suppressed because it is too large Load Diff

38
translations/hk/9-chat-project/solution/backend/python/README.md
Unescape View File

@ -1,13 +1,13 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "537f02a36d73db093cbb8b9b44867645",
"translation_date": "2025-09-01T15:46:21+00:00",
"original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
"translation_date": "2026-01-06T13:17:10+00:00",
"source_file": "9-chat-project/solution/backend/python/README.md",
"language_code": "hk"
}
-->
# 執行程式碼
# 運行代碼
## 設置
@ -18,37 +18,47 @@ python -m venv venv
source ./venv/bin/activate
```
## 安裝依賴項
## 安裝依賴
```sh
pip install openai flask flask-cors
pip install openai fastapi uvicorn python-dotenv
```
## 啟動 API
## 運行 API
```sh
# 方法 1：直接執行
python api.py
# 方法 2：使用 uvicorn
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
## 啟動前端
## 測試 API
訪問互動式 API 文件：`http://localhost:5000/docs`
## 運行前端
確保你位於 frontend 資料夾內
確保你在 frontend 資料夾內
找到 *app.js*，將 `BASE_URL` 更改為你的後端 URL
找到 *app.js*，將 `BASE_URL` 改為你的後端 URL
執行
運行它
```
npx http-server -p 8000
```
嘗試在聊天框中輸入訊息，你應該會看到回應（前提是你在 Codespace 中運行，或者已經設置了存取權杖）。
試著在聊天中輸入訊息，你應該會看到回應（前提是你在 Codespace 中運行此程式或已設定存取權杖）。
## 設置存取權杖（如果你不是在 Codespace 中運行）
## 設置存取權杖（如果你不是在 Codespace 中執行）
請參閱 [設置 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
請參閱 [設定 PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原本文檔的母語版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不負責因使用本翻譯而產生的任何誤解或錯誤詮釋。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

324
translations/hk/README.md
Unescape View File

@ -1,236 +1,262 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "caf2ca695e9d259153d24a5cf3e07ef5",
"translation_date": "2025-10-11T10:51:41+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-06T12:05:13+00:00",
"source_file": "README.md",
"language_code": "hk"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
# Web 開發初學者課程
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
透過微軟雲端推廣大使設計的 12 週完整課程，學習網頁開發的基本知識。24 堂課程深入探討 JavaScript、CSS 及 HTML，並透過製作玻璃容器生態缸、瀏覽器擴充功能及太空遊戲等實作專案進行學習。參與小測驗、討論和實際作業。以專案為本的教學方法，幫助你提升技能並優化知識吸收。立即開始你的程式設計旅程！
[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
加入 Azure AI Foundry Discord 社群
# 初學者網頁開發課程 - 一個完整的課程
跟隨以下步驟開始使用這些資源：
1. **派生倉庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **複製倉庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家及開發者交流**](https://discord.com/invite/ByRwuEEgH4)
透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 節課程涵蓋 JavaScript、CSS 和 HTML，並通過實際項目如生態瓶、瀏覽器擴展和太空遊戲進行學習。參與測驗、討論和實踐作業，提升技能並優化知識吸收。立即開始你的編程之旅吧！
### 🌐 多語言支援
加入 Azure AI Foundry Discord 社群
#### 透過 GitHub Action 支援（自動且持續更新）
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../mo/README.md) | [中文（繁體，臺灣）](../tw/README.md) | [克羅埃西亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印度尼西亞語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [坎納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語（法爾西語）](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語（巴西）](../br/README.md) | [葡萄牙語（葡萄牙）](../pt/README.md) | [旁遮普語（古魯穆奇文）](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語（西里爾字母）](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語（菲律賓）](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
按照以下步驟開始使用這些資源：
1. **Fork 此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家和其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
> **想要本機複製倉庫？**
### 🌐 多語言支援
> 此倉庫包含 50 多種語言翻譯，會大幅增加下載大小。若想複製不含翻譯的倉庫，請使用 sparse checkout：
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這樣可以更快速下載並取得完成課程所需的所有內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 通過 GitHub Action 支援（自動化且始終保持最新）
**如果你希望支援更多翻譯語言，請見 [此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../mo/README.md) | [中文（繁體，台灣）](../tw/README.md) | [克羅地亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [意大利語](../it/README.md) | [日語](../ja/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [挪威語](../no/README.md) | [波斯語](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語（巴西）](../br/README.md) | [葡萄牙語（葡萄牙）](../pt/README.md) | [旁遮普語（古魯穆奇文）](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語（西里爾文）](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語（菲律賓語）](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 🧑‍🎓 _你是學生嗎？_
**如果你希望支援其他語言，請參考 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
請參訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學者資源、學生包，以及取得免費證書兌換券的方式。這是你應該收藏並不時瀏覽的頁面，因為內容會每月更新。
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！
#### 🧑‍🎓 _你是學生嗎？_
新增了挑戰章節，大部分章節中可找到「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 與 Agent 模式完成的新挑戰。若你還未用過 Agent 模式，它不僅可以產生文字，還能建立及編輯檔案、執行指令等功能。
訪問 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生包，甚至獲得免費證書的機會。這是你應該收藏並定期查看的頁面，因為我們每月都會更新內容。
### 📣 公告 - _新增產生式 AI 專案_
### 📣 公告 - _使用生成式 AI 構建的新項目_
新增 AI 助理專案，詳情請參閱 [專案](./9-chat-project/README.md)
新增了全新的 AI 助手項目，快來看看 [項目](./09-chat-project/README.md)
### 📣 公告 - _剛剛發布的 Generative AI JavaScript 新課程_
### 📣 公告 - _新的生成式 AI 課程_ 已經發布
千萬別錯過我們全新的產生式 AI 課程！
不要錯過我們全新的生成式 AI 課程！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
![Background](../../translated_images/background.148a8d43afde5730.hk.png)
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.hk.png)
- 涵蓋從基礎到 RAG (Retrieval-Augmented Generation) 的課程
- 使用 GenAI 及我們的夥伴應用程式與歷史人物互動
- 有趣且引人入勝的故事情節，帶你穿越時空！
- 課程涵蓋從基礎到 RAG 的所有內容。
- 使用 GenAI 和我們的配套應用程式與歷史人物互動。
- 有趣且引人入勝的故事情節，帶你穿越時空！
![character](../../translated_images/character.5c0dd8e067ffd693.hk.png)
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.hk.png)
每堂課都包含作業、知識檢查及挑戰，引導你學習以下主題：
- 提示語設計與提示工程
- 文字及圖像應用程式產生
- 搜尋應用程式
每節課都包括一個作業、一個知識檢查和一個挑戰，幫助你學習以下主題：
- 提示和提示工程
- 文本和圖像應用程式生成
- 搜索應用程式
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
訪問 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
## 🌱 開始學習
> **教師們**，我們已經[提供了一些建議](for-teachers.md)關於如何使用這個課程。我們非常期待你在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)中的反饋！
## 🌱 入門指引
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前，先完成課前測驗，然後閱讀課程材料，完成各種活動，並通過課後測驗檢查你的理解。
> **老師們**，我們已在 [for-teachers.md](for-teachers.md) 提供了一些使用課程的建議。歡迎在我們的 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 提供反饋！
為了提升學習體驗，與同學一起合作完成項目吧！我們鼓勵在[討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中進行討論，我們的版主團隊將隨時為你解答問題。
**[學員](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前先做「課前小測驗」，接著閱讀課程教材、完成各項活動，最後以「課後小測驗」檢核學習成果。
為了進一步提升你的教育水平，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 獲取更多學習材料。
為提升學習體驗，請與同儕合作完成專案！我們鼓勵在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 發問討論，管理員團隊會隨時為你解答。
### 📋 設置你的學習環境
若想進一步學習，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多教材。
這個課程已經準備好開發環境！開始學習時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在你的電腦上使用文本編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 本地運行。
### 📋 設定您的環境
#### 創建你的儲存庫
為了方便保存你的學習進度，建議你創建一個此儲存庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中創建一個包含課程副本的新儲存庫。
本課程已備好開發環境！開始時，您可以選擇在 [Codespace](https://github.com/features/codespaces/) （瀏覽器執行，無需安裝）中執行課程，或在您的電腦上使用文字編輯器，例如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
按照以下步驟：
1. **Fork 此儲存庫**：點擊頁面右上角的 "Fork" 按鈕。
2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 建立您的倉庫
為方便儲存作品，建議您建立此倉庫的個人副本。可點擊頁面頂端的 **Use this template** 按鈕，這會在您的 GitHub 帳號中建立一個包含本課程的新的倉庫。
#### 在 Codespace 中運行課程
請依下列步驟操作：
1. **派生倉庫**：點擊本頁右上角的「Fork」按鈕。
2. **複製倉庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
在你創建的這個儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以供學習使用。
#### 在 Codespace 執行課程
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.hk.png)
在您剛建立的倉庫中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為您建立一個新的 Codespace 作業環境。
#### 在本地電腦上運行課程
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.hk.png)
要在本地電腦上運行此課程，你需要一個文本編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [編程語言和工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 將指導你選擇最適合你的工具。
#### 在您的電腦上本地執行課程
我們建議使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為你的編輯器，它還內置了一個 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。
如果想直接在電腦上進行課程，您需要一個文字編輯器、一個瀏覽器及命令列工具。第一課 [程式語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 會介紹各項工具選擇以協助您挑選最適合的組合。
1. 將你的儲存庫克隆到你的電腦。你可以通過點擊 **Code** 按鈕並複製 URL 來完成此操作：
我們建議使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 編輯器，此編輯器內建 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。您可從 [這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 下載 Visual Studio Code。
[CodeSpace](./images/createcodespace.png)
1. 將您的倉庫複製到電腦。可點擊 **Code** 按鈕並複製網址：
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下命令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
[CodeSpace](./images/createcodespace.png)
然後，於 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內打開 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下命令，將 `<your-repository-url>` 替換為你剛才複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開文件夾。你可以通過點擊 **File** > **Open Folder** 並選擇你剛剛克隆的文件夾來完成此操作。
> 推薦的 Visual Studio Code 擴展：
2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **檔案** > **打開資料夾**，然後選擇你剛剛複製的資料夾。
> 推薦的 Visual Studio Code 擴充功能：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快地編寫代碼
## 📂 每節課包括：
- 可選的手繪筆記
- 可選的補充視頻
- 課前熱身測驗
- 書面課程
- 專案式課程，逐步指導如何建立專案
- 知識檢測
- 挑戰
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 協助你更快撰寫程式碼
## 📂 每個課程包含：
- 可選的手繪筆記
- 可選的補充影片
- 課前熱身小測驗
- 書面課程內容
- 對於專案導向課程，有逐步指引說明如何建構專案
- 知識檢核
- 挑戰題
- 補充閱讀
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的注意事項**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。它們可以在[這裡](https://ff-quizzes.netlify.app/web/)找到，測驗應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的指示操作。
## 🗃️ 課程
| | 專案名稱 | 教授概念 | 學習目標 | 相關課程 | 作者 |
| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 入門篇 | 程式設計入門及開發工具 | 學習大多數程式語言的基本原理以及幫助專業開發者完成工作的軟件 | [程式語言入門及開發工具](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎，包含團隊合作 | 學習如何在專案中使用 GitHub，如何與他人協作程式碼庫 | [GitHub 基礎入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙設計 | 學習網頁無障礙設計的基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別的基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習如何使用函數與方法來管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何使用決策方法在程式碼中創建條件 | [做出決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 中的陣列與迴圈處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實踐 | 建立 HTML 來創建線上生態瓶，專注於建立佈局 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實踐 | 建立 CSS 來設計線上生態瓶，專注於 CSS 的基礎，包括使頁面響應式 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 建立 JavaScript 使生態瓶具備拖放介面功能，專注於閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建立打字遊戲 | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器操作 | 學習瀏覽器的工作原理、歷史，以及如何搭建瀏覽器擴展的第一個元素 | [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 並將變數存儲於本地存儲 | 建立瀏覽器擴展的 JavaScript 元素，使用存儲於本地存儲的變數呼叫 API | [API、表單與本地存儲](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器背景處理與網頁效能 | 使用瀏覽器的背景處理來管理擴展的圖示；學習網頁效能及一些優化方法 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 更高階的 JavaScript 遊戲開發 | 學習使用類別與組合進行繼承以及 Pub/Sub 模式，為建立遊戲做準備 | [高階遊戲開發入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | 繪製到畫布 | 學習 Canvas API，用於將元素繪製到螢幕 | [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 在螢幕上移動元素 | 探索如何使用笛卡爾座標與 Canvas API 使元素獲得運動 | [移動元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞檢測 | 使元素碰撞並相互反應，使用按鍵提供冷卻功能以確保遊戲效能 | [碰撞檢測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲的狀態與效能進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 結束與重新開始遊戲 | 學習如何結束與重新開始遊戲，包括清理資源與重置變數值 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | HTML 模板與網頁應用程式路由 | 學習如何使用路由與 HTML 模板建立多頁網站的架構 | [HTML 模板與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習如何建立表單並處理驗證例程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 資料的獲取與使用方法 | 資料如何在應用程式中流動，如何獲取、存儲與處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何保留狀態以及如何以程式方式管理它 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 編輯器](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器| [使用 VScode 編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
- [課後小測驗](https://ff-quizzes.netlify.app/web/)
> **關於小測驗的提醒**：所有小測驗皆包含於 Quiz-app 資料夾中，共 48 個小測驗，每個包含三個問題。你可以在 [這裡](https://ff-quizzes.netlify.app/web/) 使用，該測驗應用程式可在本機執行或部署到 Azure；請依照 `quiz-app` 資料夾中的說明操作。
## 🗃️ 課程列表
| | 專案名稱 | 教授的概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :-------------------------------------------------: | :----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 入門篇 | 程式設計導論與開發工具介紹 | 了解大部分程式語言的基本原理以及有助專業開發者的軟體工具 | [程式語言與開發工具導論](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎，包含團隊協作 | 學習如何在專案中使用 GitHub，如何與他人協作管理程式碼庫 | [GitHub 基礎](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙設計 | 學習網頁無障礙設計的基本原則 | [無障礙基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JavaScript 基礎 | JavaScript 資料型態 | JavaScript 資料型態的基礎 | [資料型態](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JavaScript 基礎 | 函數與方法 | 認識函數及方法以管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JavaScript 基礎 | 使用 JS 作決策 | 學習如何在程式碼中創建條件判斷流程 | [決策製作](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JavaScript 基礎 | 陣列與迴圈 | 使用 JavaScript 陣列和迴圈來處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建置網路生態缸的 HTML 元素，專注於佈局設計 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 建置網路生態缸的 CSS 樣式，涵蓋 CSS 基礎並負責使頁面響應式 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 建置網路生態缸的拖放功能，專注於閉包及 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建置打字遊戲 | 學習如何使用鍵盤事件驅動 JavaScript 應用程式的邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器運作 | 瞭解瀏覽器的運作原理、歷史，以及如何搭建瀏覽器擴充功能的初步架構 | [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 及本機儲存變數 | 建構瀏覽器擴充功能 JavaScript 元素，使用本機儲存的變數呼叫 API | [API、表單與本機儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴充功能](./5-browser-extension/solution/README.md) | 瀏覽器背景程序與網頁效能 | 使用瀏覽器背景程序管理擴充功能圖示；了解網頁效能及優化 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | JavaScript 更進階遊戲開發 | 認識類別與組合的繼承，以及發布/訂閱模式，為開發遊戲做準備 | [進階遊戲開發導論](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | Canvas 畫布繪圖 | 熟悉 Canvas API，用於繪製畫面元素 | [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 移動畫面上的元素 | 探索如何透過笛卡爾座標和 Canvas API 讓元素產生運動 | [移動畫面元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素相互碰撞並透過按鍵產生反應，並提供冷卻函式以維持遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀況與表現進行數學計算 | [計分系統](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 遊戲結束與重新開始 | 了解如何結束與重新啟動遊戲，包括清理資源與重置變數 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用程式中的 HTML 範本與路由 | 學習如何建立多頁網站架構的骨幹，使用路由與 HTML 範本 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入和註冊表單 | 學習建立表單及驗證處理函式 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 取得與使用資料的方式 | 資料如何流入流出應用程式，如何取得、儲存與釋放 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何維持狀態，並以程式方式管理 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 程式碼](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器| [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助理](./9-chat-project/README.md) | AI 應用 | 學習如何建置屬於你自己的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩個主要教學原則：
* 專案式學習
* 頻繁測驗
* 專案導向學習
* 頻繁的小測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會通過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴展、類似太空侵略者的遊戲以及商業銀行應用程式來獲得實際操作經驗。完成課程後，學生將對網頁開發有扎實的理解。
該課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及現今網頁開發者所使用的最新工具和技術。學生將有機會透過建造打字遊戲、虛擬生態缸、環保瀏覽器擴充功能、太空侵略者風格遊戲以及商業銀行應用程式，獲得實務經驗。系列課程結束後，學生將對網頁開發有穩固的理解。
> 🎓 您可以在 Microsoft Learn 上以[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)的形式學習本課程的前幾節！
> 🎓 你可以將此課程的前幾堂課作為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 來學習！
通過確保內容與專案相符，學習過程對學生來說更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎入門課程來介紹概念，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 視頻教程，其中一些作者也參與了本課程的編寫。
確保內容與專案相符，能使學習過程對學生更具吸引力，並加強概念的記憶。我們還撰寫了一些 JavaScript 基礎入門課程，搭配來自「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教學合集的影片，其中一些作者也參與了此課程的編寫。
此外，課前的低壓測驗可以幫助學生集中注意力於學習主題，而課後的第二次測驗則能進一步加強記憶。本課程設計靈活有趣，可以完整學習或選擇部分內容。專案從簡單開始，並在 12 週的課程結束時逐漸變得更為複雜。
此外，開課前的小測驗有助於學生建立學習主題的意向，而課後小測驗則確保進一步的知識鞏固。此課程旨在保持彈性與趣味，學生可選擇完整或部分學習。專案從簡單開始，到 12 週課程末變得越來越複雜。
雖然我們有意避免介紹 JavaScript 框架，以便專注於作為網頁開發者在採用框架之前所需的基本技能，但完成本課程後的下一步可以通過另一系列視頻學習 Node.js："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
雖然我們刻意避免引入 JavaScript 框架，以集中於成為網頁開發者前應先掌握的基本技能，完成此課程後，下一步可透過另一系列影片學習 Node.js：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性反饋！
> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
## 🧭 離線存取
您可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，[安裝 Docsify](https://docsify.js.org/#/quickstart) 到您的本地機器，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 端口上運行：`localhost:3000`。
## 🧭 離線使用
你可以使用 [Docsify](https://docsify.js.org/#/) 離線執行本文件。將此倉庫分支，於本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，接著在此倉庫根目錄輸入 `docsify serve`。網站會在本機的 3000 端口啟動：`localhost:3000`。
## 📘 PDF
所有課程的 PDF 可在[這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到。
所有課程的 PDF 可以在 [這裏](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
## 🎒 其他課程
我們團隊製作了其他課程！歡迎查看：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
我們的團隊還製作了其他課程！請查看：
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
- [MCP 初學者課程](https://aka.ms/mcp-for-beginners)
- [Edge AI 初學者課程](https://aka.ms/edgeai-for-beginners)
- [AI Agents 初學者課程](https://aka.ms/ai-agents-beginners)
- [生成式 AI 初學者課程 .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [使用 JavaScript 的生成式 AI](https://github.com/microsoft/generative-ai-with-javascript)
- [使用 Java 的生成式 AI](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI 初學者課程](https://aka.ms/ai-beginners)
- [資料科學初學者課程](https://aka.ms/datascience-beginners)
- [機器學習初學者課程](https://aka.ms/ml-beginners)
- [網絡安全初學者課程](https://github.com/microsoft/Security-101)
- [網頁開發初學者課程](https://aka.ms/webdev-beginners)
- [物聯網初學者課程](https://aka.ms/iot-beginners)
- [XR 開發入門](https://github.com/microsoft/xr-development-for-beginners)
- [GitHub Copilot 高手指南：智能應用](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [GitHub Copilot 高手指南：C#/.NET 開發者](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [選擇你的 Copilot 冒險](https://github.com/microsoft/CopilotAdventures)
---
### 創生式 AI 系列
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 核心學習
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot 系列
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求幫助
## 獲取協助
如果你遇到困難或對建立 AI 應用有任何疑問，請加入：
如果您遇到困難或有任何關於構建 AI 應用的問題，請加入其他學習者和有經驗的開發者，一起討論 MCP。這是一個支持性社群，歡迎任何問題並自由分享知識。
[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你有產品反饋或在開發過程中遇到錯誤，請訪問：
如果您有產品反饋或在構建過程中遇到錯誤，請訪問：
[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 授權條款
此存儲庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 文件。
此倉庫採用 MIT 授權條款。詳細資訊請參閱[LICENSE](../../LICENSE)文件。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於提供準確的翻譯，但自動翻譯仍可能包含錯誤或不準確之處。原始語言文件應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們對於因使用本翻譯而產生的任何誤解或誤譯概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

4
translations/hk/for-teachers.md
Unescape View File

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上面的 Moodle 文件，該文件也可以上傳到 Canvas。
- 導入後，請檢查模塊、截止日期和測驗設置，以匹配您的學期安排。
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.hk.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.hk.png)
> Moodle 課堂中的課程內容
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.hk.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.hk.png)
> Canvas 課堂中的課程內容
### 直接使用資源庫（不使用 Classroom）

2
translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md
Unescape View File

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
今日は、現代のウェブ開発を可能にするだけでなく、夢中にさせる素晴らしいツールを探求します。NetflixやSpotify、そしてお気に入りのインディーアプリスタジオの開発者が毎日使っているエディター、ブラウザ、ワークフローについて話します。そして、これがあなたを踊りたくさせる部分です：これらのプロ仕様の業界標準ツールのほとんどが完全に無料なんです！
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ja.png)
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ja.png)
> スケッチノート提供：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

4
translations/ja/1-getting-started-lessons/2-github-basics/README.md
Unescape View File

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
一歩ずつ一緒に進んでいきましょう。急がず、プレッシャーもなしで、あなたと私、そしてこれからあなたの新しい親友になる本当にクールなツールたちと一緒に！
![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ja.png)
![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f9.ja.png)
> スケッチノート提供：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -593,7 +593,7 @@ flowchart TD
✅ '初心者向け'リポジトリを見つける良い方法は、[タグ 'good-first-issue' で検索すること](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)です。
![リポジトリをローカルにコピー](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ja.png)
![リポジトリをローカルにコピー](../../../../translated_images/clone_repo.5085c48d666ead57.ja.png)
コードをコピーする方法はいくつかあります。一つの方法は、HTTPS、SSH、またはGitHub CLI（コマンドラインインターフェース）を使用してリポジトリの内容を「クローン」することです。

2
translations/ja/1-getting-started-lessons/3-accessibility/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# アクセシブルなウェブページの作成
![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ja.png)
![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/ja/2-js-basics/1-data-types/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScriptの基本: データ型
![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ja.png)
![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/ja/2-js-basics/2-functions-methods/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScriptの基本: メソッドと関数
![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ja.png)
![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/ja/2-js-basics/3-making-decisions/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScriptの基本: 判断をする
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ja.png)
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)

2
translations/ja/2-js-basics/4-arrays-loops/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScriptの基本: 配列とループ
![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ja.png)
![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

4
translations/ja/3-terrarium/1-intro-to-html/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ja.png)
![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
HTML（HyperText Markup Language）は、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。
@ -88,7 +88,7 @@ HTMLコードに取り掛かる前に、テラリウムプロジェクトの適
4. エクスプローラペインで「新しいファイル」アイコンをクリック
5. ファイル名を`index.html`にする
![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ja.png)
![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb9.ja.png)
**オプション2: ターミナルコマンドを使用する場合**
```bash

6
translations/ja/3-terrarium/2-intro-to-css/README.md
Unescape View File

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ja.png)
![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
HTMLで作ったテラリウムが少しシンプルすぎると感じませんでしたか？CSSを使えば、その基本的な構造を視覚的に魅力的なものに変えることができます。
@ -205,7 +205,7 @@ body {
ブラウザの開発者ツール（F12）を開き、Elementsタブに移動して`<h1>`要素を検査してください。`body`からフォントファミリーを継承していることがわかります:
![継承されたフォント](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ja.png)
![継承されたフォント](../../../../translated_images/1.cc07a5cbe114ad1d.ja.png)
✅ **実験タイム**: `<body>`に`color`、`line-height`、`text-align`などの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるでしょうか？
@ -562,7 +562,7 @@ Agentモードを使用して次のチャレンジを完了してください:
ガラス表面に光が反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ルネサンスの画家ヤン・ファン・エイクが光と反射を使って描かれたガラスを三次元的に見せた方法に似ています。目指すべきものは以下の通りです:
![完成したテラリウム](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ja.png)
![完成したテラリウム](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ja.png)
**チャレンジ内容:**
- **作成** ガラスの反射をシミュレートする微妙な白または明るい色の楕円形

8
translations/ja/3-terrarium/3-intro-to-DOM-and-closures/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOMとクロージャ](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ja.png)
![DOMとクロージャ](../../../../translated_images/webdev101-js.10280393044d7eaa.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
ウェブ開発の最も魅力的な側面の一つへようこそ！インタラクティブな要素を作ることです。Document Object Model (DOM) は、HTMLとJavaScriptをつなぐ橋のようなもので、今日はこれを使ってテラリウムを動かします。ティム・バーナーズ＝リーが最初のウェブブラウザを作ったとき、彼は動的でインタラクティブなドキュメントを想像していました。そのビジョンを可能にするのがDOMです。
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ja.png)
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
> DOMとそれを参照するHTMLマークアップの表現。出典: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **クロージャの理解**: クロージャはJavaScriptの重要なトピックであり、多くの開発者が理論的な側面を完全に理解する前に何年も使用します。今日は実践的な応用に焦点を当てます。インタラクティブな機能を構築する中で、自然にその仕組みが見えてくるでしょう。理解は実際の問題を解決する方法を見ることで深まります。
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ja.png)
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
> DOMとそれを参照するHTMLマークアップの表現。出典: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -589,7 +589,7 @@ function stopElementDrag() {
- **デバイス間の互換性**: デスクトップとモバイルで動作
- **パフォーマンス意識**: メモリリークや冗長な計算なし
![完成したテラリウム](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ja.png)
![完成したテラリウム](../../../../translated_images/terrarium-final.0920f16e87c13a84.ja.png)
---

45
translations/ja/3-terrarium/README.md
Unescape View File

@ -1,43 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-23T22:23:43+00:00",
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-06T14:31:31+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "ja"
}
-->
# 私のテラリウム: HTML、CSS、そしてJavaScriptを使ったDOM操作を学ぶプロジェクト 🌵🌱
## Terrarium をデプロイする
小さなドラッグ＆ドロップのコード瞑想。少しのHTML、JS、CSSを使って、ウェブインターフェースを構築し、スタイルを設定し、さらに自分の選んだ複数のインタラクションを追加することができます。
**Azure Static Web Apps** を使って、Terrarium をウェブにデプロイ（公開）できます。
![my terrarium](../../../3-terrarium/images/screenshot_gray.png)
1. このリポジトリをフォークします
# レッスン
2. このボタンを押します 👇
1. [HTMLの紹介](./1-intro-to-html/README.md)
2. [CSSの紹介](./2-intro-to-css/README.md)
3. [DOMとJSクロージャーの紹介](./3-intro-to-DOM-and-closures/README.md)
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
## クレジット
3. セットアップウィザードに従ってアプリを作成します。
- **App root** は `/solution` またはコードベースのルートに設定します。
- このアプリには API がないため、API の設定はスキップできます。
- Azure Static Web Apps がアプリをビルドおよび公開するために `.github` フォルダーが自動的に作成されます。
♥️ を込めて [Jen Looper](https://www.twitter.com/jenlooper) によって執筆されました。
---
CSSで作成されたテラリウムは、Jakub Mandraのガラス瓶 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) にインスパイアされています。
アートワークは [Jen Looper](http://jenlooper.com) によって手描きされ、Procreateの助けを借りて制作されました。
## テラリウムをデプロイする
Azure Static Web Appsを使用して、テラリウムをウェブ上にデプロイ（公開）することができます。
1. このリポジトリをフォークする
2. このボタンを押す
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. ウィザードを進めてアプリを作成します。アプリのルートを `/solution` またはコードベースのルートに設定することを忘れないでください。このアプリにはAPIがないので、APIの追加について心配する必要はありません。フォークしたリポジトリ内にGitHubフォルダが作成され、Azure Static Web Appsのビルドサービスがアプリをビルドし、新しいURLに公開するのを助けます。
**免責事項**:
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は一切の責任を負いません。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**：
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文が権威ある正式な資料とみなされます。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の使用に起因するいかなる誤解や誤訳についても、一切の責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

10
translations/ja/5-browser-extension/1-about-browsers/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![ブラウザのスケッチノート](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ja.jpg)
![ブラウザのスケッチノート](../../../../translated_images/browser.60317c9be8b7f84a.ja.jpg)
> スケッチノート: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## 講義前クイズ
@ -79,7 +79,7 @@ mindmap
✅ **少し歴史を振り返る**: 最初のブラウザは「WorldWideWeb」と呼ばれ、1990年にサー・ティモシー・バーナーズ＝リーによって作成されました。
![初期のブラウザ](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ja.jpg)
![初期のブラウザ](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ja.jpg)
> 初期のブラウザのいくつか, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### ブラウザがウェブコンテンツを処理する方法
@ -198,7 +198,7 @@ quadrantChart
拡張機能のインストールプロセスを理解することで、ユーザーが拡張機能をインストールする際の体験を予測できます。インストールプロセスは、モダンブラウザ間で標準化されていますが、インターフェースデザインに若干の違いがあります。
![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ja.png)
![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ja.png)
> **重要**: 開発者モードをオンにし、自分の拡張機能をテストする際には他のストアからの拡張機能を許可してください。
@ -313,10 +313,10 @@ project-root/
### 拡張機能ビューの概要
**設定ビュー** - 初回ユーザー設定:
![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ja.png)
![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/1.b6da8c1394b07491.ja.png)
**結果ビュー** - カーボンフットプリントデータの表示:
![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ja.png)
![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/2.1dae52ff08042246.ja.png)
### 設定フォームの構築

2
translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md
Unescape View File

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ja.png)
![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d1.ja.png)
> ⚠️ **セキュリティ上の考慮事項**: 実際のアプリケーションでは、LocalStorageにAPIキーを保存することはセキュリティリスクを伴います。JavaScriptがこのデータにアクセスできるためです。学習目的ではこの方法で問題ありませんが、実際のアプリケーションでは機密資格情報を安全なサーバー側ストレージに保存する必要があります。

6
translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md
Unescape View File

@ -126,7 +126,7 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
これを試してみましょう。ウェブサイト（Microsoft.comが適しています）を開き、「記録」ボタンをクリックします。次にページをリフレッシュして、プロファイラーが何が起きているかをキャプチャする様子を観察します。記録を停止すると、ブラウザがサイトを「スクリプト化」、「レンダリング」、「ペイント」する方法の詳細な内訳が表示されます。これは、ロケット打ち上げ中にミッションコントロールがすべてのシステムを監視する方法を思い出させます。リアルタイムで何が起きているか、いつ起きているかのデータを得ることができます。
![Edgeプロファイラー](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ja.png)
![Edgeプロファイラー](../../../../translated_images/profiler.5a4a62479c5df01c.ja.png)
✅ [Microsoftのドキュメント](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)には、さらに詳しい情報がたくさんあります。
@ -136,11 +136,11 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
プロファイルタイムラインの一部を選択して、概要ペインでページのパフォーマンスのスナップショットを取得します:
![Edgeプロファイラースナップショット](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ja.png)
![Edgeプロファイラースナップショット](../../../../translated_images/snapshot.97750180ebcad737.ja.png)
イベントログペインを確認して、15ms以上かかったイベントがあるかどうかを確認します:
![Edgeイベントログ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ja.png)
![Edgeイベントログ](../../../../translated_images/log.804026979f3707e0.ja.png)
✅ プロファイラーを使いこなしてください！このサイトで開発者ツールを開き、ボトルネックがあるかどうかを確認してください。最も遅く読み込まれるアセットは何ですか？最も速いものは？

8
translations/ja/6-space-game/2-drawing-to-canvas/README.md
Unescape View File

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![キャンバスのグリッド](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ja.png)
![キャンバスのグリッド](../../../../translated_images/canvas_grid.5f209da785ded492.ja.png)
> 画像提供: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
キャンバス要素に描画するには、キャンバスグラフィックの基礎を形成する同じ3ステップのプロセスに従います。このプロセスを数回行うと、自然に身につきます。
@ -329,11 +329,11 @@ Canvas要素を含むウェブページを作成します。黒い画面 `1024*7
- ヒーローの船
![ヒーローの船](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ja.png)
![ヒーローの船](../../../../translated_images/player.dd24c1afa8c71e9b.ja.png)
- 5×5のモンスター
![モンスターの船](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ja.png)
![モンスターの船](../../../../translated_images/enemyShip.5df2a822c16650c2.ja.png)
### 開発を始めるための推奨ステップ
@ -468,7 +468,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
完成した結果は以下のようになります:
![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ja.png)
![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ja.png)
## 解答

2
translations/ja/6-space-game/5-keeping-score/README.md
Unescape View File

@ -160,7 +160,7 @@ sequenceDiagram
```
- **スコアリングシステム**: 敵の船を破壊するたびに100ポイントが与えられます（丸い数字はプレイヤーが頭の中で計算しやすいです）。スコアは画面左下に表示されます。
- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ja.png)。
- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413.ja.png)。
## 作り始めましょう！

2
translations/ja/7-bank-project/1-template-route/README.md
Unescape View File

@ -635,7 +635,7 @@ sequenceDiagram
`history.pushState`を使用するとブラウザのナビゲーション履歴に新しいエントリが作成されます。ブラウザの*戻るボタン*を押し続けると、次のような履歴が表示されるはずです:
![ナビゲーション履歴のスクリーンショット](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ja.png)
![ナビゲーション履歴のスクリーンショット](../../../../translated_images/history.7fdabbafa521e064.ja.png)
戻るボタンを数回クリックしてみると、現在のURLが変更され履歴が更新されますが、同じテンプレートが表示され続けます。

10
translations/ja/7-bank-project/2-forms/README.md
Unescape View File

@ -295,7 +295,7 @@ graph TD
2. ブラウザのアドレスバーの変化を観察
3. ページがリロードされ、データがURLに表示されることに気づく
![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ja.png)
![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ja.png)
### HTTPメソッドの比較
@ -350,7 +350,7 @@ graph TD
2. **「アカウント作成」ボタンをクリック**
3. **ブラウザでサーバー応答を確認**
![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ja.png)
![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/form-post.61de4ca1b964d91a.ja.png)
**確認すべきこと:**
- **ブラウザがAPIエンドポイントURLにリダイレクト**
@ -565,7 +565,7 @@ async function register() {
3. **「アカウント作成」をクリック**
4. **コンソールメッセージとユーザーフィードバックを確認**
![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ja.png)
![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/browser-console.efaf0b51aaaf6778.ja.png)
**期待される結果:**
- **送信ボタンにローディング状態**が表示される
@ -740,7 +740,7 @@ input:focus:invalid {
3. **ユーザー名フィールドに特殊文字を入力**
4. **負の残高額を入力**
![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ja.png)
![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/validation-error.8bd23e98d416c22f.ja.png)
**観察されること:**
- **ブラウザがネイティブのバリデーションメッセージを表示**
@ -871,7 +871,7 @@ timeline
以下は、CSSスタイルを追加した後のログインページの最終的な例です：
![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ja.png)
![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/result.96ef01f607bf856a.ja.png)
## 講義後のクイズ

8
translations/ja/7-bank-project/3-data/README.md
Unescape View File

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ja.png)
![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/mpa.7f7375a1a2d4aa77.ja.png)
**このアプローチがぎこちなく感じられた理由:**
- クリックするたびにページ全体を再構築する必要があった
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ja.png)
![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/spa.268ec73b41f992c2.ja.png)
**SPAがより快適に感じられる理由:**
- 実際に変更された部分だけが更新される（賢いですよね？）
@ -510,7 +510,7 @@ if (data.error) {
無効なアカウントでテストすると、ページ上に役立つエラーメッセージが表示されるようになります！
![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ja.png)
![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/login-error.416fe019b36a6327.ja.png)
#### ステップ4: アクセシビリティを考慮する
@ -904,7 +904,7 @@ Agentモードを使用して以下のチャレンジを完了してください
以下は、スタイリング後のダッシュボードの例のスクリーンショットです:
![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ja.png)
![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/screen2.123c82a831a1d14a.ja.png)
これを完全に再現する必要はありません。インスピレーションとして使用し、自分のスタイルで仕上げてください！

2
translations/ja/7-bank-project/4-state-management/README.md
Unescape View File

@ -190,7 +190,7 @@ mindmap
無駄な努力をする代わりに、**集中型状態管理**システムを作成します。これは、すべての重要なものを整理する1人の非常に組織的な人がいるようなものです:
![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ja.png)
![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/data-flow.fa2354e0908fecc8.ja.png)
```mermaid
flowchart TD

2
translations/ja/7-bank-project/4-state-management/assignment.md
Unescape View File

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**期待される結果:**
この課題を完了すると、銀行アプリには完全に機能する「取引追加」機能が備わり、プロフェッショナルな外観と動作を持つようになります：
![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ja.png)
![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/dialog.93bba104afeb79f1.ja.png)
## 実装のテスト

14
translations/ja/8-code-editor/1-using-a-code-editor/README.md
Unescape View File

@ -185,7 +185,7 @@ VSCode.devはこれらの機能をブラウザに提供します:
すべてが読み込まれると、コードに集中できるように設計された美しくクリーンなワークスペースが表示されます。
![デフォルトのVSCode.devインターフェース](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ja.png)
![デフォルトのVSCode.devインターフェース](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ja.png)
**ワークスペースのツアー:**
- **アクティビティバー**（左側のストリップ）: エクスプローラー📁、検索🔍、ソースコントロール🌿、拡張機能🧩、設定⚙️などのメインナビゲーション
@ -233,7 +233,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
1. [vscode.dev](https://vscode.dev)にアクセス（まだアクセスしていない場合）
2. ウェルカム画面で「Open Remote Repository」ボタンを探してクリック
![リモートリポジトリを開く](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ja.png)
![リモートリポジトリを開く](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ja.png)
3. 任意のGitHubリポジトリURLを貼り付け（例: `https://github.com/microsoft/Web-Dev-For-Beginners`）
4. Enterキーを押して魔法を体験！
@ -242,7 +242,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
コーディングの魔法使いのように感じたいですか？このキーボードショートカットを試してください: Ctrl+Shift+P（MacではCmd+Shift+P）でコマンドパレットを開く:
![コマンドパレット](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ja.png)
![コマンドパレット](../../../../translated_images/palette-menu.4946174e07f42622.ja.png)
**コマンドパレットは、できることすべての検索エンジンのようなものです:**
- 「open remote」と入力するとリポジトリオープナーを見つけられます
@ -304,7 +304,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
3. 適切な拡張子を含むファイル名を入力（例: `style.css`, `script.js`, `index.html`）
4. Enterキーを押してファイルを作成
![新しいファイルを作成](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ja.png)
![新しいファイルを作成](../../../../translated_images/create-new-file.2814e609c2af9aeb.ja.png)
**命名規則:**
- ファイルの目的を示す説明的な名前を使用
@ -322,7 +322,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
2. タイピングを開始すると、VSCode.devが色付け、提案、エラー検出で助けてくれます
3. Ctrl+S（Windows/Linux）またはCmd+S（Mac）で作業を保存 - 自動保存もあります！
![VSCode.devでファイルを編集](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ja.png)
![VSCode.devでファイルを編集](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ja.png)
**コーディング中に起こる素晴らしいこと:**
- コードが美しく色分けされ、読みやすくなる
@ -395,7 +395,7 @@ mindmap
2. 探索するか、特定のものを検索
3. 興味深いものをクリックして詳細を確認
![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ja.png)
![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/extensions.eca0e0c7f59a10b5.ja.png)
**中にあるもの：**
@ -448,7 +448,7 @@ mindmap
3. ドロップダウンから「拡張機能設定」を選択
4. ワークフローに合うように調整
![拡張機能設定のカスタマイズ](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ja.png)
![拡張機能設定のカスタマイズ](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ja.png)
**調整したい一般的な項目：**
- コードのフォーマット方法（タブ vs スペース、行の長さなど）

6
translations/ja/8-code-editor/1-using-a-code-editor/assignment.md
Unescape View File

@ -78,7 +78,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
4. コミットメッセージを記入：「初期HTML構造を追加」
5. 「Commit new file」をクリックして変更を保存
![GitHubで初期ファイルを作成](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ja.png)
![GitHubで初期ファイルを作成](../../../../translated_images/new-file-github.com.c886796d800e8056.ja.png)
**この初期設定で達成されること：**
- **HTML5ドキュメント構造**をセマンティック要素で確立
@ -104,7 +104,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
✅ **成功の指標**: Explorerサイドバーにプロジェクトファイルが表示され、メインエディタエリアで`index.html`が編集可能になります。
![VSCode.devでプロジェクトを読み込む](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ja.png)
![VSCode.devでプロジェクトを読み込む](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ja.png)
**インターフェースで見えるもの：**
- **Explorerサイドバー**: リポジトリのファイルとフォルダ構造を表示
@ -448,7 +448,7 @@ li:before {
**インストール後の即時結果：**
CodeSwingがインストールされると、履歴書ウェブサイトのライブプレビューがエディタに表示されます。これにより、変更を加えるたびにサイトの外観を正確に確認できます。
![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ja.png)
![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ja.png)
**強化されたインターフェースの理解：**
- **分割ビュー**: コードとライブプレビューを並べて表示

10
translations/ja/9-chat-project/README.md
Unescape View File

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
完成したプロジェクトは以下のようになります:
![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ja.png)
![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/screenshot.0a1ee0d123df681b.ja.png)
## 🗺️ AIアプリケーション開発の学習の旅
@ -194,7 +194,7 @@ mindmap
**基本原則**: AIアプリケーション開発は、従来のウェブ開発スキルとAIサービス統合を組み合わせ、自然で応答性の高いインテリジェントなアプリケーションを作成します。
![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ja.png)
![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/playground.d2b927122224ff8f.ja.png)
**Playgroundが非常に便利な理由:**
- **試す**: GPT-4o-mini、Claudeなどの異なるAIモデルを無料で試せる
@ -204,7 +204,7 @@ mindmap
少し試してみたら、「Code」タブをクリックしてプログラミング言語を選択し、必要な実装コードを取得するだけです。
![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ja.png)
![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/playground-choice.1d23ba7d407f4758.ja.png)
## Pythonバックエンド統合のセットアップ
@ -2139,14 +2139,14 @@ mindmap
- **[Web Dev For Beginnersリポジトリ](https://github.com/microsoft/Web-Dev-For-Beginners)**に移動
- **右上の「Use this template」**をクリック（GitHubにログインしていることを確認）
![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ja.png)
![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/template.67ad477109d29a2b.ja.png)
**ステップ2: Codespacesを起動**
- **新しく作成したリポジトリを開く**
- **緑色の「Code」ボタンをクリックし、「Codespaces」を選択**
- **「Create codespace on main」を選択して開発環境を開始**
![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ja.png)
![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/codespace.bcecbdf5d2747d3d.ja.png)
**ステップ3: 環境設定**
Codespaceが読み込まれると、以下にアクセスできます：

250
translations/ja/README.md
Unescape View File

@ -1,221 +1,237 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:27:04+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-06T14:29:42+00:00",
"source_file": "README.md",
"language_code": "ja"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初心者のためのウェブ開発 - カリキュラム
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識を効果的に定着させましょう。今日からコーディングの旅を始めましょう！
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基本を学びましょう。24のレッスンそれぞれで、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを学びます。クイズ、ディスカッション、実践的な課題にも参加できます。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングの旅を始めてみませんか！
Azure AI Foundry Discordコミュニティに参加しましょう
Azure AI Foundry Discordコミュニティに参加
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
以下の手順に従って、このリソースを使い始めてください：
1. **リポジトリをフォークする**: [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) をクリック
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discordに参加して、専門家や他の開発者と交流する**](https://discord.com/invite/ByRwuEEgH4)
これらのリソースを使い始めるには、以下の手順に従ってください：
1. **リポジトリをフォーク**：クリック [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **リポジトリをクローン**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discordに参加し、専門家や仲間の開発者と交流**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多言語サポート
#### GitHub Actionによるサポート (自動化され、常に最新)
#### GitHub Actionを通じてサポート（自動かつ常に最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[アラビア語](../ar/README.md) | [ベンガル語](../bn/README.md) | [ブルガリア語](../bg/README.md) | [ビルマ語 (ミャンマー)](../my/README.md) | [中国語 (簡体字)](../zh/README.md) | [中国語 (繁体字, 香港)](../hk/README.md) | [中国語 (繁体字, マカオ)](../mo/README.md) | [中国語 (繁体字, 台湾)](../tw/README.md) | [クロアチア語](../hr/README.md) | [チェコ語](../cs/README.md) | [デンマーク語](../da/README.md) | [オランダ語](../nl/README.md) | [エストニア語](../et/README.md) | [フィンランド語](../fi/README.md) | [フランス語](../fr/README.md) | [ドイツ語](../de/README.md) | [ギリシャ語](../el/README.md) | [ヘブライ語](../he/README.md) | [ヒンディー語](../hi/README.md) | [ハンガリー語](../hu/README.md) | [インドネシア語](../id/README.md) | [イタリア語](../it/README.md) | [日本語](./README.md) | [韓国語](../ko/README.md) | [リトアニア語](../lt/README.md) | [マレー語](../ms/README.md) | [マラーティー語](../mr/README.md) | [ネパール語](../ne/README.md) | [ノルウェー語](../no/README.md) | [ペルシャ語 (ファルシー)](../fa/README.md) | [ポーランド語](../pl/README.md) | [ポルトガル語 (ブラジル)](../br/README.md) | [ポルトガル語 (ポルトガル)](../pt/README.md) | [パンジャブ語 (グルムキー)](../pa/README.md) | [ルーマニア語](../ro/README.md) | [ロシア語](../ru/README.md) | [セルビア語 (キリル文字)](../sr/README.md) | [スロバキア語](../sk/README.md) | [スロベニア語](../sl/README.md) | [スペイン語](../es/README.md) | [スワヒリ語](../sw/README.md) | [スウェーデン語](../sv/README.md) | [タガログ語 (フィリピン)](../tl/README.md) | [タミル語](../ta/README.md) | [タイ語](../th/README.md) | [トルコ語](../tr/README.md) | [ウクライナ語](../uk/README.md) | [ウルドゥー語](../ur/README.md) | [ベトナム語](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](./README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **ローカルでのクローンを希望されますか？**
> このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大きくなります。翻訳なしでクローンするには、スパースチェックアウトを使用してください：
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> これにより、コースを完了するために必要なすべてが含まれ、より高速にダウンロードできます。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**追加の翻訳を希望する場合は、[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)にサポートされている言語が記載されています。**
**追加の翻訳言語をご希望の場合は [こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) に記載されています**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _学生の皆さんへ_
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)を訪問して、初心者向けリソース、学生パック、さらには無料の認定証バウチャーを取得する方法を見つけてください。このページは毎月内容が更新されるので、ブックマークして定期的にチェックすることをお勧めします。
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)をご覧ください。初心者向けリソース、学生パック、無料の証明書バウチャー獲得方法も掲載しています。このページはブックマークして、毎月更新されるコンテンツを随時チェックしてください。
### 📣 お知らせ - GitHub Copilot Agentモードの新たなチャレンジが登場！
### 📣 お知らせ - 新しいGitHub Copilot Agentモードチャレンジが追加されました！
「GitHub Copilot Agent Challenge 🚀」という新チャレンジが多くの章に追加されました。GitHub CopilotとAgentモードを使ってクリアしてください。Agentモードはテキスト生成だけでなく、ファイル作成や編集、コマンド実行も可能です。まだ使ったことがない方はぜひお試しください。
新しいチャレンジが追加されました。ほとんどの章で「GitHub Copilot Agent Challenge 🚀」を探してください。GitHub CopilotとAgentモードを使用して完了する新しいチャレンジです。Agentモードを初めて使用する場合、テキストの生成だけでなく、ファイルの作成や編集、コマンドの実行なども可能です。
### 📣 お知らせ - ジェネレーティブAIを使った新プロジェクト追加
### 📣 お知らせ - _生成AIを使用した新しいプロジェクト_
新しいAIアシスタントプロジェクトが追加されました。詳細は[プロジェクト](./9-chat-project/README.md)をチェック！
新しいAIアシスタントプロジェクトが追加されました。詳細は[プロジェクト](./09-chat-project/README.md)をご覧ください。
### 📣 お知らせ - JavaScriptのジェネレーティブAI用新カリキュラムリリース
### 📣 お知らせ - _JavaScript向け生成AIの新しいカリキュラムがリリースされました_
ジェネレーティブAIの新カリキュラムをお見逃しなく！
新しい生成AIカリキュラムをお見逃しなく！
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)で今すぐ始めましょう！
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう！
![Background](../../translated_images/background.148a8d43afde5730.ja.png)
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ja.png)
- 基礎からRAGまでをカバーするレッスン。
- GenAIと連携アプリで歴史上の人物と対話。
- 楽しく魅力的な物語形式でタイムトラベル体験！
- 基礎からRAGまでをカバーするレッスン
- GenAIと連携アプリを使用して歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベル体験！
![character](../../translated_images/character.5c0dd8e067ffd693.ja.png)
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ja.png)
各レッスンには、完了すべき課題、知識チェック、チャレンジが含まれており、以下のトピックを学ぶのに役立ちます：
各レッスンには課題、知識チェック、チャレンジが含まれており、以下のようなトピックを学びます：
- プロンプトとプロンプトエンジニアリング
- テキストと画像アプリの生成
- テキストおよび画像のアプリ生成
- 検索アプリ
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう！
[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)で今すぐ始めましょう！
## 🌱 始め方
> **教師の皆さん**、このカリキュラムの使用方法について[いくつかの提案](for-teachers.md)を含めています。フィードバックは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でお待ちしています！
**[学習者の皆さん](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**、各レッスンでは、事前クイズから始め、講義資料を読み、さまざまなアクティビティを完了し、事後クイズで理解を確認してください。
## 🌱 はじめに
学習体験を向上させるために、仲間と一緒にプロジェクトに取り組みましょう！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で奨励されており、モデレーターが質問に答えるために待機しています。
> **先生方へ**、このカリキュラムの使い方について[いくつかの提案](for-teachers.md)を用意しています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！
さらに学びを深めるために、[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)で追加の学習資料を探索することを強くお勧めします。
**[学習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**は各レッスンで、まず事前クイズから始め、講義資料の読解、様々なアクティビティに取り組み、事後クイズで理解度をチェックしましょう。
学習効果を高めるために、仲間とつながって一緒にプロジェクトに取り組むことをお勧めします！ディスカッションは[フォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で活発に行われており、モデレータチームが質問に対応します。
さらに学習を進めるには[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)で追加の教材を探すことを強く推奨します。
### 📋 環境のセットアップ
このカリキュラムには、すぐに使える開発環境が用意されています！始める際には、[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）を使用するか、ローカルのコンピュータで[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)のようなテキストエディタを使用して実行することができます。
このカリキュラムは開発環境がすぐ利用できる状態になっています！開始時には[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）またはテキストエディタ（例：[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）を使ってローカルに実行できます。
#### リポジトリを作成する
作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の **Use this template** ボタンをクリックすると、カリキュラムのコピーが含まれた新しいリポジトリがGitHubアカウントに作成されます。
#### リポジトリを作成しましょう
作業を保存しやすくするため、リポジトリのコピーを自分のGitHubアカウントに作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、カリキュラムのコピーを含む新しいリポジトリが作成されます。
以下の手順に従ってください：
1. **リポジトリをフォークする**: このページの右上にある「Fork」ボタンをクリックします。
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **リポジトリをフォーク**：ページ右上の「Fork」ボタンをクリック。
2. **リポジトリをクローン**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespaceでカリキュラムを実行する
作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択します。これにより、作業用の新しいCodespaceが作成されます。
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択すると、新しいCodespaceが作成されます。
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ja.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ja.png)
#### ローカルコンピュータでカリキュラムを実行する
#### ご自身のコンピューターでカリキュラムを実行する
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを案内し、最適なものを選択できるようにします。
ローカルで実行するにはテキストエディタ、ブラウザー、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、それぞれのツールの選択肢を紹介し、最適なものを選べるようガイドします。
私たちのおすすめは、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)をエディタとして使用することです。これには、組み込みの[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も含まれています。[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からVisual Studio Codeをダウンロードできます。
おすすめは[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)で、内蔵の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も利用可能です。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。
1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーします：
[CodeSpace](./images/createcodespace.png)
1. GitHub上のリポジトリをクローンしてください。**Code**ボタンをクリックし、URLをコピーして使用します。
次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)内の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。`<your-repository-url>` をコピーしたURLに置き換えてください：
[CodeSpace](./images/createcodespace.png)
それから、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)内の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。`<your-repository-url>`は先ほどコピーしたURLに置き換えてください。
```bash
git clone <your-repository-url>
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder** をクリックし、クローンしたフォルダを選択します。
2. Visual Studio Codeでフォルダーを開きます。これは**ファイル** > **フォルダーを開く** をクリックし、先ほどクローンしたフォルダーを選択することで行えます。
> 推奨されるVisual Studio Code拡張機能:
> 推奨されるVisual Studio Code拡張機能：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くスピードを上げるための支援ツール
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コーディングをより速くするための支援ツール
## 📂 各レッスンには以下が含まれます：
## 📂 各レッスンには以下が含まれます:
- オプションのスケッチノート
- オプションの補足動画
- 任意のスケッチノート
- 任意の補足ビデオ
- レッスン前のウォームアップクイズ
- 書かれたレッスン内容
- プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
- 書面によるレッスン
- プロジェクトベースのレッスンの場合は、プロジェクト開発のステップバイステップガイド
- 知識チェック
- チャレンジ
- 補足読書
- 課題
- [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/)
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダーに含まれており、3問ずつの合計48クイズがあります。クイズは[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、ローカルで実行するかAzureにデプロイすることができます。`quiz-app`フォルダーの指示に従ってください。
## 🗃️ レッスン
| | プロジェクト名 | 教えられる概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | はじめに | プログラミングとツールの基本 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするために使用するソフトウェアについて学ぶ | [プログラミング言語とツールの基本](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | はじめに | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの基本](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | はじめに | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基本](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本 | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JSの基本 | JSでの意思決定 | 意思決定方法を使用してコード内で条件を作成する方法を学ぶ | [意思決定](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [テラリウム](./3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作成するためのHTMLを構築し、レイアウト作成に焦点を当てる | [HTMLの紹介](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](./3-terrarium/solution/README.md) | CSSの実践 | オンラインテラリウムをスタイル付けするためのCSSを構築し、レスポンシブデザインを含むCSSの基本に焦点を当てる | [CSSの紹介](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [テラリウム](./3-terrarium/solution/README.md) | JavaScriptクロージャ、DOM操作 | テラリウムをドラッグ＆ドロップインターフェースとして機能させるためのJavaScriptを構築し、クロージャとDOM操作に焦点を当てる | [JavaScriptクロージャ、DOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [タイピングゲーム](./4-typing-game/solution/README.md) | タイピングゲームを作成 | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザの操作 | ブラウザの仕組み、その歴史、ブラウザ拡張機能の最初の要素をスキャフォールドする方法を学ぶ | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | フォームの作成、APIの呼び出し、ローカルストレージに変数を保存 | ローカルストレージに保存された変数を使用してAPIを呼び出すためのブラウザ拡張機能のJavaScript要素を構築する | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学ぶ | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [スペースゲーム](./6-space-game/solution/README.md) | JavaScriptを使ったより高度なゲーム開発 | クラスとコンポジションを使用した継承と、ゲーム構築の準備としてのPub/Subパターンについて学ぶ | [高度なゲーム開発の紹介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [スペースゲーム](./6-space-game/solution/README.md) | キャンバスへの描画 | 画面に要素を描画するために使用されるCanvas APIについて学ぶ | [キャンバスへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [スペースゲーム](./6-space-game/solution/README.md) | 画面上の要素の移動 | カートesian座標とCanvas APIを使用して要素に動きを与える方法を発見する | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [スペースゲーム](./6-space-game/solution/README.md) | 衝突検出 | キー入力を使用して要素を衝突させ、反応させる方法を学び、ゲームのパフォーマンスを確保するためのクールダウン機能を提供する | [衝突検出](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [スペースゲーム](./6-space-game/solution/README.md) | スコアの保持 | ゲームの状態とパフォーマンスに基づいて数学的計算を行う | [スコアの保持](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [スペースゲーム](./6-space-game/solution/README.md) | ゲームの終了と再開 | ゲームの終了と再開について学び、アセットのクリーンアップと変数値のリセットを含む | [終了条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [バンキングアプリ](./7-bank-project/solution/README.md) | ウェブアプリでのHTMLテンプレートとルート | マルチページウェブサイトのアーキテクチャのスキャフォールドをルーティングとHTMLテンプレートを使用して作成する方法を学ぶ | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [バンキングアプリ](./7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォームの作成とバリデーションルーチンの処理について学ぶ | [フォーム](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [バンキングアプリ](./7-bank-project/solution/README.md) | データの取得と使用方法 | アプリ内でのデータの流れ、取得方法、保存方法、破棄方法について学ぶ | [データ](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [バンキングアプリ](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法と、それをプログラム的に管理する方法を学ぶ | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ブラウザ/VScodeコード](../../8-code-editor) | VScodeの操作 | コードエディタの使用方法を学ぶ | [VScodeコードエディタの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AIアシスタント](./9-chat-project/README.md) | AIの操作 | 独自のAIアシスタントを構築する方法を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
> **クイズについての注意**：すべてのクイズはQuiz-appフォルダーに収録されており、全48回のクイズが各3問ずつあります。これらは[ここ](https://ff-quizzes.netlify.app/web/)で利用可能です。クイズアプリはローカルで実行するかAzureにデプロイできます。詳細は`quiz-app`フォルダー内の指示に従ってください。
## 🗃️ レッスン一覧
| | プロジェクト名 | 教える概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :---------------------------------------------------------: | :-----------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | はじめに | プログラミングの紹介とツールの基礎知識 | ほとんどのプログラミング言語の基本的な基礎知識と、プロの開発者が仕事で使用するソフトウェアについて学びます | [プログラミング言語とツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | はじめに | GitHubの基本、チームでの作業 | GitHubの使い方、チームでコードベースを共同で作業する方法 | [GitHub入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | はじめに | アクセシビリティ | ウェブアクセシビリティの基礎を学びます | [アクセシビリティの基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS基礎 | JavaScriptのデータ型 | JavaScriptデータ型の基本を学びます | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学びます | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine と Christopher |
| 06 | JS基礎 | JSでの条件分岐作成 | 条件分岐メソッドを使ってコードに条件を作成する方法を学びます | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS基礎 | 配列とループ | JavaScriptで配列とループを使ってデータを扱う方法を学びます | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [テラリウム](./3-terrarium/solution/README.md) | 実践的HTML | オンラインテラリウムを作るためのHTMLを構築し、レイアウト作成に注力します | [HTML入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](./3-terrarium/solution/README.md) | 実践的CSS | オンラインテラリウムのスタイルを作るCSSを構築し、ページをレスポンシブ化する基本を学びます | [CSS入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [テラリウム](./3-terrarium/solution/README.md) | JavaScriptのクロージャとDOM操作 | ドラッグ＆ドロップインターフェイスにするJavaScriptを作成し、クロージャとDOM操作に注目します | [JavaScriptのクロージャとDOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [タイピングゲーム](./4-typing-game/solution/README.md) | タイピングゲームの作成 | キーボードイベントを使ってJavaScriptアプリのロジックを制御する方法を学びます | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | ブラウザーの仕組み | ブラウザーの仕組みと歴史、そしてブラウザー拡張機能の最初の要素の雛形を作る方法を学びます | [ブラウザーについて](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | フォームの作成、API呼び出し、ローカルストレージへの変数保存 | API呼び出しのためのJavaScript要素を作り、ローカルストレージに保存した変数を利用する方法を学びます | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | ブラウザーのバックグラウンド処理とウェブパフォーマンス | 拡張機能のアイコンを管理するためのブラウザーのバックグラウンド処理を利用し、ウェブパフォーマンス関連の最適化を学びます | [バックグラウンド処理とパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [スペースゲーム](./6-space-game/solution/README.md) | JavaScriptによる高度なゲーム開発 | クラスとコンポジションによる継承、Pub/Subパターンなどを学び、ゲーム開発の準備をします | [高度なゲーム開発入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [スペースゲーム](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するCanvas APIについて学びます | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [スペースゲーム](./6-space-game/solution/README.md) | 画面上での要素の移動 | 直交座標とCanvas APIを用いて要素に動きを付ける方法を発見します | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [スペースゲーム](./6-space-game/solution/README.md) | 衝突検出 | 要素同士の衝突検出やそれに対する反応、キー押下によるクールダウン機能を作り、ゲームのパフォーマンスを確保します | [衝突検出](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [スペースゲーム](./6-space-game/solution/README.md) | スコア管理 | ゲームの状態やパフォーマンスに基づいて数学計算を実施します | [スコア管理](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [スペースゲーム](./6-space-game/solution/README.md) | ゲーム終了と再開 | ゲームの終了と再開について学び、資源のクリーンアップや変数のリセット方法を学びます | [終了条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [バンキングアプリ](./7-bank-project/solution/README.md) | ウェブアプリにおけるHTMLテンプレートとルーティング | ルーティングとHTMLテンプレートを使ってマルチページサイトの構造を作る方法を学びます | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [バンキングアプリ](./7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォーム作成と検証処理の基礎を学びます | [フォーム](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [バンキングアプリ](./7-bank-project/solution/README.md) | データの取得と利用方法 | アプリ内のデータの流れ、取得、保存、処理方法を学びます | [データ](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [バンキングアプリ](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリがどのように状態を保持し、プログラム的に管理するかを学びます | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScodeの使い方 | コードエディターの使い方を学ぶ | [VScodeコードエディターの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AIアシスタント](./9-chat-project/README.md) | AIとの連携 | 独自のAIアシスタントの作成方法を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
## 🏫 教育方針
私たちのカリキュラムは、以下の2つの主要な教育方針に基づいて設計されています：
私たちのカリキュラムは、以下の二つの重要な教育原則に基づいて設計されています：
* プロジェクトベースの学習
* 頻繁なクイズ
このプログラムでは、JavaScript、HTML、CSSの基本と、現代のウェブ開発者が使用する最新のツールや技術を教えます。学生は、タイピングゲーム、仮想テラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダー風ゲーム、ビジネス向けバンキングアプリを構築することで、実践的な経験を積む機会を得ます。このシリーズの終わりまでに、学生はウェブ開発の確かな理解を得ることができます。
このプログラムではJavaScript、HTML、CSSの基礎から、今日のウェブ開発者が使用する最新のツールと技術を学べます。学習者はタイピングゲーム、バーチャルテラリウム、環境に優しいブラウザー拡張機能、スペースインベーダースタイルのゲーム、企業向けの銀行アプリを作成することで実践的な経験が得られます。シリーズの終了時点で、ウェブ開発に関する確かな理解を身につけられます。
> 🎓 このカリキュラムの最初の数レッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます！
> 🎓 このカリキュラムの最初のいくつかのレッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます！
内容がプロジェクトに沿っているため、学習者にとってより興味を引くものとなり、概念の定着が促進されます。またJavaScriptの基礎を紹介するスターター用のレッスンもいくつか用意し、同時に"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアル集から提供しており、その中の一部の作者も本カリキュラムの作成に貢献しています。
プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンを作成し、"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの一部の著者は、このカリキュラムにも貢献しています。
さらに、クラスの前に低難度のクイズを行うことで学習者の学習意図を高め、クラス後の別クイズで理解度のさらなる定着を図ります。このカリキュラムは柔軟かつ楽しく学べるよう設計されているため、一部だけでも全体でも受講可能です。プロジェクトは小さなものから始まり、12週間のサイクル終了時にはより複雑なものへと発展します。
さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらなる定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または一部を受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりにはますます複雑になります。
JavaScriptフレームワークの導入は意図的に避けており、基本的なウェブ開発スキルを身につけた後にフレームワーク導入に進むことを狙っています。このカリキュラムを終えた次のステップとして、別のビデオ集である"[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"でNode.jsを学ぶことを推奨します。
JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムを修了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。別のビデオコレクション: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"をご覧ください。
> 私たちの[行動規範](CODE_OF_CONDUCT.md)と[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なフィードバックを歓迎します！
> [行動規範](CODE_OF_CONDUCT.md)と[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なフィードバックをお待ちしています！
## 🧭 オフラインアクセス
[Docsify](https://docsify.js.org/#/)を使用して、このドキュメントをオフラインで実行できます。このリポジトリをフォークし、[Docsifyをインストール](https://docsify.js.org/#/quickstart)してローカルマシンにセットアップしてください。その後、このリポジトリのルートフォルダーで`docsify serve`と入力します。ウェブサイトはローカルホストのポート3000で提供されます：`localhost:3000`。
[Docsify](https://docsify.js.org/#/)を使ってこのドキュメントをオフラインで実行できます。このリポジトリをフォークし、ローカルマシンに[Docsifyをインストール](https://docsify.js.org/#/quickstart)した上で、このリポジトリのルートフォルダーで`docsify serve`と入力してください。ウェブサイトはローカルホストの3000番ポート（`localhost:3000`）で提供されます。
## 📘 PDF
すべてのレッスンのPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)で見つけることができます。
すべてのレッスンのPDFはこちらから入手できます: [ここ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。
## 🎒 その他のコース
私たちのチームは他のコースも制作しています！ぜひチェックしてください：
## 🎒 その他のコース
私たちのチームは他にもコースを提供しています！ぜひご覧ください：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / エージェント
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 生成AIシリーズ
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
@ -223,8 +239,8 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 基礎学習
### コアラーニング
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -234,7 +250,7 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilotシリーズ
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -243,11 +259,11 @@ JavaScriptフレームワークの導入を意図的に避け、フレームワ
## ヘルプを得る
AIアプリの構築で行き詰まったり、質問がある場合は、MCPに関する議論に参加してください。同じ学習者や経験豊富な開発者たちと交流できるサポートコミュニティで、質問は歓迎され、知識が自由に共有されます。
AIアプリの構築で困ったことがあったり質問がある場合は、学習者や経験豊富な開発者と一緒にMCPについて議論に参加しましょう。質問歓迎のサポートコミュニティで、知識が自由に共有されています。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
製品に関するフィードバックや構築中のエラーについては、以下を訪問してください：
製品のフィードバックや構築中のエラーについては、こちらをご覧ください：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -258,6 +274,6 @@ AIアプリの構築で行き詰まったり、質問がある場合は、MCPに
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**:
この文書は、AI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文（元の言語で記載された文書）を公式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の利用に起因する誤解や誤認について、当方は一切の責任を負いかねます。
**免責事項**：
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を用いて翻訳されました。正確さには努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語で記述された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間翻訳をご利用いただくことを推奨します。本翻訳の利用により生じたいかなる誤解や解釈の相違についても、当方は責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

4
translations/ja/for-teachers.md
Unescape View File

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle CloudはCommon Cartridgeのサポートが限定的です。上記のMoodleファイルを使用することを推奨します。このファイルはCanvasにもアップロード可能です。
- インポート後、モジュール、締切日、クイズ設定を学期スケジュールに合わせて確認してください。
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ja.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ja.png)
> Moodle教室でのカリキュラム
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ja.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ja.png)
> Canvasでのカリキュラム
### リポジトリを直接使用する場合（Classroomを使用しない場合）

2
translations/mo/1-getting-started-lessons/1-intro-to-programming-languages/README.md
Unescape View File

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
今天，我們將探索那些讓現代網頁開發不僅僅是可能，而且令人上癮的不可思議工具。我說的是Netflix、Spotify以及你最喜歡的獨立應用程式工作室的開發者每天都在使用的編輯器、瀏覽器和工作流程。而最讓人開心的是：大多數這些專業級、行業標準的工具都是完全免費的！
![程式設計簡介](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.mo.png)
![程式設計簡介](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.mo.png)
> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
```mermaid

4
translations/mo/1-getting-started-lessons/2-github-basics/README.md
Unescape View File

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
我們會一起踏上這段旅程，一步一步來。沒有匆忙，沒有壓力——只有你、我，以及一些即將成為你新好朋友的超酷工具！
![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.mo.png)
![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f9.mo.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ flowchart TD
✅ 找到 "適合初學者" 的儲存庫的一個好方法是 [透過標籤 'good-first-issue' 進行搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
![本地複製儲存庫](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.mo.png)
![本地複製儲存庫](../../../../translated_images/clone_repo.5085c48d666ead57.mo.png)
有幾種複製程式碼的方法。一種方法是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來 "克隆" 儲存庫的內容。

2
translations/mo/1-getting-started-lessons/3-accessibility/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# 建立無障礙網頁
![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mo.png)
![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.mo.png)
> Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/mo/2-js-basics/1-data-types/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基礎：資料型別
![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.mo.png)
![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.mo.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/mo/2-js-basics/2-functions-methods/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基礎：方法與函數
![JavaScript 基礎 - 函數](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.mo.png)
![JavaScript 基礎 - 函數](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.mo.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

2
translations/mo/2-js-basics/3-making-decisions/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基礎：做出決策
![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.mo.png)
![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.mo.png)
> Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)

2
translations/mo/2-js-basics/4-arrays-loops/README.md
Unescape View File

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基礎：陣列與迴圈
![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.mo.png)
![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.mo.png)
> Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

4
translations/mo/3-terrarium/1-intro-to-html/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.mo.png)
![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98.mo.png)
> 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
HTML，即超文本標記語言，是您曾經瀏覽過的每個網站的基礎。可以將HTML想像成網頁的骨架——它定義了內容的位置、組織方式以及每個部分的意義。雖然CSS稍後會用顏色和佈局來“裝飾”您的HTML，JavaScript則會通過互動性使其“活起來”，但HTML提供了使其他一切成為可能的基本結構。
@ -88,7 +88,7 @@ mindmap
4. 在Explorer面板中，點擊“New File”圖標
5. 將文件命名為`index.html`
![VS Code Explorer顯示新文件創建](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mo.png)
![VS Code Explorer顯示新文件創建](../../../../translated_images/vs-code-index.e2986cf919471eb9.mo.png)
**選項2：使用終端命令**
```bash

6
translations/mo/3-terrarium/2-intro-to-css/README.md
Unescape View File

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.mo.png)
![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a20.mo.png)
> 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
還記得你的HTML微型生態瓶看起來非常基本嗎？CSS就是用來將這個簡單的結構轉變成視覺上更吸引人的東西。
@ -205,7 +205,7 @@ body {
打開瀏覽器的開發者工具（F12），導航到“元素”選項卡，檢查你的`<h1>`元素。你會看到它繼承了`body`的字體：
![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.mo.png)
![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d.mo.png)
✅ **實驗時間**：嘗試在`<body>`上設置其他可繼承屬性，例如`color`、`line-height`或`text-align`。你的標題和其他元素會發生什麼變化？
@ -599,7 +599,7 @@ flowchart LR
你將創建微妙的高光，模擬光線如何在玻璃表面反射。這種方法類似於文藝復興時期的畫家如 Jan van Eyck 如何使用光線和反射使繪製的玻璃看起來具有三維效果。以下是你的目標：
![完成的玻璃瓶](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.mo.png)
![完成的玻璃瓶](../../../../translated_images/terrarium-final.2f07047ffc597d0a.mo.png)
**你的挑戰：**
- **創建** 微妙的白色或淺色橢圓形作為玻璃反射效果

8
translations/mo/3-terrarium/3-intro-to-DOM-and-closures/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.mo.png)
![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaa.mo.png)
> 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
歡迎來到網頁開發中最有趣的部分之一——讓網頁變得互動！文檔物件模型（DOM）就像是 HTML 和 JavaScript 之間的橋樑，今天我們將利用它讓你的微型生態瓶活起來。當 Tim Berners-Lee 創建第一個網頁瀏覽器時，他設想了一個可以動態和互動的網頁世界，而 DOM 使這一願景成為可能。
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mo.png)
![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.mo.png)
> DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **理解閉包**：閉包是 JavaScript 中的重要主題，許多開發者在使用多年後才完全掌握其理論方面。今天，我們專注於實際應用——你將看到閉包在構建我們的互動功能時自然地出現。隨著你了解它如何解決實際問題，理解也會逐漸加深。
![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mo.png)
![DOM 樹表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.mo.png)
> DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ function stopElementDrag() {
- **跨設備支援**：適用於桌面和移動設備
- **效能意識**：無記憶體洩漏或冗餘計算
![完成的微型花園](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.mo.png)
![完成的微型花園](../../../../translated_images/terrarium-final.0920f16e87c13a84.mo.png)
---

43
translations/mo/3-terrarium/README.md
Unescape View File

@ -1,43 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-25T21:04:10+00:00",
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-06T12:05:07+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "mo"
}
-->
# 我的微型植物園：學習 HTML、CSS 和使用 JavaScript 操控 DOM 的專案 🌵🌱
## 部署你的 Terrarium
一個小型的拖放式程式冥想。只需一些 HTML、JS 和 CSS，你就能建立一個網頁介面，為其設計樣式，甚至加入多種互動功能。
你可以使用 **Azure Static Web Apps** 在網絡上部署或發佈你的 Terrarium。
![我的微型植物園](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.mo.png)
1. 分叉此倉庫
# 課程
2. 按下這個按鈕 👇
1. [HTML 入門](./1-intro-to-html/README.md)
2. [CSS 入門](./2-intro-to-css/README.md)
3. [DOM 和 JS 閉包入門](./3-intro-to-DOM-and-closures/README.md)
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
## 致謝
3. 跟隨設置嚮導來創建你的應用。
- 將 **App root** 設為 `/solution` 或你的代碼庫根目錄。
- 此應用中沒有 API，因此可以跳過 API 配置。
- 系統會自動創建一個 `.github` 文件夾，以協助 Azure Static Web Apps 建構及發佈你的應用。
由 [Jen Looper](https://www.twitter.com/jenlooper) 用 ♥️ 撰寫。
透過 CSS 創建的微型植物園靈感來自 Jakub Mandra 的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
藝術作品由 [Jen Looper](http://jenlooper.com) 使用 Procreate 手繪完成。
## 部署你的微型植物園
你可以使用 Azure 靜態網頁應用程式將你的微型植物園部署或發布到網路上。
1. Fork 此倉庫
2. 按下這個按鈕
[![部署到 Azure 按鈕](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. 按照向導步驟建立你的應用程式。請確保將應用程式根目錄設置為 `/solution` 或你的程式碼庫的根目錄。此應用程式中沒有 API，因此不需要擔心添加它。一個 GitHub 資料夾將會在你 Fork 的倉庫中建立，幫助 Azure 靜態網頁應用程式的建置服務，將你的應用程式建置並發布到一個新的 URL。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
本文件由人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原文以其本地語言版本為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

2
translations/mo/3-terrarium/solution/README.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
一個小型的拖放式程式冥想。只需一些 HTML、JS 和 CSS，你就可以建立一個網頁介面，設計它，並添加互動功能。
![我的微型植物園](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.mo.png)
![我的微型植物園](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.mo.png)
## 致謝

10
translations/mo/5-browser-extension/1-about-browsers/README.md
Unescape View File

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.mo.jpg)
![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84a.mo.jpg)
> 手繪筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 提供
## 課前測驗
@ -79,7 +79,7 @@ mindmap
✅ **一點歷史**：第一個瀏覽器名為 'WorldWideWeb'，由 Timothy Berners-Lee 爵士於 1990 年創建。
![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.mo.jpg)
![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.mo.jpg)
> 一些早期的瀏覽器，圖片來源 [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### 瀏覽器如何處理網頁內容
@ -198,7 +198,7 @@ quadrantChart
了解擴充功能的安裝過程有助於您預測用戶在安裝您的擴充功能時的體驗。安裝過程在現代瀏覽器中是標準化的，介面設計略有不同。
![Edge 瀏覽器截圖，顯示打開的 edge://extensions 頁面和打開的設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.mo.png)
![Edge 瀏覽器截圖，顯示打開的 edge://extensions 頁面和打開的設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.mo.png)
> **重要**：在測試您自己的擴充功能時，請確保開啟開發者模式並允許來自其他商店的擴充功能。
@ -313,10 +313,10 @@ project-root/
### 擴充功能視圖概述
**設置視圖** - 初次使用者配置：
![完成的擴充功能在瀏覽器中打開，顯示一個包含地區名稱和 API 密鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.mo.png)
![完成的擴充功能在瀏覽器中打開，顯示一個包含地區名稱和 API 密鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491.mo.png)
**結果視圖** - 顯示碳足跡數據：
![完成的擴充功能顯示美國 US-NEISO 地區的碳使用量和化石燃料百分比值。](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.mo.png)
![完成的擴充功能顯示美國 US-NEISO 地區的碳使用量和化石燃料百分比值。](../../../../translated_images/2.1dae52ff08042246.mo.png)
### 建立配置表單

2
translations/mo/5-browser-extension/2-forms-browsers-local-storage/README.md
Unescape View File

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![本地存儲面板](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.mo.png)
![本地存儲面板](../../../../translated_images/localstorage.472f8147b6a3f8d1.mo.png)
> ⚠️ **安全考量**：在生產應用中，將 API 密鑰存儲在 LocalStorage 中存在安全風險，因為 JavaScript 可以訪問這些數據。作為學習用途，這種方法是可以的，但真正的應用應該使用安全的伺服器端存儲來保存敏感憑據。

6
translations/mo/5-browser-extension/3-background-tasks-and-performance/README.md
Unescape View File

@ -126,7 +126,7 @@ flowchart LR
讓我們來試試看。打開一個網站（Microsoft.com 是個不錯的選擇），然後點擊「記錄」按鈕。現在刷新網頁，觀察分析器捕捉到的所有活動。停止記錄後，您將看到瀏覽器如何「腳本化」、「渲染」和「繪製」網站的詳細分解。這讓我想起了任務控制中心在火箭發射期間監控每個系統的方式——您可以獲得實時的數據，了解每件事情的發生時間和過程。
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.mo.png)
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.mo.png)
✅ [Microsoft 文件](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) 有更多詳細資訊，供您深入了解。
@ -136,11 +136,11 @@ flowchart LR
通過選擇剖析時間線的一部分並查看摘要窗格，獲得網頁效能的快照：
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.mo.png)
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.mo.png)
檢查事件日誌窗格，查看是否有任何事件超過 15 毫秒：
![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.mo.png)
![Edge event log](../../../../translated_images/log.804026979f3707e0.mo.png)
✅ 熟悉您的分析器！在此網站上打開開發者工具，看看是否有任何瓶頸。哪個資產加載最慢？最快？

2
translations/mo/5-browser-extension/README.md
Unescape View File

@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
### 致謝
![一個綠色的瀏覽器擴充功能](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![一個綠色的瀏覽器擴充功能](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 致謝

4
translations/mo/5-browser-extension/solution/README.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，建立一個瀏覽器擴充功能，讓您可以在瀏覽器中即時提醒所在區域的電力使用負荷。透過這個擴充功能，您可以根據資訊來判斷是否進行某些活動。
![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 快速開始
@ -31,7 +31,7 @@ npm run build
在 Edge 瀏覽器中安裝擴充功能，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此透過電子郵件獲取](https://www.co2signal.com/) - 在此頁面輸入您的電子郵件）以及對應於 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用「US-NEISO」）[區域代碼查詢](http://api.electricitymap.org/v3/zones)。
![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
一旦在擴充功能介面中輸入 API 金鑰和區域代碼，瀏覽器擴充功能欄中的彩色點應該會改變，反映您所在區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合進行。這個「點」系統的概念是受到 [Energy Lollipop 擴充功能](https://energylollipop.com/)（針對加州排放）的啟發。

4
translations/mo/5-browser-extension/solution/translation/README.fr.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 C02 Signal API 來追蹤電力消耗，創建一個瀏覽器擴充套件，讓您可以直接在瀏覽器中獲得您所在地區的電力消耗提醒。使用這個即時擴充套件可以幫助您根據這些資訊對您的活動做出判斷。
![擴充套件截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![擴充套件截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 開始
@ -31,7 +31,7 @@ npm run build
要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充套件面板。從那裡選擇「載入未壓縮的擴充套件」以載入新的擴充套件。在提示中打開 'dist' 資料夾，擴充套件就會被載入。要使用此擴充套件，您需要一個 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於 [電力地圖](https://www.electricitymap.org/map) 的 [地區代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用 'US-NEISO'）。
![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
當 API 金鑰和地區代碼輸入到擴充套件介面後，瀏覽器擴充套件欄中的彩色點應該會改變，以反映您所在地區的能源消耗，並為您提供指標，幫助您判斷是否適合進行耗能活動。這個「點」系統的概念是受到 [Energy Lollipop 擴充套件](https://energylollipop.com/) 的啟發，用於加州的排放量指標。

4
translations/mo/5-browser-extension/solution/translation/README.hi.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，構建一個瀏覽器擴展，提醒您所在區域的電力使用是否繁重。使用此擴展可以幫助您根據這些信息來決定自己的活動。
![擴展截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![擴展截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 開始
@ -31,7 +31,7 @@ npm run build
要在 Edge 上安裝，請使用瀏覽器右上角的“三點”菜單找到擴展面板。從那裡選擇“加載未打包的擴展”，然後在提示中打開“dist”文件夾，擴展就會加載。要使用它，您需要 CO2 Signal 的 API 密鑰（[通過電子郵件在此處獲取](https://www.co2signal.com/)——在該頁面的框中輸入您的電子郵件）以及 [您所在區域的代碼](http://api.electricitymap.org/v3/zones) [電力地圖](https://www.electricitymap.org/map)（例如，在波士頓，我使用“US-NEISO”）。
![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
一旦 API 密鑰和區域代碼輸入到擴展界面中，瀏覽器擴展欄中的彩色點應該會根據您所在區域的能源使用情況進行變化，並為您提供一個指標，告訴您哪些能源密集型活動適合您的操作。這個“點”系統的概念是我從加州排放的 [Energy Lollipop 擴展](https://energylollipop.com/) 中獲得的靈感。

4
translations/mo/5-browser-extension/solution/translation/README.it.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
我們將使用 tmrow 的 Signal C02 API 來監控電力使用情況，並創建一個瀏覽器擴充功能，讓您可以直接在瀏覽器中獲得提醒，了解所在區域的電力使用情況。使用這個專門的擴充功能可以幫助您根據這些資訊評估自己的活動。
![擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 開始使用
@ -31,7 +31,7 @@ npm run build
要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。如果尚未啟用，請啟用開發者模式（左下角）。選擇「載入未壓縮的擴充功能」以載入新的擴充功能。在提示中打開 "dist" 資料夾，擴充功能就會被載入。要使用此擴充功能，您需要一個 CO2 Signal API 的 API 金鑰（可以[通過電子郵件在此處獲得](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於[電力地圖](https://www.electricitymap.org/map)的[區域代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓是 "US-NEISO"）。
![安裝](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![安裝](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
當 API 金鑰和區域代碼輸入到擴充功能介面後，瀏覽器擴充功能欄中的彩色點應該會改變，以反映該區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合執行。這個「點」系統的概念是基於加州排放的 [Energy Lollipop 擴充功能](https://energylollipop.com/) 提供的。

4
translations/mo/5-browser-extension/solution/translation/README.ja.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，並在瀏覽器中顯示您所在地區的電力使用量作為提醒。透過這個瀏覽器擴充功能，您可以根據這些資訊來判斷自己的行動。
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 開始使用
@ -31,7 +31,7 @@ npm run build
若要安裝到 Edge，請在瀏覽器右上角的「三點」選單中找到「擴充功能」面板。從那裡選擇「Load Unpacked」，然後載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會被載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰 ([在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面的框中輸入您的電子郵件)，以及 [Electricity Map](https://www.electricitymap.org/map) 對應的 [您所在地區的代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，使用 'US-NEISO'）。
![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
在擴充介面中輸入 API 金鑰和地區代碼後，瀏覽器擴充工具列中的彩色圓點會隨之變化，反映您所在地區的能源使用情況，並提示您進行哪些活動是適合的。這個「圓點」系統的概念靈感來自於加州排放量的 [Energy Lollipop 擴充功能](https://energylollipop.com/)。

4
translations/mo/5-browser-extension/solution/translation/README.ms.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 CO2 Signal API 來監測電力使用情況，建立一個瀏覽器擴充功能，讓您能在瀏覽器中收到關於您所在區域電力使用情況的提醒。使用這個擴充功能可以幫助您根據這些資訊來調整您的活動。
![瀏覽器擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![瀏覽器擴充功能截圖](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 從這裡開始
@ -31,7 +31,7 @@ npm run build
要在 Edge 瀏覽器中安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。根據提示打開 'dist' 資料夾，擴充功能就會被載入。要使用它，您需要一個 CO2 Signal API 的 API 金鑰（[在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在頁面上的框中輸入您的電子郵件）以及 [您的區域代碼](http://api.electricitymap.org/v3/zones)，該代碼與 [電力地圖](https://www.electricitymap.org/map) 相符（例如，在波士頓，我使用 'US-NEISO'）。
![正在下載](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![正在下載](../../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
當您將 API 金鑰和區域代碼輸入到擴充功能介面後，瀏覽器擴充功能列上的彩色點將會改變，以反映您所在區域的能源使用情況，並提供您適合進行的活動建議。這個「點」系統的概念是受到 [Energy Lollipop 瀏覽器擴充功能](https://energylollipop.com/) 的啟發，該擴充功能專為加州的排放量設計。

4
translations/mo/5-browser-extension/start/README.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
使用 tmrow 的 C02 Signal API 來追蹤電力使用情況，建立一個瀏覽器擴充功能，讓您可以在瀏覽器中即時提醒所在區域的電力使用負荷。透過這個擴充功能，您可以根據資訊來判斷是否進行某些活動。
![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.mo.png)
![擴充功能截圖](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.mo.png)
## 開始使用
@ -31,7 +31,7 @@ npm run build
在 Edge 瀏覽器中安裝擴充功能，使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面輸入您的電子郵件）以及對應 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用 'US-NEISO'，可在 [此處](http://api.electricitymap.org/v3/zones) 找到）。
![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.mo.png)
![安裝擴充功能](../../../../translated_images/install-on-edge.78634f02842c4828.mo.png)
一旦在擴充功能介面中輸入 API 金鑰和區域代碼，瀏覽器擴充功能欄中的彩色點應會改變，反映您所在區域的能源使用情況，並提供指引，告訴您哪些高耗能活動適合進行。這個「點」系統的概念來自 [Energy Lollipop 擴充功能](https://energylollipop.com/)，該擴充功能專注於加州的排放情況。

8
translations/mo/6-space-game/2-drawing-to-canvas/README.md
Unescape View File

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![Canvas 的網格](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.mo.png)
![Canvas 的網格](../../../../translated_images/canvas_grid.5f209da785ded492.mo.png)
> 圖片來源：[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
要在 Canvas 元素上繪圖，你需要遵循三個步驟，這是所有 Canvas 圖形的基礎。一旦你多次完成這些步驟，它就會變得非常自然：
@ -329,11 +329,11 @@ flowchart TD
- 英雄飛船
![英雄飛船](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.mo.png)
![英雄飛船](../../../../translated_images/player.dd24c1afa8c71e9b.mo.png)
- 5×5 怪物
![怪物飛船](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.mo.png)
![怪物飛船](../../../../translated_images/enemyShip.5df2a822c16650c2.mo.png)
### 建議的開發步驟
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
完成的結果應該看起來像這樣：
![黑色螢幕上有一個英雄和5*5的怪物](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.mo.png)
![黑色螢幕上有一個英雄和5*5的怪物](../../../../translated_images/partI-solution.36c53b48c9ffae2a.mo.png)
## 解決方案

2
translations/mo/6-space-game/5-keeping-score/README.md
Unescape View File

@ -160,7 +160,7 @@ sequenceDiagram
```
- **得分系統**：每摧毀一艘敵方飛船可獲得 100 分（整數更容易讓玩家心算）。得分顯示在左下角。
- **生命計數器**：你的英雄從三條生命開始——這是早期街機遊戲為了平衡挑戰與可玩性而設立的標準。每次與敵人碰撞會損失一條生命。我們將使用飛船圖標在右下角顯示剩餘生命 ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.mo.png)。
- **生命計數器**：你的英雄從三條生命開始——這是早期街機遊戲為了平衡挑戰與可玩性而設立的標準。每次與敵人碰撞會損失一條生命。我們將使用飛船圖標在右下角顯示剩餘生命 ![life image](../../../../translated_images/life.6fb9f50d53ee0413.mo.png)。
## 開始建造！

2
translations/mo/7-bank-project/1-template-route/README.md
Unescape View File

@ -652,7 +652,7 @@ sequenceDiagram
使用 `history.pushState` 創建瀏覽器導航歷史中的新條目。您可以通過按住瀏覽器的*後退按鈕*來檢查，它應顯示如下內容：
![導航歷史截圖](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.mo.png)
![導航歷史截圖](../../../../translated_images/history.7fdabbafa521e064.mo.png)
如果您嘗試多次點擊後退按鈕，您會看到當前 URL 發生了變化，歷史記錄已更新，但顯示的模板保持不變。

10
translations/mo/7-bank-project/2-forms/README.md
Unescape View File

@ -295,7 +295,7 @@ graph TD
2. 觀察瀏覽器地址欄的變化
3. 注意頁面如何重新加載以及數據如何出現在URL中
![點擊註冊按鈕後瀏覽器URL變化的截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.mo.png)
![點擊註冊按鈕後瀏覽器URL變化的截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca.mo.png)
### HTTP方法比較
@ -350,7 +350,7 @@ graph TD
2. **點擊**"創建帳戶"按鈕
3. **觀察**瀏覽器中的伺服器響應
![瀏覽器窗口顯示地址localhost:5000/api/accounts，並顯示包含用戶數據的JSON字符串](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.mo.png)
![瀏覽器窗口顯示地址localhost:5000/api/accounts，並顯示包含用戶數據的JSON字符串](../../../../translated_images/form-post.61de4ca1b964d91a.mo.png)
**你應該看到：**
- **瀏覽器重定向**到API端點URL
@ -615,7 +615,7 @@ async function register() {
3. **點擊**「建立帳戶」
4. **觀察**主控台訊息和使用者回饋
![顯示瀏覽器主控台中日誌訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.mo.png)
![顯示瀏覽器主控台中日誌訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf6778.mo.png)
**您應該看到：**
- **加載狀態**出現在提交按鈕上
@ -790,7 +790,7 @@ input:focus:invalid {
3. **嘗試**在使用者名稱欄位中輸入特殊字元
4. **輸入**負餘額金額
![顯示嘗試提交表單時的驗證錯誤截圖](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.mo.png)
![顯示嘗試提交表單時的驗證錯誤截圖](../../../../translated_images/validation-error.8bd23e98d416c22f.mo.png)
**您將觀察到：**
- **瀏覽器顯示**原生驗證訊息
@ -950,7 +950,7 @@ timeline
以下是添加一些 CSS 樣式後，最終登入頁面的範例：
![添加 CSS 樣式後的登入頁面截圖](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.mo.png)
![添加 CSS 樣式後的登入頁面截圖](../../../../translated_images/result.96ef01f607bf856a.mo.png)
## 課後測驗

8
translations/mo/7-bank-project/3-data/README.md
Unescape View File

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![多頁應用程式的更新工作流程](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.mo.png)
![多頁應用程式的更新工作流程](../../../../translated_images/mpa.7f7375a1a2d4aa77.mo.png)
**為什麼這種方法感覺很笨重：**
- 每次點擊都意味著完全重建整個頁面
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![單頁應用程式的更新工作流程](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.mo.png)
![單頁應用程式的更新工作流程](../../../../translated_images/spa.268ec73b41f992c2.mo.png)
**為什麼 SPA 感覺更好：**
- 只有實際更改的部分會被更新（聰明吧？）
@ -523,7 +523,7 @@ if (data.error) {
現在，當你使用無效帳號進行測試時，會在頁面上看到有用的錯誤訊息！
![顯示登入錯誤訊息的截圖](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.mo.png)
![顯示登入錯誤訊息的截圖](../../../../translated_images/login-error.416fe019b36a6327.mo.png)
#### 步驟 4：注重無障礙設計
@ -961,7 +961,7 @@ timeline
以下是一個精美儀表板的示例：
![儀表板樣例結果的截圖](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mo.png)
![儀表板樣例結果的截圖](../../../../translated_images/screen2.123c82a831a1d14a.mo.png)
不必完全匹配此設計——將其作為靈感，創造屬於你的風格！

4
translations/mo/7-bank-project/4-state-management/README.md
Unescape View File

@ -190,7 +190,7 @@ mindmap
與其徒勞無功地追逐問題，我們將創建一個**集中式狀態管理**系統。可以將其想像成一個非常有條理的人，負責所有重要的事情：
![顯示HTML、用戶操作和狀態之間數據流的架構圖](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.mo.png)
![顯示HTML、用戶操作和狀態之間數據流的架構圖](../../../../translated_images/data-flow.fa2354e0908fecc8.mo.png)
```mermaid
flowchart TD
@ -804,7 +804,7 @@ timeline
以下是完成作業後的示例結果：
![顯示示例“添加交易”對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mo.png)
![顯示示例“添加交易”對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f1.mo.png)
---

2
translations/mo/7-bank-project/4-state-management/assignment.md
Unescape View File

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**預期結果：**
完成這項作業後，您的銀行應用程式應具備一個功能完善的「新增交易」功能，並且外觀和行為都達到專業水準：
![顯示範例「新增交易」對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mo.png)
![顯示範例「新增交易」對話框的截圖](../../../../translated_images/dialog.93bba104afeb79f1.mo.png)
## 測試您的實現

2
translations/mo/7-bank-project/README.md
Unescape View File

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
在這個專案中，你將學習如何建立一個虛構的銀行。這些課程包含了如何設計網頁應用程式的佈局和路由、建立表單、管理狀態，以及從 API 獲取銀行數據的教學。
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.mo.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mo.png) |
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.mo.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.mo.png) |
|--------------------------------|--------------------------------|
## 課程

16
translations/mo/8-code-editor/1-using-a-code-editor/README.md
Unescape View File

@ -185,7 +185,7 @@ VSCode.dev 將這些功能帶到你的瀏覽器中：
一切加載完成後，你會看到一個設計簡潔的工作空間，旨在讓你專注於重要的事情——你的程式碼！
![VSCode.dev 預設界面](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.mo.png)
![VSCode.dev 預設界面](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.mo.png)
**以下是你的工作空間導覽：**
- **活動欄**（左側的那條）：你的主要導航，包括 Explorer 📁、Search 🔍、Source Control 🌿、Extensions 🧩 和 Settings ⚙️
@ -233,7 +233,7 @@ flowchart TB
1. 如果你還未進入，請前往 [vscode.dev](https://vscode.dev)
2. 在歡迎界面上找到「Open Remote Repository」按鈕並點擊
![打開遠端儲存庫](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.mo.png)
![打開遠端儲存庫](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.mo.png)
3. 貼上任何 GitHub 儲存庫 URL（試試這個：`https://github.com/microsoft/Web-Dev-For-Beginners`）
4. 按下 Enter，見證奇蹟！
@ -242,7 +242,7 @@ flowchart TB
想感受像程式碼巫師一樣的感覺嗎？試試這個鍵盤快捷鍵：Ctrl+Shift+P（Mac 上為 Cmd+Shift+P）打開命令面板：
![命令面板](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.mo.png)
![命令面板](../../../../translated_images/palette-menu.4946174e07f42622.mo.png)
**命令面板就像一個搜索引擎，能找到你能做的一切：**
- 輸入「open remote」，它會幫你找到儲存庫打開器
@ -304,7 +304,7 @@ flowchart TB
3. 輸入檔案名，包括適當的副檔名（例如 `style.css`、`script.js`、`index.html`）
4. 按下 Enter 創建檔案
![創建新檔案](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.mo.png)
![創建新檔案](../../../../translated_images/create-new-file.2814e609c2af9aeb.mo.png)
**命名規則：**
- 使用描述性名稱來指示檔案用途
@ -322,7 +322,7 @@ flowchart TB
2. 開始輸入，觀察 VSCode.dev 如何用顏色、建議和錯誤檢測幫助你
3. 使用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存你的工作——雖然它也會自動保存！
![在 VSCode.dev 中編輯檔案](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.mo.png)
![在 VSCode.dev 中編輯檔案](../../../../translated_images/edit-a-file.52c0ee665ef19f08.mo.png)
**編碼時發生的酷炫事情：**
- 你的程式碼會被美麗地著色，便於閱讀
@ -343,7 +343,7 @@ flowchart TB
2. 修改過的檔案會出現在「更改」部分
3. 顏色編碼指示更改類型：綠色表示新增，紅色表示刪除
![在原始碼控制中查看更改](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.mo.png)
![在原始碼控制中查看更改](../../../../translated_images/working-tree.c58eec08e6335c79.mo.png)
**保存你的工作（提交工作流程）：**
@ -437,7 +437,7 @@ mindmap
2. 隨意瀏覽或搜索特定內容
3. 點擊任何看起來有趣的項目以了解更多資訊
![擴展市場介面](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.mo.png)
![擴展市場介面](../../../../translated_images/extensions.eca0e0c7f59a10b5.mo.png)
**你會在裡面看到什麼：**
@ -488,7 +488,7 @@ mindmap
3. 從下拉選單中選擇 "擴展設定"
4. 調整設定，直到符合你的工作流程需求
![自訂擴展設定](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.mo.png)
![自訂擴展設定](../../../../translated_images/extension-settings.21c752ae4f4cdb78.mo.png)
**你可能想調整的常見設定：**
- 程式碼的格式化方式（例如使用 Tab 還是空格、行長度等）

6
translations/mo/8-code-editor/1-using-a-code-editor/assignment.md
Unescape View File

@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA:
4. **撰寫**提交訊息：「添加初始 HTML 結構」
5. **點擊**「Commit new file」保存更改
![在 GitHub 上建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.mo.png)
![在 GitHub 上建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056.mo.png)
**以下是此初始設置的作用：**
- **建立**具有語義元素的正確 HTML5 文件結構
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **成功指標**：您應該能在 Explorer 側邊欄中看到您的專案檔案，並在主編輯區域中編輯 `index.html`。
![在 VSCode.dev 中載入專案](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.mo.png)
![在 VSCode.dev 中載入專案](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.mo.png)
**您在介面中會看到：**
- **Explorer 側邊欄**：**顯示**您的儲存庫檔案和文件結構
@ -448,7 +448,7 @@ li:before {
**安裝後的即時效果：**
安裝 CodeSwing 後，您將看到履歷網站的即時預覽出現在編輯器中。這讓您能夠在進行更改時即時查看網站的外觀。
![CodeSwing 擴展顯示即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.mo.png)
![CodeSwing 擴展顯示即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.mo.png)
**理解增強的介面：**
- **分屏視圖**：**顯示**一側的程式碼和另一側的即時預覽

10
translations/mo/9-chat-project/README.md
Unescape View File

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
以下是完成的專案外觀：
![聊天應用程式介面顯示用戶與 AI 助手之間的對話](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mo.png)
![聊天應用程式介面顯示用戶與 AI 助手之間的對話](../../../translated_images/screenshot.0a1ee0d123df681b.mo.png)
## 🗺️ AI應用程式開發的學習旅程
@ -194,7 +194,7 @@ mindmap
**核心原則**：AI應用程式開發結合了傳統的網頁開發技能與AI服務整合，創造出智能化且對用戶自然且反應迅速的應用程式。
![GitHub Models AI Playground介面，顯示模型選擇和測試區域](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mo.png)
![GitHub Models AI Playground介面，顯示模型選擇和測試區域](../../../translated_images/playground.d2b927122224ff8f.mo.png)
**Playground的實用之處：**
- **嘗試**不同的AI模型，例如GPT-4o-mini、Claude等（全部免費！）
@ -204,7 +204,7 @@ mindmap
玩了一會兒後，只需點擊 "Code" 標籤，選擇你的程式語言，即可獲得所需的實現程式碼。
![Playground選擇顯示不同程式語言的程式碼生成選項](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mo.png)
![Playground選擇顯示不同程式語言的程式碼生成選項](../../../translated_images/playground-choice.1d23ba7d407f4758.mo.png)
## 設置 Python 後端整合
@ -2364,14 +2364,14 @@ mindmap
- **導航**到 [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **點擊**右上角的 "Use this template"（確保你已登錄 GitHub）
![顯示綠色 "Use this template" 按鈕的模板創建界面](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mo.png)
![顯示綠色 "Use this template" 按鈕的模板創建界面](../../../translated_images/template.67ad477109d29a2b.mo.png)
**步驟 2：啟動 Codespaces**
- **打開**你新創建的倉庫
- **點擊**綠色的 "Code" 按鈕並選擇 "Codespaces"
- **選擇** "Create codespace on main" 以啟動你的開發環境
![顯示啟動雲端開發環境選項的 Codespace 創建界面](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mo.png)
![顯示啟動雲端開發環境選項的 Codespace 創建界面](../../../translated_images/codespace.bcecbdf5d2747d3d.mo.png)
**步驟 3：環境配置**
當你的 Codespace 加載完成後，你將擁有以下功能：

318
translations/mo/README.md
Unescape View File

@ -1,255 +1,277 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-25T17:32:39+00:00",
"original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
"translation_date": "2026-01-06T12:03:31+00:00",
"source_file": "README.md",
"language_code": "mo"
}
-->
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者網頁開發課程 - 一個完整的課程
# 初學者網頁開發 - 課程大綱
透過 Microsoft Cloud Advocates 提供的 12 週完整課程，學習網頁開發的基礎知識。24 節課程涵蓋 JavaScript、CSS 和 HTML，並透過實作專案如玻璃花園、瀏覽器擴展和太空遊戲來學習。參與測驗、討論和實際作業，提升技能並加強知識記憶。立即開始你的程式設計旅程吧！
與我們由 Microsoft Cloud Advocates 推出的 12 週全面課程，一同學習網頁開發基礎。24 節課涵蓋 JavaScript、CSS 和 HTML，透過實作項目，例如生態瓶、瀏覽器擴充功能及太空遊戲來深入學習。參與測驗、討論及實務作業。透過有效的專案導向教學法，提升技能並優化知識吸收。即刻啟動你的程式設計旅程！
加入 Azure AI Foundry Discord 社群
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
按照以下步驟開始使用這些資源：
1. **Fork 此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家和其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
跟著以下步驟開始使用這些資源：
1. **分支此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **克隆儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家及其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
### 🌐 多語言支援
#### 透過 GitHub Action 支援（自動化且隨時更新）
#### 透過 GitHub 動作支援（自動且持續更新）
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語 (Myanmar)](../my/README.md) | [中文 (簡體)](../zh/README.md) | [中文 (繁體，香港)](../hk/README.md) | [中文 (繁體，澳門)](./README.md) | [中文 (繁體，台灣)](../tw/README.md) | [克羅地亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [坎納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [尼日利亞混合語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語 (Farsi)](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語 (巴西)](../br/README.md) | [葡萄牙語 (葡萄牙)](../pt/README.md) | [旁遮普語 (Gurmukhi)](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語 (西里爾字母)](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語 (菲律賓語)](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
**如果你希望支援更多語言，請參考 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> **喜歡本機端克隆？**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
> 此儲存庫包含 50 多種語言翻譯，會顯著增加下載大小。若想不包含翻譯克隆，請使用稀疏檢出：
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 這讓你可以更快速下載，並取得完成課程所需的所有內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 🧑‍🎓 _你是學生嗎？_
**若您希望支持其他翻譯語言，請參閱此 [列表](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你可以找到初學者資源、學生套件，甚至有機會獲得免費證書兌換券。這是你應該收藏並定期查看的頁面，因為我們每月都會更新內容。
[![在 Visual Studio Code 中開啟](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
### 📣 公告 - 新的 GitHub Copilot Agent 模式挑戰等你完成！
#### 🧑‍🎓 _你是學生嗎？_
新增挑戰，請在大多數章節中尋找 "GitHub Copilot Agent Challenge 🚀"。這是一個使用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果你還沒使用過 Agent 模式，它不僅能生成文字，還能創建和編輯檔案、執行指令等。
造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學者資源、學生包，甚至可獲取免費證書兌換券。這是想收藏並不時查看的頁面，因為我們每月都會更換內容。
### 📣 公告 - _使用生成式 AI 建立新專案_
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！
新增 AI 助理專案，查看 [專案](./09-chat-project/README.md)
新增挑戰，請在大多數章節尋找 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 及 Agent 模式來完成的新挑戰。如果你以前沒用過 Agent 模式，它不僅能生成文字，還能建立和編輯檔案、執行命令等。
### 📣 公告 - _新的生成式 AI 課程_
### 📣 公告 - _使用生成式 AI 建構的新專案_
我們剛剛發布了新的 JavaScript 生成式 AI 課程！
新增 AI 助理專案，快來看看 [專案](./9-chat-project/README.md)
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
### 📣 公告 - _針對 JavaScript 的全新生成式 AI 課程_
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.mo.png)
別錯過我們的生成式 AI 新課程！
- 課程涵蓋從基礎到 RAG 的所有內容。
- 使用 GenAI 和我們的伴侶應用程式與歷史人物互動。
- 有趣且引人入勝的敘事，你將進行時光旅行！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.mo.png)
![Background](../../translated_images/background.148a8d43afde5730.mo.png)
每節課都包含一個作業、一個知識檢查和一個挑戰，幫助你學習以下主題：
- 提示和提示工程
- 文字和圖片應用程式生成
- 搜索應用程式
- 課程涵蓋從基礎到 RAG。
- 使用 GenAI 及配套應用與歷史人物互動。
- 趣味且引人入勝的故事，讓你時光旅行！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
![character](../../translated_images/character.5c0dd8e067ffd693.mo.png)
## 🌱 開始學習
> **教師們**，我們已經 [提供了一些建議](for-teachers.md) 關於如何使用這份課程。我們非常期待你在 [討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 中的反饋！
每節課附有作業、知識檢核及挑戰，引導你學習如下主題：
- 提示及提示工程
- 文字與影像應用生成
- 搜尋應用
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前測驗開始，接著閱讀課程內容，完成各種活動，並透過課後測驗檢查你的理解。
造訪 [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) 開始學習！
為了提升學習體驗，與同儕一起合作完成專案吧！我們鼓勵在 [討論論壇](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 中進行討論，我們的版主團隊將隨時回答你的問題。
為了進一步學習，我們強烈建議探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 以獲取更多學習資源。
### 📋 設置你的環境
## 🌱 入門指南
這份課程已經準備好開發環境！開始時，你可以選擇在 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器，無需安裝的環境_）中運行課程，或者在你的電腦上使用如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器。
> **教師們**，我們提供了 [使用此課程的建議](for-teachers.md)。歡迎您在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 提出意見！
#### 建立你的儲存庫
為了方便保存你的學習進度，建議你建立這份儲存庫的副本。你可以點擊頁面頂部的 **Use this template** 按鈕，這將在你的 GitHub 帳戶中建立一個包含課程副本的新儲存庫。
**[學習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課從課前測驗開始，接著閱讀教材，完成各項活動，並透過課後測驗檢視理解程度。
按照以下步驟：
1. **Fork 此儲存庫**：點擊頁面右上角的 "Fork" 按鈕。
2. **Clone 此儲存庫**：`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
為提升學習體驗，建議與同儕一同合作專案！歡迎於我們的 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) 參與討論，我們的版主團隊會協助回答問題。
#### 在 Codespace 中運行課程
為進一步學習，我們強烈推薦探索 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) 提供的更多教材。
在你建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你創建一個新的 Codespace 以供學習使用。
### 📋 環境設置
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.mo.png)
本課程已備妥開發環境！你可以選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器即用、無需安裝環境）中執行課程，或在電腦本機使用像 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器。
#### 在本地電腦上運行課程
#### 建立你的儲存庫
為方便儲存你的作業，建議建立此儲存庫的個人副本。可點擊頁面頂端的 **Use this template** 按鈕，在你的 GitHub 帳號中建立此課程副本。
要在本地電腦上運行課程，你需要一個文字編輯器、一個瀏覽器和一個命令行工具。我們的第一節課 [程式語言與工具介紹](../../1-getting-started-lessons/1-intro-to-programming-languages) 將引導你了解各種工具選項，幫助你選擇最適合你的工具。
請依以下步驟操作：
1. **分支儲存庫**：點擊本頁右上角的「Fork」按鈕。
2. **克隆儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它還內建 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在 [這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 下載 Visual Studio Code。
#### 在 Codespace 執行課程
1. 將你的儲存庫克隆到電腦上。你可以點擊 **Code** 按鈕並複製 URL：
在你建立的儲存庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你建立一個新的 Codespace 工作區。
[CodeSpace](./images/createcodespace.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.mo.png)
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 中運行以下指令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
#### 在本機電腦執行課程
要在電腦本機執行此課程，你需要文字編輯器、瀏覽器與命令列工具。我們的第一堂課，[程式語言與工具入門](../../1-getting-started-lessons/1-intro-to-programming-languages)，會介紹各種工具選擇，讓你挑選最合適的。
我們推薦使用 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 作為編輯器，它也內建有 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)。你可以在此下載 Visual Studio Code [連結](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。
1. 將你的儲存庫克隆到電腦。點擊 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內開啟 [終端機](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並執行以下指令，將 `<your-repository-url>` 換成你剛才複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **File** > **Open Folder**，然後選擇你剛剛克隆的資料夾。
> 推薦的 Visual Studio Code 擴展：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快撰寫程式碼
2. 在 Visual Studio Code 中打開資料夾。你可以透過點擊 **檔案** > **打開資料夾**，然後選擇你剛剛克隆的資料夾來達成。
> 推薦的 Visual Studio Code 擴充套件：
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 協助你更快撰寫程式碼
## 📂 每堂課包括：
## 📂 每課包括：
- 可選的手繪筆記
- 可選的補充影片
- 課前熱身測驗
- 選擇性速寫筆記
- 選擇性補充影片
- 課前熱身小測驗
- 書面課程
- 對於專案型課程，提供逐步指導如何完成專案
- 知識檢查
- 對專案基礎的課程，包含建立專案步驟指南
- 知識檢測
- 挑戰
- 補充閱讀
- 補充閱讀資料
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的說明**：所有測驗都包含在 Quiz-app 資料夾中，共有 48 個測驗，每個測驗包含三個問題。你可以在 [這裡](https://ff-quizzes.netlify.app/web/) 找到測驗應用程式，該應用程式可以在本地運行或部署到 Azure；請按照 `quiz-app` 資料夾中的指示操作。
## 🗃️ 課程
| | 專案名稱 | 教授概念 | 學習目標 | 相關課程連結 | 作者 |
| :-: | :--------------------------------------------------: | :------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 入門篇 | 程式設計簡介及工具介紹 | 學習大多數程式語言的基本原理，以及幫助專業開發者完成工作的軟件工具 | [程式語言與工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 入門篇 | GitHub 基礎，包含團隊合作 | 學習如何在專案中使用 GitHub，如何與他人協作管理程式碼 | [GitHub 基礎介紹](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 入門篇 | 無障礙設計 | 學習網頁無障礙設計的基本知識 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料類型 | JavaScript 資料類型的基礎知識 | [資料類型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習函數與方法，管理應用程式的邏輯流程 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做決策 | 學習如何使用決策方法在程式碼中創建條件 | [做決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 中的陣列與迴圈處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [生態瓶](./3-terrarium/solution/README.md) | HTML 實踐 | 建立 HTML 來創建一個線上生態瓶，專注於佈局設計 | [HTML 簡介](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [生態瓶](./3-terrarium/solution/README.md) | CSS 實踐 | 建立 CSS 來設計線上生態瓶，專注於 CSS 基礎，包括讓頁面響應式 | [CSS 簡介](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [生態瓶](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 建立 JavaScript 讓生態瓶具備拖放功能，專注於閉包與 DOM 操作 | [JavaScript 閉包與 DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [打字遊戲](./4-typing-game/solution/README.md) | 建立一個打字遊戲 | 學習如何使用鍵盤事件來驅動 JavaScript 應用程式的邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器操作 | 學習瀏覽器的運作方式、歷史，以及如何搭建瀏覽器擴展的基本架構 | [關於瀏覽器](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 建立表單、調用 API 並將變數存儲於本地存儲 | 建立瀏覽器擴展的 JavaScript 元素，使用本地存儲的變數調用 API | [API、表單與本地存儲](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [綠色瀏覽器擴展](./5-browser-extension/solution/README.md) | 瀏覽器背景進程與網頁效能 | 使用瀏覽器的背景進程管理擴展的圖標；學習網頁效能及一些優化方法 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [太空遊戲](./6-space-game/solution/README.md) | 更進階的 JavaScript 遊戲開發 | 學習使用類別與組合的繼承，以及 Pub/Sub 模式，為開發遊戲做準備 | [進階遊戲開發簡介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [太空遊戲](./6-space-game/solution/README.md) | 繪製到畫布 | 學習使用 Canvas API，將元素繪製到螢幕上 | [繪製到畫布](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [太空遊戲](./6-space-game/solution/README.md) | 在螢幕上移動元素 | 探索如何使用笛卡爾座標與 Canvas API 讓元素移動 | [移動元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [太空遊戲](./6-space-game/solution/README.md) | 碰撞檢測 | 使用按鍵讓元素碰撞並相互反應，並提供冷卻功能以確保遊戲效能 | [碰撞檢測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [太空遊戲](./6-space-game/solution/README.md) | 計分 | 根據遊戲的狀態與效能進行數學計算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [太空遊戲](./6-space-game/solution/README.md) | 結束與重啟遊戲 | 學習如何結束與重啟遊戲，包括清理資產與重置變數值 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [銀行應用程式](./7-bank-project/solution/README.md) | 網頁應用程式中的 HTML 模板與路由 | 學習如何使用路由與 HTML 模板搭建多頁網站的架構 | [HTML 模板與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [銀行應用程式](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 學習如何建立表單與處理驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [銀行應用程式](./7-bank-project/solution/README.md) | 獲取與使用資料的方法 | 學習資料如何在應用程式中流動、獲取、存儲與處理 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [銀行應用程式](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習應用程式如何保留狀態以及如何以程式方式管理它 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [瀏覽器/VScode 編輯器](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器| [使用 VScode 編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 助手](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助手 | [AI 助手專案](./9-chat-project/README.md) | Chris |
> **關於測驗的說明**：所有測驗皆包含在 Quiz-app 資料夾中，共 48 個測驗，每個有三題問題。它們可在 [此處](https://ff-quizzes.netlify.app/web/) 取得，測驗應用程式可在本機運行或部署至 Azure；請遵循 `quiz-app` 資料夾中的說明。
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :--------------------------------------------------: | :--------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | 起步準備 | 程式設計及工具簡介 | 了解大多數程式語言的基本原理與支援專業開發者的軟體工具 | [程式語言及工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 起步準備 | GitHub 基礎，含團隊合作 | 瞭解如何在專案中使用 GitHub，及如何與他人協作程式碼庫 | [GitHub 簡介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 起步準備 | 無障礙設計 | 了解網頁無障礙設計的基本知識 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別的基礎知識 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 基礎 | 函數與方法 | 學習使用函數及方法來管理應用程式的邏輯流 | [函數與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS 基礎 | 使用 JS 做出決策 | 學習如何使用決策製作方法來建立程式中的條件 | [決策製作](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 的陣列與迴圈處理資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以建立線上生態瓶，重點為佈局建構 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 建立 CSS 以美化線上生態瓶，重點為 CSS 基礎含響應式設計 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript閉包、DOM 操作 | 建立 JavaScript 使生態瓶具備拖放功能，重點為閉包與 DOM 操作 | [JavaScript 閉包、DOM 操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | 建造打字遊戲 | 了解如何使用鍵盤事件驅動 JavaScript 應用邏輯 | [事件驅動程式設計](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器運作 | 了解瀏覽器運作原理、歷史，並建立瀏覽器擴充功能的初步結構 | [瀏覽器介紹](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 與本地儲存變數 | 使用 JavaScript 為瀏覽器擴充功能實作呼叫 API，並使用本地儲存變數 | [API、表單與本地儲存](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器背景程序、網頁效能 | 使用瀏覽器背景程序管理擴充功能圖示；學習網頁效能及優化 | [背景任務與效能](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 進階 JavaScript 遊戲開發 | 了解繼承(類別與組合)以及發布/訂閱模式，用以準備構建遊戲 | [進階遊戲開發簡介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas 繪圖 | 認識用於繪製螢幕元素的 Canvas API | [Canvas 繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 螢幕元素移動 | 探索如何使用直角坐標與 Canvas API 使元素產生動作 | [移動螢幕元素](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 讓元素碰撞並互動，使用按鍵觸發並提供冷卻功能以確保遊戲效能 | [碰撞偵測](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態與表現執行數學運算 | [計分](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | 遊戲結束與重新開始 | 了解遊戲結束與重新開始的流程，包括清理資源與重設變數 | [結束條件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML 範本與網頁路由 | 學習透過路由與 HTML 範本建立多頁網站架構 | [HTML 範本與路由](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 了解建構表單及驗證流程 | [表單](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | 取得與使用資料的方法 | 瞭解資料在應用中的流動方式，如何取得、儲存及處置 | [資料](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 學習程式化管理應用保持狀態的方法 | [狀態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 瞭解如何使用程式碼編輯器 | [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助手 | [AI 助手專案](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩個關鍵教學原則：
我們的課程設計遵循兩個主要教學原則：
* 專案導向學習
* 頻繁測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎知識，以及當今網頁開發者使用的最新工具與技術。學生將有機會透過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴展、太空侵略者風格遊戲以及商業銀行應用程式來獲得實作經驗。完成課程後，學生將對網頁開發有扎實的理解。
本計畫教授 JavaScript、HTML 及 CSS 的基礎，以及當代網頁開發者使用的最新工具與技術。學生將有機會實作打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格遊戲以及企業銀行應用。結束系列課程後，學生將擁有紮實的網頁開發知識。
> 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 的形式學習本課程的前幾堂課！
> 🎓 你可以在 Microsoft Learn 上以 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 方式學習本課程的前幾堂課！
透過確保內容與專案相符，學習過程對學生來說更具吸引力，並能增強概念的記憶。我們還撰寫了幾個 JavaScript 基礎的入門課程來介紹概念，並搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 的影片教學，其中一些作者也參與了本課程的編寫。
透過確保內容與專案對應，學習過程更具吸引力且能有效提升概念記憶。我們也撰寫了數個 JavaScript 基礎入門課程搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 影片，其中部分作者參與編寫本課程。
此外，課前的低壓力測驗能讓學生專注於學習主題，而課後的第二次測驗則能進一步鞏固記憶。本課程設計靈活有趣，可以整體學習或部分學習。專案從簡單開始，並在 12 週的課程結束時逐漸變得複雜。
此外，上課前的低壓測驗設立學習主題意向，課後測驗則協助加強記憶。課程設計富彈性且有趣，可以全部或部分進修。專案由簡入繁，12 週課程結束時達到高複雜度水準。
我們有意避免介紹 JavaScript 框架，以專注於成為網頁開發者所需的基本技能，完成本課程後，下一步可以透過另一系列影片學習 Node.js："[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"。
我們有意避免引介 JavaScript 框架，專注培養成為網頁開發者所需的基礎技能。完成本課程後，建議可通過另一系列影片學習 Node.js：[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性反饋！
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！
## 🧭 離線存取
你可以使用 [Docsify](https://docsify.js.org/#/) 離線運行此文件。Fork 此 repo，並在本地機器上 [安裝 Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 的根目錄中輸入 `docsify serve`。網站將在本地端的 3000 埠上運行：`localhost:3000`。
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽本文件。Fork 本儲存庫，並在本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在本儲存庫根目錄輸入 `docsify serve`。網站將在你本機的 3000 埠啟動：`localhost:3000`。
## 📘 PDF
所有課程的 PDF 可在 [這裡](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 找到。
所有課程的 PDF 可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下載。
## 🎒 其他課程
我哋嘅團隊仲有其他課程！睇下：
我們的團隊還製作了其他課程！請查看：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI 初學者課程](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP 初學者課程](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents 初學者課程](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 生成式 AI 系列
[![生成式 AI 初學者課程](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![生成式 AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![生成式 AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![生成式 AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 核心學習
[![機器學習初學者課程](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![數據科學初學者課程](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![人工智能初學者課程](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![網絡安全初學者課程](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![網頁開發初學者課程](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![物聯網初學者課程](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR 開發初學者課程](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot 系列
[![Copilot AI 配對編程](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot 冒險](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求幫助
## 獲得協助
如果您在建立 AI 應用程式時遇到困難或有任何疑問，歡迎加入學習者和有經驗的開發者的討論。這是一個支持性的社群，問題受到歡迎，知識自由分享。
如果你遇到困難或對建立 AI 應用程式有任何問題，歡迎加入其他學習者及有經驗嘅開發者嘅討論，傾下 MCP。呢個社群十分支持，歡迎發問，並且自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果您有產品反饋或在建構過程中遇到錯誤，請訪問：
如果你喺建立過程中有產品反饋或錯誤，請瀏覽：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 許可證
此存儲庫採用 MIT 授權。請參閱 [LICENSE](../../LICENSE) 文件以獲取更多資訊。
本存放庫係採用 MIT 許可證。詳情請見 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
**免責聲明**：
本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我哋致力於確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件嘅本地語言版本應視為權威來源。對於重要資訊，建議採用專業人類翻譯。我哋不對因使用本翻譯所引致嘅任何誤解或誤讀承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

4
translations/mo/for-teachers.md
Unescape View File

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上述 Moodle 文件，該文件也可上傳至 Canvas。
- 導入後，請檢查模組、截止日期和測驗設置，以符合您的學期安排。
![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.mo.png)
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.mo.png)
> Moodle 課堂中的課程內容
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.mo.png)
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.mo.png)
> Canvas 課堂中的課程內容
### 直接使用倉庫（不使用 Classroom）

875
translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md
Unescape View File

@ -1,64 +1,247 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2581528206a2a01c3a0b9c88e039b7bc",
"translation_date": "2025-10-03T08:59:56+00:00",
"original_hash": "d45ddcc54eb9232a76d08328b09d792e",
"translation_date": "2026-01-06T14:23:14+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "tw"
}
-->
# 程式語言與工具入門
# 程式語言與現代開發者工具介紹
嗨，未來的開發者！👋 可以跟你說一件每天都讓我熱血沸騰的事情嗎？你將會發現程式設計不只是關於電腦，而是擁有真正超能力，把你最狂野的想法變成現實！
你知道那種使用你最喜歡的應用程式，畫面跟操作都剛剛好的時刻嗎？當你點一下按鈕，發生了某種完全神奇的事情，讓你忍不住想說「哇，他們到底是怎麼做到的？」那就是跟你一樣的人，可能凌晨兩點坐在他們最愛的咖啡店，喝著第三杯濃縮咖啡，寫下那段創造魔法的程式碼。而且，這裡要讓你大吃一驚的是：課程結束時，你不只會理解他們怎麼做到的，還會迫不及待想自己試試看！
我完全理解現在如果覺得程式設計有點可怕。剛開始學時，我真的以為必須是數學天才，或者從五歲就開始寫程式。但真正改變我想法的是：程式設計就像學習用新語言聊天。你先學「你好」和「謝謝」，接著學會點咖啡，然後突然就能討論哲學了！不過這次，對象是電腦，老實說，它們是你見過最有耐心的聊天夥伴—從不批評你的錯誤，還總是樂於再試一次！
今天，我們要探討一些令人驚嘆的工具，讓現代網頁開發不僅可能且讓人上癮。我說的正是Netflix、Spotify以及你最愛的獨立應用工作室每天使用的編輯器、瀏覽器和工作流程。這裡最酷的部分是：大多數這些專業級、業界標準的工具完全免費！
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.tw.png)
> 筆記圖由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
```mermaid
journey
title 你今天的程式設計旅程
section 發現
什麼是程式設計: 5: You
程式語言: 4: You
工具概覽: 5: You
section 探索
程式碼編輯器: 4: You
瀏覽器與開發工具: 5: You
命令列: 3: You
section 練習
語言偵探: 4: You
工具探索: 5: You
社群連結: 5: You
```
## 讓我們看看你已經知道什麼！
在進入精彩的內容前，我很好奇—你對這個程式設計世界已經知道什麼呢？而且聽我說，如果你看到這些問題覺得「我完全不懂」，這不只沒問題，還非常完美！這代表你就在正確的地方。把這個測驗當作運動前的暖身而已—我們只是在熱身大腦肌肉！
[參加課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## 我們即將一起展開的冒險
好啦，我真的超興奮要跟你一起探索今天的內容！說真的，我真希望能看到你的表情，當某些概念突然明白時，那種感覺。以下是我們一起踏上的精彩旅程：
- **甚麼是程式設計（以及為什麼它超酷！）**— 我們會發現程式碼其實就是看不見的魔法，驅動你周圍的一切，從某個鬧鐘突然知道是週一早晨，到推薦你最完美的Netflix節目演算法
- **程式語言及其令人驚豔的個性**— 想像你參加一場派對，每個人都有截然不同的超能力和解決問題的方法。這就是程式語言世界的樣子，你會愛上認識它們！
- **促成數位魔法的基本建構塊**— 把這些當作終極創意樂高組合。當你理解這些積木怎麼拼合，就會發現你真的能打造出任何你想像得到的東西
- **專業工具讓你感覺像拿到魔法師的魔杖**— 我不是在誇張，這些工具真的會讓你感覺擁有超能力，而最棒的是，它們就是專業人士每天使用的！
> 💡 **重點是**：別想著今天要全部記住！現在我只想讓你感受到這個領域的無限可能。細節會隨著我們一起練習自然吸收—這才是真正的學習！
> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
## 那麼，什麼是程式設計？
本課程涵蓋程式語言的基礎知識。這裡討論的主題適用於大多數現代程式語言。在「工具介紹」部分，您將學習一些對開發者有幫助的實用軟體。
好，讓我們來解決這個百萬美元問題：到底什麼是程式設計？
![程式語言入門](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.tw.png)
> Sketchnote 作者：[Tomomi Imura](https://twitter.com/girlie_mac)
我來說一個徹底改變我想法的故事。上週，我試著教媽媽如何使用我們的新智慧電視遙控器。結果我發現自己一直說：「按紅色按鈕，不是大紅色，是左邊小紅色…不，不，是你的另一個左邊…好，現在按住兩秒，不是一秒，也不是三秒…」聽過這種情況嗎？😅
## 課前測驗
[課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
這就是程式設計！它是給出超級詳盡、逐步指令的藝術，目標是讓一個非常強大卻需要每個步驟都表達清楚的對象理解。可不同的是，你不是跟媽媽講（媽媽還能問「哪個紅色按鈕？！」），而是跟電腦講（它完全照你說的做，哪怕你說得不完全是你想表達的意思）。
## 簡介
當我第一次了解這件事時讓我驚訝的是：電腦其實在本質上相當簡單。它們真的只懂兩個東西—1和0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇就在這裡—我們不用像電影《駭客任務》那樣，一直講1和0。這時候，**程式語言**跳出來救場。它們就像全世界最棒的翻譯員，能把你人類思考過程的語言完美轉換成電腦懂的語言。
在本課程中，我們將討論：
更讓我每天早上起床還雞皮疙瘩的是：你生活中所有的數位東西，都是從跟你一樣的人開始的，那些人可能穿著睡衣、手握咖啡，坐在電腦前敲程式碼。那個讓你看起來完美無瑕的Instagram濾鏡？有人寫的。讓你找到新歌的推薦演算法？也是有人寫的。幫助你跟朋友分帳的應用程式？沒錯，就是有人想著「太麻煩了，我肯定能改變它」，然後就真的做到了！
- 什麼是程式設計？
- 程式語言的類型
- 程式的基本元素
- 專業開發者的實用軟體與工具
當你學會程式設計，你不只是學到一項新技能—你成為一群不可思議的問題解決者社群一部份，他們每天都在想：「如果我能打造一個讓別人日子更好一點的東西該多好？」說真的，有比這更酷的事嗎？
> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
✅ **趣味知識獵人**：有空的時候，試著查查世界上第一位電腦程式設計師是誰？給你個提示：可能不是你期待的那個人！這個人的故事非常吸引人，也說明程式設計一直是關於創意解決問題和跳脫框架的思考。
## 什麼是程式設計？
### 🧠 **檢查時間：你感覺如何？**
程式設計（也稱為編碼）是為設備（如電腦或移動設備）編寫指令的過程。我們使用程式語言來編寫這些指令，設備會解讀這些指令。這些指令集可能有不同的名稱，例如 *程式*、*電腦程式*、*應用程式（app）* 和 *執行檔* 等。
**花點時間反思：**
- 「對電腦下指令」這個想法，你現在懂了嗎？
- 你能想到哪些日常任務可以用程式自動化嗎？
- 有哪些問題讓你對整個程式設計有更多好奇？
> **記住**：現在如果有些概念還模糊，是完全正常的。學程式就像學語言—大腦需要時間建構神經連結，你做得非常棒！
## 程式語言就像不同的魔法風格
好，這聽起來有點怪，但請跟我一起想—程式語言很像不同種類的音樂。想想看：你有爵士，柔和且即興；搖滾，強而有力且直接；古典，優雅且結構完整；還有嘻哈，創意且表達力強。每種風格都有它的氛圍和熱情粉絲社群，並且適合不同心情與場合。
程式語言也是如此！你不會用同一種語言去寫一款有趣的手機遊戲，又用它來處理大量氣候資料，就像你不會在瑜珈課放死亡金屬音樂一樣（嗯，大多數瑜珈課啦😄）。
但每次想到這點，我都覺得超神奇：這些語言就像世界上最有耐心且聰明的翻譯官坐在你旁邊。你可以用自然的人類思維表達想法，它們負責處理複雜的轉換，把它變成電腦聽得懂的1和0。就像有個朋友，兩種語言都流利—「人類創意」與「電腦邏輯」—而且永遠不會累、永遠不需要咖啡休息，也不會因為你問同個問題兩次而生氣！
### 受歡迎的程式語言及用途
```mermaid
mindmap
root((程式語言))
網頁開發
JavaScript
前端魔法
互動式網站
TypeScript
JavaScript + 類型
企業應用
資料與人工智慧
Python
資料科學
機器學習
自動化
R
統計學
研究
行動應用
Java
安卓
企業
Swift
iOS
蘋果生態系
Kotlin
現代安卓
跨平台
系統與效能
C++
遊戲
高效能關鍵
Rust
記憶體安全
系統程式設計
Go
雲端服務
可擴充後端
```
| 語言 | 最適合 | 為什麼受歡迎 |
|----------|----------|------------------|
| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器中執行，推動互動式網站 |
| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，強大函式庫支援 |
| **Java** | 企業應用、Android 應用程式 | 跨平台，適合大型系統 |
| **C#** | Windows 應用、遊戲開發 | 微軟生態系強大支援 |
| **Go** | 雲端服務、後端系統 | 快速簡潔，專為現代運算設計 |
### 高階語言 vs 低階語言
說真的，這一點剛開始學時讓我一度崩潰，所以我想分享一個讓我終於理解的比喻—希望你也覺得有用！
想像你去了一個不會說當地語言的國家，急著找最近的廁所（我們都經歷過吧😅）：
- **低階程式設計**就像你學會當地方言，能用文化引喻、當地俚語和只有本地人懂的暗號跟街角賣水果的老太太聊天。超厲害且效率超高...如果你真精通的話！但要是你只是想找廁所，可能會覺得超困難。
- **高階程式設計**就像你有個超棒的當地朋友懂你。你只要用簡單英文說「我需要找廁所」，然後他幫你用當地語言翻譯，還給你清楚的指引，簡單又明瞭。
用程式語言來說：
- **低階語言**（像是組合語言或 C 語言）可以讓你跟電腦硬體非常細節化溝通，但你必須像機器一樣思考，那是個巨大的心智轉換！
- **高階語言**（像 JavaScript、Python 或 C#）讓你用人類思維講話，背後處理所有機器語言轉換。而且它們的社群非常歡迎新手，大家都記得自己剛開始時的感受，且真心想幫忙！
猜猜我會建議你從哪邊開始？😉 高階語言就像有輔助輪的腳踏車，雖然你有時會想砍掉它，但其實它讓整個過程更愉快！
```mermaid
flowchart TB
A["👤 人類思考：<br/>'我想計算費氏數列'"] --> B{選擇語言層級}
B -->|高層| C["🌟 JavaScript/Python<br/>易讀易寫"]
B -->|低層| D["⚙️ 組合語言/C<br/>直接硬體控制"]
C --> E["📝 編寫：fibonacci(10)"]
D --> F["📝 編寫：mov r0,#00<br/>sub r0,r0,#01"]
E --> G["🤖 電腦理解：<br/>翻譯器處理複雜性"]
F --> G
G --> H["💻 相同結果：<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
style C fill:#e1f5fe
style D fill:#fff3e0
style H fill:#e8f5e8
```
### 讓我向你展示為什麼高階語言更友善
*程式* 可以是任何用程式碼編寫的東西；網站、遊戲和手機應用程式都是程式。雖然可以在不編寫程式碼的情況下創建程式，但底層邏輯仍然需要設備解讀，而這些邏輯通常是用程式碼編寫的。一個正在 *執行* 或 *運行* 程式碼的程式正在執行指令。您正在使用的設備正在運行一個程式，將這篇課程顯示在您的螢幕上。
好，我要給你看一個完美展示我為什麼愛上高階語言的範例，但首先—請答應我，不要看到第一個程式碼例子就慌張！它故意看起來很嚇人，這就是我要說的重點！
✅ 做一些研究：誰被認為是世界上第一位電腦程式設計師？
我們將看兩種完全不同風格的程式碼，完成同一個任務：產生費波那契數列—一個美麗的數學模式，每個數字是前兩個數字相加：0, 1, 1, 2, 3, 5, 8, 13...（趣味小知識：你大自然會到處看到這個模式—向日葵籽的螺旋、松果的形狀，甚至星系的形成！）
## 程式語言
準備好看差異了嗎？走吧！
程式語言使開發者能夠為設備編寫指令。設備只能理解二進制（1 和 0），而對於 *大多數* 開發者來說，這並不是一種高效的溝通方式。程式語言是人類與電腦之間溝通的工具。
**高階語言（JavaScript）—人類友善版：**
程式語言有不同的格式，可能用於不同的目的。例如，JavaScript 主要用於網頁應用程式，而 Bash 主要用於操作系統。
```javascript
// 第一步：基本費波那契設置
const fibonacciCount = 10;
let current = 0;
let next = 1;
*低階語言* 通常比 *高階語言* 需要更少的步驟來讓設備解讀指令。然而，高階語言因其可讀性和支援性而受到歡迎。JavaScript 被認為是一種高階語言。
console.log('Fibonacci sequence:');
```
以下程式碼展示了使用 JavaScript 的高階語言與使用 ARM 組合語言的低階語言之間的差異。
**這段程式碼做了什麼：**
- **宣告**一個常數，指定要產生多少個費波那契數
- **初始化**兩個變數，追蹤數列中目前和下一個數字
- **設定**起始值（0 和 1），定義費波那契模式
- **顯示**標題訊息，說明輸出內容
```javascript
let number = 10
let n1 = 0, n2 = 1, nextTerm;
for (let i = 1; i <= number; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
// 步驟 2：使用迴圈產生序列
for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`);
// 計算序列中的下一個數字
const sum = current + next;
current = next;
next = sum;
}
```
```c
**解析這裡發生的事：**
- **用 `for` 迴圈**依序走訪數列各位置
- **顯示**每個數字及其位置，使用模板字串格式化
- **計算**下一個費波那契數字，將目前與下一個相加
- **更新**追蹤變數，移動到下一次迭代
```javascript
// 第三步：現代函式式方法
const generateFibonacci = (count) => {
const sequence = [0, 1];
for (let i = 2; i < count; i++) {
sequence[i] = sequence[i - 1] + sequence[i - 2];
}
return sequence;
};
// 使用範例
const fibSequence = generateFibonacci(10);
console.log(fibSequence);
```
**這上面程式碼，我們：**
- **使用**現代箭頭函式語法，創建可重複使用的函式
- **建立**陣列來存完整數列，而不是一個個顯示
- **用**陣列索引計算每個新數字
- **回傳**完整數列，方便程式其他部分使用
**低階語言（ARM 組合語言）—電腦友善版：**
```assembly
area ascen,code,readonly
entry
code32
@ -83,137 +266,601 @@ back add r0,r1
end
```
相信或不相信，*它們都在做同樣的事情*：列印前 10 個斐波那契數列。
注意 JavaScript 版幾乎像英文指令，而組合語言版是直接控制電腦處理器的神秘指令。兩者完成同樣任務，但高階語言對人而言更容易理解、撰寫與維護。
✅ 斐波那契數列 [定義](https://en.wikipedia.org/wiki/Fibonacci_number) 為一組數字，其中每個數字是前兩個數字的總和，從 0 和 1 開始。前 10 個斐波那契數列的數字是 0, 1, 1, 2, 3, 5, 8, 13, 21 和 34。
**你會注意到的關鍵差異：**
- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣描述性的名稱，而組合語言用像 `r0`、`r1` 的代號
- **註解**：高階語言鼓勵撰寫說明性註解，使程式碼具備自我說明能力
- **結構**：JavaScript 的邏輯流程符合人類逐步思考問題的方式
- **維護**：針對不同需求更新 JavaScript 版本簡單明瞭
## 程式的基本元素
✅ **關於費波那契數列**：這個絕美的數字模式（每個數字等於之前兩個數字的和：0、1、1、2、3、5、8...）在自然界中隨處可見！你會發現在向日葵的螺旋花序、松果的排列、鸚鵡螺的殼形曲線，甚至是樹枝的生長方式中都有它。數學與程式碼怎麼能幫助我們理解並重現大自然用於創造美麗的模式，實在令人讚嘆！
程式中的單一指令稱為 *語句*，通常會有一個字符或行間距來標記指令的結束或 *終止*。程式如何終止因語言而異。
程式中的語句可能依賴於使用者或其他地方提供的數據來執行指令。數據可以改變程式的行為，因此程式語言提供了一種方法來暫時存儲數據，以便稍後使用。這些被稱為 *變數*。變數是指令，指示設備將數據存儲在其記憶體中。程式中的變數類似於代數中的變數，它們有唯一的名稱，其值可能隨時間改變。
## 造就魔法的基礎構件
有些語句可能不會被設備執行。這通常是由開發者設計的，或者是意外錯誤導致的。這種對應用程式的控制使其更具穩定性和可維護性。通常，這些控制變化發生在滿足某些條件時。現代程式設計中常用的一種語句是 `if..else` 語句。
好了，現在你已經看過程式語言的實際運作，讓我們來拆解組成每一個程式的基本單元。把它們想像成你最愛食譜中必不可少的材料 — 一旦理解每個材料的作用，你就能閱讀與撰寫幾乎任何語言的程式碼！
✅ 您將在後續課程中學習更多關於這類語句的知識。
這有點像是在學習程式設計的文法。還記得你小時候學名詞、動詞以及如何組句子嗎？程式設計有自己的語法，老實說，它比英語文法更合邏輯也更寬容！😄
## 工具介紹
### 陳述句：逐步指令
[![工具介紹](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介紹")
先從**陳述句**開始 — 它們就像你與電腦之間交流的句子。每條陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」，「停到那個車位」。
> 🎥 點擊上方圖片觀看工具介紹影片
我喜歡陳述句之處在於它通常非常易讀。看這個：
在本節中，您將學習一些在開始專業開發旅程時可能非常有用的軟體。
```javascript
// 執行單一動作的基本敘述
const userName = "Alex";
console.log("Hello, world!");
const sum = 5 + 3;
```
**開發環境** 是開發者在編寫軟體時經常使用的一組獨特工具和功能。其中一些工具已根據開發者的特定需求進行了自訂，並可能隨著開發者的工作重點、個人項目或使用不同程式語言而改變。開發環境如同使用它的開發者一樣獨特。
**這段程式碼做了什麼：**
- **宣告**一個以儲存使用者姓名的常數變數
- **顯示**一條問候訊息到主控台輸出
- **計算**並儲存一個數學運算結果
### 編輯器
```javascript
// 與網頁互動的語句
document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue";
```
編輯器是軟體開發中最重要的工具之一。編輯器是您編寫程式碼的地方，有時也是您運行程式碼的地方。
**逐步來看，發生了什麼：**
- **修改**網頁標題（瀏覽器分頁上顯示）
- **變更**整個網頁主體的背景顏色
開發者依賴編輯器的其他原因包括：
### 變數：程式的記憶系統
- *除錯* 幫助逐行檢查程式碼，找出錯誤和問題。一些編輯器具有除錯功能；它們可以根據特定程式語言進行自訂和添加。
- *語法高亮* 為程式碼添加顏色和文本格式，使其更易於閱讀。大多數編輯器允許自訂語法高亮。
- *擴展與整合* 是專為開發者設計的工具，這些工具並未內建於基礎編輯器中。例如，許多開發者會為程式碼撰寫文檔以解釋其工作原理。他們可能會安裝拼寫檢查擴展來幫助檢查文檔中的拼寫錯誤。大多數擴展是針對特定編輯器使用的，大多數編輯器都提供搜索可用擴展的方法。
- *自訂化* 使開發者能夠創建符合其需求的獨特開發環境。大多數編輯器都非常可自訂，並且可能允許開發者創建自訂擴展。
好啦，**變數**老實說是我最喜歡教的概念之一，因為它們很像你每天都用到的東西！
#### 常用編輯器及網頁開發擴展
想想你手機的聯絡人列表。你不會背起每個電話號碼，而是儲存「媽媽」、「摯友」，或「凌晨兩點還送餐的披薩店」，讓手機幫你記住真正的號碼。變數也是如此！它們像有標籤的容器，你的程式可以塞進資訊，並用有意義的名稱隨時取出。
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Atom](https://atom.io/)
- [spell-check](https://atom.io/packages/spell-check)
- [teletype](https://atom.io/packages/teletype)
- [atom-beautify](https://atom.io/packages/atom-beautify)
- [Sublimetext](https://www.sublimetext.com/)
- [emmet](https://emmet.io/)
- [SublimeLinter](http://www.sublimelinter.com/en/stable/)
更酷的是：變數可以隨程式運行改變（這就是「變數」名稱的由來 — 你懂的！）。就像你發現更好吃的披薩店會更新聯絡資訊一樣，變數也能隨程式學習新資訊或情況改變而更新！
讓我示範它有多簡單美妙：
```javascript
// 第一步：建立基本變數
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let temperature = 75;
let isRaining = false;
```
**理解這些概念：**
- **儲存**不變的值於 `const` 變數（例如網站名稱）
- **使用** `let` 來存放會變動的值
- **指派**不同資料型別：字串（文字）、數字、布林值（true/false）
- **選擇**具描述性的名稱解釋變數內容
### 瀏覽器
```javascript
// 第2步：使用物件來群組相關資料
const weatherData = {
location: "San Francisco",
humidity: 65,
windSpeed: 12
};
```
另一個重要工具是瀏覽器。網頁開發者依賴瀏覽器來查看其程式碼在網頁上的運行效果。瀏覽器還用於顯示編輯器中編寫的網頁的視覺元素，例如 HTML。
**以上我們：**
- **建立**一個物件來整理相關的天氣資訊
- **把多個資料彙整**到一個變數名稱下
- **用**鍵值組清楚標記每一筆資料
許多瀏覽器都配備了 *開發者工具*（DevTools），其中包含一組有用的功能和信息，幫助開發者收集和捕獲有關其應用程式的重要信息。例如：如果網頁出現錯誤，有時知道錯誤發生的時間會很有幫助。瀏覽器中的開發者工具可以配置為捕獲這些信息。
```javascript
// 步驟 3：使用及更新變數
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
#### 常用瀏覽器及開發者工具
// 更新可變動的變數
currentWeather = "cloudy";
temperature = 68;
```
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)
**來看每個部分：**
- **使用**模板字面量和 `${}` 語法顯示資訊
- **用**點記法存取物件屬性（`weatherData.windSpeed`）
- **更新**以 `let` 宣告的變數反映變化狀況
- **結合**多個變數產生有意義的訊息
### 命令列工具
```javascript
// 第4步：現代解構賦值使代碼更清晰
const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`);
```
一些開發者更喜歡使用較少圖形化的界面來完成日常任務，並依賴命令列來實現這一點。編寫程式碼需要大量的打字工作，一些開發者更喜歡不打斷鍵盤上的工作流程。他們會使用鍵盤快捷鍵在桌面窗口之間切換、處理不同文件以及使用工具。大多數任務可以用滑鼠完成，但使用命令列的一個好處是可以在不需要滑鼠和鍵盤切換的情況下完成許多工作。命令列的另一個好處是它們是可配置的，您可以保存自訂配置，稍後更改並導入到其他開發機器。由於開發環境對每個開發者來說都是獨特的，有些人會避免使用命令列，有些人完全依賴它，有些人則喜歡兩者混合使用。
**你需要知道：**
- **透過解構賦值**擷取物件中特定屬性
- **自動建立**與物件鍵同名的新變數
- **簡化**程式碼，避免重复的點記法
### 常用命令列選項
### 控制流程：教你的程式思考
命令列選項會根據您使用的操作系統而有所不同。
好了，這裡是程式設計最令人驚嘆的部分！**控制流程**基本上是在教你的程式如何做聰明的判斷，就像你每天不假思索地做的事情一樣。
*💻 = 操作系統預裝。*
想像一下：今天早上你可能過程是「如果下雨，我會帶傘；如果冷，我會穿外套；如果要遲到了，我會跳過早餐路上買咖啡」。你的大腦每天自然就按照這種 if-then 邏輯運作數十次！
#### Windows
這讓程式感覺聰明、有生命力，不再只是照著無聊、可預測的劇本行事。它們可以觀察情況，評估正在發生的事，並做出合適反應。就像給程式一顆能因應情況做選擇的大腦！
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon)（也稱為 CMD）💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
- [mintty](https://mintty.github.io/)
#### MacOS
想看看這有多美妙？讓我示範：
```javascript
// 第一步：基本條件邏輯
const userAge = 17;
if (userAge >= 18) {
console.log("You can vote!");
} else {
const yearsToWait = 18 - userAge;
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}
```
**程式碼做了什麼：**
- **檢查**使用者的年齡是否符合投票資格
- **依條件結果**執行不同程式區塊
- **計算並顯示**未滿18歲還需多久才可投票
- **提供**針對每種情況的具體有用回饋
```javascript
// 步驟2：多個條件與邏輯運算子
const userAge = 17;
const hasPermission = true;
if (userAge >= 18 && hasPermission) {
console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
console.log("You need parent permission to enter.");
} else {
console.log("Sorry, you must be at least 16 years old.");
}
```
**拆解過程：**
- **用 `&&`（且）運算符**組合多重條件
- **用 `else if`**建立多層條件判斷架構
- **用最後 `else`**涵蓋所有可能情況
- **提供**每種不同狀況清楚明確的反饋
```javascript
// 第三步：使用三元運算子的簡潔條件判斷
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);
```
**記住：**
- **用三元運算子 (`? :`)**快速處理簡單兩選一條件
- **先寫判斷式**，接著是 `?`，接著是條件為真時的結果，再來是 `:`，最後是條件為假的結果
- **適用於根據條件賦值**
```javascript
// 第4步：處理多個特定情況
const dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday - time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend - time to relax!");
break;
default:
console.log("Invalid day of the week");
}
```
**這段程式碼完成：**
- **對變數值比對多個特定案例**
- **將相似案例歸類（平日與週末）**
- **找到符合時執行對應程式碼塊**
- **用 `default` 處理不預期的值**
- **用 `break` 防止繼續執行下一案例**
> 💡 **現實類比**：想像控制流程就像世界上最有耐心的 GPS 指示路線。它可能說「如果主街塞車，就走高速公路。如果高速公路施工封路，試試風景線路。」程式正是用這種條件邏輯聰明回應不同情況，且永遠給使用者最佳體驗。
### 🎯 **概念檢測：基礎構件掌握**
**來看看你對基礎的掌握：**
- 你能用自己的話解釋變數和陳述句的差別嗎？
- 想出一個現實生活中會用到 if-then 判斷的例子（像投票例子）
- 有哪些程式邏輯讓你感到驚訝？
**快速提振信心：**
```mermaid
flowchart LR
A["📝 陳述式<br/>(指令)"] --> B["📦 變數<br/>(儲存)"] --> C["🔀 控制流程<br/>(判斷)"] --> D["🎉 可執行程式!"]
style A fill:#ffeb3b
style B fill:#4caf50
style C fill:#2196f3
style D fill:#ff4081
```
✅ **接下來是什麼**：我們將會非常盡興地深入這些概念，繼續這段奇妙旅程！此刻先專注感受那種對未來無限可能的興奮吧。隨著練習，具體技巧自然會牢牢記住 — 我保證你會比預期還要享受這過程！
## 工具裝備介紹
老實說，到了這裡我已經興奮到快控制不住了！🚀 我們將談談那些令人讚嘆的工具，讓你感覺像是剛拿到一架數位太空船的鑰匙。
你知道廚師的刀具平衡得恰到好處，好像手臂的延伸嗎？或是音樂家有把只要一彈就唱的吉他？開發者們也有自己版本的魔法工具，而接下來要說的絕對令你瞠目結舌 — 這些大部分全都是免費的！
我幾乎坐立難安想跟你分享，因為這些工具徹底改變了我們建立軟體的方式。像是 AI 助手可以幫忙寫程式碼（不是開玩笑！）、雲端環境讓你能在任何有 Wi-Fi 的地方開發完整應用程式，還有那種進階到像透視眼一樣的除錯工具。
更令人起雞皮疙瘩的是：這些不是「初學者工具」用膩就丟的喔。這些正是 Google、Netflix、你愛的獨立 App 工作室的開發者現在就正用的專業級工具。你用它們會感覺自己超級專業！
```mermaid
graph TD
A["💡 你的想法"] --> B["⌨️ 程式編輯器<br/>(VS Code)"]
B --> C["🌐 瀏覽器開發工具<br/>(測試與除錯)"]
C --> D["⚡ 命令列<br/>(自動化與工具)"]
D --> E["📚 文件<br/>(學習與參考)"]
E --> F["🚀 優秀的網頁應用程式!"]
B -.-> G["🤖 AI 助手<br/>(GitHub Copilot)"]
C -.-> H["📱 裝置測試<br/>(響應式設計)"]
D -.-> I["📦 套件管理器<br/>(npm, yarn)"]
E -.-> J["👥 社群<br/>(Stack Overflow)"]
style A fill:#fff59d
style F fill:#c8e6c9
style G fill:#e1f5fe
style H fill:#f3e5f5
style I fill:#ffccbc
style J fill:#e8eaf6
```
### 程式碼編輯器與 IDE：你新的數位最佳夥伴
談談程式碼編輯器 — 它們真的會成為你最愛待著的地方！把它們想成你個人的程式創作聖地，你會花大量時間在這裡打造你的數位作品。
現代編輯器的魔法在於：它們不只是華麗的純文字編輯器。就像有位最聰明、最支持你的程式教練全天候陪你坐在旁邊。它們在你察覺錯誤前就幫你抓出來，給你建議讓你看起來像個天才，幫你理解每段程式碼在做什麼，有些甚至能預測你下一秒想打什麼，主動幫你補全！
我記得第一次發現自動完成時的感覺 — 就像活在未來。你開始打字，編輯器說：「嘿，你是不是想用這個功能，它正好做你需要的事？」彷彿有個讀心術高手當你程式夥伴！
**這些編輯器厲害在哪裡？**
現代程式碼編輯器提供一系列設計來提升工作效率的功能：
| 功能 | 作用 | 為何有用 |
|---------|--------------|--------------|
| **語法高亮** | 為程式碼不同部分上色 | 讓程式碼更易讀、易發現錯誤 |
| **自動完成** | 打字時建議程式碼 | 加快寫程式速度、減少錯字 |
| **除錯工具** | 幫你找出並修正錯誤 | 省下大量問題排查時間 |
| **擴充套件** | 新增專門功能 | 客製化編輯器符合各種技術需求 |
| **AI 助手** | 建議程式碼與解釋 | 加速學習與提升生產力 |
> 🎥 **影片資源**：想看這些工具實戰嗎？請查看這支[工具裝備介紹影片](https://youtube.com/watch?v=69WJeXGBdxg)獲得完整概覽。
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
#### 推薦網頁開發用編輯器
#### Linux
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（免費）
- 網頁開發者最愛
- 卓越的擴充生態系
- 內建終端機與 Git 整合
- **必裝擴充套件**：
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) — AI 驅動的程式碼建議
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) — 即時協作
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) — 自動格式化程式碼
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) — 幫你抓拼字錯誤
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付費，學生免費）
- 進階除錯與測試工具
- 智慧化程式碼補全
- 內建版本控制
#### 常用命令列工具
**雲端 IDE**（不同收費方案）
- [GitHub Codespaces](https://github.com/features/codespaces) — 瀏覽器中的完整 VS Code
- [Replit](https://replit.com/) — 很適合學習與分享程式碼
- [StackBlitz](https://stackblitz.com/) — 立即啟用全端網頁開發
- [Git](https://git-scm.com/) (💻 大多數操作系統預裝)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
> 💡 **初學者建議**：從 Visual Studio Code 開始 — 它免費、產業廣泛使用，加上強大的社群與豐富教學與擴充套件。
### 文檔
當開發者想學習新事物時，他們通常會查閱文檔以了解如何使用它。開發者經常依賴文檔來指導他們正確使用工具和語言，並深入了解其工作原理。
### 網頁瀏覽器：你的秘密開發實驗室
#### 網頁開發常用文檔
好了，準備好被徹底震撼吧！你知道你平常用瀏覽器滑社群媒體、看影片？其實它們一直藏著個令人難以置信的祕密開發實驗室，等著你發掘！
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)，由 [Firefox](https://www.mozilla.org/firefox/) 瀏覽器的出版商 Mozilla 提供
- [Frontend Masters](https://frontendmasters.com/learn/)
- [Web.dev](https://web.dev)，由 [Chrome](https://www.google.com/chrome/) 的出版商 Google 提供
- [Microsoft 的開發者文檔](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，適用於 [Microsoft Edge](https://www.microsoft.com/edge)
- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
每次你在網頁上右鍵點選「檢查元素」，你就打開了一個隱藏的開發者工具世界，誠實說它比我過去花大錢買的部分軟體還強大。就像發現你平常用的廚房後面藏著一座專業主廚實驗室！
第一次有人給我看瀏覽器開發者工具 (DevTools) 時，我花了大概三個小時瘋狂點擊，然後驚呼：「等等，這個功能它也有？！」你真的可以即時編輯任何網站，精準看到載入速度，測試網站在不同裝置上的呈現，甚至像專家一樣除錯 JavaScript。這真的超神奇！
✅ 做一些研究：現在您已了解網頁開發者的環境，試著比較和對比網頁設計師的環境。
**這就是瀏覽器成為你秘密武器的原因：**
當你建立一個網站或網頁應用程式時，你需要知道它在真實世界中的樣子和行為。瀏覽器不僅負責呈現你的作品，還會提供性能、無障礙和潛在問題的詳細反饋。
#### 瀏覽器開發者工具 (DevTools)
現代瀏覽器包含完整的開發套件：
| 工具類別 | 功能說明 | 範例用途 |
|----------|----------|----------|
| **元素檢查器** | 即時檢視和編輯 HTML/CSS | 調整樣式立刻看到效果 |
| **主控台** | 查看錯誤訊息和測試 JavaScript | 除錯問題並嘗試程式碼 |
| **網路監視器** | 追蹤資源載入情形 | 優化效能和載入時間 |
| **無障礙檢查器** | 測試包容性設計 | 確保網站適合所有用戶 |
| **裝置模擬器** | 預覽不同螢幕尺寸 | 測試響應式設計不需多台裝置 |
#### 推薦開發用瀏覽器
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** － 業界標準的 DevTools，附有豐富文件
- **[Firefox](https://developer.mozilla.org/docs/Tools)** － 優秀的 CSS Grid 及無障礙工具
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** － 建構於 Chromium，搭配微軟開發資源
> ⚠️ **重要測試提示**：務必在多個瀏覽器中測試你的網站！Chrome 完美運作的東西，可能在 Safari 或 Firefox 看起來不同。專業開發者會跨主要瀏覽器測試，確保用戶體驗一致。
### 指令列工具：帶你開啟開發者超能力之門
好了，讓我們來一個完全坦白的小時刻講講指令列，因為我想讓你聽聽來自真正懂它的人的說法。剛看到指令列那個黑黑的、閃爍著文字的螢幕時，我腦中只有一句話：「絕對不行！這看起來像是 80 年代駭客電影裡的東西，我肯定不夠聰明用！」😅
但其實我當時最想有人告訴我，也是我現在想跟你說的：指令列一點也不可怕，它就像是直接跟你的電腦對話。想像你點餐時，用有圖片選單的漂亮 App 很輕鬆，但如果你直接走進你最愛的餐廳，廚師一聽你說「驚喜幫我做個超讚的菜」，馬上就給你完美料理，那指令列就像是廚師，聽你的話立刻做出結果。
指令列是讓開發者感覺自己像超級巫師的地方。你打出幾個看似神奇的字（好啦，他們只是命令，但感覺很神奇！）然後按下 Enter，砰－－你建立了整個專案架構、安裝全球強大的工具，甚至把應用部署上線讓千萬人看。嘗到這種力量後，真的會上癮！
**為什麼你會喜歡指令列：**
雖然圖形介面很適合多種任務，指令列在自動化、精準度和速度上更勝一籌。很多開發工具主要透過指令列操作，學會有效使用可以大幅提升生產力。
```bash
# 第一步：建立並切換到專案目錄
mkdir my-awesome-website
cd my-awesome-website
```
**這段程式碼的功能：**
- **建立** 一個叫做 "my-awesome-website" 的新資料夾當作專案
- **進入** 新建資料夾開始工作
```bash
# 第2步：使用 package.json 初始化專案
npm init -y
# 安裝現代開發工具
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js
```
**逐步說明如下：**
- **初始化** 一個帶預設設定的 Node.js 專案，使用 `npm init -y`
- **安裝** Vite，作為快速開發與生產環境建置的現代化工具
- **加入** Prettier 進行自動格式化，ESLint 確保程式碼品質
- **使用** `--save-dev` 標明這些為開發階段的依賴
```bash
# 第3步：建立專案結構與檔案
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
# 啟動開發伺服器
npx vite
```
**上面我們做了：**
- **整理** 專案架構，分出原始碼與資源資料夾
- **產生** 基本 HTML 檔案，符合文件結構標準
- **啟動** Vite 開發伺服器，支援即時重新載入和熱模組替換
#### 網頁開發必備指令列工具
| 工具 | 用途 | 為什麼需要它 |
|------|------|---------------|
| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤變更、團隊協作、備份工作 |
| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境及套件管理 | 執行瀏覽器外的 JavaScript，安裝現代引擎 |
| **[Vite](https://vitejs.dev/)** | 建置工具與開發伺服器 | 極速開發搭配熱模組替換 |
| **[ESLint](https://eslint.org/)** | 程式碼品質檢查 | 自動偵測並修正 JS 問題 |
| **[Prettier](https://prettier.io/)** | 程式碼格式化 | 保持程式碼風格一致且易讀 |
#### 平台專屬選項
**Windows：**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** － 現代功能齊全的終端機
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 － 強大的腳本環境
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 － 傳統 Windows 指令列
**macOS：**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 － 內建終端機應用程式
- **[iTerm2](https://iterm2.com/)** － 進階功能的終端機模擬器
**Linux：**
- **[Bash](https://www.gnu.org/software/bash/)** 💻 － 標準 Linux 殼層
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** － 進階終端機模擬器
> 💻 = 作業系統預裝
> 🎯 **學習路徑**：從基礎指令如 `cd`（切換目錄）、`ls` 或 `dir`（列出檔案）、`mkdir`（建立資料夾）開始操作。練習現代工作流程命令如 `npm install`、`git status`、`code .`（在 VS Code 開啟目前資料夾）。熟悉後，自然會掌握更進階與自動化技巧。
### 文件說明：你全天候的學習導師
好，讓我告訴你一個小祕密，讓你作為初學者時感覺好很多：就算是經驗最老練的開發者，也花大量時間在閱讀文件。這並不是他們不懂，而是一種智慧的象徵！
把文件想像成擁有世界上最耐心、最博學老師的全天候資源。凌晨兩點卡關？文件像溫暖的虛擬擁抱，給你正確答案。想學大家都在用的新功能？文件裡有一步步範例。想搞懂為什麼要用，怎麼運作？沒錯，文件會用讓你終於明白的方式解釋！
有件事徹底改變我看法的：網頁開發更新太快，沒有人（真的沒有）能把一切記在腦子裡。我看到有 15 年資深的開發大佬也會查基本語法，你知道嗎？這不尷尬，這是聰明！不是記憶力完美，而是知道怎麼快速找到可靠答案，並懂得應用。
**真正關鍵的地方在這裡：**
專業開發者花大量時間看文檔，不是因為不懂，而是因為網頁開發環境變化如此快速，必須不斷學習才能跟上。好的文件幫你理解不只是 *怎麼用*，還有 *為什麼* 跟 *何時* 使用。
#### 重要文件資源
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- 網頁技術文件的黃金標準
- HTML、CSS、JavaScript 全面指南
- 包含瀏覽器相容性資訊
- 實例範例與互動演示
**[Web.dev](https://web.dev)** (由 Google 提供)
- 現代網頁開發最佳實踐
- 效能優化指引
- 無障礙及包容性設計原則
- 真實案例分享
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- Edge 瀏覽器開發資源
- 漸進式網頁應用程式指南
- 跨平台開發洞察
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- 系統化課程規劃
- 業界專家影片課程
- 實作編碼練習
> 📚 **學習策略**：別嘗試死記文件內容，學會有效快速瀏覽才是王道。收藏常用參考資源，練習用搜尋找到特定資訊。
### 🔧 **工具掌握測試：哪個最吸引你？**
**請花一點時間想想：**
- 你第一個最想嘗試的工具是什麼？（無所謂正錯！）
- 指令列還是覺得害怕，或是開始想試試看了？
- 你能想像用瀏覽器 DevTools 來窺探你最愛網站的「幕後秘辛」嗎？
```mermaid
pie title "開發者使用工具的時間分配"
"程式碼編輯器" : 40
"瀏覽器測試" : 25
"命令列" : 15
"閱讀文件" : 15
"除錯" : 5
```
> **有趣洞見**：大多數開發者約 40% 時間待在編輯器，但請注意花多少時間在測試、學習和解決問題。編程不只是寫程式碼－而是在打造體驗！
✅ **思考題**：想想看建立網站的工具 (開發) 跟設計網站外觀的工具 (設計) 有什麼不同？就像是蓋房子的建築師和實際施工的承包商。兩者都很重要，但工具箱不同！這樣的思維幫你看清網站如何誕生的全貌。
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
**描述：** 探索現代程式碼編輯器或 IDE 的功能，並示範它如何提升你作為網頁開發者的工作流程。
**提示：** 選擇一款程式碼編輯器或 IDE（像 Visual Studio Code、WebStorm，或雲端 IDE）。列出三個功能或擴充套件說明它們如何幫助你更有效率地撰寫、除錯或維護程式碼。對每一項提供簡短說明其對工作流程的好處。
---
## 🚀 挑戰
## 🚀 挑戰任務
**破案者，準備好了嗎？**
比較一些程式語言。JavaScript 與 Java 有哪些獨特特性？COBOL 與 Go 又如何？
你已經打下堅實基礎，現在有個冒險任務要讓你見識程式世界有多麼多元迷人。別擔心，這還不是寫程式碼的時候！把自己當成一名編程語言偵探，開始你的首宗刺激案件！
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/)
**你的任務，如果你願意接受：**
1. **成為語言探索者**：從截然不同的三個編程語言挑選出來──可能一個用於網站，另一個開發手機 App，還有一個用於科學資料分析。找相同簡單任務的各語言範例。保證你會驚訝它們看起來多不同，卻完成同一件事！
## 回顧與自學
2. **挖掘起源故事**：每種語言的特別之處是什麼？有趣的是，每種語言都是有人想：「該死，我一定可以用更好的方法解決這個問題！」才誕生的。你能找出它們當初解決的問題嗎？這些故事超好玩！
研究一下程式設計師可用的不同語言。嘗試用一種語言寫一行程式碼，然後用另外兩種語言重寫它。您學到了什麼？
3. **認識社群**：看看各語言社群如何包容熱情。某些有百萬開發者互相分享、支援；有些較小但非常團結密切。你會愛上他們不同的個性！
## 作業
4. **聽從直覺**：哪個語言現在對你來說最友善？別強迫「完美選擇」──相信你的直覺！沒有錯答案，日後還可以再多探索。
[閱讀文檔](assignment.md)
**額外偵探任務**：試找出這些語言用在哪些知名網站或 App。保證會讓你震驚 Instagram、Netflix 或你玩不膩的手機遊戲背後的技術！
> 注意：在選擇作業工具時，請勿選擇上述已列出的編輯器、瀏覽器或命令列工具。
> 💡 **記住**：今天你不用成為任何語言專家。只是先認識街區，決定想在哪裡落腳。慢慢來，玩得開心，讓好奇心帶路！
## 讓我們一起慶祝你的發現！
哇靠，今天你吸收了好多令人驚奇的資訊！我非常期待看到這趟精彩旅程在你心中留下多少痕跡。記得──這不是要你考試或要完美表現。更像是在慶祝你已經了解這個即將踏入的奇妙世界！
[前往課後測驗](https://ff-quizzes.netlify.app/web/)
## Review & Self Study
**花點時間探索並享受其中的樂趣！**
你今天已經學了很多，這真的是值得驕傲的事！現在來到有趣的部分——探索激發你好奇心的主題。記得，這不是作業，而是一場冒險！
**深入探究讓你感興趣的內容：**
**親自動手玩程式語言：**
- 造訪吸引你目光的 2-3 種程式語言官方網站。每種語言都有它獨特的個性與故事！
- 嘗試一些線上編碼平台，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。別害怕嘗試——你不會破壞任何東西！
- 閱讀你喜愛語言的誕生故事。真的，有些起源故事非常迷人，能幫助你理解語言設計背後的原因。
**熟悉你的新工具：**
- 如果還沒下載過 Visual Studio Code，快去下載吧——它是免費的，你一定會喜歡！
- 花幾分鐘瀏覽 Extensions 市集。它就像你的程式碼編輯器的應用程式商店！
- 打開瀏覽器的開發者工具，點點看各種功能。別擔心一次全部懂，只要熟悉環境即可。
**參與社群：**
- 追蹤一些開發者社群，如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。程式社群對新手非常友善！
- 在 YouTube 上觀看一些入門程式教學影片。許多優質創作者都記得初學時的心情。
- 考慮參加本地聚會或線上社群。相信我，開發者都很樂於幫助新手！
> 🎯 **記住，我希望你牢記的是**：你不需要一夜之間成為程式高手！現在，你只是開始認識這個即將成為你生活一部分的精彩新世界。慢慢來，享受這趟旅程，並記得——你所敬佩的每位開發者，都曾經坐在你現在的位置，滿心期待也可能帶著些許不安。那是完全正常的，這也代表你正在走在正確的道路上！
## Assignment
[Reading the Docs](assignment.md)
> 💡 **關於作業的小提醒**：我真的很想看到你去探索我們還沒提過的工具！跳過我們已經談過的編輯器、瀏覽器和命令列工具——外面有個令人驚嘆的開發工具世界正等待你發掘。找尋活躍維護且擁有充滿活力、熱心社群的工具（這類工具通常擁有最好的教學，當你遇到困難需要幫助時，社群也會熱情支持你）。
---
## 🚀 Your Programming Journey Timeline
### ⚡ **你接下來 5 分鐘可以做的事**
- [ ] 書籤標記 2-3 個讓你感興趣的程式語言網站
- [ ] 如果還沒下載 Visual Studio Code，立即下載
- [ ] 開啟瀏覽器的開發者工具 (F12) 並在任何網站隨意點擊
- [ ] 加入一個程式社群（Dev.to、Reddit r/webdev，或 Stack Overflow）
### ⏰ **你這小時能完成的目標**
- [ ] 完成課後測驗並反思你的答案
- [ ] 使用 GitHub Copilot 擴充套件設定 VS Code
- [ ] 線上嘗試 2 種不同程式語言的「Hello World」範例
- [ ] 觀看一支 YouTube 上的「開發者的一天」影片
- [ ] 開始執行你程式語言偵探任務（挑戰內容）
### 📅 **你這週的冒險計畫**
- [ ] 完成作業並探索 3 種新的開發工具
- [ ] 在社群媒體追蹤 5 位開發者或程式帳號
- [ ] 嘗試在 CodePen 或 Replit 中做一個簡單作品（至少是「Hello, [你的名字]！」）
- [ ] 閱讀一篇開發者分享他們程式旅程的部落格文章
- [ ] 參加線上聚會或觀看程式演講
- [ ] 開始用線上教程學習你選定的程式語言
### 🗓️ **你這月的轉變**
- [ ] 建立你的第一個小專案（即使只是簡單的網頁也算！）
- [ ] 貢獻於開源專案（從文件修正開始）
- [ ] 指導剛開始學程式的人
- [ ] 建立你的開發者個人作品集網站
- [ ] 與本地開發者社群或學習小組聯繫
- [ ] 開始規劃下一個學習里程碑
### 🎯 **最後的反思檢查點**
**在繼續前，花點時間慶祝：**
- 今天程式中讓你最興奮的是什麼？
- 你最想先探索哪個工具或概念？
- 對於剛開始的程式旅程，你有什麼感覺？
- 現在你最想問開發者的一個問題是什麼？
```mermaid
journey
title 你的自信建立旅程
section 今天
好奇: 3: You
不知所措: 4: You
興奮: 5: You
section 這週
探索: 4: You
學習: 5: You
連結: 4: You
section 下個月
建立: 5: You
自信: 5: You
幫助他人: 5: You
```
> 🌟 **記住**：每位專家都曾是初學者。每位資深開發者也曾像你現在一樣興奮、可能有點不知所措，卻充滿好奇想知道未來的可能性。你正在與了不起的人同行，這趟旅程將會非常精彩。歡迎來到美妙的程式世界！🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，機器翻譯可能包含錯誤或不準確之處。文件原文應視為權威資料。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤用承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

77
translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
Unescape View File

@ -1,31 +1,78 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9e2f84e351a6fcb44bfc4066d98525f0",
"translation_date": "2025-10-03T09:00:39+00:00",
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
"translation_date": "2026-01-06T14:26:33+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
"language_code": "tw"
}
-->
## 使用說明
# Assignment: 探索現代網頁開發工具
網頁開發者可能需要許多工具，這些工具列在 [MDN 客戶端工具文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) 中。請選擇 **三個工具**，這些工具必須是 **本課程未涵蓋的**（排除 [列出特定工具或參考課程內容]），並解釋 **為什麼** 網頁開發者會使用每個工具，並找到符合每個類別的工具。對於每個工具，請分享其官方文件的連結（非 MDN 上的範例）。
## Instructions
**格式：**
- 工具名稱
- 為什麼網頁開發者會使用它（2-3 句）
- 文件連結
網頁開發生態系統包含數百種專門的工具，幫助開發人員高效地構建、測試和維護應用程式。你的任務是研究並了解能夠補充本課程所涵蓋工具的其他工具。
**字數要求：**
- 每個解釋需 2-3 句。
**你的任務：** 選擇 **三種未在本課程中涵蓋的工具**（避免選擇已列出的程式碼編輯器、瀏覽器或命令列工具）。聚焦於解決現代網頁開發工作流程中特定問題的工具。
## 評分標準
**對每個工具，請提供：**
卓越 | 合格 | 需改進
--- | --- | --- |
解釋了為什麼網頁開發者會使用工具 | 解釋了如何使用，但未說明為什麼開發者會使用工具 | 未提及開發者如何或為什麼使用工具 |
1. **工具名稱及類別**（例如「Figma - 設計工具」或「Jest - 測試框架」）
2. **目的與優勢** — 用2到3句話說明網頁開發者為何使用此工具，以及它解決了哪些問題
3. **官方文件連結** — 提供該工具的官方文件或網站（不要只提供教學網站）
4. **實務情境** — 舉例說明此工具如何融入專業開發工作流程
## Suggested Tool Categories
考慮從以下類別探索工具：
| 類別 | 例子 | 功能說明 |
|----------|----------|--------------|
| **建構工具** | Vite、Webpack、Parcel、esbuild | 打包並優化程式碼以供生產環境，搭配快速開發伺服器 |
| **測試框架** | Vitest、Jest、Cypress、Playwright | 確保程式碼正確，且於佈署前捕捉錯誤 |
| **設計工具** | Figma、Adobe XD、Penpot | 共同製作模型、原型及設計系統 |
| **佈署平台** | Netlify、Vercel、Cloudflare Pages | 托管並分發網站，支援自動化CI/CD |
| **版本控制** | GitHub、GitLab、Bitbucket | 管理程式碼變更、協作與專案工作流程 |
| **CSS框架** | Tailwind CSS、Bootstrap、Bulma | 使用預先設計的元件庫加速樣式設計 |
| **套件管理器** | npm、pnpm、Yarn | 安裝和管理程式庫與相依性 |
| **無障礙工具** | axe-core、Lighthouse、Pa11y | 測試包容性設計與WCAG符合度 |
| **API開發** | Postman、Insomnia、Thunder Client | 於開發期間測試與紀錄API |
## Format Requirements
**針對每個工具：**
```
### [Tool Name] - [Category]
**Purpose:** [2-3 sentences explaining why developers use this tool]
**Documentation:** [Official website/documentation link]
**Workflow Integration:** [1 sentence about how it fits into development process]
```
## Quality Guidelines
- **選擇當前工具**：挑選2025年仍積極維護並廣泛使用的工具
- **聚焦價值**：解釋具體優勢，而非僅介紹工具功能
- **專業情境**：考慮團隊使用的工具，而非僅限個人業餘愛好者
- **多元選擇**：從不同類別挑選工具以展現生態系多樣性
- **現代相關性**：優先符合當前網頁開發趨勢與最佳實踐的工具
## Rubric
| 優異 | 良好 | 待改進 |
|-----------|------|-------------------|
| **清楚說明開發者使用每個工具的原因及解決問題** | **說明工具功能，但缺少價值的脈絡** | **只列出工具，未說明用途或優勢** |
| **提供所有工具的官方文件連結** | **大部分為官方連結，偶有1-2個教學網站** | **主要依賴教學網站而非官方文件** |
| **挑選當前專業使用且類別多元的工具** | **選擇良好，但類別多樣度有限** | **挑選過時工具或僅限單一類別** |
| **展現工具如何融入工作流程的理解** | **對專業情境有一定了解** | **僅專注於工具功能，無工作流程背景** |
> 💡 **研究小技巧**：搜尋職缺中提及的網頁開發工具、查看熱門開發者調查，或探究成功開源專案在GitHub使用的相依套件！
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解釋不承擔責任。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而產生之任何誤解或誤釋，我們概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

704
translations/tw/1-getting-started-lessons/2-github-basics/README.md
Unescape View File

@ -1,344 +1,776 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "ea65b75e488aa33a3cc5cb1c6c3f047a",
"translation_date": "2025-10-03T13:43:39+00:00",
"original_hash": "5c383cc2cc23bb164b06417d1c107a44",
"translation_date": "2026-01-06T14:26:49+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/README.md",
"language_code": "tw"
}
-->
# GitHub 簡介
本課程介紹 GitHub 的基礎知識，這是一個用於托管和管理程式碼變更的平台。
![GitHub 簡介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.tw.png)
> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
# Introduction to GitHub
嘿，未來的開發者！👋 準備好加入全球數百萬程式碼撰寫者的行列了嗎？我真心很興奮地要向你介紹 GitHub－把它想像成程式設計師的社群媒體平台，不同的是我們不是分享午餐照片，而是分享程式碼，一起打造超讚的東西！
讓我覺得超震撼的是：你手機上的每個應用程式、你造訪的每個網站，以及你將學會使用的大部分工具，都是由像 GitHub 這樣的平台上團隊合作的開發者所建立的。你喜歡的音樂APP？有人像你一樣參與過它的開發。那款讓你愛不釋手的遊戲？沒錯，很可能就是用 GitHub 協作打造的。而現在，你也會學會如何成為這個超棒社群的一員！
我知道一開始可能會覺得很複雜－天啊，我還記得第一次看 GitHub 頁面時心想：「這到底是什麼？」但重點是：每一位開發者起點都是你現在的這個位置。課程結束後，你會擁有自己的 GitHub 倉庫（想像成雲端裡的個人專案展示區），並且知道怎麼儲存你的工作、分享給別人，甚至參與數百萬用戶都在使用的專案。
我們將一起逐步踏上這趟旅程。不要急，不要緊張－只有你我，還有一些即將成為你新好朋友的超酷工具！
![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.tw.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title 你今天的 GitHub 冒險
section 設置
Install Git: 4: You
Create Account: 5: You
First Repository: 5: You
section 精通 Git
Local Changes: 4: You
Commits & Pushes: 5: You
Branching: 4: You
section 協作
Fork Projects: 4: You
Pull Requests: 5: You
Open Source: 5: You
```
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app)
## 簡介
## 介紹
在深入精彩內容之前，先來準備好你的電腦，讓 GitHub 魔法發揮作用吧！想像你在創作一件藝術品之前先安排好畫具－擁有正確工具會讓一切順暢又有趣很多。
我會帶你一步步設定，我保證它沒你想像的那麼可怕。如果一開始沒馬上理解也完全沒關係！我記得剛設置開發環境時，感覺自己像在看古老的象形文字一樣。每位開發者都曾經和你一樣，心想自己是不是搞錯了。小劇透：只要你願意學，你已經走在正確的路上了！🌟
在本課程中，我們將學習：
這堂課我們會學：
- 如何追蹤你在電腦上的工作
- 與他人合作開發專案
- 如何與他人合作專案
- 如何為開源軟體做出貢獻
### 先決條件
### 預備條件
在開始之前，請檢查是否已安裝 Git。在終端機中輸入：
讓我們先準備好你的電腦，讓 GitHub 魔法開始發動！別擔心－這個設定只要做一次，就能陪你整個程式碼旅程。
好，從基礎開始！首先，我們要看看 Git 是否已經安裝在你的電腦上。Git 就像一位超厲害的助理，會記住你對程式碼的每個變更－比你每兩秒瘋狂按 Ctrl+S 好太多了（大家都有過這種經驗！）
打開終端機（Terminal）輸入下面這個神奇指令，來看看 Git 是否存在：
`git --version`
如果尚未安裝 Git，請[下載 Git](https://git-scm.com/downloads)。接著，在終端機中設定你的本地 Git 配置：
* `git config --global user.name "your-name"`
* `git config --global user.email "your-email"`
如果沒有安裝 Git，不用擔心！立刻前往 [download Git](https://git-scm.com/downloads) 下載安裝。安裝好後，我們要讓 Git 知道你是誰：
> 💡 **首次設定**：這些指令會告訴 Git 你的身分。這些資訊會附加在你每次提交的紀錄上，所以請用你樂意公開分享的姓名和電子郵件。
```bash
git config --global user.name "your-name"
git config --global user.email "your-email"
```
要確認 Git 是否已配置，可以輸入：
```bash
git config --list
```
要檢查 Git 是否已配置，可以輸入：
`git config --list`
你還需要有一個 GitHub 帳號、程式碼編輯器（像是 Visual Studio Code），並且打開你的終端機（或命令提示字元）。
你還需要一個 GitHub 帳戶、一個程式碼編輯器（例如 Visual Studio Code），並打開你的終端機（或命令提示符）。
前往 [github.com](https://github.com/) 註冊帳號，或是登入並完善你的個人資料。
前往 [github.com](https://github.com/) 註冊帳戶（如果尚未註冊），或登入並填寫你的個人資料。
💡 **現代小技巧**：考慮設定 [SSH 金鑰](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) 或使用 [GitHub CLI](https://cli.github.com/) 來方便無密碼登入。
✅ GitHub 不是唯一的程式碼儲存庫平台；還有其他選擇，但 GitHub 是最知名的。
✅ GitHub 並非唯一的程式碼儲存庫平台，但它是最廣為人知的。
### 準備工作
你需要在本地電腦（筆記型電腦或 PC）上準備一個包含程式碼專案的資料夾，以及 GitHub 上的一個公共儲存庫，作為如何為他人專案做出貢獻的示例。
你需要在本機（筆電或桌機）有一個專案資料夾，還要有一個 GitHub 上的公開倉庫，當作示範用來學習如何貢獻他人的專案。
---
### 保護你的程式碼安全
談談安全性－別擔心，不會嚇到你！把這些安全習慣想像成鎖車門或家門－簡單的習慣，保護你的心血結晶。
我們會從一開始就示範使用安全、現代的 GitHub 使用方式，助你養成良好習慣，未來程式人生都用得上。
使用 GitHub 時，請務必遵守安全最佳實踐：
| 安全領域 | 最佳做法 | 為什麼重要 |
|----------|-----------|------------|
| **身份驗證** | 使用 SSH 金鑰或個人存取權杖 | 密碼安全性較差，且逐漸被淘汰 |
| **雙重驗證** | 啟用 GitHub 帳號雙重驗證(2FA) | 增加帳號額外保護層 |
| **倉庫安全** | 千萬不要提交敏感資訊 | API 金鑰及密碼絕不應出現在公開倉庫 |
| **相依更新管理** | 啟用 Dependabot 自動更新相依套件 | 保持套件安全且最新 |
## 程式碼管理
> ⚠️ **重要安全提醒**：切勿將 API 金鑰、密碼或其他敏感資訊推送到任何倉庫。請使用環境變數和 `.gitignore` 檔案保護敏感資料。
假設你在本地有一個包含程式碼專案的資料夾，並希望使用 Git（版本控制系統）來追蹤你的進度。有些人將使用 Git 比喻為寫給未來自己的情書。閱讀幾天、幾週或幾個月後的提交訊息，你可以回憶起為什麼做出某個決定，或者「回滾」某個更改——前提是你寫了好的「提交訊息」。
**現代身份驗證設定：**
### 任務：建立儲存庫並提交程式碼
```bash
# 產生 SSH 金鑰（現代 ed25519 演算法）
ssh-keygen -t ed25519 -C "your_email@example.com"
> 查看影片
# 設定 Git 使用 SSH
git remote set-url origin git@github.com:username/repository.git
```
> 💡 **專家秘訣**：SSH 金鑰可以免除重複輸入密碼，更加安全。
---
## 像專家一樣管理你的程式碼
好啦，接下來才是真正令人興奮的部分！🎉 我們即將學會怎麼像專家一樣追蹤和管理你的程式碼。說實話，這是我最喜歡教的事，因為它真的能徹底改變遊戲規則。
想像你在寫一個精彩故事，你想記錄每個草稿、每次巧妙修改和所有「哇，這點子真棒！」的時刻。Git 就幫你做到這件事！它像是能穿越時空的筆記本，記得一切－每次按鍵、每個改動、每次「糟糕，這壞掉了」的時刻，讓你馬上回到從前修正錯誤。
老實說－一開始會覺得難懂。當年我也想「為什麼不直接用一般方式存檔呢？」但相信我：當你理解 Git（肯定會的！）時，你會有那種頓悟：「以前怎麼能沒有它寫程式？」就像發現你其實能飛，而不是一輩子都走路一樣！
假設你本機有一個專案資料夾，想用 git（版本控制系統）開始追蹤你的進度。有些人形容用 git 就像寫信給未來的自己。幾天、幾週甚至幾個月後讀回你的提交訊息，就能回想起你為什麼做決定，或者「回溯」之前的改動－當然這全賴你寫的「提交訊息」好不好。
```mermaid
flowchart TD
A[📁 你的專案檔案] --> B{這是 Git 倉庫嗎？}
B -->|否| C[git init]
B -->|是| D[進行變更]
C --> D
D --> E[git add .]
E --> F["git commit -m '訊息'"]
F --> G[git push]
G --> H[🌟 GitHub 上的程式碼！]
H --> I{想要協作嗎？}
I -->|是| J[分叉並克隆]
I -->|否| D
J --> K[建立分支]
K --> L[進行變更]
L --> M[拉取請求]
M --> N[🎉 貢獻中！]
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### 任務：建立你的第一個倉庫！
> 🎯 **你的任務（我超級期待你成功！）**：我們一起創建你的第一個 GitHub 倉庫！完成後，你會擁有網路上的一個小角落來存放你的程式碼，而且你會做出你的第一個「commit」（專業講法，即用聰明的方式儲存你的工作）。
>
> 這真的是個特別時刻－你即將正式加入全球開發者社群！我還記得自己第一次建立倉庫時，心情超激動，心想「哇，我真的在做這件事！」
讓我們一起一步步完成這趟探索旅程。慢慢來，每個步驟都會讓你越來越懂。記住，每個你尊敬的程式碼巨星都曾經如你現在這般，準備寫下第一個倉庫。是不是很酷？
> 觀看影片
>
> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
**一起來做：**
1. **在 GitHub 上建立儲存庫**。在 GitHub.com 的儲存庫標籤中，或從右上方的導航列找到 **new repo** 按鈕。
1. **在 GitHub 建立你的倉庫**。前往 GitHub.com，找到那個鮮綠色的 **New** 按鈕（或右上角的 **+** 符號），點擊後選擇 **New repository**。
1. 為你的儲存庫（資料夾）命名
1. 選擇 **create repository**。
這樣做：
1. 給你的倉庫取個名字－選一個有意義的名稱！
1. 想的話，可以加上描述（幫助別人了解專案內容）
1. 決定倉庫是公開（所有人可見）還是私人（只有你看得到）
1. 建議勾選新增 README 檔案－它就像專案的門面首頁
1. 按下 **Create repository**，慶祝吧－你已建立第一個倉庫！🎉
1. **導航到你的工作資料夾**。在終端機中，切換到你想開始追蹤的資料夾（也稱為目錄）。輸入：
2. **打開你的專案資料夾**。現在打開終端機（別怕，它沒你想像的複雜！）。我們要告訴電腦專案檔案在那裡，輸入：
```bash
cd [name of your folder]
```
1. **初始化 Git 儲存庫**。在你的專案中輸入：
**我們在做什麼：**
- 基本上是對電腦說「嘿，帶我去我的專案資料夾」
- 就像用滑鼠打開桌面的特定資料夾，不過用指令文字指示
- 把 `[name of your folder]` 換成你專案資料夾的實際名稱
3. **把資料夾變成 Git 倉庫**。魔法的部分來了！輸入：
```bash
git init
```
1. **檢查狀態**。要檢查儲存庫的狀態，輸入：
**剛剛發生了什麼（超酷！）：**
- Git 在你的專案裡建立一個隱藏的 `.git` 資料夾－你看不到它，但它存在！
- 你的普通資料夾現在變成一個能追蹤所有改動的「倉庫」
- 想像你的資料夾獲得了超能力，能記住一切
4. **查看現況**。看看 Git 現在對你的專案有什麼看法：
```bash
git status
```
輸出的內容可能如下所示：
**解讀 Git 的回應：**
你可能會看到像這樣的訊息：
```output
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
(use "git restore <file>..." to discard changes in working directory)
modified: file.txt
modified: file2.txt
```
通常，`git status` 命令會告訴你哪些檔案已準備好被 _保存_ 到儲存庫，或者哪些檔案有更改需要持久化。
**別慌！這代表什麼：**
- **紅色** 的檔案代表改過但還沒準備好存檔
- **綠色** （如果出現）代表檔案已準備好儲存
- Git 很貼心地告訴你下一步該怎麼做
1. **添加所有檔案進行追蹤**
這也稱為暫存檔案/將檔案添加到暫存區。
> 💡 **專家小提示**：`git status` 是你最好的朋友！任何時候疑惑，都能問它「Hey，情況怎麼樣？」。
5. **準備你的檔案以儲存**（這叫做「暫存」）：
```bash
git add .
```
`git add` 加上 `.` 參數表示所有檔案和更改都將被追蹤。
**剛剛做了啥：**
- 我們告訴 Git「嘿，下一次存檔要包含所有檔案」
- `.` 代表資料夾中「全部內容」
- 現在你的檔案都已被「暫存」，準備好進行下一步
1. **添加選定檔案進行追蹤**
**想挑選性暫存嗎？** 你可以只暫存指定檔案：
```bash
git add [file or folder name]
```
當你不想一次提交所有檔案時，這可以幫助我們只添加選定的檔案到暫存區。
**為什麼想這樣做？**
- 有時你想把相關改動一次存成一組
- 有助分類你的工作成有意義的單元
- 方便將來理解什麼時候變動了什麼
1. **取消暫存所有檔案**
**想取消暫存？** 沒問題！用這個指令：
```bash
# 取消所有檔案的暫存
git reset
# 只取消一個檔案的暫存
git reset [file name]
```
此命令可幫助我們一次取消暫存所有檔案。
不用怕－這不會刪除你工作內容，只是把檔案從「準備存」區移除。
1. **取消暫存特定檔案**
```bash
git reset [file or folder name]
```
此命令可幫助我們一次取消暫存特定檔案，該檔案不希望包含在下一次提交中。
1. **保存你的工作**。此時你已將檔案添加到所謂的 _暫存區_，Git 正在追蹤你的檔案。要使更改永久化，你需要 _提交_ 檔案。使用 `git commit` 命令建立一個 _提交_。提交代表儲存庫歷史中的一個保存點。輸入以下命令建立提交：
6. **永久保存你的工作**（開始你的第一次 commit！）：
```bash
git commit -m "first commit"
```
此命令提交所有檔案，並添加訊息 "first commit"。未來的提交訊息應更具描述性，以傳達你所做的更改類型。
**🎉 恭喜！你完成了第一個 commit！**
**發生了什麼事：**
- Git 在此刻對所有暫存檔案拍了一張「快照」
- 你寫下的 commit 訊息「first commit」說明這個存檔的意義
- Git 給了這快照一個獨特識別碼，日後可以輕鬆找到
- 你正式開始追蹤專案歷史了！
> 💡 **未來的 commit 訊息**：下次提交時試著更具描述性！不要只寫「updated stuff」，改成「Add contact form to homepage」或「Fix navigation menu bug」。你的未來自己會非常感謝你！
1. **將本地 Git 儲存庫連接到 GitHub**。本地的 Git 儲存庫很好，但某些時候你可能希望將檔案備份到其他地方，並邀請其他人與你合作。一個很好的地方就是 GitHub。記得我們已經在 GitHub 上建立了一個儲存庫，所以現在只需要將本地 Git 儲存庫與 GitHub 連接。`git remote add` 命令可以做到這一點。輸入以下命令：
7. **連結本機專案到 GitHub**。現在你的專案只存在電腦裡，我們要把它連結到 GitHub 倉庫，這樣才能分享給世界！
> 注意，在輸入命令之前，前往你的 GitHub 儲存庫頁面找到儲存庫 URL。你將在以下命令中使用它。將 ```https://github.com/username/repository_name.git``` 替換為你的 GitHub URL。
先到你的 GitHub 倉庫頁面，複製它的 URL。回來終端機，輸入：
```bash
git remote add origin https://github.com/username/repository_name.git
```
（把這個 URL 換成你的專案網址！）
此命令建立了一個名為 "origin" 的 _遠端_ 連接，指向你之前建立的 GitHub 儲存庫。
**我們剛剛做了什麼：**
- 我們建立了您本地專案和 GitHub 儲存庫之間的連結
- 「Origin」只是您 GitHub 儲存庫的一個暱稱——就像將連絡人加到您的手機一樣
- 現在您的本地 Git 知道在您準備分享時要將代碼傳送到哪裡
1. **將本地檔案推送到 GitHub**。到目前為止，你已建立了本地儲存庫與 GitHub 儲存庫之間的 _連接_。使用以下命令 `git push` 將檔案推送到 GitHub：
💡 **更簡易的方法**：如果您已安裝 GitHub CLI，可以用一條命令完成這個動作：
```bash
gh repo create my-repo --public --push --source=.
```
> 注意，你的分支名稱可能默認不是 ```main```。
8. **將代碼傳送到 GitHub**（重頭戲來了！）：
```bash
git push -u origin main
```
此命令將你的 "main" 分支中的提交推送到 GitHub。命令中包含 `-u` 的 `upstream` 分支設定，建立了本地分支與遠端分支之間的連結，因此未來你可以簡單地使用 git push 或 git pull，而無需指定分支名稱。Git 將自動使用 upstream 分支，未來的命令中不需要明確指定分支名稱。
**🚀 就是現在！您正在將代碼上傳到 GitHub！**
**正在發生的事情：**
- 您的 commit 正從您的電腦傳送至 GitHub
- `-u` 參數設置了永久連接，讓以後推送更簡單
- 「main」是您主要分支的名稱（就像主要資料夾）
- 這之後，您只需輸入 `git push` 即可上傳！
💡 **快速提醒**：如果您的分支叫別的名字（例如「master」），請改用那個名稱。您可用 `git branch --show-current` 查看。
2. **添加更多更改**。如果你想繼續進行更改並將它們推送到 GitHub，只需使用以下三個命令：
9. **您的新日常程式編寫節奏**（開始上癮的地方！）：
從現在開始，每當您改動專案時，就有這樣簡單的三步舞：
```bash
git add .
git commit -m "type your commit message here"
git commit -m "describe what you changed"
git push
```
> 提示，你可能還希望採用 `.gitignore` 檔案，以防止你不想追蹤的檔案出現在 GitHub 上——例如存放在同一資料夾中的筆記檔案，但不適合放在公共儲存庫中。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到 `.gitignore` 檔案的模板。
**這將成為您的編碼心跳：**
- 為代碼做出精彩更改 ✨
- 用 `git add` 將它們階段化（「嘿 Git，注意這些更改！」）
- 用 `git commit` 和描述訊息保存它們（未來的您會感謝現在的自己！）
- 用 `git push` 分享給世界 🚀
- 反覆如此——說真的，這將變得跟呼吸一樣自然！
我喜歡這個工作流程，因為它就像遊戲裡的多個儲存點。喜歡剛剛做的改動？就 commit 它！想嘗試冒險？沒問題──如果出錯了，隨時可以回到最後一次 commit！
> 💡 **小提示**：您也可能想用 `.gitignore` 檔案防止某些不想被追蹤的檔案出現在 GitHub 上，例如同資料夾裡您用來記錄筆記的檔案。您可從 [.gitignore templates](https://github.com/github/gitignore) 找範本，或使用 [gitignore.io](https://www.toptal.com/developers/gitignore) 製作。
### 🧠 **第一次提交：感覺如何？**
**請花點時間慶祝並反思：**
- 第一次看到代碼出現在 GitHub 上感覺如何？
- 哪個步驟讓您最困惑，哪個步驟反而出乎意料地簡單？
- 您能用自己的話解釋 `git add`、`git commit` 和 `git push` 的不同嗎？
```mermaid
stateDiagram-v2
[*] --> LocalFiles: 建立專案
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: 成功！🎉
note right of Staged
準備儲存的檔案
end note
note right of Committed
快照已建立
end note
```
> **記得**：即使是經驗豐富的開發者也有時會忘記確切指令。讓這套流程成為肌肉記憶需要練習——您做得很棒！
#### 現代 Git 工作流程
考慮採用以下現代實務：
- **慣例性提交（Conventional Commits）**：使用規範化的提交訊息格式，如 `feat:`、`fix:`、`docs:` 等。詳情請見 [conventionalcommits.org](https://www.conventionalcommits.org/)
- **原子性提交（Atomic commits）**：讓每次提交代表單一邏輯變更
- **頻繁提交**：經常用描述性訊息提交，而非少量但龐大的提交
#### 提交訊息
一個好的 Git 提交主題行應完成以下句子：
如果應用，這次提交將 <你的主題行>
優秀的 Git 提交主題行會完成這個句子：
如果套用，這次提交將會 <在這裡寫您的主題行>
主題請使用祈使句和現在式：「change」而非「changed」或「changes」。
在主題中如此，正文（可選）也以祈使句現在式呈現。正文應說明變更的動機，並與先前行為對比。您在解釋的是「為什麼」，不是「怎麼做」。
主題行使用命令式現在時態："change" 而不是 "changed" 或 "changes"。
在主題行中，以及在正文（可選）中，也使用命令式現在時態。正文應包括更改的動機，並與之前的行為形成對比。你是在解釋 `為什麼`，而不是 `如何`。
✅ 花幾分鐘逛逛 GitHub。能找到特別棒的提交訊息嗎？能找到特別簡潔的嗎？您認為提交訊息中什麼資訊最重要且實用？
✅ 花幾分鐘瀏覽 GitHub。你能找到一個非常好的提交訊息嗎？你能找到一個非常簡略的嗎？你認為在提交訊息中最重要和最有用的信息是什麼？
## 與他人協作（最好玩的部分！）
### 任務：合作
請戴好帽子，因為這裡是 GitHub 變得魔幻的時刻！🪄 你已學會管理自己的代碼，現在我們將深入我最愛的部分——與世界各地了不起的人合作。
將內容放到 GitHub 上的主要原因是讓其他開發者能夠合作。
想像一下：明天醒來發現有人在東京睡覺時優化了你代碼；接著有人在柏林修正了你卡住的錯誤。下午時候，聖保羅的開發者加上你從未想過的功能。這不是科幻，而是 GitHub 世界裡的平常星期二！
## 與他人合作專案
讓我真正振奮的是，你即將學到的協作技巧，正是 Google、微軟和你喜愛的初創公司每天都在用的工作流。你不只是學會了一個酷工具——你學會了讓整個軟體世界無縫合作的祕密語言。
> 查看影片
說真的，一旦你體驗到有人合併你的第一個拉取請求（Pull Request）的興奮，你就會理解為什麼開發者對開源那麼熱衷。這就像成為世界上最大、最有創意的團隊專案一份子！
> 請看影片
>
> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
把東西放到 GitHub 的主要原因，是為了讓與其他開發者協作成為可能。
在你的儲存庫中，導航到 `Insights > Community`，查看你的專案如何符合推薦的社群標準。
```mermaid
flowchart LR
A[🔍 尋找專案] --> B[🍴 分叉儲存庫]
B --> C[📥 克隆到本地]
C --> D[🌿 建立分支]
D --> E[✏️ 進行更改]
E --> F[💾 提交更改]
F --> G[📤 推送分支]
G --> H[🔄 建立拉取請求]
H --> I{維護者審查}
I -->|✅ 核准| J[🎉 合併!]
I -->|❓ 請求修改| K[📝 進行更新]
K --> F
J --> L[🧹 清理分支]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
在您的儲存庫裡，導航至 `Insights > Community`，查看您的專案如何與建議的社群標準比較。
以下是一些可以改善 GitHub 儲存庫的事項：
- **描述**。你是否為你的專案添加了描述？
- **README**。你是否添加了 README？GitHub 提供了撰寫 [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon) 的指導。
- **貢獻指南**。你的專案是否有 [貢獻指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)？
- **行為準則**。是否有 [行為準則](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)？
- **授權條款**。或許最重要的是，是否有 [授權條款](https://docs.github.com/articles/adding-a-license-to-a-repository/)？
想讓您的儲存庫看起來專業且受歡迎嗎？前往您的儲存庫，點選 `Insights > Community`。這個很棒的功能會告訴您專案如何與 GitHub 社群認為的「優秀儲存庫實踐」對比。
所有這些資源都將有助於新團隊成員的入門。而這些通常是新貢獻者在查看你的程式碼之前會先查看的內容，以了解你的專案是否值得他們投入時間。
> 🎯 **讓您的專案閃耀**：一個有良好文件的井然有序儲存庫就像擁有乾淨且熱情的店面。讓人知道您在意您的工作，也讓其他人想要參與！
✅ README 檔案雖然需要時間準備，但經常被忙碌的維護者忽略。你能找到一個特別詳細的 README 示例嗎？注意：有一些[工具可以幫助撰寫好的 README](https://www.makeareadme.com/)，你可能會想試試。
**一個出色儲存庫的特點有：**
### 任務：合併程式碼
| 欄位 | 重要性 | 給您的好處 |
|-------------|-------------------|---------------------|
| **描述（Description）** | 第一印象很重要！ | 讓人立刻知道您的專案做什麼 |
| **README** | 您專案的首頁 | 像友善的導覽員給新訪客介紹 |
| **貢獻指南（Contributing Guidelines）** | 展現歡迎協助 | 讓人知道如何能幫您忙 |
| **行為準則（Code of Conduct）** | 創造友善空間 | 讓大家都感到歡迎參與 |
| **授權條款（License）** | 法律明確 | 讓其他人知道如何使用您的代碼 |
| **安全政策（Security Policy）** | 展現專業 | 表明您對安全負責 |
貢獻文檔幫助人們為專案做出貢獻。它解釋了你希望的貢獻類型以及流程如何運作。貢獻者需要完成一系列步驟才能為你的 GitHub 儲存庫做出貢獻：
> 💡 **專家祕訣**：GitHub 提供這些文件的範本。建立新儲存庫時，勾選對應框即可自動生成。
1. **分叉你的儲存庫**。你可能希望人們 _分叉_ 你的專案。分叉意味著在他們的 GitHub 個人檔案中建立你的儲存庫的副本。
1. **克隆**。接著他們會將專案克隆到本地電腦。
1. **建立分支**。你會希望他們為自己的工作建立一個 _分支_。
1. **專注於一個區域的更改**。請求貢獻者一次專注於一件事——這樣你能夠合併他們工作的可能性更高。想像他們修復了一個錯誤、添加了一個新功能並更新了幾個測試——如果你只想實施其中的 2 個或 1 個更改，該怎麼辦？
**探索現代 GitHub 功能：**
✅ 想像一個情境，分支對於撰寫和交付良好的程式碼特別重要。你能想到哪些使用案例？
🤖 **自動化與 CI/CD：**
- 用 **GitHub Actions** 進行自動化測試和部署
- 用 **Dependabot** 自動更新相依套件
> 注意，成為你希望看到的改變，為自己的工作也建立分支。你所做的任何提交都將在你目前「檢出」的分支上進行。使用 `git status` 查看當前所在的分支。
💬 **社群與專案管理：**
- 用 **GitHub Discussions** 進行超越議題的社群對話
- 用 **GitHub Projects** 做看板式專案管理
- 用 **分支保護規則** 強制執行程式碼品質標準
讓我們來看看貢獻者的工作流程。假設貢獻者已經 _分叉_ 並 _克隆_ 了儲存庫，因此他們在本地電腦上有一個準備工作的 Git 儲存庫：
1. **建立分支**。使用 `git branch` 命令建立一個分支，該分支將包含他們打算貢獻的更改：
這些資源對於新團隊成員入職特別有幫助。而這些正是新貢獻者在看您的程式碼前，先用來判斷專案是否值得投入時間的資訊。
✅ README 檔案雖然準備時間不少，但經常被繁忙的維護者忽略。能找到特別詳盡的 README 範例嗎？另外，有些 [工具可以幫助製作好 README](https://www.makeareadme.com/) 您也可以試試。
### 任務：合併部分代碼
貢獻文件幫助人們貢獻到專案。它說明了您期待哪類貢獻以及流程如何。在 GitHub 上，貢獻者需要通過一系列步驟才能向您的 repo 做出貢獻：
1. **Fork 您的儲存庫** 您大概會希望大家「fork」您的專案。Fork 是在他們的 GitHub 帳號建立您儲存庫的副本。
1. **Clone** 然後他們會把專案 clone 到電腦本地。
1. **建立分支** 您會想要求他們建立一個分支來工作。
1. **專注於單一改動點** 請貢獻者一次專注修改一件事——這樣您合併（merge）的可能性才高。想像他們寫了一個 bug 修正、新增一個功能並更新了幾個測試——如果您只想、或只能接受三個改動中的兩個或一個怎麼辦？
✅ 想想在寫作和交付好代碼時，分支特別重要的情境有哪些？
> 記得，自身想見的改變要來自自己，也要替自己的工作建立分支。您所做的任何 commit 都會在當前「切換到」（checked out）分支上。用 `git status` 看看您在哪個分支。
接下來走一遍貢獻者的工作流程。假設貢獻者已經 fork 及 clone 了儲存庫，在他們本機已有可用的 Git repo：
1. **建立分支** 用指令 `git branch` 建立要做貢獻的分支：
```bash
git branch [branch-name]
```
1. **切換到工作分支**。切換到指定分支並使用 `git switch` 更新工作目錄：
> 💡 **現代方法**：您也可以用一條命令同時建立並切換到這個新分支：
```bash
git switch -c [branch-name]
```
1. **切換到工作分支** 用 `git switch` 切換指定分支並更新工作目錄：
```bash
git switch [branch-name]
```
1. **進行工作**。此時你可以添加更改。不要忘記使用以下命令告訴 Git：
> 💡 **現代提醒**：`git switch` 是改變分支時的現代替代指令，比 `git checkout` 清楚且更安全，適合新手。
1. **開始工作** 這時您要加入改動。別忘了用以下指令告訴 Git：
```bash
git add .
git commit -m "my changes"
```
確保你為提交取一個好的名稱，對你自己以及你正在幫助的儲存庫維護者都有幫助。
> ⚠️ **提交訊息品質**：確保 commit 起個好名字，為您自己也為您協助的 repo 維護者。具體說明您改了什麼！
1. **將你的工作與 `main` 分支合併**。某個時候你完成了工作，並希望將你的工作與 `main` 分支的工作合併。`main` 分支可能在此期間已經更改，因此請確保首先使用以下命令更新到最新版本：
1. **與 `main` 分支整合** 某個時刻您工作完成，想與 `main` 分支整合。於此之前，先用以下指令確保 `main` 是最新的：
```bash
git switch main
git pull
```
此時你需要確保任何 _衝突_（Git 無法輕易 _合併_ 的情況）發生在你的工作分支中。因此，執行以下命令：
接著，您要確保所有 _衝突_ ，也就是 Git 無法輕易 _合併_ 的情況，都在您的工作分支裡解決。因而請執行：
```bash
git switch [branch_name]
git merge main
```
`git merge main` 命令將把 `main` 中的所有更改帶入你的分支。希望你可以直接繼續。如果不行，VS Code 會告訴你 Git _困惑_ 的地方，你只需修改受影響的檔案，指出哪個內容最準確。
`git merge main` 指令會將 `main` 的所有變更帶入您的分支。希望您可以直接繼續。如果不能，VS Code 會告訴您 Git 到底卡在哪裡，只要修改影響檔案來決定哪部分內容是正確的。
要切換到不同的分支，使用現代的 `git switch` 命令：
💡 **現代替代方案**：考慮用 `git rebase` 取得較乾淨的歷史紀錄：
```bash
git switch [branch_name]
git rebase main
```
這會將您的提交重播在最新 main 之上，形成一條絕對線性歷史。
1. **將你的工作推送到 GitHub**。將你的工作推送到 GitHub 意味著兩件事：將你的分支推送到你的儲存庫，然後開啟一個 PR（拉取請求）。
1. **將工作推送到 GitHub** 推送工作到 GitHub 意味著兩件事。將分支推送到您的儲存庫，然後開啟 PR（拉取請求）。
```bash
git push --set-upstream origin [branch-name]
```
上述命令會在你的分叉儲存庫中建立分支。
1. **開啟 PR**。接下來，你需要開啟一個 PR（Pull Request）。你可以在 GitHub 上進入你分叉的倉庫，GitHub 會提示你是否要建立新的 PR，點擊後會進入一個介面，讓你可以修改提交訊息的標題，並提供更合適的描述。現在，你分叉的倉庫的維護者就能看到這個 PR，_希望_他們會欣賞並_合併_你的 PR。恭喜你，現在你是一名貢獻者了，太棒了！ :)
上述指令會在您分叉的儲存庫中建立分支。
### 🤝 **協作技能測試：準備好與他人合作了嗎？**
**看看您對協作的感覺如何：**
- 現在您了解 fork 和 pull request 的概念了嗎？
- 工作中關於分支的哪個部分您想多練習？
- 您對於貢獻他人專案感覺自在嗎？
```mermaid
mindmap
root((Git 協作))
Branching
Feature branches
Bug fix branches
Experimental work
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
```
> **信心加強**：每位您欣賞的開發者，首次拉取請求時都曾緊張。GitHub 社群對新手非常友善！
1. **開啟 PR** 接著，您想開啟 PR。方法是到 fork 的儲存庫 GitHub 頁面。GitHub 會提示您是否要建立新的 PR，點擊後進入介面，可調整 commit 訊息標題，給它更合理描述。這時您 fork 的原始專案維護者就會看到這個 PR，_祈禱_ 他們會欣賞並 _合併_ 您的 PR。您現在成為貢獻者了，耶 :)
💡 **現代技巧**：您也可以使用 GitHub CLI 建立 PR：
```bash
gh pr create --title "Your PR title" --body "Description of changes"
```
1. **清理**。成功合併 PR 後，清理工作被認為是一種良好的習慣。你需要清理本地分支以及推送到 GitHub 的分支。首先，使用以下指令刪除本地分支：
🔧 **PR 最佳實務：**
- 用像是「Fixes #123」的關鍵字連結相關 issue
- UI 改動附上截圖
- 指定想要審查的特定人員
- 使用草稿 PR 進行開發中工作
- 確保所有 CI 檢查通過後再請求審查
1. **清理**。成功合併 Pull Request 後，_清理_ 是一個被認為良好的習慣。你要清理你的本地分支以及你推送到 GitHub 的分支。首先使用以下指令在本地刪除它：
```bash
git branch -d [branch-name]
```
接著，進入 GitHub 上分叉的倉庫頁面，刪除你剛剛推送的遠端分支。
接著請到 Fork 的 GitHub 頁面，移除你剛剛推送的遠端分支。
`Pull request` 這個詞聽起來有點奇怪，因為實際上你是想將你的更改推送到專案中。但維護者（專案擁有者）或核心團隊需要在合併到專案的 "main" 分支之前審核你的更改，因此你實際上是在向維護者請求更改的決定。
`Pull request`（拉取請求）這名稱聽起來有些奇怪，因為你真正想做的是將你的修改推送到專案中。但維護者（專案擁有者）或核心團隊需要在合併至專案的「主」分支前，審核你的修改，所以你實際上是在向維護者請求更改的決定。
Pull request 是一個用來比較和討論分支中引入的差異的地方，並且可以進行審核、評論、整合測試等操作。一個好的 Pull request 通常遵循與提交訊息相似的規則。當你的工作解決了一個問題時，你可以在問題追蹤器中引用該問題。這可以通過使用 `#` 後接問題編號來完成，例如 `#97`。
Pull request 是用來比較並討論分支上的差異的地方，包含審查、意見回饋、整合測試等等。一份好的 Pull request 大致遵守和提交訊息相同的規範。當你的工作修復了一個問題時，可以加入對議題追蹤器(issue tracker)中議題的參考，做法是使用 `#` 後面接你的議題編號。例如 `#97`。
🤞希望所有檢查都通過，專案擁有者合併你的更改到專案中🤞
🤞祈禱所有檢查都通過，專案擁有者們會將你的更改合併進專案🤞
更新本地工作分支，將 GitHub 上對應的遠端分支的所有新提交拉取下來：
使用 `git pull` 將你目前本地工作分支與 GitHub 對應遠端分支的所有新提交同步更新：
`git pull`
## 如何貢獻開源專案
## 參與開源專案（你改變世界的機會！）
準備好被震撼了嗎？🤯 讓我們來談談參與開源專案吧—說實話，一想到要和你分享這些，我都起雞皮疙瘩了！
這是你成為真正非凡事物一部分的機會。想像一下改進每天數百萬開發者都在使用的工具，或修復你朋友喜愛的應用程式中的錯誤。這不只是一個夢想——這就是開源貢獻的全部意義！
首先，找到一個你感興趣並希望貢獻更改的 GitHub 倉庫（或 **repo**）。你需要將其內容複製到你的電腦上。
讓我總是激動不已的是：你用來學習的每個工具——你的程式編輯器、我們要探索的框架、甚至你用來閱讀這篇文章的瀏覽器——其實都是由一位跟你一樣的人，做出了他們的第一次貢獻開始。那位打造你最愛 VS Code 擴充功能的天才開發者？他們也曾是初學者，用著顫抖的手點擊「建立拉取請求（create pull request）」按鈕，就像你現在要做的。
✅ 找到「適合初學者」的倉庫的一個好方法是[透過標籤 'good-first-issue' 進行搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
最美好的部分是：開源社群就像互聯網上最大的集體擁抱。大多數專案積極尋找新手，還有標示了「good first issue（適合初學者）」的議題，專門為像你這樣的人準備！維護者看到新貢獻者時會真心感到興奮，因為他們還記得自己的第一步。
![本地複製倉庫](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.tw.png)
```mermaid
flowchart TD
A[🔍 探索 GitHub] --> B[🏷️ 找到 "good first issue"]
B --> C[📖 閱讀貢獻指南]
C --> D[🍴 分叉倉庫]
D --> E[💻 設置本地環境]
E --> F[🌿 創建功能分支]
F --> G[✨ 做出你的貢獻]
G --> H[🧪 測試你的更改]
H --> I[📝 撰寫清晰的提交訊息]
I --> J[📤 推送並創建 PR]
J --> K[💬 參與反饋討論]
K --> L[🎉 合併！你是貢獻者了！]
L --> M[🌟 找下一個問題]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
你不是僅僅在學習編寫程式碼——你正在準備加入一個全球建造者的大家庭，他們每天醒來都在想：「我們怎麼讓數位世界變得更好一點？」歡迎加入這個俱樂部！🌟
有幾種複製程式碼的方法。一種方法是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來「克隆」倉庫的內容。
首先，讓我們在 GitHub 找到一個你感興趣、且想要貢獻修改的程式碼庫（repo）。你會想把它的內容複製到你的機器上。
打開終端機並像這樣克隆倉庫：
`git clone https://github.com/ProjectURL`
✅ 找尋「適合新手」的優良程式碼庫的好方法是 [透過 'good-first-issue' 標籤搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
要開始專案工作，切換到正確的資料夾：
![將程式庫複製到本機](../../../../translated_images/clone_repo.5085c48d666ead57.tw.png)
複製程式碼有多種方式。常見的一種是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來「克隆」整個程式庫內容。
打開終端機，像這樣克隆儲存庫：
```bash
# 使用 HTTPS
git clone https://github.com/ProjectURL
# 使用 SSH（需要設定 SSH 金鑰）
git clone git@github.com:username/repository.git
# 使用 GitHub CLI
gh repo clone username/repository
```
要開始專案，切換到正確的目錄：
`cd ProjectURL`
你也可以使用 [Codespaces](https://github.com/features/codespaces)（GitHub 的嵌入式程式碼編輯器/雲端開發環境）或 [GitHub Desktop](https://desktop.github.com/) 打開整個專案。
你也可以使用以下方式打開整個專案：
- **[GitHub Codespaces](https://github.com/features/codespaces)** - 透過瀏覽器使用 VS Code 的 GitHub 雲端開發環境
- **[GitHub Desktop](https://desktop.github.com/)** - 針對 Git 操作的圖形介面應用程式
- **[GitHub.dev](https://github.dev)** - 在任何 GitHub 儲存庫按下 `.` 鍵，於瀏覽器打開 VS Code
- 安裝 GitHub Pull Requests 擴充功能的 **VS Code**
最後，你也可以下載壓縮檔案形式的程式碼。
最後也可以下載壓縮檔的程式碼。
### 關於 GitHub 的一些有趣事
### 關於 GitHub 的一些有趣資訊
你可以對 GitHub 上的任何公共倉庫進行加星、關注或「分叉」。你可以在右上角的下拉選單中找到你加星的倉庫。這就像為程式碼加書籤。
你可以收藏（star）、關注（watch）和／或「派生」（fork） GitHub 上任何公開程式庫。你可以在右上方的下拉選單中找到你收藏的儲存庫。這就像為程式碼做書籤一樣。
專案通常有一個問題追蹤器，大多數情況下在 GitHub 的 "Issues" 標籤中，除非另有說明，人們會在這裡討論與專案相關的問題。而 Pull Requests 標籤則是人們討論和審核正在進行的更改的地方。
專案有議題追蹤系統，大多數位於 GitHub 的「Issues」標籤頁，除非另有標示，在這裡大家討論專案相關問題。拉取請求（Pull Requests）標籤頁則是大家討論及審查進行中修改的地方。
專案可能還會在論壇、郵件列表或像 Slack、Discord 或 IRC 這樣的聊天頻道中進行討論。
有些專案也會在論壇、郵件列表或 Slack、Discord、IRC 等聊天室中討論。
✅ 瀏覽一下你的新 GitHub 倉庫，試試一些功能，比如編輯設定、添加倉庫資訊，或建立專案（例如看板）。你可以做很多事情！
🔧 **現代 GitHub 功能**：
- **GitHub Discussions** - 內建的社群討論區
- **GitHub Sponsors** - 金錢支持維護者
- **Security tab（安全標籤）** - 漏洞報告與資安公告
- **Actions tab（工作流程標籤）** - 查看自動化流程與 CI/CD 管線
- **Insights tab（洞察標籤）** - 關於貢獻者、提交與專案健康狀況的分析
- **Projects tab（專案標籤）** - GitHub 內建的專案管理工具
✅ 到你的新儲存庫四處看看，嘗試設定、編輯資料、建立專案（例如看板），及設定 GitHub Actions 自動化。有很多事情你可以做！
---
## 🚀 挑戰
與朋友合作，互相修改彼此的程式碼。共同建立一個專案，分叉程式碼，建立分支，並合併更改。
好了，是時候測試你閃亮的新 GitHub 超能力了！🚀 這個挑戰會讓一切在最令人滿意的方式中連結起來：
找一個朋友（或者那位總問你「你到底在搞什麼電腦東西」的家人）一起開始合作編碼冒險！真正的魔法從這裡開始——創建一個專案，讓對方 fork，建立一些分支，並像專家一樣合併變更。
我不騙你——你們過程中可能會笑翻（尤其是同時改到同一行時）、也可能摸不著頭緒，但你們一定會有那些「啊哈！」的精彩時刻，讓學習之旅都值回票價。而且跟別人分享第一次成功合併的感覺很特別——就像慶祝你走了多遠！
還沒有編程夥伴？完全不用擔心！GitHub 社群非常熱情友善，他們還記得新手時的感覺。找尋標示有「good first issue」的儲存庫——這些就是在說：「嘿，新手，來跟我們一起學習吧！」多棒啊！
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/en/)
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
## 回顧與持續學習
## 複習與自學
呼！🎉 看看你——你剛剛像冠軍一樣征服了 GitHub 基礎！如果你現在腦袋覺得有點滿，那是很正常的，甚至是好現象。你學到的工具，我剛開始時花了好幾週才能熟悉。
閱讀更多關於[如何貢獻開源軟體](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)。
Git 和 GitHub 非常強大（真的很強大），我認識的每位開發者——包括那些看起來像巫師的高手們——都得碰撞、練習、走彎路才終於能掌握。你完成這課代表你已經踏上了精通開發者最重要工具之一的路。
[Git 速查表](https://training.github.com/downloads/github-git-cheat-sheet/)。
以下都是極佳的資源，幫你練習並變得更厲害：
多練習，多實踐。GitHub 提供了很棒的學習路徑：[skills.github.com](https://skills.github.com):
- [參與開源軟體指南](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – 引導你如何有所作為
- [Git 快捷清單](https://training.github.com/downloads/github-git-cheat-sheet/) – 隨手可用的速查表！
- [GitHub 的第一週](https://skills.github.com/#first-week-on-github)
記得：練習造就進步，不是完美！你越用 Git 和 GitHub，就會越自然。GitHub 也推出了非常棒的互動課程，讓你在安全的環境中練習：
你還可以找到更多進階課程。
- [GitHub 入門](https://github.com/skills/introduction-to-github)
- [使用 Markdown 進行溝通](https://github.com/skills/communicate-using-markdown)
- [GitHub Pages](https://github.com/skills/github-pages)
- [管理合併衝突](https://github.com/skills/resolve-merge-conflicts)
**想挑戰更進階工具？試試這些現代化工具：**
- [GitHub CLI 文件](https://cli.github.com/manual/) – 想感受命令列魔法就用它
- [GitHub Codespaces 文件](https://docs.github.com/en/codespaces) – 在雲端編碼！
- [GitHub Actions 文件](https://docs.github.com/en/actions) – 自動化所有工作
- [Git 最佳實踐](https://www.atlassian.com/git/tutorials/comparing-workflows) – 提升你的工作流程
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
**描述：** 建立一個協作網頁開發專案，展示本課程中學到的完整 GitHub 工作流程。此挑戰將幫助你在真實情境中練習儲存庫創建、協作功能與現代 Git 工作流程。
**提示：** 建立一個公共 GitHub 儲存庫，主題為簡單的「網頁開發資源」專案。此儲存庫應包含結構良好的 README.md 檔，列出實用的網頁開發工具和資源，並依類別（HTML、CSS、JavaScript 等）組織。設定儲存庫以符合社群標準，包括授權條款、貢獻指引與行為準則。建立至少兩個功能分支：一個用來新增 CSS 資源，另一個用來新增 JavaScript 資源。對每個分支進行有描述性提交訊息的 commit，然後建立 Pull Request 將變更合併回 main。啟用 Issues、Discussions 等 GitHub 功能，並且設定基本的 GitHub Actions 工作流程自動檢查。
## 作業
完成 [GitHub 的第一週課程](https://skills.github.com/#first-week-on-github)
你的任務，如果你願意接受：完成 GitHub Skills 的 [Introduction to GitHub](https://github.com/skills/introduction-to-github) 課程。這個互動課程會讓你在安全、有引導的環境中練習你所學的一切。完成後還能獲得一個炫酷的徽章！🏅
**準備好接受更多挑戰了嗎？**
- 設定 GitHub 帳號的 SSH 認證（不再需要密碼！）
- 嘗試使用 GitHub CLI 進行日常 Git 操作
- 建立一個帶有 GitHub Actions 工作流程的儲存庫
- 用 GitHub Codespaces 開啟此儲存庫，體驗雲端編輯器
---
## 🚀 你的 GitHub 精通時間表
### ⚡ **接下來 5 分鐘能做到的事情**
- [ ] 收藏此儲存庫及另 3 個你感興趣的專案
- [ ] 在 GitHub 帳號設定雙重身份驗證
- [ ] 為你的第一個儲存庫建立簡單的 README
- [ ] 追蹤 5 位讓你感覺受啟發的開發者
### 🎯 **這一小時可以完成的目標**
- [ ] 完成課後測驗，並反思你的 GitHub 旅程
- [ ] 設定 SSH 金鑰以免密碼驗證
- [ ] 做出你的第一個具意義的 commit，並寫好提交訊息
- [ ] 探索 GitHub 的「探索」標籤，發現熱門專案
- [ ] 練習 fork 一個儲存庫並做些小修改
### 📅 **本周的 GitHub 探險**
- [ ] 完成 GitHub Skills 課程（入門 GitHub、Markdown）
- [ ] 向一個開源專案發送你的第一個 pull request
- [ ] 設置 GitHub Pages 來展示你的成果
- [ ] 參與你感興趣專案的 GitHub Discussions
- [ ] 建立一個符合社群標準（README、授權等）的儲存庫
- [ ] 嘗試使用 GitHub Codespaces 進行雲端開發
### 🌟 **本月的蛻變目標**
- [ ] 向 3 個不同的開源專案貢獻程式碼
- [ ] 指導一位 GitHub 新手（回饋社群！）
- [ ] 設置 GitHub Actions 自動工作流程
- [ ] 建立展示你 GitHub 貢獻的作品集
- [ ] 參加 Hacktoberfest 或類似社群活動
- [ ] 成為你自己專案的維護者，並邀請其他人貢獻
### 🎓 **最終 GitHub 精通檢查**
**慶祝你走了多遠：**
- 你最喜歡 GitHub 的哪一點？
- 哪個協作功能讓你最感興趣？
- 你對貢獻開源的信心有多少？
- 你第一個想貢獻的專案是什麼？
```mermaid
journey
title 你的 GitHub 自信旅程
section 今天
緊張: 3: 你
好奇: 4: 你
興奮: 5: 你
section 這週
練習中: 4: 你
貢獻中: 5: 你
連結中: 5: 你
section 下個月
協作中: 5: 你
領導中: 5: 你
激勵他人: 5: 你
```
> 🌍 **歡迎加入全球開發者社群！** 你現在擁有與全球數百萬開發者協作的工具。你的第一筆貢獻可能看似微小，但請記住——每個重要的開源專案都是從有人做出第一次提交開始。問題不在於你是否會有所影響，而是第一個因你的獨特觀點而受益的神奇專案會是什麼！🚀
記住：每個專家也曾是初學者。你可以的！💪
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解釋不承擔責任。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於達到準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯所產生之任何誤解或錯誤解釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

1513
translations/tw/1-getting-started-lessons/3-accessibility/README.md
View File

File diff suppressed because it is too large Load Diff

260
translations/tw/1-getting-started-lessons/3-accessibility/assignment.md
Unescape View File

@ -1,27 +1,261 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a258597a194e77d4fd469b3cd976b29e",
"translation_date": "2025-08-23T23:26:31+00:00",
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
"translation_date": "2026-01-06T14:22:31+00:00",
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
"language_code": "tw"
}
-->
# 分析一個無法訪問的網站
# 全面性網站無障礙審核
## 指導說明
## 指示
找出一個您認為無法訪問的網站，並制定一個行動計劃來改善其可訪問性。
您的第一個任務是識別這個網站，詳細說明您認為它無法訪問的方式（不使用分析工具），然後提交給 Lighthouse 進行分析。將此分析的結果保存為 PDF，並列出一個包含至少十點的詳細計劃，說明如何改進該網站。
在此作業中，您將對一個真實網站進行專業等級的無障礙審核，應用您所學的原則與技術。這種實作經驗將深化您對無障礙障礙與解決方案的理解。
## 測試網站可訪問性的表格
選擇一個看起來存在無障礙問題的網站—相較於分析一個已完美無瑕的網站，這能提供更多學習機會。良好候選網站包括舊版網站、複雜的網頁應用程式或含有豐富多媒體內容的網站。
| 標準 | 優秀 | 足夠 | 需要改進 |
|----------|-----------|----------|----------------|
| | 缺少不到 10% 的要求 | 缺少 20% 的要求 | 缺少 50% 的要求 |
### 階段 1：策略性手動評估
----
學生報告：包括關於網站無法訪問程度的段落、以 PDF 保存的 Lighthouse 報告、一份包含十點改進建議的清單，以及如何改進的詳細說明
在使用自動工具前，先進行全面的手動評估。這種以人為中心的方法常能揭露工具無法察覺的問題，並幫助您理解真實使用者體驗。
**🔍 重要評估標準：**
**導覽與結構：**
- 您能否僅使用鍵盤（Tab、Shift+Tab、Enter、空白鍵、方向鍵）導航整個網站？
- 所有互動元素是否有明顯的焦點指示？
- 標題結構（H1-H6）是否建立了邏輯性內容大綱？
- 是否有跳轉主內容的跳過連結？
**視覺無障礙：**
- 全站是否有足夠的色彩對比（一般文字至少 4.5:1）？
- 網站是否僅靠顏色傳達重要資訊？
- 所有圖片是否都有合適的替代文字？
- 當放大至 200% 時，版面是否仍保持功能性？
**內容與溝通：**
- 是否存在「點此」或含糊的連結文字？
- 您是否能在無視覺提示下理解內容與功能？
- 表單欄位是否正確標記與群組？
- 錯誤訊息是否清楚且有幫助？
**互動元素：**
- 所有按鈕和表單控制項是否能僅用鍵盤操作？
- 動態內容更動是否會向螢幕閱讀器公告？
- 模態對話框及複雜的元件是否遵循適當的無障礙模式？
📝 **記錄您的發現**，包含具體範例、截圖及頁面 URL。記下問題與優點。
### 階段 2：全面自動化測試
現在使用業界標準的無障礙測試工具驗證並擴充您的手動結果。每種工具有不同強項，多工具並用可達到完整覆蓋。
**🛠️ 必要測試工具：**
1. **Lighthouse 無障礙審核**（內建於 Chrome/Edge 開發者工具）
- 對多個頁面執行審核
- 聚焦於特定指標與建議
- 記錄無障礙分數與具體違規事項
2. **axe DevTools**（瀏覽器擴充元件－業界標準）
- 識別問題比 Lighthouse 更詳盡
- 提供具體修正程式碼範例
- 依據 WCAG 2.1 標準測試
3. **WAVE Web Accessibility Evaluator**（瀏覽器擴充元件）
- 無障礙特性視覺化呈現
- 標示錯誤與正面特徵
- 協助理解頁面結構
4. **色彩對比分析工具**
- WebAIM 對比檢查器用於指定顏色配對
- 瀏覽器擴充元件做整頁分析
- 依照 WCAG AA 及 AAA 標準測試
**🎧 真實輔助技術測試：**
- **螢幕閱讀器測試**：使用 NVDA（Windows）、VoiceOver（Mac）、或 TalkBack（Android）
- **純鍵盤導覽**：拔掉滑鼠，完全以鍵盤瀏覽網站
- **縮放測試**：於 200% 和 400% 縮放比例測試功能
- **語音控制測試**：如果可用，試用語音導航工具
**📊 整理結果**，建立主控試算表紀錄：
- 問題描述及位置
- 嚴重程度（關鍵/高/中/低）
- 違反 WCAG 成功標準
- 探測該問題的工具
- 截圖和證據
### 階段 3：完整發現報告撰寫
製作專業的無障礙審核報告，展現您對技術問題及其對人的影響的理解。
**📋 報告必備章節：**
1. **執行摘要**（1頁）
- 網站 URL 與簡要描述
- 整體無障礙成熟度評估
- 3大最關鍵問題
- 估計對身障用戶之影響
2. **方法論**（½頁）
- 測試方式與所用工具
- 評估的頁面與設備/瀏覽器組合
- 遵循標準（WCAG 2.1 AA）
3. **詳細發現**（2-3頁）
- 依 WCAG 原則分類（可感知、可操作、可理解、穩定性）
- 附帶截圖與具體範例
- 記錄您發現的正面無障礙特性
- 與自動工具結果互相參照
4. **使用者影響評估**（1頁）
- 發現問題如何影響不同障礙類型用戶
- 描述實際使用者情境
- 商業影響（法律風險、SEO、用戶擴展）
**📸 證據蒐集：**
- 無障礙違規截圖
- 問題使用流程的螢幕錄影
- 工具報告（PDF格式保存）
- 顯示問題的程式碼範例
### 階段 4：專業修復計畫
制定一份策略性且有優先次序的修復計畫，顯示您具備像專業網頁開發者一樣，能兼顧真實商業限制的問題解決能力。
**🎯 編寫至少 10 個問題的詳細改善建議：**
**每個已識別問題需包含：**
- **問題描述**：清楚說明錯誤及其問題所在
- **WCAG 參考**：具體違反的成功標準（例如「2.4.4 鏈結用途（上下文中）－A級」）
- **使用者影響**：影響不同障礙用戶的方式
- **解決方案**：具體程式碼修改、設計調整或流程改進
- **優先級別**：關鍵（阻礙基本使用）／高（重大障礙）／中（可用性問題）／低（優化）
- **實作難易度**：所需時間／複雜度估計（快速修復／中度努力／重大重構）
- **測試驗證**：如何確認修復有效
**改善建議範例：**
```
Issue: Generic "Read more" link text appears 8 times on homepage
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
User Impact: Screen reader users cannot distinguish between links when viewed in link list
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
Priority: High (major navigation barrier)
Effort: Low (30 minutes to update content)
Testing: Generate link list with screen reader - each link should be meaningful standalone
```
**📈 策略實施階段：**
- **階段 1（0-2 週）**：阻礙基本功能的關鍵問題
- **階段 2（1-2 個月）**：優先改善以增進使用體驗
- **階段 3（3-6 個月）**：中優先度增強與流程優化
- **階段 4（持續進行）**：持續監控與改善
## 評分標準
您的無障礙審核將根據技術準確度與專業呈現進行評分：
| 評分項目 | 優秀（90-100%） | 良好（80-89%） | 滿意（70-79%） | 需改進（<70%） |
|----------|-------------------|---------------|---------------------|------------------------|
| **手動測試深度** | 全面評估涵蓋所有 POUR 原則，具體觀察與使用場景詳實 | 良好覆蓋大多數無障礙領域，含清晰發現與部分使用者影響分析 | 基本評估涵蓋主要範圍，觀察適當 | 測試有限，觀察淺顯，使用者影響考量不足 |
| **工具使用與分析** | 有效善用所有必備工具，交叉參照發現，證據清楚，分析工具限制 | 多數工具使用良好，文件充分，部分交叉參照，證據足夠 | 必備工具使用，基礎文件與部分證據 | 工具使用不充分，文件欠缺或無證據 |
| **問題識別與分類** | 辨認 15 個以上具體問題，涵蓋所有 WCAG 原則，正確分類嚴重度，理解深刻 | 辨認 10-14 問題，涵蓋多數 WCAG 原則，分類良好，理解穩健 | 辨認 7-9 問題，對 WCAG 覆蓋基礎，分類基本 | 辨認少於 7 問題，範圍有限或分類不佳 |
| **解決方案品質與可行性** | 10+ 詳細可行方案，準確 WCAG 參考，實作時程合理，驗證方法明確 | 8-9 成熟方案，參考準確，實施細節良好 | 6-7 基本方案，有些細節，方法大致可行 | 少於 6 解決方案，細節不足，實施不切實際 |
| **專業溝通** | 報告組織優秀，清晰撰寫，有執行摘要，技術語言恰當，符合商業文件標準 | 組織良好，文筆良好，包含大部分要求章節，語調恰當 | 組織與寫作尚可，含基本必須章節 | 組織差，文字不清楚，缺少重要章節 |
| **實務應用能力** | 展現業務影響、法律考量、用戶多樣性與實作挑戰的理解 | 展現良好實務了解與部分商業脈絡 | 基本實務應用認知 | 與實務應用連結有限 |
## 進階挑戰選項
**🚀 進階挑戰學生專用：**
- **比較分析**：審核 2-3 個競爭網站，並比較其無障礙成熟度
- **行動裝置無障礙聚焦**：深入研究行動裝置特有無障礙問題，使用 Android TalkBack 或 iOS VoiceOver
- **國際觀點**：研究並應用不同國家無障礙標準（EN 301 549、Section 508、ADA）
- **無障礙聲明審核**：根據您的發現評估網站現有的無障礙聲明（如有）
## 成果交付
提交一份展示專業分析與實務規劃的全面無障礙審核報告：
**📄 最終報告需求：**
1. **執行摘要**（1頁）
- 網站概述與無障礙成熟度評估
- 主要發現總結與商業影響
- 推薦優先行動
2. **方法論與範圍**（1頁）
- 測試方法、使用工具與評估標準
- 評估頁面/區段及任何限制
- 標準遵從框架（WCAG 2.1 AA）
3. **詳細發現報告**（3-4頁）
- 手動測試觀察與使用情境
- 自動工具結果與交叉參照
- 依 WCAG 原則分類問題與證據
- 認定的正面無障礙特性
4. **策略修復計畫**（3-4頁）
- 優先排序的改進建議（最少 10 項）
- 實施時程與工作量估計
- 成功指標與驗證方法
- 長期無障礙維護策略
5. **輔助證據**（附錄）
- 無障礙違規截圖與測試工具
- 顯示問題與解決方案的程式碼範例
- 工具報告與審核摘要
- 螢幕閱讀器測試筆記或錄音
**📊 格式要求：**
- **文件格式**：PDF（專業呈現）
- **字數**：2,500-3,500字（不計附錄與截圖）
- **視覺元素**：報告內含截圖、圖表與範例
- **引用**：適當參照 WCAG 指南與無障礙資源
**💡 卓越撰寫提示：**
- 使用專業報告格式，標題與樣式一致
- 包含目錄方便導覽
- 技術精確與商業語言兼備
- 展示技術施行與使用者影響理解
## 學習成效
完成此全面性無障礙審核後，您將具備重要專業技能：
**🎯 技術能力：**
- **無障礙測試精通**：熟練掌握業界標準手動與自動測試方法
- **WCAG 應用**：實務運用網站內容無障礙指引於真實案例
- **輔助技術認知**：實際操作螢幕閱讀器與鍵盤導航
- **問題與解決對應**：能辨識無障礙障礙並制定具體可行的修復策略
**💼 專業技能：**
- **技術溝通**：撰寫專業報告，向多元利害關係人表達
- **策略規劃能力**：根據使用者影響與實作可行性優先排序改進事項
- **品質保證**：理解無障礙測試在開發生命週期的角色
- **風險評估**：認知遵從無障礙的法律、商業與倫理涵義
**🌍 包容設計心態：**
- **使用者同理心**：深刻理解多元使用者需求與輔助工具互動
- **通用設計原則**：認知無障礙設計不僅造福身障者，更惠及所有使用者
- **持續改進框架**：建立持續評估與提升無障礙的系統
- **倡議能力**：自信推動未來專案與團隊執行無障礙最佳實務
**🚀 職涯準備：**
此作業與真實世界無障礙顧問專案相仿，助您累積展示：
- 系統性解決問題能力
- 細膩兼顧技術細節與商業影響
- 清晰溝通複雜技術概念
- 理解法律與倫理責任於網頁開發
完成後，您將能於任何網頁開發相關職務中有意義地推動無障礙倡議，並在職涯中持續支持包容性設計。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對於因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原文文件應視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或錯誤詮釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

906
translations/tw/10-ai-framework-project/README.md
View File

File diff suppressed because it is too large Load Diff

563
translations/tw/2-js-basics/1-data-types/README.md
Unescape View File

@ -1,215 +1,618 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b95fdd8310ef467305015ece1b0f9411",
"translation_date": "2025-08-29T15:24:14+00:00",
"original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
"translation_date": "2026-01-06T13:28:48+00:00",
"source_file": "2-js-basics/1-data-types/README.md",
"language_code": "tw"
}
-->
# JavaScript 基礎：資料型別
![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.tw.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
![JavaScript 基礎 - 資料型別](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.tw.png)
> 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title 你的 JavaScript 資料類型冒險
section 基礎
變數與常數: 5: 你
宣告語法: 4: 你
指派概念: 5: 你
section 核心類型
數字與數學: 4: 你
字串與文字: 5: 你
布林值與邏輯: 4: 你
section 應用知識
類型轉換: 4: 你
實際範例: 5: 你
最佳實務: 5: 你
```
資料型別是 JavaScript 中的基本概念之一，您在每個撰寫的程式中都會遇到它。可以將資料型別想像成亞歷山卓圖書館古代圖書館員使用的歸檔系統——他們有特定的地方放置包含詩歌、數學和歷史記錄的捲軸。JavaScript 以類似的方式組織資訊，為不同種類的資料設立不同的類別。
在本課程中，我們將探討使 JavaScript 運作的核心資料型別。您將學習如何處理數字、文字、真假值，以及了解為什麼選擇正確的型別對您的程式至關重要。這些概念起初可能看起來抽象，但透過練習，它們將成為您的第二天性。
理解資料型別會讓 JavaScript 的其他部分更清晰。正如建築師需要了解不同的建築材料，才能建造一座大教堂，這些基礎知識將支持您將來的每一個建設。
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/)
本課程涵蓋 JavaScript 的基礎知識，這是一種為網頁提供互動功能的語言。
本課程涵蓋 JavaScript 的基本知識，JavaScript 是提供網頁互動功能的語言。
> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) 上參加此課程！
[![變數](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的變數")
[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的變數")
[![JavaScript 中的資料型別](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "JavaScript 中的資料型別")
[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "JavaScript 中的資料型別")
> 🎥 點擊上方圖片觀看有關變數和資料型別的影片
> 🎥 點擊上方圖片觀看關於變數和資料型別的影片
讓我們從變數和填充它們的資料型別開始吧！
```mermaid
mindmap
root((JavaScript 資料))
Variables
let myVar
const PI = 3.14
var oldStyle
Primitive Types
number
42
3.14
-5
string
"Hello"
'World'
`Template`
boolean
true
false
undefined
null
Operations
Arithmetic
+ - * / %
String Methods
串接
範本字串
Type Conversion
隱式
顯式
```
## 變數
變數用來儲存值，這些值可以在程式碼中使用並進行更改。
變數是程式設計中的基本建構塊。就像中世紀煉金術士用來存放不同物質的標籤罐，變數讓您能儲存資訊，並賦予具描述性的名稱，以便後續參考。需要記住某人的年齡嗎？將它存放在名為 `age` 的變數中。想追蹤使用者名稱？把它放在名為 `userName` 的變數中。
我們將專注於 JavaScript 中建立變數的現代方法。您在這裡學到的技術是多年語言演變及程式社群最佳實踐的結晶。
建立和**宣告**變數的語法如下：**[關鍵字] [名稱]**。它由以下兩部分組成：
建立和**宣告**變數的語法為 **[關鍵字] [名稱]**，由兩部分組成：
- **關鍵字**。關鍵字可以是 `let` 或 `var`。
- **關鍵字**。使用 `let` 表示可以變更的變數，或 `const` 表示不會改變的值。
- **變數名稱**，由您自行選擇的具描述性名稱。
✅ `let` 關鍵字是在 ES6 中引入的，為變數提供了所謂的 _區塊作用域_。建議使用 `let` 而非 `var`。我們會在後續部分更深入地探討區塊作用域。
- **變數名稱**，這是你自己選擇的名稱。
✅ `let` 關鍵字於 ES6 中引入，賦予變數所謂的 _區塊作用域_。建議使用 `let` 或 `const` 替代舊的 `var` 關鍵字。我們會在後續章節更深入探討區塊作用域。
### 任務 - 使用變數
### 任務 - 操作變數
1. **宣告變數**。讓我們使用 `let` 關鍵字宣告一個變數：
1. **宣告一個變數**。讓我們從建立第一個變數開始：
```javascript
let myVariable;
```
`myVariable` 現在已使用 `let` 關鍵字宣告，但目前尚未賦值。
**這段程式的意義：**
- 這告訴 JavaScript 建立一個名為 `myVariable` 的儲存空間
- JavaScript 為此變數在記憶體中分配空間
- 該變數目前沒有值（undefined）
1. **賦值**。使用 `=` 運算符將值儲存到變數中，後面跟著期望的值。
2. **賦值給它**。現在讓我們將內容放入變數中：
```javascript
myVariable = 123;
```
> 注意：在本課程中使用 `=` 表示我們使用的是「賦值運算符」，用於將值設定到變數中。它並不表示相等。
**賦值的運作方式：**
- `=` 運算子將 123 指派給我們的變數
- 變數現在包含這個值，不再是未定義
- 您可以在程式中以 `myVariable` 參考此值
`myVariable` 現在已被*初始化*為值 123。
> 注意：本課程中 `=` 的用法是「指派運算子」，用於設定變數的值，而非代表相等。
1. **重構**。將你的程式碼替換為以下語句。
3. **聰明地操作**。實際上，我們可以將這兩個步驟合併：
```javascript
let myVariable = 123;
```
上述語句稱為 _顯式初始化_，即在宣告變數的同時賦值。
**這種方式更有效率：**
- 您同時宣告變數並賦值於一個語句中
- 這是開發者的標準作法
- 縮短程式碼長度，同時保持清晰度
1. **更改變數值**。以下方式更改變數值：
4. **改變想法**。如果想儲存不同的數字怎麼辦？
```javascript
myVariable = 321;
```
一旦變數被宣告，你可以隨時使用 `=` 運算符和新值更改其值。
**理解重新賦值：**
- 變數現在包含 321，取代了 123
- 先前的值被覆蓋—變數一次只能存一個值
- 這種可變性是使用 `let` 宣告的關鍵特性
✅ 試試看！你可以直接在瀏覽器中撰寫 JavaScript。打開瀏覽器窗口並導航到開發者工具。在控制台中，你會看到一個提示；輸入 `let myVariable = 123`，按下回車，然後輸入 `myVariable`。會發生什麼？注意，你會在後續課程中學到更多相關概念。
✅ 試試看！您可以直接在瀏覽器中撰寫 JavaScript。打開瀏覽器並進入開發者工具。在主控台中，輸入 `let myVariable = 123`，按下 Enter，接著輸入 `myVariable`。結果是什麼？注意，您會在後續課程中進一步學習這些概念。
### 🧠 **變數掌握檢測：養成熟練感**
**來看看您對變數的理解程度：**
- 您能解釋宣告和賦值變數的差別嗎？
- 如果嘗試在宣告之前使用變數會發生什麼？
- 什麼時候會選用 `let` 代替 `const`？
```mermaid
stateDiagram-v2
[*] --> Declared: let myVar
Declared --> Assigned: myVar = 123
Assigned --> Reassigned: myVar = 456
Assigned --> [*]: 變數準備好了！
Reassigned --> [*]: 更新的值
note right of Declared
變數存在但
沒有值 (未定義)
end note
note right of Assigned
變數包含
值 123
end note
```
> **快速提示**：想像變數是貼有標籤的儲存箱。您建立箱子（`let`）、放入內容（`=`），如有需要，之後還可以更換內容！
## 常數
常數的宣告和初始化遵循與變數相同的概念，但使用 `const` 關鍵字。常數通常以全大寫字母宣告。
有時您需要儲存執行期間絕對不會改變的資訊。想像常數就像古希臘歐幾里得制定的數學原理——一旦被證明與記載，將固定不變成為永遠參考的標準。
常數與變數相似，但有個重要限制：一旦賦值，值就不能被更改。這種不可變性有助於避免程式中重要值的意外修改。
宣告與初始化常數與變數的概念相同，但使用 `const` 關鍵字。常數通常以全大寫字母命名。
```javascript
const MY_VARIABLE = 123;
```
常數與變數相似，但有兩個例外：
**此段程式做了什麼：**
- **建立**名為 `MY_VARIABLE` 的常數，值為 123
- **採用**常數的全大寫命名慣例
- **防止**未來對該值的任何修改
常數有兩大規則：
- **必須立刻賦值**——不允許空的常數！
- **值不能更改**——若嘗試更改，JavaScript 會報錯。看看範例：
- **必須有值**。常數必須初始化，否則在執行程式碼時會出現錯誤。
- **引用不可更改**。常數的引用在初始化後不可更改，否則在執行程式碼時會出現錯誤。以下是兩個例子：
- **簡單值**。以下是不允許的：
**簡單值** - 以下寫法不被允許：
```javascript
const PI = 3;
PI = 4; // not allowed
PI = 4; // 不被允許
```
**要記得：**
- **嘗試**重新指派常數會發生錯誤
- **保護**重要值不被意外更動
- **確保**整個程式中數值保持一致
- **物件引用受保護**。以下是不允許的：
**物件參考不可變** - 以下寫法也不被允許：
```javascript
const obj = { a: 3 };
obj = { b: 5 } // not allowed
obj = { b: 5 } // 不被允許
```
- **物件值未受保護**。以下是允許的：
**這裡的概念是：**
- **防止**整個物件被替換成另一個新物件
- **保護**原始物件的參考
- **維持**記憶體中物件的唯一身份
**物件的內容值可變** - 以下寫法是被允許的：
```javascript
const obj = { a: 3 };
obj.a = 5; // allowed
obj.a = 5; // 被允許
```
上述範例中，你更改了物件的值，但未更改其引用，因此是允許的。
**說明發生了什麼：**
- **更改**物件內屬性的值
- **保留**相同的物件參考
- **展示**物件的內容可變，但參考不可變
> 注意，`const` 表示引用受到保護，不能重新賦值。然而，值並非 _不可變_，尤其是當它是像物件這樣的複雜結構時，值仍然可以更改。
> 注意，`const` 是指參考不可被重新指定。但是值不一定是「不可變」的，特別是在複雜結構如物件的情況。
## 資料型別
變數可以儲存許多不同類型的值，例如數字和文字。這些不同類型的值被稱為 **資料型別**。資料型別是軟體開發中的重要部分，因為它幫助開發者決定程式碼的撰寫方式以及軟體的運行方式。此外，某些資料型別具有獨特的功能，可以幫助轉換或提取值中的額外資訊。
JavaScript 將資訊分門別類，稱為資料型別。這個概念類似古代學者歸納知識的方法——亞里斯多德區分不同推理類型，知道邏輯原則不能一視同仁地套用於詩歌、數學和自然哲學。
資料型別很重要，因為不同運算適用於不同類型的資訊。就如同您無法對人名進行算術運算，或對數學方程式排序，JavaScript 也需要適合每個運算的資料型別。理解這點可避免錯誤並讓程式更穩健。
變數可以存放多種不同類型的值，例如數字與文字。這些不同的值類型稱為**資料型別**。資料型別是軟體開發的重要部分，它幫助開發者決定程式如何撰寫以及軟體如何執行。此外，某些資料型別具有獨特特性，能幫助轉換或擷取值中的額外資訊。
✅ 資料型別也被稱為 JavaScript 的資料原始型別，因為它們是語言提供的最低層級資料型別。共有 7 種原始型別：string、number、bigint、boolean、undefined、null 和 symbol。花點時間想像這些原始型別可能代表什麼。什麼是 `zebra`？`0` 呢？`true` 呢？
✅ 資料型別亦稱為 JavaScript 原始資料型別，因為它們是語言提供的最基礎的資料型別。共有七種原始型別：string、number、bigint、boolean、undefined、null 與 symbol。花點時間想像這些原始型別代表什麼。`zebra` 是什麼？`0` 呢？`true` 是什麼？
### 數字
在上一節中，`myVariable` 的值是一個數字型別。
數字是 JavaScript 中最直觀的資料型別。不論是整數如 42、帶小數點的 3.14，或是負數如 -5，JavaScript 都以統一方式處理。
`let myVariable = 123;`
還記得先前的變數嗎？我們儲存的 123 實際上是數字型別：
變數可以儲存所有類型的數字，包括小數或負數。數字還可以與算術運算符一起使用，這部分內容會在[下一節](../../../../2-js-basics/1-data-types)中介紹。
```javascript
let myVariable = 123;
```
**主要特性：**
- JavaScript 會自動識別數值
- 您可用這些變數做數學運算
- 不需要明確宣告型別
變數能儲存所有類型的數字，包括小數和負數。數字也可以搭配算術運算子使用，下一節會介紹此主題。
```mermaid
flowchart LR
A["🔢 數字"] --> B["➕ 加法"]
A --> C["➖ 減法"]
A --> D["✖️ 乘法"]
A --> E["➗ 除法"]
A --> F["📊 餘數 %"]
B --> B1["1 + 2 = 3"]
C --> C1["5 - 3 = 2"]
D --> D1["4 * 3 = 12"]
E --> E1["10 / 2 = 5"]
F --> F1["7 % 3 = 1"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### 算術運算子
算術運算子允許您在 JavaScript 中進行數學計算。這些運算符與數學家世世代代使用的符號相同——類似阿爾花剌子密發展代數符號的方式。
這些運算符的運作方式與傳統算術一致：`+` 表加法，`-` 表減法，以此類推。
### 算術運算符
以下是幾種常見的算術運算子：
在執行算術運算時，有幾種運算符可供使用，以下列出了一些：
| 符號 | 說明 | 範例 |
| ------ | ---------------------------------------------------------------------- | -------------------------------- |
| `+` | **加法**：計算兩數字的和 | `1 + 2 //預期結果是 3` |
| `-` | **減法**：計算兩數字的差 | `1 - 2 //預期結果是 -1` |
| `*` | **乘法**：計算兩數字的積 | `1 * 2 //預期結果是 2` |
| `/` | **除法**：計算兩數字的商 | `1 / 2 //預期結果是 0.5` |
| `%` | **餘數**：計算兩數字相除後的餘數 | `1 % 2 //預期結果是 1` |
| 符號 | 描述 | 範例 |
| ---- | ------------------------------------------------------------------------ | ----------------------------- |
| `+` | **加法**：計算兩個數字的總和 | `1 + 2 //預期答案是 3` |
| `-` | **減法**：計算兩個數字的差 | `1 - 2 //預期答案是 -1` |
| `*` | **乘法**：計算兩個數字的乘積 | `1 * 2 //預期答案是 2` |
| `/` | **除法**：計算兩個數字的商 | `1 / 2 //預期答案是 0.5` |
| `%` | **餘數**：計算兩個數字相除後的餘數 | `1 % 2 //預期答案是 1` |
✅ 試試看！在瀏覽器主控台試做一個算術運算。結果讓您驚訝嗎？
✅ 試試看！在瀏覽器的控制台中嘗試一個算術運算。結果是否讓你感到驚訝？
### 🧮 **數學技能檢測：自信計算**
**測試您的算術理解：**
- `/`（除法）與 `%`（餘數）的差異是什麼？
- 您能預測 `10 % 3` 等於多少嗎？（提示：不是 3.33...）
- 餘數運算子在程式設計中可能有什麼用途？
```mermaid
pie title "JavaScript 數字運算使用情況"
"加法 (+)" : 35
"減法 (-)" : 20
"乘法 (*)" : 20
"除法 (/)" : 15
"餘數 (%)" : 10
```
> **實務洞察**：餘數運算子（%）非常適合檢查數字是奇數還是偶數、創造模式，或在陣列中循環！
### 字串
字串是一組位於單引號或雙引號之間的字符。
在 JavaScript 中，文字資料用字串表示。字串這個詞源自將字元串連的概念，就像中世紀修道院抄寫員將字母串連成詞句和句子一樣。
- `'這是一個字串'`
- `"這也是一個字串"`
- `let myString = '這是一個儲存在變數中的字串值';`
字串是網頁開發的基礎。網站上顯示的每一段文字——使用者名稱、按鈕標籤、錯誤訊息、內容——都以字串形式處理。理解字串是建立功能性使用者介面的關鍵。
記得在撰寫字串時使用引號，否則 JavaScript 會假設它是一個變數名稱。
字串是套在單引號或雙引號之間的一組字元。
### 格式化字串
```javascript
'This is a string'
"This is also a string"
let myString = 'This is a string value stored in a variable';
```
字串是文字，有時需要進行格式化。
**理解這些概念：**
- **使用**單引號 `'` 或雙引號 `"` 定義字串
- **儲存**可包含字母、數字與符號的文字資料
- **賦值**字串給變數以便後續使用
- **需要**用引號區別字串與變數名稱
要**串接**兩個或更多字串（即將它們連接在一起），可以使用 `+` 運算符。
記得在撰寫字串時使用引號，否則 JavaScript 會把它當成變數名。
```mermaid
flowchart TD
A["📝 字串"] --> B["單引號"]
A --> C["雙引號"]
A --> D["範本字面量"]
B --> B1["'Hello World'"]
C --> C1["\"Hello World\""]
D --> D1["`Hello \${name}`"]
E["字串操作"] --> F["串接"]
E --> G["範本插入"]
E --> H["長度 & 方法"]
F --> F1["'Hello' + ' ' + 'World'"]
G --> G1["`Hello \${firstName} \${lastName}`"]
H --> H1["myString.length"]
style A fill:#e3f2fd
style E fill:#fff3e0
style D fill:#e8f5e8
style G fill:#e8f5e8
```
### 字串格式化
字串操作讓您合併文字、結合變數，並創造會隨程式狀態變化的動態內容。此技巧使您能以程式化方式建構文字。
常常需要將多個字串串接在一起——這個過程稱為連接（concatenation）。
要**串接**兩個或多個字串，或將它們連接在一起，使用 `+` 運算子。
```javascript
let myString1 = "Hello";
let myString2 = "World";
myString1 + myString2 + "!"; //HelloWorld!
myString1 + " " + myString2 + "!"; //Hello World!
myString1 + ", " + myString2 + "!"; //Hello, World!
myString1 + myString2 + "!"; //哈囉世界！
myString1 + " " + myString2 + "!"; //哈囉 世界！
myString1 + ", " + myString2 + "!"; //哈囉，世界！
```
✅ 為什麼在 JavaScript 中 `1 + 1 = 2`，但 `'1' + '1' = 11`？想一想。那麼 `'1' + 1` 呢？
**一步步來，以下是發生了什麼事情：**
- **使用** `+` 運算子將多個字串 **結合**
- **直接** 將字串連接在一起，第一個範例沒有空格
- **在字串間加入** 空白字元 `" "` 以增進可讀性
- **插入** 標點符號如逗號，來創造適當的格式
**模板字串**是另一種格式化字串的方式，不同於引號，使用的是反引號。任何非純文字的內容都必須放在 `${ }` 區塊中，包括可能是字串的變數。
✅ 為什麼在 JavaScript 之中 `1 + 1 = 2`，但是 `'1' + '1' = 11` 呢？想一想。那 `'1' + 1` 呢？
**範本字串**是另一種格式化字串的方法，只是用的是反引號（backtick）而非引號。任何不是純文字的內容必須放在 `${ }` 佔位符裡面。這包括任何可能是字串的變數。
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello, World!
`${myString1} ${myString2}!` //哈囉，世界！
`${myString1}, ${myString2}!` //哈囉，世界！
```
你可以使用任一方法來實現格式化目標，但模板字串會保留所有空格和換行。
✅ 什麼時候你會使用模板字串而不是普通字串？
**讓我們理解各個部分：**
- **使用** 反引號 `` ` `` 代替一般引號來建立範本字串
- **直接嵌入** 變數，利用 `${}` 佔位符語法
- **保持** 空格和格式與原文一致
- **提供** 一種更乾淨的方式來建立包含變數的複雜字串
你可以使用任一方式達成格式化目的，但範本字串會尊重所有空格和換行。
✅ 何時會使用範本字串而非普通字串？
### 🔤 **字串熟練度檢查：文字操作信心**
**評估你的字串技能：**
- 你能解釋為什麼 `'1' + '1'` 等於 `'11'` 而不是 `2` 嗎？
- 你覺得哪種字串方法較具可讀性：串接還是範本字串？
- 如果忘記在字串周圍加引號會發生什麼事情？
```mermaid
stateDiagram-v2
[*] --> PlainText: "你好"
[*] --> Variable: name = "Alice"
PlainText --> Concatenated: + " " + name
Variable --> Concatenated
PlainText --> Template: `你好 ${name}`
Variable --> Template
Concatenated --> Result: "你好 Alice"
Template --> Result
note right of Concatenated
傳統方法
較冗長
end note
note right of Template
現代 ES6 語法
更簡潔且易讀
end note
```
> **專家秘訣**：範本字串通常在建構複雜字串時更受青睞，因為它們更為可讀且能完美處理多行字串！
### 布林值
布林值只有兩個值：`true` 或 `false`。布林值可以幫助決定在滿足某些條件時應執行哪些程式碼行。在許多情況下，[運算符](../../../../2-js-basics/1-data-types)會協助設定布林值，並且你會經常注意到變數被初始化或其值被運算符更新。
布林值代表最簡單的資料形式：它只能有兩種值之一 —— `true` 或 `false`。這個二元邏輯系統可追溯自 19 世紀數學家 George Boole 的布林代數。
- `let myTrueBool = true`
- `let myFalseBool = false`
儘管它們很簡單，布林值對於程式邏輯至關重要。它們讓程式能根據條件做出決策——用戶是否登入、按鈕是否被點擊、或是否符合某些條件。
✅ 如果一個變數的值評估為布林值 `true`，則可以認為它是「真值」。有趣的是，在 JavaScript 中，[所有值都是真值，除非被定義為假值](https://developer.mozilla.org/docs/Glossary/Truthy)。
布林值只能是 `true` 或 `false`。布林值可以協助判斷當特定條件成立時，哪些程式碼行應該執行。許多情況下，[運算子](../../../../2-js-basics/1-data-types)協助設定布林值的內容，你也會常見到變數被初始化或其值透過運算子被更新。
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
**如上所示，我們：**
- **建立** 一個變數來儲存布林值 `true`
- **示範** 如何儲存布林值 `false`
- **使用** 正確的關鍵字 `true` 和 `false`（不需要引號）
- **準備** 這些變數以供條件判斷使用
✅ 如果變數評估為布林 `true`，就可視為“truthy”。有趣的是，在 JavaScript 中，[所有值都是 truthy，除非被定義為 falsy](https://developer.mozilla.org/docs/Glossary/Truthy)。
```mermaid
flowchart LR
A["🔘 布林值"] --> B["true"]
A --> C["false"]
D["真值"] --> D1["'hello'"]
D --> D2["42"]
D --> D3["[]"]
D --> D4["{}"]
E["假值"] --> E1["false"]
E --> E2["0"]
E --> E3["''"]
E --> E4["null"]
E --> E5["undefined"]
E --> E6["NaN"]
style B fill:#e8f5e8
style C fill:#ffebee
style D fill:#e3f2fd
style E fill:#fff3e0
```
### 🎯 **布林邏輯檢查：決策能力**
**測試你的布林理解：**
- 你認為為什麼 JavaScript 除了 `true` 和 `false` 外，還有 "truthy" 和 "falsy" 的概念？
- 你能判斷以下哪個是假值 (falsy) 嗎：`0`、`"0"`、`[]`、`"false"`？
- 布林值如何幫助控制程式流程？
```mermaid
pie title "常見的布林使用案例"
"條件邏輯" : 40
"使用者狀態" : 25
"功能切換" : 20
"驗證" : 15
```
> **記住**：在 JavaScript 中，只有 6 個 falsy 值：`false`、`0`、`""`、`null`、`undefined` 和 `NaN`。其它全是 truthy！
---
## 📊 **你的資料型別工具包總結**
```mermaid
graph TD
A["🎯 JavaScript 資料型別"] --> B["📦 變數"]
A --> C["🔢 數字"]
A --> D["📝 字串"]
A --> E["🔘 布林值"]
B --> B1["let 可變"]
B --> B2["const 不可變"]
C --> C1["42, 3.14, -5"]
C --> C2["+ - * / %"]
D --> D1["'單引號' 或 \\\"雙引號\\\""]
D --> D2["`模板字串`"]
E --> E1["true 或 false"]
E --> E2["真值 vs 假值"]
F["⚡ 重要概念"] --> F1["運算時型別很重要"]
F --> F2["JavaScript 是動態型別"]
F --> F3["變數型別可變"]
F --> F4["命名大小寫有區分"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
## GitHub Copilot Agent 挑戰 🚀
利用 Agent 模式完成以下挑戰：
**描述：** 創建一個個人資訊管理器，展現本課程中學到的所有 JavaScript 資料型別，同時處理真實世界的資料場景。
**提示：** 建立一個 JavaScript 程式，創建一個使用者資料物件，包含：姓名（字串）、年齡（數字）、是否為學生（布林值）、喜愛顏色陣列，以及含有街道、城市和郵遞區號的地址物件。包含函式來顯示個人資料資訊及更新各欄位。確保示範字串串接、範本字串、使用年齡進行的算術運算，以及學生狀態的布林邏輯。
想了解更多 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰
JavaScript 因其偶爾令人驚訝的資料型別處理方式而聞名。進行一些研究，了解這些「陷阱」。例如：大小寫敏感可能會讓你吃虧！在控制台中嘗試以下操作：`let age = 1; let Age = 2; age == Age`（結果為 `false` —— 為什麼？）。你還能找到哪些其他陷阱？
JavaScript 有些行為會讓開發者措手不及。以下是經典範例：試著在瀏覽器主控台輸入：`let age = 1; let Age = 2; age == Age` 並觀察結果。它回傳 `false` — 你能判斷為什麼嗎？
這代表許多值得瞭解的 JavaScript 行為之一。熟悉這些細節有助於你寫出更穩健的程式碼，並更有效地除錯。
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app)
## 課後小測驗
[課後小測驗](https://ff-quizzes.netlify.app)
## 複習與自學
查看[這份 JavaScript 練習題列表](https://css-tricks.com/snippets/javascript/)並嘗試其中一題。你學到了什麼？
看看[這份 JavaScript 練習清單](https://css-tricks.com/snippets/javascript/)並嘗試其中一項。你學到了什麼？
## 作業
[資料型別練習](assignment.md)
## 🚀 你的 JavaScript 資料型別精通時間線
### ⚡ **接下來 5 分鐘你可以做什麼**
- [ ] 打開瀏覽器主控台，建立三個不同資料型別的變數
- [ ] 嘗試挑戰：`let age = 1; let Age = 2; age == Age`，並搞懂為什麼會是 false
- [ ] 練習用你的名字和愛好數字做字串串接
- [ ] 試試看數字和字串相加時會發生什麼
### 🎯 **接下來一小時你可以完成什麼**
- [ ] 完成課後小測驗並複習任何不清楚的概念
- [ ] 建立一個迷你計算機，能做加減乘除兩數運算
- [ ] 用範本字串建立一個簡單的姓名格式化程式
- [ ] 探索 `==` 與 `===` 比較運算子之間的差異
- [ ] 練習不同資料型別的互轉
### 📅 **你的一週 JavaScript 基礎**
- [ ] 帶著自信和創意完成作業
- [ ] 建立個人資料物件，使用全部學到的資料型別
- [ ] 練習 [CSS-Tricks 的 JavaScript 練習題](https://css-tricks.com/snippets/javascript/)
- [ ] 用布林邏輯建立簡單的表單驗證器
- [ ] 嘗試陣列和物件資料型別（下一課預告）
- [ ] 加入 JavaScript 社群並詢問關於資料型別的問題
### 🌟 **你的一個月轉變**
- [ ] 將資料型別知識整合到大型程式專案裡
- [ ] 理解在實務中何時、為什麼使用每個資料型別
- [ ] 幫助其他初學者理解 JavaScript 基礎
- [ ] 建立一個管理不同類型使用者資料的小型應用程式
- [ ] 探索進階資料型別概念，如型別強制轉換與嚴格相等
- [ ] 透過文件改善，為開源 JavaScript 專案做出貢獻
### 🧠 **終極資料型別精通檢視**
**慶祝你的 JavaScript 基礎：**
- 哪種資料型別的行為讓你最感意外？
- 你對於向朋友講解變數與常數的舒服程度如何？
- 在 JavaScript 的型別系統裡，你發現最有趣的事情是什麼？
- 你能想像用這些基本概念打造哪種實際應用程式？
```mermaid
journey
title 你的 JavaScript 信心之旅
section 今天
困惑: 3: 你
好奇: 4: 你
興奮: 5: 你
section 本週
練習中: 4: 你
理解中: 5: 你
建構中: 5: 你
section 下個月
解決問題: 5: 你
教導他人: 5: 你
實際專案: 5: 你
```
> 💡 **基礎已建立！** 了解資料型別就像學會字母，然後開始寫故事。你未來寫的每個 JavaScript 程式都會用到這些基礎概念。你現在擁有建構互動網站、動態應用，以及以程式解決真實問題的基石。歡迎進入奇妙的 JavaScript 世界！ 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對於因使用本翻譯而產生的任何誤解或誤譯，我們概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

100
translations/tw/2-js-basics/1-data-types/assignment.md
Unescape View File

@ -1,25 +1,103 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "de0ec12c337394806425c7fd2f003b62",
"translation_date": "2025-10-03T08:58:53+00:00",
"original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
"translation_date": "2026-01-06T13:30:36+00:00",
"source_file": "2-js-basics/1-data-types/assignment.md",
"language_code": "tw"
}
-->
# 資料型別練習
# Data Types Practice: 電子商務購物車
## 說明
## Instructions
假設您正在建立一個購物車。撰寫有關完成購物體驗所需資料型別的文件。對於每種資料型別，解釋如何使用以及為什麼需要使用，並提供範例。六種 JavaScript 資料型別分別是：String、Number、Boolean、Null、Undefined 和 Object。
想像你正在構建一個現代電子商務購物車系統。此作業將幫助你理解不同的 JavaScript 資料型態如何協同運作，以建立現實世界的應用程式。
## 評分標準
### Your Task
標準 | 卓越 | 合格 | 需改進
--- | --- | --- | --- |
資料型別 | 六種資料型別均列出，詳細探討並附有範例 | 探討四種資料型別並有部分解釋 | 僅探討兩種資料型別且解釋不足 |
建立一份全面分析，說明你將如何在購物車應用中使用 JavaScript 資料型態。針對七種基本資料型態及物件，你需要：
1. **識別** 資料型態及其用途
2. **解釋** 為何此資料型態是特定購物車功能的最佳選擇
3. **提供** 實際的程式碼範例，展示該資料型態的應用
4. **描述** 此資料型態如何與購物車中的其他部分互動
### Required Data Types to Cover
**基本資料型態：**
- **String**：產品名稱、描述、用戶資訊
- **Number**：價格、數量、稅額計算
- **Boolean**：商品可用性、用戶偏好、購物車狀態
- **Null**：有意留空的值（例如缺失的折扣碼）
- **Undefined**：未初始化的值或缺少的資料
- **Symbol**：唯一識別符（進階應用）
- **BigInt**：大型金融計算（進階應用）
**參考型態：**
- **Object**：產品細節、用戶資料、購物車內容
- **Array**：產品清單、訂單歷史、分類
### Example Format for Each Data Type
針對每個資料型態，請依照以下格式撰寫：
```markdown
## [Data Type Name]
**Purpose in Shopping Cart:** [Explain what this data type does]
**Why This Type:** [Explain why this is the best choice]
**Code Example:**
```javascript
// Your realistic code example here
```
**Real-world Usage:** [描述在實務中如何運作]
**Interactions:** [解釋此資料型態如何與其他型態互動]
```
### Bonus Challenges
1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
### Submission Guidelines
- Create a markdown document with clear headings for each data type
- Include working JavaScript code examples
- Use realistic e-commerce scenarios in your examples
- Explain your reasoning clearly for beginners to understand
- Test your code examples to ensure they work correctly
## Rubric
| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
|----------|---------------------|---------------------|---------------------|------------------------------|
| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
### Learning Objectives
By completing this assignment, you will:
- ✅ **Understand** the seven JavaScript primitive data types and their uses
- ✅ **Apply** data types to real-world programming scenarios
- ✅ **Analyze** when to choose specific data types for different purposes
- ✅ **Create** working code examples that demonstrate data type usage
- ✅ **Explain** technical concepts in beginner-friendly language
- ✅ **Connect** fundamental programming concepts to practical applications
---
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

493
translations/tw/2-js-basics/2-functions-methods/README.md
Unescape View File

@ -1,45 +1,105 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "92e136090efc4341b1d51c37924c1802",
"translation_date": "2025-08-29T15:23:28+00:00",
"original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
"translation_date": "2026-01-06T13:26:41+00:00",
"source_file": "2-js-basics/2-functions-methods/README.md",
"language_code": "tw"
}
-->
# JavaScript 基礎：方法與函式
![JavaScript 基礎 - 函式](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.tw.png)
> 繪圖筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.tw.png)
> 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title 你的 JavaScript 函數冒險
section 基礎
函數語法: 5: 你
呼叫函數: 4: 你
參數與引數: 5: 你
section 進階概念
返回值: 4: 你
預設參數: 5: 你
函數組合: 4: 你
section 現代 JavaScript
箭頭函數: 5: 你
匿名函數: 4: 你
高階函數: 5: 你
```
## 課前小測驗
[課前小測驗](https://ff-quizzes.netlify.app)
重複寫同樣的程式碼是程式設計中最常見的挫折之一。函式解決這個問題，讓你可以把程式碼包裝成可重複使用的區塊。可以把函式想像成亨利·福特裝配線中標準化的零件——一旦你建立了可靠的組件，就可以在需要時使用它，而不用重新打造。
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app)
函式讓你把程式碼片段打包，方便在整個程式中重複使用。不用到處複製貼上相同的邏輯，你只需建立一次函式，然後隨時呼叫。這種做法讓你的程式碼保持整潔，也讓更新變得輕鬆許多。
在撰寫程式碼時，我們總是希望確保程式碼具有可讀性。雖然這聽起來有些矛盾，但程式碼被閱讀的次數遠遠多於被撰寫的次數。開發者工具箱中的一個核心工具就是 **函式**，它能幫助我們確保程式碼的可維護性。
在本課中，你將學習如何建立自己的函式、傳遞資訊給它們，並獲取有用的結果。你會理解函式和方法的差異、學習現代語法方式，並看到函式如何與其他函式協作。我們將一步步建立這些概念。
[![方法與函式](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "方法與函式")
> 🎥 點擊上方圖片觀看有關方法與函式的影片。
> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
```mermaid
mindmap
root((JavaScript Functions))
Basic Concepts
Declaration
傳統語法
箭頭函式語法
Calling
使用括號
需要括號
Parameters
Input Values
多個參數
預設值
Arguments
傳入的值
可為任意類型
Return Values
Output Data
return 陳述式
離開函式
Use Results
儲存於變數
鏈結函式
Advanced Patterns
Higher-Order
函式作為參數
回呼函式
Anonymous
不需要名稱
內嵌定義
```
## 函式
函式的核心是一段可以按需執行的程式碼。這非常適合需要多次執行相同任務的情境；與其在多個地方重複邏輯（這會在需要更新時變得困難），我們可以將邏輯集中在一個地方，並在需要執行操作時呼叫它——甚至可以從其他函式中呼叫函式！
函式是獨立的程式碼區塊，用來完成特定任務。它封裝了邏輯，使你能夠在需要時執行。
與其在程式中重複寫相同的程式碼，不如打包成函式，並在需要時呼叫該函式。這讓你的程式碼保持乾淨，也讓維護更容易。想像如果你需要修改散布在 20 個不同位置的邏輯會有多麻煩。
同樣重要的是為函式命名的能力。雖然這看起來微不足道，但名稱提供了一種快速記錄程式碼片段的方式。您可以將其視為按鈕上的標籤。如果我點擊一個標有「取消計時器」的按鈕，我就知道它會停止時鐘的運行。
為你的函式取具描述性的名稱非常重要。一個命名良好的函式能清楚傳達它的用途——當你看到 `cancelTimer()` 時，你立刻明白它的功能，就像明確標示的按鈕讓你一看就知道按下後會發生什麼事。
## 建立與呼叫函式
## 創建與呼叫函式
函式的語法如下所示：
讓我們來看看如何創建函式。語法遵循固定模式：
```javascript
function nameOfFunction() { // function definition
// function definition/body
function nameOfFunction() { // 函數定義
// 函數定義／主體
}
```
如果我想建立一個函式來顯示問候語，它可能看起來像這樣：
來拆解一下：
- `function` 關鍵字告訴 JavaScript「嘿，我要建立函式了！」
- `nameOfFunction` 是你給函式取的描述性名稱
- 括號 `()` 中可以加入參數（我們稍後會說明）
- 大括號 `{}` 包含呼叫函式時會執行的實際程式碼
我們來寫一個簡單的問候函式，看它如何運作：
```javascript
function displayGreeting() {
@ -47,28 +107,57 @@ function displayGreeting() {
}
```
每當我們想要呼叫（或執行）函式時，我們使用函式名稱後加上 `()`。值得注意的是，我們的函式可以在呼叫之前或之後定義；JavaScript 編譯器會幫您找到它。
這個函式會在控制台印出「Hello, world!」。一旦定義完成，你就可以隨時呼叫它。
要執行（或「呼叫」）函式，寫函式名稱後跟括號即可。JavaScript 允許你在呼叫函式前或後定義函式，JavaScript 引擎會負責處理執行順序。
```javascript
// calling our function
// 呼叫我們的函數
displayGreeting();
```
> **NOTE:** 有一種特殊類型的函式稱為 **方法**，您已經在使用了！事實上，我們在上面的示例中使用 `console.log` 時就看到了這一點。方法與函式的不同之處在於，方法附加在物件上（例如我們的例子中的 `console`），而函式則是獨立的。您會發現許多開發者會交替使用這些術語。
執行這行後，函式內的所有程式碼會執行，並在瀏覽器的控制台中顯示「Hello, world!」。你可以重複呼叫這個函式。
### 🧠 **函式基礎檢測：建立你的第一個函式**
**來測試你對基本函式的理解：**
- 為什麼函式定義中使用大括號 `{}`？
- 如果你寫成 `displayGreeting` 而沒有括號會發生什麼事？
- 為什麼你會想多次呼叫同一個函式？
```mermaid
flowchart TD
A["✏️ 定義函式"] --> B["📦 打包程式碼"]
B --> C["🏷️ 命名它"]
C --> D["📞 需要時呼叫"]
D --> E["🔄 在任何地方重複使用"]
F["💡 好處"] --> F1["不重複撰寫程式碼"]
F --> F2["容易維護"]
F --> F3["組織清晰"]
F --> F4["更容易測試"]
style A fill:#e3f2fd
style E fill:#e8f5e8
style F fill:#fff3e0
```
> **注意：** 在這些課程中你一直在使用 **方法**。`console.log()` 是方法——本質上是屬於 `console` 物件的函式。主要區別在於方法附加在物件上，而函式是獨立存在。很多開發者在平常對話中會混用這兩個詞。
### 函式的最佳實踐
### 函式最佳實踐
在建立函式時，有一些最佳實踐需要記住：
以下幾點可以幫助你撰寫優秀的函式：
- 一如既往，使用描述性的名稱，讓您知道函式的用途
- 使用 **camelCasing** 來結合多個單字
- 讓函式專注於特定的任務
- 為函式取清楚且具描述性的名稱——未來的你會感謝自己！
- 多字名稱使用 **駝峰式命名**（如 `calculateTotal`，而不是 `calculate_total`）
- 保持每個函式專注做好一件事
## 傳遞資訊給函式
為了讓函式更具重用性，您通常需要向函式傳遞資訊。如果我們考慮上面的 `displayGreeting` 示例，它只會顯示 **Hello, world!**。這並不是一個非常有用的函式。如果我們希望它更靈活一些，例如允許指定要問候的人的名字，我們可以添加一個 **參數**。參數（有時也稱為 **引數**）是傳遞給函式的額外資訊。
我們之前的 `displayGreeting` 函式很有限——它只能印出「Hello, world!」。參數讓函式更靈活、更有用。
**參數** 就像佔位符，每次你呼叫函式時可以放入不同的值。這樣同一個函式就可以在每次呼叫時根據不同資訊執行。
參數在定義部分列於括號內，並以逗號分隔，如下所示：
你在定義函式時，在括號內列出參數，多個參數以逗號分隔：
```javascript
function name(param, param2, param3) {
@ -76,7 +165,9 @@ function name(param, param2, param3) {
}
```
我們可以更新 `displayGreeting` 以接受名字並顯示該名字。
每個參數就像佔位符——呼叫函式時，使用者會提供實際的值替代這些位置。
我們來改寫問候函式，讓它接受名字參數：
```javascript
function displayGreeting(name) {
@ -85,16 +176,44 @@ function displayGreeting(name) {
}
```
當我們想要呼叫函式並傳遞參數時，我們在括號內指定它。
注意我們用反引號（`` ` ``）和 `${}` 直接把名字代入訊息——這叫做模板字串，是混合變數建立字串的方便方式。
現在呼叫函式時，可以傳入任意名字：
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
// 執行時顯示「Hello, Christopher!」
```
JavaScript 會把字串 `'Christopher'` 指派給 `name` 參數，並產生個人化訊息「Hello, Christopher!」。
```mermaid
flowchart LR
A["🎯 函式呼叫"] --> B["📥 參數"]
B --> C["⚙️ 函式主體"]
C --> D["📤 結果"]
A1["displayGreeting('Alice')"] --> A
B1["name = 'Alice'"] --> B
C1["範本字串\n\`Hello, \${name}!\`"] --> C
D1["'Hello, Alice!'"] --> D
E["🔄 參數類型"] --> E1["字串"]
E --> E2["數字"]
E --> E3["布林值"]
E --> E4["物件"]
E --> E5["函式"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
```
## 預設值
我們可以通過添加更多參數使函式更加靈活。但如果我們不希望每個值都必須指定呢？以問候語的例子為例，我們可以將名字設為必填（我們需要知道要問候誰），但希望允許問候語根據需要進行自定義。如果有人不想自定義，我們提供一個預設值。要為參數提供預設值，我們可以像為變數設置值一樣進行設置——`parameterName = 'defaultValue'`。完整示例如下：
如果我們要讓某些參數可選怎麼辦？這時就用預設值！
假設我們想讓人可以自訂問候詞，但如果不指定，我們就用「Hello」作為預設。你可以用等號設定預設值，就像給變數設定：
```javascript
function displayGreeting(name, salutation='Hello') {
@ -102,29 +221,63 @@ function displayGreeting(name, salutation='Hello') {
}
```
當我們呼叫函式時，可以決定是否要為 `salutation` 設置值。
這裡 `name` 仍是必須的，但 `salutation` 有預設值 `'Hello'`，如果沒提供別的問候詞就用它。
現在我們可以用兩種不同方式呼叫函式：
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
// 顯示 "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
// 顯示 "Hi, Christopher"
```
第一次呼叫，因為沒有指定問候詞，JavaScript 就用預設「Hello」。第二次呼叫則用我們自訂的「Hi」。這種彈性讓函式適用於多種場景。
### 🎛️ **參數熟練度檢測：讓函式更彈性**
**測試你對參數的理解：**
- 參數（parameter）和引數（argument）有什麼差別？
- 為什麼預設值在實務編程中很有用？
- 如果傳入的引數比參數多，會發生什麼事？
```mermaid
stateDiagram-v2
[*] --> NoParams: function greet() {}
[*] --> WithParams: function greet(name) {}
[*] --> WithDefaults: function greet(name, greeting='Hi') {}
NoParams --> Static: 輸出總是相同
WithParams --> Dynamic: 隨輸入變化
WithDefaults --> Flexible: 可選的自訂
Static --> [*]
Dynamic --> [*]
Flexible --> [*]
note right of WithDefaults
最靈活的方法
向後相容
end note
```
> **專業提示**：預設參數讓你的函式更友善。使用者可以快速用合理預設開始，但也能依需要自訂！
## 回傳值
到目前為止，我們建立的函式會始終輸出到 [console](https://developer.mozilla.org/docs/Web/API/console)。有時這正是我們所需要的，特別是當我們建立會呼叫其他服務的函式時。但如果我想建立一個輔助函式來執行計算並將值回傳，以便我可以在其他地方使用它呢？
迄今為止，我們的函式只是印出訊息，但如果你想要函式計算並回傳結果呢？
我們可以通過使用 **回傳值** 來實現。回傳值由函式回傳，並且可以像字串或數字等靜態值一樣存儲在變數中。
這時用到 **回傳值**。函式不只是顯示東西，可以把值「交還」給呼叫者，讓你存到變數或用於程式其他地方。
如果函式確實回傳某些內容，則使用關鍵字 `return`。`return` 關鍵字需要一個值或參考作為回傳內容，如下所示：
要回傳值，用 `return` 關鍵字，後面接你想回傳的東西：
```javascript
return myVariable;
```
```
重要的是：函式遇到 `return` 陳述句會立刻停止執行，並把該值返還給呼叫它的地方。
我們可以建立一個函式來建立問候語訊息並將值回傳給呼叫者。
讓我們修改問候函式，讓它回傳訊息，而不是印出：
```javascript
function createGreetingMessage(name) {
@ -133,35 +286,81 @@ function createGreetingMessage(name) {
}
```
呼叫此函式時，我們會將值存儲在變數中。這與我們將變數設置為靜態值（例如 `const name = 'Christopher'`）的方式非常相似。
現在函式不是印出問候語，而是建立訊息並回傳給我們。
要使用回傳值，我們可以把它存到變數裡，就像任何其他值：
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
## 函式作為函式的參數
`greetingMessage` 現在包含「Hello, Christopher」，我們可以任意在程式碼中使用——顯示在網頁上、放入電子郵件，或傳給其他函式。
```mermaid
flowchart TD
A["🔧 函式處理"] --> B{"回傳敘述?"}
B -->|是| C["📤 回傳值"]
B -->|否| D["📭 回傳未定義"]
C --> E["💾 儲存至變數"]
C --> F["🔗 在運算式中使用"]
C --> G["📞 傳入函式"]
D --> H["⚠️ 通常沒用"]
I["📋 回傳值用途"] --> I1["計算結果"]
I --> I2["驗證輸入"]
I --> I3["資料轉換"]
I --> I4["創造物件"]
style C fill:#e8f5e8
style D fill:#ffebee
style I fill:#e3f2fd
```
### 🔄 **回傳值檢測：取得結果**
**評估你對回傳值的理解：**
- 函式中 `return` 之後的程式碼會發生什麼？
- 為什麼回傳值通常比直接印到控制台更好？
- 函式能回傳不同類型的值嗎（字串、數字、布林）？
```mermaid
pie title "常見的回傳值類型"
"字串" : 30
"數字" : 25
"物件" : 20
"布林值" : 15
"陣列" : 10
```
> **關鍵見解**：回傳值函式更靈活，因為呼叫者決定如何使用結果。這讓程式碼更模組化且可重複使用！
## 函式作為其他函式的參數
函式也可以作為參數傳給其它函式。這個概念乍看很複雜，但它是靈活程式編寫的重要特性。
隨著您在程式設計生涯中的進步，您會遇到接受函式作為參數的函式。這個巧妙的技巧通常用於我們不知道某件事何時會發生或完成，但我們知道需要執行某個操作作為回應。
這種模式很常用於「當某事發生時，做這個事」。如「計時器結束時，執行這段程式碼」或「使用者按鈕點擊時，呼叫此函式。」
例如，考慮 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它啟動一個計時器並在完成時執行程式碼。我們需要告訴它我們想執行什麼程式碼。聽起來像是函式的完美工作！
來看內建的 `setTimeout` 函式，它會等待一段時間，然後執行某段程式碼。得告訴它要執行什麼程式碼——這時傳入函式就是很好的用法！
如果您執行以下程式碼，3 秒後您會看到訊息 **3 seconds has elapsed**。
試試這段程式碼——3 秒後，你會看到訊息：
```javascript
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
// 計時器數值為毫秒
setTimeout(displayDone, 3000);
```
注意我們把 `displayDone`（沒加括號）傳給 `setTimeout`。我們不是自己呼叫函式，而是交給 `setTimeout`，告訴它「3 秒後呼叫這個函式」。
### 匿名函式
讓我們再看看我們建立的內容。我們正在建立一個只會使用一次的具名函式。隨著應用程式變得更加複雜，我們可能會建立許多只會被呼叫一次的函式。這並不理想。事實證明，我們並不總是需要提供名稱！
有時候你只需要一個函式做特定事，不想給它名字。想想看——如果你只用一次函式，幹嘛讓程式碼多個名稱？
當我們將函式作為參數傳遞時，我們可以跳過事先建立函式，而是在參數中直接建立它。我們使用相同的 `function` 關鍵字，但將其作為參數來建立。
JavaScript 允許你建立 **匿名函式**——沒有名字、直接在需要地方定義的函式。
讓我們重寫上述程式碼以使用匿名函式：
我們用匿名函式改寫計時器範例：
```javascript
setTimeout(function() {
@ -169,13 +368,15 @@ setTimeout(function() {
}, 3000);
```
如果您執行我們的新程式碼，您會注意到結果相同。我們建立了一個函式，但不需要給它命名！
結果一樣，但函式直接寫在 `setTimeout` 內，免去額外的函式宣告。
### Fat Arrow 函式
### 箭頭函式
許多程式語言（包括 JavaScript）中常見的一個快捷方式是使用所謂的 **箭頭** 或 **Fat Arrow** 函式。它使用特殊的指示符 `=>`，看起來像一個箭頭——因此得名！通過使用 `=>`，我們可以跳過 `function` 關鍵字。
現代 JavaScript 有更短的函式寫法，叫做 **箭頭函式**。它用 `=>` （看起來像箭頭）且深受開發者喜愛。
讓我們再一次重寫程式碼以使用 Fat Arrow 函式：
箭頭函式省去了 `function` 關鍵字，可寫出更簡潔的程式碼。
這是用箭頭函式改寫的計時器範例：
```javascript
setTimeout(() => {
@ -183,28 +384,200 @@ setTimeout(() => {
}, 3000);
```
### 何時使用每種策略
您現在已經看到我們有三種方式將函式作為參數傳遞，可能會想知道何時使用哪一種。如果您知道函式會被多次使用，請正常建立它。如果只會在一個地方使用，通常最好使用匿名函式。至於使用 Fat Arrow 函式還是更傳統的 `function` 語法，則取決於您，但您會注意到大多數現代開發者更喜歡使用 `=>`。
`()` 是參數（此例為空），然後是箭頭 `=>`，最後是用大括號包裹的函式主體。這給你一樣功能，但語法更精簡。
```mermaid
flowchart LR
A["📝 函數風格"] --> B["傳統"]
A --> C["箭頭"]
A --> D["匿名"]
B --> B1["function name() {}"]
B --> B2["提升"]
B --> B3["具名"]
C --> C1["const name = () => {}"]
C --> C2["簡潔語法"]
C --> C3["現代風格"]
D --> D1["function() {}"]
D --> D2["無名稱"]
D --> D3["一次性使用"]
E["⏰ 什麼時候使用"] --> E1["傳統: 可重複使用函數"]
E --> E2["箭頭: 簡短回呼函數"]
E --> E3["匿名: 事件處理函數"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### 何時使用各種寫法
應該何時用哪種方式？實務建議：如果會多次使用函式，給它命名並獨立定義；如果只用一次，考慮匿名函式。箭頭函式和傳統函式語法都行，不過現代 JavaScript 廣泛使用箭頭函式。
### 🎨 **函式風格熟練度檢測：選擇合適的語法**
**測驗你對語法的了解：**
- 什麼時候你會偏好箭頭函式而非傳統函式語法？
- 匿名函式的主要優點是什麼？
- 你能想到哪種情況下命名函式比匿名函式好？
```mermaid
quadrantChart
title 函數選擇決策矩陣
x-axis 簡單 --> 複雜
y-axis 一次性使用 --> 可重複使用
quadrant-1 箭頭函數
quadrant-2 命名函數
quadrant-3 匿名函數
quadrant-4 傳統函數
Event Handlers: [0.3, 0.2]
Utility Functions: [0.7, 0.8]
Callbacks: [0.2, 0.3]
Class Methods: [0.8, 0.7]
Mathematical Operations: [0.4, 0.6]
```
> **現代趨勢**：箭頭函式越來越受歡迎，因為語法簡潔，但傳統函式仍有其地位！
---
## 🚀 挑戰
您能否用一句話說明函式與方法的區別？試試看！
請試著用一句話說明函式與方法的差異？
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app)
**描述：** 建立一個數學函式工具庫，示範本課涵蓋的函式概念，包括參數、預設值、回傳值與箭頭函式。
**提示：** 建立一個名為 `mathUtils.js` 的 JavaScript 檔案，包含下列函式：
1. 一個有兩個參數，回傳兩者和的函式 `add`
2. 一個帶有預設參數值的函式 `multiply`（第二個參數預設為 1）
3. 一個箭頭函式 `square`，接受一個數字並回傳平方
4. 一個函式 `calculate`，接受另一個函式及兩個數字參數，並將該函式應用於兩數上
5. 展示各函式的適當測試案例呼叫
了解更多 [Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 課後小測驗
[課後小測驗](https://ff-quizzes.netlify.app)
## 複習與自學
值得[深入了解箭頭函式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，因為它們在程式碼中越來越常用。練習撰寫一個函式，然後使用此語法重寫它。
值得多讀一些關於 [箭頭函式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 的資料，因為它們越來越多用於程式碼庫。練習寫一個函式，然後用這種語法重寫一遍。
## 作業
[函式趣味練習](assignment.md)
[函式樂趣](assignment.md)
---
## 🧰 **你的 JavaScript 函式工具包摘要**
```mermaid
graph TD
A["🎯 JavaScript 函式"] --> B["📋 函式宣告"]
A --> C["📥 參數"]
A --> D["📤 回傳值"]
A --> E["🎨 現代語法"]
B --> B1["function name() {}"]
B --> B2["具描述性的命名"]
B --> B3["可重複使用的程式區塊"]
C --> C1["輸入資料"]
C --> C2["預設值"]
C --> C3["多重參數"]
D --> D1["return 陳述式"]
D --> D2["離開函式"]
D --> D3["將資料傳回"]
E --> E1["箭頭函式: () =>"]
E --> E2["匿名函式"]
E --> E3["高階函式"]
F["⚡ 核心優點"] --> F1["程式碼重用"]
F --> F2["更佳組織"]
F --> F3["更容易測試"]
F --> F4["模組化設計"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
## 🚀 你的 JavaScript 函式掌握時間軸
### ⚡ **接下來五分鐘你能做的事**
- [ ] 寫一個簡單函式回傳你最喜歡的數字
- [ ] 建立一個有兩個參數的函式，將二者相加
- [ ] 嘗試將傳統函式轉換為箭頭函式語法
- [ ] 練習本挑戰：解釋函式與方法之間的差異
### 🎯 **你這小時內可以完成的事項**
- [ ] 完成課後測驗並複習任何令人困惑的概念
- [ ] 建構 GitHub Copilot 挑戰中的數學工具庫
- [ ] 創建一個使用另一個函式作為參數的函式
- [ ] 練習撰寫具有預設參數的函式
- [ ] 嘗試在函式回傳值中使用模板字串
### 📅 **你為期一週的函式精通計畫**
- [ ] 創意完成「函式樂趣」作業
- [ ] 將寫過的重複程式碼重構成可重複使用的函式
- [ ] 僅使用函式來建構一個小型計算機（不使用全域變數）
- [ ] 練習使用箭頭函式搭配陣列方法如 `map()` 和 `filter()`
- [ ] 建立一組常用任務的工具函式集合
- [ ] 研究高階函式與函式式程式設計概念
### 🌟 **你為期一個月的蛻變計畫**
- [ ] 精通進階函式概念，如閉包與作用域
- [ ] 建構一個大量使用函式組合的專案
- [ ] 透過改進函式文件來貢獻開源專案
- [ ] 教導他人函式及不同語法風格
- [ ] 探索 JavaScript 中的函式式程式設計範式
- [ ] 建立個人可重用函式庫供未來專案使用
### 🏆 **最終函式冠軍檢視**
**慶祝你的函式精通：**
- 到目前為止你創建的最有用函式是什麼？
- 學習函式後，你對程式碼組織的思考方式有何改變？
- 你偏好哪種函式語法？為什麼？
- 你會透過撰寫函式解決什麼現實世界的問題？
```mermaid
journey
title 你的函式信心演進
section 今天
因語法困惑: 3: You
理解基礎: 4: You
撰寫簡單函式: 5: You
section 本週
使用參數: 4: You
回傳值: 5: You
現代語法: 5: You
section 下個月
函式組合: 5: You
進階模式: 5: You
教導他人: 5: You
```
> 🎉 **你已經精通程式設計中最強大的概念之一了！** 函式是大型程式的基石。你未來開發的每個應用都會用到函式來組織、重複使用及結構化程式碼。你現在了解如何將邏輯包裝成可重複使用的元件，讓你成為更有效率及高效能的程式設計師。歡迎來到模組化程式設計的世界！🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解讀概不負責。
本文件係使用AI翻譯服務[Co-op Translator](https://github.com/Azure/co-op-translator)進行翻譯。雖然我們力求準確，但請注意自動翻譯可能存在錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤讀承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

81
translations/tw/2-js-basics/2-functions-methods/assignment.md
Unescape View File

@ -1,25 +1,82 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8973f96157680a13e9446e4bb540ee57",
"translation_date": "2025-08-23T22:42:50+00:00",
"original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
"translation_date": "2026-01-06T13:28:32+00:00",
"source_file": "2-js-basics/2-functions-methods/assignment.md",
"language_code": "tw"
}
-->
# 玩轉函式
# Fun with Functions
## 說明
## Instructions
創建不同的函式，包括會返回值的函式和不會返回值的函式。
在此作業中，您將練習建立不同類型的函式，以加強您所學的 JavaScript 函式、參數、預設值和回傳語句的概念。
試著創建一個同時包含普通參數和帶有預設值參數的函式。
建立一個名為 `functions-practice.js` 的 JavaScript 檔案並實作以下函式：
## 評分標準
### Part 1: Basic Functions
1. **建立一個名為 `sayHello` 的函式**，不接收任何參數，並在控制台印出 "Hello!"。
| 評分標準 | 優秀 | 合格 | 需要改進 |
| -------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------- |
| | 提供的解決方案包含兩個或以上運行良好的函式，且參數多樣化 | 提供的解決方案包含一個函式，且參數較少 | 解決方案有錯誤 |
2. **建立一個名為 `introduceYourself` 的函式**，接收一個 `name` 參數，並在控制台印出類似 "Hi, my name is [name]" 的訊息。
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
### Part 2: Functions with Default Parameters
3. **建立一個名為 `greetPerson` 的函式**，接收兩個參數：`name`（必填）和 `greeting`（選填，預設為 "Hello"）。函式應該在控制台印出類似 "[greeting], [name]!" 的訊息。
### Part 3: Functions that Return Values
4. **建立一個名為 `addNumbers` 的函式**，接收兩個參數 (`num1` 和 `num2`)，並回傳它們的和。
5. **建立一個名為 `createFullName` 的函式**，接收 `firstName` 和 `lastName` 參數，並回傳完整名字的字串。
### Part 4: Mix It All Together
6. **建立一個名為 `calculateTip` 的函式**，接收兩個參數：`billAmount`（必填）和 `tipPercentage`（選填，預設為 15）。函式應計算並回傳小費金額。
### Part 5: Test Your Functions
加入函式呼叫測試每個函式，並使用 `console.log()` 顯示結果。
**範例測試呼叫：**
```javascript
// 在這裡測試你的函式
sayHello();
introduceYourself("Sarah");
greetPerson("Alex");
greetPerson("Maria", "Hi");
const sum = addNumbers(5, 3);
console.log(`The sum is: ${sum}`);
const fullName = createFullName("John", "Doe");
console.log(`Full name: ${fullName}`);
const tip = calculateTip(50);
console.log(`Tip for $50 bill: $${tip}`);
```
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | --------- | -------- | ----------------- |
| **Function Creation** | 所有 6 個函式依正確語法與命名慣例正確實作 | 正確實作 4-5 個函式，有輕微語法錯誤 | 實作 3 個或更少函式，或有重大語法錯誤 |
| **Parameters & Default Values** | 依指定正確使用必填參數、選填參數及預設值 | 正確使用參數，但預設值使用可能有問題 | 參數實作錯誤或遺漏 |
| **Return Values** | 應回傳值的函式正確回傳，不需回傳值的函式僅執行動作 | 大多數回傳正確，僅有輕微問題 | 回傳語句有重大問題 |
| **Code Quality** | 代碼乾淨、結構良好，變數命名有意義且縮排適當 | 代碼可運作，但可更整潔或更有條理 | 代碼難讀或結構差 |
| **Testing** | 所有函式均有適當測試呼叫且結果清楚顯示 | 大部分函式有適當測試 | 測試函式有限或錯誤 |
## Bonus Challenges (Optional)
如果您想挑戰自我進階：
1. **建立一個箭頭函式版本**的其中一個函式
2. **建立一個可接受另一函式作為參數的函式**（如課程中的 `setTimeout` 範例）
3. **加入輸入驗證**，確保函式能優雅地處理無效輸入
---
> 💡 **提示**：記得開啟瀏覽器的開發者控制台（F12）以查看 `console.log()` 語句的輸出！
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由人工智慧翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

618
translations/tw/2-js-basics/3-making-decisions/README.md
Unescape View File

@ -1,183 +1,477 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "f7009631b73556168ca435120a231c98",
"translation_date": "2025-08-29T15:23:55+00:00",
"original_hash": "c688385d15dd3645e924ea0ffee8967f",
"translation_date": "2026-01-06T13:30:46+00:00",
"source_file": "2-js-basics/3-making-decisions/README.md",
"language_code": "tw"
}
-->
# JavaScript 基礎：做出決策
![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.tw.png)
![JavaScript 基礎 - 做出決策](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.tw.png)
> 筆記圖示由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
```mermaid
journey
title 你的 JavaScript 決策冒險
section 基礎
布林值: 5: 你
比較運算子: 4: 你
邏輯思考: 5: 你
section 基本決策
If 陳述句: 4: 你
If-Else 邏輯: 5: 你
Switch 陳述句: 4: 你
section 進階邏輯
邏輯運算子: 5: 你
複雜條件: 4: 你
三元運算式: 5: 你
```
你是否曾好奇應用程式如何做出聰明的決定？例如導航系統如何選擇最快路線，或者恆溫器如何決定何時開啟暖氣？這是程式設計中決策制定的基本概念。
正如查爾斯·巴貝奇的分析機設計用於根據條件執行不同的運算序列，現代 JavaScript 程式也需要根據不同情況做出選擇。這種分支與決策的能力，將靜態代碼轉變為具回應性的智慧型應用程式。
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
在本課程中，你將學會如何在程式中實作條件邏輯。 我們將探討條件語句、比較運算子和邏輯表達式，讓程式可以評估情況並適當回應。
## 課前測驗
## 課前小測
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/11)
[課前小測](https://ff-quizzes.netlify.app/web/quiz/11)
做出決策並控制程式碼執行的順序，能讓你的程式碼更具可重用性和穩健性。本章節涵蓋了在 JavaScript 中控制資料流的語法，以及它在搭配布林值時的重要性。
做出決策並控制程式流程的能力是程式撰寫的基本面向。這個章節涵蓋如何使用布林值和條件邏輯控制 JavaScript 程式的執行路徑。
[![做出決策](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "做出決策")
> 🎥 點擊上方圖片觀看有關做出決策的影片。
> 🎥 點擊上方圖片觀看關於做出決策的影片。
> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) 上修習這門課！
```mermaid
mindmap
root((決策制定))
Boolean Logic
true/false
比較結果
邏輯表達式
Conditional Statements
if statements
單一條件
程式碼執行
if-else
兩種路徑
替代行動
switch
多種選項
清晰結構
Operators
Comparison
=== !== < > <= >=
價值關係
Logical
&& || !
結合條件
Advanced Patterns
Ternary
? : 語法
內嵌決策
Complex Logic
巢狀條件
多重標準
```
## 布林值簡介回顧
> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！
在探討決策之前，讓我們回顧先前課程中的布林值。這個名稱來自數學家喬治·布爾 (George Boole)，表示二元狀態——`true` 或 `false`。沒有模糊地帶，沒有中間值。
## 布林值簡介
這些二元值是所有計算邏輯的基礎。程式所做的每個決策，最終都歸結於布林評估。
布林值只有兩個可能的值：`true` 或 `false`。布林值能幫助我們決定在特定條件下，哪些程式碼行應該被執行。
建立布林變數非常簡單：
你可以像這樣設定布林值為 true 或 false：
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
`let myTrueBool = true`
`let myFalseBool = false`
這樣會建立兩個具有明確布林值的變數。
✅ 布林值的命名源自英國數學家、哲學家及邏輯學家 George Boole (1815–1864)。
✅ 布林值是以英國數學家、哲學家與邏輯學家喬治·布爾 (1815–1864) 的名字命名。
## 比較運算子與布林值
運算子用於通過比較來評估條件，並生成布林值。以下是常用的運算子列表。
| 符號 | 描述 | 範例 |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- |
| `<` | **小於**：比較兩個值，若左側的值小於右側，則返回布林值 `true` | `5 < 6 // true` |
| `<=` | **小於或等於**：比較兩個值，若左側的值小於或等於右側，則返回布林值 `true` | `5 <= 6 // true` |
| `>` | **大於**：比較兩個值，若左側的值大於右側，則返回布林值 `true` | `5 > 6 // false` |
| `>=` | **大於或等於**：比較兩個值，若左側的值大於或等於右側，則返回布林值 `true` | `5 >= 6 // false` |
| `===` | **嚴格相等**：比較兩個值，若左右兩側的值相等且資料型別相同，則返回布林值 `true` | `5 === 6 // false` |
| `!==` | **不相等**：比較兩個值，返回與嚴格相等運算子相反的布林值 | `5 !== 6 // true` |
實務上，你很少會手動設置布林值。你會透過評估條件來生成它們：「這個數字是否大於那個？」或是「這些值是否相等？」
比較運算子可用來進行這些評估。它們比較數值，並根據運算元之間的關係回傳布林結果。
| 符號 | 描述 | 範例 |
| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **小於**：比較兩個值，若左側值小於右側則回傳 `true` | `5 < 6 // true` |
| `<=` | **小於或等於**：比較兩個值，若左側值小於或等於右側則回傳 `true` | `5 <= 6 // true` |
| `>` | **大於**：比較兩個值，若左側值大於右側則回傳 `true` | `5 > 6 // false` |
| `>=` | **大於或等於**：比較兩個值，若左側值大於或等於右側則回傳 `true` | `5 >= 6 // false` |
| `===` | **嚴格相等**：比較兩個值，若左右兩側值相等且資料型態相同，回傳 `true` | `5 === 6 // false` |
| `!==` | **不等於**：比較兩個值，回傳嚴格相等回傳值的相反布林值 | `5 !== 6 // true` |
✅ 透過在瀏覽器的主控台撰寫一些比較運算，檢驗你的理解。有回傳結果讓你感到意外嗎？
```mermaid
flowchart LR
A["🔢 值"] --> B["⚖️ 比較"]
B --> C["✅ 布林結果"]
D["5"] --> E["< 6"]
E --> F["true"]
G["10"] --> H["=== '10'"]
H --> I["false"]
J["'hello'"] --> K["!== 'world'"]
K --> L["true"]
M["📋 運算子類型"] --> M1["相等: === !=="]
M --> M2["關係: < > <= >="]
M --> M3["嚴格與寬鬆"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style M fill:#fff3e0
```
### 🧠 **比較運算理解測試：掌握布林邏輯**
**測試你的比較知識：**
- 為什麼普遍推薦使用 `===`（嚴格相等）而非 `==`（寬鬆相等）？
- 你能預測 `5 === '5'` 會回傳什麼嗎？`5 == '5'` 呢？
- `!==` 與 `!=` 的差別是什麼？
```mermaid
stateDiagram-v2
[*] --> Comparison: 兩個值
Comparison --> StrictEqual: === 或 !==
Comparison --> Relational: < > <= >=
StrictEqual --> TypeCheck: 檢查類型且值
Relational --> NumberCompare: 轉換為數字
TypeCheck --> BooleanResult: true 或 false
NumberCompare --> BooleanResult
note right of StrictEqual
優先方法
無類型轉換
end note
note right of Relational
適用於區間
數值比較
end note
```
> **專家秘訣**：除非特別需要型別轉換，否則永遠使用 `===` 和 `!==` 來檢查等於與不等於。這可防止意外行為！
✅ 在瀏覽器的控制台中撰寫一些比較來檢查你的知識。返回的資料是否有讓你感到驚訝？
## If 陳述式
## If 語句
`if` 陳述式就像向程式問問題。「如果這個條件為真，那就執行這件事。」這很可能是你在 JavaScript 中做決策時最重要的工具。
If 語句會在條件為 true 時執行其區塊中的程式碼。
運作方式如下：
```javascript
if (condition) {
//Condition is true. Code in this block will run.
// 條件為真。此區塊中的程式碼將會執行。
}
```
邏輯運算子通常用於形成條件。
條件放在括號中，如果結果是 `true`，JavaScript 就會執行大括號裡的程式碼；若是 `false`，JavaScript 則會跳過整個區塊。
你經常會使用比較運算子來建立條件，讓我們來看個實例：
```javascript
let currentMoney;
let laptopPrice;
let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
// 條件為真。此區塊中的程式碼將會執行。
console.log("Getting a new laptop!");
}
```
## If..Else 語句
因為 `1000 >= 800` 評估結果為 `true`，區塊裡的程式執行，在主控台顯示「Getting a new laptop!」。
```mermaid
flowchart TD
A["🚀 程式開始"] --> B{"💰 currentMoney >= laptopPrice?"}
B -->|true| C["🎉 '買新的筆電！'"]
B -->|false| D["⏭️ 跳過程式區塊"]
C --> E["📋 繼續程式"]
D --> E
F["📊 if 陳述式結構"] --> F1["if (condition) {"]
F1 --> F2[" // 當為真時執行的程式碼"]
F2 --> F3["}"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
style F fill:#e3f2fd
```
## If..Else 陳述式
那麼，如果你希望條件是 `false` 時執行不同的程式呢？這就是 `else` 的用武之地，有點像預備方案。
`else` 語句會在條件為 false 時執行其區塊中的程式碼。它是 `if` 語句的可選部分。
`else` 陳述式讓你可以這麼說：「如果這個條件不成立，那就執行另外這件事。」
```javascript
let currentMoney;
let laptopPrice;
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
//Condition is true. Code in this block will run.
// 條件為真。該區塊中的程式碼將會執行。
console.log("Getting a new laptop!");
} else {
//Condition is false. Code in this block will run.
// 條件為假。該區塊中的程式碼將會執行。
console.log("Can't afford a new laptop, yet!");
}
```
✅ 在瀏覽器控制台中執行這段程式碼以及以下程式碼來測試你的理解。更改 `currentMoney` 和 `laptopPrice` 變數的值，觀察返回的 `console.log()`。
現在因為 `500 >= 800` 是 `false`，JavaScript 就會跳過第一個區塊，執行 `else` 裡的程式碼。你會在主控台看到「Can't afford a new laptop, yet!」。
✅ 透過在瀏覽器主控台執行這段程式與以下程式，驗證你是否理解此行為。改變 currentMoney 和 laptopPrice 變數的值，看看 `console.log()` 顯示結果如何變化。
### 🎯 **If-Else 邏輯檢視：分支路徑**
**評估你的條件邏輯理解：**
- 如果 `currentMoney` 等於剛好等於 `laptopPrice`，會發生什麼事？
- 你能想到實際情境中何時會用到 if-else 邏輯嗎？
- 你會如何擴充程式以處理多個價格區間？
```mermaid
flowchart TD
A["🔍 評估條件"] --> B{"條件為真？"}
B -->|是| C["📤 執行 IF 區塊"]
B -->|否| D["📥 執行 ELSE 區塊"]
C --> E["✅ 已採取一條路徑"]
D --> E
F["🌐 現實世界範例"] --> F1["使用者登入狀態"]
F --> F2["年齡驗證"]
F --> F3["表單驗證"]
F --> F4["遊戲狀態變化"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#e3f2fd
style F fill:#f3e5f5
```
> **重要觀念**：if-else 確保只有一條路徑被選擇。這保證你的程式對任何條件都會有回應！
## Switch 陳述式
## Switch 語句
有時你需要將一個值與多個選項做比較。雖然可以串接多個 `if..else`，但是這樣寫起來非常繁瑣。`switch` 陳述式提供了更清晰的結構來處理多個離散值。
`switch` 語句用於根據不同條件執行不同的操作。使用 `switch` 語句可以選擇執行多個程式碼區塊中的一個。
該概念類似早期電話交換機的機械切換系統——一個輸入值決定執行的特定路徑。
```javascript
switch (expression) {
case x:
// code block
// 程式碼區塊
break;
case y:
// code block
// 程式碼區塊
break;
default:
// code block
// 程式碼區塊
}
```
結構如下：
- JavaScript 先評估表達式一次
- 逐一檢查每個 `case` 是否匹配
- 找到匹配時，執行該區塊程式碼
- `break` 告訴 JavaScript 停止並離開 switch
- 若沒有任何 case 匹配，執行 `default` 區塊（如果有的話）
```javascript
// program using switch statement
let a = 2;
// 使用 switch 陳述式判斷星期幾的程式
let dayNumber = 2;
let dayName;
switch (a) {
switch (dayNumber) {
case 1:
a = "one";
dayName = "Monday";
break;
case 2:
a = "two";
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
a = "not found";
dayName = "Unknown day";
break;
}
console.log(`The value is ${a}`);
console.log(`Today is ${dayName}`);
```
在此例中，JavaScript 看到 `dayNumber` 為 `2`，找到對應的 `case 2`，將 `dayName` 設為「Tuesday」，然後跳出 switch。結果是「Today is Tuesday」被輸出到主控台。
```mermaid
flowchart TD
A["📥 switch(表達式)"] --> B["🔍 評估一次"]
B --> C{"符合案例 1？"}
C -->|是| D["📋 執行案例 1"]
C -->|否| E{"符合案例 2？"}
E -->|是| F["📋 執行案例 2"]
E -->|否| G{"符合案例 3？"}
G -->|是| H["📋 執行案例 3"]
G -->|否| I["📋 執行預設"]
D --> J["🛑 中斷"]
F --> K["🛑 中斷"]
H --> L["🛑 中斷"]
J --> M["✅ 離開 switch"]
K --> M
L --> M
I --> M
style A fill:#e3f2fd
style B fill:#fff3e0
style M fill:#e8f5e8
```
✅ 透過在瀏覽器主控台執行這段程式與以下程式，驗證你是否理解，改變變數 a 的值看看 `console.log()` 顯示結果。
✅ 在瀏覽器控制台中執行這段程式碼以及以下程式碼來測試你的理解。更改變數 `a` 的值，觀察返回的 `console.log()`。
### 🔄 **Switch 陳述式精通：多選項**
## 邏輯運算子與布林值
**測試你對 switch 的認識：**
- 忘記撰寫 `break` 會怎麼樣？
- 什麼時候你會用 `switch` 而不是多個 `if-else`？
- 為什麼 `default` 案例即使你認為已涵蓋所有可能，也很有用？
決策可能需要多個比較，可以使用邏輯運算子串聯起來以生成布林值。
```mermaid
pie title "何時使用各種決策結構"
"簡單的 if-else" : 40
"複雜的 if-else 鏈" : 25
"Switch 陳述式" : 20
"三元運算子" : 15
```
> **最佳實踐**：當比較單一變數與多個特定值時，使用 `switch`。複雜條件或區間檢查則用 `if-else`！
| 符號 | 描述 | 範例 |
| ----- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| `&&` | **邏輯 AND**：比較兩個布林表達式。僅當兩側都為 true 時返回 true | `(5 > 6) && (5 < 6 ) //一側為 false，另一側為 true。返回 false` |
| `\|\|` | **邏輯 OR**：比較兩個布林表達式。只要有一側為 true 就返回 true | `(5 > 6) \|\| (5 < 6) //一側為 false，另一側為 true。返回 true` |
| `!` | **邏輯 NOT**：返回布林表達式的相反值 | `!(5 > 6) // 5 不大於 6，但 "!" 會返回 true` |
## 邏輯運算子與布林值
## 使用邏輯運算子的條件與決策
複雜決策通常需要同時評估多個條件。正如布林代數協助數學家結合邏輯表達式，程式設計語言提供邏輯運算子來串接多個布林條件。
這些運算子讓你能將簡單的真／假評估組合成複雜的條件邏輯。
| 符號 | 描述 | 範例 |
| ------ | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `&&` | **邏輯與**：比較兩個布林表達式。只有當兩側皆為真時才回傳真 | `(5 > 3) && (5 < 10) // 兩側皆為真，回傳 true` |
| `\|\|` | **邏輯或**：比較兩個布林表達式。只要其中至少有一側為真即回傳真 | `(5 > 10) \|\| (5 < 10) // 一側為假，另一側為真，回傳 true` |
| `!` | **邏輯非**：回傳布林表達式的相反值 | `!(5 > 10) // 5 不大於 10，"!" 使結果為 true` |
這些運算子讓你可以以實用的方式結合條件：
- AND (`&&`) 表示兩條件都必須為真
- OR (`||`) 表示至少一條件為真
- NOT (`!`) 將真變假（反之亦然）
```mermaid
flowchart LR
A["🔗 邏輯運算子"] --> B["&& 且"]
A --> C["|| 或"]
A --> D["! 非"]
B --> B1["兩者皆須為真"]
B --> B2["true && true = true"]
B --> B3["true && false = false"]
C --> C1["至少一者為真"]
C --> C2["true || false = true"]
C --> C3["false || false = false"]
D --> D1["反轉值"]
D --> D2["!true = false"]
D --> D3["!false = true"]
E["🌍 真實範例"] --> E1["年齡 >= 18 && 有駕照"]
E --> E2["是週末 || 是假日"]
E --> E3["! 尚未登入"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
## 使用邏輯運算子做條件和決策
邏輯運算子可以用於在 if..else 語句中形成條件。
用更實際的範例看看邏輯運算子的運作：
```javascript
let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // 筆記型電腦價格打八折
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
//Condition is true. Code in this block will run.
// 條件為真。此區塊中的程式碼將會執行。
console.log("Getting a new laptop!");
} else {
//Condition is true. Code in this block will run.
// 條件為假。此區塊中的程式碼將會執行。
console.log("Can't afford a new laptop, yet!");
}
```
在此範例中：我們計算 20% 折扣後的價格（640），接著評估我們是否有足夠的資金支付全額或折扣價。600 沒有達到折扣價 640 閥值，因此條件評估結果是 `false`。
### 🧮 **邏輯運算子檢視：結合條件**
**測試你的邏輯運算子理解：**
- 在表達式 `A && B` 中，若 A 為假，B 會被執行嗎？
- 你能想到什麼情況需要同時用到三個運算子（&&、||、!）嗎？
- `!user.isActive` 和 `user.isActive !== true` 有何不同？
```mermaid
stateDiagram-v2
[*] --> EvaluateA: A && B
EvaluateA --> CheckB: A 為真
EvaluateA --> ReturnFalse: A 為假
CheckB --> ReturnTrue: B 為真
CheckB --> ReturnFalse: B 為假
[*] --> EvaluateC: A || B
EvaluateC --> ReturnTrue: A 為真
EvaluateC --> CheckD: A 為假
CheckD --> ReturnTrue: B 為真
CheckD --> ReturnFalse: B 為假
note right of EvaluateA
短路評估：
如果 A 為假，永遠不會檢查 B
end note
```
> **效能提示**：JavaScript 使用「短路求值」- 在 `A && B` 中，如果 A 是假，B 甚至不會被執行。善用此特性！
### 否定運算子
到目前為止，你已經看到如何使用 `if...else` 語句來創建條件邏輯。任何進入 `if` 的內容都需要評估為 true 或 false。通過使用 `!` 運算子，你可以**否定**表達式。它看起來像這樣：
有時比較容易思考「某件事不成立的狀態」。譬如不是問「使用者是否已登入？」而是問「使用者是否尚未登入？」感嘆號（`!`）運算子便可幫你反轉邏輯。
```javascript
if (!condition) {
// runs if condition is false
// 當條件為假時執行
} else {
// runs if condition is true
// 當條件為真時執行
}
```
`!` 運算子就像說「相反的...」— 若為真，`!` 使其為假，反之亦然。
### 三元運算式
`if...else` 不是表達決策邏輯的唯一方式。你還可以使用一種稱為三元運算子的方式。其語法如下：
針對簡單條件賦值，JavaScript 提供了**三元運算子**。這精簡的語法可以在一行內寫出條件表達式，在你需要根據條件賦予兩個值中其中一個時非常方便。
```javascript
let variable = condition ? <return this if true> : <return this if false>
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
```
以下是一個更具體的例子：
它的語意像個問題：「條件成立嗎？如果是，使用這個值。若否，使用那個值。」
下面是比較實際的範例：
```javascript
let firstNumber = 20;
@ -185,15 +479,11 @@ let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ 花點時間多讀幾遍這段程式碼。你理解這些運算子是如何工作的嗎？
上述程式碼表示：
✅ 花點時間多讀幾遍這段程式，了解運算子如何運作。
- 如果 `firstNumber` 大於 `secondNumber`
- 則將 `firstNumber` 賦值給 `biggestNumber`
- 否則將 `secondNumber` 賦值給 `biggestNumber`。
這行的意義在說：「`firstNumber` 是否大於 `secondNumber`？如果成立，將 `firstNumber` 指派給 `biggestNumber`，否則將 `secondNumber` 指派給 `biggestNumber`。」
三元運算式只是以下程式碼的簡潔寫法：
三元運算子是傳統 `if..else` 陳述式的簡寫：
```javascript
let biggestNumber;
@ -204,29 +494,179 @@ if (firstNumber > secondNumber) {
}
```
兩者結果相同。三元運算子比較簡潔，而傳統if-else結構在條件複雜時可能較易讀。
```mermaid
flowchart LR
A["🤔 三元運算子"] --> B["條件 ?"]
B --> C["條件為真 :"]
C --> D["條件為假"]
E["📝 傳統 If-Else"] --> F["if (條件) {"]
F --> G[" 回傳 條件為真"]
G --> H["} else {"]
H --> I[" 回傳 條件為假"]
I --> J["}"]
K["⚡ 使用時機"] --> K1["簡單賦值"]
K --> K2["簡短條件"]
K --> K3["內嵌決策"]
K --> K4["回傳語句"]
style A fill:#e3f2fd
style E fill:#fff3e0
style K fill:#e8f5e8
```
---
## 🚀 挑戰
撰寫一個程式，先使用邏輯運算子撰寫，然後使用三元運算式重寫。你更喜歡哪種語法？
創建一段程式，先用邏輯運算子撰寫，再用三元運算式改寫。你偏好哪種語法？
---
## 課後測驗
## GitHub Copilot 代理人挑戰 🚀
使用代理人模式完成以下挑戰：
**描述：** 創建一個完整的成績計算器，展現本課涵蓋的多個決策概念，包括 if-else 陳述式、switch 陳述式、邏輯運算子和三元運算式。
**提示：** 撰寫一個 JavaScript 程式，輸入學生的數值成績（0-100），並依據以下標準判定其等第：
- A：90-100
- B：80-89
- C：70-79
- D：60-69
- F：60 以下
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/12)
需求：
1. 使用 if-else 陳述式來判斷等第
2. 使用邏輯運算子檢查學生是否及格（grade >= 60）且有榮譽（grade >= 90）
3. 使用 switch 陳述式提供每個字母等級的具體反饋
4. 使用三元運算子判斷學生是否有資格參加下一門課程（grade >= 70）
5. 包含輸入驗證以確保成績介於 0 至 100 之間
## 複習與自學
使用包含邊界值如 59、60、89、90 以及無效輸入的各種分數測試您的程式。
閱讀更多有關使用者可用的運算子的資訊：[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。
在此處了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 的資訊。
瀏覽 Josh Comeau 的精彩 [運算子查詢工具](https://joshwcomeau.com/operator-lookup/)！
## 作業
## 課後小測驗
[課後小測驗](https://ff-quizzes.netlify.app/web/quiz/12)
## 複習與自學
閱讀更多關於使用者可用的各種運算子，請見 [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。
瀏覽 Josh Comeau 精彩的 [operator lookup](https://joshwcomeau.com/operator-lookup/)！
## 作業
[運算子](assignment.md)
---
## 🧠 **您的決策工具包摘要**
```mermaid
graph TD
A["🎯 JavaScript 決策"] --> B["🔍 布林邏輯"]
A --> C["📊 條件語句"]
A --> D["🔗 邏輯運算子"]
A --> E["⚡ 進階模式"]
B --> B1["true/false 值"]
B --> B2["比較運算子"]
B --> B3["真值概念"]
C --> C1["if 陳述句"]
C --> C2["if-else 鍊"]
C --> C3["switch 陳述句"]
D --> D1["&& (且)"]
D --> D2["|| (或)"]
D --> D3["! (非)"]
E --> E1["三元運算子"]
E --> E2["短路評估"]
E --> E3["複雜條件"]
F["💡 核心原則"] --> F1["清晰可讀條件"]
F --> F2["一致的比較風格"]
F --> F3["正確運算子優先權"]
F --> F4["有效率的評估順序"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
[運算子](assignment.md)
## 🚀 您的 JavaScript 決策精通時間表
### ⚡ **接下來 5 分鐘您可以做的事**
- [ ] 在瀏覽器主控台練習比較運算子
- [ ] 撰寫一個簡單的 if-else 陳述式檢查您的年齡
- [ ] 嘗試挑戰：使用三元運算子重寫 if-else
- [ ] 測試不同「真值」及「假值」的結果
### 🎯 **本小時內您可以完成的目標**
- [ ] 完成課後測驗並複習任何令人困惑的概念
- [ ] 從 GitHub Copilot 挑戰建立綜合計分計算器
- [ ] 為真實情境（如選擇穿著）建立簡單決策樹
- [ ] 練習結合多重條件與邏輯運算子
- [ ] 嘗試針對不同使用場景使用 switch 陳述式
### 📅 **您本週的邏輯精通路徑**
- [ ] 利用創意範例完成運算子作業
- [ ] 建立使用多種條件結構的迷你測驗應用程式
- [ ] 建立可檢查多重輸入條件的表單驗證器
- [ ] 練習 Josh Comeau 的 [operator lookup](https://joshwcomeau.com/operator-lookup/) 練習題
- [ ] 重構既有程式碼使之使用更合適的條件結構
- [ ] 研究短路評估與效能影響
### 🌟 **您本月的轉型目標**
- [ ] 精通複雜巢狀條件並維持程式碼可讀性
- [ ] 建立具高度決策邏輯的應用程式
- [ ] 透過改進既有專案的條件邏輯對開源做出貢獻
- [ ] 教導他人不同條件結構及使用時機
- [ ] 探索函式式程式設計方法於條件邏輯
- [ ] 建立個人條件式最佳實踐參考指南
### 🏆 **最終決策大師檢視**
**慶祝您的邏輯思考精通：**
- 您成功實作過最複雜的決策邏輯是什麼？
- 哪種條件結構對您來說最自然？為什麼？
- 學習邏輯運算子如何改變了您的問題解決方式？
- 哪種真實世界應用會因此受益於複雜的決策邏輯？
```mermaid
journey
title 你的邏輯思考演進
section 今天
布林混淆: 3: You
如果-否則理解: 4: You
運算子識別: 5: You
section 這週
複雜條件: 4: You
切換運用精通: 5: You
邏輯組合: 5: You
section 下個月
進階模式: 5: You
效能意識: 5: You
教導他人: 5: You
```
> 🧠 **您已精通數位決策藝術！** 每個互動應用程式都依賴條件邏輯來智能地回應用戶操作與變化的條件。您現在了解如何讓程式思考、評估並選擇適當的反應。這個邏輯基礎將驅動您所建立的每個動態應用程式！ 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
本文件透過 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件以其母語版本為權威依據。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

120
translations/tw/2-js-basics/3-making-decisions/assignment.md
Unescape View File

@ -1,52 +1,120 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "bf62b82567e6f9bdf4abda9ae0ccb64a",
"translation_date": "2025-08-23T22:39:31+00:00",
"original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
"translation_date": "2026-01-06T13:33:04+00:00",
"source_file": "2-js-basics/3-making-decisions/assignment.md",
"language_code": "tw"
}
-->
# 運算子
# 做決策：學生成績處理器
## 說明
## 學習目標
試著使用運算子。以下是一個可以實現的程式建議：
在此作業中，你將透過建立一個處理不同評分系統中學生成績的程式，來練習本課程的決策概念。你將使用 `if...else` 陳述式、比較運算子及邏輯運算子，判斷哪些學生通過課程。
你有一組來自兩個不同評分系統的學生。
## 挑戰說明
### 第一個評分系統
你在一所剛與另一所學校合併的學校工作。現在你需要處理來自兩種完全不同評分系統的學生成績，並判斷哪些學生合格。這是練習條件邏輯的絕佳機會！
第一個評分系統的分數範圍是1到5，其中3分及以上表示通過課程。
### 了解評分系統
### 第二個評分系統
#### 第一種評分系統（數字）
- 成績以 1-5 的數字給分
- **及格成績**：3 及以上（3、4 或 5）
- **不及格成績**：低於 3（1 或 2）
另一個評分系統的分數包括 `A, A-, B, B-, C, C-`，其中 `A` 是最高分，`C` 是最低的及格分數。
#### 第二種評分系統（字母級分）
- 成績以字母呈現：`A`、`A-`、`B`、`B-`、`C`、`C-`
- **及格成績**：`A`、`A-`、`B`、`B-`、`C`、`C-`（所有列出的字母分數都及格）
- **注意**：此系統沒有包含像 `D` 或 `F` 這樣的不及格字母
### 任務
### 你的任務
給定以下陣列 `allStudents`，表示所有學生及其分數，構造一個新的陣列 `studentsWhoPass`，包含所有通過的學生。
> TIP，使用 for 迴圈、if...else 和比較運算子：
給定以下陣列 `allStudents`，代表所有學生及其成績，請建立一個新陣列 `studentsWhoPass`，包含依各自評分系統判定及格的學生。
```javascript
let allStudents = [
'A',
'B-',
1,
4,
5,
2
]
'A', // 字母等級 - 通過
'B-', // 字母等級 - 通過
1, // 數字等級 - 不及格
4, // 數字等級 - 通過
5, // 數字等級 - 通過
2 // 數字等級 - 不及格
];
let studentsWhoPass = [];
```
## 評分標準
### 分步驟方法
1. **設置迴圈**，遍歷 `allStudents` 陣列中的每個成績
2. **檢查成績類型**（是數字還是字串？）
3. **套用適用的評分規則**：
- 對數字：判斷成績是否 >= 3
- 對字串：檢查是否為有效的及格字母級分
4. **將及格的成績** 加入 `studentsWhoPass` 陣列
### 有用的程式技巧
使用本課程介紹的 JavaScript 概念：
- **typeof 運算子**：`typeof grade === 'number'` 用來判斷是否為數字成績
- **比較運算子**：`>=` 用來比較數字成績
- **邏輯運算子**：`||` 用來檢查多個字母級分條件
- **if...else 陳述式**：用於處理不同的評分系統
- **陣列方法**：`.push()` 用來將及格成績加入新陣列
### 預期輸出
當你執行程式後，`studentsWhoPass` 應該包含：`['A', 'B-', 4, 5]`
**這些成績為何及格：**
- `'A'` 和 `'B-'` 是有效的字母級分（此系統所有字母成績均為及格）
- `4` 和 `5` 是數字成績且 >= 3
- `1` 與 `2` 因為小於 3 而不及格
## 測試你的解決方案
使用不同場景測試你的程式：
```javascript
// 使用不同的分数组合進行測試
let testGrades1 = ['A-', 3, 'C', 1, 'B'];
let testGrades2 = [5, 'A', 2, 'C-', 4];
// 你的解法應該能適用於任何有效的分数组合
```
## 進階挑戰
完成基本作業後，嘗試以下擴展：
1. **增加驗證**：檢查不合法成績（像是負數或無效字母）
2. **計算統計**：計算有多少學生及格與不及格
3. **成績轉換**：將所有成績轉換為單一數字系統（A=5，B=4，C=3，等等）
## 評分規準
| 標準 | 優異 (4) | 熟練 (3) | 進展中 (2) | 初階 (1) |
|----------|---------------|----------------|----------------|---------------|
| **功能性** | 程式能正確分辨兩種系統的所有及格成績 | 程式運作正常，少數邊緣狀況問題 | 程式部分正常，但有邏輯錯誤 | 程式錯誤嚴重或無法執行 |
| **程式架構** | 程式碼乾淨且組織良好，有適當的 if...else 邏輯 | 結構良好，使用適當的條件語句 | 架構尚可，有組織性問題 | 架構差，邏輯難以理解 |
| **概念運用** | 有效使用比較運算子、邏輯運算子與條件陳述式 | 利用課程概念良好，少許缺漏 | 部分使用課程概念，缺少重要元素 | 使用課程概念有限 |
| **問題解決能力** | 清楚理解問題並提出優雅解決方案 | 概念清楚，邏輯穩健 | 解題能力尚可，但部分混亂 | 方法不明確，無法展現理解 |
## 提交指引
1. **充分測試**你的程式，以提供的範例為主
2. **加入註解**說明邏輯，尤其是條件判斷部分
3. **確認輸出**與預期結果吻合：`['A', 'B-', 4, 5]`
4. **考慮邊緣狀況**，如空陣列或非預期資料型態
> 💡 **專業小提示**：先從簡單開始！先讓基本功能順利運作，再加入更複雜的特性。記得，目標是練習本課程的決策邏輯與工具。
| 評分項目 | 優秀表現 | 合格表現 | 需要改進 |
| -------- | ---------------------------- | ---------------------------- | ---------------------------- |
| | 提供完整的解決方案 | 提供部分解決方案 | 提供有錯誤的解決方案 |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言文件應視為權威來源。對於重要資訊，建議採用專業人工翻譯。因使用本翻譯而產生之任何誤解或錯誤詮釋，我們概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

727
translations/tw/2-js-basics/4-arrays-loops/README.md
Unescape View File

@ -1,147 +1,750 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "9029f96b0e034839c1799f4595e4bb66",
"translation_date": "2025-08-29T15:24:44+00:00",
"original_hash": "1710a50a519a6e4a1b40a5638783018d",
"translation_date": "2026-01-06T13:33:29+00:00",
"source_file": "2-js-basics/4-arrays-loops/README.md",
"language_code": "tw"
}
-->
# JavaScript 基礎：陣列與迴圈
![JavaScript 基礎 - 陣列](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.tw.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製的筆記圖
## 課前測驗
![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.tw.png)
> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
```mermaid
journey
title 你的陣列與迴圈歷險
section 陣列基礎
建立陣列: 5: 你
存取元素: 4: 你
陣列方法: 5: 你
section 迴圈精通
For 迴圈: 4: 你
While 迴圈: 5: 你
現代語法: 4: 你
section 資料處理
陣列 + 迴圈: 5: 你
實務應用: 4: 你
效能優化: 5: 你
```
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/13)
本課程涵蓋 JavaScript 的基礎知識，這是一種為網頁提供互動性的語言。在本課程中，您將學習有關陣列和迴圈的知識，這些工具用於操作數據。
[![陣列](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "陣列")
[![迴圈](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "迴圈")
> 🎥 點擊上方圖片觀看有關陣列和迴圈的影片。
你是否曾好奇網站如何追蹤購物車的商品或顯示你的好友列表？這正是陣列與迴圈派上用場的地方。陣列就像數位容器，可以容納多筆資訊；而迴圈則讓你有效率地處理這些資料，無需重複寫出相同的程式碼。
這兩個概念合起來構成了你程式處理資訊的基礎。你將學會如何從手動寫出每個步驟，進化到寫出智慧且高效率的程式碼，能快速處理數百甚至數千個項目。
在本課程結束時，你將明白如何用幾行程式碼完成複雜的資料工作。讓我們一起探索這些程式設計的必備概念。
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
> 🎥 點擊上方圖片觀看陣列與迴圈相關影片。
> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 上學習此課程！
```mermaid
mindmap
root((資料處理))
Arrays
Structure
方括號語法
從零開始的索引
動態大小
Operations
push/pop
shift/unshift
indexOf/includes
Types
數字陣列
字串陣列
混合類型
Loops
For Loops
計數迭代
陣列處理
可預測流程
While Loops
基於條件
不確定迭代數
使用者輸入
Modern Syntax
for...of
forEach
函數式方法
Applications
Data Analysis
統計
篩選
轉換
User Interfaces
列表
選單
圖庫
```
## 陣列
> 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 上學習本課程！
把陣列想像成數位檔案櫃 — 不是每個抽屜放一份文件，而是在一個結構化的容器中組織多個相關項目。用程式語言來說，陣列讓你能將多筆資訊存放在一個有序的整合包中。
## 陣列
無論你是在建立相片集、管理待辦清單，或追蹤遊戲高分，陣列都提供了資料組織的基礎。讓我們看看陣列的運作方式。
處理數據是任何程式語言中的常見任務，而當數據以結構化格式（如陣列）組織時，這項任務會變得更加簡單。使用陣列時，數據會以類似清單的結構存儲。陣列的一大優勢是您可以在一個陣列中存儲不同類型的數據。
✅ 陣列就在你身邊！你能想到一個真實生活中的陣列例子嗎，例如太陽能板陣列？
✅ 陣列無處不在！您能想到一個現實生活中的陣列例子嗎，例如太陽能板陣列？
### 建立陣列
陣列的語法是一對方括號。
建立陣列超簡單 — 用中括號就搞定！
```javascript
let myArray = [];
// 空陣列 - 就像一個空的購物車等待放入商品
const myArray = [];
```
**這裡發生了什麼？**
你剛用中括號 `[]` 建立了一個空的容器，就像一個空的圖書架，可以放你想整理的任何書籍。
這是一個空陣列，但陣列也可以在宣告時就已經填充數據。陣列中的多個值以逗號分隔。
你也可以從一開始就填入初始值：
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// 你們冰淇淋店的口味菜單
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// 使用者的個人資料資訊（混合不同類型的資料）
const userData = ["John", 25, true, "developer"];
// 你最喜歡的課程的考試成績
const scores = [95, 87, 92, 78, 85];
```
**注意事項：**
- 你可以在同一陣列中存放文字、數字甚至真假值
- 用逗號分隔每個項目 — 超簡單！
- 陣列非常適合將相關資訊放在一起
```mermaid
flowchart LR
A["📦 陣列"] --> B["建立 [ ]"]
A --> C["儲存多個項目"]
A --> D["透過索引存取"]
B --> B1["const arr = []"]
B --> B2["const arr = [1,2,3]"]
C --> C1["數字"]
C --> C2["字串"]
C --> C3["布林值"]
C --> C4["混合類型"]
D --> D1["arr[0] = 第一個"]
D --> D2["arr[1] = 第二個"]
D --> D3["arr[2] = 第三個"]
E["📊 陣列索引"] --> E1["索引 0：第一個"]
E --> E2["索引 1：第二個"]
E --> E3["索引 2：第三個"]
E --> E4["索引 n-1：最後一個"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### 陣列索引
陣列中的值會被分配一個稱為 **索引** 的唯一值，這是一個根據其與陣列開頭的距離分配的整數。在上面的例子中，字串值 "Chocolate" 的索引為 0，而 "Rocky Road" 的索引為 4。使用方括號和索引可以檢索、更改或插入陣列值。
這裡有件事一開始可能覺得奇怪：陣列的索引從 0 開始，而不是 1。這種從零開始的索引源自電腦記憶體的運作方式 — 這是從像 C 語言這樣早期程式語言開始的慣例。陣列中每個位置都有一個稱作 **索引** 的地址號。
✅ 您是否對陣列從零索引開始感到驚訝？在某些程式語言中，索引是從 1 開始的。這背後有一段有趣的歷史，您可以在 [維基百科](https://en.wikipedia.org/wiki/Zero-based_numbering) 上閱讀相關內容。
| 索引 | 值 | 說明 |
|-------|-------|-------------|
| 0 | "Chocolate" | 第一個元素 |
| 1 | "Strawberry" | 第二個元素 |
| 2 | "Vanilla" | 第三個元素 |
| 3 | "Pistachio" | 第四個元素 |
| 4 | "Rocky Road" | 第五個元素 |
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
```
✅ 陣列從索引 0 開始讓你驚訝嗎？在有些程式語言裡索引是從 1 開始。這背後有段有趣的歷史，你可以在 [維基百科](https://en.wikipedia.org/wiki/Zero-based_numbering) 詳細閱讀。
您可以利用索引來更改值，如下所示：
**存取陣列元素：**
```javascript
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// 使用中括號表示法存取單一元素
console.log(iceCreamFlavors[0]); // "巧克力" - 第一個元素
console.log(iceCreamFlavors[2]); // "香草" - 第三個元素
console.log(iceCreamFlavors[4]); // "滿滿堅果冰淇淋" - 最後一個元素
```
**拆解下面的流程：**
- **用** 中括號加索引存取元素
- **回傳** 該位置存放的值
- **從** 0 開始計數，第一個元素索引就是 0
您也可以在指定索引處插入新值，如下所示：
**修改陣列元素：**
```javascript
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
// 更改現有值
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // 「奶油胡桃」
// 在末尾新增元素
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // 「餅乾生麵團」
```
**上述程式碼說明：**
- **將** 索引為 4 的元素從 "Rocky Road" 改為 "Butter Pecan"
- **新增** 索引為 5 的元素 "Cookie Dough"
- **陣列長度** 自動擴充以容納新加入的元素
✅ 更常見的方式是使用陣列操作符，例如 array.push()，將值推入陣列。
### 陣列長度與常用方法
要知道陣列中有多少項目，可以使用 `length` 屬性。
陣列附帶內建屬性與方法，可以讓資料操作更簡單。
**取得陣列長度：**
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5
// 陣列變化時，長度會自動更新
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6
```
**重點提醒：**
- **回傳** 陣列中元素總數
- **會隨** 新增或移除元素自動更新
- **用於** 迴圈與驗證時提供動態計數
✅ 試試看！使用瀏覽器的控制台創建並操作您自己設計的陣列。
**常用陣列方法：**
## 迴圈
```javascript
const fruits = ["apple", "banana", "orange"];
// 新增元素
fruits.push("grape"); // 新增至末尾：["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry"); // 新增至開頭：["strawberry", "apple", "banana", "orange", "grape"]
迴圈允許我們執行重複或 **迭代** 的任務，這可以節省大量時間和程式碼。每次迭代的變數、值和條件都可以不同。JavaScript 中有不同類型的迴圈，它們之間有些微差異，但基本上都執行相同的功能：遍歷數據。
// 移除元素
const lastFruit = fruits.pop(); // 移除並回傳 "grape"
const firstFruit = fruits.shift(); // 移除並回傳 "strawberry"
// 查找元素
const index = fruits.indexOf("banana"); // 回傳 1（"banana" 的位置）
const hasApple = fruits.includes("apple"); // 回傳 true
```
**理解這些方法：**
- 用 `push()`（尾部）與 `unshift()`（頭部）新增元素
- 用 `pop()`（尾部）與 `shift()`（頭部）移除元素
- 用 `indexOf()` 查找元素，用 `includes()` 檢查是否存在
- 提供移除元素或索引位置等有用資訊
✅ 自己試試看！在瀏覽器的主控台建立並操作你自己的陣列。
### 🧠 **陣列基礎檢測：資料組織**
**考考你對陣列的理解：**
- 你覺得陣列為何從 0 開始計數，而不是 1？
- 如果嘗試存取不存在的索引（例如在 5 個元素的陣列中存取 `arr[100]`）會怎樣？
- 你能想到三個現實生活中會用到陣列的場景嗎？
```mermaid
stateDiagram-v2
[*] --> EmptyArray: const arr = []
EmptyArray --> WithItems: 新增元素
WithItems --> Accessing: 使用索引
Accessing --> Modifying: 修改值
Modifying --> Processing: 使用方法
WithItems --> WithItems: push(), unshift()
Processing --> Processing: pop(), shift()
note right of Accessing
零基索引
arr[0] = 第一個元素
end note
note right of Processing
內建方法
動態操作
end note
```
> **真實案例:** 陣列在程式中無處不在！社群媒體動態、購物車、相片集、播放清單歌曲 — 幕後其實都是陣列！
## 迴圈
把迴圈想像成在查爾斯‧狄更斯小說中寫字懲罰的場景，學生得反覆在石板上抄寫字句。想像你可以簡單下指令「寫這句話 100 次」，程式就能自動完成。迴圈就是為你的程式碼做到這點。
迴圈就像有位不知疲倦的助理，可以無誤重複工作。無論你需要檢查購物車每個項目、或是顯示相簿中所有照片，迴圈都能有效率地處理重複動作。
JavaScript 提供多種迴圈供選擇。讓我們逐一檢視，並了解何時使用。
```mermaid
flowchart TD
A["🔄 迴圈類型"] --> B["For 迴圈"]
A --> C["While 迴圈"]
A --> D["For...of 迴圈"]
A --> E["forEach 方法"]
B --> B1["已知的迭代次數"]
B --> B2["基於計數器"]
B --> B3["for(init; condition; increment)"]
C --> C1["未知的迭代次數"]
C --> C2["基於條件"]
C --> C3["while(condition)"]
D --> D1["現代 ES6+"]
D --> D2["陣列迭代"]
D --> D3["for(item of array)"]
E --> E1["函式風格"]
E --> E2["陣列方法"]
E --> E3["array.forEach(callback)"]
F["⏰ 何時使用"] --> F1["For: 計數、索引"]
F --> F2["While: 使用者輸入、搜尋"]
F --> F3["For...of: 簡單迭代"]
F --> F4["forEach: 函式式程式設計"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### For 迴圈
`for` 迴圈需要三個部分來進行迭代：
- `counter` 一個變數，通常初始化為一個數字，用於計算迭代次數
- `condition` 使用比較運算符的表達式，當結果為 `false` 時迴圈停止
- `iteration-expression` 在每次迭代結束時執行，通常用於更改計數器的值
`for` 迴圈就像設定計時器 — 你知道確切次數要讓事情發生。結構清楚且可預測，最適合操作陣列或需要計數的場合。
**For 迴圈結構：**
| 元件 | 目的 | 範例 |
|-----------|---------|----------|
| **初始化** | 設定起始點 | `let i = 0` |
| **條件判斷** | 何時繼續 | `i < 10` |
| **遞增** | 如何更新 | `i++` |
```javascript
// Counting up to 10
// 從0數到9
for (let i = 0; i < 10; i++) {
console.log(i);
console.log(`Count: ${i}`);
}
```
✅ 在瀏覽器控制台中運行此程式碼。當您對計數器、條件或迭代表達式進行小改動時會發生什麼？您能讓它倒著運行，創建一個倒數嗎？
// 更實用的範例：處理分數
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
console.log(`Student ${i + 1}: ${testScores[i]}%`);
}
```
**逐步說明：**
- **在一開始** 初始化計數器 `i` 為 0
- **每次** 執行前檢查條件 `i < 10`
- **當條件為真時** 執行區塊程式
- **每次迴圈後** 執行 `i++` 使 `i` 加 1
- **當條件變假時**（`i` 達 10）停止迴圈
✅ 在瀏覽器主控台執行此程式碼。修改計數器、條件或遞增表達式會怎樣？能讓它倒數運作，變成倒數計時嗎？
### 🗓️ **For 迴圈精熟檢測：可控重複**
**評估你對 for 迴圈的理解：**
- for 迴圈的三個部分是什麼？每個的功能為何？
- 如何讓迴圈從陣列尾端往前執行？
- 如果忘記遞增部分 (`i++`) 會發生什麼？
```mermaid
flowchart TD
A["🚀 開始 For 迴圈"] --> B["初始化: let i = 0"]
B --> C{"條件: i < array.length?"}
C -->|true| D["執行程式區塊"]
D --> E["遞增: i++"]
E --> C
C -->|false| F["✅ 退出迴圈"]
G["📋 常見模式"] --> G1["for(let i=0; i<n; i++)"]
G --> G2["for(let i=n-1; i>=0; i--)"]
G --> G3["for(let i=0; i<arr.length; i+=2)"]
style A fill:#e3f2fd
style F fill:#e8f5e8
style G fill:#fff3e0
```
> **迴圈智慧:** 當你知道確切重複次數時，for 迴圈是最佳選擇，也是處理陣列最常用的型態！
### While 迴圈
與 `for` 迴圈的語法不同，`while` 迴圈只需要一個條件，當條件變為 `false` 時迴圈停止。迴圈中的條件通常依賴於其他值（如計數器），並且必須在迴圈中進行管理。計數器的初始值必須在迴圈外創建，並且任何滿足條件的表達式（包括更改計數器）都必須在迴圈內維護。
`while` 迴圈就像說「持續做這件事直到...」— 你或許不知道會執行多少次，但知道何時停止。很適合問使用者輸入直到得到想要的資料，或搜尋資料直到找到目標。
**While 迴圈特色：**
- **只要條件為真** 就繼續執行
- **需手動管理** 計數器變數
- **每次迭代前** 先檢查條件
- **若條件永遠真** 有無限迴圈風險
```javascript
//Counting up to 10
// 基本計數範例
let i = 0;
while (i < 10) {
console.log(i);
i++;
console.log(`While count: ${i}`);
i++; // 別忘了遞增！
}
// 更實用的範例：處理使用者輸入
let userInput = "";
let attempts = 0;
const maxAttempts = 3;
while (userInput !== "quit" && attempts < maxAttempts) {
userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
attempts++;
}
if (attempts >= maxAttempts) {
console.log("Maximum attempts reached!");
}
```
**解讀範例：**
- **手動管理** 迴圈內的計數器 `i`
- **遞增** 計數器避免無限迴圈
- **展示** 透過使用者輸入與嘗試限制的實際用法
- **內建** 防止無限執行的安全機制
### ♾️ **While 迴圈智慧檢測：基於條件的重複**
**測試你對 while 迴圈的了解：**
- 使用 while 迴圈時主要風險是什麼？
- 何時會選擇 while 迴圈而非 for 迴圈？
- 如何避免無限迴圈？
```mermaid
flowchart LR
A["🔄 While 與 For"] --> B["While 迴圈"]
A --> C["For 迴圈"]
B --> B1["未知次數"]
B --> B2["條件驅動"]
B --> B3["使用者輸入、搜尋"]
B --> B4["⚠️ 風險：無限迴圈"]
C --> C1["已知次數"]
C --> C2["計數器驅動"]
C --> C3["陣列處理"]
C --> C4["✅ 安全：可預測結束"]
D["🛡️ 安全提示"] --> D1["務必修改條件變數"]
D --> D2["包含跳脫條件"]
D --> D3["設定最大迭代次數"]
style A fill:#e3f2fd
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
```
> **安全第一:** While 迴圈功能強大，但需謹慎管理條件。務必確保條件會最終變成假值！
### 現代迴圈替代方案
JavaScript 提供現代迴圈語法，使程式碼更易讀且降低錯誤。
**For...of 迴圈 (ES6+):**
✅ 您為什麼會選擇使用 for 迴圈而不是 while 迴圈？17K 名讀者在 StackOverflow 上有相同的疑問，其中一些意見可能會 [引起您的興趣](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
```javascript
const colors = ["red", "green", "blue", "yellow"];
// 現代方法 - 更乾淨且更安全
for (const color of colors) {
console.log(`Color: ${color}`);
}
// 與傳統的 for 迴圈比較
for (let i = 0; i < colors.length; i++) {
console.log(`Color: ${colors[i]}`);
}
```
**for...of 的主要優點：**
- **免除** 索引管理，減少 off-by-one 錯誤
- **直接取得** 陣列元素
- **提升** 程式碼可讀性，降低語法複雜度
**forEach 方法：**
```javascript
const prices = [9.99, 15.50, 22.75, 8.25];
// 使用 forEach 來實現函數式編程風格
prices.forEach((price, index) => {
console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});
// 使用箭頭函數的 forEach 來進行簡單操作
prices.forEach(price => console.log(`Price: $${price}`));
```
**關於 forEach 的重點：**
- **為陣列每個元素** 執行一段函式
- **提供** 元素值與索引作為參數
- **無法提前停止**（不同於傳統迴圈）
- **回傳 undefined**（不會產生新陣列）
✅ 為何會選擇 for 迴圈而非 while 迴圈？在 StackOverflow 上有 1.7 萬人討論這話題，部分意見你可能會覺得有趣 [觀看討論](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
### 🎨 **現代迴圈語法檢測：擁抱 ES6+**
**評估你對現代 JavaScript 的掌握度：**
- `for...of` 相較於傳統 for 迴圈有什麼優點？
- 在什麼時候你仍會偏好用傳統 for 迴圈？
- `forEach` 與 `map` 有什麼差異？
```mermaid
quadrantChart
title 迴圈選擇指南
x-axis 傳統 --> 現代
y-axis 簡單 --> 複雜
quadrant-1 現代 複雜
quadrant-2 傳統 複雜
quadrant-3 傳統 簡單
quadrant-4 現代 簡單
傳統 For: [0.2, 0.7]
While 迴圈: [0.3, 0.6]
For...of: [0.8, 0.3]
forEach: [0.9, 0.4]
陣列方法: [0.8, 0.8]
```
> **現代趨勢:** ES6+ 的 `for...of` 和 `forEach` 逐漸成為陣列遍歷首選，因為語法更簡潔且錯誤更少！
## 迴圈與陣列
陣列經常與迴圈一起使用，因為大多數條件需要依賴陣列的長度來停止迴圈，而索引也可以作為計數器的值。
陣列與迴圈結合可創造強大的資料處理能力。這對許多程式任務至關重要，從顯示清單到計算統計數據。
**傳統陣列處理：**
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
// 經典的 for 迴圈方法
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed
console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}
// 現代的 for...of 方法
for (const flavor of iceCreamFlavors) {
console.log(`Available flavor: ${flavor}`);
}
```
**理解不同方法：**
- 用陣列長度屬性決定迴圈界限
- 傳統 for 迴圈用索引存取元素
- for...of 迴圈直接取得元素
- 每個元素只處理一次
✅ 在瀏覽器的控制台中，嘗試對您自己創建的陣列進行迴圈操作。
**實務資料處理範例：**
```javascript
const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];
// 使用單一迴圈處理所有分數
for (let i = 0; i < studentGrades.length; i++) {
const grade = studentGrades[i];
total += grade;
if (grade > highestGrade) {
highestGrade = grade;
}
if (grade < lowestGrade) {
lowestGrade = grade;
}
}
const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);
```
**程式碼運作說明：**
- 初始化統計變數，用於加總與極值追蹤
- 高效地遍歷每一個成績
- 累積成績總和計算平均
- 迴圈中同時記錄最高與最低分
- 迴圈結束時計算出最終統計數據
✅ 在瀏覽器主控台用自己建立的陣列練習迴圈處理。
```mermaid
flowchart TD
A["📦 陣列資料"] --> B["🔄 迴圈處理"]
B --> C["📈 結果"]
A1["[85, 92, 78, 96, 88]"] --> A
B --> B1["計算總和"]
B --> B2["尋找最小/最大值"]
B --> B3["計算條件數量"]
B --> B4["轉換資料"]
C --> C1["平均: 87.8"]
C --> C2["最高分: 96"]
C --> C3["及格人數: 5/5"]
C --> C4["字母等級"]
D["⚡ 處理模式"] --> D1["累加（總和）"]
D --> D2["比較（最小/最大）"]
D --> D3["過濾（條件）"]
D --> D4["映射（轉換）"]
style A fill:#e3f2fd
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#f3e5f5
```
---
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成下列挑戰：
**說明:** 建立一個結合陣列與迴圈的綜合資料處理函式，分析資料集並產生有意義的洞察。
**提示:** 建立一個名為 `analyzeGrades` 的函式，接受一個學生成績物件陣列（每個物件包含姓名與分數屬性），返回一個統計物件，包含最高分、最低分、平均分、及格人數（分數 >= 70）和高於平均分的學生姓名陣列。你的解決方案中至少要使用兩種不同的迴圈類型。
在此了解更多關於 [Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰
JavaScript 提供了幾個現代陣列方法，可以取代特定任務的傳統迴圈。探索 [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)、[filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 和 [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)。
除了 for 和 while 迴圈之外，還有其他方式可以遍歷陣列，例如 [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 和 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。使用其中一種技術重寫您的陣列迴圈。
**你的挑戰：** 使用至少三種不同的陣列方法重構學生分數範例。注意隨著現代 JavaScript 語法，程式碼變得更加精簡且易讀。
## 課後小考
[課後小考](https://ff-quizzes.netlify.app/web/quiz/14)
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/14)
## 複習與自學
JavaScript 中的陣列有許多附加的方法，這些方法對數據操作非常有用。[閱讀這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 並嘗試在您創建的陣列上使用一些方法（例如 push、pop、slice 和 splice）。
JavaScript 的陣列附帶許多方法，在資料操作上非常有用。[閱讀這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 並嘗試在你自己建立的陣列上使用它們（例如 push、pop、slice 和 splice）。
## 作業
[迴圈一個陣列](assignment.md)
[陣列迴圈](assignment.md)
---
## 📊 **你的陣列與迴圈工具總結**
```mermaid
graph TD
A["🎯 陣列與迴圈精通"] --> B["📦 陣列基礎"]
A --> C["🔄 迴圈類型"]
A --> D["🔗 資料處理"]
A --> E["🎨 現代技術"]
B --> B1["建立: [ ]"]
B --> B2["索引: arr[0]"]
B --> B3["方法: push, pop"]
B --> B4["屬性: length"]
C --> C1["For: 已知迭代次數"]
C --> C2["While: 條件控制"]
C --> C3["For...of: 直接存取"]
C --> C4["forEach: 函式式"]
D --> D1["統計計算"]
D --> D2["資料轉換"]
D --> D3["篩選與搜尋"]
D --> D4["即時處理"]
E --> E1["箭頭函式"]
E --> E2["方法串接"]
E --> E3["解構賦值"]
E --> E4["模板字面量"]
F["💡 主要優點"] --> F1["高效資料處理"]
F --> F2["減少程式碼重複"]
F --> F3["可擴展的解決方案"]
F --> F4["更簡潔的語法"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
---
## 🚀 你的陣列與迴圈精通時間表
### ⚡ **接下來 5 分鐘你可以做的事**
- [ ] 建立你最喜愛電影的陣列並存取特定元素
- [ ] 寫一個從 1 數到 10 的 for 迴圈
- [ ] 嘗試課程中的現代陣列方法挑戰
- [ ] 在瀏覽器主控台練習陣列索引
### 🎯 **這一小時內你可以完成的目標**
- [ ] 完成課後小考，複習挑戰性的概念
- [ ] 建立來自 GitHub Copilot 挑戰的完整成績分析器
- [ ] 建立一個簡單的購物車，能新增和移除商品
- [ ] 練習不同迴圈類型間的轉換
- [ ] 嘗試使用 `push`、`pop`、`slice` 和 `splice` 等陣列方法
### 📅 **你這週的資料處理旅程**
- [ ] 完成「陣列迴圈」作業並加入創意改良
- [ ] 使用陣列與迴圈建立待辦事項清單應用程式
- [ ] 建立一個簡單的數據統計計算器
- [ ] 練習使用 [MDN 陣列方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [ ] 建立圖片庫或音樂播放清單介面
- [ ] 探索使用 `map`、`filter` 和 `reduce` 的函式式程式設計
### 🌟 **你這月的變革**
- [ ] 精通高級陣列操作與效能優化
- [ ] 建立完整的資料視覺化儀表板
- [ ] 參與開源數據處理專案
- [ ] 用實際範例教導他人陣列與迴圈
- [ ] 建立可重用的個人資料處理函式庫
- [ ] 探索以陣列建構的演算法與資料結構
### 🏆 **終極資料處理冠軍自我檢測**
**慶祝你對陣列與迴圈的精通：**
- 你學到的陣列操作中，哪項對真實世界應用最有用？
- 哪種迴圈類型你覺得最自然？為什麼？
- 理解陣列與迴圈後，你對組織資料的思考有何改變？
- 你接下來想挑戰什麼複雜的資料處理任務？
```mermaid
journey
title 你的資料處理演進
section 今天
陣列困惑: 3: 你
迴圈基礎: 4: 你
索引理解: 5: 你
section 本週
方法精通: 4: 你
高效處理: 5: 你
現代語法: 5: 你
section 下個月
複雜演算法: 5: 你
效能優化: 5: 你
教導他人: 5: 你
```
> 📦 **你已經解鎖資料組織與處理的力量！** 陣列與迴圈是你將建立的幾乎所有應用程式的基石。從簡單清單到複雜資料分析，你現在擁有有效且優雅處理資訊的工具。每個動態網站、行動應用和以資料為驅動的應用程式都依賴這些基本概念。歡迎來到可擴展資料處理的世界！🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不精確之處。原文文件的母語版本應被視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤用承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

119
translations/tw/2-js-basics/4-arrays-loops/assignment.md
Unescape View File

@ -1,25 +1,124 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "8b2381170bd0fd2870f5889bb8620f02",
"translation_date": "2025-08-23T22:45:31+00:00",
"original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
"translation_date": "2026-01-06T13:35:54+00:00",
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
"language_code": "tw"
}
-->
# 遍歷陣列
# 陣列與迴圈作業
## 說明
## 指示
建立一個程式，列出1到20之間每隔3個數字的數字，並將其輸出到控制台。
完成以下練習以練習使用陣列與迴圈。每個練習都建立在課程概念之上，並鼓勵您運用不同的迴圈類型與陣列方法。
> TIP: 使用 for 迴圈並修改迭代表達式
### 練習 1：數字模式產生器
建立一個程式，列出介於 1 到 20 之間每隔 3 個的數字並印出到主控台。
**需求：**
- 使用帶有自訂增量的 `for` 迴圈
- 以對使用者友善的格式顯示數字
- 加入描述性註解解釋您的邏輯
**預期輸出：**
```
3, 6, 9, 12, 15, 18
```
> **提示：** 修改 for 迴圈中的迭代表達式以跳過數字。
### 練習 2：陣列分析
建立一個包含至少 8 個不同數字的陣列，並撰寫函式來分析資料。
**需求：**
- 建立一個名為 `numbers`，包含至少 8 個值的陣列
- 撰寫 `findMaximum()` 函式回傳最大數字
- 撰寫 `findMinimum()` 函式回傳最小數字
- 撰寫 `calculateSum()` 函式回傳所有數字的總和
- 測試每個函式並顯示結果
**加分挑戰：** 建立一個函式找出陣列中第二大的數字。
### 練習 3：字串陣列處理
建立一個您最喜歡的電影／書籍／歌曲的陣列，並練習不同的迴圈類型。
**需求：**
- 建立一個至少包含 5 個字串值的陣列
- 使用傳統 `for` 迴圈以編號（1. 項目名稱）方式顯示項目
- 使用 `for...of` 迴圈以大寫顯示項目
- 使用 `forEach()` 方法計算並顯示字元總數
**範例輸出：**
```
Traditional for loop:
1. The Matrix
2. Inception
3. Interstellar
For...of loop (uppercase):
THE MATRIX
INCEPTION
INTERSTELLAR
Character count:
Total characters across all titles: 42
```
### 練習 4：資料篩選（進階）
建立一個程式處理代表學生的物件陣列。
**需求：**
- 建立至少包含 5 個學生物件的陣列，物件屬性包含：`name`、`age`、`grade`
- 使用迴圈找出年齡 18 歲以上的學生
- 計算所有學生的平均成績
- 建立一個新陣列，只包含成績超過 85 的學生
**範例結構：**
```javascript
const students = [
{ name: "Alice", age: 17, grade: 92 },
{ name: "Bob", age: 18, grade: 84 },
// 添加更多學生...
];
```
## 測試您的程式碼
透過以下方式測試您的程式：
1. 在瀏覽器主控台執行每個練習
2. 驗證輸出是否符合預期結果
3. 使用不同資料集進行測試
4. 確認您的程式能處理邊界案例（空陣列、單一元素）
## 繳交指南
請於繳交時包含：
- 每個練習具有良好註解的 JavaScript 程式碼
- 顯示程式執行的截圖或文字輸出
- 簡短說明您為每個任務選擇的迴圈類型及理由
## 評分標準
| 評分標準 | 表現優異 | 表現尚可 | 需要改進 |
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
| | 程式運行正確且有註解 | 程式沒有註解 | 程式不完整或有錯誤 |
| 標準 | 優秀（3 分） | 尚可（2 分） | 需改進（1 分） |
| -------------- | ---------------------------------- | ------------------------------ | ------------------------------- |
| **功能** | 所有練習正確完成且包含加分挑戰 | 所有必需練習皆正確執行 | 部分練習未完成或含有錯誤 |
| **程式碼品質** | 程式碼整潔、有組織且變數名稱具描述性 | 程式碼可運作，但可更清晰 | 程式碼雜亂或難以理解 |
| **註解** | 詳盡說明邏輯與決策 | 具基本註解 | 註解極少或沒有 |
| **迴圈使用** | 適當展現不同迴圈類型的理解 | 正確使用迴圈但種類有限 | 迴圈使用錯誤或效率低 |
| **測試** | 有多種情境完整測試的證據 | 展示基本測試 | 幾乎沒有測試證據 |
## 反思問題
完成練習後請思考：
1. 哪種類型的迴圈使用起來最自然？為什麼？
2. 在操作陣列時遇到了哪些挑戰？
3. 這些技能如何應用於實際的網頁開發專案中？
4. 若要優化程式效能，您會如何做出不同的設計？
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言文件應視為權威版本。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

547
translations/tw/3-terrarium/1-intro-to-html/README.md
Unescape View File

@ -1,84 +1,168 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "89f7f9f800ce7c9f149e98baaae8491a",
"translation_date": "2025-08-29T15:25:07+00:00",
"original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
"translation_date": "2026-01-06T14:11:43+00:00",
"source_file": "3-terrarium/1-intro-to-html/README.md",
"language_code": "tw"
}
-->
# Terrarium 專案第一部分：HTML 入門
![HTML 入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.tw.png)
> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/15)
```mermaid
journey
title 你的 HTML 學習旅程
section 基礎
建立 HTML 檔案: 3: Student
新增 DOCTYPE: 4: Student
結構化文件: 5: Student
section 內容
新增元資料: 4: Student
插入圖片: 5: Student
組織佈局: 5: Student
section 語義
使用適當標籤: 4: Student
強化無障礙功能: 5: Student
建造生態瓶: 5: Student
```
![HTML 入門](../../../../translated_images/webdev101-html.4389c2067af68e98.tw.png)
> 速寫筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
HTML，也就是超文字標記語言，是你曾經造訪過的每個網站的基礎。想像 HTML 是賦予網頁結構的骨架——它定義了內容放置的位置、組織方式，以及每個部分的意義。CSS 稍後會用色彩和版面來「裝扮」你的 HTML，JavaScript 會帶來互動效果，但 HTML 提供了讓一切成為可能的基本結構。
在本課程中，你將為虛擬的玻璃容器介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的作品。你會學習如何使用語意元素組織內容、操作圖片，並為互動式網頁應用奠定基礎。
完成本課程後，你將擁有一個運作中的 HTML 頁面，顯示以有組織欄位排放的植物圖片，準備在下一課進行樣式設定。別擔心剛開始看起來很基礎——這正是 HTML 在 CSS 加入視覺修飾前應該做的事。
```mermaid
mindmap
root((HTML 基礎))
Structure
DOCTYPE 聲明
HTML 元素
Head 區段
Body 內容
Elements
標籤與屬性
自我封閉標籤
巢狀元素
區塊與行內
Content
文字元素
圖像
容器 (div)
清單
Semantics
有意義的標籤
無障礙設計
螢幕閱讀器
SEO 效益
Best Practices
適當巢狀
有效標記
描述性的替代文字
有組織的結構
```
## 課前小測驗
> 觀看影片
[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **觀看學習**：看看這段有用的影片概述
>
> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
### 簡介
HTML（超文本標記語言）是網頁的「骨架」。如果說 CSS 是為 HTML「穿衣服」，JavaScript 是讓它「活起來」，那麼 HTML 就是網頁應用的「身體」。HTML 的語法甚至反映了這個概念，因為它包含了「head」、「body」和「footer」標籤。
> [![HTML 基礎影片](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
在這節課中，我們將使用 HTML 來設計虛擬玻璃花園的界面「骨架」。界面將包含一個標題和三個欄位：左右兩側欄位放置可拖曳的植物，中間區域則是玻璃花園的主要部分。完成這節課後，您將能看到植物出現在欄位中，但界面可能看起來有些奇怪；別擔心，下一節課我們會使用 CSS 為界面添加樣式，使其更美觀。
## 設置你的專案
### 任務
在深入 HTML 程式碼之前，先為你的玻璃容器專案建立一個適當的工作空間。從一開始就建立有組織的檔案結構，是一個非常重要的習慣，會在你的網頁開發旅程中幫助你很多。
在您的電腦上建立一個名為「terrarium」的資料夾，並在其中建立一個名為「index.html」的檔案。您可以在 Visual Studio Code 中完成此操作：打開新的 VS Code 視窗，點擊「開啟資料夾」，導航到新資料夾，然後在 Explorer 面板中點擊小型「檔案」按鈕以建立新檔案：
### 任務：建立你的專案結構
![VS Code 中的 Explorer](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.tw.png)
你將為玻璃容器專案創建一個專用的資料夾，並加入第一個 HTML 檔案。以下是兩種做法：
或者
**選項一：使用 Visual Studio Code**
1. 開啟 Visual Studio Code
2. 點選「檔案」→「開啟資料夾」或使用 `Ctrl+K, Ctrl+O`（Windows/Linux）或 `Cmd+K, Cmd+O`（Mac）
3. 建立新資料夾，命名為 `terrarium` 並選取它
4. 在檔案總管窗格點擊「新增檔案」圖示
5. 檔名命名為 `index.html`
使用以下指令在 Git Bash 中完成：
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` 或 `nano index.html`
![VS Code 檔案總管示範建立新檔案](../../../../translated_images/vs-code-index.e2986cf919471eb9.tw.png)
> index.html 檔案告訴瀏覽器它是資料夾中的預設檔案；例如，`https://anysite.com/test` 可能是由包含名為 `test` 的資料夾和其中的 `index.html` 檔案構建的；URL 中不一定會顯示 `index.html`。
---
## DocType 和 html 標籤
HTML 檔案的第一行是它的 DocType。這行需要放在檔案的最頂端，雖然看起來有些奇怪，但它告訴舊版瀏覽器需要以標準模式渲染頁面，遵循當前的 HTML 規範。
> 提示：在 VS Code 中，您可以將滑鼠懸停在標籤上，查看 MDN 參考指南中關於其用途的資訊。
**選項二：使用終端機指令**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
第二行應該是 `<html>` 標籤的開啟標籤，接著是它的關閉標籤 `</html>`。這些標籤是界面的根元素。
**這些指令完成了以下動作：**
- **建立** 新目錄 `terrarium` 作為專案資料夾
- **切換** 進入 terrarium 目錄
- **建立** 空白的 `index.html` 檔案
- **使用** Visual Studio Code 開啟該檔案以便編輯
> 💡 **專家小提示**：檔名 `index.html` 在網頁開發中很特別。瀏覽器拜訪網站時會自動尋找 `index.html` 當作預設顯示頁面。這表示像 `https://mysite.com/projects/` 這類 URL 不用特別指定檔名，就會載入 projects 資料夾裡的 `index.html`。
## 理解 HTML 文件結構
每份 HTML 文件都有瀏覽器需要理解且正確顯示的特定結構。把這結構當作正式信件——有特定順序的必要元素，幫助收件者（這裡是瀏覽器）正確處理內容。
```mermaid
flowchart TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
C --> D["<title>"]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> 標題"]
G --> I["<div> 容器"]
G --> J["<img> 圖片"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
先從加入每份 HTML 文件都需要的基本架構開始。
### 任務
### DOCTYPE 宣告和根元素
在您的 `index.html` 檔案頂部添加以下內容：
任何 HTML 檔案的前兩行是文件向瀏覽器的「介紹」：
```HTML
```html
<!DOCTYPE html>
<html></html>
```
✅ DocType 的設定可以通過查詢字串來確定不同的模式：[Quirks Mode 和 Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。這些模式曾用於支援非常舊的瀏覽器（如 Netscape Navigator 4 和 Internet Explorer 5），但現在通常不再使用。您可以使用標準的 DocType 聲明。
**這段程式碼的功能解析：**
- **宣告** 文件類型為 HTML5，使用 `<!DOCTYPE html>`
- **建立** 包含所有頁面內容的根 `<html>` 元素
- **確立** 現代網路標準，確保瀏覽器正確呈現
- **保證** 在不同瀏覽器和設備下呈現一致
---
> 💡 **VS Code 小技巧**：在 VS Code 中將滑鼠停留在任何 HTML 標籤上，可看到 MDN Web Docs 的有用資訊，包括用法範例和瀏覽器相容性說明。
> 📚 **進階知識**：DOCTYPE 宣告可避免瀏覽器進入「怪異模式」，該模式用於支援非常舊的網站。現代網頁開發採用簡單的 `<!DOCTYPE html>`，確保[標準相容的渲染](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。
### 🔄 **學習檢視點**
**暫停並思考**：繼續前，確保你理解以下要點：
- ✅ 為何每份 HTML 文件都需 DOCTYPE 宣告
- ✅ `<html>` 根元素包含什麼
- ✅ 這種結構如何幫助瀏覽器正確渲染頁面
**快速自我測驗**：你能用自己的話說明「標準相容渲染」是什麼意思嗎？
## 文件的「head」
## 添加重要的文件元資料
HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元數據](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。在我們的例子中，我們告訴網頁伺服器以下四件事：
HTML 文件的 `<head>` 區段包含瀏覽器與搜尋引擎需要但訪客不直接看見的重要資訊。想像它是幕後資訊，幫助你的網頁正常運作，並在不同設備和平台上正確顯示。
- 網頁的標題
- 頁面元數據，包括：
- 字符集，告訴頁面使用的字符編碼
- 瀏覽器資訊，包括 `x-ua-compatible`，指示支援 IE=edge 瀏覽器
- 關於視窗加載時應如何行為的資訊。將視窗的初始縮放設置為 1 控制頁面首次加載時的縮放級別。
這些元資料告訴瀏覽器如何顯示頁面、使用哪種字元編碼，以及如何因應不同螢幕尺寸——這些都是打造專業且可及性良好的網頁必備條件。
### 任務
### 任務：加入文件的 head
在開啟和關閉的 `<html>` 標籤之間添加一個「head」區塊。
將這段 `<head>` 內容插入你的 `<html>` 開始及結束標籤之間：
```html
<head>
@ -89,17 +173,28 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
</head>
```
✅ 如果您像這樣設置視窗元標籤：`<meta name="viewport" content="width=600">`，會發生什麼？閱讀更多關於[視窗](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)的資訊。
**拆解各元素作用：**
- **設定** 出現在瀏覽器分頁和搜尋結果的頁面標題
- **指定** 使用 UTF-8 字元編碼，確保全球文字正確顯示
- **保證** 與現代版本 Internet Explorer 兼容
- **配置** 螢幕視窗大小與設備寬度同步，支援響應式設計
- **控制** 初始縮放比例，內容自然呈現大小
---
> 🤔 **思考看看**：如果你將 viewport meta 標籤設為 `<meta name="viewport" content="width=600">` 會怎樣？這會強制頁面寬度永遠是 600 像素，破壞響應式設計！進一步了解[正確的 viewport 設定](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)。
## 建立文件主體內容
`<body>` 元素包含網頁的所有可見內容——使用者將看見並互動的所有東西。與提供瀏覽器指令的 `<head>` 不同，`<body>` 則包含實際內容：文字、圖片、按鈕，以及建構使用者介面的其他元素。
## 文件的 `body`
讓我們加入主體結構，並了解 HTML 標籤如何協作產生有意義的內容。
### HTML 標籤
### 理解 HTML 標籤結構
在 HTML 中，您可以在 .html 檔案中添加標籤以創建網頁元素。每個標籤通常有開啟和關閉標籤，例如 `<p>hello</p>` 表示一段文字。通過在 `<html>` 標籤對內添加一組 `<body>` 標籤來創建界面的主體；您的標記現在看起來像這樣：
HTML 使用配對標籤來定義元素。大多數標籤有一個開啟標籤，如 `<p>`，及一個關閉標籤，如 `</p>`，中間包含內容：`<p>Hello, world!</p>`。這建立了一個包含「Hello, world!」文字的段落元素。
### 任務
### 任務：加入 body 元素
更新你的 HTML 檔案，加入 `<body>` 元素：
```html
<!DOCTYPE html>
@ -114,100 +209,179 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
</html>
```
現在，您可以開始構建頁面。通常，您使用 `<div>` 標籤來創建頁面中的各個元素。我們將創建一系列 `<div>` 元素來包含圖片。
**完整結構提供以下功能：**
- **建立** 基本的 HTML5 文件架構
- **包含** 重要元資料，保證瀏覽器正確渲染
- **創建** 空白主體等待顯示內容
- **遵循** 現代網頁開發最佳實務
現在你準備添加玻璃容器的可見元素。我們會使用 `<div>` 元素作為容器，組織不同的內容區塊，以及 `<img>` 元素來顯示植物圖片。
### 圖片
### 操作圖片與版面容器
一個不需要關閉標籤的 HTML 標籤是 `<img>`，因為它有一個 `src` 元素，包含頁面渲染項目所需的所有資訊。
圖片在 HTML 中很特別，因為它們用「自我封閉」的標籤。與像 `<p></p>` 這種包覆內容的元素不同，`<img>` 標籤內使用屬性（例如 `src` 指定圖片路徑，`alt` 提供輔助功能）包含所有必要資訊。
在您的應用中建立一個名為 `images` 的資料夾，並將 [source code folder](../../../../3-terrarium/solution/images) 中的所有圖片添加到其中；（有 14 張植物圖片）。
在把圖片加入 HTML 前，你需要先建立資料夾並整理專案檔案。
### 任務
**首先設定你的圖片：**
1. 在 terrarium 專案資料夾內建立 `images` 資料夾
2. 從[解答資料夾](../../../../3-terrarium/solution/images)下載植物圖片（共14張）
3. 複製所有植物圖片到新建的 `images` 資料夾中
在 `<body></body>` 標籤之間的兩個欄位中添加這些植物圖片：
### 任務：建立植物展示版面
現在在 `<body></body>` 標籤間加入以兩欄組織的植物圖片：
```html
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc43.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.tw.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.tw.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.tw.png" />
</div>
</div>
</div>
```
> 注意：Span 和 Div 的區別。Div 被認為是「區塊」元素，而 Span 是「內聯」元素。如果您將這些 Div 轉換為 Span，會發生什麼？
使用這些標記，植物現在會顯示在螢幕上。它看起來很糟糕，因為尚未使用 CSS 進行樣式設置，我們會在下一節課中完成。
每張圖片都有替代文字，即使您無法看到或渲染圖片，替代文字也會顯示。這是一個重要的屬性，用於提高可訪問性。在未來的課程中，您將了解更多關於可訪問性的內容；目前請記住，alt 屬性為圖片提供了替代資訊，當使用者因某些原因無法查看圖片時（例如網速慢、src 屬性錯誤或使用者使用螢幕閱讀器）。
✅ 您是否注意到每張圖片都有相同的 alt 標籤？這是好的做法嗎？為什麼？您能改進這段程式碼嗎？
---
## 語義化標記
**這段程式碼的逐步解釋：**
- **建立** 一個 `id="page"` 的主要頁面容器，包含所有內容
- **設置** 兩個欄位容器：`left-container` 和 `right-container`
- **將** 7 株植物在左欄，7 株植物在右欄排列
- **每張** 植物圖片用 `plant-holder` div 包裹，方便個別定位
- **採用** 一致的 class 名稱，方便下一課搭配 CSS 美化
- **每株** 植物圖片有獨特 ID，以便稍後用 JavaScript 操控
- **指定** 正確的檔案路徑指向 images 目錄
> 🤔 **思考看看**：目前所有圖片的 alt 文字都寫成「plant」。這對於輔助使用者不是很好。螢幕閱讀器會連續重複「plant」14次，沒辦法知道每張圖實際是什麼植物。你能想到更具描述性的 alt 文字，改善可及性嗎？
> 📝 **HTML 元素類型**：`<div>` 為「區塊元素」，會佔滿整行寬度，`<span>` 為「行內元素」，只佔必要寬度。如果你將所有 `<div>` 改成 `<span>`，你覺得會發生什麼狀況？
### 🔄 **學習檢視點**
**結構理解**：花點時間回顧你的 HTML 結構：
- ✅ 能否找出佈局中的主要容器？
- ✅ 明白為何每張圖片有唯一 ID 嗎？
- ✅ 如何描述 `plant-holder` div 的用途？
**視覺檢查**：在瀏覽器開啟你的 HTML 檔案，你應該會看到：
- 一份基礎的植物圖片列表
- 兩欄呈現的圖片排列
- 簡單、未經樣式設定的版面
**記住**：在 CSS 加入前，HTML 本該就是這樣普通的外觀！
加入這些標記後，植物會出現在畫面上，雖然尚未美觀完成——這就是下一課的 CSS 會負責的。此刻，你已有穩固的 HTML 基礎，可有效組織內容並遵循可及性最佳實踐。
## 使用語意 HTML 促進可及性
語意 HTML 意味著依據意義和用途選擇 HTML 元素，而非僅依外觀。使用語意標記，你是在向瀏覽器、搜尋引擎和協助技術（如螢幕閱讀器）傳達內容的結構與意義。
```mermaid
flowchart TD
A[需要新增內容嗎？] --> B{什麼類型？}
B -->|主標題| C["<h1>"]
B -->|副標題| D["<h2>, <h3>, 等等"]
B -->|段落| E["<p>"]
B -->|清單| F["<ul>, <ol>"]
B -->|導覽| G["<nav>"]
B -->|文章| H["<article>"]
B -->|區段| I["<section>"]
B -->|一般容器| J["<div>"]
C --> K[螢幕閱讀器會宣告為主要標題]
D --> L[建立正確的標題結構]
E --> M[提供適當的文字間距]
F --> N[啟用清單導航快捷方式]
G --> O[標識導覽地標]
H --> P[標示獨立內容]
I --> Q[群組相關內容]
J --> R[僅在沒有語意標籤適用時使用]
style C fill:#4caf50
style D fill:#4caf50
style E fill:#4caf50
style F fill:#4caf50
style G fill:#2196f3
style H fill:#2196f3
style I fill:#2196f3
style J fill:#ff9800
```
此方法讓你的網站對殘障使用者更友善，並幫助搜尋引擎更好地理解內容。這是現代網頁開發重要原則，能為所有人創造更佳體驗。
通常，在撰寫 HTML 時最好使用有意義的「語義化」標記。這意味著您使用 HTML 標籤來表示它們設計的數據或交互類型。例如，頁面上的主要標題文字應使用 `<h1>` 標籤。
### 加入語意頁面標題
在開啟的 `<body>` 標籤下方添加以下內容：
讓我們為玻璃容器頁加入適當的標題。將以下行插入在 `<body>` 開始標籤後面：
```html
<h1>My Terrarium</h1>
```
使用語義化標記，例如將標題設為 `<h1>`，將無序列表渲染為 `<ul>`，有助於螢幕閱讀器導航頁面。通常，按鈕應寫為 `<button>`，列表應寫為 `<li>`。雖然可以使用特別樣式的 `<span>` 元素和點擊處理器來模擬按鈕，但對於殘障使用者來說，使用技術來確定頁面上的按鈕位置並與之交互更方便。如果元素顯示為按鈕，這樣的設計更友好。因此，盡量使用語義化標記。
**為何語意標記重要：**
- **協助** 螢幕閱讀器導航與理解頁面結構
- **提升** 搜尋引擎優化（SEO），明確內容層級
- **增強** 視障與認知差異使用者的可及性
- **創造** 跨設備與平台的良好使用體驗
- **遵循** 網頁標準與專業開發最佳實務
**語意與非語意元素比較：**
✅ 查看螢幕閱讀器[如何與網頁交互](https://www.youtube.com/watch?v=OUDV1gqs9GA)。您能理解為什麼非語義化標記可能會讓使用者感到沮喪嗎？
| 用途 | ✅ 語意選擇 | ❌ 非語意選擇 |
|---------|-------------------|------------------------|
| 主要標題 | `<h1>標題</h1>` | `<div class="big-text">標題</div>` |
| 導航 | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
| 按鈕 | `<button>點擊我</button>` | `<span onclick="...">點擊我</span>` |
| 文章內容 | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
## 玻璃花園
> 🎥 **示範影片**：觀看 [螢幕閱讀器如何與網頁互動](https://www.youtube.com/watch?v=OUDV1gqs9GA)，理解為何語意標記對可及性至關重要。留意正確 HTML 結構如何協助使用者高效導航。
界面的最後部分涉及創建將被樣式化為玻璃花園的標記。
## 建立玻璃容器結構
### 任務：
現在讓我們加入玻璃容器本身的 HTML 結構——這是未來放置植物的玻璃盒子。這部分展示了重要概念：HTML 提供結構，但沒有 CSS 樣式前，這些元素不會有可視效果。
在最後的 `</div>` 標籤上方添加以下標記：
玻璃容器標記使用描述性類別名稱，讓下一課的 CSS 美化更直覺且易維護。
### 任務：加入玻璃容器結構
將此標記插入最後一個 `</div>` 標籤之前（頁面容器的關閉標籤前）：
```html
<div id="terrarium">
@ -221,29 +395,200 @@ HTML 文件的「head」區域包含關於網頁的重要資訊，也稱為[元
</div>
```
✅ 即使您將這些標記添加到螢幕上，您仍然看不到任何渲染。為什麼？
**理解這個玻璃容器結構：**
- **建立** 一個主玻璃容器，具有獨特的 ID 以便樣式設定
- **定義** 每個視覺元件的獨立元素（頂部、牆壁、泥土、底部）
- **包含** 用於玻璃反射效果的巢狀元素（有光澤的元素）
- **使用** 清楚表明每個元素用途的描述性類名
- **準備** 用於 CSS 樣式以創建玻璃容器外觀的結構
> 🤔 **注意到什麼了嗎？**：即使你已經新增了這些標記，你在頁面上並不會看到任何新東西！這完美說明了 HTML 提供結構，而 CSS 提供外觀。這些 `<div>` 元素存在，但尚未有任何視覺樣式——這會在下一課中加入！
```mermaid
flowchart TD
A[HTML 文件] --> B[文件頭]
A --> C[文件主體]
B --> D[標題元素]
B --> E[Meta 字符集]
B --> F[Meta 視窗設定]
C --> G[主要標題]
C --> H[頁面容器]
H --> I[左邊容器有 7 盆植物]
H --> J[右邊容器有 7 盆植物]
H --> K[玻璃容器結構]
style A fill:#e1f5fe
style B fill:#fff3e0
style C fill:#e8f5e8
style H fill:#f3e5f5
```
### 🔄 **教學檢查點**
**HTML 結構掌握**：在繼續之前，請確保你能：
- ✅ 解釋 HTML 結構和視覺外觀之間的差異
- ✅ 識別語義 versus 非語義的 HTML 元素
- ✅ 描述適當標記如何有利於無障礙設計
- ✅ 辨識完整的文件樹結構
**測試你的理解**：嘗試在瀏覽器中關閉 JavaScript 並移除 CSS 後開啟你的 HTML 檔案。這可讓你看到你建立的純粹語義結構！
---
## 🚀挑戰
## GitHub Copilot Agent 挑戰
使用 Agent 模式完成以下挑戰：
**描述：** 創建一個語義化的 HTML 結構，用於加入玻璃容器專案的植物護理指南區塊。
**提示：** 建立一個語義化的 HTML 區段，其中包括主要標題「Plant Care Guide」，三個子區段，分別有標題「Watering」、「Light Requirements」和「Soil Care」，每個子區段包含一段關於植物護理的資訊。使用適當語義 HTML 標籤如 `<section>`, `<h2>`, `<h3>`, 和 `<p>` 來正確組織內容。
在這裡了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 。
## 探索 HTML 歷史挑戰
HTML 中有一些有趣的「舊」標籤，雖然不應在標記中使用已棄用的標籤，例如[這些標籤](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)，但您可以嘗試使用舊的 `<marquee>` 標籤讓 h1 標題水平滾動。（如果您嘗試了，記得之後移除它）
**了解網路演進**
HTML 自 1990 年 Tim Berners-Lee 在 CERN 創造第一個瀏覽器以來已經有重大演變。一些舊標籤如 `<marquee>` 因不符合現代無障礙標準及響應式設計原則而被淘汰。
**嘗試實驗：**
1. 臨時使用 `<marquee>` 標籤包裹你的 `<h1>` 標題：`<marquee><h1>My Terrarium</h1></marquee>`
2. 在瀏覽器中打開頁面，觀察滾動效果
3. 思考此標籤被淘汰的原因（提示：用戶體驗與無障礙設計）
4. 移除 `<marquee>` 標籤，回復使用語義標記
**反思問題：**
- 滾動標題會如何影響視覺障礙或動態敏感的使用者？
- 哪些現代 CSS 技術可更無障礙地實現類似視覺效果？
- 為何使用當代網路標準比使用淘汰標籤更重要？
進一步探索 [過時和淘汰的 HTML 元素](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)，了解網路標準如何演進以提升使用者體驗。
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/16)
## 回顧與自學
## 複習與自主學習
**深化你的 HTML 知識**
HTML 已是網路基礎超過 30 年，從簡單的文件標記語言演進為構建互動應用的複雜平台。了解其演變能幫助你欣賞現代網路標準並做出更佳開發決策。
**推薦學習路徑：**
1. **HTML 歷史與演進**
- 研究從 HTML 1.0 到 HTML5 的時間軸
- 探討某些標籤被淘汰的原因（無障礙性、行動友善、可維護性）
- 調查新興的 HTML 功能與提案
2. **語義 HTML 深入**
- 研讀完整的 [HTML5 語義元素列表](https://developer.mozilla.org/docs/Web/HTML/Element)
- 練習何時使用 `<article>`、`<section>`、`<aside>` 和 `<main>`
- 了解提升無障礙設計的 ARIA 屬性
3. **現代網頁開發**
- 探索 [Microsoft Learn 上的響應式網站建置](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)
- 理解 HTML 如何與 CSS 與 JavaScript 整合
- 學習網頁效能與 SEO 最佳實踐
**反思問題：**
- 你發現了哪些被淘汰的 HTML 標籤？它們為何被移除？
- 有哪些新 HTML 功能正在為未來版本提出？
- 語義 HTML 如何促進網路無障礙及 SEO？
### ⚡ **接下來 5 分鐘可做事**
- [ ] 開啟 DevTools (F12)，檢視你最喜歡網站的 HTML 結構
- [ ] 建立一個簡單 HTML 檔案，包含基本標籤：`<h1>`, `<p>`, 和 `<img>`
- [ ] 使用 W3C HTML Validator 線上驗證 HTML
- [ ] 試著在 HTML 中加入註解 `<!-- comment -->`
### 🎯 **這一小時能達成的事**
- [ ] 完成課後測驗並複習語義 HTML 概念
- [ ] 使用正確的 HTML 結構建立一個關於你的簡易網頁
- [ ] 試驗不同標題等級及文字格式化標籤
- [ ] 新增圖片和連結，練習多媒體整合
- [ ] 研究尚未嘗試過的 HTML5 功能
### 📅 **為期一週的 HTML 旅程**
- [ ] 完成具語義標記的玻璃容器專案任務
- [ ] 建立使用 ARIA 標籤和角色的無障礙網頁
- [ ] 練習建立各種輸入類型的表單
- [ ] 探索 HTML5 API，例如 localStorage 或地理位置
- [ ] 研習響應式 HTML 模式及行動優先設計
- [ ] 檢視其他開發者的 HTML 代碼，學習最佳實踐
### 🌟 **為期一個月的網頁基礎**
- [ ] 建立展示 HTML 精通度的作品集網站
- [ ] 學習使用 Handlebars 等框架做 HTML 範本
- [ ] 透過改善 HTML 文件貢獻開源專案
- [ ] 精通進階 HTML 概念如自訂元素
- [ ] 將 HTML 與 CSS 框架及 JavaScript 函式庫整合
- [ ] 指導其他學習 HTML 基礎的人
## 🎯 你的 HTML 精通時間表
```mermaid
timeline
title HTML 學習進程
section 基礎 (5 分鐘)
文件結構: DOCTYPE 宣告
: HTML 根元素
: 頭部與主體理解
section 資料標籤 (10 分鐘)
重要元標籤: 字元編碼
: 視窗配置
: 瀏覽器相容性
section 內容建立 (15 分鐘)
圖片整合: 正確檔案路徑
: 替代文字重要性
: 自我封閉標籤
section 版面組織 (20 分鐘)
容器策略: 用 Div 元素結構化
: 類別與 ID 命名
: 巢狀元素階層
section 意義掌握 (30 分鐘)
有意義標記: 標題階層
: 螢幕閱讀器導航
: 無障礙最佳實踐
section 高級概念 (1 小時)
HTML5 功能: 現代語意元素
: ARIA 屬性
: 效能考量
section 專業技能 (1 週)
程式碼組織: 檔案結構模式
: 可維護標記
: 團隊合作
section 專家等級 (1 個月)
現代網路標準: 漸進式強化
: 跨瀏覽器相容性
: HTML 規範更新
```
### 🛠️ 你的 HTML 工具箱摘要
HTML 是「久經考驗」的構建系統，幫助網絡發展成今天的樣子。通過研究一些舊標籤和新標籤，了解它的歷史。您能弄清楚為什麼某些標籤被棄用而某些被添加嗎？未來可能會引入哪些標籤？
完成本課後，你已具備：
- **文件結構**：完整的 HTML5 基礎與正確 DOCTYPE
- **語義標記**：增強無障礙與 SEO 的有意義標籤
- **圖片整合**：妥善的檔案組織與替代文字使用
- **佈局容器**：策略性使用帶描述性類名的 div
- **無障礙意識**：瞭解螢幕閱讀器的導航方式
- **現代標準**：當前 HTML5 實務及淘汰標籤知識
- **專案基礎**：為 CSS 樣式與 JavaScript 互動打好基礎
了解更多關於為網頁和移動設備構建網站的內容：[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
**下一步**：你的 HTML 結構已準備好進行 CSS 樣式設計！你所建立的語義基礎會讓下一課更易理解。
## 作業
[練習 HTML：構建博客模型](assignment.md)
[練習你的 HTML：製作一個部落格樣板](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不精確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

163
translations/tw/3-terrarium/1-intro-to-html/assignment.md
Unescape View File

@ -1,53 +1,154 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
"translation_date": "2025-10-03T09:00:55+00:00",
"original_hash": "650e63282e1dfa032890fcf5c1c4119d",
"translation_date": "2026-01-06T14:13:31+00:00",
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
"language_code": "tw"
}
-->
# HTML 練習作業：建立部落格模型
## 目標
## 學習目標
設計並手寫 HTML 結構，用於個人部落格首頁。本次練習旨在幫助您熟悉語意化 HTML、佈局規劃以及程式碼組織。
運用 HTML 知識設計並編碼完整的部落格首頁結構。此實作作業將強化語意化 HTML 概念、無障礙最佳實務以及專業程式碼組織技巧，這些技能將伴隨你在網頁開發旅程中持續使用。
## 指導說明
**完成此作業，你將能：**
- 練習在編碼前規劃網站版面配置
- 適當運用語意化 HTML 元素
- 建立可無障礙使用且結構良好的標記
- 養成以評論和組織維護專業程式碼的習慣
1. **設計您的部落格模型**
- 繪製部落格首頁的視覺模型。包含主要區塊，例如標頭、導航欄、主要內容、側邊欄和頁尾。
- 您可以使用紙張繪製並掃描您的草圖，或使用數位工具（例如 Figma、Adobe XD、Canva，甚至 PowerPoint）。
## 專案需求
2. **識別 HTML 元素**
- 列出您計劃用於每個區塊的 HTML 元素（例如 `<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`、`<section>`、`<h1>`–`<h6>`、`<p>`、`<img>`、`<ul>`、`<li>`、`<a>` 等）。
### 第 1 部分：設計規劃（視覺模型）
3. **撰寫 HTML 標記**
- 手寫您的模型所需的 HTML。專注於語意化結構和最佳實踐。
- 至少包含 10 個不同的 HTML 元素。
- 添加註解以解釋您的選擇和結構。
**建立一個部落格首頁的視覺模型，包括：**
- 含網站標題和導覽列的頁首
- 主要內容區，至少包含 2-3 篇部落格文章預覽
- 側欄，展示附加資訊（關於區段、最新文章、分類）
- 頁尾，含聯絡資訊或連結
4. **提交您的作品**
- 上傳您的草圖/模型以及 HTML 文件。
- 可選擇性地提供簡短的反思（2–3 句），說明您的設計決策。
**製作模型的選項：**
- **手繪草圖**：使用紙筆繪製，再拍照或掃描你的設計
- **數位工具**：Figma、Adobe XD、Canva、PowerPoint，或任何繪圖應用程式
- **線框工具**：Balsamiq、MockFlow 或類似線框軟體
## 評分標準
**在模型上標註各區段**預計會使用的 HTML 元素（例如「頁首 - `<header>`」、「部落格文章 - `<article>`」）。
| 評分項目 | 優秀 | 合格 | 需改進 |
|------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| 視覺模型 | 清晰、詳細的模型，包含標記區塊和深思熟慮的佈局 | 基本模型，包含部分標記區塊 | 模型簡略或不清晰；缺乏區塊標記 |
| HTML 元素 | 使用 10 個以上語意化 HTML 元素；展現結構和最佳實踐的理解 | 使用 5–9 個 HTML 元素；部分語意化結構 | 使用少於 5 個元素；缺乏語意化結構 |
| 程式碼品質 | 組織良好、易讀的程式碼，包含註解；遵循 HTML 標準 | 程式碼大致組織良好；註解較少 | 程式碼混亂；缺乏註解 |
| 反思 | 深刻反思設計選擇和挑戰 | 基本反思 | 無反思或內容不相關 |
### 第 2 部分：HTML 元素規劃
## 提示
**建立一份清單，將模型的每個區段對應到具體的 HTML 元素：**
- 使用語意化 HTML 標籤以提升可訪問性和 SEO。
- 使用縮排和註解來組織您的程式碼。
- 參考 [MDN HTML 元素參考](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 以獲取指導。
- 思考您的佈局如何在未來的作業中擴展或進行樣式設計。
```
Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>
```
**必須包含的元素：**
HTML 中至少需包含下列清單中的 10 種不同語意元素：
- `<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`
- `<h1>`、`<h2>`、`<h3>`、`<p>`、`<ul>`、`<li>`、`<a>`
- `<img>`、`<time>`、`<blockquote>`、`<strong>`、`<em>`
### 第 3 部分：HTML 實作
**依照以下標準編碼你的部落格首頁：**
1. **文件結構**：包含適當的 DOCTYPE、html、head、body 元素
2. **語意化標記**：依元素用途使用 HTML
3. **無障礙設計**：圖片含適當的替代文字，連結文字具意義
4. **程式碼品質**：使用一致縮排與有意義註解
5. **內容**：包含真實感的部落格內容（可使用預置文字）
**範例 HTML 結構：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Blog</title>
</head>
<body>
<!-- Main site header -->
<header>
<h1>My Blog Title</h1>
<nav>
<!-- Navigation menu -->
</nav>
</header>
<!-- Main content area -->
<main>
<!-- Blog posts go here -->
</main>
<!-- Sidebar content -->
<aside>
<!-- Additional information -->
</aside>
<!-- Site footer -->
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
```
### 第 4 部分：反思
**撰寫簡短反思（3-5 句）說明：**
- 哪些 HTML 元素是你最有信心使用的？
- 在規劃或編碼過程中遇到什麼挑戰？
- 語意化 HTML 如何協助你組織內容？
- 下一次 HTML 專案會有哪些不同的做法？
## 提交檢查清單
**提交前請確定你已完成：**
- [ ] 含標註 HTML 元素的視覺模型
- [ ] 完整 HTML 檔案，含適當文件結構
- [ ] 適當運用至少 10 種不同語意化 HTML 元素
- [ ] 有意義的評論說明程式碼結構
- [ ] 有效的 HTML 語法（請於瀏覽器測試）
- [ ] 回答題目要求的書面反思
## 評量準則
| 評量項目 | 優異 (4) | 良好 (3) | 進行中 (2) | 初學 (1) |
|----------|-----------|-----------|------------|---------|
| **規劃與設計** | 詳盡且標注良好的模型，清楚展現版面及語意結構理解 | 清楚的模型，多數區塊標註適當 | 基本模型並有部分標註，呈現大致理解 | 模型極少或不清楚，缺少區塊識別 |
| **語意化 HTML 使用** | 適切使用 10 種以上語意元素，展現深刻 HTML 與可及性理解 | 正確使用 8-9 種語意元素，具良好語意標記認識 | 使用 6-7 種語意元素，部分混淆用法 | 運用少於 6 種或誤用語意元素 |
| **程式碼品質與組織** | 程式碼極為整齊，縮排恰當，含完整註解，HTML 語法完美 | 程式碼整齊，縮排良好，有助於閱讀的註解，語法有效 | 大致有組織，偶有註解，語法小錯誤 | 整理不佳、註解很少，語法錯誤多 |
| **無障礙性與最佳實務** | 無障礙設計優異，替代文字清楚，標題階層合理，遵循所有現代最佳實務 | 無障礙功能良好，標題及替代文字適當，遵守多數最佳實務 | 有考慮無障礙性，替代文字與標題結構基本 | 無障礙功能不足，標題結構差，未遵循最佳實務 |
| **反思與學習** | 反思深刻，展現 HTML 概念的透徹理解及學習過程的細膩分析 | 反思良好，顯示關鍵概念理解及自我覺察 | 反思基本，對 HTML 概念或學習過程的見解有限 | 反思匱乏或缺少，對學到的概念了解不深 |
## 學習資源
**重要參考資料：**
- [MDN HTML 元素參考](https://developer.mozilla.org/docs/Web/HTML/Element) - 完整 HTML 元素指南
- [HTML5 語意元素](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - 理解語意標記
- [網頁無障礙準則](https://www.w3.org/WAI/WCAG21/quickref/) - 創建無障礙網頁內容
- [HTML 驗證器](https://validator.w3.org/) - 檢查 HTML 語法
**成功秘訣：**
- 在撰寫程式碼之前先從模型開始
- 使用瀏覽器的開發者工具檢視 HTML 結構
- 測試不同螢幕尺寸（即使沒有 CSS）
- 大聲朗讀你的 HTML，確認結構是否合邏輯
- 考慮螢幕閱讀器將如何解讀頁面結構
> 💡 **提醒**：此作業重點在 HTML 結構與語意。別擔心視覺樣式 - 那是 CSS 的工作！你的頁面可能看起來簡單，但應具良好結構與語意。
---
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，機器自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而產生的任何誤解或誤譯負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

755
translations/tw/3-terrarium/2-intro-to-css/README.md
Unescape View File

@ -1,278 +1,727 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "acb5ae00cde004304296bb97da8ff4c3",
"translation_date": "2025-08-29T15:25:34+00:00",
"original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
"translation_date": "2026-01-06T14:16:37+00:00",
"source_file": "3-terrarium/2-intro-to-css/README.md",
"language_code": "tw"
}
-->
# 玻璃缸專案第二部分：CSS 入門
![CSS 入門](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.tw.png)
> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
# Terrarium Project 第二部分：CSS 入門
```mermaid
journey
title 你的 CSS 樣式旅程
section 基礎
連結 CSS 檔案: 3: Student
了解級聯: 4: Student
學習繼承: 4: Student
section 選擇器
元素定位: 4: Student
類別模式: 5: Student
ID 特異性: 5: Student
section 版面配置
定位元素: 4: Student
建立容器: 5: Student
製作生態箱: 5: Student
section 精緻化
添加視覺效果: 5: Student
響應式設計: 5: Student
玻璃反射: 5: Student
```
![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.tw.png)
> 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac)
還記得你的 HTML 陸地生態箱看起來相當簡單嗎？CSS 正是我們將這個樸素結構轉變成視覺吸引之物的關鍵所在。
如果 HTML 就像是建造房屋骨架，那麼 CSS 則是讓它有家的感覺的所有元素——油漆顏色、家具擺設、燈光，以及各個房間如何流暢連結。試想凡爾賽宮最初是簡單的狩獵小屋，但經由細心的裝飾和布局規劃，變成了世界上最宏偉的建築之一。
今天，我們將把你的陸地生態箱從功能性提升到精緻完美。你將學會如何精準定位元素、讓版面配置響應不同螢幕尺寸，以及創造令網站動人的視覺魅力。
到這堂課的結束，你會發現策略性的 CSS 樣式設定能大幅提升你的專案。讓我們為陸地生態箱加點風格吧。
```mermaid
mindmap
root((CSS 基礎))
Cascade
Specificity Rules
Inheritance
Priority Order
Conflict Resolution
Selectors
Element Tags
Classes (.class)
IDs (#id)
Combinators
Box Model
Margin
Border
Padding
Content
Layout
Positioning
Display Types
Flexbox
Grid
Visual Effects
Colors
Shadows
Transitions
Animations
Responsive Design
Media Queries
Flexible Units
Viewport Meta
Mobile First
```
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/17)
### 簡介
## CSS 入門
CSS，全名為層疊樣式表（Cascading Style Sheets），解決了網頁開發中的一個重要問題：如何讓網站看起來更美觀。為應用程式添加樣式不僅能提升其可用性，還能讓其外觀更吸引人；此外，CSS 還能用於創建響應式網頁設計（Responsive Web Design, RWD），確保應用程式在任何螢幕尺寸下都能保持良好的顯示效果。CSS 不僅僅是讓應用程式看起來漂亮，它的規範還包括動畫和變形功能，能為應用程式實現更複雜的互動效果。CSS 工作小組負責維護當前的 CSS 規範，您可以在 [World Wide Web Consortium 的網站](https://www.w3.org/Style/CSS/members)上關注他們的工作。
CSS 常被認為是「讓東西變漂亮」的工具，但它的用途遠更廣泛。CSS 就像電影導演——你不僅控制畫面呈現，也能操控動態效果，反應使用者互動，並適應各種狀況。
> 注意，CSS 是一種不斷演進的語言，就像網路上的所有技術一樣，並非所有瀏覽器都支持最新的規範。在實作時，請務必參考 [CanIUse.com](https://caniuse.com) 來檢查支援情況。
現代 CSS 功能強大。你可以寫程式碼自動調整版面配置，適用於手機、平板與桌面電腦。你也能創造流暢動畫，引導使用者目光焦點。當所有元素協同運作時，效果驚人。
在本課程中，我們將為線上玻璃缸添加樣式，並學習多個 CSS 概念：層疊、繼承、選擇器的使用、定位以及如何使用 CSS 建立佈局。在此過程中，我們將設計玻璃缸的佈局，並創建實際的玻璃缸。
> 💡 **專家建議**：CSS 持續演化，推出新功能與能力。使用新特性時，務必先上 [CanIUse.com](https://caniuse.com) 查詢各瀏覽器支援度。
**本課目標：**
- **建立**陸地生態箱完整視覺設計，採用現代 CSS 技巧
- **探索**關鍵觀念如層疊(cascade)、繼承(inheritance)及 CSS 選擇器
- **實作**響應式定位與布局策略
- **打造**利用 CSS 形狀和樣式的陸地生態箱容器
### 前置條件
您應該已經完成玻璃缸的 HTML 結構，並準備好進行樣式設計。
請完成上堂課設計的 HTML 結構，並準備好進行樣式設定。
> 查看影片
> 📺 **影片資源**：這段詳盡的教學影片值得一看
>
> [![CSS Basics Tutorial](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
>
> [![Git 和 GitHub 基礎影片](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### 設定你的 CSS 檔案
### 任務
開始設定樣式前，須先將 CSS 連結到 HTML。這告訴瀏覽器樣式的來源位置。
在您的玻璃缸資料夾中，創建一個名為 `style.css` 的新檔案，並在 `<head>` 區域中匯入該檔案：
在你的陸地生態箱資料夾中，建立新的檔案 `style.css`，然後在 HTML 文件的 `<head>` 區段加入連結：
```html
<link rel="stylesheet" href="./style.css" />
```
---
**這段程式碼說明如下：**
- **建立** HTML 與 CSS 檔案間的連結
- **告訴**瀏覽器載入並套用 `style.css` 內的樣式
- **使用** `rel="stylesheet"` 屬性指明這是 CSS 檔案
- **透過** `href="./style.css"` 指定檔案路徑
## 理解 CSS 層疊機制
## 層疊
你是否好奇為什麼稱為「層疊」樣式表？因為樣式像瀑布一樣連續套用，有時彼此會產生衝突。
層疊樣式表的核心概念是樣式的「層疊」，即樣式的應用是根據其優先級來決定的。由網站作者設定的樣式優先於瀏覽器設定的樣式，而內聯樣式的優先級又高於外部樣式表中的樣式。
就像軍隊命令結構——將軍主令「所有軍隊穿綠制服」，但特定單位命令說「典禮穿藍禮服」，則以較具體指令為準。CSS 也遵循類似原理，理解這種層級結構，讓除錯輕鬆許多。
### 任務
### 體驗層疊優先順序
為 `<h1>` 標籤添加內聯樣式 "color: red"：
讓我們實際演練層疊，先在 `<h1>` 標籤加上內嵌樣式：
```HTML
```html
<h1 style="color: red">My Terrarium</h1>
```
接著，將以下程式碼添加到您的 `style.css` 檔案中：
**這段程式碼做了什麼：**
- **直接套用**紅色字體在 `<h1>` 元素，使用內嵌樣式
- **利用** `style` 屬性，直接在 HTML 中嵌入 CSS
- **建立**該元素最高優先度的樣式規則
接著，在 `style.css` 內增加此規則：
```CSS
```css
h1 {
color: blue;
color: blue;
}
```
✅ 您的網頁應用程式中顯示了哪種顏色？為什麼？您能找到覆蓋樣式的方法嗎？什麼情況下您會想要這樣做，或者不這樣做？
**以上範例讓我們：**
- **定義**選取所有 `<h1>` 元素的 CSS 規則
- **設定**使用外部樣式表將文字顏色設為藍色
- **優先度**低於內嵌樣式的規則
✅ **知識確認**：在你的網頁中呈現哪個顏色？該顏色為何勝出？你能想到哪些情況會想要覆寫樣式嗎？
```mermaid
flowchart TD
A["瀏覽器遇到 h1 元素"] --> B{"檢查內嵌樣式"}
B -->|找到| C["style='color: red'"]
B -->|沒有| D{"檢查 ID 規則"}
C --> E["套用紅色 (1000 分)"]
D -->|找到| F["#heading { color: green }"]
D -->|沒有| G{"檢查類別規則"}
F --> H["套用綠色 (100 分)"]
G -->|找到| I[".title { color: blue }"]
G -->|沒有| J{"檢查元素規則"}
I --> K["套用藍色 (10 分)"]
J -->|找到| L["h1 { color: purple }"]
J -->|沒有| M["使用瀏覽器預設"]
L --> N["套用紫色 (1 分)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **CSS 優先順序（由高至低）：**
> 1. **內嵌樣式**（style 屬性）
> 2. **ID 選擇器**（#myId）
> 3. **類別選擇器**（.myClass）及屬性選擇器
> 4. **元素選擇器**（h1, div, p）
> 5. **瀏覽器預設**
---
## CSS 繼承實例
## 繼承
CSS 繼承猶如遺傳學——子元素會從父元素繼承某些屬性。若你設定 body 的字型，頁面所有文字會自動使用相同字型。就像哈布斯堡王朝的獨特下巴特徵代代相傳，不需個別設定。
樣式可以從祖先元素繼承到後代元素，嵌套的元素會繼承其父元素的樣式。
但並非所有屬性都會繼承。像文字字型和顏色會，而邊距、邊框等布局屬性則不會。就如同小孩繼承外形特徵，但不一定繼承父母的穿衣打扮。
### 任務
### 觀察字型繼承
將 body 的字體設置為指定的字體，並檢查嵌套元素的字體：
試試將字型設定在 `<body>` 元素上：
```CSS
```css
body {
font-family: helvetica, arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
打開瀏覽器的控制台，切換到「Elements」標籤，觀察 H1 的字體。您會發現它繼承了 body 的字體，這在瀏覽器中有明確的說明：
**說明這段過程：**
- **設定**整個網頁的字型，選取 `<body>` 元素
- **使用**字型堆疊，提供備用方案以提升瀏覽器相容性
- **採用**現代系統字體，美觀適配多平台
- **確保**除非明確覆寫，子元素都會繼承這個字型
![繼承的字體](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.tw.png)
打開瀏覽器開發者工具（F12），切換到元素檢視，查看你的 `<h1>` 元素。你會看到它繼承了 body 的字型：
✅ 您能讓嵌套樣式繼承不同的屬性嗎？
![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.tw.png)
---
✅ **實驗時間**：試著在 `<body>` 設定其他可繼承屬性，如 `color`、`line-height`、`text-align`。你的標題和其他元素會有什麼變化？
> 📝 **可繼承屬性例**：`color`、`font-family`、`font-size`、`line-height`、`text-align`、`visibility`
>
> **不可繼承屬性例**：`margin`、`padding`、`border`、`width`、`height`、`position`
### 🔄 **學習確認**
**CSS 基礎理解檢核**：開始選擇器前，請確定你能：
- ✅ 述說層疊與繼承的差異
- ✅ 預測特殊規則下哪個樣式會生效
- ✅ 辨識父元素會繼承哪些屬性
- ✅ 正確將 CSS 檔案連結至 HTML
## CSS 選擇器
**快速測試**：有以下樣式， `<div class="special">` 內的 `<h1>` 會是什麼顏色？
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*答案：紅色（元素選擇器直接針對 h1）*
## 精通 CSS 選擇器
CSS 選擇器是你針對特定元素套用樣式的方式。它們像精確指示——不只是說「那棟房子」，而是說「楓樹街上有紅門的藍色房子」。
CSS 提供多種定義精確度的方式，挑對選擇器就如挑對工具。有時候你要統一規劃一整區大門，有時候想特別裝飾某扇獨門。
### 標籤
### 元素選擇器（標籤）
目前，您的 `style.css` 檔案中僅對少數標籤進行了樣式設計，因此應用程式看起來有些奇怪：
元素選擇器以標籤名稱選取 HTML 元素，適合制定全頁基礎樣式：
```CSS
```css
body {
font-family: helvetica, arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
這種針對標籤進行樣式設計的方法可以控制單一元素，但如果您需要控制玻璃缸中多個植物的樣式，就需要利用 CSS 選擇器。
**理解這些樣式：**
- **採用** `body` 選擇器設定網頁統一字型樣式
- **移除**瀏覽器預設邊距與內距，方便控制排版
- **為**所有標題元素添加文字色彩、對齊與間距
- **運用** `rem` 單位打造可縮放、易讀字體大小
### Id
元素選擇器非常適合全面設定，但若要單獨修飾陸地生態箱中的特定植物元件，則需更具體選擇器。
為左側和右側容器添加一些樣式。由於標記中只有一個左側容器和一個右側容器，因此它們被賦予了 id。要為它們設置樣式，可以使用 `#`：
### ID 選擇器用於獨特元素
```CSS
ID 選擇器以 `#` 開頭，選取帶有指定 `id` 屬性的元素。因為 ID 必須唯一，很適合為個別特殊元素設定樣式，例如我們的左、右兩個植物容器。
建立陸地生態箱側邊植物容器的樣式：
```css
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
在這裡，您使用絕對定位將這些容器固定在螢幕的最左側和最右側，並使用百分比設置其寬度，以便它們能夠適應小型行動裝置的螢幕。
**這段程式碼成果說明：**
- **使用** `absolute` 定位將容器置於左右兩邊邊緣
- **採用** `vh`（視窗高度）單位，隨螢幕尺寸響應高度
- **設定** `box-sizing: border-box`，確保內距包含於寬度內
- **精簡**將零值的 `px` 單位去除，讓程式碼更簡潔乾淨
- **塗上**柔和的背景色，比嚴肅的灰色更舒適
✅ 這段程式碼有些重複，因此不符合「DRY」（Don't Repeat Yourself）的原則；您能找到更好的方法來設計這些 id 嗎？或許可以結合 id 和 class？您需要修改標記並重構 CSS：
✅ **程式碼質量挑戰**：注意這份 CSS 違反 DRY（不要重複你自己）原則。你能用一組 ID 結合類別重構它嗎？
**改良版方式：**
```html
<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Class
### 類別選擇器用於重複利用樣式
在上述範例中，您設計了螢幕上的兩個唯一元素。如果您希望樣式應用於螢幕上的多個元素，可以使用 CSS 類別（class）。以下是如何為左側和右側容器中的植物設置樣式。
類別選擇器以 `.` 開頭，適合套用同樣樣式給多個元素。相比 ID，類別可多次使用，方便統一風格。
注意，HTML 標記中的每個植物都有 id 和 class 的組合。這裡的 id 是供稍後添加的 JavaScript 使用，用於操作玻璃缸中的植物位置。而 class 則為所有植物提供統一的樣式。
在陸地生態箱中，所有植物需有類似樣式，但每株植物又要獨立定位。用類別管理共有樣式，ID 則負責個別配置。
**植物的 HTML 結構如下：**
```html
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.tw.png" />
</div>
```
將以下程式碼添加到您的 `style.css` 檔案中：
**主要組件解析：**
- **統一容器**使用 `class="plant-holder"` 來套用一致樣式
- **植物圖片**使用 `class="plant"` 管理共通風格與行為
- **獨特定位**用 `id="plant1"` 等作為唯一識別與 JavaScript 互動
- **提供**輔助閱讀器的描述文字以提升無障礙性
接著將這些樣式加入你的 `style.css`：
```CSS
```css
.plant-holder {
position: relative;
height: 13%;
left: -10px;
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
```
這段程式碼中值得注意的是相對定位和絕對定位的混合使用，我們會在下一節進一步探討。請注意高度的百分比處理方式：
您將植物容器的高度設置為 13%，這是一個適合的數值，能確保所有植物都能顯示在每個垂直容器中，而無需滾動。
您將植物容器向左移動，使植物在容器中更居中。由於圖片有大量透明背景以便於拖動，因此需要向左移動以更好地適應螢幕。
接著，植物本身的最大寬度設置為 150%。這樣可以確保當瀏覽器縮小時，植物也會縮小以適應。
還需要注意的是 z-index 的使用，它控制元素的相對高度（使植物顯示在容器上方，看起來像是放置在玻璃缸內）。
✅ 為什麼需要同時使用植物容器和植物的 CSS 選擇器？
## CSS 定位
混合使用定位屬性（包括 static、relative、fixed、absolute 和 sticky 定位）可能有些棘手，但如果使用得當，能很好地控制頁面上的元素。
絕對定位的元素是相對於最近的已定位祖先元素進行定位的，如果沒有已定位的祖先，則相對於文件的 body 進行定位。
相對定位的元素則是根據 CSS 的指令，從其初始位置進行調整。
在我們的範例中，`plant-holder` 是一個相對定位的元素，位於一個絕對定位的容器內。這樣的結果是側邊欄容器固定在左右兩側，而 `plant-holder` 則嵌套在側邊欄內，並在側邊欄內部調整自身位置，為植物的垂直排列留出空間。
.plant:hover {
transform: scale(1.05);
}
```
> `plant` 本身也使用了絕對定位，這是使其可拖動的必要條件，您將在下一課中了解更多。
**解析這些樣式：**
- **設定**植物容器為相對定位，建立定位參考框架
- **調整**每個容器高度為 13%，確保所有植物垂直排放不需捲動
- **稍微**將容器左移，讓植物在容器內更靠中間
- **讓**植物圖片可響應縮放，透過 `max-width` 與 `max-height`
- **利用** `z-index` 將植物層級提高，置於其他陸地元素之上
- **新增**平滑過渡的滑鼠懸停效果，增進互動性
✅ **關鍵思考**：為何需要同時用 `.plant-holder` 和 `.plant`？如果只用一個會怎樣？
> 💡 **設計模式**：容器（`.plant-holder`）控制排版和定位，內容（`.plant`）負責外觀和縮放。此分工讓程式碼更易維護及彈性擴充。
## 認識 CSS 定位
CSS 定位如同舞台導演——你決定每個演員站哪裡、如何移動。有些演員遵循標準陣型，有些因戲劇效果需特殊定位。
掌握定位，許多版面挑戰都迎刃而解。想要滾動時導航列固定？定位幫你辦到。想要在特定位置顯示工具提示？也是定位的功勞。
### 五種定位值
```mermaid
quadrantChart
title CSS 定位策略
x-axis 文件流程 --> 從流程中移除
y-axis 靜態定位 --> 精確控制
quadrant-1 絕對定位
quadrant-2 固定定位
quadrant-3 靜態定位
quadrant-4 黏著定位
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| 定位值 | 行為 | 使用範例 |
|--------|------|----------|
| `static` | 預設，忽略 top/left/right/bottom 屬性 | 正常文件流佈局 |
| `relative` | 相對於正常位置定位 | 小幅調整，建立定位上下文 |
| `absolute` | 相對最近定位祖先元素定位 | 精確放置，覆蓋元素 |
| `fixed` | 相對視窗定位 | 導航列、浮動元素 |
| `sticky` | 根據捲動位置在 relative 與 fixed 間切換 | 捲動時黏著的標頭 |
### 我們陸地生態箱的定位策略
我們透過定位組合，打造理想版面配置：
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
✅ 嘗試切換側邊容器和 `plant-holder` 的定位類型。會發生什麼？
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
## CSS 佈局
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
現在，您將使用所學的內容，完全用 CSS 建立玻璃缸！
**定位策略說明：**
- **絕對定位容器**脫離正常文檔流，固定於畫面邊緣
- **相對定位植物容器**既在文檔流內又建立定位框架
- **絕對定位植物**可在相對容器中精確擺放
- **此組合**允許植物垂直堆疊且可獨立調整位置
> 🎯 **重要關鍵**：植物元素需絕對定位，才能在下一堂課實作拖拉功能。絕對定位把元素從正常佈局中拉出，使拖放交互可行。
✅ **實驗時間**：改變定位值並觀察效果：
- 若將 `.container` 從 `absolute` 改成 `relative` 會怎樣？
- 如果 `.plant-holder` 使用 `absolute` 而非 `relative`，佈局會如何變化？
- 當你將 `.plant` 改成 `relative` 定位時會發生什麼？
### 🔄 **教學檢測**
**CSS 定位掌握**：暫停確認你的理解：
- ✅ 你能解釋為什麼植物需要絕對定位才能拖放嗎？
- ✅ 你了解相對容器如何創建定位上下文嗎？
- ✅ 為什麼側邊容器使用絕對定位？
- ✅ 如果完全移除定位聲明會發生什麼？
**現實世界連結**：想想 CSS 定位如何反映現實佈局：
- **Static**：書架上的書（自然排序）
- **Relative**：稍微移動書但保持位置
- **Absolute**：將書籤放在特定頁碼
- **Fixed**：摺頁時仍保持可見的便利貼
## 使用 CSS 建構玻璃瓶生態缸
現在我們將使用純 CSS 建立玻璃罐—不需要圖片或繪圖軟體。
透過定位和透明度創造逼真的玻璃、陰影和深度效果，展現 CSS 的視覺能力。這種技術類似包浩斯建築師用簡單幾何形狀打造複雜、美麗結構。理解這些原理後，你將能認出許多網頁設計背後的 CSS 技巧。
```mermaid
flowchart LR
A[罐子頂部] --> E[完整生態瓶]
B[罐壁] --> E
C[土層] --> E
D[罐底部] --> E
F[玻璃效果] --> E
A1["寬度50%<br/>高度5%<br/>頂部位置"] --> A
B1["寬度60%<br/>高度80%<br/>圓角<br/>不透明度0.5"] --> B
C1["寬度60%<br/>高度5%<br/>深棕色<br/>底層"] --> C
D1["寬度50%<br/>高度1%<br/>底部位置"] --> D
F1["細微陰影<br/>透明度<br/>Z軸層次"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### 建立玻璃罐元件
首先，使用 CSS 將 `.terrarium` div 的子元素設置為圓角矩形：
讓我們逐部分構建生態缸玻璃罐。每個部分使用絕對定位和百分比尺寸以達到響應式設計：
```CSS
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
請注意這裡使用了百分比。如果您縮小瀏覽器，會看到玻璃缸也會隨之縮放。還請注意玻璃缸元素的寬度和高度百分比，以及每個元素如何絕對定位在中心，並固定在視窗底部。
**理解生態缸構造：**
- **使用** 百分比尺寸以適應各種螢幕大小
- **絕對定位** 元素，以精確堆疊和對齊
- **套用** 不同透明度來營造玻璃透明效果
- **實現** `z-index` 分層，使植物出現在罐內
- **添加** 細緻陰影和圓角，提升真實感
我們還使用了 `rem` 作為圓角半徑的單位，這是一種相對於字體大小的長度單位。您可以在 [CSS 規範](https://www.w3.org/TR/css-values-3/#font-relative-lengths) 中了解更多關於這種類型的相對測量。
### 百分比響應設計
✅ 嘗試更改玻璃缸的顏色和透明度與泥土的顏色和透明度。會發生什麼？為什麼？
注意所有尺寸均使用百分比而非固定像素：
---
**為什麼重要：**
- **確保** 生態缸在任何螢幕尺寸上都能等比例縮放
- **維持** 罐內各元件的視覺關係
- **提供** 從手機到大螢幕一貫的使用體驗
- **讓** 設計自適應且不破壞畫面佈局
## 🚀挑戰
### CSS 單位實踐
為玻璃缸的左下角添加一個「氣泡」光澤，使其看起來更像玻璃。您將需要設計 `.jar-glossy-long` 和 `.jar-glossy-short`，使其看起來像反射的光澤。完成後應如下圖所示：
我們使用 `rem` 單位設定邊框圓角，與根字體大小成比例。這讓設計更容易被使用者字型偏好接受。欲了解更多[CSS 相對單位](https://www.w3.org/TR/css-values-3/#font-relative-lengths)的官方規範。
![完成的玻璃缸](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.tw.png)
✅ **視覺實驗**：試著修改這些數值並觀察效果：
- 將罐身透明度從 0.5 調高至 0.8 — 玻璃呈現如何改變？
- 將土壤色從 `#3a241d` 換成 `#8B4513` — 視覺效果差異？
- 將土層 `z-index` 調整為 2 — 分層效果如何？
要完成課後測驗，請參考以下學習模組：[使用 CSS 為 HTML 應用程式設計樣式](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### 🔄 **教學檢測**
**CSS 視覺設計理解**：確認你的視覺 CSS 掌握：
- ✅ 百分比尺寸如何創造響應式設計？
- ✅ 為何透明度產生玻璃透明效果？
- ✅ `z-index` 在元素分層中扮演什麼角色？
- ✅ 邊框圓角如何塑造罐子形狀？
## 課後測驗
**設計原則**：注意我們如何從簡單形狀打造複雜視覺：
1. **矩形** → **圓角矩形** → **玻璃罐元件**
2. **平面色彩** → **透明度** → **玻璃效果**
3. **單一元素** → **分層組合** → **3D 外觀**
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/18)
---
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
**描述：** 創造一個 CSS 動畫，使生態缸中的植物輕柔搖擺，模擬自然微風效果。這將幫助你練習 CSS 動畫、轉換與關鍵影格，同時提升生態缸的視覺吸引力。
**提示：** 為 `.plant` 類別新增 CSS 關鍵影格動畫，使植物輕輕從左到右搖擺。動畫旋轉角度約 2-3 度，持續時間 3-4 秒，並無限循環，使用緩動函數模擬自然動作。
在此了解 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰：新增玻璃反光
準備好利用真實玻璃反光效果強化生態缸嗎？此技術將為設計增添深度與真實感。
你將製作細膩高光，模擬光線如何在玻璃表面反射。此作法類似文藝復興畫家揚·范艾克運用光與反射使玻璃畫作呈現立體感。目標如下：
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.tw.png)
**你的挑戰：**
- **製作** 細膩的白色或淺色橢圓形反光
- **將它們置於** 罐子的左側策略性位置
- **套用** 適合的透明度與模糊效果以呈現真實光反射
- **利用** `border-radius` 造出有機泡泡狀形狀
- **嘗試** 漸層或盒陰影效果增加真實感
## 課後小測驗
[課後小測驗](https://ff-quizzes.netlify.app/web/quiz/18)
## 擴充你的 CSS 知識
CSS 初學或許感覺複雜，但理解這些核心概念將提供你扎實基礎以進階技巧。
**你的下一步 CSS 學習領域：**
- **Flexbox** - 簡化元素對齊與分配
- **CSS Grid** - 強大工具製作複雜佈局
- **CSS 變數** - 減少重複提升維護性
- **響應式設計** - 確保網站適用不同螢幕尺寸
### 互動學習資源
透過這些趣味且實際的遊戲練習概念：
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - 透過有趣挑戰精通 Flexbox
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 透過種胡蘿蔔學習 CSS Grid
- 🎯 [CSS Battle](https://cssbattle.dev/) - 以程式挑戰測試你的 CSS 技能
### 進階學習
欲了解完整 CSS 基礎，請完成微軟學習模組：[用 CSS 風格化你的 HTML 應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **接下來 5 分鐘你可以做的事**
- [ ] 開啟 DevTools，使用 Elements 面板檢查任一網站的 CSS 樣式
- [ ] 製作簡單 CSS 檔案並連結至 HTML 頁面
- [ ] 嘗試以十六進位、RGB 與命名色彩改變顏色
- [ ] 練習盒模型，為 div 加 padding 與 margin
### 🎯 **這一小時你能完成的目標**
- [ ] 完成課後小測驗，複習 CSS 基礎
- [ ] 使用字體、顏色與間距為 HTML 頁面加上風格
- [ ] 使用 flexbox 或 grid 製作簡易佈局
- [ ] 嘗試 CSS 過渡打造順暢效果
- [ ] 使用 media query 練習響應式設計
### 📅 **你的一週 CSS 冒險**
- [ ] 創意完成生態缸樣式作業
- [ ] 精通 CSS Grid，打造照片畫廊佈局
- [ ] 學習 CSS 動畫，讓設計更生動
- [ ] 探索 Sass 或 Less 預處理器
- [ ] 研究設計原則並融入 CSS
- [ ] 分析並重現網路上有趣的設計
### 🌟 **你的一個月設計大師之路**
- [ ] 建置完整響應式網站設計系統
- [ ] 學習 CSS-in-JS 或 Tailwind 這類實用框架
- [ ] 為開源專案貢獻 CSS 優化
- [ ] 掌握 CSS 進階概念如自訂屬性及 containment
- [ ] 創建可重用的模組化元件庫
- [ ] 指導其他 CSS 學習者並分享設計心得
## 🎯 你的 CSS 精通時間軸
```mermaid
timeline
title CSS 學習進度
section 基礎 (10 分鐘)
檔案連結: 連結 CSS 至 HTML
: 理解層疊規則
: 學習繼承基礎
section 選擇器 (15 分鐘)
目標元素: 元素選擇器
: 類別模式
: ID 特殊性
: 組合器
section 盒模型 (20 分鐘)
版面基礎: 外距與內距
: 邊框屬性
: 內容尺寸
: 盒模型行為
section 定位 (25 分鐘)
元素定位: 靜態與相對
: 絕對定位
: Z-index 堆疊
: 響應單位
section 視覺設計 (30 分鐘)
樣式精通: 顏色與透明度
: 陰影與效果
: 過渡效果
: 轉換屬性
section 響應式設計 (45 分鐘)
多裝置支援: 媒體查詢
: 彈性版面
: 行動優先策略
: 視口最佳化
section 進階技巧 (1 週)
現代 CSS: Flexbox 佈局
: CSS Grid 系統
: 自訂屬性
: 動畫關鍵影格
section 專業技能 (1 個月)
CSS 架構: 元件模式
: 可維護程式碼
: 效能優化
: 跨瀏覽器相容性
```
### 🛠️ 你的 CSS 工具箱總結
## 複習與自學
完成本課後，你具備：
- **繼承與覆寫理解**：樣式如何繼承與覆寫
- **選擇器精通**：元素、類別與 ID 精準選取
- **定位技巧**：策略性元素放置與分層
- **視覺設計**：製作玻璃效果、陰影與透明度
- **響應技術**：百分比佈局適應各種螢幕
- **程式碼組織**：乾淨且易維護的 CSS 結構
- **現代實務**：使用相對單位與無障礙設計模式
CSS 看似簡單，但要為所有瀏覽器和螢幕尺寸完美設計樣式卻充滿挑戰。CSS-Grid 和 Flexbox 是為了讓這項工作更結構化、更可靠而開發的工具。通過玩 [Flexbox Froggy](https://flexboxfroggy.com/) 和 [Grid Garden](https://codepip.com/games/grid-garden/) 來學習這些工具。
**下一步**：你的生態缸現在有結構（HTML）與樣式（CSS）。最後一課將增添 JavaScript 互動功能！
## 作業
@ -280,5 +729,7 @@ CSS 看似簡單，但要為所有瀏覽器和螢幕尺寸完美設計樣式卻
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原文文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或曲解負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

133
translations/tw/3-terrarium/2-intro-to-css/assignment.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
"translation_date": "2025-10-03T09:00:45+00:00",
"original_hash": "bee6762d4092a13fc7c338814963f980",
"translation_date": "2026-01-06T14:18:26+00:00",
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
"language_code": "tw"
}
@ -11,31 +11,126 @@ CO_OP_TRANSLATOR_METADATA:
## 目標
重構「玻璃花園」專案，使用 **Flexbox** 或 **CSS Grid** 進行佈局。根據需要更新 HTML 和 CSS，以實現現代化、響應式的設計。您不需要實現可拖曳的元素——僅需專注於佈局和樣式。
將你的生態瓶專案轉換成使用現代 CSS 版面配置技術！將目前的絕對定位方式重構為使用**Flexbox** 或 **CSS Grid**，以實現更易維護、響應式的設計。本次作業挑戰你在保持生態瓶視覺吸引力的同時，運用現代 CSS 標準。
## 指示
了解何時以及如何使用不同版面配置方法是現代網頁開發的重要技能。此練習橋接了傳統定位技術與當代 CSS 版面系統。
1. **建立新版本**的玻璃花園應用程式。更新標記和 CSS，使用 Flexbox 或 CSS Grid 進行佈局。
2. **確保藝術設計和元素保持原樣**，與原始版本一致。
3. **在至少兩個不同的瀏覽器中測試您的設計**（例如，Chrome、Firefox、Edge）。
4. **截圖您的玻璃花園**在每個瀏覽器中的顯示，展示跨瀏覽器的相容性。
5. **提交**您的更新後的程式碼和截圖。
## 作業說明
### 第一階段：分析與規劃
1. **檢視目前的生態瓶程式碼** — 確認哪些元素目前使用絕對定位
2. **選擇版面配置方法** — 決定 Flexbox 或 CSS Grid 哪個更適合你的設計目標
3. **繪製新版面結構** — 規劃容器與植物元素如何組織
### 第二階段：實作
1. **在獨立資料夾建立新版本** 的生態瓶專案
2. **根據需求更新 HTML 結構**，以支援你選擇的版面配置方法
3. **重構 CSS**，改用 Flexbox 或 CSS Grid，替代絕對定位
4. **維持視覺一致性** — 確保植物與生態瓶罐位於相同位置
5. **實作響應式行為** — 版面配置應能優雅適應不同螢幕尺寸
### 第三階段：測試與文件撰寫
1. **跨瀏覽器測試** — 確認設計在 Chrome、Firefox、Edge 與 Safari 表現正常
2. **響應式測試** — 檢視設計在手機、平板與桌面大小螢幕上的效果
3. **文件註解** — 在 CSS 加入註解，說明版面配置選擇
4. **截圖** — 捕捉生態瓶於不同瀏覽器與螢幕尺寸的畫面
## 技術需求
### 版面配置實作
- **擇一實作**：Flexbox 或 CSS Grid（同一元素不可同時用兩者）
- **響應式設計**：使用相對單位（`rem`、`em`、`%`、`vw`、`vh`），取代固定像素
- **可及性**：保持正確語意化 HTML 結構及替代文字
- **程式碼品質**：命名一致且 CSS 結構邏輯清晰
### 現代 CSS 功能須包含
```css
/* Example Flexbox approach */
.terrarium-container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.plant-containers {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
}
/* Example Grid approach */
.terrarium-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
gap: 1rem;
}
```
### 瀏覽器支援需求
- **Chrome/Edge**：最新 2 個版本
- **Firefox**：最新 2 個版本
- **Safari**：最新 2 個版本
- **行動瀏覽器**：iOS Safari、Chrome Mobile
## 交付項目
1. **更新後的 HTML 檔案**，增強語意結構
2. **重構後的 CSS 檔案**，採用現代版面配置技術
3. **截圖集**，展示跨瀏覽器相容性：
- 桌面視角（1920x1080）
- 平板視角（768x1024）
- 行動視角（375x667）
- 至少兩種不同瀏覽器
4. **README.md 檔案**，記錄：
- 你的版面配置選擇（Flexbox 與 Grid）及其原因
- 重構時遇到的挑戰
- 瀏覽器相容性說明
- 執行程式碼的指引
## 評分標準
| 評分項目 | 優秀表現 | 合格表現 | 需改進表現 |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| 佈局 | 完全使用 Flexbox 或 CSS Grid 進行重構；視覺效果吸引人且響應式設計 | 部分元素重構；部分使用 Flexbox 或 Grid | 幾乎未使用 Flexbox 或 Grid；佈局未改變 |
| 跨瀏覽器 | 提供多個瀏覽器的截圖；外觀一致 | 僅提供一個瀏覽器的截圖；有輕微不一致 | 未提供截圖或存在重大不一致 |
| 程式碼品質 | HTML/CSS 乾淨且組織良好；註解清晰 | 程式碼有些組織；註解較少 | 程式碼混亂；缺乏註解 |
| 評分項目 | 優秀 (4) | 合格 (3) | 進步中 (2) | 初學 (1) |
|----------|----------|----------|------------|----------|
| **版面配置實作** | 精通使用 Flexbox/Grid 與進階功能；完全響應式 | 正確實作並具良好響應式行為 | 基本實作，響應式有小問題 | 版面配置不完整或錯誤 |
| **程式碼品質** | CSS 清晰、組織良好、有意義註解及一致命名 | 組織良好，包含部分註解 | 組織尚可，有少量註解 | 組織混亂，不易理解 |
| **跨瀏覽器相容性** | 各必要瀏覽器完全一致並附截圖 | 兼容性良好，有少部分差異並記錄 | 有兼容性問題但不影響功能 | 重大相容性問題或缺少測試 |
| **響應式設計** | 優異的行動優先設計，斷點流暢 | 反應良好，斷點適中 | 基本響應功能，有版面問題 | 響應式有限或失效 |
| **文件說明** | 完整 README，含詳細說明與見解 | 良好文件，涵蓋所有需求 | 基本文件，說明不足 | 文件不完整或遺漏 |
## 有用資源
### 版面配置導引
- 📖 [Flexbox 完整指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid 完整指南](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox vs Grid — 選擇正確工具](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
### 瀏覽器測試工具
- 🛠️ [瀏覽器開發工具響應模式](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - 功能支援](https://caniuse.com/)
- 🛠️ [BrowserStack - 跨瀏覽器測試](https://www.browserstack.com/)
### 程式碼品質工具
- ✅ [CSS 驗證器](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML 驗證器](https://validator.w3.org/)
- ✅ [WebAIM 對比檢查器](https://webaim.org/resources/contrastchecker/)
## 額外挑戰
## 提示
🌟 **進階版面配置**：在設計中不同區塊同時使用 Flexbox 和 Grid
🌟 **動畫整合**：加入與新版面配置配合的 CSS 過渡或動畫
🌟 **暗黑模式**：實作基於 CSS 自訂屬性的主題切換
🌟 **容器查詢**：運用現代容器查詢技術實現組件級響應
- 查看 [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 指南。
- 使用瀏覽器開發工具測試響應式設計。
- 在程式碼中添加註解以提高清晰度。
> 💡 **記住**：目標不只是讓它能運作，而是理解為何你選擇的版面配置方法是該設計挑戰的最佳解決方案！
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不精確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

759
translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md
Unescape View File

@ -1,61 +1,205 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "61c14b27044861e5e69db35dd52c4403",
"translation_date": "2025-08-29T15:26:50+00:00",
"original_hash": "973e48ad87d67bf5bb819746c9f8e302",
"translation_date": "2026-01-06T14:13:53+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
"language_code": "tw"
}
-->
# 玻璃生態缸專案第 3 部分：DOM 操作與閉包
# Terrarium 專案第三部分：DOM 操作與 JavaScript 閉包
```mermaid
journey
title 你的 JavaScript DOM 旅程
section 基礎
了解 DOM: 3: Student
學習閉包: 4: Student
連接元素: 4: Student
section 互動
設置拖放事件: 4: Student
跟蹤座標: 5: Student
處理移動: 5: Student
section 精修
添加清理: 4: Student
測試功能: 5: Student
完成陸地生態箱: 5: Student
```
![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaa.tw.png)
> 筆記作者 [Tomomi Imura](https://twitter.com/girlie_mac)
歡迎來到網頁開發中最有趣的部分 —— 讓網頁變得互動！文件物件模型（DOM）就像 HTML 與 JavaScript 之間的橋樑，今天我們將利用它讓你的玻璃花房活起來。當 Tim Berners-Lee 創造第一個瀏覽器時，他設想了一個文件可以是動態且互動的網頁 —— DOM 讓這個願景成真。
我們還會探討 JavaScript 閉包，這個詞一開始可能聽起來嚇人。把閉包想像成幫你的函式製造「記憶口袋」，能記住重要資訊。就像你玻璃花房裡的每株植物都有自己的資料紀錄，追蹤位置。完成這堂課後，你會發現它們是多麼自然且實用。
現在我們要打造的是：一個使用者能自由拖放植物到任何位置的玻璃花房。你會學會 DOM 操作技巧，這些技巧是從拖放檔案上傳到互動遊戲的基礎。讓我們讓你的玻璃花房活起來吧。
```mermaid
mindmap
root((DOM & JavaScript))
DOM 樹
元素選取
屬性存取
事件處理
動態更新
事件
指標事件
滑鼠事件
觸控事件
事件監聽器
閉包
私有變數
函式作用域
記憶體持續性
狀態管理
拖放
位置追蹤
座標計算
事件生命週期
使用者互動
現代模式
事件委派
效能
跨裝置
無障礙
```
## 課前小測驗
[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/19)
## 認識 DOM：你的互動式網頁大門
文件物件模型（DOM）是 JavaScript 與你的 HTML 元素溝通的方式。當瀏覽器載入 HTML 頁面時，它會在記憶體中建立該頁的結構化表示 —— 這就是 DOM。你可以將它想成一棵家譜樹，每個 HTML 元素都是家族成員，JavaScript 能造訪、修改或重排它們。
DOM 操作可以將靜態網頁轉變為互動式網站。你每次看到按鈕在滑鼠懸停時變色、內容更新不需重新整理頁面，或元素可拖曳移動，背後都是 DOM 操作的功勞。
```mermaid
flowchart TD
A["文件"] --> B["HTML"]
B --> C["標頭"]
B --> D["主體"]
C --> E["標題"]
C --> F["元標籤"]
D --> G["H1: 我的生態箱"]
D --> H["Div: 頁面容器"]
H --> I["Div: 左側容器"]
H --> J["Div: 右側容器"]
H --> K["Div: 生態箱"]
I --> L["植物元素 1-7"]
J --> M["植物元素 8-14"]
L --> N["img#plant1"]
L --> O["img#plant2"]
M --> P["img#plant8"]
M --> Q["img#plant9"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style D fill:#e8f5e8
style H fill:#fff3e0
style N fill:#ffebee
style O fill:#ffebee
style P fill:#ffebee
style Q fill:#ffebee
```
![DOM 樹狀圖表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.tw.png)
> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
**DOM 強大的原因：**
- **提供**有結構的方式存取頁面上任意元素
- **允許**動態更新內容而不需重新整理頁面
- **支持**對點擊與拖曳等用戶互動即時回應
- **奠定**現代互動網頁應用的根基
## JavaScript 閉包：打造有組織且強大的程式碼
[JavaScript 閉包](https://developer.mozilla.org/docs/Web/JavaScript/Closures)就像給函式一個專屬的私有工作區，擁有持續的記憶能力。設想達爾文的加拉帕戈斯群島雀鳥根據環境發展出專屬的喙 —— 閉包同理，創造專屬功能，即使父函式執行完，仍記住特定上下文。
在我們的玻璃花房中，閉包幫助每株植物獨立記憶自己的位置。這個模式在專業 JavaScript 開發中無處不在，是值得理解的重要概念。
```mermaid
flowchart LR
A["dragElement(plant1)"] --> B["建立閉包"]
A2["dragElement(plant2)"] --> B2["建立閉包"]
B --> C["私有變數"]
B2 --> C2["私有變數"]
C --> D["pos1, pos2, pos3, pos4"]
C --> E["pointerDrag 函式"]
C --> F["elementDrag 函式"]
C --> G["stopElementDrag 函式"]
C2 --> D2["pos1, pos2, pos3, pos4"]
C2 --> E2["pointerDrag 函式"]
C2 --> F2["elementDrag 函式"]
C2 --> G2["stopElementDrag 函式"]
H["植物1記住它的位置"] --> B
H2["植物2記住它的位置"] --> B2
style B fill:#e8f5e8
style B2 fill:#e8f5e8
style C fill:#fff3e0
style C2 fill:#fff3e0
```
> 💡 **認識閉包**：閉包是 JavaScript 重要議題，許多開發者花好幾年才完全理解其理論面。今天我們重點在實際應用——隨著互動功能開發，閉包會自然出現。理解會隨觀察實際解決問題過程逐漸建立。
![DOM 和閉包](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.tw.png)
> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記
![DOM 樹狀圖表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.tw.png)
## 課前測驗
> DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/19)
這堂課，我們將完成互動玻璃花房專案，撰寫讓使用者能操作頁面中植物的 JavaScript。
### 簡介
## 開始前：做好準備迎接成功
操作 DOM（文件物件模型）是網頁開發中的一個關鍵部分。根據 [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) 的說法，「文件物件模型 (DOM) 是一種數據表示形式，用於描述構成網頁結構和內容的物件。」由於操作 DOM 的挑戰，許多開發者選擇使用 JavaScript 框架來管理 DOM，而不是使用原生 JavaScript，但我們將嘗試自己來完成！
你需要先前玻璃花房課程的 HTML 與 CSS 檔案 —— 我們將讓這個靜態設計變成可互動的。如果你是第一次加入，建議先完成之前的課程以取得重要背景。
此外，本課程將介紹 [JavaScript 閉包](https://developer.mozilla.org/docs/Web/JavaScript/Closures) 的概念。你可以將閉包理解為一個函數包裹著另一個函數，從而使內部函數能夠訪問外部函數的作用域。
我們將打造：
- 所有植物的 **平滑拖放功能**
- 位置的 **座標追蹤** 識別植物記憶位置
- 使用純原生 JavaScript 實作的 **完整互動介面**
- 運用閉包模式維持的 **乾淨有組織程式碼**
> JavaScript 閉包是一個廣泛且複雜的主題。本課程僅涉及最基本的概念。在這個玻璃生態缸的程式碼中，你會發現一個閉包：一個內部函數和一個外部函數的結構，使內部函數能夠訪問外部函數的作用域。若想深入了解其運作方式，請參閱 [詳細文檔](https://developer.mozilla.org/docs/Web/JavaScript/Closures)。
## 設定你的 JavaScript 檔案
我們將使用閉包來操作 DOM。
來建立一個讓玻璃花房可互動的 JavaScript 檔案。
可以將 DOM 想像成一棵樹，代表了網頁文件可以被操作的所有方式。各種 API（應用程式介面）被設計出來，讓程式員可以使用他們選擇的程式語言來訪問 DOM，並進行編輯、更改、重新排列或其他管理操作。
**第一步：建立腳本檔案**
![DOM 樹結構表示](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tw.png)
在你的 terrarium 資料夾中，建立一個名為 `script.js` 的新檔案。
> DOM 和對應的 HTML 標記的表示圖。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
**第二步：將 JavaScript 連結至你的 HTML**
在本課程中，我們將完成互動式玻璃生態缸專案，通過編寫 JavaScript 來讓使用者能夠操作頁面上的植物。
在 `index.html` 的 `<head>` 區段加入以下 script 標籤：
### 前置條件
```html
<script src="./script.js" defer></script>
```
你應該已經完成了玻璃生態缸的 HTML 和 CSS 部分。在本課程結束時，你將能夠通過拖放操作將植物移入或移出玻璃生態缸。
**為何 `defer` 屬性很重要：**
- **確保**你的 JavaScript 等待全部 HTML 載入完成
- **避免**JavaScript 嘗試取用尚未準備好的元素而產生錯誤
- **確保**所有植物元素都可被互動使用
- **比放在頁尾執行**有更好的效能
### 任務
> ⚠️ **重要提醒**：`defer` 屬性可避免常見的時間點問題。若沒用它，JavaScript 可能搶先於 HTML 載入前存取元素，導致錯誤。
在你的玻璃生態缸專案資料夾中，建立一個名為 `script.js` 的新檔案。在 `<head>` 區域中匯入該檔案：
---
```html
<script src="./script.js" defer></script>
```
## 將 JavaScript 與 HTML 元素連結
> 注意：在將外部 JavaScript 檔案匯入 HTML 時，使用 `defer` 屬性，這樣可以確保 JavaScript 只有在 HTML 完全加載後才執行。你也可以使用 `async` 屬性，允許腳本在 HTML 解析時執行，但在我們的情況下，確保 HTML 元素完全可用以進行拖放操作是很重要的。
---
在讓元素可拖放之前，JavaScript 需要先找到它們在 DOM 中的位置。這就像圖書館的分類系統 —— 有了編號，就能精準找到你要的書，並取得其所有內容。
## DOM 元素
我們會先用 `document.getElementById()` 方法進行對應。這就像有個精準的文件夾編號系統 —— 傳入 ID，即能精準定位 HTML 中的元素。
首先，你需要在 DOM 中建立對你想操作的元素的引用。在我們的例子中，這些元素是目前位於側邊欄的 14 個植物。
### 啟用所有植物拖曳功能
### 任務
在你的 `script.js` 中加入這段程式碼：
```html
```javascript
// 啟用所有14個植物的拖曳功能
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
@ -72,159 +216,556 @@ dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));
```
這裡發生了什麼？你正在引用文件，並在其 DOM 中尋找具有特定 Id 的元素。還記得我們在 HTML 課程中給每個植物圖片分配了唯一的 Id（例如 `id="plant1"`）嗎？現在你將利用這些 Id。識別每個元素後，你將該項目傳遞給一個名為 `dragElement` 的函數（稍後會建立）。因此，HTML 中的元素現在已啟用拖動功能，或者即將啟用。
**這段程式碼的目的：**
- **尋找** DOM 中每個植物元素的獨特 ID
- **取得**每個 HTML 元素的 JavaScript 引用
- **將**元素傳入即將建立的 `dragElement` 函式處理
- **準備**每株植物支援拖放互動
- **連結**你的 HTML 結構與 JavaScript 功能
> 🎯 **為什麼用 ID 而非 Class？** ID 提供每個特定元素獨一無二的識別，CSS Class 則適合用來設計多個元素的樣式。JavaScript 需要精準操控個別元素時，ID 提供了必要的精確性與效能。
> 💡 **專家小提示**：你會注意到程式碼為每株植物單獨呼叫 `dragElement()`。這確保每株植物擁有獨立拖放行為，這對流暢的使用者體驗至關重要。
### 🔄 **教學檢視點**
**DOM 連結理解**：進入拖曳功能前，確保你會：
- ✅ 解釋 `document.getElementById()` 如何定位 HTML 元素
- ✅ 理解為何每株植物要有獨立的唯一 ID
- ✅ 描述 `defer` 屬性的作用
- ✅ 識別 JavaScript 與 HTML 是如何經由 DOM 連結起來的
✅ 為什麼我們通過 Id 引用元素？為什麼不通過它們的 CSS 類名？你可以回顧之前的 CSS 課程來回答這個問題。
**快速自我測驗**：如果兩個元素有相同 ID，會發生什麼？為什麼 `getElementById()` 只會回傳一個元素？
*答案：ID 必須唯一，若重複只會回傳第一個*
---
## 閉包
## 建立拖曳元素閉包
現在你準備建立 `dragElement` 閉包，這是一個外部函數，包裹著一個或多個內部函數（在我們的例子中是三個）。
現在我們將打造拖曳功能的核心：一個管理拖曳行為的閉包。這個閉包包含多個內部函式，協同監控滑鼠移動並更新元素位置。
當一個或多個函數需要訪問外部函數的作用域時，閉包非常有用。以下是一個例子：
閉包非常適合此任務，因為它讓我們能建立「私有」變數，跨多次函式呼叫持續存在，讓每株植物擁有獨立的座標追蹤系統。
### 用簡單例子了解閉包
我用一個簡單例子來示範閉包概念：
```javascript
function displayCandy(){
let candy = ['jellybeans'];
function addCandy(candyType) {
candy.push(candyType)
}
addCandy('gumdrops');
function createCounter() {
let count = 0; // 這就像一個私有變數
function increment() {
count++; // 內部函數記住了外部變數
return count;
}
return increment; // 我們回傳內部函數
}
displayCandy();
console.log(candy)
```
在這個例子中，`displayCandy` 函數包裹了一個函數，該函數將新的糖果類型推入已存在於函數中的陣列中。如果你運行這段程式碼，`candy` 陣列將是未定義的，因為它是一個局部變數（僅限於閉包的作用域）。
✅ 如何讓 `candy` 陣列可訪問？嘗試將它移到閉包之外。這樣，該陣列將變為全域變數，而不是僅限於閉包的局部作用域。
const myCounter = createCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2
```
### 任務
**這個閉包模式的重點：**
- **建立**一個私有的 `count` 變數，只存在於閉包中
- **內部函式**能存取並修改封閉外層的變數（閉包機制）
- **當回傳**內部函式時，它仍然保有對該私有資料的連結
- **即使**`createCounter()` 執行結束，`count` 仍持續存在並記憶值
### 為什麼閉包最適合拖曳功能
每株植物都要記得自己目前位置座標。閉包為我們的專案帶來完美解決方案：
**對我們專案的關鍵優點：**
- **保持**每株植物私有的座標變數
- **保存**拖曳事件間的坐標資料
- **避免**不同可拖曳元素間的變數衝突
- **製造**乾淨且有組織的程式碼結構
> 🎯 **學習目標**：你不需立刻掌握閉包的全部細節。重點是了解閉包怎麼幫助我們組織程式和維持拖曳狀態。
```mermaid
stateDiagram-v2
[*] --> Ready: 頁面載入
Ready --> DragStart: 使用者按下（pointerdown）
DragStart --> Dragging: 滑鼠/手指移動（pointermove）
Dragging --> Dragging: 繼續移動
Dragging --> DragEnd: 使用者放開（pointerup）
DragEnd --> Ready: 重設以便下一次拖曳
state DragStart {
[*] --> CapturePosition
CapturePosition --> SetupListeners
SetupListeners --> [*]
}
state Dragging {
[*] --> CalculateMovement
CalculateMovement --> UpdatePosition
UpdatePosition --> [*]
}
state DragEnd {
[*] --> RemoveListeners
RemoveListeners --> CleanupState
CleanupState --> [*]
}
```
### 建立 dragElement 函式
在 `script.js` 中的元素聲明下，建立一個函數：
現在來建立主要處理所有拖曳邏輯的函式。將這個函式放在你的植物元素宣告後面：
```javascript
function dragElement(terrariumElement) {
//set 4 positions for positioning on the screen
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
// 初始化位置追蹤變數
let pos1 = 0, // 先前的滑鼠 X 位置
pos2 = 0, // 先前的滑鼠 Y 位置
pos3 = 0, // 當前的滑鼠 X 位置
pos4 = 0; // 當前的滑鼠 Y 位置
// 設定初始拖曳事件監聽器
terrariumElement.onpointerdown = pointerDrag;
}
```
`dragElement` 從腳本頂部的聲明中獲取其 `terrariumElement` 物件。然後，你為傳遞到函數中的物件設置了一些初始位置，這些位置的值為 `0`。這些是每個元素的局部變數，當你為每個元素添加拖放功能時，這些變數將被操作。玻璃生態缸將由這些被拖動的元素填充，因此應用程式需要跟蹤它們的放置位置。
此外，傳遞給該函數的 `terrariumElement` 被分配了一個 `pointerdown` 事件，這是 [web API](https://developer.mozilla.org/docs/Web/API) 的一部分，旨在幫助管理 DOM。`onpointerdown` 事件在按下按鈕時觸發，或者在我們的例子中，當一個可拖動的元素被點擊時觸發。該事件處理程序適用於 [網頁和行動瀏覽器](https://caniuse.com/?search=onpointerdown)，但有少數例外。
✅ [事件處理程序 `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) 在跨瀏覽器方面有更廣泛的支援；為什麼不在這裡使用它？想一想你試圖創建的精確螢幕互動類型。
**認識位置追蹤系統：**
- **`pos1` 和 `pos2`**：記錄舊滑鼠與新滑鼠位置差異
- **`pos3` 和 `pos4`**：追蹤當前滑鼠座標
- **`terrariumElement`**：該可拖曳的植物元素
- **`onpointerdown`**：使用者開始拖曳時觸發的事件
**閉包模式運作原理：**
- **為每株植物元素建立**私有位置變數
- **維持維護**這些變數於拖曳生命週期中
- **確保**每株植物獨立追蹤各自座標
- **透過 `dragElement` 函式**提供乾淨介面
### 為什麼用 Pointer 事件？
你可能會問為什麼用 `onpointerdown` 而不是熟悉的 `onclick`。原因如下：
| 事件類型 | 適用場景 | 注意事項 |
|----------|---------|----------|
| `onclick` | 簡單按鈕點擊 | 只能處理點擊並放開，無法拖曳 |
| `onpointerdown` | 支援滑鼠與觸控 | 新式，但當前已廣泛支持 |
| `onmousedown` | 僅桌面滑鼠 | 不支援行動裝置觸控 |
**Pointer 事件適合我們的原因：**
- **無論**使用滑鼠、手指或觸控筆都可良好運作
- **在筆電、平板、手機上**有一致操作體驗
- **能處理**真正的拖曳動作，而非僅點擊
- **提供**現代網頁應用期待的流暢體驗
> 💡 **前瞻未來**：Pointer 事件是現代用戶互動處理的標準，無需為滑鼠和觸控編寫兩套程式碼，超方便。
### 🔄 **教學檢視點**
**事件處理理解**：停下來確認你是否懂得：
- ✅ 為什麼用 pointer 事件而非 mouse 事件？
- ✅ 閉包變數如何在函式呼叫間持續存在？
- ✅ `preventDefault()` 在平滑拖曳中扮演什麼角色？
- ✅ 為何事件監聽器綁在 document 而非單一元素？
**實務連結**：想想你每天用的拖放介面：
- **檔案上傳**：把檔案拖進瀏覽器視窗
- **看板系統**：在欄位間移動任務卡
- **圖片庫**：調整照片排序
- **行動介面**：觸控螢幕滑動拖曳
---
## Pointerdrag 函數
## pointerDrag 函式：捕捉拖曳開始
`terrariumElement` 現在可以被拖動；當觸發 `onpointerdown` 事件時，函數 `pointerDrag` 被調用。在這行代碼下方添加該函數：`terrariumElement.onpointerdown = pointerDrag;`：
當使用者按下某株植物（無論用滑鼠或手指點擊），`pointerDrag` 函式會啟動。它擷取初始座標並設定拖曳系統。
### 任務
將這個函式放在你的 `dragElement` 閉包內，位置在這段 `terrariumElement.onpointerdown = pointerDrag;` 行之後：
```javascript
function pointerDrag(e) {
e.preventDefault();
console.log(e);
pos3 = e.clientX;
pos4 = e.clientY;
// 防止預設瀏覽器行為（如文字選取）
e.preventDefault();
// 捕捉初始滑鼠/觸控位置
pos3 = e.clientX; // 拖曳開始時的 X 座標
pos4 = e.clientY; // 拖曳開始時的 Y 座標
// 設置拖曳過程的事件監聽器
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
}
```
這裡發生了幾件事。首先，你通過使用 `e.preventDefault();` 阻止了 `pointerdown` 事件的預設行為。這樣你可以更好地控制介面的行為。
**逐步說明：**
- **阻止**防止瀏覽器默認行為干擾拖曳
- **紀錄**使用者開始拖曳時的精確座標
- **設定**持續拖曳移動的事件監聽器
- **準備**系統追蹤整個文件上的滑鼠／觸控移動
> 當你完全建立腳本檔案後，回到這行代碼並嘗試刪除 `e.preventDefault()` - 會發生什麼？
### 了解事件阻止
其次，在瀏覽器窗口中打開 `index.html`，並檢查介面。當你點擊一個植物時，你可以看到如何捕獲 'e' 事件。深入檢查該事件，看看一次 `pointerdown` 事件收集了多少資訊！
`e.preventDefault()` 是平滑拖曳的重要一行：
接下來，注意如何將局部變數 `pos3` 和 `pos4` 設置為 `e.clientX`。你可以在檢查面板中找到 `e` 的值。這些值捕獲了你點擊或觸摸植物時的 x 和 y 座標。你需要對植物的行為進行精細控制，因此需要跟蹤它們的座標。
**若不阻止，瀏覽器可能會：**
- **在拖曳時**選取頁面文字
- **在右鍵拖曳時**彈出上下文選單
- **干擾**我們自訂的拖曳行為
- **產生**視覺上的拖曳異常
✅ 現在是否更清楚為什麼整個應用程式是用一個大的閉包構建的？如果不是閉包，你將如何為 14 個可拖動的植物維持作用域？
> 🔍 **實驗**：結束課程後試著移除 `e.preventDefault()`，感受一下拖曳行為的差異。你將會很快體會它的重要性！
完成初始函數，通過在 `pos4 = e.clientY` 下添加另外兩個指針事件操作：
### 座標追蹤系統
```html
屬性 `e.clientX` 與 `e.clientY` 提供精確滑鼠／觸控位置：
| 屬性 | 測量內容 | 使用情境 |
|-------|----------|----------|
| `clientX` | 相對視窗的水平位置 | 追蹤左右移動 |
| `clientY` | 相對視窗的垂直位置 | 追蹤上下移動 |
**理解這些座標：**
- **提供** 完美像素的定位資訊
- **隨著** 使用者移動指標即時更新
- **在不同螢幕尺寸和縮放級別下仍保持** 一致性
- **讓** 拖曳操作流暢且反應迅速
### 設置文件級事件監聽器
請注意我們將移動和停止事件附加到整個 `document`，而不僅是植物元素：
```javascript
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
```
現在你正在指示植物隨著指針移動而被拖動，並在取消選擇植物時停止拖動手勢。`onpointermove` 和 `onpointerup` 都是與 `onpointerdown` 相同 API 的一部分。介面現在會拋出錯誤，因為你尚未定義 `elementDrag` 和 `stopElementDrag` 函數，因此接下來建立這些函數。
## elementDrag 和 stopElementDrag 函數
**為何附加到 document：**
- **即使滑鼠離開植物元素也繼續** 追蹤
- **防止** 使用者快速移動時拖曳中斷
- **提供** 整個螢幕的平滑拖曳體驗
- **處理** 游標移出瀏覽器視窗的邊緣案例
你將通過添加另外兩個內部函數來完成閉包，這些函數將處理拖動植物和停止拖動時發生的事情。你希望的行為是，隨時可以拖動任何植物，並將其放置在螢幕上的任何位置。這個介面非常靈活（例如，沒有特定的放置區域），允許你自由設計玻璃生態缸，添加、移除和重新定位植物。
> ⚡ **效能提醒**：拖曳停止時我們會清除這些文件級監聽器，以避免記憶體洩漏和效能問題。
### 任務
## 完成拖曳系統：移動與清理
在 `pointerDrag` 的結束大括號後添加 `elementDrag` 函數：
現在我們將新增兩個函式，分別處理真正的拖曳移動和拖曳停止時的清理。這些函式協同工作，創造平滑且靈敏的植物移動體驗。
### elementDrag 函式：追蹤移動
在 `pointerDrag` 函式的結尾大括號後新增 `elementDrag` 函式：
```javascript
function elementDrag(e) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
console.log(pos1, pos2, pos3, pos4);
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
// 計算自上次事件以來移動的距離
pos1 = pos3 - e.clientX; // 水平方向移動的距離
pos2 = pos4 - e.clientY; // 垂直方向移動的距離
// 更新目前位置追蹤
pos3 = e.clientX; // 新的目前 X 位置
pos4 = e.clientY; // 新的目前 Y 位置
// 將移動套用到元素的位置
terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
}
```
在這個函數中，你對先前設置為局部變數的 `pos1` 到 `pos4` 進行了大量操作。這裡發生了什麼？
當你拖動時，你通過將 `pos3`（之前設置為 `e.clientX`）減去當前的 `e.clientX` 值來重新分配 `pos1`。對 `pos2` 進行了類似的操作。然後，你將 `pos3` 和 `pos4` 重置為元素的新 X 和 Y 座標。你可以在拖動時在控制台中觀察這些變化。接著，你操作植物的 CSS 樣式，根據 `pos1` 和 `pos2` 的新位置計算植物的頂部和左側 X 和 Y 座標，並設置其新位置。
> `offsetTop` 和 `offsetLeft` 是 CSS 屬性，用於根據父元素設置元素的位置；父元素可以是任何非 `static` 定位的元素。
所有這些位置的重新計算使你能夠微調玻璃生態缸及其植物的行為。
### 任務
**理解座標計算：**
- **`pos1` 和 `pos2`**：計算滑鼠自上一更新以來的移動距離
- **`pos3` 和 `pos4`**：儲存當前滑鼠位置以供下次計算
- **`offsetTop` 和 `offsetLeft`**：取得元素當前在頁面上的位置
- **減法邏輯**：依滑鼠移動距離來移動元素
```mermaid
sequenceDiagram
participant User
participant Mouse
participant JavaScript
participant Plant
User->>Mouse: 在 (100, 50) 開始拖曳
Mouse->>JavaScript: pointerdown 事件
JavaScript->>JavaScript: 儲存初始位置 (pos3=100, pos4=50)
JavaScript->>JavaScript: 設定移動/放開監聽器
User->>Mouse: 移動到 (110, 60)
Mouse->>JavaScript: pointermove 事件
JavaScript->>JavaScript: 計算：pos1=10, pos2=10
JavaScript->>Plant: 更新：left += 10px, top += 10px
Plant->>Plant: 在新位置渲染
User->>Mouse: 在 (120, 65) 釋放
Mouse->>JavaScript: pointerup 事件
JavaScript->>JavaScript: 移除監聽器
JavaScript->>JavaScript: 重置為下一次拖曳
```
**移動計算說明：**
1. **測量** 舊滑鼠位置與新滑鼠位置的差異
2. **計算** 應移動元素的距離
3. **即時更新** 元素的 CSS 位置屬性
4. **儲存** 新位置作為下一次移動計算基準
### 數學的視覺化表示
```mermaid
sequenceDiagram
participant Mouse
participant JavaScript
participant Plant
Mouse->>JavaScript: 從 (100,50) 移動到 (110,60)
JavaScript->>JavaScript: 計算：向右移動 10px，向下移動 10px
JavaScript->>Plant: 更新位置，向右 +10px，向下 +10px
Plant->>Plant: 在新位置渲染
```
### stopElementDrag 函式：進行清理
完成介面的最後一步是在 `elementDrag` 的結束大括號後添加 `stopElementDrag` 函數：
在 `elementDrag` 函式結尾大括號後新增清理函式：
```javascript
function stopElementDrag() {
document.onpointerup = null;
document.onpointermove = null;
// 移除文件層級的事件監聽器
document.onpointerup = null;
document.onpointermove = null;
}
```
這個小函數將 `onpointerup` 和 `onpointermove` 事件重置為 null，這樣你可以重新開始拖動植物，或者開始拖動新的植物。
**為何清理很重要：**
- **防止** 因事件監聽器未清除而造成記憶體洩漏
- **停止** 使用者放開植物時的拖曳行為
- **允許** 其他元素可獨立進行拖曳
- **重設** 系統為下一次拖曳操作做準備
**不清理會發生什麼：**
- 事件監聽器即使拖曳停止仍持續運行
- 隨著未使用的監聽器累積，效能降低
- 與其他元素互動時行為出錯
- 瀏覽器資源浪費於不必要的事件處理
### 理解 CSS 位置屬性
我們的拖曳系統操作兩個關鍵的 CSS 屬性：
| 屬性 | 控制內容 | 我們如何使用 |
|------|---------|--------------|
| `top` | 與頂部邊界的距離 | 拖曳垂直定位 |
| `left` | 與左側邊界的距離 | 拖曳水平定位 |
**關於 offset 屬性的重點：**
- **`offsetTop`**：相對於最近位置設定的父元素頂部的距離
- **`offsetLeft`**：相對於最近位置設定的父元素左側的距離
- **定位上下文**：這些值相對的參考是最近的有定位祖先元素
- **即時更新**：修改 CSS 屬性時立刻改變
> 🎯 **設計理念**：此拖曳系統故意保持彈性——沒有“放置區域”或限制。使用者可以把植物放在任何位置，讓他們完整掌控植栽設計。
## 整合所有：您的完整拖曳系統
✅ 如果你不將這些事件設置為 null 會發生什麼？
恭喜！您剛剛用純 JavaScript 建立了一個複雜的拖放系統。完整的 `dragElement` 函式現在包含一個強大的閉包，能管理：
現在你已經完成了你的專案！
**您的閉包達成了什麼：**
- **維持** 每個植物獨立的私有位置變數
- **處理** 從開始到結束的完整拖曳生命週期
- **提供** 全螢幕範圍的平滑、靈敏移動
- **適當清理** 資源避免記憶體洩漏
- **創造** 直覺且具創意的生態箱設計介面
🥇恭喜！你已經完成了你的美麗玻璃生態缸！![完成的玻璃生態缸](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.tw.png)
### 測試您的互動生態箱
現在測試您的互動生態箱吧！在瀏覽器打開 `index.html`，試試以下功能：
1. **按住並點擊** 任一植物開始拖曳
2. **移動滑鼠或手指**，觀察植物平滑跟隨移動
3. **放開** 放下植物於新的位置
4. **嘗試** 不同排列方式以探索介面
🥇 **成就獎章**：您已經使用專業開發者每日運用的核心概念，創造出一個完全互動的網頁應用。該拖放功能背後原理也被用於檔案上傳、看板系統與其他許多互動介面。
### 🔄 **教學自我檢測**
**完整系統理解**：驗證你對拖曳系統的掌握：
- ✅ 閉包如何維持每株植物的獨立狀態？
- ✅ 為何座標計算數學對流暢移動很重要？
- ✅ 如果忘記清理事件監聽器會怎樣？
- ✅ 此模式如何擴展到更複雜的互動？
**程式碼品質反思**：回顧您的完整解決方案：
- **模組化設計**：每個植物擁有自己的閉包實例
- **事件效率**：監聽器適當設定與清理
- **跨裝置支援**：同時適用桌面與行動裝置
- **效能意識**：避免記憶體洩漏和重複計算
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.tw.png)
---
## 🚀挑戰
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
為你的閉包添加新的事件處理程序，讓植物有更多的互動功能；例如，雙擊植物將其移到最前面。發揮創意吧！
**描述：** 為生態箱專案新增重置功能，將所有植物以平滑動畫帶回原始位置。
**提示：** 創建一個重置按鈕，點擊時使用 CSS 過渡效果，將所有植物從側邊欄的原始位置動畫地移回。函式需在頁面載入時儲存原始位置，按下重置時以一秒劃時間平滑移動。
欲了解更多，請參考 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 。
## 🚀 額外挑戰：提升您的技能
準備將生態箱提升到新層級嗎？嘗試實作以下增強功能：
**創意擴展：**
- **雙擊** 植物使其置頂（z-index 操作）
- **添加視覺回饋**，例如滑鼠懸停時微光效果
- **實作邊界限制**，防止植物被拖曳出生態箱外
- **建立儲存功能**，用 localStorage 記錄植物位置
- **新增音效**，在拾起和放下植物時播放
> 💡 **學習機會**：這些挑戰會教你新的 DOM 操控、事件處理與使用體驗設計技術。
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/20)
## 回顧與自學
## 複習與自學：深化理解
你已掌握 DOM 操控和閉包基礎，但學無止境！以下是擴展知識與技能的方向。
### 替代拖放方法
我們用 pointer 事件達最大彈性，但網頁開發還有多種選擇：
| 方法 | 適用情境 | 學習價值 |
|------|----------|----------|
| [HTML 拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | 檔案上傳、正式拖放區域 | 了解瀏覽器原生能力 |
| [觸控事件](https://developer.mozilla.org/docs/Web/API/Touch_events) | 行動專用互動 | 行動先行開發模式 |
| CSS `transform` 屬性 | 平滑動畫 | 效能優化技術 |
### 進階 DOM 操控主題
**學習下一步：**
- **事件代理**：高效管理多元素事件
- **Intersection Observer**：偵測元素出入視口
- **Mutation Observer**：監聽 DOM 結構變更
- **Web Components**：構建可重用封裝式 UI 元件
- **虛擬 DOM 概念**：理解框架如何優化 DOM 更新
### 必備持續學習資源
**技術文件：**
- [MDN Pointer Events 指南](https://developer.mozilla.org/docs/Web/API/Pointer_events) - 全面 pointer 事件參考
- [W3C Pointer Events 規範](https://www.w3.org/TR/pointerevents1/) - 官方標準文件
- [JavaScript 閉包深入](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - 進階閉包模式
**瀏覽器相容性：**
- [CanIUse.com](https://caniuse.com/) - 瀏覽器功能支援狀況
- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - 詳細相容性資料
**練習機會：**
- **製作** 類似拖曳機制的拼圖遊戲
- **創建** 支援拖放的看板任務管理
- **設計** 可拖動照片排列的圖庫
- **嘗試** 行動裝置觸控手勢操作
> 🎯 **學習策略**：最佳鞏固方式是多練習。嘗試建造不同變化的拖曳介面——每個專案都會教你更多用戶互動與 DOM 操控技巧。
### ⚡ **您可在接下來 5 分鐘內做些什麼**
- [ ] 開啟瀏覽器開發者工具於主控台輸入 `document.querySelector('body')`
- [ ] 嘗試用 `innerHTML` 或 `textContent` 修改網頁文字
- [ ] 對任何按鈕或連結增加點擊事件監聽器
- [ ] 使用元素面板檢查 DOM 樹結構
### 🎯 **這一小時您可以達成**
- [ ] 完成課後小測驗並複習 DOM 操控概念
- [ ] 建立一個響應使用者點擊的互動網頁
- [ ] 練習各種事件類型的事件處理（click、mouseover、keypress）
- [ ] 打造簡易代辦清單或計數器應用
- [ ] 探索 HTML 元素與 JavaScript 物件關係
### 📅 **您的 JavaScript 一週學習計畫**
- [ ] 完成具拖放功能的互動生態箱專案
- [ ] 精通事件代理以提升事件處理效率
- [ ] 學習事件迴圈與非同步 JavaScript
- [ ] 練習閉包，建立帶有私有狀態的模組
- [ ] 探索最新 DOM API，如 Intersection Observer
- [ ] 不用框架建構互動元件
### 🌟 **您的 JavaScript 一個月精通計畫**
- [ ] 使用純 JavaScript 建置複雜單頁應用程式
- [ ] 學習並比較現代框架（React、Vue、Angular）與純 DOM 操控
- [ ] 參與 JavaScript 開源專案貢獻
- [ ] 精通高級概念如 Web Components 和自訂元素
- [ ] 建構效能優化的網頁應用
- [ ] 教授他人 DOM 操控與 JavaScript 基礎
## 🎯 您的 JavaScript DOM 精通時間軸
```mermaid
timeline
title DOM 與 JavaScript 學習進度
section 基礎 (15 分鐘)
DOM 理解: 元素選取方法
: 樹狀結構導覽
: 屬性存取模式
section 事件處理 (20 分鐘)
使用者互動: 指標事件基礎
: 事件監聽器設定
: 跨裝置相容性
: 事件阻止技巧
section 閉包 (25 分鐘)
範圍管理: 私有變數建立
: 函式持續存在
: 狀態管理模式
: 記憶體效率
section 拖曳系統 (30 分鐘)
互動功能: 座標追蹤
: 位置計算
: 移動數學
: 清理程序
section 進階模式 (45 分鐘)
專業技能: 事件委派
: 效能優化
: 錯誤處理
: 無障礙考量
section 框架理解 (1 週)
現代開發: 虛擬 DOM 概念
: 狀態管理函式庫
: 元件架構
: 建置工具整合
section 專家級 (1 個月)
進階 DOM API: 交叉觀察器
: 變異觀察器
: 自訂元素
: 網頁元件
```
### 🛠️ 您的 JavaScript 工具包總結
雖然在螢幕上拖動元素看起來很簡單，但根據你想要的效果，有許多方法可以實現，並且可能會遇到許多陷阱。事實上，有一個完整的 [拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) 可以嘗試。我們在本模組中沒有使用該 API，因為我們想要的效果有些不同，但你可以在自己的專案中嘗試這個 API，看看能實現什麼。
完成本課後，您已具備：
- **DOM 精通**：元素選取、屬性操作與樹狀結構導覽
- **事件專業**：跨裝置指標事件處理
- **閉包理解**：私有狀態管理與函式持續性
- **互動系統**：完整拖放功能從零開始實作
- **效能意識**：適當事件清理與記憶體管理
- **現代模式**：職業開發中常見程式組織技術
- **用戶體驗**：打造直覺、響應快速的介面
在 [W3C 文檔](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文檔](https://developer.mozilla.org/docs/Web/API/Pointer_events) 上找到更多關於指針事件的資訊。
**職業技能收穫**：您已使用與以下同樣技術開發功能：
- **Trello/看板系統**：欄位間拖曳卡片
- **檔案上傳系統**：拖放檔案處理
- **圖庫**：照片排列介面
- **行動應用**：觸控式互動模式
隨時使用 [CanIUse.com](https://caniuse.com/) 檢查瀏覽器的支援能力。
**下一步**：您已準備探索基於這些基礎 DOM 概念的現代框架如 React、Vue 或 Angular！
## 作業
[進一步練習 DOM](assignment.md)
[多練習 DOM 操作](assignment.md)
---
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對於因使用本翻譯所導致的任何誤解或誤釋概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

136
translations/tw/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
Unescape View File

@ -1,23 +1,139 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "22fb6c3cb570c47f1ac65048393941fa",
"translation_date": "2025-08-23T22:31:45+00:00",
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
"translation_date": "2026-01-06T14:16:15+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
"language_code": "tw"
}
-->
# 更深入了解 DOM
# DOM 元素調查作業
## 指導說明
## 概述
透過「採用」一個 DOM 元素來進一步研究 DOM。造訪 MDN 的 [DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，選擇一個介面。在網頁上找到它的使用範例，並撰寫一段解釋說明它是如何被使用的。
現在你已經親身體驗了 DOM 操作的威力，是時候探索更廣泛的 DOM 介面世界了。這個作業將加深你對不同網頁技術如何與 DOM 互動的理解，而不僅僅是拖曳元素。
## 學習目標
完成此作業後，你將能夠：
- **研究** 並深入理解特定的 DOM 介面
- **分析** 真實世界中 DOM 操作的實作
- **連結** 理論概念與實務應用
- **發展** 技術文件撰寫與分析能力
## 指示
### 步驟 1：選擇你的 DOM 介面
造訪 MDN 的完整[DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，選擇一個你感興趣的介面。你可以考慮從以下分類中挑選以增加多樣性：
**初學者友善選項：**
- `Element.classList` - 動態管理 CSS 類別
- `Document.querySelector()` - 進階元素選取
- `Element.addEventListener()` - 指標事件以外的事件處理
- `Window.localStorage` - 用戶端資料儲存
**中級挑戰：**
- `Intersection Observer API` - 偵測元素可見性
- `MutationObserver` - 監視 DOM 變更
- `Drag and Drop API` - 我們指標基礎方法的替代方案
- `Geolocation API` - 存取使用者位置
**進階探索：**
- `Web Components` - 自訂元素與 Shadow DOM
- `Canvas API` - 程式化繪圖
- `Web Workers` - 背景處理
- `Service Workers` - 離線功能
### 步驟 2：研究並撰寫文件
製作一份全面的分析（300-500 字），內容包含：
#### 技術概述
- **定義** 你選擇的介面是什麼，使用簡明易懂的語言說明
- **說明** 它提供的主要方法、屬性或事件
- **描述** 此介面設計用以解決的問題類型
#### 真實世界的實作
- **尋找** 一個使用你選擇介面的網站（可透過檢查程式碼或研究範例）
- **紀錄** 具體的實作方式，若可行附上程式碼片段
- **分析** 為何開發者會採用這種方法
- **說明** 它如何提升使用者體驗
#### 實務應用
- **比較** 你的介面與我們在玻璃罐專案中使用的技術
- **建議** 你的介面如何增強或擴展玻璃罐功能
- **指出** 其他適合使用此介面的專案範例
### 步驟 3：程式碼範例
包含一個簡單、可運行的程式碼範例，展示你的介面使用方式，該程式碼應該：
- **功能完整** - 測試時能正常運作
- **有註解** - 解釋每個部分的作用
- **相關** - 與實際使用案例連結
- **易於初學者理解** - 讓學網頁開發的人易於了解
## 提交格式
以清楚標題結構組織你的提交內容：
```markdown
# [Interface Name] DOM Investigation
## What It Does
[Technical overview]
## Real-World Example
[Website analysis and implementation details]
## Code Demonstration
[Your working example with comments]
## Reflection
[How this connects to our terrarium project and future applications]
```
## 評分標準
| 評分項目 | 優秀 | 合格 | 需要改進 |
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
| | 提供段落式說明，並附有範例 | 提供段落式說明，但未附範例 | 未提供任何說明 |
| 評分項目 | 優異 (A) | 良好 (B) | 進步中 (C) | 需改進 (D) |
|----------|----------------|----------------|------------------|------------------|
| **技術理解** | 展示深入理解，解釋精確且用詞正確 | 展示紮實理解，解釋大致準確 | 基本理解，有部分誤解 | 理解不足，有重大錯誤 |
| **真實世界分析** | 確實辨認並深入分析具體實作範例 | 找出範例且分析適當 | 有範例但分析不夠深入 | 例子模糊或不準確 |
| **程式碼範例** | 可運作且註解良好的示範程式碼 | 功能正常且註解適中 | 程式可用但註解較少 | 程式錯誤或解釋不清楚 |
| **寫作品質** | 文字清楚、有吸引力，結構與技術溝通良好 | 組織佳且技術寫作良好 | 組織與清晰度適中 | 組織差或表達不清 |
| **批判思考** | 提出深入連結與創新應用建議 | 良好的分析與相關連結 | 部分分析但可更深入 | 缺乏批判思考證據 |
## 成功小撇步
**研究策略：**
- **從** MDN 文件開始，取得權威資訊
- **尋找** GitHub 或 CodePen 的程式碼範例
- **利用** 瀏覽器開發者工具檢視熱門網站
- **觀看** 教學影片以輔助理解
**寫作指南：**
- **用** 自己的話取代文件複製
- **包含** 具體範例與程式碼片段
- **像對朋友解釋** 談技術概念
- **將** 你的介面與更廣泛的網頁開發概念連結
**程式碼範例靈感：**
- **製作** 展示介面主要功能的簡單示範
- **結合** 玻璃罐專案的概念（如適用）
- **重點放在** 功能而非視覺設計
- **測試** 程式碼確保正常運作
## 提交期限
[請在此填寫截止日期]
## 有問題嗎？
如果對本作業的任何部分有疑問，請隨時提問！這個調查將深化你對 DOM 如何實現我們日常互動式網頁體驗的理解。
---
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或誤釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

43
translations/tw/3-terrarium/README.md
Unescape View File

@ -1,43 +1,30 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
"translation_date": "2025-08-23T22:23:15+00:00",
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
"translation_date": "2026-01-06T13:21:56+00:00",
"source_file": "3-terrarium/README.md",
"language_code": "tw"
}
-->
# 我的微型植物園：一個學習 HTML、CSS 和使用 JavaScript 操控 DOM 的專案 🌵🌱
## 部署你的 Terrarium
一個小型的拖放程式練習。通過一些 HTML、JS 和 CSS，你將能夠建立一個網頁介面，為其設計樣式，甚至添加多種互動功能。
你可以使用 **Azure 靜態 Web 應用程式** 在網路上部署或發佈你的 Terrarium。
![我的微型植物園](../../../3-terrarium/images/screenshot_gray.png)
1. 分叉此儲存庫
# 課程
2. 按下此按鈕 👇
1. [HTML 入門](./1-intro-to-html/README.md)
2. [CSS 入門](./2-intro-to-css/README.md)
3. [DOM 和 JS 閉包入門](./3-intro-to-DOM-and-closures/README.md)
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
## 致謝
3. 按照設定精靈建立你的應用程式。
- 將 **應用程式根目錄** 設定為 `/solution` 或你程式碼庫的根目錄。
- 此應用程式中沒有 API，因此可以跳過 API 配置。
- 系統將自動建立 `.github` 資料夾，以協助 Azure 靜態 Web 應用程式建置並發佈你的應用程式。
由 [Jen Looper](https://www.twitter.com/jenlooper) 用 ♥️ 編寫
通過 CSS 創建的微型植物園靈感來自 Jakub Mandra 的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
藝術作品由 [Jen Looper](http://jenlooper.com) 使用 Procreate 手繪完成。
## 部署你的微型植物園
你可以使用 Azure 靜態網頁應用程式將你的微型植物園部署或發佈到網路上。
1. Fork 此儲存庫
2. 按下這個按鈕
[![部署到 Azure 按鈕](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. 按照向導步驟建立你的應用程式。請確保將應用程式根目錄設置為 `/solution` 或你的程式碼根目錄。此應用程式中沒有 API，因此不需要添加相關內容。一個 GitHub 資料夾將會在你 Fork 的儲存庫中建立，這將幫助 Azure 靜態網頁應用程式的建置服務，建置並發佈你的應用程式到一個新的 URL。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們盡力確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為具權威性的依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

280
translations/tw/4-typing-game/README.md
Unescape View File

@ -1,42 +1,290 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "957547b822c40042e07d591c4fbfde4f",
"translation_date": "2025-08-24T00:17:01+00:00",
"original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
"translation_date": "2026-01-06T13:21:04+00:00",
"source_file": "4-typing-game/README.md",
"language_code": "tw"
}
-->
# 事件驅動程式設計 - 建立一個打字遊戲
# 事件驅動程式設計 - 建立一款打字遊戲
```mermaid
journey
title 你的打字遊戲開發歷程
section 基礎
規劃遊戲結構: 3: Student
設計使用者介面: 4: Student
設定 HTML 元素: 4: Student
section 功能
處理使用者輸入: 4: Student
記錄時間: 5: Student
計算準確度: 5: Student
section 功能特色
添加視覺反饋: 5: Student
實作遊戲邏輯: 5: Student
打磨體驗: 5: Student
```
## 簡介
打字是開發者最被低估的技能之一。能夠快速地將腦中的想法轉移到編輯器中，可以讓創意自由流動。而學習的最佳方式之一就是玩遊戲！
這是每位開發者都知道但很少談論的事：打字快是一種超能力！🚀 想想看 — 你把腦中的想法更快輸入到程式編輯器中，創意就能流暢發揮。這就像在你的思緒與螢幕之間有條直接的管線。
> 那麼，讓我們來建立一個打字遊戲吧！
```mermaid
pie title 遊戲特色
"即時反饋" : 25
"績效追蹤" : 20
"互動式介面" : 20
"計時系統" : 15
"引言管理" : 10
"結果顯示" : 10
```
想知道提升這項技能的最好方法之一嗎？你猜對了 — 我們要一起做個遊戲！
你將使用到目前為止學到的 JavaScript、HTML 和 CSS 技能來創建一個打字遊戲。遊戲會向玩家展示一段隨機的引言（我們使用的是 [福爾摩斯](https://en.wikipedia.org/wiki/Sherlock_Holmes) 的引言），並計時玩家準確輸入這段文字所需的時間。你將使用到目前為止學到的 JavaScript、HTML 和 CSS 技能來創建這個打字遊戲。
```mermaid
flowchart LR
A[玩家開始遊戲] --> B[顯示隨機引用]
B --> C[玩家輸入字元]
C --> D{字元正確嗎？}
D -->|是| E[綠色高亮]
D -->|否| F[紅色高亮]
E --> G[更新準確率]
F --> G
G --> H{引用完成？}
H -->|否| C
H -->|是| I[計算每分鐘字數]
I --> J[顯示結果]
J --> K[再玩一次？]
K -->|是| B
K -->|否| L[遊戲結束]
style A fill:#e1f5fe
style D fill:#fff3e0
style E fill:#e8f5e8
style F fill:#ffebee
style I fill:#f3e5f5
```
> 讓我們一起打造一款超棒的打字遊戲吧！
準備好將你學過的 JavaScript、HTML 和 CSS 技能派上用場了嗎？我們將建立一款打字遊戲，挑戰來自傳奇偵探 [福爾摩斯](https://en.wikipedia.org/wiki/Sherlock_Holmes) 的隨機語錄。遊戲會記錄你打字的速度與正確性 — 相信我，比你想像中還要上癮！
```mermaid
mindmap
root((打字遊戲開發))
User Interface
Input Elements
Visual Feedback
Responsive Design
Accessibility
Game Logic
Quote Selection
Timer Management
Accuracy Tracking
Score Calculation
Event Handling
Keyboard Input
Button Clicks
Real-time Updates
Game State Changes
Performance Metrics
Words Per Minute
Character Accuracy
Error Tracking
Progress Display
User Experience
Immediate Feedback
Clear Instructions
Engaging Content
Achievement System
```
![demo](../../../4-typing-game/images/demo.gif)
## 先決條件
## 你需要具備的知識
本課程假設你已熟悉以下概念：
```mermaid
flowchart TD
A[使用者操作] --> B{事件類型?}
B -->|按鍵| C[鍵盤事件]
B -->|按鈕點擊| D[滑鼠事件]
B -->|計時器| E[時間事件]
C --> F[檢查字元]
D --> G[開始/重設遊戲]
E --> H[更新計時器]
F --> I{正確嗎?}
I -->|是| J[標示綠色]
I -->|否| K[標示紅色]
J --> L[更新分數]
K --> L
L --> M[檢查遊戲狀態]
G --> N[產生新引用]
H --> O[顯示時間]
M --> P{遊戲完成?}
P -->|是| Q[顯示結果]
P -->|否| R[繼續遊戲]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#fff3e0
style Q fill:#f3e5f5
```
在開始之前，請確保你熟悉以下概念（如果需要快速複習也沒關係—我們都經歷過！）：
- 建立文字輸入框和按鈕控制項
- CSS 和使用類別設定樣式
- 建立文字輸入和按鈕控制項
- CSS 及使用類別設定樣式
- JavaScript 基礎
- 建立陣列
- 生成隨機數
- 獲取當前時間
- 產生隨機數字
- 取得目前時間
如果感覺某些稍微生疏，完全沒問題！有時最好的鞏固方法就是直接動手做專案，邊做邊學。
### 🔄 **教學小檢視**
**基礎評估**：開始開發前，請確定你了解：
- ✅ HTML 表單和輸入元素的運作
- ✅ CSS 類別與動態樣式
- ✅ JavaScript 事件監聽與處理程序
- ✅ 陣列操作與隨機選取
- ✅ 時間測量與計算
**快速自我測試**：你能解釋這些概念如何在互動遊戲中結合嗎？
- **事件** 在使用者互動時觸發元素
- **處理程序** 處理事件並更新遊戲狀態
- **CSS** 提供使用者操作的視覺回饋
- **時間控制** 支援效能測量和遊戲進度
## 課程
```mermaid
quadrantChart
title 輸入遊戲技能發展
x-axis 初學者 --> 專家
y-axis 靜態 --> 互動式
quadrant-1 進階遊戲
quadrant-2 即時應用程式
quadrant-3 基本網頁
quadrant-4 互動網站
HTML Forms: [0.3, 0.2]
CSS Styling: [0.4, 0.3]
Event Handling: [0.7, 0.8]
Game Logic: [0.8, 0.9]
Performance Tracking: [0.9, 0.7]
```
## 開始動手做吧！
[使用事件驅動程式設計建立打字遊戲](./typing-game/README.md)
## 致謝
### ⚡ **你接下來的 5 分鐘可以做什麼**
- [ ] 開啟瀏覽器主控台，嘗試使用 `addEventListener` 監聽鍵盤事件
- [ ] 建立簡單的 HTML 頁面，含輸入欄位，測試打字偵測
- [ ] 練習字串比對，將打字文字與目標文本做比較
- [ ] 嘗試 `setTimeout`，熟悉計時函數
### 🎯 **下一個小時你可以完成什麼**
- [ ] 完成課後測驗，理解事件驅動程式設計
- [ ] 建立簡易版打字遊戲，包括文字驗證
- [ ] 新增正確與錯誤打字的視覺回饋
- [ ] 根據速度與正確率實作簡單計分系統
- [ ] 用 CSS 美化遊戲界面
### 📅 **你的週遊戲開發計劃**
- [ ] 完成具備所有功能與精緻度的完整打字遊戲
- [ ] 增加難度等級，詞彙複雜度分級
- [ ] 實作使用者統計追蹤（每分鐘字數、準確率趨勢）
- [ ] 製作音效與動畫，提升使用體驗
- [ ] 讓遊戲響應式並支援觸控裝置
- [ ] 在線上分享遊戲，收集使用者反饋
### 🌟 **你的月度互動式開發計劃**
- [ ] 建造多款探索不同互動模式的遊戲
- [ ] 學習遊戲迴圈、狀態管理及效能優化
- [ ] 參與開源遊戲開發專案
- [ ] 精通高級時間控制與流暢動畫製作
- [ ] 建立展示多種互動應用的作品集
- [ ] 指導其他對遊戲開發與互動設計有興趣的人
## 🎯 你的打字遊戲專精時程
```mermaid
timeline
title 遊戲開發學習進度
section 設置 (10分鐘)
專案結構: HTML基礎
: CSS樣式設置
: JavaScript檔案建立
section 使用者介面 (20分鐘)
互動元素: 輸入欄位
: 按鈕控制
: 顯示區域
: 響應式佈局
section 事件處理 (25分鐘)
使用者互動: 鍵盤事件
: 滑鼠事件
: 即時回饋
: 狀態管理
section 遊戲邏輯 (30分鐘)
核心功能: 引言生成
: 角色比較
: 準確度計算
: 計時器實作
section 效能追蹤 (35分鐘)
指標與分析: 速度（WPM）計算
: 錯誤追蹤
: 進度視覺化
: 結果顯示
section 打磨與強化 (45分鐘)
使用者體驗: 視覺回饋
: 聲效
: 動畫
: 無障礙功能
section 進階功能 (1週)
擴充功能: 難度等級
: 排行榜
: 自訂引言
: 多人選項
section 專業技能 (1個月)
遊戲開發: 效能優化
: 程式架構
: 測試策略
: 部署模式
```
### 🛠️ 你的遊戲開發工具總結
完成本專案後，你將掌握：
- **事件驅動程式設計**：打造對輸入反應靈敏的使用者介面
- **即時回饋**：瞬時視覺與效能更新
- **效能測量**：精準的計時與計分系統
- **遊戲狀態管理**：掌控應用流程與使用者體驗
- **互動設計**：創造引人入勝、令人上癮的使用體驗
- **現代網頁 API**：運用瀏覽器功能提升互動豐富度
- **無障礙設計模式**：確保所有使用者皆能無障礙使用
**實務應用**：這些技能可廣泛應用於：
- **網頁應用程式**：任何互動介面或儀表板
- **教育軟體**：學習平台與技能評量工具
- **生產力工具**：文字編輯器、IDE、協作軟體
- **遊戲產業**：瀏覽器遊戲與互動娛樂
- **行動開發**：觸控介面與手勢操作
**下一階段**：你已準備好探究進階遊戲框架、即時多人系統或複雜互動式應用！
## 製作人員名單
由 [Christopher Harrison](http://www.twitter.com/geektrainer) ❤ 撰寫
由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用 ♥️ 撰寫
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯所導致之任何誤解或誤譯概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

583
translations/tw/4-typing-game/typing-game/README.md
Unescape View File

@ -1,88 +1,154 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "1b0aeccb600f83c603cd70cb42df594d",
"translation_date": "2025-08-29T15:28:22+00:00",
"original_hash": "da8bc72041a2bb3826a54654ee1a8844",
"translation_date": "2026-01-06T14:09:38+00:00",
"source_file": "4-typing-game/typing-game/README.md",
"language_code": "tw"
}
-->
# 使用事件創建遊戲
## 課前測驗
你是否曾經想過網站如何知道你何時點擊按鈕或在文字框中輸入？這就是事件驅動程式設計的魔力！還有什麼比透過建構一個有用的東西——一個會對你的每個按鍵反應的打字速度遊戲——更好的學習方式呢。
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/21)
你將親眼看到網頁瀏覽器如何「與」你的JavaScript程式碼「對話」。每次你點擊、輸入或移動滑鼠時，瀏覽器會傳送小訊息（我們稱它們為事件）到你的程式碼，你就會決定如何回應！
## 事件驅動編程
當我們結束時，你將創建一款真正的打字遊戲，可以追蹤你的速度和準確度。更重要的是，你會理解支撐每個互動式網站的基本概念。讓我們開始吧！
在創建基於瀏覽器的應用程式時，我們會提供一個圖形使用者介面（GUI），讓使用者能夠與我們構建的內容進行互動。與瀏覽器互動最常見的方式是通過點擊和在各種元素中輸入文字。作為開發者，我們面臨的挑戰是無法預測使用者何時會執行這些操作！
## 講座前小測驗
[事件驅動編程](https://en.wikipedia.org/wiki/Event-driven_programming) 是我們需要用來創建 GUI 的編程方式。如果我們稍微拆解這個詞語，會發現核心詞是 **事件**。根據 Merriam-Webster 的定義，[事件](https://www.merriam-webster.com/dictionary/event) 是指「某件事情發生」。這完美地描述了我們的情況。我們知道某件事情會發生，並希望在其發生時執行一些程式碼，但我們不知道它會在什麼時候發生。
[講座前小測驗](https://ff-quizzes.netlify.app/web/quiz/21)
我們標記希望執行的程式碼區段的方法是創建一個函數。當我們考慮[程序式編程](https://en.wikipedia.org/wiki/Procedural_programming)時，函數會按照特定的順序被調用。在事件驅動編程中也是如此，不同之處在於函數的調用方式。
## 事件驅動程式設計
為了處理事件（例如按鈕點擊、輸入文字等），我們需要註冊 **事件監聽器**。事件監聽器是一個函數，用於監聽事件的發生並在事件發生時執行相應的操作。事件監聽器可以更新 UI、向伺服器發送請求，或者執行其他需要根據使用者操作完成的任務。我們可以使用 [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) 並提供一個函數來添加事件監聽器。
想想你最喜歡的應用程式或網站——是什麼讓它感覺充滿活力且反應迅速？全在於它如何回應你的操作！每次點擊、點按、滑動或按鍵都會產生所謂的「事件」，這才是網頁開發真正的魔法所在。
> **NOTE:** 值得注意的是，創建事件監聽器有多種方式。你可以使用匿名函數，也可以創建命名函數。你可以使用各種快捷方式，例如設置 `click` 屬性，或者使用 `addEventListener`。在我們的練習中，我們將專注於使用 `addEventListener` 和匿名函數，因為這是網頁開發者最常用的技術之一。它也是最靈活的，因為 `addEventListener` 適用於所有事件，並且事件名稱可以作為參數提供。
讓網頁程式設計如此有趣的原因是：我們永遠不知道有人什麼時候會點擊按鈕或開始在文本框輸入。他們可能立刻點擊，可能等五分鐘，甚至可能永遠不點擊！這種不可預測性讓我們必須用不同的思維來撰寫程式碼。
### 常見事件
我們不會寫那種像食譜一樣從上到下執行的程式碼，而是寫那種耐心等待某件事發生的程式碼。就像19世紀的電報操作員坐在機器旁，隨時準備一有訊息即刻回應。
那麼，什麼是「事件」？簡單說，就是發生的事情！當你點擊按鈕，那是一個事件。當你輸入一個字母，那也是事件。當你移動滑鼠，那又是另一個事件。
事件驅動程式設計讓我們能夠設定程式碼聆聽並回應。我們創建特殊的函數，稱為**事件監聽器（event listeners）**，它們耐心等待特定事件發生，然後立即採取行動。
在創建應用程式時，有[數十種事件](https://developer.mozilla.org/docs/Web/Events)可供監聽。基本上，使用者在頁面上執行的任何操作都會觸發事件，這讓你擁有很大的權力來確保使用者獲得你期望的體驗。幸運的是，你通常只需要使用少數幾個事件。以下是一些常見的事件（包括我們在創建遊戲時會使用的兩個事件）：
你可以把事件監聽器想像成程式碼的門鈴。你設定門鈴（`addEventListener()`），告訴它要傾聽哪種聲音（例如 ‘click’ 或 ‘keypress’），然後指定有人按鈴時該怎麼做（你的自訂函數）。
- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event)：使用者點擊某個元素，通常是按鈕或超連結
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event)：使用者點擊右鍵
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event)：使用者選取了一些文字
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event)：使用者輸入了一些文字
**事件監聽器的工作原理如下：**
- **監聽**用戶特定的行為，如點擊、按鍵或滑鼠移動
- **執行**當指定的事件發生時你的自訂程式碼
- **立即回應**用戶互動，創造無縫的體驗
- **處理**同一元素上的多重事件，使用不同的監聽器
## 創建遊戲
> **注意：** 值得強調的是，有很多方法可以建立事件監聽器。你可以使用匿名函數，或創建具名函數。你也可以用許多捷徑，比如設置 `click` 屬性，或使用 `addEventListener()`。在我們的練習中，我們將專注於 `addEventListener()`和匿名函數，因為這可能是網頁開發者最常用的技術。它也最靈活，因為 `addEventListener()` 可用於所有事件，且事件名稱可以作為參數傳入。
我們將創建一個遊戲來探索 JavaScript 中事件的工作原理。我們的遊戲將測試玩家的打字技能，這是所有開發者應該具備的一項非常重要的技能。我們都應該練習打字！遊戲的基本流程如下：
### 常見事件
雖然網頁瀏覽器提供數十種不同的事件可以監聽，但大多數互動應用通常只依賴幾個基本事件。理解這些核心事件將為你建立複雜的使用者互動打下基礎。
當你建立應用程式時，基本上用戶在頁面上的任何操作都會觸發一個事件，這給了你很大的能力，確保他們獲得你想要的體驗。幸運的是，通常你只需要少量事件。以下是一些常見事件（包括我們製作遊戲時會用到的兩個）：
| 事件 | 描述 | 常見用途 |
|-------|-------------|------------------|
| `click` | 使用者點擊了某物 | 按鈕、連結、互動元素 |
| `contextmenu` | 使用者按了右鍵 | 自訂右鍵選單 |
| `select` | 使用者標記了部分文字 | 文字編輯、複製操作 |
| `input` | 使用者輸入了文字 | 表單驗證、即時搜尋 |
**了解這些事件類型：**
- **在用戶與特定頁面元素互動時觸發**
- **透過事件物件提供用戶操作的詳細資訊**
- **讓你創建反應快速且互動性強的網頁應用**
- **在不同瀏覽器和裝置間一致運作**
## 建立遊戲
現在你已理解事件的運作方式，我們來實際應用：創建一個打字速度遊戲，展示事件處理，同時幫助你培養重要的開發者技能。
我們將創建一個遊戲，探索 JavaScript 裡的事件運作。遊戲會測試玩家的打字技巧，這是所有開發人員都常被低估的重要技能。趣事：我們現在使用的 QWERTY 鍵盤配置實際上是在1870年代為打字機設計的——打字技巧對程式設計師如今仍然相當重要！遊戲大致流程如下：
```mermaid
flowchart TD
A[玩家點擊開始] --> B[顯示隨機引言]
B --> C[玩家在文字框中輸入]
C --> D{單詞完成了嗎？}
D -->|是| E[標記下一個單詞]
D -->|否| F{目前正確嗎？}
F -->|是| G[保持正常樣式]
F -->|否| H[顯示錯誤樣式]
E --> I{引言完成了嗎？}
I -->|否| C
I -->|是| J[顯示成功訊息與時間]
G --> C
H --> C
```
**以下是遊戲的運作方式：**
- **開始**當玩家點擊開始按鈕並顯示隨機引言
- **追蹤**玩家的打字進度，逐字即時更新
- **突出顯示**當前單字，指引玩家專注焦點
- **提供**打字錯誤的即時視覺反饋
- **計算**並顯示當引言全部完成的總用時
- 玩家點擊開始按鈕，並看到需要輸入的一段文字
- 玩家在文本框中盡可能快速地輸入文字
- 每完成一個單詞，下一個單詞會被高亮顯示
- 如果玩家輸入錯誤，文本框會變成紅色
- 當玩家完成整段文字時，會顯示成功訊息以及所用時間
我們來一起創建這款遊戲，並學習事件吧！
讓我們開始構建遊戲，並學習事件的相關知識！
### 檔案結構
### 文件結構
在開始寫程式前，先整理好檔案結構！一開始就有乾淨的檔案結構會減少你日後的困擾，並讓你的專案更專業。😊
我們需要三個文件：**index.html**、**script.js** 和 **style.css**。讓我們先設置好這些文件，讓後續工作更輕鬆。
我們將保持簡單，僅使用三個檔案：用於頁面結構的 `index.html`、用於遊戲邏輯的 `script.js`，以及用於視覺效果的 `style.css`。這組組合是大多數網頁的經典配置！
- 打開控制台或終端窗口，創建一個新文件夾，並執行以下命令：
**透過打開命令視窗或終端機執行以下指令，為你的作品創建新資料夾：**
```bash
# Linux or macOS
# Linux 或 macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
- 打開 Visual Studio Code
**這些指令的功能：**
- **建立**一個名為 `typing-game` 的新目錄，供你放置專案檔案
- **自動切換**到剛建立的資料夾內
- **打造**一個乾淨的工作區，方便你開發遊戲
**打開 Visual Studio Code：**
```bash
code .
```
- 在 Visual Studio Code 中向文件夾添加以下三個文件：
- index.html
- script.js
- style.css
**此指令的效果：**
- **啟動** Visual Studio Code 並定位到目前目錄
- **在編輯器中開啟**你的專案資料夾
- **提供**所有你需要的開發工具
**在 Visual Studio Code 裡新增三個檔案，命名如下：**
- `index.html` - 遊戲的結構和內容
- `script.js` - 遊戲邏輯和事件監聽器
- `style.css` - 視覺外觀和樣式設定
## 建立使用者介面
## 創建使用者介面
現在讓我們建構遊戲進行時的舞台！想像這是設計太空船的控制面板——我們必須確保所有玩家需要的東西都放在他們期望的位置。
根據需求，我們知道在 HTML 頁面上需要一些元素。這有點像食譜，我們需要一些材料：
想想我們的遊戲到底需要什麼。如果你正在玩一個打字遊戲，你希望螢幕上出現什麼？這是必須的介面元素：
- 顯示玩家需要輸入的文字的地方
- 顯示訊息（例如成功訊息）的地方
- 用於輸入文字的文本框
- 開始按鈕
| UI 元件 | 目的 | HTML 元素 |
|------------|---------|-------------|
| 引言顯示區 | 顯示要輸入的文字 | `<p>` 並帶有 `id="quote"` |
| 訊息區 | 顯示狀態及成功訊息 | `<p>` 並帶有 `id="message"` |
| 文字輸入框 | 玩家輸入引言的地方 | `<input>` 並帶有 `id="typed-value"` |
| 開始按鈕 | 開始遊戲 | `<button>` 並帶有 `id="start"` |
每個元素都需要有 ID，以便我們能夠在 JavaScript 中操作它們。我們還需要添加對 CSS 和 JavaScript 文件的引用。
**介面結構說明：**
- **合乎邏輯**地從上到下組織內容
- **給予**元素獨特的 ID，方便 JavaScript 操作
- **建立**清晰視覺層級，提升用戶體驗
- **使用**語意化的 HTML 元素，增進無障礙性
創建一個名為 **index.html** 的新文件，並添加以下 HTML：
每個元素都需要 ID，才能在 JavaScript 中操作。我們也會新增對 CSS 和 JavaScript 檔案的引用。
建立一個名為 `index.html` 的新檔案。加入以下 HTML：
```html
<!-- inside index.html -->
@ -105,26 +171,52 @@ code .
</html>
```
**這個 HTML 結構實現了以下功能：**
- **在 `<head>` 頁面標頭載入 CSS 樣式表
- **創建**明確的標題和使用者說明
- **設置**帶有特定 ID 的占位段落，用於動態內容
- **包含**帶有無障礙屬性的輸入欄位
- **提供**一個開始遊戲的按鈕
- **在檔案尾端**載入 JavaScript，提升效能
### 啟動應用程式
最好以迭代方式開發，隨時查看效果。讓我們啟動應用程式。Visual Studio Code 有一個很棒的擴展名叫 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，它可以在本地托管你的應用程式，並在每次保存時刷新瀏覽器。
在開發過程中經常測試應用程式有助於及早捕捉問題，並即時查看進度。Live Server 是一款非常實用的工具，每當你儲存變更時，它會自動刷新瀏覽器，讓開發更加高效。
- 按照連結安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，然後點擊 **Install**
- 瀏覽器會提示你打開 Visual Studio Code，然後 Visual Studio Code 會提示你進行安裝
- 如果有提示，請重新啟動 Visual Studio Code
- 安裝完成後，在 Visual Studio Code 中按 Ctrl-Shift-P（或 Cmd-Shift-P）打開命令面板
- 輸入 **Live Server: Open with Live Server**
- Live Server 會開始托管你的應用程式
- 打開瀏覽器，並導航到 **https://localhost:5500**
- 你現在應該能看到你創建的頁面！
最好採用逐步開發的方法查看效果。讓我們啟動應用程式。有個相當棒的 Visual Studio Code 擴充套件叫做 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，它可以在本機架設伺服器，並在你儲存時刷新瀏覽器。
讓我們添加一些功能。
**按照連結安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon)，點擊安裝：**
## 添加 CSS
**安裝過程會有以下動作：**
- **提示**你的瀏覽器打開 Visual Studio Code
- **引導你**完成擴充功能安裝流程
- **可能需要**重啟 Visual Studio Code 以完成設定
在創建 HTML 後，讓我們添加核心樣式的 CSS。我們需要高亮玩家應該輸入的單詞，並在輸入錯誤時將文本框顯示為紅色。我們將使用兩個類來完成這些操作。
**安裝完成後，在 Visual Studio Code 按 Ctrl-Shift-P（或 Cmd-Shift-P）開啟命令面板：**
創建一個名為 **style.css** 的新文件，並添加以下語法。
**命令面板說明：**
- **快速存取**所有 VS Code 指令
- **輸入時即時搜尋**指令
- **提供**鍵盤快捷鍵加快開發效率
**輸入「Live Server: Open with Live Server」：**
**Live Server 功能包括：**
- **啟動**你的專案的本機開發伺服器
- **在你儲存檔案時**自動刷新瀏覽器
- **從本機 URL（通常是 `localhost:5500`）提供服務**
**打開瀏覽器並前往 `https://localhost:5500`：**
現在你應該看到剛建立的頁面了！讓我們加入一些功能。
## 加入 CSS
現在讓我們讓畫面好看一點！視覺反饋自電腦早期時代就對使用者介面至關重要。1980年代的研究發現，立即的視覺反饋能顯著提升使用者表現並減少錯誤。這正是我們要創造的效果。
我們的遊戲需要讓玩家一目了然地知道目前狀況。玩家應該立刻知道該輸入哪個單字，如果犯錯，應該立即看到它。我們來創建一些簡單但有效的樣式：
建立一個名為 `style.css` 的新檔案，加入以下語法。
```css
/* inside style.css */
@ -138,40 +230,61 @@ code .
}
```
✅ 關於 CSS，你可以按照自己的喜好佈局頁面。花點時間讓頁面看起來更吸引人：
**這些 CSS 類別的意義：**
- **以黃色背景突出顯示**當前單字，幫助視覺聚焦
- **以淺珊瑚色背景標示**打字錯誤
- **提供**即時回饋而不干擾使用者輸入流程
- **使用**對比明顯的色彩，提升無障礙性與視覺溝通效果
✅ CSS 部分，你可以自由安排頁面版面配置，多花點時間讓頁面更吸引人：
- 選擇不同的字體
- 為標題添加顏色
- 調整元素大小
- 選擇不同的字型
- 讓標題更有色彩
- 調整元件大小
## JavaScript
在創建 UI 後，現在是時候專注於提供邏輯的 JavaScript 了。我們將分成幾個步驟：
現在事情變有趣了！🎉 我們已經有 HTML 結構和 CSS 樣式，但目前遊戲就像一輛漂亮卻沒有引擎的車子。JavaScript 就是那台引擎——它使一切都實際運作並對玩家操作做出回應。
你將看到你的作品活起來。我們會一步步接觸這些內容，避免讓你感到壓力過大：
| 步驟 | 目的 | 你將學到的内容 |
|------|---------|------------------|
| [建立常數](../../../../4-typing-game/typing-game) | 設定引言和 DOM 參考 | 變數管理與 DOM 選取 |
| [開始遊戲的事件監聽器](../../../../4-typing-game/typing-game) | 處理遊戲初始化 | 事件處理和 UI 更新 |
| [鍵入的事件監聽器](../../../../4-typing-game/typing-game) | 即時處理用戶輸入 | 輸入驗證與動態反饋 |
- [創建常量](../../../../4-typing-game/typing-game)
- [開始遊戲的事件監聽器](../../../../4-typing-game/typing-game)
- [輸入文字的事件監聽器](../../../../4-typing-game/typing-game)
**此結構化方式幫助你：**
- **整合**程式碼成邏輯且易管理的部分
- **逐步建立**功能以便輕鬆除錯
- **理解**應用程式中不同部分如何協同工作
- **創造**可重複使用的設計模式，便於未來專案
首先，創建一個名為 **script.js** 的新文件。
不過先建立一個新檔案，名為 `script.js`。
### 創建常量
### 建立常數
我們需要一些項目來讓編程更輕鬆。類似於食譜，以下是我們需要的內容：
在深入實作前，讓我們先整合所有資源！就像 NASA 的任務控制中心啟動前會先架設監控系統，有備而來能讓整個過程順利許多，也能減少打錯字的機率。
- 包含所有文字的陣列
- 用於存儲當前文字的所有單詞的空陣列
- 用於存儲玩家當前輸入的單詞索引的空間
- 玩家點擊開始的時間
我們首先需要設定：
我們還需要引用 UI 元素：
| 資料類型 | 目的 | 範例 |
|-----------|---------|--------|
| Array of quotes | 儲存遊戲中所有可能的引言 | `['Quote 1', 'Quote 2', ...]` |
| Word array | 將當前引言拆解成單字陣列 | `['When', 'you', 'have', ...]` |
| Word index | 追蹤玩家正在輸入的單字索引 | `0, 1, 2, 3...` |
| Start time | 計算計分所需的經過時間 | `Date.now()` |
- 文本框（**typed-value**）
- 顯示文字的元素（**quote**）
- 顯示訊息的元素（**message**）
**我們也需要參考 UI 元素：**
| Element | ID | 用途 |
|---------|----|---------|
| 文字輸入框 | `typed-value` | 玩家輸入文字的位置 |
| 引言顯示區 | `quote` | 顯示需輸入的引言 |
| 訊息區 | `message` | 顯示狀態更新訊息 |
```javascript
// inside script.js
// all of our quotes
// 在 script.js 內部
// 我們所有的引言
const quotes = [
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
'There is nothing more deceptive than an obvious fact.',
@ -181,172 +294,320 @@ const quotes = [
'Nothing clears up a case so much as stating it to another person.',
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
// 存放單詞清單和玩家當前輸入的單詞索引
let words = [];
let wordIndex = 0;
// the starting time
// 起始時間
let startTime = Date.now();
// page elements
// 頁面元素
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');
```
**解析這段設定程式碼的成果：**
- 使用 `const` **儲存**一組夏洛克·福爾摩斯的引言，因為引言不會變動
- 使用 `let` **初始化**追蹤變數，因為遊戲中這些值會變化
- 利用 `document.getElementById()` **擷取** DOM 元素的參照以提高效率
- 建立所有遊戲功能的基礎，並且使用清晰、具描述性的變數名稱
- 將相關資料和元素邏輯性地組織起來，方便日後維護程式碼
✅ 為你的遊戲添加更多文字
✅ 請繼續為你的遊戲新增更多引言
> **NOTE:** 我們可以在程式碼中隨時使用 `document.getElementById` 獲取元素。由於我們會經常引用這些元素，因此使用常量可以避免字符串字面值的拼寫錯誤。像 [Vue.js](https://vuejs.org/) 或 [React](https://reactjs.org/) 這樣的框架可以幫助你更好地集中管理程式碼。
> 💡 **專家提示**：你可以在程式碼中任何時候使用 `document.getElementById()` 取得元素。由於我們會常常用到這些元素，透過常數避免字串拼寫錯誤是很好的做法。像是 [Vue.js](https://vuejs.org/) 或 [React](https://reactjs.org/) 這類框架可以幫助你更好地集中管理程式碼。
>
**這個作法效果好有以下原因：**
- **避免**多次引用元素時的拼寫錯誤
- **提升**程式碼可讀性，使用具描述性的常數名稱
- **增強** IDE 的自動完成與錯誤檢查支援
- **使得**以後如果元素 ID 改變，重構程式碼更加容易
花點時間觀看一段關於使用 `const`、`let` 和 `var` 的影片
花一點時間觀看關於 `const`、`let` 和 `var` 的影片
[![變數類型](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "變數類型")
[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
> 🎥 點擊上方圖片觀看有關變數的影片。
> 🎥 點擊上方圖片觀看變數相關教學影片。
### 添加開始邏輯
### 新增開始邏輯
為了開始遊戲，玩家需要點擊開始按鈕。當然，我們不知道他們什麼時候會點擊開始。這就是[事件監聽器](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)的作用。事件監聽器允許我們監聽某件事情的發生（事件），並在事件發生時執行程式碼。在我們的情況下，我們希望在使用者點擊開始時執行程式碼。
這裡一切就緒！🚀 你即將寫下第一個真正的事件監聽器，看到程式碼對按鈕點擊有反應，那感覺超滿足。
當使用者點擊 **開始** 時，我們需要選擇一段文字，設置使用者介面，並設置當前單詞和計時的追蹤。以下是需要添加的 JavaScript；我們在程式碼塊後進行討論。
想想看：某個地方，一名玩家正準備點擊「開始」按鈕，你的程式需要準備好。完全不知道他什麼時候會按下去——可能是馬上，也可能喝完咖啡後——但當那刻來臨，你的遊戲便啟動。
當用戶點擊 `start` 時，我們需要選擇一段引言、設定用戶介面，以及初始化當前輸入單字和時間的追蹤。以下是你要加入的 JavaScript 程式碼；我們會在程式碼區塊後面詳細說明。
```javascript
// at the end of script.js
// 在 script.js 的結尾
document.getElementById('start').addEventListener('click', () => {
// get a quote
// 取得一個引言
const quoteIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[quoteIndex];
// Put the quote into an array of words
// 將引言放入一個字詞陣列中
words = quote.split(' ');
// reset the word index for tracking
// 重設字詞索引以追蹤
wordIndex = 0;
// UI updates
// Create an array of span elements so we can set a class
// 使用者介面更新
// 建立一個 span 元素陣列，以便我們可以設置類別
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
// Convert into string and set as innerHTML on quote display
// 轉成字串並設定為引言顯示區的 innerHTML
quoteElement.innerHTML = spanWords.join('');
// Highlight the first word
// 強調第一個字詞
quoteElement.childNodes[0].className = 'highlight';
// Clear any prior messages
// 清除任何先前的訊息
messageElement.innerText = '';
// Setup the textbox
// Clear the textbox
// 設置文字框
// 清空文字框
typedValueElement.value = '';
// set focus
// 設定焦點
typedValueElement.focus();
// set the event handler
// 設定事件處理器
// Start the timer
// 啟動計時器
startTime = new Date().getTime();
});
```
**將程式碼分成邏輯區塊說明：**
**📊 單字追蹤設定：**
- 使用 `Math.floor()` 和 `Math.random()` **隨機選擇**一段引言，增加多樣性
- 使用 `split(' ')` 將引言 **切割成單字陣列**
- 將 `wordIndex` **重置為 0**，因為玩家從第一個單字開始
- **準備**遊戲狀態以開始新的回合
**🎨 UI 佈局與顯示：**
- 透過包裹 `<span>` 元素，分別設定單字以便個別樣式調整
- 將所有 span 元素合併成一個字串，**有效率地更新 DOM**
- 透過加入 `highlight` CSS 類別，**標記第一個單字為高亮**
- 清除先前遊戲訊息，讓畫面保持乾淨
讓我們分解程式碼！
**⌨️ 文字框準備：**
- 清空輸入欄現有文字
- 將輸入框設定 **focus**，讓玩家能立刻開始輸入
- 為新遊戲回合做好輸入區準備
- 設置單詞追蹤
- 使用 [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) 和 [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 隨機選擇 `quotes` 陣列中的一段文字
- 將 `quote` 轉換為 `words` 陣列，以便追蹤玩家當前輸入的單詞
- 將 `wordIndex` 設置為 0，因為玩家將從第一個單詞開始
- 設置 UI
- 創建 `spanWords` 陣列，其中包含每個單詞的 `span` 元素
- 這將允許我們高亮顯示文字
- 使用 `join` 將陣列轉換為字符串，並更新 `quoteElement` 的 `innerHTML`
- 這將向玩家顯示文字
- 將第一個 `span` 元素的 `className` 設置為 `highlight`，以高亮顯示為黃色
- 通過設置 `messageElement` 的 `innerText` 為 `''` 清空訊息
- 設置文本框
- 清空 `typedValueElement` 的當前 `value`
- 將焦點設置到 `typedValueElement`
- 通過調用 `getTime` 開始計時
**⏱️ 計時器初始化：**
- 使用 `new Date().getTime()` **擷取當前時間戳**
- 方便後續準確計算打字速度與完成時間
- 開始遊戲計時與效能追蹤
### 添加輸入邏輯
### 新增打字邏輯
當玩家輸入時，會觸發 `input` 事件。此事件監聽器將檢查玩家是否正確輸入單詞，並處理遊戲的當前狀態。回到 **script.js**，在末尾添加以下程式碼。我們稍後會進行分解。
這裡開始處理遊戲核心了！別擔心剛開始看起來複雜，我們會逐一說明每段程式碼，最後你會看到它多麼合邏輯。
我們正在打造的是一套複雜的邏輯：每當玩家輸入一個字母，我們都會查看輸入內容、給予回饋，並決定下一步該怎麼做。它類似 1970 年代早期的文字處理器 WordStar，會即時回饋輸入狀況。
```javascript
// at the end of script.js
// 在 script.js 的結尾
typedValueElement.addEventListener('input', () => {
// Get the current word
// 取得當前的單字
const currentWord = words[wordIndex];
// get the current value
// 取得當前的值
const typedValue = typedValueElement.value;
if (typedValue === currentWord && wordIndex === words.length - 1) {
// end of sentence
// Display success
// 句子結尾
// 顯示成功
const elapsedTime = new Date().getTime() - startTime;
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
messageElement.innerText = message;
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
// end of word
// clear the typedValueElement for the new word
// 單字結尾
// 清除 typedValueElement 以便輸入新單字
typedValueElement.value = '';
// move to the next word
// 移動到下一個單字
wordIndex++;
// reset the class name for all elements in quote
// 重設 quote 中所有元素的類別名稱
for (const wordElement of quoteElement.childNodes) {
wordElement.className = '';
}
// highlight the new word
// 突顯新單字
quoteElement.childNodes[wordIndex].className = 'highlight';
} else if (currentWord.startsWith(typedValue)) {
// currently correct
// highlight the next word
// 目前正確
// 突顯下一個單字
typedValueElement.className = '';
} else {
// error state
// 錯誤狀態
typedValueElement.className = 'error';
}
});
```
讓我們分解程式碼！我們首先獲取當前單詞和玩家目前輸入的值。接著，我們使用瀑布邏輯檢查文字是否完成、單詞是否完成、單詞是否正確，或者（最後）是否有錯誤。
- 文字完成，條件是 `typedValue` 等於 `currentWord`，且 `wordIndex` 等於 `words` 的 `length` 減一
- 通過將當前時間減去 `startTime` 計算 `elapsedTime`
- 將 `elapsedTime` 除以 1,000，將毫秒轉換為秒
- 顯示成功訊息
- 單詞完成，條件是 `typedValue` 以空格結尾（單詞結束），且 `typedValue` 等於 `currentWord`
- 將 `typedElement` 的 `value` 設置為 `''`，以便輸入下一個單詞
- 增加 `wordIndex`，移動到下一個單詞
- 遍歷 `quoteElement` 的所有 `childNodes`，將 `className` 設置為 `''`，恢復默認顯示
- 將當前單詞的 `className` 設置為 `highlight`，以標記為下一個需要輸入的單詞
- 單詞目前輸入正確（但未完成），條件是 `currentWord` 以 `typedValue` 開頭
- 通過清空 `className` 確保 `typedValueElement` 顯示為默認狀態
- 如果到這裡，則表示有錯誤
- 將 `typedValueElement` 的 `className` 設置為 `error`
**理解除錯邏輯流程：**
此函式採用瀑布式檢查邏輯，從最特定的狀況往較普遍的判斷依序過濾。以下逐步拆解各情境：
```mermaid
flowchart TD
A[玩家輸入字元] --> B[取得目前字詞與輸入值]
B --> C{引用完成？}
C -->|Yes| D[顯示完成訊息及時間]
C -->|No| E{字詞以空白結束？}
E -->|Yes| F[清除輸入、移至下一字詞、更新標示]
E -->|No| G{目前輸入正確嗎？}
G -->|Yes| H[移除錯誤樣式]
G -->|No| I[顯示錯誤樣式]
```
**🏁 引言輸入完成（情境 1）：**
- 檢查輸入值是否與目前單字相符，且為最後一個單字
- 計算經過時間，即用現在時間減去開始時間
- 將毫秒轉換成秒，除以 1,000
- 顯示恭喜訊息並包含完成時間
**✅ 單字完成（情境 2）：**
- 當輸入字串以空白結尾時，判斷字完成
- 確認修剪後的輸入與目前單字精確相符
- 清空輸入框以準備輸入下一個
- 將 `wordIndex` 增加，前進下一個單字
- 移除所有單字的類別，並高亮新單字
**📝 正在輸入中（情境 3）：**
- 確認目前單字以已輸入字串開頭
- 移除錯誤樣式，表示目前輸入正確
- 允許持續輸入，不中斷
**❌ 錯誤輸入狀態（情境 4）：**
- 輸入字串不符合目前單字開頭時觸發
- 加入錯誤 CSS 類別，立刻給予視覺回饋
- 幫助玩家迅速辨識並修正錯誤
## 測試你的應用程式
你已經完成了！最後一步是確保應用程式正常運行。試試看吧！如果有錯誤，不要擔心；**所有開發者**都會遇到錯誤。檢查訊息並根據需要進行調試。
看看你都完成了什麼！🎉 你剛剛用事件驅動程式設計從零打造出一個真實可玩的打字遊戲。花點時間好好欣賞這成就——這絕非易事！
接下來是測試階段！它會不會如預期運作？有沒有漏掉什麼？其實如果一開始沒完美運作很正常，即使是資深開發者也常在程式中找到錯誤。這都是開發流程的一部分！
點擊 **開始**，然後開始輸入！它應該看起來像我們之前看到的動畫。
點擊 `start`，開始打字吧！應該會像之前看到的動畫一樣。
![遊戲運行中的動畫](../../../../4-typing-game/images/demo.gif)
![Animation of the game in action](../../../../4-typing-game/images/demo.gif)
**你應該測試的重點：**
- 點擊 Start 後是否顯示隨機引言
- 輸入時當前單字是否正確高亮
- 錯誤輸入時是否出現錯誤樣式提示
- 完成單字後高亮是否正確往前推進
- 完成整段引言後是否顯示完成訊息與計時
**常見除錯建議：**
- 檢查瀏覽器主控台 (F12) 是否有 JavaScript 錯誤
- 驗證所有檔案名稱是否完全匹配（含大小寫）
- 確認 Live Server 是否正常執行與刷新
- 嘗試多段引言以測試隨機選取功能
---
## GitHub Copilot Agent 挑戰 🎮
使用 Agent 模式完成以下挑戰：
**描述：** 擴充打字遊戲，實作一個能根據玩家表現調整遊戲難度的系統。這挑戰讓你練習進階事件處理、資料分析與動態 UI 更新。
**提示：** 為打字遊戲創建難度調整系統，要求包括：
1. 追蹤玩家的打字速度（每分鐘字數）及準確度百分比
2. 自動調整為三種難度：簡單（簡單引言）、中等（現有引言）、困難（包含標點符號的複雜引言）
3. 在 UI 顯示當前難度與玩家統計數據
4. 實作連勝計數器，連續三次表現良好時提升難度
5. 新增視覺回饋（顏色、動畫）指出難度變化
加入必要的 HTML 元素、CSS 樣式與 JavaScript 函式來實現此功能。包含適當的錯誤處理，並確保遊戲具備適當的 ARIA 標籤以保持無障礙。
更多 agent 模式資訊，參考 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰
添加更多功能
準備將你的打字遊戲推向新高度？試著實作這些進階功能，深化你對事件處理與 DOM 操控的了解：
**新增功能：**
| 功能 | 描述 | 你將練習的技能 |
|---------|-------------|------------------------|
| **輸入控管** | 完成後禁用 `input` 事件監聽器，按鈕點擊時恢復 | 事件管理與狀態控制 |
| **UI 狀態管理** | 玩家完成引言後停用輸入框 | DOM 屬性操作 |
| **彈跳視窗** | 使用模態視窗顯示成功訊息 | 進階 UI 模式與無障礙 |
| **最高分系統** | 使用 `localStorage` 儲存最高分 | 瀏覽器儲存 API 與資料持久性 |
**實作提示：**
- 查閱 `localStorage.setItem()` 和 `localStorage.getItem()` 以持久儲存資料
- 練習動態添加與移除事件監聽器
- 探索 HTML dialog 元素或 CSS 模態視窗樣式
- 停用與啟用表單控件時考慮無障礙設計
- 在完成後禁用 `input` 事件監聽器，並在按鈕被點擊時重新啟用
- 在玩家完成文字後禁用文本框
- 顯示一個模態對話框，包含成功訊息
- 使用 [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 存儲最高分
## 課後測驗
## 課後小考
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/22)
[課後小考](https://ff-quizzes.netlify.app/web/quiz/22)
---
## 🚀 你的打字遊戲精通路徑
### ⚡ **接下來 5 分鐘能做的事**
- [ ] 以不同引言測試打字遊戲，確保運行流暢
- [ ] 嘗試修改 CSS 樣式，改變高亮與錯誤顏色
- [ ] 打開瀏覽器開發工具（F12），在遊玩時觀察 Console
- [ ] 挑戰自己盡快完成一段引言
### ⏰ **本小時能達成的目標**
- [ ] 為陣列新增更多引言（可挑選喜愛的書籍或電影）
- [ ] 實作挑戰區中的 localStorage 最高分系統
- [ ] 建置每分鐘字數計算器並在遊戲後顯示
- [ ] 增加正確輸入、錯誤與完成的音效
### 📅 **本週冒險任務**
- [ ] 製作多人遊戲版本，讓好友並肩競賽
- [ ] 創造不同難度層級且引言複雜度不同
- [ ] 新增進度條顯示引言輸入進度
- [ ] 實作用戶帳號與個人統計追蹤
- [ ] 設計自訂主題，讓使用者選擇喜愛的樣式
### 🗓️ **本月轉變進度**
- [ ] 建立漸進式打字課程，教導正確指法
- [ ] 製作分析報告，找出最易出錯的字母或單字
- [ ] 支援不同語言與鍵盤配置
- [ ] 串接教育 API，從文學資料庫取得引言
- [ ] 發佈強化版打字遊戲，讓更多人使用和喜愛
### 🎯 **最終反思檢核**
**在繼續前，花些時間慶祝：**
- 製作這款遊戲時，最令人滿意的時刻是什麼？
- 相較起初，現在對事件驅動程式設計有什麼感想？
- 有什麼功能讓你迫不及待想加進遊戲變得獨一無二？
- 你會如何將事件處理概念應用到其他專案？
```mermaid
journey
title 你的事件程式設計自信之旅
section 今天
了解事件: 3: 你
建立使用者介面: 4: 你
編寫事件監聽器: 5: 你
section 本週
新增功能: 4: 你
除錯問題: 5: 你
強化使用者體驗: 4: 你
section 下個月
建立複雜應用程式: 5: 你
教導他人: 5: 你
創建框架: 5: 你
```
> 🌟 **記得**：你剛掌握了支撐每個互動網站與應用的核心概念。事件驅動程式設計讓網路充滿活力且反應即時。每當你看到下拉選單、即時驗證表單、或是會回應你點擊的遊戲，你現在都會明白背後的魔法。你不只是在學寫程式，你是在學創造直覺且吸引人的體驗！🎉
---
## 回顧與自學
## 複習與自學
閱讀 [所有可用的事件](https://developer.mozilla.org/docs/Web/Events)，了解網頁瀏覽器提供給開發者的選項，並思考每個事件適合使用的情境。
閱讀關於瀏覽器可監聽的[所有事件](https://developer.mozilla.org/docs/Web/Events)，並思考何時會用到它們。
## 作業
[創建一個新的鍵盤遊戲](assignment.md)
[製作新鍵盤遊戲](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能包含錯誤或不精確之處。原文文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們不對因使用本翻譯內容而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

51
translations/tw/4-typing-game/typing-game/assignment.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "de5384c118e15e4d1d0eaa00fc01b112",
"translation_date": "2025-08-24T00:22:16+00:00",
"original_hash": "3eac59d70e2532a677a2ce6bf765485a",
"translation_date": "2026-01-06T14:11:29+00:00",
"source_file": "4-typing-game/typing-game/assignment.md",
"language_code": "tw"
}
@ -11,14 +11,47 @@ CO_OP_TRANSLATOR_METADATA:
## 說明
創建一個使用鍵盤事件執行任務的小型遊戲。它可以是一種不同類型的打字遊戲，或者是一種藝術型遊戲，透過按鍵在螢幕上繪製像素。發揮創意吧！
既然你已經掌握了透過打字遊戲學習事件驅動程式設計的基礎，現在是釋放你的創意的時候了！你將設計並製作一個基於鍵盤的遊戲，用以展現你對事件處理、DOM 操作和使用者互動模式的理解。
請創造一款使用鍵盤事件完成特定任務的小型遊戲。這可以是不同類型的打字遊戲、一個在按鍵時向畫面繪製像素的藝術應用、一個用方向鍵控制的簡單街機風格遊戲，或任何你能想像到的創意概念。發揮創意，思考不同按鍵如何觸發不同的行為！
**你的遊戲應包含：**
| 要求 | 說明 | 目的 |
|-------------|-------------|---------|
| **事件監聽器** | 對至少 3 種不同的鍵盤事件做出回應 | 展示事件處理的理解 |
| **視覺回饋** | 即時提供使用者輸入的視覺反應 | 展示精通 DOM 操作 |
| **遊戲邏輯** | 包含計分、關卡或進度機制 | 練習實作應用狀態 |
| **使用者介面** | 清楚的說明與直覺的控制 | 發展使用者經驗設計技巧 |
**可考慮的創意專案點子：**
- **節奏遊戲**：玩家隨音樂或視覺提示按鍵
- **像素藝術創作者**：不同按鍵繪製不同顏色或圖案
- **文字組合器**：玩家透過依序輸入字母組成單字
- **貪吃蛇遊戲**：用方向鍵控制蛇去收集物品
- **音樂合成器**：不同按鍵播放不同的音符或聲音
- **快速打字變體**：特定類別主題的打字（程式語言術語、外語）
- **鍵盤鼓手**：按鍵映射成不同的鼓聲並打節拍
**實作指引：**
- **從**簡單的概念開始，逐步增加複雜度
- **著重**於流暢且靈敏自然的控制
- **包含**明確的視覺指示以顯示遊戲狀態與玩家進度
- **測試**你的遊戲，確保不同使用者都能直覺操作
- **用註解**說明你的事件處理策略，撰寫文件化程式碼
## 評分標準
| 評分項目 | 優秀 | 合格 | 需要改進 |
| -------- | ------------------------ | ------------------------ | ----------------- |
| | 提供完整的遊戲 | 遊戲非常簡單 | 遊戲有錯誤 |
| | | | |
| 標準 | 優異 | 足夠 | 需改進 |
| -------- | --------- | -------- | ----------------- |
| **功能性** | 完整且精緻的遊戲，具多項功能與流暢的遊戲體驗 | 一個含基本功能且展現鍵盤事件處理的可運行遊戲 | 只有最基本實作，功能有限或有嚴重錯誤 |
| **程式碼品質** | 結構良好、有註解並遵守最佳實務，有效率的事件處理 | 程式碼乾淨可讀，適當使用事件監聽器與 DOM 操作 | 基本程式結構，組織不佳或實作不佳 |
| **使用者體驗** | 直覺的控制、清楚的回饋及引人入勝的專業感遊戲體驗 | 功能性介面、足夠的使用指引與靈敏反應控制 | 介面基礎，指示不清楚或反應差 |
| **創意性** | 原創概念，創新運用鍵盤事件與創意思考解決問題 | 有趣的變體，良好利用事件處理呈現遊戲模式 | 基本的概念實作，缺乏創意元素 |
---
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤讀概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤讀負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

605
translations/tw/5-browser-extension/1-about-browsers/README.md
Unescape View File

@ -1,182 +1,555 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "2326d04e194a10aa760b51f5e5a1f61d",
"translation_date": "2025-08-29T15:18:29+00:00",
"original_hash": "00aa85715e1efd4930c17a23e3012e69",
"translation_date": "2026-01-06T13:55:08+00:00",
"source_file": "5-browser-extension/1-about-browsers/README.md",
"language_code": "tw"
}
-->
# 瀏覽器擴充功能專案第一部分：關於瀏覽器的一切
![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.tw.jpg)
> 手繪筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 提供
# 瀏覽器擴充功能專案第一部分：關於瀏覽器的所有知識
```mermaid
journey
title 您的瀏覽器擴充功能開發旅程
section 基礎
了解瀏覽器: 3: Student
學習擴充功能類型: 4: Student
設置開發環境: 4: Student
section 開發
建立介面: 4: Student
新增功能: 5: Student
處理資料: 5: Student
section 整合
在瀏覽器中測試: 5: Student
偵錯問題: 4: Student
打磨使用體驗: 5: Student
```
![瀏覽器速寫筆記](../../../../translated_images/browser.60317c9be8b7f84a.tw.jpg)
> 速寫筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 製作
## 課前測驗
[課前測驗](https://ff-quizzes.netlify.app/web/quiz/23)
### 簡介
瀏覽器擴充功能為瀏覽器增加了額外的功能。但在開始構建之前，您應該先了解一些關於瀏覽器如何運作的知識。
### 關於瀏覽器
在這系列課程中，您將學習如何構建一個可以在 Chrome、Firefox 和 Edge 瀏覽器上運行的瀏覽器擴充功能。在這部分，您將了解瀏覽器的運作方式，並搭建瀏覽器擴充功能的基本結構。
那麼，什麼是瀏覽器？它是一種軟體應用程式，允許終端使用者從伺服器訪問內容並將其顯示在網頁上。
✅ 一點歷史：第一個瀏覽器名為「WorldWideWeb」，由蒂姆·伯納斯-李爵士於 1990 年創建。
![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.tw.jpg)
> 一些早期的瀏覽器，圖片來源：[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
當使用者使用 URL（統一資源定位符）地址連接到互聯網時，通常通過 `http` 或 `https` 地址使用超文本傳輸協議，瀏覽器會與網頁伺服器通信並獲取網頁。
### 介紹
瀏覽器擴充功能是增強您網路瀏覽體驗的迷你應用程式。就像 Timothy Berners-Lee 最初對互動式網路的願景一樣，擴充功能將瀏覽器的能力擴展到簡單文件瀏覽之外。從保持帳號安全的密碼管理器，到協助設計師挑選完美色調的色彩選取器，擴充功能解決了日常瀏覽中的挑戰。
在我們建立您的第一個擴充功能之前，讓我們先了解瀏覽器的運作方式。就像亞歷山大·格雷厄姆·貝爾（Alexander Graham Bell）在發明電話之前需要理解聲音的傳播原理一樣，了解瀏覽器的基礎知識將有助於您創建與既有瀏覽器系統無縫整合的擴充功能。
本課結束時，您將能了解瀏覽器架構，並開始構建您的第一個擴充功能。
```mermaid
mindmap
root((瀏覽器架構))
Core Components
Rendering Engine
JavaScript Engine
Network Stack
Storage APIs
User Interface
Address Bar
Tab Management
Bookmarks
Extension Icons
Extension System
Manifest Files
Content Scripts
Background Pages
Popup Windows
Security Model
Same-Origin Policy
Permissions API
Content Security
Isolated Worlds
Development Tools
DevTools Integration
Debug Console
Performance Monitor
Extension Inspector
```
## 理解網頁瀏覽器
網頁瀏覽器本質上是一個複雜的文件解析器。當您在網址列輸入「google.com」，瀏覽器會執行一連串複雜動作——向全球伺服器請求內容，然後解析並渲染程式碼，呈現出您所見的互動式網頁。
這個流程與第一個網頁瀏覽器 WorldWideWeb 由 Tim Berners-Lee 於 1990 年設計，目的是讓具超連結的文件能被大眾存取的精神相呼應。
✅ **小歷史**：第一個瀏覽器叫做「WorldWideWeb」，由 Sir Timothy Berners-Lee 於 1990 年創建。
![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.tw.jpg)
> 一些早期瀏覽器，圖片來源 [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### 瀏覽器如何處理網頁內容
從輸入網址到看到網頁所經歷的過程包含多個協調完成的步驟，這些都在數秒內完成：
```mermaid
sequenceDiagram
participant User
participant Browser
participant Extension
participant DNS
participant Server
User->>Browser: 輸入網址並按下 Enter
Browser->>Extension: 觸發 beforeRequest 事件
Extension->>Extension: 檢查網址是否需要修改
Browser->>DNS: 查詢伺服器 IP 位址
DNS->>Browser: 回傳 IP 位址
Browser->>Server: 請求網頁內容
Server->>Browser: 傳送 HTML、CSS 與 JavaScript
Browser->>Extension: 觸發 beforeResponse 事件
Extension->>Extension: 需要時修改內容
Browser->>User: 呈現完整網頁
Extension->>User: 顯示外掛程式介面更新
```
**這個流程完成了以下工作：**
- **將**人類可讀的網址轉譯成伺服器IP位址（DNS查詢）
- **建立**與網路伺服器的安全連線，使用HTTP或HTTPS協議
- **向伺服器請求**特定的網頁內容
- **接收**伺服器回傳的HTML標記、CSS樣式以及JavaScript程式碼
- **渲染**所有內容成為您看到的互動式網頁
### 瀏覽器核心功能
現代瀏覽器提供了眾多功能，擴充功能開發者可以利用：
| 功能 | 目的 | 擴充功能機會 |
|---------|---------|------------------------|
| **渲染引擎** | 顯示HTML、CSS和JavaScript | 內容修改、樣式注入 |
| **JavaScript引擎** | 執行JavaScript程式碼 | 客製腳本、API互動 |
| **本地存儲** | 在地保存資料 | 使用者偏好、緩存資料 |
| **網路堆疊** | 處理網路請求 | 請求監控、資料分析 |
| **安全模型** | 保護使用者免受惡意內容 | 內容過濾、安全強化 |
**理解這些功能幫助您：**
- **辨識**擴充功能能夠在哪些地方加強價值
- **選擇**合適的瀏覽器API提供擴充功能所需功能
- **設計**與瀏覽器系統高效協作的擴充功能
- **確保**您的擴充功能遵循瀏覽器安全最佳實務
### 跨瀏覽器開發注意事項
不同瀏覽器雖然遵循標準，但在實作上有些微差異，就像不同程式語言處理同一演算法會略有不同。Chrome、Firefox 和 Safari 各有特性，開發者在擴充功能開發時必須考慮這些差異。
> 💡 **專業建議**：使用 [caniuse.com](https://www.caniuse.com) 檢查不同瀏覽器對網路技術的支援狀況。這對規劃擴充功能的特性非常有幫助！
**擴充功能開發關鍵考量：**
- **測試**您的擴充功能在 Chrome、Firefox 和 Edge 瀏覽器的運作
- **適應**不同瀏覽器擴充功能API和清單格式的差異
- **處理**不同的效能特性及限制
- **提供**針對瀏覽器特有功能缺失的替代方案
✅ **分析見解**：您可在您的網頁開發專案中安裝分析套件，查明使用者偏好使用的瀏覽器。此數據有助於您優先支援哪些瀏覽器。
## 理解瀏覽器擴充功能
瀏覽器擴充功能直接在瀏覽器介面中加入功能，解決常見網路瀏覽問題。它們不需額外應用程式或複雜流程，方便立即存取工具與功能。
這種概念呼應早期電腦先驅道格拉斯·英格巴特（Douglas Engelbart）如何藉由技術增加人類能力的想法——擴充功能強化了瀏覽器的基本功能。
```mermaid
quadrantChart
title 瀏覽器擴充功能類別
x-axis 簡單 --> 複雜
y-axis 個人使用 --> 專業工具
quadrant-1 開發者工具
quadrant-2 企業解決方案
quadrant-3 個人實用工具
quadrant-4 生產力應用程式
Ad Blockers: [0.3, 0.2]
Password Managers: [0.7, 0.3]
Color Pickers: [0.4, 0.8]
Code Formatters: [0.8, 0.9]
Note Taking: [0.6, 0.5]
Video Downloaders: [0.5, 0.2]
Time Trackers: [0.7, 0.6]
Screenshot Tools: [0.4, 0.4]
```
**流行擴充功能類別及其效益：**
- **生產力工具**：任務管理、筆記應用和時間追蹤器，幫您保持組織
- **安全強化**：密碼管理器、廣告阻擋和隱私工具，保護您的資料
- **開發者工具**：程式碼格式化、色彩挑選和除錯工具，簡化開發
- **內容增強**：閱讀模式、影片下載和截圖工具，改善您的網路體驗
✅ **反思問題**：您最喜歡的瀏覽器擴充功能有哪些？它們執行什麼特定工作，如何改善您的瀏覽體驗？
### 🔄 **教學進度檢查**
**瀏覽器架構理解：** 在進行擴充功能開發前，請確保您能：
- ✅ 解釋瀏覽器如何處理網路請求及渲染內容
- ✅ 辨識瀏覽器架構的主要組成部分
- ✅ 了解擴充功能如何與瀏覽器功能整合
- ✅ 認識保護使用者的安全模型
**快速自我檢測**：您能追蹤從輸入網址到看到網頁的流程嗎？
1. **DNS查詢**將網址轉成IP地址
2. **HTTP請求**從伺服器抓取內容
3. **解析**處理HTML、CSS和JavaScript
4. **渲染**展示最終網頁
5. **擴充功能**可在多個步驟修改內容
## 安裝與管理擴充功能
了解擴充功能安裝流程，能幫助您預期使用者安裝時的體驗。安裝流程在現代瀏覽器中有標準化，介面設計上略有差異。
![Edge瀏覽器截圖，顯示打開的 edge://extensions 頁面和設定選單](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.tw.png)
> **重要提示**：測試自己開發的擴充功能時，請務必開啟開發者模式，並允許來自其他商店的擴充功能。
### 開發階段擴充功能安裝流程
當您自行開發與測試擴充功能時，請遵循此流程：
```mermaid
flowchart TD
A[撰寫程式碼] --> B[建構擴充功能]
B --> C{第一次安裝？}
C -->|是| D[載入未封裝]
C -->|否| E[重新載入擴充功能]
D --> F[測試功能]
E --> F
F --> G{運作正常？}
G -->|否| H[除錯問題]
G -->|是| I[準備好給使用者]
H --> A
I --> J[發佈至商店]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
```
```bash
# 第一步：建立你的擴充功能
npm run build
```
此時，瀏覽器的渲染引擎會將網頁顯示在使用者的設備上，這可能是手機、桌面電腦或筆記型電腦。
**此命令完成的工作：**
- **編譯**您的原始碼成瀏覽器可用的檔案
- **打包**JavaScript模組成優化後的封裝
- **產生**最終擴充功能檔案於 `/dist` 資料夾
- **準備**您的擴充功能以供安裝與測試
瀏覽器還具有快取內容的能力，這樣就不需要每次都從伺服器檢索內容。它們可以記錄使用者的瀏覽歷史，存儲「Cookies」（小型數據片段，用於保存使用者的活動信息）等。
**步驟2：前往瀏覽器擴充功能頁面**
1. **打開**瀏覽器的擴充功能管理頁面
2. **點擊**右上角「設定與更多」按鈕（三個點 `...`）
3. **從下拉選單**中選擇「擴充功能」
需要特別記住的是，瀏覽器並不完全相同！每個瀏覽器都有其優勢和劣勢，專業的網頁開發人員需要了解如何讓網頁在不同瀏覽器上都能良好運行。這包括處理像手機這樣的小視窗，以及處理離線使用者的情況。
**步驟3：載入您的擴充功能**
- **新安裝**：選擇「載入未封裝擴充功能」，並指定您的 `/dist` 資料夾
- **更新**：點擊已安裝擴充功能旁的「重新載入」
- **測試中**：啟用「開發者模式」以使用更多除錯功能
一個非常實用的網站是 [caniuse.com](https://www.caniuse.com)，您應該將其加入您偏好的瀏覽器書籤中。在構建網頁時，使用 caniuse 提供的技術支持列表非常有幫助，這樣您可以更好地支持您的使用者。
### 正式版擴充功能安裝
✅ 如何判斷哪些瀏覽器在您的網站使用者中最受歡迎？檢查您的分析數據——您可以在網頁開發過程中安裝各種分析工具包，它們會告訴您使用者最常用的瀏覽器。
> ✅ **注意**：以上開發指示適用於自行建立的擴充功能。要安裝發佈的擴充功能，請前往官方瀏覽器擴充功能商店，如 [Microsoft Edge 附加元件商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)。
## 瀏覽器擴充功能
**理解差異：**
- **開發安裝**允許您在開發中測試尚未發佈的擴充功能
- **商店安裝**提供已審核並發佈的擴充功能，並有自動更新
- **旁載安裝**可從官方商店外安裝擴充功能（需要開發者模式）
為什麼要構建瀏覽器擴充功能？當您需要快速訪問經常重複的任務時，這是一個非常方便的工具。例如，如果您經常需要檢查網頁上的顏色，您可能會安裝一個顏色選取器擴充功能。如果您難以記住密碼，您可能會使用密碼管理擴充功能。
## 建立您的碳足跡擴充功能
開發瀏覽器擴充功能也很有趣。它們通常專注於執行少量的特定任務，並且執行得很好。
我們將創建一款顯示您所在區域能源使用碳足跡的瀏覽器擴充功能。這個專案展示了基本的擴充功能開發概念，同時具備環保意識的實用工具。
✅ 您最喜歡的瀏覽器擴充功能是什麼？它們執行哪些任務？
此方法遵循約翰·杜威（John Dewey）教育理論中的「做中學」原則——結合技術技能與意義重大的現實應用。
### 安裝擴充功能
### 專案需求
在開始構建之前，先了解構建和部署瀏覽器擴充功能的過程。雖然每個瀏覽器在管理這項任務時略有不同，但在 Chrome 和 Firefox 上的過程與 Edge 上的示例類似：
開始開發前，我們先收集所需的資源與相依套件：
![Edge 瀏覽器的截圖，顯示打開的 edge://extensions 頁面和設置菜單](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.tw.png)
**需要的API授權：**
- **[CO2 Signal API key](https://www.co2signal.com/)**：輸入您的電子郵件地址以免費取得API金鑰
- **[區域代碼](http://api.electricitymap.org/v3/zones)**：使用 [Electricity Map](https://www.electricitymap.org/map) 查詢您的區域代碼（例如，波士頓使用 'US-NEISO'）
> 注意：請確保切換到開發者模式並允許來自其他商店的擴充功能。
**開發工具：**
- **[Node.js 和 NPM](https://www.npmjs.com)**：用於安裝專案依賴的套件管理工具
- **[起始程式碼](../../../../5-browser-extension/start)**：下載 `start` 資料夾開始開發
基本過程如下：
✅ **進階學習**：提升您的套件管理技巧，請參考此 [完整學習模組](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
- 使用 `npm run build` 構建您的擴充功能
- 在瀏覽器中通過右上角的「設置及更多」按鈕（`...` 圖標）導航到擴充功能面板
- 如果是新安裝，選擇「加載未打包的擴充功能」以從其構建文件夾（在我們的例子中是 `/dist`）上傳新的擴充功能
- 或者，如果您正在重新加載已安裝的擴充功能，點擊「重新加載」
### 理解專案架構
✅ 這些指導適用於您自己構建的擴充功能；若要安裝已發布到各瀏覽器擴充功能商店的擴充功能，您應該導航到這些 [商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) 並安裝您選擇的擴充功能。
了解專案架構有助於高效率組織開發流程。就像亞歷山大圖書館（Alexandria Library）為方便知識檢索而組織良好，一個結構清晰的代碼庫讓開發更有效率：
### 開始動手
```
project-root/
├── dist/ # Built extension files
│ ├── manifest.json # Extension configuration
│ ├── index.html # User interface markup
│ ├── background.js # Background script functionality
│ └── main.js # Compiled JavaScript bundle
├── src/ # Source development files
│ └── index.js # Your main JavaScript code
├── package.json # Project dependencies and scripts
└── webpack.config.js # Build configuration
```
您將構建一個顯示您所在地區碳足跡的瀏覽器擴充功能，展示您所在地區的能源使用情況以及能源來源。該擴充功能將包含一個表單，用於收集 API 金鑰，以便訪問 CO2 Signal 的 API。
**解析各檔案功能：**
- **`manifest.json`**：**定義**擴充功能的元資料、權限及入口點
- **`index.html`**：**建立**使用者介面，當使用者點擊擴充功能圖標會看到此畫面
- **`background.js`**：**處理**背景任務與瀏覽器事件監聽
- **`main.js`**：**包含**編譯後最終打包的JavaScript
- **`src/index.js`**：**儲存**您的開發主程式碼，編譯後會生成`main.js`
**您需要：**
> 💡 **組織小提示**：將API金鑰及區域代碼存放在安全筆記中，方便開發過程中參考。這些資料是測試擴充功能功能時必須的。
- [一個 API 金鑰](https://www.co2signal.com/)；在此頁面輸入您的電子郵件，系統會將金鑰發送給您
- 與 [Electricity Map](https://www.electricitymap.org/map) 對應的 [地區代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用「US-NEISO」）
- [起始代碼](../../../../5-browser-extension/start)。下載 `start` 文件夾；您將在此文件夾中完成代碼
- [NPM](https://www.npmjs.com) - NPM 是一個套件管理工具；在本地安裝它，並安裝 `package.json` 文件中列出的套件以供您的網頁資產使用
✅ **安全提醒**：切勿將API金鑰或敏感認證提交至您的程式碼庫。我們會在後續步驟教您如何安全處理這些資料。
✅ 在這個 [出色的學習模組](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) 中了解更多關於套件管理的知識。
## 建立擴充功能介面
花點時間瀏覽代碼庫：
接著開始建置使用者介面元件。此擴充功能採用雙畫面設計：配置畫面供初次設定，結果畫面則顯示資料。
dist
-|manifest.json（默認設置在此處）
-|index.html（前端 HTML 標記在此處）
-|background.js（背景 JS 在此處）
-|main.js（構建後的 JS）
src
-|index.js（您的 JS 代碼在此處）
這符合界面設計中的漸進式揭露原則——逐步呈現資訊與選項，避免一次給予過多訊息造成使用者困惑。
✅ 一旦您準備好 API 金鑰和地區代碼，請將它們存儲在某個筆記中以備後用。
### 擴充功能畫面總覽
### 為擴充功能構建 HTML
**設定畫面** - 初次使用者配置：
![完成的擴充功能畫面截圖，顯示包含區域名稱和API金鑰輸入欄的表單。](../../../../translated_images/1.b6da8c1394b07491.tw.png)
這個擴充功能有兩個視圖。一個用於收集 API 金鑰和地區代碼：
**結果畫面** - 碳足跡資料展示：
![完成的擴充功能結果畫面截圖，顯示 US-NEISO 區域的碳使用數值及化石燃料占比。](../../../../translated_images/2.1dae52ff08042246.tw.png)
![瀏覽器中打開的已完成擴充功能截圖，顯示帶有地區名稱和 API 金鑰輸入的表單。](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.tw.png)
### 建立設定表單
另一個用於顯示地區的碳使用情況：
設定表單用於收集初次使用時的用戶資料。設定完成後，資料會儲存在瀏覽器中以供未來使用。
![已完成擴充功能的截圖，顯示 US-NEISO 地區的碳使用值和化石燃料百分比。](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.tw.png)
在 `/dist/index.html` 檔案中，加入以下表單結構：
我們先從構建表單的 HTML 開始，並用 CSS 進行樣式設置。
```html
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
```
在 `/dist` 文件夾中，您將構建一個表單和一個結果區域。在 `index.html` 文件中，填充表單區域：
**此表單實現的功能：**
- **建立**具語意的表單結構，配合適當標籤和輸入欄位關聯
- **啟用**瀏覽器自動完成，提升使用者體驗
- **使用** `required` 屬性，要求兩欄必填才能送出
- **組織**輸入欄位具描述性的類別名稱，便利樣式與JavaScript操作
- **提供**明確指示，協助首次設定擴充功能的使用者
```HTML
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
```
這是保存信息並將其輸入到本地存儲的表單。
### 建立結果顯示畫面
接下來，創建結果區域；在最後的表單標籤下方添加一些 div：
接著，建立顯示碳足跡資料的區域。於表單下方加入此HTML結構：
```HTML
```html
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
```
此時，您可以嘗試構建。確保安裝此擴充功能的套件依賴項：
```
npm install
```
此命令將使用 npm（Node 套件管理器）來安裝 webpack，用於擴充功能的構建過程。您可以通過查看 `/dist/main.js` 來查看此過程的輸出——您會看到代碼已被打包。
目前，擴充功能應該可以構建，並且如果您將其部署到 Edge 作為擴充功能，您會看到一個整齊顯示的表單。
**此結構提供的功能拆解：**
- **`loading`**：**顯示**API資料擷取時的讀取訊息
- **`errors`**：**展示**API呼叫失敗或資料錯誤時的錯誤訊息
- **`data`**：**保存**除錯用的原始資料
- **`result-container`**：**呈現**格式化的碳足跡資訊給使用者
- **`clear-btn`**：**允許**使用者變更區域並重新設定擴充功能
恭喜您，您已經邁出了構建瀏覽器擴充功能的第一步。在後續課程中，您將使其更加實用和功能強大。
---
### 設定建置流程
## 🚀 挑戰
現在安裝專案依賴，並測試建置流程：
瀏覽一個瀏覽器擴充功能商店並安裝一個擴充功能到您的瀏覽器。您可以用有趣的方式檢查其文件。您發現了什麼？
```bash
npm install
```
## 課後測驗
**此安裝流程完成的工作：**
- **下載**Webpack 及 package.json 指定的其他開發依賴套件
- **設定**建置工具鏈，編譯現代JavaScript程式碼
- **準備**開發環境以構建並測試擴充功能
- **啟用**程式碼打包、優化與跨瀏覽器相容功能
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/24)
> 💡 **建置流程洞察**：Webpack 會將您 `/src/index.js` 的原始碼打包成 `/dist/main.js`，優化您的程式碼以用於正式環境並確保瀏覽器兼容。
## 回顧與自學
### 測試您的進度
在本課中，您學習了一些關於網頁瀏覽器歷史的知識；利用這個機會，通過閱讀更多相關歷史來了解萬維網的發明者如何設想它的用途。一些有用的網站包括：
此時，您可以測試您的擴充功能：
1. **執行** build 指令以編譯你的程式碼
2. **載入** 擴充功能到瀏覽器，使用開發者模式
3. **確認** 表單正確顯示且專業美觀
4. **檢查** 所有表單元素是否正確對齊且可正常使用
**你已完成的事項：**
- **建立** 擴充功能的基礎 HTML 結構
- **創建** 具語義化標記的設定與結果介面
- **設置** 使用業界標準工具的現代化開發流程
- **準備** 新增互動式 JavaScript 功能的基礎
### 🔄 **教學檢核**
**擴充功能開發進度**：在繼續前確認你的理解：
- ✅ 你能說明專案結構中各檔案的用途嗎？
- ✅ 你了解建置流程如何轉換原始碼嗎？
- ✅ 為什麼要將設定與結果分成不同的 UI 區塊？
- ✅ 表單結構如何支援易用性與無障礙？
**開發流程理解**：你現在應該能夠：
1. **修改**擴充功能介面的 HTML 與 CSS
2. **執行** build 指令編譯變更
3. **重新載入**瀏覽器中的擴充功能以測試更新
4. **使用**瀏覽器開發者工具進行除錯
你已完成瀏覽器擴充功能開發的第一階段。正如萊特兄弟在成功飛行前必須理解空氣動力學，理解這些基礎概念能幫助你在下一課中建造更多複雜的互動功能。
## GitHub Copilot Agent 挑戰 🚀
使用 Agent 模式完成以下挑戰：
**說明：** 透過新增表單驗證與用戶回饋功能來提升擴充功能使用者在輸入 API 金鑰與區域代碼時的體驗。
**提示：** 建立 JavaScript 驗證函式，檢查 API 金鑰欄位至少含有 20 個字元，並確保區域代碼格式正確（例如 'US-NEISO'）。加入視覺反饋，將輸入框框的邊框顏色改為綠色表示有效，紅色表示無效。另增設切換功能以顯示/隱藏 API 金鑰以確保安全。
想了解更多 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
## 🚀 挑戰
瀏覽擴充功能商店並安裝一個到你的瀏覽器，觀察其檔案構成，有什麼發現？
## 課後測驗
[課後測驗](https://ff-quizzes.netlify.app/web/quiz/24)
## 複習與自學
本課你稍微了解了網頁瀏覽器的歷史；趁此機會多讀一些關於萬維網發明者如何設想網路用途的歷史資料。以下幾個網站很有參考價值：
[網頁瀏覽器歷史](https://www.mozilla.org/firefox/browsers/browser-history/)
[網路歷史](https://webfoundation.org/about/vision/history-of-the-web/)
[提姆·柏納斯-李訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
### ⚡ **接下來 5 分鐘內可以做的事**
- [ ] 開啟 Chrome/Edge 擴充功能頁面（chrome://extensions）並瀏覽已安裝項目
- [ ] 載入網頁時檢視瀏覽器開發者工具的 Network 分頁
- [ ] 嘗試查看頁面原始碼（Ctrl+U），了解 HTML 結構
- [ ] 檢視任何網頁元素並於 DevTools 調整其 CSS
### 🎯 **本小時可完成的目標**
- [ ] 完成課後測驗並理解瀏覽器基礎
- [ ] 建立基本的 manifest.json 瀏覽器擴充功能檔案
- [ ] 製作簡易的「Hello World」擴充功能，並顯示彈出窗口
- [ ] 測試在開發者模式下載入你的擴充功能
- [ ] 瀏覽目標瀏覽器的擴充功能文件
### 📅 **你的週期擴充功能旅程**
- [ ] 完成一個具備實用功能的瀏覽器擴充功能
- [ ] 了解內容腳本、背景腳本與彈出視窗互動
- [ ] 精通瀏覽器 API，如儲存、分頁與訊息傳遞
- [ ] 設計使用者友善的擴充功能介面
- [ ] 測試你的擴充功能於不同網站與使用情境
- [ ] 發布擴充功能到瀏覽器擴充商店
### 🌟 **你的月度瀏覽器開發目標**
- [ ] 建置多個解決不同用戶需求的擴充功能
- [ ] 學習進階瀏覽器 API 及安全最佳實踐
- [ ] 貢獻開源瀏覽器擴充功能專案
- [ ] 精通跨瀏覽器相容性與漸進式增強技巧
- [ ] 創造擴充功能開發工具與模板供他人使用
- [ ] 成為協助其他開發者的瀏覽器擴充功能專家
## 🎯 你的瀏覽器擴充功能精通時間表
```mermaid
timeline
title 瀏覽器擴充功能開發進度
section 基礎 (15 分鐘)
瀏覽器理解: 核心架構
: 渲染流程
: 擴充功能整合點
section 設置 (20 分鐘)
開發環境: 專案結構
: 編譯工具配置
: 瀏覽器開發者模式
: 擴充功能載入流程
section 介面設計 (25 分鐘)
使用者體驗: HTML 結構
: CSS 樣式
: 表單驗證
: 響應式設計
section 核心功能 (35 分鐘)
JavaScript 整合: 事件處理
: API 互動
: 資料儲存
: 錯誤處理
section 瀏覽器 API (45 分鐘)
平台整合: 權限系統
: 儲存 API
: 分頁管理
: 內容選單
section 進階功能 (1 週)
專業擴充功能: 背景腳本
: 內容腳本
: 跨瀏覽器相容性
: 效能優化
section 發佈 (2 週)
發行: 商店提交
: 審核流程
: 使用者回饋
: 更新管理
section 專家級 (1 個月)
擴充功能生態系: 進階 API
: 安全最佳實踐
: 企業功能
: 框架整合
```
### 🛠️ 你的擴充功能開發工具箱摘要
[網頁瀏覽器的歷史](https://www.mozilla.org/firefox/browsers/browser-history/)
完成本課後，你已具備：
- **瀏覽器架構知識**：了解渲染引擎、安全模型與擴充功能整合
- **開發環境**：現代化開發工具鏈，包含 Webpack、NPM 與除錯功能
- **介面設計基礎**：語義化的 HTML 結構與逐步揭露設計模式
- **安全意識**：瀏覽器權限與安全開發實務的理解
- **跨瀏覽器概念**：相容性考量與測試方法的知識
- **API 整合**：與外部資料來源合作的基礎
- **專業工作流程**：業界標準的開發與測試程序
[網頁的歷史](https://webfoundation.org/about/vision/history-of-the-web/)
**實務應用範圍**：這些技能直接適用於
- **網頁開發**：單頁應用程式（SPA）與漸進式網頁應用（PWA）
- **桌面應用**：Electron 與基於網路的桌面軟體
- **行動裝置開發**：混合式與網頁行動應用
- **企業工具**：內部生產力應用與工作流程自動化
- **開源專案**：參與瀏覽器擴充功能與網頁標準開發
[蒂姆·伯納斯-李的訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
**下一階段**：你已準備好新增互動功能、使用瀏覽器 API，並創建解決實際使用者問題的擴充功能！
## 作業
## 作業
[重新設計您的擴充功能](assignment.md)
[重新設計你的擴充功能](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力確保翻譯準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。本公司對於因使用本翻譯而產生的任何誤解或曲解概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save