You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/tw/README.md

236 lines
26 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "caf2ca695e9d259153d24a5cf3e07ef5",
"translation_date": "2025-10-11T10:52:28+00:00",
"source_file": "README.md",
"language_code": "tw"
}
-->
[![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/)
[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
# 初學者的網頁開發課程 - 一套完整的教學計畫
透過 Microsoft Cloud Advocates 提供的 12 週完整課程,學習網頁開發的基礎知識。課程包含 24 節課,透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲,深入學習 JavaScript、CSS 和 HTML。課程還包含測驗、討論及實際作業幫助你提升技能並加強知識記憶。立即開始你的程式設計旅程吧
加入 Azure AI Foundry Discord 社群
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
按照以下步驟開始使用這些資源:
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)
### 🌐 多語言支援
#### 透過 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) | [繁體中文(台灣)](./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)**
[![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)
#### 🧑‍🎓 _你是學生嗎_
造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon),在這裡你可以找到初學者資源、學生套件,甚至有機會獲得免費證書兌換券。這是你值得收藏並定期查看的頁面,因為我們每月都會更新內容。
### 📣 公告 - _使用生成式 AI 建立新專案_
新增了 AI 助理專案,快來看看 [專案](./09-chat-project/README.md)
### 📣 公告 - _新課程_ 關於 JavaScript 的生成式 AI 已正式推出
不要錯過我們的生成式 AI 新課程!
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習!
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.tw.png)
- 課程涵蓋從基礎到 RAG 的所有內容。
- 使用生成式 AI 和我們的配套應用程式與歷史人物互動。
- 有趣且引人入勝的故事情節,帶你穿越時空!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.tw.png)
每節課都包含作業、知識檢測及挑戰,幫助你學習以下主題:
- 提示設計及提示工程
- 文本及圖像應用程式生成
- 搜索應用程式
造訪 [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) 中進行交流,我們的版主團隊會在那裡回答你的問題。
為了進一步提升你的教育水平,我們強烈建議探索 [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 帳戶中建立一個包含課程副本的新儲存庫。
按照以下步驟:
1. **Fork 儲存庫**:點擊頁面右上角的 "Fork" 按鈕。
2. **Clone 儲存庫** `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 中運行課程
在你建立的儲存庫副本中,點擊 **Code** 按鈕並選擇 **Open with Codespaces**。這將為你建立一個新的 Codespace 以供使用。
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.tw.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. 將你的儲存庫克隆到電腦。點擊 **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) - 幫助你更快撰寫程式碼
## 📂 每節課包含:
- 可選的手繪筆記
- 可選的補充影片
- 課前暖身測驗
- 書面課程
- 針對專案型課程,提供逐步指南教您如何建立專案
- 知識檢測
- 挑戰
- 補充閱讀
- 作業
- [課後測驗](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 |
## 🏫 教學法
我們的課程設計基於兩個關鍵的教學原則:
* 專案導向學習
* 頻繁的測驗
本課程教授 JavaScript、HTML 和 CSS 的基礎知識,以及當今網頁開發者使用的最新工具和技術。學生將有機會通過建立打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空侵略者風格的遊戲以及商業銀行應用程式來獲得實際操作經驗。完成課程後,學生將對網頁開發有扎實的理解。
> 🎓 您可以在 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)" 視頻教程,其中一些作者也參與了本課程的編寫。
此外,課前的低壓力測驗可以幫助學生集中注意力學習主題,而課後的第二次測驗則能進一步加強記憶。本課程設計靈活有趣,可以完整學習,也可以選擇部分內容。專案從簡單開始,並在 12 週的課程結束時逐漸變得更加複雜。
雖然我們刻意避免介紹 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)。我們歡迎您的建設性反饋!
## 🧭 離線存取
您可以使用 [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)找到。
## 🎒 其他課程
我們的團隊還製作了其他課程!請查看:
- [MCP 初學者課程](https://aka.ms/mcp-for-beginners)
- [邊緣 AI 初學者課程](https://aka.ms/edgeai-for-beginners)
- [AI 助手初學者課程](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 應用有任何疑問,請加入:
[![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)
如果您有產品反饋或在構建過程中遇到錯誤,請訪問:
[![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)
## 授權
此存儲庫基於 MIT 授權。請參閱 [LICENSE](../../LICENSE) 文件以了解更多信息。
---
**免責聲明**
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性,但請注意,自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。