|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
|
|
"translation_date": "2025-10-22T22:45:09+00:00",
|
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# DOM 元素調查作業
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
現在您已經親身體驗了 DOM 操作的強大功能，是時候探索更廣泛的 DOM 接口世界了。這項作業將加深您對不同網頁技術如何與 DOM 互動的理解，而不僅僅是拖動元素。
|
|
|
|
|
|
## 學習目標
|
|
|
|
|
|
完成此作業後，您將能夠：
|
|
|
- **研究**並深入了解特定的 DOM 接口
|
|
|
- **分析** DOM 操作的實際應用
|
|
|
- **連結**理論概念與實際應用
|
|
|
- **培養**技術文檔撰寫和分析的技能
|
|
|
|
|
|
## 作業指導
|
|
|
|
|
|
### 第一步：選擇您的 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` - 離線功能
|
|
|
|
|
|
### 第二步：研究與文檔撰寫
|
|
|
|
|
|
撰寫一份全面的分析（300-500 字），包括：
|
|
|
|
|
|
#### 技術概述
|
|
|
- **定義**您選擇的接口的功能，使用清晰且易於理解的語言
|
|
|
- **解釋**它提供的主要方法、屬性或事件
|
|
|
- **描述**它旨在解決的問題類型
|
|
|
|
|
|
#### 實際應用分析
|
|
|
- **尋找**一個使用您選擇的接口的網站（檢查代碼或研究示例）
|
|
|
- **記錄**具體的實現方式，若可能請提供代碼片段
|
|
|
- **分析**開發者選擇此方法的原因
|
|
|
- **解釋**它如何提升用戶體驗
|
|
|
|
|
|
#### 實際應用
|
|
|
- **比較**您的接口與我們在植物園項目中使用的技術
|
|
|
- **建議**如何使用您的接口來增強或擴展植物園的功能
|
|
|
- **識別**其他項目中此接口的潛在價值
|
|
|
|
|
|
### 第三步：代碼示例
|
|
|
|
|
|
包含一個簡單且可運行的代碼示例，展示您的接口的實際應用。代碼應該：
|
|
|
- **功能性** - 測試後代碼應能正常運行
|
|
|
- **有註解** - 解釋每部分的作用
|
|
|
- **相關性** - 與實際使用場景相關
|
|
|
- **適合初學者** - 讓學習網頁開發的人能夠理解
|
|
|
|
|
|
## 提交格式
|
|
|
|
|
|
使用清晰的標題結構組織您的提交：
|
|
|
|
|
|
```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) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
