From e11291bd146a9b6fe760592543093ca4bf9ea751 Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Tue, 6 Jan 2026 14:31:44 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 10/20, 100 files) --- .../1-template-route/assignment.md | 54 +- .../hk/7-bank-project/2-forms/README.md | 972 +++++-- .../hk/7-bank-project/2-forms/assignment.md | 160 +- .../hk/7-bank-project/3-data/README.md | 845 +++++- .../hk/7-bank-project/3-data/assignment.md | 143 +- .../4-state-management/README.md | 700 ++++- .../4-state-management/assignment.md | 165 +- .../1-using-a-code-editor/README.md | 701 ++++- .../1-using-a-code-editor/assignment.md | 738 +++-- translations/hk/9-chat-project/README.md | 2431 +++++++++++++++-- .../solution/backend/python/README.md | 38 +- translations/hk/README.md | 324 ++- translations/hk/for-teachers.md | 4 +- .../README.md | 2 +- .../2-github-basics/README.md | 4 +- .../3-accessibility/README.md | 2 +- .../ja/2-js-basics/1-data-types/README.md | 2 +- .../2-js-basics/2-functions-methods/README.md | 2 +- .../2-js-basics/3-making-decisions/README.md | 2 +- .../ja/2-js-basics/4-arrays-loops/README.md | 2 +- .../ja/3-terrarium/1-intro-to-html/README.md | 4 +- .../ja/3-terrarium/2-intro-to-css/README.md | 6 +- .../3-intro-to-DOM-and-closures/README.md | 8 +- translations/ja/3-terrarium/README.md | 45 +- .../1-about-browsers/README.md | 10 +- .../2-forms-browsers-local-storage/README.md | 2 +- .../README.md | 6 +- .../2-drawing-to-canvas/README.md | 8 +- .../ja/6-space-game/5-keeping-score/README.md | 2 +- .../7-bank-project/1-template-route/README.md | 2 +- .../ja/7-bank-project/2-forms/README.md | 10 +- .../ja/7-bank-project/3-data/README.md | 8 +- .../4-state-management/README.md | 2 +- .../4-state-management/assignment.md | 2 +- .../1-using-a-code-editor/README.md | 14 +- .../1-using-a-code-editor/assignment.md | 6 +- translations/ja/9-chat-project/README.md | 10 +- translations/ja/README.md | 250 +- translations/ja/for-teachers.md | 4 +- .../README.md | 2 +- .../2-github-basics/README.md | 4 +- .../3-accessibility/README.md | 2 +- .../mo/2-js-basics/1-data-types/README.md | 2 +- .../2-js-basics/2-functions-methods/README.md | 2 +- .../2-js-basics/3-making-decisions/README.md | 2 +- .../mo/2-js-basics/4-arrays-loops/README.md | 2 +- .../mo/3-terrarium/1-intro-to-html/README.md | 4 +- .../mo/3-terrarium/2-intro-to-css/README.md | 6 +- .../3-intro-to-DOM-and-closures/README.md | 8 +- translations/mo/3-terrarium/README.md | 43 +- .../mo/3-terrarium/solution/README.md | 2 +- .../1-about-browsers/README.md | 10 +- .../2-forms-browsers-local-storage/README.md | 2 +- .../README.md | 6 +- translations/mo/5-browser-extension/README.md | 2 +- .../mo/5-browser-extension/solution/README.md | 4 +- .../solution/translation/README.fr.md | 4 +- .../solution/translation/README.hi.md | 4 +- .../solution/translation/README.it.md | 4 +- .../solution/translation/README.ja.md | 4 +- .../solution/translation/README.ms.md | 4 +- .../mo/5-browser-extension/start/README.md | 4 +- .../2-drawing-to-canvas/README.md | 8 +- .../mo/6-space-game/5-keeping-score/README.md | 2 +- .../7-bank-project/1-template-route/README.md | 2 +- .../mo/7-bank-project/2-forms/README.md | 10 +- .../mo/7-bank-project/3-data/README.md | 8 +- .../4-state-management/README.md | 4 +- .../4-state-management/assignment.md | 2 +- translations/mo/7-bank-project/README.md | 2 +- .../1-using-a-code-editor/README.md | 16 +- .../1-using-a-code-editor/assignment.md | 6 +- translations/mo/9-chat-project/README.md | 10 +- translations/mo/README.md | 318 ++- translations/mo/for-teachers.md | 4 +- .../README.md | 875 +++++- .../assignment.md | 77 +- .../2-github-basics/README.md | 704 ++++- .../3-accessibility/README.md | 1513 +++++++++- .../3-accessibility/assignment.md | 260 +- .../tw/10-ai-framework-project/README.md | 906 +++++- .../tw/2-js-basics/1-data-types/README.md | 563 +++- .../tw/2-js-basics/1-data-types/assignment.md | 100 +- .../2-js-basics/2-functions-methods/README.md | 493 +++- .../2-functions-methods/assignment.md | 81 +- .../2-js-basics/3-making-decisions/README.md | 618 ++++- .../3-making-decisions/assignment.md | 120 +- .../tw/2-js-basics/4-arrays-loops/README.md | 727 ++++- .../2-js-basics/4-arrays-loops/assignment.md | 119 +- .../tw/3-terrarium/1-intro-to-html/README.md | 547 +++- .../3-terrarium/1-intro-to-html/assignment.md | 163 +- .../tw/3-terrarium/2-intro-to-css/README.md | 755 +++-- .../3-terrarium/2-intro-to-css/assignment.md | 133 +- .../3-intro-to-DOM-and-closures/README.md | 759 ++++- .../3-intro-to-DOM-and-closures/assignment.md | 136 +- translations/tw/3-terrarium/README.md | 43 +- translations/tw/4-typing-game/README.md | 280 +- .../tw/4-typing-game/typing-game/README.md | 583 ++-- .../4-typing-game/typing-game/assignment.md | 51 +- .../1-about-browsers/README.md | 605 +++- 100 files changed, 16240 insertions(+), 3180 deletions(-) diff --git a/translations/hk/7-bank-project/1-template-route/assignment.md b/translations/hk/7-bank-project/1-template-route/assignment.md index 4ec0677e..72ad437d 100644 --- a/translations/hk/7-bank-project/1-template-route/assignment.md +++ b/translations/hk/7-bank-project/1-template-route/assignment.md @@ -1,26 +1,60 @@ # 改善路由 -## 指引 +## 指示 -目前的路由宣告僅包含要使用的模板 ID，但在顯示新頁面時，有時需要更多功能。讓我們透過以下兩個額外功能來改進路由的實現： +既然你已建立基本的路由系統，現在是時候以專業功能加以強化，提升用戶體驗和提供更好的開發工具。實際應用程式不僅僅需要模板切換，還需要動態頁面標題、生命週期掛勾和可擴充架構。 -- 為每個模板設定標題，並在模板變更時更新窗口標題為新標題。 -- 增加一個選項，在模板變更後執行一些程式碼。我們希望每次顯示儀表板頁面時，在開發者主控台中打印 `'Dashboard is shown'`。 +在此作業中，你將擴充你的路由實作，加入兩個常見於生產環境網頁應用程式的重要功能。這些增強會讓你的銀行應用感覺更完善，並為未來功能奠定基礎。 + +路由宣告目前只包含要使用的模板 ID，但顯示新頁面時有時需要更多資訊。讓我們透過兩個額外功能改進路由實作： + +### 功能一：動態頁面標題 +**目標：** 為每個模板設定標題，並在模板更換時更新瀏覽器視窗標題。 + +**重要原因：** +- **提升**使用者體驗，顯示具描述性的瀏覽器分頁標題 +- **增強**輔助技術與螢幕閱讀器的可存取性 +- **提供**更好的書籤與瀏覽器歷史上下文 +- **遵循**專業網站開發最佳實務 + +**實作方式：** +- **擴充** routes 物件，包含每條路由的標題資訊 +- **修改** `updateRoute()` 函式，動態更新 `document.title` +- **測試**在不同頁面切換時標題是否正常變更 + +### 功能二：路由生命週期掛勾 +**目標：** 新增在模板切換後執行程式碼的選項。我們希望每次顯示儀表板頁面時，在開發者控制台印出 `'Dashboard is shown'`。 + +**重要原因：** +- **啟用**特定路由載入時執行自訂邏輯 +- **提供**分析、記錄或初始化程式碼的掛勾 +- **建立**支援更複雜路由行為的基礎 +- **展示**網站開發中觀察者模式的概念 + +**實作方式：** +- **新增**路由設定的可選回呼函式屬性 +- **模板渲染完成後執行**該回呼函式（如存在） +- **確保**此功能能作用於任何含有定義回呼的路由 +- **測試**造訪儀表板時，控制台訊息是否出現 ## 評分標準 -| 評分標準 | 卓越 | 合格 | 需要改進 | -| -------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | -| | 兩個功能均已實現並正常運作。標題和程式碼新增功能也適用於在 `routes` 宣告中新增的路由。 | 兩個功能均正常運作，但行為是硬編碼的，無法透過 `routes` 宣告進行配置。新增第三個具有標題和程式碼新增功能的路由無法運作或僅部分運作。 | 其中一個功能缺失或未正常運作。 | +| 標準 | 優異 | 合格 | 需要改進 | +| ---- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| | 兩項功能皆已實作並正常運作。標題與程式碼新增亦可支援 `routes` 宣告中添加的新路由。 | 兩項功能皆可運作，但行為為硬編碼，無法透過 `routes` 宣告設定。無法或部分可用於添加第三條帶標題與程式碼的路由。 | 缺少其中一項功能或功能無法正常運作。 | + +--- + **免責聲明**： -本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。 \ No newline at end of file +本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司對因使用此翻譯而引起的任何誤解或誤釋不負任何責任。 + \ No newline at end of file diff --git a/translations/hk/7-bank-project/2-forms/README.md b/translations/hk/7-bank-project/2-forms/README.md index e9cb4ba2..3d8943a2 100644 --- a/translations/hk/7-bank-project/2-forms/README.md +++ b/translations/hk/7-bank-project/2-forms/README.md @@ -1,313 +1,965 @@ -# 建立銀行應用程式第二部分：建立登入和註冊表單 - -## 課前測驗 - -[課前測驗](https://ff-quizzes.netlify.app/web/quiz/43) - -### 簡介 - -在幾乎所有現代的網頁應用程式中，您都可以創建一個帳戶來擁有自己的私人空間。由於多個使用者可以同時訪問網頁應用程式，因此需要一種機制來分別儲存每個使用者的個人資料，並選擇要顯示的資訊。我們不會涵蓋如何[安全地管理使用者身份](https://en.wikipedia.org/wiki/Authentication)，因為這是一個非常廣泛的主題，但我們會確保每個使用者能夠在我們的應用程式中創建一個（或多個）銀行帳戶。 +# 建立銀行應用程式第二部分：建立登入及註冊表單 + +```mermaid +journey + title 你的表單開發歷程 + section HTML 基礎 + 了解表單元素: 3: Student + 學習輸入類型: 4: Student + 掌握無障礙設計: 4: Student + section JavaScript 整合 + 處理表單提交: 4: Student + 實作 AJAX 通訊: 5: Student + 處理伺服器回應: 5: Student + section 驗證系統 + 建立多層驗證: 5: Student + 增強使用者體驗: 5: Student + 確保資料完整性: 5: Student +``` +## 課前小測驗 + +[課前小測驗](https://ff-quizzes.netlify.app/web/quiz/43) + +是否曾經在線上填寫表格，卻被拒絕你的電郵格式？或者點擊提交時所有資料都遺失了？我們都遇過這些令人挫敗的經歷。 + +表格是使用者與應用程序功能之間的橋樑。就像航空管制員謹慎使用的程序，引導飛機安全抵達目的地一樣，良好設計的表格提供明確回饋並防止昂貴錯誤。反之，糟糕的表格可能比忙碌機場裡的誤會更快令使用者流失。 + +在本課程中，我們將把你的靜態銀行應用轉換成互動式應用。你將學會建立驗證使用者輸入、與伺服器通訊並提供實用回饋的表格。可視為建立讓使用者導航應用功能的控制界面。 + +最後，你將擁有一套完整的登入及註冊系統，透過驗證引導使用者走向成功而非挫敗。 + +```mermaid +mindmap + root((表單開發)) + HTML Foundation + 語義元素 + 輸入類型 + 無障礙設計 + 標籤關聯 + User Experience + 驗證反饋 + 錯誤預防 + 載入狀態 + 成功訊息 + JavaScript Integration + 事件處理 + AJAX 通信 + 資料處理 + 錯誤管理 + Validation Layers + HTML5 驗證 + 用戶端邏輯 + 伺服器端安全 + 漸進增強 + Modern Patterns + Fetch API + Async/Await + 表單資料 API + Promise 處理 +``` +## 預備知識 -在這部分，我們將使用 HTML 表單為我們的網頁應用程式新增登入和註冊功能。我們將學習如何以程式化方式將資料發送到伺服器 API，並最終定義使用者輸入的基本驗證規則。 +在開始建立表格前，先確保你的環境設置妥當。本課程緊接上次課程內容，因此如果你跳過了中間步驟，建議你回去先完成基礎設定。 -### 先決條件 +### 必要設置 -您需要完成本課程的[HTML 模板和路由](../1-template-route/README.md)部分。此外，您還需要安裝 [Node.js](https://nodejs.org) 並在本地運行[伺服器 API](../api/README.md)，以便能夠發送資料來創建帳戶。 +| 元件 | 狀態 | 描述 | +|-----------|--------|-------------| +| [HTML 模板](../1-template-route/README.md) | ✅ 必須 | 你的基本銀行應用結構 | +| [Node.js](https://nodejs.org) | ✅ 必須 | 伺服器的 JavaScript 執行環境 | +| [銀行 API 伺服器](../api/README.md) | ✅ 必須 | 用於資料存取的後端服務 | -**請注意** -您需要同時運行以下兩個終端： -1. 用於我們在[HTML 模板和路由](../1-template-route/README.md)課程中建立的主要銀行應用程式。 -2. 用於我們剛剛設置的[銀行應用程式伺服器 API](../api/README.md)。 +> 💡 **開發提示**：你會同時執行兩個伺服器 — 前端銀行應用伺服器和後端 API 伺服器。這種設定模擬真實開發中前後端分離的環境。 -您需要這兩個伺服器都在運行，才能繼續完成本課程的其餘部分。它們分別監聽不同的埠（埠 `3000` 和埠 `5000`），因此應該可以正常運作。 +### 伺服器配置 -您可以在終端中執行以下命令來測試伺服器是否正常運行： +**你的開發環境會包括：** +- **前端伺服器**：提供銀行應用（通常使用 `3000` 端口） +- **後端 API 伺服器**：負責資料存取（使用 `5000` 端口） +- **兩個伺服器**可以同時運行而不衝突 -```sh +**測試 API 連線：** +```bash curl http://localhost:5000/api -# -> should return "Bank API v1.0.0" as a result +# 預期回應: "Bank API v1.0.0" ``` +**若你看到 API 版本回應，表示環境準備就緒！** + --- -## 表單與控制項 +## 了解 HTML 表格與控制元件 + +HTML 表格是使用者與你的網頁應用程式溝通的方式。你可以將它們想像成 19 世紀連接遠方地點的電報系統──它們是使用者意圖與應用回應間的通訊協議。設計良好時，會捕捉錯誤、指導格式並提供有用提示。 -`
` 元素封裝了 HTML 文件的一個區域，使用者可以在其中使用互動式控制項輸入和提交資料。在表單中可以使用各種使用者介面（UI）控制項，其中最常見的是 `` 和 ` +
``` -`name` 屬性將在表單資料發送時用作屬性名稱。`id` 屬性則用於將 `