From fa714421a92957124c3d36d5b34380b3ff59544c Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Mar 2026 18:08:54 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes) --- translations/zh-HK/.co-op-translator.json | 10 +- .../README.md | 719 +++++++------- translations/zh-HK/AGENTS.md | 286 +++--- translations/zh-HK/README.md | 227 ++--- translations/zh-MO/.co-op-translator.json | 10 +- .../README.md | 887 +++++++++--------- translations/zh-MO/AGENTS.md | 412 ++++---- translations/zh-MO/README.md | 236 ++--- translations/zh-TW/.co-op-translator.json | 10 +- .../README.md | 747 ++++++++------- translations/zh-TW/AGENTS.md | 334 +++---- translations/zh-TW/README.md | 216 +++-- 12 files changed, 2058 insertions(+), 2036 deletions(-) diff --git a/translations/zh-HK/.co-op-translator.json b/translations/zh-HK/.co-op-translator.json index 8933f1594..12a9a78bb 100644 --- a/translations/zh-HK/.co-op-translator.json +++ b/translations/zh-HK/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T13:11:27+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T17:59:01+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "zh-HK" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:23:03+00:00", + "translation_date": "2026-03-06T18:07:37+00:00", "source_file": "AGENTS.md", "language_code": "zh-HK" }, @@ -516,8 +516,8 @@ "language_code": "zh-HK" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:16:46+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T17:55:10+00:00", "source_file": "README.md", "language_code": "zh-HK" }, diff --git a/translations/zh-HK/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh-HK/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 2c8f83b67..5bbe7fc79 100644 --- a/translations/zh-HK/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh-HK/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,86 +1,86 @@ -# 程式語言與現代開發工具簡介 +# 程式語言與現代開發工具入門 + +嗨，未來的開發者！👋 我可以告訴你一件每天都讓我起雞皮疙瘩的事情嗎？你即將發現，程式設計不只是關於電腦——它是擁有真正超能力，將你最瘋狂的想法變成現實！ -嗨，未來的開發者！👋 可不可以跟你說件每天都讓我雞皮疙瘩掉滿地的事？你即將發現，程式設計不只是關於電腦——它是擁有真正超能力，把你最狂野的想法實現出來的能力！ +你知道使用你最喜歡的應用程式、所有東西都完美契合的那一刻嗎？當你點一下按鈕，發生了某種神奇的事，讓你讚嘆「哇，他們怎麼做到的？」那麼，創造這種魔法的程式碼就是某個像你一樣的人寫的，可能當時他正坐在他最愛的咖啡店凌晨兩點，喝著第三杯特濃咖啡。你準備好了嗎？到了這堂課結束時，你不僅會了解他們怎麼做到的，還會迫不及待自己嘗試！ -你知道那種用你最喜歡的 app，所有操作都剛剛好完美連接的瞬間嗎？當你按一個按鈕，然後發生了某種完全神奇的事，讓你忍不住想說「哇，他們到底怎麼做到的？」剛好，某個跟你一樣的人——可能正坐在他最喜歡的咖啡店裡凌晨兩點，喝著第三杯濃縮咖啡——寫了造就那魔法的程式碼。你將親眼見證的令人震驚的事是：到了這節課結束，你不僅會理解他們是怎麼做到的，還會迫不及待想要自己試試看！ +說真的，如果你現在覺得程式設計很嚇人，我完全理解。當我剛開始時，我真的以為你必須是數學天才或從五歲就開始寫程式。但有件事徹底改變了我的想法：程式設計就像學習用新語言交談一樣。你從「哈囉」和「謝謝」開始，接著學會點咖啡，不久後就能展開深刻的哲學對話！只是這次，你是在和電腦對話，說實話？電腦是你最有耐心的對話夥伴——它們永遠不會批評你的錯誤，總是樂於嘗試再來一次！ -聽著，如果你覺得程式設計現在很可怕，我完全可以理解。當我剛開始時，我真的以為你需要是某種數學天才，或者從五歲就開始寫程式。但徹底改變我觀念的是這件事：程式設計就像學一門語言溝通一樣。你從「你好」和「謝謝」學起，然後開始點咖啡，不知不覺你開始進行深刻的哲學討論！只不過在這案例裡，你是在和電腦對話。說真的？它們是你能找到的最有耐性的對話夥伴——它們從不責備你的錯誤，而是永遠準備好再試一次！ - -今天，我們將探索現代網頁開發令人驚嘆的工具，讓它不僅僅是可行，而是讓人嚴重上癮。我說的就是 Netflix、Spotify 和你喜歡的獨立應用工作室每天使用的同一套編輯器、瀏覽器和工作流程。最棒的是：這些專業級、業界標準的工具大多數都是完全免費的！ +今天，我們要探索那些讓現代網頁開發不只是可能，而是令人上癮的強大工具。我說的是 Netflix、Spotify 以及你最愛的獨立應用工作室的開發者每天使用的編輯器、瀏覽器和工作流程。最棒的是：這些專業級、業界標準的工具大部分都是免費的！ ![Intro Programming](../../../../translated_images/zh-HK/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title 你今日嘅程式編寫旅程 + title 你今日的編程之旅 section 發現 - 乜嘢係程式設計: 5: You - 程式語言: 4: You + 什麼是編程: 5: You + 編程語言: 4: You 工具概覽: 5: You section 探索 - 程式碼編輯器: 4: You - 瀏覽器同開發者工具: 5: You - 指令行: 3: You + 代碼編輯器: 4: You + 瀏覽器與開發工具: 5: You + 命令行: 3: You section 練習 語言偵探: 4: You 工具探索: 5: You 社群連繫: 5: You ``` -## 讓我們看看你已經知道些什麼！ +## 先看看你已經知道什麼！ -在跳進有趣的內容前，我很好奇——你對程式設計這個世界已經知道多少？聽著，如果你看到這些問題心想「我根本完全沒概念」，那不只是可以，反而是完美！這表示你正處於正確位置。把這個小測驗想成運動前的暖身——我們只是熱身大腦肌肉！ +在我們跳進有趣的部分前，我很好奇——你對這個程式世界已經知道什麼？如果你看著這些問題心想「我完全一頭霧水」，那不只是沒關係，簡直是完美！代表你正站在最正確的起點。把這次測驗想像成運動前的暖身——我們只是在熱身大腦肌肉！ -[做課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[做這堂課前測驗](https://ff-quizzes.netlify.app/web/) -## 我們即將一起展開的冒險 +## 我們即將一起踏上的冒險 -好啦，我真心為我們今天將探討的東西興奮到蹦蹦跳！說真的，我希望能看到當你理解這些概念的那張臉。這就是我們一起踏上的驚奇旅程： +好吧，我對今天將要探索的內容超級興奮！說真的，我真希望能看到你理解某些觀念時的表情。這是我們將一起展開的奇妙旅程： -- **什麼是程式設計（以及為什麼它超酷！）** – 我們要了解程式碼如何成為背後無形魔法，驅動你周遭一切，從那個能準時知道是星期一早晨的鬧鐘，到完美推薦你 Netflix 節目的算法 -- **程式語言和它們奇妙的個性** – 想像走進一場派對，每個人都有完全不同的超能力和解決問題的方法。這就是程式語言的世界，你會很享受認識它們！ -- **數位魔法的基本構件** – 想像這是終極創意樂高組合套件。一旦你了解這些積木怎麼拼組，你會發現你實際上能打造出你想像的任何東西 -- **讓你感覺像握到魔法棒的專業工具** – 我不是誇張——這些工具真的會讓你覺得你有超能力，最棒的是？它們是專業人士每天使用的！ +- **程式設計到底是什麼（以及為什麼它超酷！）** — 我們將發現程式碼如何成為你周圍所有事物的隱形魔法，從那個怎麼知道是周一早晨的鬧鐘，到完美策展你 Netflix 推薦的演算法 +- **程式語言和它們驚人的個性** — 想像走進一個派對，每個人的超能力和解決問題的方法都截然不同。程式語言世界就是這樣，而你將會愛上認識它們！ +- **數位魔法的基本構成積木** — 把它們想成終極創意樂高套裝。當你理解這些積木如何拼合，你會發現你真的可以打造任何你想像的東西 +- **專業工具讓你感覺像得到魔法棒** — 我不是在誇張——這些工具真的會讓你覺得有超能力，最棒的是？它們是專業人士正在使用的同樣工具！ -> 💡 **重點是**：今天不要想著要全部記住！我現在只想讓你感受到對可能性的那股興奮。細節會隨著我們一起練習自然記住——真正的學習就是這樣發生的！ +> 💡 **這裡有件事**：今天不要試著把所有東西都記起來！現在我只希望你感受到對未來可能性的興奮火花。細節會隨著我們一起練習自然留下——這才是真正的學習！ -> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上進行這堂課程！ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上進行此課程！ -## 那麼究竟什麼是*程式設計*？ +## 那麼程式設計*到底*是什麼？ -好，來回答百萬美元的問題：程式設計到底是什麼？ +好，我們來回答這個千萬美元的問題：程式設計到底是什麼？ -我來分享一個徹底改變我思考的故事。上週我試著向媽媽解釋如何使用我們的新智慧電視遙控器。結果我發現自己一直在說「按紅色的按鈕，不是大紅色的，是左邊那個小紅色的…不，是另一個左邊…好，現在按住兩秒，不是一秒，不是三秒…」聽起來很熟悉嗎？😅 +我來說個改變我看法的故事。上週，我試著解釋給我媽媽怎麼使用我們的新智能電視遙控器。我發現自己說：「按紅色按鈕，但不是大紅色，是左邊的小紅色按鈕⋯⋯不，是你的另一邊左邊⋯⋯好了，現在按住兩秒，不是一秒，也不是三秒⋯⋯」聽起來很熟悉吧？😅 -這就是程式設計！它是對一個非常強大的東西，給出極度詳細、逐步的指令，而它需要所有步驟都說得非常清楚的藝術。只不過你不是在解釋給媽媽聽（她可以問「哪個紅色按鈕？！」），而是在解釋給電腦——電腦會精確執行你說的每一句話，即便你真正想說的不是這樣。 +這就是程式設計！就是給一個非常強大的東西，極其詳細且逐步的指令的藝術。但你不是在跟媽媽解釋（媽媽會問「哪個紅色按鈕？！」），而是在跟電腦解釋（電腦只會照你說的做，即使你說的不是你真正想的）。 -第一次學到這點時讓我震撼的是：電腦其實本質非常簡單。它們字面上只懂兩個東西——1 和 0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇之處在於——我們不必像《駭客任務》裡那樣只說 1 和 0 。這時就是**程式語言**大顯身手的地方。它們就像世界上最棒的翻譯官，把你正常的人類思考完美地轉換成電腦語言。 +當我第一次學到這點時，這件事令我驚訝不已：電腦本質上其實相當簡單。它們只能理解兩種東西——1 和 0，基本上就是「是」和「不是」或「開」和「關」。僅此而已！但神奇的是，我們不需要像《駭客任務》那樣用 1 和 0 溝通。這就是**程式語言**派上用場的地方。它們就像擁有世界上最棒的翻譯員，將你極自然的人類思維轉換成電腦語言。 -而每天早上醒來仍讓我起雞皮疙瘩的是：你生活中所有數位東西都是由跟你一樣的人開始的，可能他們穿著睡衣，手裡拿著咖啡，在筆電前敲著程式碼。讓你看起來完美無瑕的 Instagram 濾鏡？有人寫了那程式碼。推推薦你發現新歌的算法？一位開發者設計了它。幫你和朋友分餐費用的 app？沒錯，有人想「這很煩，我一定能解決它」，結果…他們做到了！ +而且現在每天早上醒來，這仍會讓我起雞皮疙瘩：你生活中*一切*數碼東西都起始於某個像你一樣的人，可能穿著睡衣、喝著咖啡，在筆電上敲著碼。那個讓你看起來完美無瑕的 Instagram 濾鏡？有人寫了那段程式碼。那份推介你新歡歌曲的推薦？一位開發者設計了那套演算法。幫你跟朋友分帳單的應用程式？沒錯，有人想「這太煩了，我能不能修好它」，然後……他們做到了！ -學程式不僅是學新技術——你是加入這個超棒的問題解決社群，他們每天的想法是，「如果我能做出些什麼讓別人的生活更好一點點呢？」說真的，還有比這更帥的事嗎？ +當你學會程式設計，你不只是學會新技能——你成為了這個令人難以置信的問題解決者社群的一份子，每天都在想：「如果我能做點什麼，讓某人的一天更美好一點，那該有多好？」說真的，有比這更酷的事嗎？ -✅ **趣味知識探索**：有空時去查查世界上第一位程式設計師是誰？提示一下：她可能不是你預期的人！她的故事非常吸引人，而且證明了程式設計一直是關於創意解決問題和跳出框架思考。 +✅ **趣味考古**：當你有空的時候，可以查查看這件事——你認為世界上第一位電腦程式設計師是誰？給你個提示：可能不是你想像中的那位！這個人的故事非常迷人，也展示了程式設計一直以來都是關於創造性問題解決與跳出框架思考的。 -### 🧠 **回顧時間：你感覺如何？** +### 🧠 **檢視時間：你現在感覺如何？** -**花點時間反思：** -- 「給電腦下指令」的概念現在對你來說有意義嗎？ -- 你能想到想用程式自動化的日常任務嗎？ -- 關於程式設計，你腦中冒出什麼問題？ +**花點時間思考：** +- 「給電腦指令」的想法你現在懂了嗎？ +- 你能想出一個想用程式自動化的日常任務嗎？ +- 你對這整個程式設計主題有什麼問題在腦海中浮現？ -> **記住**：如果某些概念現在還模糊是完全正常的。學程式就像學一門新語言——你的大腦需要時間建立神經通路。你做得很棒！ +> **記得**：如果有些概念現在還模糊完全正常。學習程式設計就像學習新語言——需要時間讓你的大腦建立神經連結。你做得很好！ ## 程式語言就像不同口味的魔法 -好啦，這聽起來怪怪的，但跟我走——程式語言很像不同類型的音樂。想想看：有浪漫即興的爵士樂、強而有力的搖滾、典雅嚴謹的古典樂和充滿創造力與表達的嘻哈。每種風格都有自己的氛圍、熱情粉絲社群，也適合不同心情和場合。 +好啦，這聽起來可能有點怪，但請跟我繼續看——程式語言非常像不同風格的音樂。想想看：有爵士，滑順且即興；搖滾，強力且直接；古典，優雅且有結構；還有嘻哈，富創意且具表現力。每種風格有它獨特的氛圍、瘋狂粉絲族群，也適合不同心境和場合。 -程式語言也是如此！你不會用同一種語言寫一款有趣的手機遊戲和處理大量氣候數據的程式，就像你不會在瑜伽課播放死亡金屬（嗯，大多數瑜伽課至少是這樣😄）。 +程式語言也是這樣！你不會用同一種語言去寫一款有趣的手機遊戲，然後又用它來處理龐大的氣候數據，就好像你不會在瑜伽課上聽死亡金屬音樂（至少大部分瑜伽課不會😄）。 -每次想起這點，我都覺得超神奇：這些語言就像世界上最有耐性的、最聰明的口譯員坐在你旁邊。你以對你腦子自然的方式表達想法，它們處理把這些轉成電腦真正懂的 1 和 0。就像你有一位朋友同時流利「人類創意」和「電腦邏輯」——而且永不疲倦、不需要喝咖啡休息，也不會因為你問第二次同樣問題而嘲笑你！ +但每次想起這點，我都驚嘆不已：這些語言就像身旁坐著世界上最有耐心、最聰明的口譯員。你用你人腦感覺最自然的方式表達想法，他們負責把它翻譯成電腦真的懂的 1 和 0。就像你有個朋友，流利掌握「人類創意」和「電腦邏輯」兩種語言——而且他永遠不累、不需要喝咖啡休息，也不會因為你連問兩次同一個問題就生氣！ -### 熱門程式語言與用途 +### 熱門程式語言及用途 ```mermaid mindmap @@ -91,7 +91,7 @@ mindmap 互動網站 TypeScript JavaScript + 類型 - 企業應用 + 企業應用程式 Data & AI Python 數據科學 @@ -121,41 +121,41 @@ mindmap 雲端服務 可擴展後端 ``` -| 語言 | 最適合的用途 | 為什麼受歡迎 | +| 語言 | 最適合 | 為何受歡迎 | |----------|----------|------------------| -| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器執行，驅動互動網站 | -| **Python** | 數據科學、自動化、AI | 易讀易學，擁有強大函式庫 | -| **Java** | 企業應用、Android 應用 | 跨平台，適合大型系統 | -| **C#** | Windows 應用、遊戲開發 | 微軟生態系統強力支援 | -| **Go** | 雲端服務、後端系統 | 快速、簡單，為現代運算設計 | +| **JavaScript** | 網頁開發，用戶介面 | 可直接在瀏覽器運行，驅動互動式網站 | +| **Python** | 資料科學，自動化，人工智慧 | 易讀易學，有強大函式庫 | +| **Java** | 企業應用，安卓應用 | 跨平台，適合大型系統 | +| **C#** | Windows 應用，遊戲開發 | 微軟生態系統支援強大 | +| **Go** | 雲端服務，後端系統 | 快速、簡潔，為現代運算設計 | ### 高階語言 vs 低階語言 -說實話，這是我剛開始學程式時完全被弄得暈頭轉向的概念，所以我會分享讓我終於理解的比喻——希望也能幫助你！ +坦白說，這是我剛開始學程式時最讓我腦袋打結的概念，所以我想分享一個最後讓我懂得比喻——希望對你也有幫助！ -想像你去到一個陌生國家，你不會說當地語言，而你急著要找廁所（大家都有這經驗吧？😅）： +想像你去了一個不會說當地語言的國家，急需找廁所（我們都遇過吧？😅）： -- **低階程式設計** 就像你學會當地方言，甚至能跟街角賣水果的老奶奶用文化暗號、地方俚語和只有在當地長大的人才懂的笑話聊天。超厲害而且效率超高……但前提是你必須流利！不然光找廁所就快瘋掉。 +- **低階程式語言** 就像你學會當地方言，能跟街角賣水果的阿嬤用文化典故、當地俚語和只有在地人懂的內部笑話聊天。超級厲害且效率極高⋯⋯如果你真通這語言的話！但你光是想找個廁所時，這就有點嚇人了。 -- **高階程式設計** 就像你有個超棒的當地朋友理解你。你只要用簡單的英文說「我很需要找廁所」，他就會做所有文化轉換，給你用你這個局外人腦袋能懂的指引。 +- **高階程式語言** 就像你有個超棒的當地朋友懂你意思。你用簡單的英文說「我真的很想找洗手間」，他幫你翻譯文化差異、用你非當地人能理解的方式給你指路。 用程式語言來說： -- **低階語言**（像組合語言或 C）讓你能和電腦硬體進行非常細緻的對話，但你必須用機器的思維方式——嗯，可以說是大腦大轉彎！ -- **高階語言**（像 JavaScript、Python 或 C#）讓你用人的思考方式，而它們在背後處理所有機器語言的轉換。而且它們還有熱情的社群，有許多曾經是新手的人，真心想幫忙！ +- **低階語言**（像是組合語言或 C 語言）讓你能用超細節跟電腦硬件談判，但你得用機器般思考，說真的，這是個相當大的心態轉換！ +- **高階語言**（像 JavaScript、Python 或 C#）讓你用人的思考模式思考，後台幫你處理所有機器語言，而且還有超熱心的社群，有許多人記得第一次學時的挫折，願意真心幫助！ -你猜我建議從哪開始？😉 高階語言就像有輔助輪，你會捨不得拆掉，因為它讓整個體驗愉快許多！ +猜猜我建議你先學哪一種？😉 高階語言就像訓練輪，讓整個體驗更有趣，你甚至不想拿掉它們！ ```mermaid flowchart TB - A["👤 人類思考：
'我想計算費波納契數列'"] --> B{選擇語言層級} + A["👤 人類思考：
'我想計算費波納契數列'"] --> B{選擇程式語言層次} B -->|高階| C["🌟 JavaScript/Python
易讀易寫"] - B -->|低階| D["⚙️ 組合語言/C
直接硬體控制"] + B -->|低階| D["⚙️ 組合語言/C
直接控制硬體"] C --> E["📝 撰寫：fibonacci(10)"] D --> F["📝 撰寫：mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 電腦理解：
翻譯器處理複雜性"] + E --> G["🤖 電腦理解：
譯者處理複雜度"] F --> G G --> H["💻 相同結果：
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### 讓我告訴你為什麼高階語言更友善 +### 讓我來示範為什麼高階語言更親切易用 -好，我馬上展示一個絕佳例子，說明我為何愛上高階語言。不過先請你答應我一件事。看到第一個程式碼範例時，別怕！看起來嚇人完全是我的重點！ +準備好了嗎？我要給你看一段完美證明我為何愛上高階語言的範例，但先請你答應我一件事。看到第一個程式碼範例時，別慌！它看起來組成壓迫感十足，那正是我想說的重點！ -我們會用兩種完全不同方式寫同樣的任務。兩個都產生所謂的費氏數列——這是一個美麗的數學模式，每個數字都是前兩個數字之和：0、1、1、2、3、5、8、13……（趣味知識：你會在大自然各處找到這個模式——向日葵種子漩渦、松果圖案、甚至星系形成方式！） +我們會看同一個任務，但用兩種完全不同的風格寫出來。兩者都生成所謂的費氏數列——這是個美妙的數學模式，每個數字都是前兩個數字的和：0、1、1、2、3、5、8、13⋯⋯（趣味小知識：你在自然界中到處都看得到這個模式——葵花籽螺旋、松果圖案，甚至星系的形成！） -準備好看到差異了嗎？出發！ +準備好了嗎？出發！ -**高階語言（JavaScript）– 對人類友善：** +**高階語言（JavaScript）——人類友好：** ```javascript -// 第一步：基本斐波那契設置 +// 步驟 1：基本斐波那契設置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -184,13 +184,13 @@ console.log('Fibonacci sequence:'); ``` **這段程式碼做了什麼：** -- **宣告** 一個常數指定要產生多少 Fibonacci 數字 -- **初始化** 兩個變數追蹤目前和下一個序列數字 -- **設定** 起始值（0 和 1）定義 Fibonacci 模式 -- **顯示** 標題訊息辨識輸出 +- **宣告**一個常數指定要產生多少個費氏數字 +- **初始化**兩個變數追蹤數列中的目前與下一個數字 +- **設定**起始值（0 和 1）形成費氏模式 +- **顯示**標題訊息，辨識輸出內容 ```javascript -// 步驟 2：使用迴圈生成序列 +// 步驟 2：使用循環產生序列 for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,14 +201,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**分解運作過程：** -- **使用** `for` 迴圈走訪序列的每個位置 -- **顯示** 每個數字及其位置，使用模板字串格式化 -- **計算** 下一個 Fibonacci 數字為現值與次值相加 -- **更新** 追蹤變數，以進入下一輪迴圈 +**細節解析：** +- **用 `for` 迴圈**逐個位置遍歷數列 +- **顯示**每個數字與它的位置，使用模板字串格式化 +- **計算**下一個費氏數，將目前與下一個值相加 +- **更新**追蹤變數以進入下次迭代 ```javascript -// 第三步：現代函數式方法 +// 步驟 3: 現代函數式方法 const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**在上面，我們：** -- **創建** 使用現代箭頭函數語法的可重複使用函式 -- **建構** 陣列儲存完整序列，而非逐個顯示 -- **使用** 陣列索引由前值計算每個新數字 -- **回傳** 完整序列以便程序其他部分彈性使用 +**上述程式碼中，我們做了：** +- **用現代箭頭函式語法**建立一個可重用函式 +- **建構陣列**儲存完整序列，而非一個一個印出 +- **用陣列索引**從前面值計算新數字 +- **回傳**完整序列，方便程式其他部分靈活使用 -**低階語言（ARM 組合語言）– 對電腦友善：** +**低階語言（ARM 組合語言）——電腦友好：** ```assembly area ascen,code,readonly @@ -257,63 +257,62 @@ back add r0,r1 end ``` -注意 JavaScript 幾乎像英文指令一樣易讀，而組合語言用神秘指令直接控制電腦處理器。兩者完成完全相同的任務，但高階語言對人類來說更容易理解、撰寫和維護。 - -**你會注意到的主要差異：** -- **可讀性**：JavaScript 使用描述性名稱如 `fibonacciCount`，組合語言用難懂標籤如 `r0`、`r1` -- **註解**：高階語言鼓勵使用解釋性的註解，使程式碼本身成為自我說明 -- **結構**：JavaScript 的邏輯流程與人類逐步思考問題的方式相符合 -- **維護**：根據不同需求更新 JavaScript 版本是直觀且清晰的 +注意 JavaScript 版本讀起來幾乎像英文指令，而組合語言版本則使用直接控制電腦處理器的密碼指令。兩者達成完全相同的任務，但高階語言對人類而言更容易撰寫、閱讀和維護。 -✅ **關於費波那契數列**：這個絕美的數字模式（每個數字是前兩項的和：0、1、1、2、3、5、8……）幾乎在自然界到處可見！你會在向日葵螺旋、松果排列、鳳梨貝殼的弧度，甚至樹枝的生長方式中看到它。數學與程式碼如何幫助我們理解並重現自然用來創造美的模式，實在令人驚嘆！ +**你會發現的主要差異：** +- **可讀性**：JavaScript 使用描述性名稱如 `fibonacciCount`，而 Assembly 使用難以理解的標籤如 `r0`、`r1` +- **註解**：高階語言鼓勵撰寫能使程式碼自我說明的註解 +- **結構**：JavaScript 的邏輯流程符合人類逐步思考問題的方式 +- **維護性**：根據不同需求更新 JavaScript 版本既簡單又明確 +✅ **關於 Fibonacci 數列**：這個絕美的數字模式（每個數字等於前兩個數字之和：0、1、1、2、3、5、8……）幾乎在自然界的每一處都可見！你會發現在向日葵的花瓣螺旋、松果的排列、鸚鵡螺的螺旋曲線，甚至樹枝的生長方式中都存在。數學與程式碼能幫助我們理解並重現自然用來創造美麗的模式，真是令人難以置信！ -## 讓魔法發生的基本元素 +## 造就魔法的基礎元素 -好了，現在你已經見識過程式語言的實際運作，我們來拆解構成每一段程式碼的基本部分。把這些想成你最愛食譜中的關鍵材料──一旦瞭解每個元素的功能，你就能閱讀並撰寫幾乎任何語言的程式碼！ +好了，既然你已經目睹了編程語言的運作樣貌，讓我們來拆解組成任何程式的基本元素。把它們想像成你最喜愛的食譜裡的必備材料——只要你懂得每樣材料的功能，你幾乎就能閱讀和撰寫任何語言的程式！ -這有點像學習程式設計的文法。還記得學校時學過名詞、動詞以及如何組成句子嗎？程式語言也有自己的文法，老實說，它比英文文法邏輯多也更寬容！😄 +這有點像學習編程的語法。還記得學校裡學名詞、動詞和如何組句子嗎？編程也有自己的語法說法，老實說，這比英語的語法還邏輯且寬鬆得多！😄 -### 陳述句：逐步指令 +### 陳述句：一步一步的指令 -先從 **陳述句** 開始──它們就像與電腦對話中的單句話。每句陳述告訴電腦要做一件具體的事，就像指示：「這裡左轉」、「紅燈停下」、「停在那個車位」。 +讓我們從 **陳述句** 開始——它們就像是你與電腦對話中的單句話。每個陳述句告訴電腦執行一件特定事情，有點像指路：「這裡左轉」、「紅燈停下」、「停在那個位置」。 -我喜歡陳述句的是它們通常很易讀。看看這個： +我喜歡陳述句是因為它們往往相當易讀。看看這個： ```javascript -// 執行單一操作的基本語句 +// 執行單一動作的基本語句 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **這段程式碼做了什麼：** -- **宣告**一個常數變數來存放使用者名稱 -- **顯示**歡迎訊息到控制台輸出 -- **計算**並儲存一個數學運算結果 +- **宣告**一個常數變數來存放用戶名稱 +- **顯示**一則問候訊息到控制台輸出 +- **計算**並儲存一個數學運算的結果 ```javascript -// 與網頁互動的語句 +// 與網頁互動的指令 document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**一步一步看發生了什麼：** -- **修改**瀏覽器頁籤上顯示的網頁標題 -- **變更**整個頁面內容的背景顏色 +**一步步來看看發生了什麼：** +- **修改**瀏覽器分頁中網頁的標題 +- **改變**整個頁面主體的背景顏色 -### 變數：程式的記憶體系統 +### 變數：你的程式記憶系統 -說實話，**變數** 是我最喜歡教的概念之一，因為它們就像你每天都會用到的東西！ +說實話，**變數** 是我最喜歡教的概念之一，因為它們非常像你每天都在使用的東西！ -想像一下你的手機聯絡人列表。你不會記得每個人的電話號碼──而是將「媽媽」、「最好的朋友」或「凌晨兩點還送披薩的店」存起來，讓手機記住實際的號碼。變數就是這樣！它們是有標籤的容器，你的程式可以使用有意義的名稱存取資訊。 +想一想你的手機通訊錄。你不會背下每個人的電話號碼，反而會把名字存成「媽媽」、「最好的朋友」，或「營業到凌晨 2 點的披薩店」，讓手機幫你記住真正的號碼。變數也是這樣！它們就像有標籤的容器，你的程式可以存放資訊，之後用有意義的名稱取回。 -更酷的是：變數會隨著程式運行而改變（所以叫「變數」──你懂的吧？）。就像發現更好的披薩店時會更新聯絡資訊一樣，變數能隨著程式得到新資訊或情況改變而更新！ +這有趣的是：變數會隨著程式執行而改變（所以才叫「變數」嘛——你看他們多聰明）。就像你可能會更新披薩店聯絡資訊當你發現更好的外賣選擇，變數也能隨著程式得到新資訊或情況變化而更新！ -讓我示範這有多簡單又美妙： +來看看多簡單： ```javascript -// 第一步：建立基本變量 +// 第一步：建立基本變數 const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -321,13 +320,13 @@ let isRaining = false; ``` **理解這些概念：** -- **存放**不變的數值到 `const` 變數（比如網站名稱） -- **使用** `let` 定義可變動的數值 -- **賦予**不同的資料型態：字串（文字）、數字及布林值（真/假） -- **選擇**描述性的名稱說明變數內容 +- **將**不變的值儲存在 `const` 變數（例如網站名稱） +- **用** `let` 來儲存程式過程中會變的值 +- **指派**不同資料型態：字串（文字）、數字，布林值（true/false） +- **挑選**描述性名稱以說明每個變數裡存什麼 ```javascript -// 第 2 步：使用物件來群組相關資料 +// 第2步：使用物件來分組相關資料 const weatherData = { location: "San Francisco", humidity: 65, @@ -335,47 +334,47 @@ const weatherData = { }; ``` -**上面我們：** -- **建立**一個物件來群組相關的天氣資訊 -- **整理**多筆資料放在同一個變數名稱下 -- **用**鍵值對清楚標示每筆資訊 +**上面做了以下事：** +- **建立**一個物件來將相關天氣資訊群組起來 +- **在一個變數名稱下**組織多筆資料 +- **用**鍵值對清晰標記每筆資訊 ```javascript -// 第3步：使用及更新變數 +// 第三步：使用和更新變量 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// 更新可變變數 +// 更新可變變量 currentWeather = "cloudy"; temperature = 68; ``` -**理解每個部分：** -- **顯示**內容使用帶有 `${}` 語法的模板字串 -- **使用**點記法 (`weatherData.windSpeed`) 取物件屬性 -- **更新**使用 `let` 宣告的變數以反映變化 -- **結合**多個變數創造有意義的訊息 +**理解各部分：** +- **用**模板字串和 `${}` 語法來顯示資訊 +- **用點記法**訪問物件屬性 (`weatherData.windSpeed`) +- **更新**用 `let` 宣告的變數以反映變化條件 +- **結合**多個變數來組成有意義的訊息 ```javascript -// 第4步：使用現代解構賦值以使代碼更清晰 +// 第4步：使用現代解構賦值讓代碼更簡潔 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**你需要知道的：** -- **從物件中解構賦值以擷取特定屬性** -- **創建與物件鍵相同名稱的新變數** -- **簡化程式碼，避免反覆使用點記法** +**你需要知道：** +- **用解構賦值**從物件中取出特定屬性 +- **自動建立**與物件鍵相同名稱的新變數 +- **省略**繁複的點記法來簡化程式碼 ### 控制流程：教你的程式思考 -好了，這就是程式設計讓人驚嘆的地方！**控制流程** 就是教你的程式如何做出智慧決策，就像你每天不假思索地做的一樣。 +這裡開始編程變得超乎想像！**控制流程**基本上就是教你的程式如何做出智慧判斷，就像你自己每天不假思索地做的事一樣。 -想像一下：今天早上你可能心裡想「如果下雨，我就帶傘；如果很冷，我會穿外套；如果我遲到了，我會跳過早餐順路買杯咖啡。」你的大腦天然遵循這種如果──那麼的邏輯，天天做好幾十次！ +舉例說：今早你可能心想「如果下雨，我就帶傘；如果冷，我就穿外套；如果遲到了，我就跳過早餐，路上買咖啡」。你的大腦每天都自然地遵循這種 if-then 邏輯好多次！ -這就是為什麼程式感覺聰明又活潑，而不只是乏味、可預測的腳本。它們真能看情況、評估狀況，並適當回應。就像給你的程式一顆能適應並做決定的大腦！ +這正是讓程式感覺聰明又有生命力，而不是只照著無聊死板劇本走的原因。它們真能看狀況，評估發生什麼，然後適當回應。就像給你的程式一個能夠適應和做選擇的腦袋！ -想看看這個邏輯怎麼精采運作？讓我示範： +想看這是多麼美妙嗎？讓我展示給你： ```javascript // 第一步：基本條件邏輯 @@ -389,14 +388,14 @@ if (userAge >= 18) { } ``` -**這段程式碼做的事：** -- **檢查**使用者是否達到投票年齡要求 -- **依條件結果執行**不同程式區塊 -- **計算**並顯示距離投票資格還要多久（如果未滿18歲） -- **針對各情況提供**具體有用的回饋 +**這段程式碼的功能：** +- **檢查**用戶年齡是否符合投票資格 +- **根據條件結果**執行不同的程式區塊 +- **計算**如果未滿18歲，距離投票資格還有多久 +- **針對每個情況**提供明確有幫助的反饋 ```javascript -// 第 2 步：使用邏輯運算子設置多重條件 +// 第2步：使用邏輯運算子的多重條件 const userAge = 17; const hasPermission = true; @@ -409,25 +408,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**解析這裡發生的事：** -- **用 `&&`（且）運算子結合多個條件** -- **用 `else if` 建立多層條件階層處理多種情況** -- **最後用 `else` 處理所有剩餘可能狀況** -- **為每種情況提供明確可執行的回饋** +**把發生的事拆解：** +- **用** `&&`（且）運算符組合多個條件 +- **用** `else if` 建立多重情況條件階層 +- **用** 最後的 `else` 處理所有可能狀況 +- **為每種狀況**提供明確且可執行的回饋 ```javascript -// 第三步：使用三元運算子寫簡潔的條件判斷 +// 第3步：使用三元運算符的簡潔條件語句 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**你需要記住：** -- **用三元運算子（`? :`）處理簡單的兩種條件** -- **先寫條件，接著 `?`，然後是條件成立結果，接著是 `:`，最後是不成立結果** -- **當要根據條件賦值時運用此模式** +**你要記住：** +- **使用**三元運算子 (`? :`) 處理簡單兩種選項的條件 +- **先寫**條件，後跟 `?`，再是符合條件的結果，接著 `:`，最後是假條件的結果 +- **在需要根據條件指派值時**套用此模式 ```javascript -// 第4步：處理多個特定情況 +// 第4步：處理多個具體情況 const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,53 +446,53 @@ switch (dayOfWeek) { } ``` -**這段程式碼完成的事：** -- **根據變數值匹配多個具體案例** -- **將類似案例（平日與週末）分組** -- **找到匹配時執行對應區塊** -- **包含 `default` 處理意外值** -- **用 `break` 阻止程式繼續執行後續案例** +**這段程式完成：** +- **將變數值與多個指定案例比對** +- **將類似案例分組**（工作日與週末） +- **找到符合案例時**執行相應程式區塊 +- **包含**`default` 案例處理未預期值 +- **用** `break` 防止程式跑到下一案例 -> 💡 **現實世界類比**：把控制流程想成世界上最有耐心的 GPS 指路員。它可能說「如果主要幹道塞車，改走高速公路。如果高速公路施工，試試風景路線。」程式用完全相同的條件邏輯，智能地回應不同情況，總給使用者最佳體驗。 +> 💡 **現實世界比喻**：想像控制流程就像世界上最有耐心的 GPS 給你導航。它可能會說「如果主街交通擁擠，就走高速公路；如果高速公路施工，不妨走風景路線。」程式用完全一樣的條件邏輯來智慧回應不同情況，並總是給使用者最佳體驗。 -### 🎯 **概念檢視：基礎元素精通** +### 🎯 **概念檢測：基礎元素掌握** -**讓我們來看看你基礎掌握得如何：** -- 你能用自己的話解釋變數和陳述句的不同嗎？ -- 想一個現實例子，使用 if-then 決策（就像投票範例） -- 程式邏輯中，有什麼令你感到意外的事？ +**讓我們看看你對基礎的理解：** +- 你能用自己的話解釋變數和陳述句的差別嗎？ +- 想一想一個現實生活需要用 if-then 判斷的場景（如投票的例子） +- 有哪一件關於程式邏輯讓你感到驚喜？ -**快速信心提升：** +**快來增強信心：** ```mermaid flowchart LR - A["📝 陳述
(指令)"] --> B["📦 變量
(儲存)"] --> C["🔀 控制流程
(決策)"] --> D["🎉 工作程式！"] + A["📝 陳述式
(指令)"] --> B["📦 變數
(儲存)"] --> C["🔀 控制流程
(決策)"] --> D["🎉 運作中嘅程式！"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **接著要探討的是**：我們將一起深入挖掘這些概念，展開一段令人興奮的旅程！現在只要感受未來諸多精彩可能帶來的興奮。隨著練習，特定技巧和方法自然會掌握──我保證這比你想像中還更有趣！ +✅ **接下來的內容**：我們會繼續深入這些概念，這趟精彩旅程會讓你玩得痛快！現在先感受對未來所有驚人可能性的興奮，專注於這份好奇心。隨著一起練習，那些技巧和技術會自然內化——我保證這比你想像中還有趣！ -## 開發工具 +## 工具寶典 -說真的，這裡是我最興奮到快控制不住自己的一部分！🚀 我們將說說那些令人感覺像握到了數位太空船鑰匙的神奇工具。 +說真的，這時我超興奮到快忍不住了！🚀 我們即將談談那些會讓你覺得像拿到數碼太空船鑰匙一樣不可思議的工具。 -你知道廚師手中完美平衡、彷彿化身為手的刀具嗎？或是音樂家那把一碰就奏出美妙音符的吉他？開發者也有我們自己的神奇工具，而下面這些會徹底顛覆你的想像──其中大多完全免費！ +你知道廚師為什麼有那一套把刀拿起來就像是手的延伸嗎？又或者一個音樂家總有一把吉他，觸碰時就像它會唱歌？開發者也有我們版本的魔法工具，最讓你震驚的是——它們大多完全免費！ -我自己坐立難安想跟你分享這些，因為它們徹底改變了我們打造軟體的方式。我們談的是由 AI 助理撰寫程式碼的工具（我不是開玩笑！）、可以從任何有 Wi-Fi 的地方建立整個應用的雲端環境，還有讓你程式宛如 X 光般透視的偵錯工具。 +想到要分享這些，我就忍不住在椅子上跳起來，因為這些工具徹底改變了我們寫軟體的方式。那些 AI 輔助的寫碼幫手（我不是開玩笑！）、你能用 Wi-Fi 任何地方建構整套應用的雲端環境，以及像有 X 光眼一樣能助你偵錯的高端工具。 -震撼的是：這些不是你用一陣子就會丟掉的「新手工具」，它們就是 Google、Netflix 還有你喜歡的獨立應用工作室活躍開發者此刻用的專業級工具。你會用它們感覺像個專家！ +最讓我背脊發涼的是：這些不僅是新手用的工具，你永遠不會用膩。這正是 Google、Netflix，以及你心愛的獨立遊戲工作室此刻正在使用的專業級工具。你用它們會覺得自己超級專業！ ```mermaid graph TD - A["💡 你的點子"] --> B["⌨️ 程式碼編輯器
(VS Code)"] - B --> C["🌐 瀏覽器開發工具
(測試與除錯)"] - C --> D["⚡ 命令列
(自動化與工具)"] - D --> E["📚 文件說明
(學習與參考)"] - E --> F["🚀 超讚的網頁應用！"] + A["💡 你的點子"] --> B["⌨️ 程式編輯器
(VS Code)"] + B --> C["🌐 瀏覽器開發工具
(測試及除錯)"] + C --> D["⚡ 指令列
(自動化及工具)"] + D --> E["📚 文件資料
(學習及參考)"] + E --> F["🚀 驚人的網頁應用！"] - B -.-> G["🤖 AI 助理
(GitHub Copilot)"] + B -.-> G["🤖 AI 助手
(GitHub Copilot)"] C -.-> H["📱 裝置測試
(響應式設計)"] D -.-> I["📦 套件管理器
(npm, yarn)"] E -.-> J["👥 社群
(Stack Overflow)"] @@ -505,105 +504,105 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 程式碼編輯器與整合開發環境：你的新數位好夥伴 +### 程式碼編輯器與整合開發環境：你的全新數碼摯友 -談談程式碼編輯器──這可真快成為你最愛聚集的地方！把它想成你的程式碼聖地，你會花最多時間在這裡編寫和優化數位創作。 +談談程式碼編輯器——它們很快會成為你最愛的 hangout 地方！把它們想像成你個人的程式創作天堂，你會花大部分時間在這裡雕琢與完善你的數碼作品。 -而且現代編輯器超魔法──它們不只是花俏的文本編輯器。它們就像全天候坐在你旁邊、無比聰明而且支持你寫程式的導師。它們會在你發現錯字之前找到它們，建議改善讓你看起來更厲害，還幫你理解每段程式碼在做什麼，其中一些甚至能預測你下一步打什麼與你的想法！ +但現代編輯器的厲害之處是：它們不只是高級文字編輯器。它們就像全年無休、最聰明又超支持你的程式導師。在你察覺之前抓住你的打字錯誤，建議改進讓你看起來像天才，幫助你理解程式每段的作用，甚至有些還能預測你要輸入什麼，主動幫你完成想法！ -我還記得第一次發現自動完成功能──感覺彷彿生活在未來。你開始打字，編輯器就跳出來說：「诶，你是不是想用這個，剛好能幫你完成需要的功能？」就像有個心靈感應的程式碼夥伴！ +我記得第一次發現自動補完功能時，真有活在未來的感覺。你開始打字，編輯器立刻說：「嘿，你想用這個剛好符合需求的函式嗎？」就像有個能讀心的 coding 伙伴！ -**令這些編輯器不可思議的原因？** +**這些編輯器怎麼這麼厲害？** -現代程式碼編輯器提供一系列功能，設計來提升你的生產力： +現代程式碼編輯器提供豐富功能讓你工作更高效： -| 功能 | 功能說明 | 為何有用 | +| 功能 | 功能說明 | 幫助原因 | |---------|--------------|--------------| -| **語法高亮** | 為程式碼不同部分著色 | 讓程式碼更易讀與找錯 | -| **自動完成** | 打字時推薦程式碼 | 加快寫程式速度並減少錯字 | -| **除錯工具** | 幫你找到並修正錯誤 | 節省無數除錯時間 | -| **擴充功能** | 新增專業化能力 | 讓你能依技術需求客製編輯器 | -| **AI 助手** | 建議程式碼與解說 | 加速學習與工作效率 | +| **語法高亮** | 不同程式碼區塊上色 | 讓代碼更易讀，錯誤更易察覺 | +| **自動補全** | 邊打字邊建議程式碼 | 加快編碼速度，減少錯字 | +| **偵錯工具** | 幫助找錯與修錯 | 節省大量除錯時間 | +| **擴充功能** | 添加專業功能 | 針對各種技術客製化編輯器 | +| **AI 助手** | 建議程式碼與解說 | 加快學習與工作效率 | -> 🎥 **影片資源**：想實際看看這些工具的運作？請觀看這部 [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) 獲得完整介紹。 +> 🎥 **影片資源**：想看看這些工具實際操作？請查閱這個 [工具寶典影片](https://youtube.com/watch?v=69WJeXGBdxg) 做全面介紹。 -#### 推薦給網頁開發者的編輯器 +#### 推薦用於網頁開發的編輯器 **[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 程式碼建議 +- **必備擴充**： + - [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) - 抓出程式碼錯字 + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 自動程式碼格式化 + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 偵測程式碼錯字 -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付費，學生免費） -- 進階除錯與測試工具 +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（收費，學生免費） +- 進階偵錯與測試工具 - 智慧程式碼補全 - 內建版本控制 -**雲端 IDE**（多種定價） -- [GitHub Codespaces](https://github.com/features/codespaces) - 瀏覽器中完整 VS Code -- [Replit](https://replit.com/) - 非常適合學習與分享程式碼 +**雲端 IDE**（價格多樣） +- [GitHub Codespaces](https://github.com/features/codespaces) - 瀏覽器版完整 VS Code +- [Replit](https://replit.com/) - 學習與分享程式碼的好選擇 - [StackBlitz](https://stackblitz.com/) - 即時全端網頁開發 -> 💡 **入門建議**：先用 Visual Studio Code──它免費，行業使用率高，社群及教學資源豐富。 +> 💡 **入門建議**：從 Visual Studio Code 開始——它免費、業界廣泛應用，有龐大社群製作教程和擴充。 -### 網頁瀏覽器：你的秘密開發實驗室 +### 瀏覽器：你秘密的開發實驗室 -準備好徹底被震撼了嗎！你知道一直以來用瀏覽器滑社交媒體和看影片，其實它們藏著一個巨大的秘密開發實驗室？ +準備好被震撼吧！你知道你平時用瀏覽器瀏覽社交媒體和看影片，原來它們一直隱藏著這個超強秘密開發者實驗室嗎？等著你來發掘！ -每次你在網頁上點右鍵選「檢查」元素，就是在開啟一個隱藏的開發者工具世界──它們強大到比我以前花大錢買的某些軟體還厲害。就像發現你平凡廚房後面藏著一座專業大廚實驗室的秘密通道！ -第一次有人向我展示瀏覽器 DevTools 時，我花了差不多三個小時一直點來點去，然後不停地說：「等等，原來它仲可以做呢啲嘢？！」你可以即時修改任何網站，準確睇到每樣嘢加載嘅速度，測試你嘅網站喺唔同裝置上嘅效果，甚至可以好似專業人士咁除錯 JavaScript。真係令人嘆為觀止！ +每次你在網頁按右鍵選「檢查元素」，你其實打開了一個隱藏的開發者工具世界，老實說比我以前花大錢買過的軟體還強大。就像發現你的普通廚房背後藏著專業大廚的秘密實驗室一樣！ +第一次有人向我展示瀏覽器 DevTools 時，我大概花了三個小時不停點來點去，然後一直說：「等等，它竟然還能這樣？！」你可以即時編輯任何網站，準確看到所有東西加載的速度，測試你網站在不同裝置上的呈現，甚至可以像專業人士那樣調試 JavaScript。這真的是令人震驚！ -**以下係瀏覽器成為你秘密武器嘅原因：** +**這就是為什麼瀏覽器是你的秘密武器：** -當你建立網站或者網頁應用程式時，你需要睇下佢喺現實世界中嘅外觀同埋行為。瀏覽器唔單止係用嚟顯示你嘅作品，仲會提供有關效能、無障礙性同埋潛在問題嘅詳細反饋。 +當你建立網站或網頁應用程式時，你需要看到它在真實世界中的外觀和行為。瀏覽器不僅展示你的作品，還提供有關效能、無障礙性和潛在問題的詳細反饋。 -#### 瀏覽器開發者工具（DevTools） +#### 瀏覽器開發者工具 (DevTools) -現代瀏覽器包咗全面嘅開發套件： +現代瀏覽器包含了全面的開發套件： -| 工具類別 | 功能 | 使用範例 | +| 工具類別 | 功能 | 例子應用場景 | |---------------|--------------|------------------| -| **元素檢查器** | 即時檢視同編輯 HTML/CSS | 調整樣式，立即睇到結果 | -| **主控台** | 查看錯誤訊息同測試 JavaScript | 除錯問題同試驗代碼 | -| **網絡監控器** | 跟踪資源加載情況 | 優化效能同載入時間 | -| **無障礙檢查器** | 測試包容性設計 | 確保網站適合所有用戶使用 | -| **裝置模擬器** | 預覽不同屏幕尺寸效果 | 測試響應式設計無需多部裝置 | +| **元素檢查器** | 即時查看和編輯 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](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 呈現唔同。專業開發者會喺所有主流瀏覽器測試，確保用戶體驗一致。 +> ⚠️ **重要測試提醒**：一定要在多個瀏覽器測試你的網站！Chrome 上完美運作的東西，可能在 Safari 或 Firefox 會呈現不同。專業開發者會在所有主流瀏覽器上測試，以確保用戶體驗一致。 -### 命令行工具：開發者超能力之門 +### 命令行工具：你的開發者超能力入口 -好啦，講真，我哋依家誠實吓講命令行，因為我想你聽聽一個真係明白你嘅人嘅心聲。初次見到佢嗰陣──只係一個可怕嘅黑色畫面同閃動字元──我真係以為：「唔，好唔得！呢啲好似1980年代駭客電影入面先有嘅，完全唔係我啱用嘅！」😅 +好吧，讓我們來談談命令行的完全真心話，因為我想讓你聽聽一個真正理解它的人怎麼說。當我第一次看到它——只是一個令人生畏的黑色螢幕和閃爍的文字——我真的想，「不行，絕對不行！這看起來像1980年代黑客電影的東西，我肯定不夠聰明！」😅 -但我希望當年有人告訴我（而家我就告訴你）：命令行唔驚人──其實好似直接同你嘅電腦對話咁。想像下，叫外賣經過一個有圖有菜單嘅高級app（好方便），同埋行入你最愛嘅本地餐廳，廚師只需你一句「驚喜點啲特別嘢畀我」就整返啱你嘅餐點，兩者完全不一樣。 +但我一直希望當時有人告訴我，現在我要告訴你：命令行並不可怕——它就像和你的電腦進行直接對話一樣。把它想像成與通過華麗有圖片和菜單的應用來點餐（那當然很方便）相比，你走進你最愛的本地餐廳，廚師知道你喜歡什麼，只要你說「驚喜，來點厲害的」就能瞬間做出完美料理。 -命令行係開發者感覺自己成為巫師嘅地方。你打幾個似乎好神奇嘅字（好啦，其實就係指令，但佢哋感覺好神奇！），按 enter，嘭──你就建立咗整個項目結構，從全球安裝強大工具，或者把你嘅應用部署到互聯網，畀數百萬人睇到。試過一次嗰種力量，真係令人上癮！ +命令行是開發者覺得自己像魔法師的地方。你打出幾個看似神奇的字（好吧，其實只是命令，但感覺超神奇！），按下 Enter，砰——你就建立了整個專案架構，安裝了全球最強大的工具，或者將你的應用部署到大家都能看到的網絡上。第一次感受到這種力量後，老實說，真的是會上癮的！ -**點解命令行會成為你最愛嘅工具：** +**為什麼命令行會成為你最愛的工具：** -雖然圖形介面好適合好多任務，但命令行擅長自動化、精確同速度。好多開發工具主要透過命令行介面操作，而學懂點高效使用可以大大提升你嘅生產力。 +雖然圖形介面適合很多任務，但命令行在自動化、精準和速度方面非常出色。許多開發工具主要通過命令行操作，學會高效使用它們能大幅提升生產力。 ```bash -# 第一步：創建並進入專案目錄 +# 第一步：建立並進入專案目錄 mkdir my-awesome-website cd my-awesome-website ``` -**呢段代碼做緊啲咩：** -- **建立** 一個叫 "my-awesome-website" 嘅新目錄俾你嘅項目用 -- **進入** 新建立嘅目錄開始工作 +**這段程式碼作用是：** +- **建立** 一個名為「my-awesome-website」的新目錄給你的專案 +- **進入** 新建立的目錄開始工作 ```bash # 第2步：使用 package.json 初始化項目 @@ -614,14 +613,14 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**一步步嘅流程說明：** -- **初始化** 使用 `npm init -y` 用預設設置建立新嘅 Node.js 項目 -- **安裝** Vite 作為快速開發同生產構建嘅現代構建工具 -- **添加** Prettier 用自動格式化代碼，ESLint 用檢查代碼質量 -- **用** `--save-dev` 標記佢哋係僅開發時依賴 +**一步步說明：** +- **初始化** 使用 `npm init -y` 建立一個默認設定的新 Node.js 專案 +- **安裝** Vite，作為現代化快速開發及生產建構工具 +- **加入** Prettier 做自動格式化，ESLint 做程式碼質量檢查 +- **用** `--save-dev` 標記為開發時依賴 ```bash -# 第三步：建立項目結構及檔案 +# 第3步：建立專案結構及檔案 mkdir src assets echo 'My Site

Hello World

' > index.html @@ -629,66 +628,66 @@ echo 'My Site

Hello Wo npx vite ``` -**上面我哋做咗：** -- **組織** 項目，建立源代碼同資源嘅獨立資料夾 -- **生成** 一個基本嘅 HTML 文件，包含正確嘅文件結構 -- **啟動** Vite 開發服務器，支持即時重新載入同模組熱替換 +**上面操作完成了：** +- **組織** 專案：建立源碼和資源分開的資料夾 +- **產生** 基本的 HTML 文件，帶正確文件結構 +- **啟動** Vite 開發伺服器，提供實時重新載入和熱模組替換功能 #### 網頁開發必備命令行工具 -| 工具 | 作用 | 為何需要 | +| 工具 | 用途 | 為什麼需要它 | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤更改，協作，備份工作 | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境及包管理 | 喺瀏覽器以外運行 JavaScript，安裝現代開發工具 | -| **[Vite](https://vitejs.dev/)** | 構建工具及開發伺服器 | 極速開發支援模組熱替換 | -| **[ESLint](https://eslint.org/)** | 代碼質量 | 自動發現及修復 JavaScript 問題 | -| **[Prettier](https://prettier.io/)** | 代碼格式化 | 保持代碼格式一致且易讀 | +| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤變更，與他人協作，備份工作 | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境和套件管理 | 瀏覽器外運行 JavaScript，安裝現代開發工具 | +| **[Vite](https://vitejs.dev/)** | 建構工具和開發伺服器 | 極速開發並支持熱模組替換 | +| **[ESLint](https://eslint.org/)** | 程式碼品質 | 自動檢查並修復 JavaScript 問題 | +| **[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 命令行 +- **[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/)** - 帶進階功能嘅增強終端 +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 內建終端機應用程式 +- **[iTerm2](https://iterm2.com/)** - 帶高級功能的強化終端機 **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Linux 標準 shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 進階終端模擬器 +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 標準 Linux Shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 先進終端機模擬器 > 💻 = 作業系統預裝 -> 🎯 **學習路線**：由基本命令開始學起，例如 `cd`（切換目錄）、`ls` 或 `dir`（列出檔案）、`mkdir`（建立資料夾）。練習現代工作流程常用命令，例如 `npm install`、`git status` 同 `code .`（喺 VS Code 開啟目前資料夾）。隨住習慣，會自然而然掌握更高級命令同自動化技巧。 +> 🎯 **學習路徑**：先從基本指令開始，如 `cd`(切換目錄)、`ls` 或 `dir`(列出檔案)、`mkdir` (建立資料夾)。練習使用現代工作流程命令，如 `npm install`、`git status`、`code .`（用 VS Code 開當前目錄）。熟悉後自然能掌握更多進階命令和自動化技巧。 -### 文件：你永遠可用嘅學習導師 +### 文件說明：你隨時可用的學習導師 -好啦，畀我講個秘密令你作為初學者心裡好啲：就算最有經驗嘅開發者，都花大量時間喺睇文件上。唔係因為佢哋唔識做──其實反而係智慧嘅象徵！ +好吧，讓我分享一個小秘密，會讓你對自己是初學者這檔事更安心：即使是最有經驗的開發者，也會花大量時間在看文件。這不是因為他們不知道自己在做什麼——而是智慧的象徵！ -諗吓文件就似全天候全年無休嘅最有耐性、最識嘅老師。凌晨兩點卡住解決唔到嘅問題？文件會以暖心虛擬擁抱同你提供正確答案。想了解啲人人都講嘅新特性？文件會提供逐步教學。想明白點解件事係咁運作？嘩，文件就係你嗰個最終令你「啊哈！」嘅解說員！ +把文件想像成擁有全世界最有耐心、知識豐富的老師，24/7 隨時幫助你。凌晨兩點卡關？文件就像虛擬的溫暖擁抱，提供你完整且精確的答案。想學習熱門新功能？文件會有分步範例帶你慢慢理解。試圖搞懂為什麼某事情能那麼運作？你猜對了——文件會用讓你恍然大悟的方式解釋。 -有一樣完全改變咗我觀念嘅事情：網頁開發世界發展超級快，冇人（講真，冇一個人！）會把所有嘢記曬。我見過有 15 年經驗以上嘅資深開發者都要查基本語法，知唔知道？呢啲唔係丟人──係明智！唔係靠記憶，而係知道喺邊度好快搵到可靠答案，並且懂得應用。 +有件事徹底改變我的看法：網頁開發世界變化超快，誰都不可能全部都記得。我看過經驗超過15年的資深開發者還是在查基本語法，知道嗎？這不丟臉，反而很聰明！重點不是記憶完美，而是知道去哪裡快速找到可靠答案，且知道怎麼應用。 -**魔力就喺呢度：** +**真正的魔法是：** -專業開發者大量時間用嚟睇文件──唔係因為唔識做，而係網頁開發環境變化太快，要持續學習先跟得上。好文件幫你明白唔單止「點用」，仲有「點解要用」同「幾時用」。 +專業開發者花大量時間看文件，並非不懂，而是因為網頁開發環境變化太快，持續學習保持最新。優質文件幫助你不只是學「怎麼用」，還理解「為什麼用」和「什麼時候用」。 -#### 必備文件資源 +#### 關鍵文件資源 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- 網絡技術文件嘅黃金標準 -- 詳盡 HTML、CSS 同 JavaScript 指南 -- 包含瀏覽器兼容性資訊 -- 實用範例同互動演示 +- 為網絡技術文件的黃金標準 +- HTML、CSS 和 JavaScript 的全面指南 +- 包含瀏覽器相容性資訊 +- 提供實用範例與互動示範 -**[Web.dev](https://web.dev)** (由 Google 提供) -- 現代網頁開發最佳實踐 -- 性能優化指南 -- 無障礙同包容性設計原則 -- 實踐案例研究 +**[Web.dev](https://web.dev)** (Google 提供) +- 現代網頁最佳實踐 +- 效能優化指南 +- 無障礙及包容性設計原則 +- 真實專案案例研究 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge 瀏覽器開發資源 @@ -696,158 +695,160 @@ npx vite - 跨平台開發洞見 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- 有系統嘅學習課程 -- 業界專家視頻課程 -- 實操編程練習 +- 有結構的學習課程 +- 業界專家視訊課程 +- 實作編碼練習 -> 📚 **學習策略**：唔好死記硬背文件──要學識有效瀏覽。收藏常用參考資料，練習用搜尋功能迅速搵特定訊息。 +> 📚 **學習策略**：別試著背文件——而是學會如何有效導覽。把常用參考標記書籤，練習用搜尋功能快速找到特定資訊。 -### 🔧 **工具掌握檢查：你有咩共鳴？** +### 🔧 **工具掌握檢核：你有什麼共鳴？** -**花啲時間諗吓：** -- 你最期待先試邊個工具？（冇錯誤答案！） -- 命令行依然令你驚，定係想了解佢？ -- 你可唔可以想像用瀏覽器 DevTools 去偷睇你最鍾意網站嘅背後？ +**花點時間想想：** +- 你最想先試用哪個工具？（沒有錯誤答案！） +- 命令行還讓你覺得害怕嗎？還是開始好奇了？ +- 你能想像用瀏覽器 DevTools 去窺探你最愛網站的幕後嗎？ ```mermaid pie title "開發者使用工具時間分佈" - "程式碼編輯器" : 40 + "代碼編輯器" : 40 "瀏覽器測試" : 25 "命令行" : 15 "閱讀文件" : 15 "除錯" : 5 ``` -> **有趣嘅見解**：大多數開發者約有 40% 嘅時間喺代碼編輯器度，但你有冇留意測試、學習同問題解決花咗幾多時間？編程唔單止係寫代碼——係塑造體驗！ +> **趣味洞察**：大多數開發者花約40%時間在程式碼編輯器，但也別忘了花很多時間在測試、學習與解決問題。編程不只是寫程式碼，而是創造經驗！ -✅ **思考題**：諗吓有趣嘅嘢──你認為開發網站用嘅工具（開發）同用嚟設計網站外觀嘅工具（設計）會有咩分別？就好似建築師設計靚屋，跟承包商建嗰間屋一樣。兩個都重要，但要用唔同嘅工具箱！呢種思考會幫助你睇清網站點樣誕生嘅大局。 +✅ **思考食糧**：有趣的觀點在這——你覺得用於建構網站（開發）的工具和設計它外觀的工具會有什麼不同？這就像建築師設計美麗房子和承包商實際建造的差別。兩者同等重要，但需要不同工具！這種思維會幫助你看到網站誕生的整體圖景。 -## GitHub Copilot Agent 挑戰 🚀 +## GitHub Copilot 代理人挑戰 🚀 -用 Agent 模式完成以下挑戰： +使用代理人模式完成以下挑戰： -**描述：** 探索現代代碼編輯器或 IDE 嘅功能，展示佢點樣提升你作為網頁開發者嘅工作流程。 +**描述：** 探索現代程式碼編輯器或 IDE 的功能，展示它如何提升你的網頁開發工作流程。 -**提示：** 揀一個代碼編輯器或 IDE（例如 Visual Studio Code、WebStorm 或雲端 IDE）。列出三個幫助你更有效率寫代碼、除錯或維護代碼嘅功能或擴展。對每個功能，提供簡短說明講解佢點樣增強你嘅工作效率。 +**提示：** 選擇一個程式碼編輯器或 IDE（例如 Visual Studio Code、WebStorm 或雲端 IDE）。列出三個幫助你更高效編寫、調試或維護程式碼的功能或擴充套件。並簡短說明它們如何助益你的工作流程。 --- ## 🚀 挑戰 -**好啦，偵探，你準備好攪第一宗案未？** +**好的，偵探，準備好接受你的第一個案件了嗎？** -依家你有咗呢個超棒嘅基礎，我會畀你一個冒險，幫你見識到編程世界嘅多元同精采。聽好──呢個唔係寫代碼嘅挑戰，所以唔使擔心！想像自己係編程語言嘅偵探，展開你第一單振奮人心嘅案件！ +既然你有了這扎實的基礎，接下來有個冒險要讓你看到編程世界究竟多樣又迷人。聽著——現在還不用寫程式，別緊張！把自己當作編程語言偵探，解決你第一個令人興奮的案件！ -**你嘅任務，如果你願意接受：** -1. **成為語言探索者**：揀三種完全唔同領域嘅編程語言——可能一個用嚟建網站，一個做手機 app，一個用嚟處理科學數據。找出同一個簡單任務喺佢哋嘅寫法。保證你會超乎想像佢哋雖然做同樣嘢，表達可以咁唔同！ +**你的任務，如果你願意接受：** +1. **成為語言探險家**：從完全不同的領域挑選三種程式語言——可能一個用於建網站，一個做移動應用，一個做科學數據處理。找找同一個簡單任務用每種語言寫成的範例。我保證你會驚訝它們用不同方式做同樣的事！ -2. **揭開佢哋嘅故事**：每個語言有咩特色？有趣嘅係，每種語言背後都係因為有人覺得「有冇更好方法解決呢個具體問題？」你能唔能搵出嗰啲問題係咩？啲故事好精彩㗎！ +2. **揭開起源故事**：每種語言有什麼特別之處？酷的是——每種程式語言都是因為有人想，「你看，有沒有更好方法解決這個特定問題？」你能找出那些問題是什麼嗎？有些故事非常有趣！ -3. **認識社群**：睇吓每個語言嘅社群係點樣熱情同支持成員。有啲有幾百萬名開發者分享知識，有啲雖然細細，但超級緊密而且支援力十足。睇吓佢哋性格點，好打開眼界！ +3. **認識社群**：看看每種語言的社群有多熱情和包容。有些有數百萬開發者分享知識互助，有些規模較小但非常緊密又支持彼此。你會愛上不同社群的個性！ -4. **跟隨直覺**：而家邊個語言最吸引你？唔好擔心揀「完美」──聽住你直覺就得！無錯誤答案，將來你可以慢慢探索其他語言。 +4. **聽從直覺**：現在你覺得哪個語言最有親切感？別擔心要選「完美」答案，只要聽你的直覺！真心說沒有錯答案，以後你還可以繼續探索其他語言。 -**額外偵探技巧**：試搵吓每個語言有咩大型網站或應用係用佢寫嘅。我保證你會震驚發現 Instagram、Netflix，甚至係嗰個停唔到玩嘅手機遊戲係用邊種語言做嘅！ +**額外偵探工作**：看看你能否發現各語言打造的著名網站或應用有哪些。保證你會驚訝 Instagram、Netflix 或你玩到停不下來的手機遊戲背後用的語言！ -> 💡 **記住**：你唔係想今日成為專家，只係想先認識吓個社區，之後再決定喺邊度安家。慢慢嚟，玩得開心，畀好奇心帶領你！ +> 💡 **記得**：今天你不是要成為任何語言專家，而是先熟悉環境，看看你想在哪裡安身立命。慢慢來，玩得開心，讓好奇心帶領你！ -## 一齊慶祝你嘅發現！ +## 一起慶祝你發現的成果！ -嘩，你今日吸收咗好多精彩資訊！我非常興奮見到你同行呢個奇妙旅程嘅收穫。記住──呢唔係測驗唔使做到完美，反而係慶祝你認識到呢個奇妙世界嘅所有精彩嘢！ +哇，你今天吸收了好多精彩資訊！我真心期待看到你記住了多少這段不可思議的旅程。記得——這不是考試，不用完美。這是慶祝你學習到這個迷人世界裡所有酷東西的時刻！ -[參加課後測驗](https://ff-quizzes.netlify.app/web/) -## 評閱與自學 +[做課後小測驗](https://ff-quizzes.netlify.app/web/) -**慢慢探索，享受其中的樂趣！** +## 複習與自學 -你今天已經學了很多內容，真值得驕傲！現在是最有趣的部分——探索那些激發你好奇心的主題。記住，這不是功課——這是一場冒險！ +**慢慢來，玩得開心！** +你今天已經學了很多東西，這是值得驕傲的事！現在來到最有趣的部分——探索激發你好奇心的主題。記住，這不是功課——而是一場冒險！ -**深入了解讓你感興趣的內容：** +**深入探索令你興奮的事物：** -**親手玩玩程式語言：** -- 訪問 2-3 個引起你注意的官方網站。每個語言都有自己的個性和故事！ -- 嘗試一些線上程式碼練習場，比如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。不要害怕嘗試——你不會壞掉什麼東西！ -- 閱讀你最喜愛的語言是如何誕生的。認真說，有些語言的起源故事非常有趣，能幫助你理解語言為什麼會那樣運作。 +**親自動手體驗程式語言：** +- 訪問 2 至 3 個吸引你注意的程式語言官方網站。每種語言都有其獨特的個性和故事！ +- 嘗試一些線上程式碼遊樂場，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。別害怕嘗試——不會弄壞任何東西！ +- 閱讀你喜愛的語言的誕生故事。說真的，有些起源故事非常吸引人，能幫助你理解語言為何會以這種方式運作。 -**熟悉你新工具：** -- 如果還沒下載 Visual Studio Code，就趕快下載吧——它免費，你會愛上的！ -- 花幾分鐘瀏覽一下擴充套件市場。它就像你的程式碼編輯器的應用商店！ -- 打開瀏覽器的開發者工具，隨便點點看看。不要擔心能不能理解全部內容——只是熟悉一下介面。 +**熟悉你的新工具：** +- 如果還沒下載 Visual Studio Code，現在就去下載——它是免費的，你會喜歡的！ +- 花幾分鐘瀏覽擴充功能市場。這就像你的程式碼編輯器的應用商店一樣！ +- 打開瀏覽器的開發者工具，隨便點點看看。別擔心一定要懂——先熟悉工具所在即可。 **加入社群：** -- 在 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/) 追蹤一些開發者社群。程式設計社群對新手非常友善！ -- 在 YouTube 看一些適合初學者的程式教學影片。那裡有很多優秀的創作者，懂得新手的感受。 -- 思考加入本地的見面會或線上社群。相信我，開發者們都很樂意幫助新手！ +- 在 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/) 關注一些開發者社群。程式設計社群對新手非常友善！ +- 在 YouTube 觀看一些適合初學者的程式教學影片。很多創作者都懂得初學者的心情，非常值得一看。 +- 考慮參加本地聚會或線上社群。相信我，開發者很樂意幫助新手！ + +> 🎯 **請牢記，我希望你記得的是**：你不必一夜之間成為編程高手！現在，你只是開始認識這個即將成為你一部分的奇妙新世界。慢慢來，享受這段旅程，並記住——你崇拜的每一位開發者，都曾經正坐在你現在的位置，既興奮又可能有點不知所措。這是完全正常的，表示你正走在正確的路上！ + -> 🎯 **聽著，請記得這點**：你不需要一夜之間成為程式高手！現在你只是開始認識這個你即將成為一份子的精彩新世界。慢慢來，享受這段旅程，並記得——每一位你敬佩的開發者，曾經都坐在你現在的位置上，感到興奮並可能有些不知所措。這非常正常，這表示你做得很對！ -## 作業 +## Assignment [Reading the Docs](assignment.md) -> 💡 **給你作業的小提醒**：我非常想看到你探索一些我們還沒提過的工具！跳過已討論過的編輯器、瀏覽器和指令列工具——這個世界上有一整個令人驚嘆的開發工具宇宙在等你去發現。尋找那些活躍維護且社群活躍、樂於助人的工具（這些通常有最棒的教學，當你卡關時也最有人幫忙）。 +> 💡 **給你的作業小提示**：我非常期待看到你探索一些我們還未介紹過的工具！跳過我們已經提過的編輯器、瀏覽器和命令列工具，這裡有整個令人驚嘆的開發工具宇宙正等待著你去發掘。尋找那些仍在積極維護，且有活躍且有幫助的社群（這些通常有最佳教學，且當你卡住時會有熱心的人伸出援手）。 --- -## 🚀 你的程式之旅時間表 +## 🚀 你的程式學習旅程時間表 -### ⚡ **接下來 5 分鐘你可以做什麼** -- [ ] 收藏 2-3 個引起你注意的程式語言網站 -- [ ] 如果還沒下載，立刻安裝 Visual Studio Code -- [ ] 打開瀏覽器的 DevTools (F12)，隨便點點瀏覽任何網站 +### ⚡ **接下來 5 分鐘可以做的事** +- [ ] 收藏 2 至 3 個吸引你注意的程式語言網站 +- [ ] 如果還沒下載 Visual Studio Code，現在下載它 +- [ ] 打開瀏覽器的 DevTools（F12），隨便點擊任何網站看看 - [ ] 加入一個程式社群（Dev.to、Reddit r/webdev 或 Stack Overflow） -### ⏰ **接下來 1 小時你可以完成什麼** -- [ ] 完成課後小測驗並思考你的答案 -- [ ] 設定 VS Code，安裝 GitHub Copilot 擴充套件 -- [ ] 線上用兩種不同程式語言試寫「Hello World」範例 -- [ ] 觀看一支「開發者的一天」YouTube 影片 -- [ ] 開始你的程式語言調查工作（挑戰中提到的） +### ⏰ **這一小時可以完成的事** +- [ ] 完成課程後小測驗並反思你的答案 +- [ ] 安裝 GitHub Copilot 擴充到 VS Code +- [ ] 在線上用兩種不同程式語言寫一個「Hello World」範例 +- [ ] 觀看一支「開發者的一天」的 YouTube 影片 +- [ ] 開始你的程式語言偵探工作（來自挑戰） -### 📅 **你的一週冒險** -- [ ] 完成作業並探索 3 個新的開發工具 +### 📅 **你的一週冒險計畫** +- [ ] 完成作業並探索 3 種新的開發工具 - [ ] 在社群媒體追蹤 5 位開發者或程式帳號 -- [ ] 在 CodePen 或 Replit 嘗試建構一個小作品（哪怕只是說「Hello, [你的名字]！」） -- [ ] 閱讀一篇開發者部落格文章，了解他人的程式歷程 -- [ ] 參加一次線上見面會或觀看程式主題講座 -- [ ] 使用線上教學開始學習你選擇的程式語言 +- [ ] 嘗試在 CodePen 或 Replit 製作一些小作品（即使只是「Hello, [你的名字]！」） +- [ ] 閱讀一篇開發者的程式旅程部落格文章 +- [ ] 參加線上聚會或觀看程式講座 +- [ ] 用線上教程開始學習你選的語言 -### 🗓️ **你的一個月蛻變** -- [ ] 建造你的第一個小專案（就算是一個簡單的網頁也算！） -- [ ] 為開源專案做出貢獻（可以從文件修正開始） -- [ ] 輔導一名剛開始學程式的新手 -- [ ] 建立你的開發者作品集網站 -- [ ] 與當地開發者社群或讀書會建立連結 -- [ ] 開始規劃下一個學習里程碑 +### 🗓️ **你的一個月蛻變計畫** +- [ ] 建立你的第一個小專案（連簡單網頁也算！） +- [ ] 貢獻一個開源專案（從修正文檔開始） +- [ ] 指導一個剛開始程式旅程的人 +- [ ] 建立你的開發者個人作品集網站 +- [ ] 與本地開發者社群或讀書會建立連結 +- [ ] 開始規劃你的下一個學習目標 -### 🎯 **最終反思檢視** +### 🎯 **最後的反思檢視** **在繼續前，花點時間慶祝：** -- 今天有什麼程式相關的事讓你感到興奮？ -- 你想先探索哪一個工具或概念？ -- 你對開始這段程式之旅有什麼感覺？ -- 你現在最想問開發者什麼問題？ +- 今天關於程式設計，有什麼事情讓你感到興奮？ +- 哪個工具或概念是你想先探索的？ +- 你對開始這個程式旅程有什麼感覺？ +- 現在你想問一位開發者什麼問題？ ```mermaid journey title 你的信心建立旅程 section 今天 - 好奇: 3: 你 - 不知所措: 4: 你 - 興奮: 5: 你 + 好奇: 3: You + 不知所措: 4: You + 興奮: 5: You section 本週 - 探索: 4: 你 - 學習: 5: 你 - 聯繫: 4: 你 + 探索: 4: You + 學習: 5: You + 聯繫: 4: You section 下個月 - 建立: 5: 你 - 自信: 5: 你 - 幫助他人: 5: 你 + 建立: 5: You + 自信: 5: You + 幫助他人: 5: You ``` -> 🌟 **記住**：每個專家都曾是初學者。每位資深開發者都曾經有和你一樣的感覺——興奮，可能有點不知所措，並且對未來充滿好奇。你有很棒的夥伴，這段旅程將會非常精彩。歡迎來到奇妙的程式世界！🎉 +> 🌟 **記得**：每位專家曾經都是初學者。每位資深開發者都曾經有過你現在的感覺——興奮、或許有點不知所措，並且充滿對可能性的好奇。你正處於美妙的環境中，這趟旅程將會非常精彩。歡迎來到奇妙的程式世界！🎉 --- **免責聲明**： -本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於翻譯準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤譯負責。 +本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應為權威依據。對於重要資訊，建議聘請專業人工翻譯。本公司對因使用此翻譯而引致之任何誤解或曲解不負任何責任。 \ No newline at end of file diff --git a/translations/zh-HK/AGENTS.md b/translations/zh-HK/AGENTS.md index 65d6dc653..f1fcc4994 100644 --- a/translations/zh-HK/AGENTS.md +++ b/translations/zh-HK/AGENTS.md @@ -2,27 +2,27 @@ ## Project Overview -這是一個教育課程倉庫，用於教授初學者網頁開發基礎。該課程由 Microsoft Cloud Advocates 開發，是一個為期12週的綜合課程，包含24堂實作課程，涵蓋 JavaScript、CSS 和 HTML。 +這是一個教導初學者網頁開發基礎的教育課程資料庫。此課程是一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 節涵蓋 JavaScript、CSS 和 HTML 的實作課程。 ### Key Components -- **教育內容**：24堂結構化課程，組織成以專案為基礎的模組 -- **實作專案**：溫室模擬器、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器及 AI 聊天助理 -- **互動測驗**：48個測驗，每個3題（課前／課後評估） -- **多語言支援**：透過 GitHub Actions 自動翻譯超過50種語言 -- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案） +- **教育內容**：24 節結構化課程，按專案模組組織 +- **實作專案**：生態缸、打字遊戲、瀏覽器擴充套件、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助理 +- **互動測驗**：48 小測驗，每個包含 3 題（課程前後評估） +- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言 +- **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 專案） ### Architecture -- 以課程為基礎的教育倉庫結構 -- 每堂課資料夾包含README、程式碼範例及解答 -- 獨立專案位於不同目錄（quiz-app、多個課程專案） +- 以課程為基礎結構的教育資源庫 +- 每個課程資料夾包含 README、程式碼範例及解答 +- 各自獨立的專案目錄（quiz-app、各課程專案） - 使用 GitHub Actions 的翻譯系統（co-op-translator） -- 文件使用 Docsify 提供，並可匯出 PDF +- 文件使用 Docsify 提供並可輸出 PDF ## Setup Commands -此倉庫主要用於教育內容學習。若要操作特定專案： +此資料庫主要用於教育內容的學習。若要使用特定專案： ### Main Repository Setup @@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # 啟動開發伺服器 -npm run build # 建置生產版本 +npm run dev # 開始開發伺服器 +npm run build # 編譯生產環境版本 npm run lint # 執行 ESLint ``` @@ -47,7 +47,7 @@ npm run lint # 執行 ESLint cd 7-bank-project/api npm install npm start # 啟動 API 伺服器 -npm run lint # 運行 ESLint +npm run lint # 執行 ESLint npm run format # 使用 Prettier 格式化 ``` @@ -56,7 +56,7 @@ npm run format # 使用 Prettier 格式化 ```bash cd 5-browser-extension/solution npm install -# 遵循瀏覽器專屬的擴充功能載入指引 +# 遵循瀏覽器特定的擴充功能載入指示 ``` ### Space Game Projects @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# 於瀏覽器中開啟 index.html 或使用 Live Server +# 在瀏覽器中打開 index.html 或使用實時伺服器 ``` ### Chat Project (Python Backend) @@ -81,28 +81,28 @@ python api.py ### For Content Contributors 1. **Fork 倉庫** 至您的 GitHub 帳號 -2. **Clone 您的 fork** 至本地 -3. **建立新分支** 以提交更改 +2. **Clone 您的 fork** 至本地端 +3. **建立新分支** 以做出變更 4. 修改課程內容或程式碼範例 -5. 在相關專案資料夾測試程式碼更動 -6. 遵循貢獻指南提交 pull request +5. 在相關專案目錄測試任何程式碼變更 +6. 依貢獻指南提交 pull request ### For Learners -1. Fork 或 clone 此倉庫 -2. 依序瀏覽課程資料夾 -3. 閱讀每課的 README 檔案 +1. Fork 或 clone 這個倉庫 +2. 按順序進入課程目錄 +3. 閱讀每課程的 README 文件 4. 在 https://ff-quizzes.netlify.app/web/ 完成課前測驗 -5. 練習課程中的程式碼範例 -6. 完成作業與挑戰 -7. 參加課後測驗 +5. 練習課程資料夾內的程式碼範例 +6. 完成作業及挑戰 +7. 完成課後測驗 ### Live Development -- **文件**：在根目錄執行 `docsify serve`（預設埠號 3000） -- **測驗應用**：在 quiz-app 目錄執行 `npm run dev` -- **專案**：對 HTML 專案使用 VS Code 的 Live Server 擴充 -- **API 專案**：在相應 API 目錄執行 `npm start` +- **文件**：在根目錄執行 `docsify serve`（預設端口 3000） +- **Quiz App**：在 quiz-app 資料夾執行 `npm run dev` +- **專案**：使用 VS Code Live Server 擴充套件啟動 HTML 專案 +- **API 專案**：在相應 API 資料夾執行 `npm start` ## Testing Instructions @@ -111,7 +111,7 @@ python api.py ```bash cd quiz-app npm run lint # 檢查代碼風格問題 -npm run build # 確認建置成功 +npm run build # 驗證構建是否成功 ``` ### Bank API Testing @@ -119,79 +119,79 @@ npm run build # 確認建置成功 ```bash cd 7-bank-project/api npm run lint # 檢查代碼風格問題 -node server.js # 確認伺服器啟動時無錯誤 +node server.js # 驗證服務器啟動時無錯誤 ``` ### General Testing Approach -- 這是教育倉庫，沒有完整自動化測試 +- 此為教育用途的資源庫，沒有全面自動化測試 - 手動測試重點： - - 程式碼範例能正常執行 - - 文件中的連結可正常使用 - - 專案能成功建置 - - 範例遵守最佳實踐 + - 程式碼範例能正常執行無錯誤 + - 文件中的連結均正確運作 + - 專案能成功編譯建置 + - 範例遵循最佳實踐 ### Pre-submission Checks - 在有 package.json 的目錄執行 `npm run lint` -- 驗證 markdown 連結有效 -- 在瀏覽器或 Node.js 中測試程式碼範例 -- 確認翻譯結構正確 +- 驗證 markdown 連結的有效性 +- 瀏覽器或 Node.js 中測試程式碼範例 +- 確認翻譯保持正確結構 ## Code Style Guidelines ### JavaScript - 使用現代 ES6+ 語法 -- 遵循專案提供的 ESLint 標準配置 -- 使用具意義的變數與函式名稱，利於教學理解 -- 加入說明性註解方便學習者 -- 在有設定的地方使用 Prettier 格式化 +- 遵循專案中的標準 ESLint 配置 +- 使用具意義的變數和函式名稱以增進教育清晰度 +- 加入說明概念的註解給學習者 +- 使用已配置的 Prettier 進行格式化 ### HTML/CSS -- 使用語意化的 HTML5 元素 -- 採用響應式設計原則 -- 清晰的類別命名慣例 -- 用註解說明 CSS 技巧便於學習 +- 使用語意化 HTML5 元素 +- 響應式設計原則 +- 清晰的類別命名規範 +- 加入說明 CSS 技巧的註解供學習者理解 ### Python -- 遵守 PEP 8 風格指南 -- 範例程式碼簡潔且具教育意義 -- 必要時使用型別提示，輔助學習 +- 遵循 PEP 8 風格指南 +- 清晰且具教育意義的程式碼範例 +- 適時使用型別提示以輔助學習 ### Markdown Documentation -- 清晰的標題結構層級 -- 程式碼區塊標明語言 -- 提供額外資源連結 -- 在 `images/` 目錄放置截圖與圖片 -- 圖片有替代文字以符合無障礙要求 +- 清楚的標題層級 +- 使用指定語言的程式碼區塊 +- 連結至額外資源 +- 在 `images/` 目錄中放置截圖與圖片 +- 圖片使用替代文字提高可及性 ### File Organization - 課程依序編號（1-getting-started-lessons、2-js-basics 等） -- 每個專案有 `solution/`，常見還有 `start/` 或 `your-work/` 目錄 -- 圖片存放於各課獨立 `images/` 資料夾 -- 翻譯置於 `translations/{language-code}/` 結構 +- 每個專案含有 `solution/`，並通常有 `start/` 或 `your-work/` +- 圖片存放於課程專屬的 `images/` 資料夾 +- 翻譯存放在 `translations/{語言代碼}/` 結構中 ## Build and Deployment ### Quiz App Deployment (Azure Static Web Apps) -quiz-app 設定為 Azure Static Web Apps 部署： +quiz-app 支援 Azure Static Web Apps 部署： ```bash cd quiz-app npm run build # 建立 dist/ 資料夾 -# 當推送至 main 時透過 GitHub Actions 工作流程部署 +# 在推送至 main 時，透過 GitHub Actions 工作流程部署 ``` Azure Static Web Apps 配置： -- **App 位置**：`/quiz-app` -- **輸出位置**：`dist` -- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **App location**：`/quiz-app` +- **Output location**：`dist` +- **Workflow**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Documentation PDF Generation @@ -209,19 +209,19 @@ docsify serve # 在 localhost:3000 提供服務 ### Project-specific Builds -各專案資料夾可能有自己的建置流程： -- Vue 專案：`npm run build` 產生生產封包 -- 靜態專案：無建置步驟，直接提供檔案 +每個專案目錄可能有專屬建置流程： +- Vue 專案：使用 `npm run build` 產生生產用套件 +- 靜態專案：無需建置步驟，直接提供檔案 ## Pull Request Guidelines ### Title Format 使用清楚描述變更範圍的標題： -- `[Quiz-app] 新增第X課測驗` -- `[Lesson-3] 修正溫室模擬器專案中的錯字` -- `[Translation] 新增第5課西班牙文翻譯` -- `[Docs] 更新環境設定說明` +- `[Quiz-app] 為第 X 課新增測驗` +- `[Lesson-3] 修正生態缸專案錯字` +- `[Translation] 新增第 5 課西班牙語翻譯` +- `[Docs] 更新設定說明` ### Required Checks @@ -229,54 +229,54 @@ docsify serve # 在 localhost:3000 提供服務 1. **程式碼品質**： - 在受影響專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤與警告 + - 修正所有 lint 錯誤和警告 2. **建置驗證**： - - 如適用執行 `npm run build` + - 執行 `npm run build`（若適用） - 確保無建置錯誤 -3. **連結檢查**： +3. **連結驗證**： - 測試所有 markdown 連結 - - 確認圖片引用正常 + - 驗證圖片路徑正確 4. **內容審核**： - - 拼字與文法校對 - - 確保程式碼範例正確且具教育意義 - - 驗證翻譯維持原意 + - 校對拼字與文法 + - 確認程式碼範例正確且具教育性 + - 確認翻譯保持原意 ### Contribution Requirements -- 同意 Microsoft CLA（首次 PR 自動檢查） -- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/) +- 同意 Microsoft CLA（首次 PR 會自動檢查） +- 遵守 [Microsoft 共用開源行為準則](https://opensource.microsoft.com/codeofconduct/) - 詳細指南請見 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如有議題，請在 PR 說明中參考議題編號 +- 若有，請在 PR 描述中提及議題編號 ### Review Process -- PR 由維護者與社群共同審核 -- 優先考慮教學清晰度 -- 程式碼範例應符合當前最佳實踐 -- 翻譯審核準確且符合文化習慣 +- PR 由維護者與社群審查 +- 優先考量教育清晰度 +- 程式碼範例須符合現行最佳實踐 +- 翻譯需審核準確度與文化適應性 ## Translation System ### Automated Translation - 使用 GitHub Actions 搭配 co-op-translator 工作流程 -- 自動翻譯超過50種語言 -- 原始檔案在主目錄 -- 翻譯檔在 `translations/{language-code}/` +- 自動翻譯超過 50 種語言 +- 原始檔藏於主目錄 +- 翻譯檔藏於 `translations/{語言代碼}/` 目錄 ### Adding Manual Translation Improvements -1. 找到 `translations/{language-code}/` 內檔案 -2. 在保留結構的前提下改善翻譯 -3. 確保程式碼範例功能正常 -4. 測試當地化測驗內容 +1. 尋找 `translations/{語言代碼}/` 中的檔案 +2. 進行改善，並保持結構完整 +3. 確保程式碼範例持續正常 +4. 測試任何在地化的測驗內容 ### Translation Metadata -翻譯檔包含元資料標頭： +譯文檔包含元資料標頭： ```markdown -**免責聲明**： -本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。如涉及重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或曲解概不負責。 +**免責聲明**： +本文件使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意，自動翻譯可能包含錯誤或不準確之處。原始文件以其本地語言版本為最具權威性的資料來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或誤譯承擔責任。 \ No newline at end of file diff --git a/translations/zh-HK/README.md b/translations/zh-HK/README.md index 4f8ed4e66..ca214f96c 100644 --- a/translations/zh-HK/README.md +++ b/translations/zh-HK/README.md @@ -10,202 +10,209 @@ [![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 社群 [![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. **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 支援（自動化及隨時更新） +#### 透過 GitHub Action 支援（自動且持續更新） -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](./README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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) | [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)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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) +[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../zh-MO/README.md) | [中文（繁體，台灣）](../zh-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) | [葡萄牙語（巴西）](../pt-BR/README.md) | [葡萄牙語（葡萄牙）](../pt-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) -> **想本地克隆嗎？** - -> 此儲存庫含有 50 多種語言翻譯，會大幅增加下載大小。若想不含翻譯克隆，請使用稀疏簽出： +> **想本地端 Clone？** +> +> 本專案包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔，請使用稀疏取出（sparse checkout）： +> +> **Bash / macOS / Linux:** > ```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' > ``` -> 這會讓您用更快的速度下載並取得完成課程所需的所有資源。 +> +> **CMD（Windows）:** +> ```cmd +> 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" +> ``` +> +> 這樣可以讓你更快完成下載，同時獲得完成課程所需的所有資源。 -**若想支援額外的翻譯語言，請參考此處清單 [here](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) -#### 🧑‍🎓 _您是學生嗎？_ +#### 🧑‍🎓 _你是學生嗎？_ -請造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，在這裡您可以找到初學者資源、學生套件，甚至獲得免費證書兌換券的方法。這是您會想要書籤收藏並不時查看的頁面，我們會每月更新內容。 +請造訪 [**學生中心頁面**](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 助手專案，請查看 [project](./9-chat-project/README.md) +新增 AI 助手專案，詳情請查看 [專案](./9-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/zh-HK/background.148a8d43afde5730.webp) -- 課程涵蓋從基礎到 RAG。 -- 使用 GenAI 與我們的伴侶應用程序互動，與歷史人物對話。 -- 趣味且引人入勝的故事敘述，讓您穿越時空！ +- 課程涵蓋基礎到檢索增強生成（RAG）。 +- 利用生成式 AI 和我們的配套應用與歷史人物互動。 +- 趣味且引人入勝的敘事，帶你穿越時空！ ![character](../../translated_images/zh-HK/character.5c0dd8e067ffd693.webp) +每堂課包含作業、知識檢測和挑戰，指導你學習如下主題： +- 提示及提示工程 +- 文字與圖片應用生成 +- 搜尋應用 -每節課包含一個作業、知識檢測及挑戰，指引您學習： -- 提示與提示工程 -- 文字及圖片應用程式生成 -- 搜尋應用程式 +造訪 [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)分享你的回饋！ -> **教師們**，我們已在 [included some suggestions](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/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前請完成預習測驗，然後閱讀課程材料，完成各種活動，最後透過課後測驗檢查您的理解。 +為了提升學習效果，建議你與同儕共同協作完成專案！鼓勵在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，我們的版主團隊會在線上解答你的問題。 -為提升學習體驗，請與同儕一起合作專案！鼓勵您在我們的 [討論區](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) 獲取更多學習資源。 -為了進一步學習，我們強烈建議探索 [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 帳號建立複本。 -#### 創建您的儲存庫 -為方便儲存工作，建議創建本課程的複製版本。點選頁面頂端「Use this template」按鈕，即可在您的 GitHub 帳號中建立此課程的複本。 +請按照步驟操作： +1. **Fork 專案庫**：點擊本頁右上角的「Fork」按鈕。 +2. **Clone 專案庫**： `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 執行課程 -#### 在 Codespace 內執行課程 - -在您建立的儲存庫複本內，點選 **Code** 按鈕，選取 **Open with Codespaces**。這會為您新建一個 Codespace 環境供開發使用。 +在你建立的這個複本中，點 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為你建立新的 Codespace 供你使用。 ![Codespace](../../translated_images/zh-HK/createcodespace.0238bbf4d7a8d955.webp) -#### 在本機電腦上執行課程 - -若要在本機執行此課程，您需要安裝一個文字編輯器、瀏覽器及終端機工具。我們的第一堂課 [Introduction to Programming Languages and Tools of the Trade](../../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-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。 +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)，並執行以下指令，將 `` 替換為你剛才複製的 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)，並運行以下命令，將 `` 替換為你剛剛複製的 URL： ```bash git clone ``` -2. 在 Visual Studio Code 中開啟資料夾。你可以點擊 **檔案** > **開啟資料夾**，然後選擇你剛剛克隆的資料夾。 - +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) - 幫助你更快地撰寫程式碼 +> * [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 個小測驗，每個小測驗三題。它們可在這裡找到 [Quiz App](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 | [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 及使用本地端儲存變數 | 建立使用本地端儲存變數呼叫 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 遊戲開發 | 學習類別繼承、組合與訂閱/發布模式，以準備開發遊戲 | [進階遊戲開發介紹](./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 | +> **關於測驗的小提示**：所有測驗皆包含在 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 遊戲開發 | 了解類別繼承與組合及發布/訂閱模式，為製作遊戲做準備 | [進階遊戲開發入門](./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) | Web 應用程式的 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)」。 - -> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性回饋！ +雖然我們刻意避免引入 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/#/) 離線瀏覽本文件。將本儲存庫分叉，並在本地機器安裝 [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 可於此處下載 [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。 ## 🎒 其他課程 -我們團隊還有其他課程！請查看： + +我們團隊還製作了其他課程！歡迎瀏覽： ### LangChain @@ -222,7 +229,7 @@ --- -### 產生式 AI 系列 +### 生成式 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) @@ -249,7 +256,7 @@ ## 尋求協助 -如果你遇到困難或對構建 AI 應用有任何疑問，歡迎加入與其他學習者及經驗豐富開發者討論 MCP。這是一個支持性社群，歡迎提出問題並自由分享知識。 +如果你在構建 AI 應用時遇到困難或有任何問題，歡迎加入其他學習者及經驗豐富的開發者討論 MCP。這是一個支持性的社群，歡迎提問並自由分享知識。 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) @@ -257,13 +264,13 @@ [![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) 文件。 --- **免責聲明**： -本文件經由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。如涉及重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而引起的任何誤解或錯誤詮釋承擔責任。 +本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。儘管我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原文文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引致的任何誤解或誤釋承擔責任。 \ No newline at end of file diff --git a/translations/zh-MO/.co-op-translator.json b/translations/zh-MO/.co-op-translator.json index f5b75f3dc..deed887b8 100644 --- a/translations/zh-MO/.co-op-translator.json +++ b/translations/zh-MO/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-03T23:37:49+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T17:53:07+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "zh-MO" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:13:30+00:00", + "translation_date": "2026-03-06T18:06:28+00:00", "source_file": "AGENTS.md", "language_code": "zh-MO" }, @@ -516,8 +516,8 @@ "language_code": "zh-MO" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:09:09+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T17:49:29+00:00", "source_file": "README.md", "language_code": "zh-MO" }, diff --git a/translations/zh-MO/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh-MO/1-getting-started-lessons/1-intro-to-programming-languages/README.md index a2cd77723..f07432a94 100644 --- a/translations/zh-MO/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh-MO/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # 程式語言與現代開發工具簡介 -嗨，未來的開發者！👋 我能告訴你一件每天都讓我感到激動的事嗎？你即將發現，程式設計不僅僅是關於電腦的事情——它更像是擁有一種能將你最狂野的想法變成現實的超能力！ +嗨，未來的開發者！👋 可以告訴你一件每天都讓我激動不已的事嗎？你即將發現，程式設計不只是電腦的事——它其實是擁有將你最瘋狂的想法實現的超能力！ -你知道那種使用你最喜歡的應用程式時，一切都完美契合的瞬間嗎？當你點擊一個按鈕，發生了一些絕妙的事情，讓你忍不住驚嘆「哇，他們是怎麼做到的？」好吧，有人就像你一樣——可能在凌晨兩點坐在他們最喜歡的咖啡館裡喝著第三杯濃縮咖啡——寫下了創造這種魔法的程式碼。而最讓人驚訝的是：在這堂課結束之前，你不僅會明白他們是怎麼做到的，還會迫不及待地想要自己試試！ +你知道用你最喜歡的應用程式時，那種一切都完美配合的時刻嗎？你點一下一個按鈕，然後發生了某種絕對神奇的事情，讓你忍不住說「哇，他們到底是怎麼做到的？」其實，那魔法就是被像你這樣的人寫出來的——可能正坐在他們最愛的咖啡店裡凌晨兩點，喝著第三杯濃縮咖啡。讓你驚奇的是：到本課程結束時，你不僅會了解他們怎麼做到的，而且你會迫不及待想自己試試看！ -聽著，我完全理解如果你現在覺得程式設計很難。當我剛開始學習時，我真的以為你需要是某種數學天才，或者從五歲開始就一直在寫程式。但有一件事完全改變了我的看法：程式設計就像學習一種新語言的對話。你從「你好」和「謝謝」開始，然後慢慢學會點咖啡，最後你就能進行深刻的哲學討論了！只不過在這種情況下，你是在和電腦對話，說真的？它們是你能遇到的最有耐心的對話夥伴——它們不會評判你的錯誤，並且總是樂於再試一次！ +我明白如果現在程式設計讓你覺得害怕也很正常。當我剛開始時，我真的以為你得是數學天才或從五歲就開始寫程式才行。但以下這點完全改變了我的看法：程式設計就像學習一種新語言的溝通方式。你從「你好」和「謝謝」開始，然後學著點咖啡，不知不覺間，你就能有深刻的哲學討論！不過在這案例裡，你是跟電腦對話，而且說真的？它們是你能遇到最有耐心的對話夥伴——永遠不會因為你犯錯而評判你，還永遠樂意再試一次！ -今天，我們將探索那些讓現代網頁開發不僅僅是可能，而且令人上癮的不可思議工具。我說的是Netflix、Spotify以及你最喜歡的獨立應用程式工作室的開發者每天都在使用的編輯器、瀏覽器和工作流程。而最讓人開心的是：大多數這些專業級、行業標準的工具都是完全免費的！ +今天，我們要探索那些讓現代網頁開發不只是可能，而且令人著迷的工具。我說的就是 Netflix、Spotify 和你最愛的獨立應用程式工作室裡開發者每天都在用的編輯器、瀏覽器和工作流程。而且這會讓你忍不住跳舞的部分是：這些專業級、業界標準的工具大多數都是免費的！ -![程式設計簡介](../../../../translated_images/zh-MO/webdev101-programming.d6e3f98e61ac4bff.webp) -> [Tomomi Imura](https://twitter.com/girlie_mac) 的手繪筆記 +![Intro Programming](../../../../translated_images/zh-MO/webdev101-programming.d6e3f98e61ac4bff.webp) +> 速寫筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title 您今天的程式設計旅程 + section 發現 + 甚麼是程式設計: 5: You + 程式語言: 4: You + 工具概覽: 5: You + section 探索 + 程式編輯器: 4: You + 瀏覽器與開發者工具: 5: You + 命令列: 3: You + section 練習 + 語言偵探: 4: You + 工具探索: 5: You + 社群連繫: 5: You ``` +## 先來看看你已經知道什麼吧！ -## 來看看你已經知道什麼！ +在進入有趣的部分之前，我很好奇——你對這個程式設計世界已經了解多少？聽著，如果你看到這些問題覺得「我真的完全不懂這些東西」，這不僅沒關係，反而非常完美！那代表你來對地方了。把這個小測驗想像成熱身運動——我們只是在讓大腦肌肉熱起來！ -在我們進入有趣的部分之前，我很好奇——你對這個程式設計世界已經了解多少？聽著，如果你看到這些問題時心想「我完全不知道這些是什麼」，那不僅沒關係，還是最好的狀態！這意味著你來對地方了。把這個測驗當作是運動前的拉伸——我們只是要熱身一下腦袋！ +[參加課前小測驗](https://ff-quizzes.netlify.app/web/) -[參加課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## 我們即將一起展開的冒險 +## 我們即將一起啟程的冒險 -好吧，我真的非常興奮能和你一起探索今天的內容！說真的，我真希望能看到你在理解這些概念時的表情。以下是我們即將一起踏上的精彩旅程： +好啦，我真的超興奮要跟你分享今天要探討的東西！說真的，我多希望能看到當你某些概念突然懂了時的表情。這裡是我們要一起走的精彩旅程： -- **什麼是程式設計（以及為什麼它是最酷的事情！）**——我們將發現程式碼如何成為驅動你周圍一切事物的隱形魔法，從那個知道今天是星期一早上的鬧鐘，到完美推薦你Netflix節目的演算法。 -- **程式語言及其驚人的個性**——想像一下走進一個派對，每個人都有完全不同的超能力和解決問題的方式。這就是程式語言的世界，你一定會喜歡認識它們！ -- **創造數位魔法的基本構件**——把這些想像成終極的創意樂高套件。一旦你了解這些部件如何組合在一起，你會發現你可以建造任何你想像中的東西。 -- **讓你感覺像是拿到魔法棒的專業工具**——我不是在誇張——這些工具真的會讓你感覺自己擁有超能力，而最棒的是？它們就是專業人士每天使用的工具！ +- **程式設計到底是什麼（為什麼它超酷！）**——我們會了解程式碼如何是周遭一切無形魔法的核心，從那鬧鐘怎麼知曉星期一早晨到演算法如何精準推薦你喜歡的 Netflix 節目 +- **程式語言及其迷人的個性**——想像走進一場派對，每個人都擁有完全不同的超能力和解決問題的方式。那就是程式語言的世界，你會愛上認識它們！ +- **促成數位魔法的基礎構件**——把這當作最強大的創意 LEGO 組合。一旦你懂得這些組件怎麼組合，你會發現幾乎可以搭建你想像中的任何東西 +- **專業工具讓你像拿到魔法棒一樣的感覺**——我不是誇張，這些工具真的會讓你覺得自己有超能力，最棒的是？它們是專業人士也在用的！ -> 💡 **重點是**：今天不要試圖記住所有的內容！現在，我只希望你能感受到對未來可能性的興奮。隨著我們一起練習，細節會自然地記住——這才是真正的學習方式！ +> 💡 **重點是**：今天別試著硬記一切！我想你現在感受一下對可能性的興奮火花，細節會隨著我們一起實作自然記住——這才是真正的學習！ -> 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上進行此課程！ -## 那麼，程式設計到底是什麼？ +## 所以程式設計究竟是什麼？ -好吧，讓我們來解答這個價值百萬的問題：程式設計到底是什麼？ +好，我們來挑戰這個價值百萬美元的問題：程式設計到底是什麼？ -我來講一個完全改變我對這個問題看法的故事。上週，我試著向我媽媽解釋如何使用我們的新智能電視遙控器。我聽到自己說：「按下紅色按鈕，但不是大紅色按鈕，是左邊的小紅色按鈕……不，是你的左邊……好，現在按住兩秒鐘，不是一秒，也不是三秒……」聽起來熟悉嗎？😅 +我來講個故事，徹底改變我看法的故事。上周我在跟媽媽解釋怎麼用我們的新智能電視遙控器。我自己講的時候就忍不住說「按那個紅色按鈕，但不是大紅色，是左邊小紅色的……不，你的另一邊左邊……好，現在按住兩秒，不是一秒，也不是三秒……」聽起來熟悉嗎？😅 -這就是程式設計！它是一種藝術，能夠向一個非常強大的東西提供非常詳細的逐步指令，但需要把每件事都解釋得非常清楚。只不過，與其向你的媽媽解釋（她可能會問「哪個紅色按鈕？！」），你是在向電腦解釋（它只會完全按照你的指令執行，即使你說的話並不完全是你想表達的意思）。 +那就是程式設計！它是給予非常精細、一字一句的指令給一台很強大的東西，但必須每一點都說得非常清楚的藝術。只不過你不是在解釋給媽媽聽（她還會問「哪個紅色按鈕？！」），而是在跟電腦講話（它只照字面執行，即使那可能不是你真正的意思）。 -當我第一次了解到這一點時，讓我大開眼界的是：電腦的核心其實非常簡單。它們只懂兩件事——1和0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇的是——我們不需要像《駭客任務》裡那樣用1和0來交流。這就是**程式語言**的救星。它們就像世界上最棒的翻譯員，能將你完全正常的人類思維轉換成電腦語言。 +我第一次知道這點的時候超震撼：電腦其實在核心層面非常簡單。它們只懂兩個東西——1 和 0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇的是——我們不用像《駭客任務》裡一樣用 1 和 0 說話。這時候 **程式語言** 就派上用場了。它們就好像世界上最棒的翻譯員，把你正常的人類想法翻譯成電腦聽得懂的語言。 -而每天早上醒來時，仍然讓我感到激動的是：你生活中的每一件數位化的事物，都是由某個像你一樣的人創造的。他們可能穿著睡衣，手裡拿著一杯咖啡，在筆記本電腦上敲著程式碼。那個讓你看起來完美無瑕的Instagram濾鏡？有人寫了程式碼。那個推薦你新最愛歌曲的演算法？開發者建造了它。那個幫助你和朋友分攤晚餐費的應用程式？是的，有人想「這太麻煩了，我想我可以解決這個問題」，然後……他們真的做到了！ +每天早上醒來，這點仍然讓我心頭發涼：你生活中數位上的 *一切*，都是由像你一樣的人開始——大概穿著睡衣，手握一杯咖啡，在筆記型電腦上敲著程式碼。那個讓你看起來完美無瑕的 Instagram 濾鏡？有人寫的。帶你發現新最愛歌單的推薦演算法？有開發者建立的。幫你和朋友分攤晚餐帳單的 app？對，某人想著「這真麻煩，我一定能改進它」，然後……他們做到了！ -當你學會程式設計時，你不僅僅是在學習一項新技能——你正在成為這個令人驚嘆的問題解決者社群的一部分，他們每天都在思考：「如果我能建造一些能讓某人的一天變得更好一點的東西呢？」說真的，有什麼比這更酷的嗎？ +學習程式設計不只是學新技能——你是在加入這個不可思議的解決問題社群，他們每天都在想：「如果我能建構一個讓某人日子更好一點的東西，那會如何？」老實說，有比這更酷的事嗎？ -✅ **趣味事實探索**：當你有空的時候，可以查一下這個超酷的事情——你認為世界上第一位電腦程式設計師是誰？我給你一個提示：可能不是你想的那個人！這個人的故事非常有趣，顯示程式設計一直以來都是關於創造性問題解決和跳出框架思考。 +✅ **趣味知識探索**：有空時查查這個超酷小知識——你覺得世界上第一位電腦程式設計師是誰？給你個線索：答案可能不是你想的那個！她/他的故事超級吸引人，也證明程式設計一直都是關於創意解決問題和跳脫框架思考。 -### 🧠 **檢查時間：你感覺如何？** +### 🧠 **現在心情如何？** -**花點時間反思：** -- 「向電腦提供指令」的概念現在對你來說是否有點理解了？ -- 你能想到一個日常任務，想用程式設計來自動化嗎？ -- 關於程式設計這件事，你腦海中有哪些問題正在浮現？ +**花點時間想想：** +- 「給電腦指令」的概念現在清楚了嗎？ +- 你能想到一個日常任務想用程式自動化嗎？ +- 現在對程式設計有哪些問題想問？ -> **記住**：如果有些概念現在感覺模糊不清是完全正常的。學習程式設計就像學習一種新語言——需要時間讓你的大腦建立那些神經通路。你做得很好！ +> **記得**：如果有些概念現在還模糊，完全正常。學程式就像學新語言一樣——大腦需要時間建立神經連結。你做得很棒！ ## 程式語言就像不同口味的魔法 -好吧，這聽起來可能有點奇怪，但請跟著我——程式語言就像不同類型的音樂。想想看：有爵士樂，流暢且即興；搖滾樂，強而有力且直接；古典音樂，優雅且結構化；還有嘻哈音樂，創意且表達力強。每種風格都有自己的氛圍、熱情的粉絲社群，每一種都適合不同的情境和心情。 +好，這聽起來或許怪怪的，但請跟著我走——程式語言很像不同類型的音樂。想想看：你有爵士樂，順滑隨興；搖滾樂，有力直接；古典音樂，優雅結構化；還有饒舌，創意又有表現力。每種風格都有自己的氛圍、熱情的粉絲社群，而且適合不同心境和場合。 -程式語言完全一樣！你不會用同一種語言來建造一個有趣的手機遊戲和用來處理大量氣候數據的程式，就像你不會在瑜伽課上播放死亡金屬音樂（嗯，大多數瑜伽課啦！😄）。 +程式語言也是同理！你不會用同一種語言同時打造有趣的手機遊戲，和處理龐大氣候數據，就像你不會在瑜珈課放死亡金屬音樂（至少大多數瑜珈課不會！😄）。 -但每次想到這件事都讓我驚嘆的是：這些語言就像有世界上最耐心、最聰明的翻譯員坐在你旁邊。你可以用一種對人類大腦來說自然的方式表達你的想法，而它們會處理所有將其轉換成電腦語言的複雜工作。就像有一個朋友，既精通「人類創意」又精通「電腦邏輯」——而且他們永遠不會累，不需要喝咖啡，也不會因為你問了同樣的問題兩次而評判你！ +但每次想到這點都讓我驚嘆不已：這些語言就像世界上最有耐心、最聰明的口譯員坐在你旁邊。你用符合人類思考的方式表達想法，它們處理所有極複雜的轉換，變成電腦真正懂的 1 和 0。就像有個朋友同時精通「人類創造力」和「電腦邏輯」——他永不疲倦，從不需要喝咖啡休息，也從不嫌你問同一個問題兩次！ -### 常見程式語言及其用途 +### 熱門程式語言及其用途 ```mermaid mindmap - root((Programming Languages)) - Web Development + root((程式語言)) + 網頁開發 JavaScript - Frontend Magic - Interactive Websites + 前端魔法 + 互動式網站 TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + 型別 + 企業應用程式 + 資料與人工智能 Python - Data Science - Machine Learning - Automation + 資料科學 + 機器學習 + 自動化 R - Statistics - Research - Mobile Apps + 統計學 + 研究 + 手機應用程式 Java - Android - Enterprise + 安卓 + 企業 Swift iOS - Apple Ecosystem + 蘋果生態系統 Kotlin - Modern Android - Cross-platform - Systems & Performance + 現代安卓 + 跨平台 + 系統與效能 C++ - Games - Performance Critical + 遊戲 + 高效能關鍵 Rust - Memory Safety - System Programming + 記憶體安全 + 系統程式設計 Go - Cloud Services - Scalable Backend + 雲端服務 + 可擴展後端 ``` +| 語言 | 最適合 | 為何流行 | +|----------|----------|------------------| +| **JavaScript** | 網頁開發、使用者介面 | 可在瀏覽器中執行，支援互動網站 | +| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，擁有強大函式庫 | +| **Java** | 企業應用、Android 應用 | 跨平台，穩健適合大型系統 | +| **C#** | Windows 應用、遊戲開發 | 微軟生態系統支援強大 | +| **Go** | 雲端服務、後端系統 | 快速簡單，專為現代運算設計 | -| 語言 | 最適合 | 為什麼受歡迎 | -|------|--------|--------------| -| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器中運行，驅動互動式網站 | -| **Python** | 數據科學、自動化、人工智慧 | 易於閱讀和學習，擁有強大的庫 | -| **Java** | 企業應用程式、Android應用程式 | 平台獨立，適合大型系統 | -| **C#** | Windows應用程式、遊戲開發 | 微軟生態系統支持強大 | -| **Go** | 雲服務、後端系統 | 快速、簡單，為現代計算設計 | +### 高階語言 vs. 低階語言 -### 高階語言與低階語言 +坦白說，這是我剛學時最大的困惑，所以我要分享那個讓我豁然開朗的比喻——希望對你也有幫助！ -好吧，這是我剛開始學習時讓我腦袋爆炸的概念，所以我要分享一個最終讓我理解的比喻——希望它也能幫助到你！ +想像你到了個不會說當地語言的國家，非常想找廁所（我們都有過吧？😅）： -想像一下，你正在拜訪一個你不會說當地語言的國家，而你急需找到最近的洗手間（我們都曾有過這種情況，對吧？😅）： +- **低階程式設計** 就像學會當地方言到能跟街角賣水果的阿嬤用當地的文化典故、俚語和內行笑話聊天。超厲害、高效率……如果你流利的話！但就只是想找廁所的你會覺得很頭大。 -- **低階程式設計**就像是你完全掌握當地方言，能用文化參考、本地俚語和只有當地人懂的內部笑話與街角賣水果的奶奶聊天。非常令人印象深刻且高效……如果你剛好很流利！但如果你只是想找個洗手間，可能會覺得壓力很大。 +- **高階程式設計** 就像有個懂你的人當地朋友陪著你。你說「我真的需要找廁所」，他幫你翻譯文化脈絡，並用你的腦袋能理解的方式給你指路。 -- **高階程式設計**就像有一個超棒的當地朋友，他完全理解你。你可以用簡單的英文說「我真的需要找個洗手間」，而他會處理所有的文化翻譯，並用你能理解的方式給你指路。 +在程式語言裡： +- **低階語言**（像組合語言或 C）讓你能跟電腦的硬體層細緻交流，但你必須用機器思維來想，這……嗯，得改變不少思考方式！ +- **高階語言**（像 JavaScript、Python 或 C#）讓你以人類思考方式想事，機器語言的部分它們幫你處理。而且它們有一群超熱情的社群，大家記得當新手的困難，真心想幫助你！ -在程式設計的術語中： -- **低階語言**（例如Assembly或C）讓你能與電腦的硬體進行非常詳細的對話，但你需要像機器一樣思考，這……嗯，讓我們說這是一個相當大的心理轉變吧！ -- **高階語言**（例如JavaScript、Python或C#）讓你可以像人類一樣思考，而它們會處理所有的機器語言。除此之外，它們還擁有非常友好的社群，充滿了記得自己曾經是新手並真心想幫助你的好人！ - -猜猜我會建議你從哪一種開始？😉 高階語言就像有訓練輪的自行車，你永遠不會想要拆掉它們，因為它們讓整個學習過程變得更加愉快！ +猜猜我會建議你從哪裡開始？😉 高階語言就像訓練輪，可能你永遠不想摘掉它，因為它讓整個過程輕鬆太多！ ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 人類思考：
'我想計算費波那契數列'"] --> B{選擇程式語言層級} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|High-Level| C["🌟 JavaScript/Python
易讀易寫"] + B -->|Low-Level| D["⚙️ 組合語言/C
直接控制硬體"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 撰寫：fibonacci(10)"] + D --> F["📝 撰寫：mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 電腦理解：
翻譯器處理複雜度"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 相同結果：
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...（趣事：你會在自然界的各個地方找到這個模式——向日葵種子螺旋、松果的排列，甚至是星系的形成！） +我們會看同一件事用兩種完全不同風格寫的程式碼。它們都做著同樣的事：創建所謂的費波那契數列——一個美麗的數學模式，每個數字是前兩個數字的和：0、1、1、2、3、5、8、13……（趣味小知識：這個模式自然界無處不在——葵花籽螺旋、松果排列，甚至星系的形成！） -準備好看差異了嗎？我們開始吧！ +準備好了嗎？出發！ -**高階語言（JavaScript）——人類友好：** +**高階語言（JavaScript）——人類友善：** ```javascript -// Step 1: Basic Fibonacci setup +// 第一步：基本的費波納奇設置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**這段程式碼的作用：** -- **宣告**一個常數來指定我們想生成多少個斐波那契數字 -- **初始化**兩個變數來追蹤序列中的當前數字和下一個數字 -- **設置**定義斐波那契模式的起始值（0和1） -- **顯示**一個標題消息來標識我們的輸出 +**這段程式碼做了什麼：** +- **宣告**一個常數指定要生產多少個費波那契數字 +- **初始化**兩個變數追蹤序列中目前與下一個數字 +- **設定**起始值（0 與 1）定義費波那契模式 +- **展示**標題訊息來指明輸出內容 ```javascript -// Step 2: Generate the sequence with a loop +// 步驟 2：使用迴圈產生序列 for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // 計算序列中的下一個數字 const sum = current + next; current = next; next = sum; } ``` -**分解這裡發生的事情：** -- 使用`for`循環**遍歷**序列中的每個位置 -- 使用模板字面值格式**顯示**每個數字及其位置 -- 通過添加當前值和下一個值**計算**下一個斐波那契數字 -- **更新**我們的追蹤變數以進入下一次迭代 +**解析發生的事：** +- 用 `for` 迴圈**循環**遍歷序列中每個位置 +- 以模板字串格式**顯示**每個數字及其位置 +- **計算**下一個費波那契數字，將目前與下一數字相加 +- **更新**追蹤變數，準備進入下一次迭代 ```javascript -// Step 3: Modern functional approach +// 第 3 步：現代函數式方法 const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// 使用範例 const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**在上面，我們：** -- 使用現代箭頭函數語法**創建**了一個可重用的函數 -- **構建**了一個陣列來存儲完整的序列，而不是逐一顯示 -- 使用陣列索引從前面的值中**計算**每個新數字 -- **返回**完整的序列，以便在程式的其他部分靈活使用 +**上方我們已經：** +- 使用現代箭頭函式語法**建立**重複使用的函式 +- **建立**陣列存放完整序列，而不是一個一個顯示 +- 利用陣列索引**計算**每個新數字由前面計算而來 +- **回傳**完整序列方便程式其他地方彈性運用 -**低階語言（ARM Assembly）——電腦友好：** +**低階語言（ARM組合語言）——電腦友善：** ```assembly area ascen,code,readonly @@ -259,127 +257,127 @@ back add r0,r1 end ``` -注意，JavaScript版本幾乎像英文指令一樣易讀，而Assembly版本使用了直接控制電腦處理器的晦澀命令。兩者完成了完全相同的任務，但高階語言對人類來說更容易理解、編寫和維護。 +注意 JavaScript 版本幾乎像英語指令，而組合語言則用直接控制電腦處理器的神秘命令。兩者完成的任務完全一樣，但高階語言更容易讓人理解、撰寫與維護。 -**你會注意到的主要差異：** -- **可讀性**：JavaScript使用描述性名稱如`fibonacciCount`，而Assembly使用晦澀的標籤如`r0`、`r1` -- **註解**：高階語言鼓勵使用解釋性的註解，使程式碼更具自我說明性 -- **結構**：JavaScript 的邏輯流程與人類逐步解決問題的思維方式相符 -- **維護性**：根據不同需求更新 JavaScript 版本既簡單又清晰 +**你會注意到的重點差異：** +- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣具描述性的名稱，而 Assembly 使用像 `r0`、`r1` 這樣難以理解的標籤 +- **註解**：高階語言鼓勵使用解釋性註解，讓代碼本身具備自我說明的功能 +- **結構**：JavaScript 的邏輯流程與人類逐步思考問題的方式相符 +- **維護性**：針對不同需求更新 JavaScript 的版本簡單且清晰 -✅ **關於斐波那契數列**：這個絕美的數字模式（每個數字等於前兩個數字的總和：0, 1, 1, 2, 3, 5, 8...）幾乎無處不在！你可以在向日葵的螺旋、松果的排列、鸚鵡螺的曲線，甚至是樹枝的生長方式中發現它。數學和程式碼能幫助我們理解並重現自然界用來創造美的模式，這真是令人驚嘆！ +✅ **關於斐波那契數列**：這個絕美的數字模式（每個數字等於前兩個數字之和：0、1、1、2、3、5、8……）在自然界中無處不在！你會在向日葵的螺旋、松果的圖案、鸚鵡螺的曲線，甚至樹枝的生長方式中看到它。數學與程式碼幫助我們理解並重現自然創造美麗的模式，真是令人驚嘆！ -## 創造魔法的基石 +## 讓魔法發生的基礎組件 -好了，現在你已經看到了程式語言的實際運作方式，讓我們來拆解一下構成每個程式的基本元素。把這些想像成你最愛的食譜中的基本材料——一旦你了解了每個材料的作用，你幾乎可以用任何語言來閱讀和撰寫程式！ +好了，現在你已經看到程式語言的實際運作，讓我們來拆解構成所有程式的基礎元素。把它們想像成你最愛食譜中的基本材料——當你明白每一種材料的作用後，你就能讀寫幾乎所有語言的程式碼！ -這有點像學習程式語言的文法。還記得在學校學過的名詞、動詞以及如何組成句子嗎？程式語言也有自己的文法版本，老實說，比英語文法還要邏輯清晰且容易理解！😄 +這有點像在學習程式設計語法。還記得學校裡學過的名詞、動詞和如何組句嗎？程式設計也有自己的語法，老實說，比英語語法還要更邏輯且寬容！😄 -### 語句：一步步的指令 +### 陳述句：逐步指令 -我們先從 **語句** 開始——這些就像是你和電腦對話中的單句。每個語句都告訴電腦執行一個特定的動作，就像給出指示一樣：「在這裡左轉」、「在紅燈處停下」、「停在那個位置」。 +先從**陳述句**開始——它們就像你與電腦對話的句子。每個陳述句告訴電腦做一件特定的事，就像給指示：「在這裡左轉」、「紅燈停」、「停在那個位子」。 -我喜歡語句的地方在於它們通常非常易讀。看看這個例子： +我喜歡陳述句的原因是它們通常很容易閱讀。看這個範例： ```javascript -// Basic statements that perform single actions +// 執行單一動作的基本陳述 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**這段程式碼的作用是：** -- **宣告** 一個常數變數來儲存使用者的名字 -- **顯示** 一個問候訊息到主控台輸出 -- **計算** 並儲存一個數學運算的結果 + +**這段程式碼的作用是：** +- **宣告**一個常數變數用來保存使用者名稱 +- **印出**一段問候訊息到控制台輸出 +- **計算**並保存一個數學運算的結果 ```javascript -// Statements that interact with web pages +// 與網頁互動的語句 document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**逐步解析發生了什麼：** -- **修改** 瀏覽器標籤中顯示的網頁標題 -- **更改** 整個頁面背景的顏色 + +**一步步來看發生了什麼：** +- **修改**瀏覽器分頁上顯示的網頁標題 +- **變更**整個頁面主體的背景顏色 ### 變數：程式的記憶系統 -好吧，**變數** 說真的是我最喜歡教的概念之一，因為它們和你每天使用的東西非常相似！ +好的，**變數**說實話是我最喜歡教的一個概念，因為它們很像你每天使用的東西！ -想想你的手機聯絡人清單。你不會記住每個人的電話號碼——相反地，你會儲存「媽媽」、「最好的朋友」或「營業到凌晨兩點的披薩店」，然後讓手機記住實際的號碼。變數的運作方式完全一樣！它們就像是有標籤的容器，你的程式可以用來儲存資訊，並在需要時用一個有意義的名字來取回。 +想想你手機上的聯絡人列表。你不會背所有人的電話號碼——你是儲存「媽媽」、「摯友」或「深夜外送披薩店」，讓手機幫你記住數字。變數也是一樣！它們像貼有標籤的容器，你的程式可以用有意義的名字存放資訊，之後再拿出來使用。 -有趣的是：變數可以在程式運行時改變（這就是為什麼叫做「變數」——你看出來了吧？）。就像當你發現一家更好的披薩店時，會更新聯絡人一樣，當程式獲得新資訊或情況發生變化時，變數也可以更新！ +很酷的是：變數能在程式執行時改變（所以才叫「變數」——看他們怎麼取名的吧？）。就像當你發現更讚的披薩店時會更新聯絡人，變數也可以隨著程式得到新資訊或情況改變而更新！ -讓我來展示一下這有多簡單又美妙： +讓我示範這有多簡單： ```javascript -// Step 1: Creating basic variables +// 第一步：建立基本變數 const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**理解這些概念：** -- **儲存** 不會改變的值在 `const` 變數中（例如網站名稱） -- **使用** `let` 來儲存可能會在程式中改變的值 -- **指定** 不同的數據類型：字串（文字）、數字和布林值（真/假） -- **選擇** 描述性名稱，清楚說明每個變數的內容 + +**了解這些概念：** +- **用** `const` 儲存不變的值（例如網站名稱） +- **用** `let` 存儲整個程式中會變動的值 +- **賦值**不同資料型態：字串（文字）、數字、布林值（真/假） +- **選擇**具描述性的變數名稱清楚表達內容 ```javascript -// Step 2: Working with objects to group related data +// 第 2 步：使用物件來群組相關資料 const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**在上面的例子中，我們：** -- **創建** 一個物件來將相關的天氣資訊分組 -- **組織** 多個數據到一個變數名稱下 -- **使用** 鍵值對來清楚標記每個資訊 + +**上面我們做了：** +- **創建**一個物件來將相關的天氣資訊組織在一起 +- **將**多條資料歸類在同一個變數名下 +- **用**鍵值對清楚標示各資訊 ```javascript -// Step 3: Using and updating variables +// 第三步：使用和更新變數 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// 更新可變的變數 currentWeather = "cloudy"; temperature = 68; ``` - -**讓我們理解每個部分：** -- **顯示** 資訊，使用帶有 `${}` 語法的模板字面值 -- **訪問** 物件屬性，使用點符號（`weatherData.windSpeed`） -- **更新** 使用 `let` 宣告的變數以反映變化的條件 -- **結合** 多個變數來創建有意義的訊息 + +**逐部分分析：** +- **用**模板字串 `${}` 語法顯示訊息 +- **使用**點號操作符讀取物件屬性（`weatherData.windSpeed`） +- **更新**用 `let` 宣告的變數反映變化的狀況 +- **結合**多個變數創造有意義的訊息 ```javascript -// Step 4: Modern destructuring for cleaner code +// 第4步：使用現代解構賦值令代碼更清晰 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**你需要知道的事情：** -- **提取** 物件中的特定屬性，使用解構賦值 -- **自動創建** 與物件鍵相同名稱的新變數 -- **簡化** 程式碼，避免重複使用點符號 -### 控制流程：教會程式如何思考 +**你需要知道的是：** +- **用**解構賦值擷取物件中特定屬性 +- **自動**透過物件鍵名建立新變數 +- **簡化**程式碼避免重複點號操作 + +### 控制流程：教你的程式如何思考 -好吧，這是程式設計中最令人驚嘆的部分！**控制流程** 基本上就是教你的程式如何做出明智的決定，就像你每天不假思索地做的那樣。 +好了，這裡程式設計開始真正讓人驚豔！**控制流程**基本上就是教你的程式做出明智選擇，就像你每天不假思索地一樣。 -想像一下：今天早上你可能經歷了這樣的情況：「如果下雨，我會帶傘。如果天冷，我會穿外套。如果我遲到了，我會跳過早餐，改在路上買咖啡。」你的大腦每天自然地遵循這種 if-then 邏輯數十次！ +想像這樣：今天早上你可能是這樣想，「如果下雨，我就帶傘；如果冷，我就穿外套；如果要遲到了，就跳過早餐直接買咖啡。」大腦每天自動無數次使用這種「如果…那麼」的邏輯！ -這就是讓程式感覺聰明且充滿活力的原因，而不是僅僅遵循一些無聊、可預測的腳本。它們實際上可以觀察情況，評估發生的事情，並做出適當的反應。這就像給你的程式一個可以適應和做出選擇的大腦！ +這讓程式看起來智能又靈活，而不是只是照著死板無聊的指令執行。它們能觀察情況，評估正在發生什麼，並做出適當反應。就像給你的程式裝了一顆能判斷的腦袋！ -想看看這是如何運作的嗎？讓我來展示給你看： +想看看這運作有多美妙？讓我給你示範： ```javascript -// Step 1: Basic conditional logic +// 第一步：基本條件邏輯 const userAge = 17; if (userAge >= 18) { @@ -389,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**這段程式碼的作用是：** -- **檢查** 使用者的年齡是否符合投票資格 -- **執行** 不同的程式碼塊，根據條件結果 -- **計算** 並顯示距離符合投票資格還有多久（如果未滿 18 歲） -- **提供** 每種情況的具體、有幫助的反饋 + +**這段程式碼做了這些事：** +- **檢查**使用者年齡是否符合投票資格 +- **根據**條件結果執行不同程式區塊 +- **計算**若未滿18歲，還需多久可投票 +- **提供**針對不同情況的具體幫助訊息 ```javascript -// Step 2: Multiple conditions with logical operators +// 第2步：使用邏輯運算符的多重條件 const userAge = 17; const hasPermission = true; @@ -409,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**解析這裡發生的事情：** -- **結合** 多個條件，使用 `&&`（和）運算符 -- **創建** 條件層次結構，使用 `else if` 處理多種情況 -- **處理** 所有可能的情況，使用最後的 `else` 語句 -- **提供** 每種不同情況的清晰、可操作的反饋 + +**細說這裡發生的事：** +- **用** `&&`（且）運算符組合多個條件 +- **用** `else if` 建立條件層次處理多種情景 +- **用**最後的 `else` 處理所有未涵蓋的情況 +- **提供**針對每種情況明確且可實行的回饋 ```javascript -// Step 3: Concise conditional with ternary operator +// 第3步：用三元運算子寫簡潔嘅條件判斷 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**你需要記住的事情：** -- **使用** 三元運算符（`? :`）處理簡單的兩種選擇條件 -- **先寫** 條件，接著是 `?`，然後是條件為真時的結果，再接著是 `:`，最後是條件為假時的結果 -- **應用** 這種模式，當你需要根據條件分配值時 + +**你要記住：** +- **用**三元運算子 (`? :`) 處理簡單兩項條件 +- **格式**為 先寫條件，再問號，接著是真值結果，再冒號，最後是假值結果 +- **適用於**需要根據條件賦值時 ```javascript -// Step 4: Handling multiple specific cases +// 第4步：處理多個特定情況 const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,58 +445,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**這段程式碼完成了以下任務：** -- **匹配** 變數值與多個特定情況 -- **將** 相似的情況分組（工作日與週末） -- **執行** 當找到匹配時的適當程式碼塊 -- **包含** 一個 `default` 情況來處理意外值 -- **使用** `break` 語句，防止程式繼續執行下一個情況 -> 💡 **現實生活中的類比**：將控制流程想像成擁有世界上最有耐心的 GPS 為你指路。它可能會說：「如果主街有交通堵塞，改走高速公路。如果高速公路有施工，試試風景路線。」程式使用的正是這種條件邏輯，來智能地應對不同情況，並始終為用戶提供最佳的體驗。 +**這段程式完成了：** +- **比對**變數值是否符合特定多個案例 +- **集合**類似案例（平日 vs. 週末） +- **執行**找到匹配時的程式區塊 +- **包含** `default` 來對付意外數值 +- **用** `break` 阻止執行下個案例 + +> 💡 **現實生活比喻**：把控制流程想成世上最有耐心的 GPS 給你指路。它可能說「如果主街有塞車，就走高速公路。如果高速公路施工，就走風景路線。」程式用這種條件邏輯智慧地回應不同情境，總是給用戶最佳體驗。 -### 🎯 **概念檢查：掌握基礎知識** +### 🎯 **概念測試：組件掌握度** -**來看看你對基礎知識的掌握情況：** -- 你能用自己的話解釋變數和語句的區別嗎？ -- 想一個現實生活中你會用到 if-then 決策的情境（比如我們的投票例子） -- 程式邏輯中有什麼讓你感到驚訝的地方嗎？ +**來看看你對基礎的掌握：** +- 你能用自己的話解釋變數和陳述句的差別嗎？ +- 想個現實生活中用 if-then 決策的例子（像我們的投票範例） +- 程式邏輯中哪件事讓你最驚訝？ -**快速信心提升：** +**快速自信加強：** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 陳述
(指令)"] --> B["📦 變數
(儲存)"] --> C["🔀 控制流程
(決策)"] --> D["🎉 運行程式！"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` - -✅ **接下來的內容**：我們將繼續深入探討這些概念，這將是一段令人興奮的旅程！現在，只需專注於感受對未來無限可能的興奮。隨著我們一起練習，具體的技能和技術會自然地融入你的腦海中——我保證，這將比你想像的更有趣！ +✅ **接下來的內容**：我們將更深入探討這些概念，展開一段令人興奮的程式設計之旅！現在只要感受到對未來無限可能的期待就好。隨著練習，技能和技巧自會自然紮根——我保證這會比你想像中更有趣！ -## 工具箱 +## 開發必備工具 -好吧，這是我真的興奮到無法自已的地方！🚀 我們即將討論一些令人驚嘆的工具，這些工具會讓你感覺自己像是剛剛拿到了數位太空船的鑰匙。 +老實說，談到這裡我超級興奮都快按捺不住了！🚀 我們要聊聊能讓你感覺像拿到數碼太空船鑰匙的不可思議工具。 -你知道嗎，廚師有那些用起來得心應手的刀具，音樂家有那把一彈就能發出美妙聲音的吉他？而開發者也有我們自己的這些神奇工具，最棒的是——它們大多是完全免費的！ +你知道廚師擁有那些像手臂延伸一樣的完美平衡刀具嗎？或者音樂家有一把觸碰就彷彿會歌唱的吉他？程序開發者有自己的魔法工具，而這裡有個絕對讓你驚嘆的秘密——大部分工具都是完全免費的！ -想到要和你分享這些工具，我簡直興奮得坐不住了，因為它們徹底改變了我們開發軟體的方式。我們要談的是 AI 驅動的程式碼助手，它們可以幫助你撰寫程式碼（我不是在開玩笑！），還有雲端環境，讓你可以在任何有 Wi-Fi 的地方構建完整的應用程式，甚至還有像 X 光一樣的除錯工具，能讓你看穿程式的內部。 +我幾乎在椅子上跳起來想跟你分享，因為它們徹底改變了我們開發軟體的方式。我們說的是 AI 助理能幫你寫程式碼（我不是開玩笑！）、雲端環境讓你隨時隨地用 Wi-Fi 打造整個應用程式，以及超級強大的偵錯工具，就像你擁有程式的 X 光視力。 -最讓我激動的是：這些工具並不是你剛開始學習時用的「入門工具」，然後就會被淘汰。這些正是 Google、Netflix 和你喜歡的那些獨立應用工作室的開發者此刻正在使用的專業級工具。使用它們時，你會感覺自己像個專業人士！ +而且讓我起雞皮疙瘩的是：這些工具不是你用完就扔的「入門工具」。它們正是 Google、Netflix，以及你喜愛的獨立應用開發工作室的開發者們現在正在用的專業級工具。你會感覺自己超專業地使用它們！ ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 你的點子"] --> B["⌨️ 程式編輯器
(VS Code)"] + B --> C["🌐 瀏覽器開發工具
(測試與除錯)"] + C --> D["⚡ 命令列
(自動化與工具)"] + D --> E["📚 文件說明
(學習與參考)"] + E --> F["🚀 驚人的網頁應用程式！"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 人工智能助手
(GitHub Copilot)"] + C -.-> H["📱 裝置測試
(響應式設計)"] + D -.-> I["📦 套件管理器
(npm, yarn)"] + E -.-> J["👥 社群
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -507,348 +504,350 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - -### 程式碼編輯器和 IDE：你的新數位好夥伴 +### 程式碼編輯器和 IDE：你的新數碼摯友 -來聊聊程式碼編輯器——這些將成為你最愛的工作場所！把它們想像成你的個人編碼聖地，在這裡你會花大部分時間來創作和完善你的數位作品。 +來聊聊程式碼編輯器——它們很快就會成為你最愛待的地方！想像成你專屬的程式碼聖地，你會在這裡花最多時間打造和精進你的數碼創作。 -但現代編輯器的神奇之處在於：它們不僅僅是高級的文字編輯器。它們就像有一位最聰明、最支持你的編碼導師，24/7 陪伴在你身邊。它們在你注意到之前就抓住你的拼寫錯誤，提出讓你看起來像天才的改進建議，幫助你理解每段程式碼的作用，有些甚至能預測你接下來要輸入什麼，並主動幫你完成！ +現代編輯器的厲害之處在於：它們不僅是華麗的文字編輯器。它們就像全天候陪在你身邊的最棒程式碼導師。它們在你發現打錯前就幫你抓錯，還建議你讓程式更酷的改進，幫助你理解每行程式碼的意義，有些甚至能預測你下一句想打的內容，並幫你完成它！ -我還記得第一次發現自動完成功能時的感覺——我真的覺得自己活在未來。你開始輸入某些東西，然後你的編輯器會說：「嘿，你是不是在想這個正好符合你需求的函數？」這就像有一個讀心術的編碼夥伴！ +我記得第一次發現自動補全功能時，感覺自己活在未來。你開始打字，編輯器馬上跳出說「嘿，你是不是想用這個正好符合作業的函式？」真的是像有個讀心的程式夥伴！ -**這些編輯器為什麼這麼厲害？** +**這些編輯器厲害在哪裡？** -現代程式碼編輯器提供了一系列令人印象深刻的功能，旨在提高你的生產力： +現代程式碼編輯器提供令人印象深刻的功能來提升你的生產力： -| 功能 | 功能描述 | 幫助原因 | -|------|----------|----------| -| **語法高亮** | 為程式碼的不同部分上色 | 讓程式碼更易讀，方便發現錯誤 | -| **自動完成** | 在你輸入時建議程式碼 | 加快編碼速度並減少拼寫錯誤 | -| **除錯工具** | 幫助你找到並修復錯誤 | 節省大量排查問題的時間 | -| **擴展功能** | 添加專門功能 | 根據任何技術自定義你的編輯器 | -| **AI 助手** | 提供程式碼建議和解釋 | 加速學習和提高生產力 | +| 功能 | 功用 | 為什麼有幫助 | +|---------|--------------|--------------| +| **語法高亮** | 把程式碼部分分色 | 讓程式碼更易讀且容易發現錯誤 | +| **自動補全** | 打字時建議程式碼 | 加快撰寫速度並減少錯字 | +| **偵錯工具** | 幫助找出並修正錯誤 | 節省大量排錯時間 | +| **擴充套件** | 加入專門功能 | 客製化你的編輯器適合任何技術 | +| **AI 助理** | 建議程式碼和解說 | 加速學習與提高效率 | -> 🎥 **影片資源**：想看看這些工具的實際運作嗎？查看這個 [工具箱影片](https://youtube.com/watch?v=69WJeXGBdxg) 獲取全面概覽。 +> 🎥 **影片資源**：想看這些工具如何運作嗎？點此觀看[開發工具影片](https://youtube.com/watch?v=69WJeXGBdxg)做全面了解。 -#### 推薦的網頁開發編輯器 +#### 建議的網頁開發編輯器 -**[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) - 捕捉程式碼中的拼寫錯誤 +**[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) - 程式碼拼寫檢查 -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (付費，學生免費) -- 高級除錯和測試工具 -- 智能程式碼完成 -- 內建版本控制 +**[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/) - 即時全棧網頁開發 +**雲端 IDE**（多種價格方案） +- [GitHub Codespaces](https://github.com/features/codespaces) - 瀏覽器版完整 VS Code +- [Replit](https://replit.com/) - 學習和分享程式碼的好地方 +- [StackBlitz](https://stackblitz.com/) - 即時全端網頁開發 -> 💡 **入門提示**：從 Visual Studio Code 開始——它免費、在業界廣泛使用，並且擁有大量的社群提供有用的教學和擴展功能。 +> 💡 **入門建議**：先從 Visual Studio Code 開始——免費，業界廣泛使用，且社群強大，擁有豐富的教學與擴充套件資源。 ### 網頁瀏覽器：你的秘密開發實驗室 -準備好讓你的腦袋完全被震撼吧！你知道嗎，你一直用來瀏覽社交媒體和觀看影片的瀏覽器，其實隱藏著一個令人難以置信的開發者實驗室，就等著你去發現！ +好了，準備好大開眼界吧！你知道你一直用瀏覽器滑社群媒體和看影片對吧？實際上它們藏著一個超強的秘密開發實驗室，就在隨時待你發現！ -每次你右鍵點擊網頁並選擇「檢查元素」時，你就打開了一個隱藏的開發者工具世界，這些工具的功能其實比我以前花幾百美元購買的昂貴軟體還要強大。這就像發現你的普通廚房後面隱藏著一個專業廚師的實驗室一樣！ -第一次有人向我展示瀏覽器的開發者工具（DevTools）時，我花了三個小時不停地點來點去，心裡一直在想：「等等，它居然還能做到這些？！」你可以即時編輯任何網站，查看所有內容的加載速度，測試網站在不同設備上的外觀，甚至像專業人士一樣調試 JavaScript。這簡直太令人驚嘆了！ +每次你在網頁右鍵點選「檢查元素」，就是開啟了一個隱藏的開發者工具世界。這些工具的威力甚至比我以前花大錢買的軟體還強大。這就像發現你普通的廚房，背後竟藏著專業主廚的實驗室秘密通道！ +第一次有人向我展示瀏覽器 DevTools 時，我花了大概三個小時一直點來點去，心想「等等，它還能做到這個？！」你真的可以即時編輯任何網站，準確看到所有東西載入的速度，測試網站在不同裝置上的外觀，甚至可以像專業人士一樣調試 JavaScript。這真是令人震驚！ -**以下是瀏覽器成為你秘密武器的原因：** +**這就是為何瀏覽器是你秘密武器的原因：** -當你創建網站或網頁應用時，你需要了解它在真實世界中的外觀和行為。瀏覽器不僅展示你的作品，還提供有關性能、可訪問性和潛在問題的詳細反饋。 +當你創建網站或網頁應用程式時，你需要看到它在真實世界中的外觀和行為。瀏覽器不僅顯示你的作品，還提供關於效能、可存取性和潛在問題的詳細反饋。 -#### 瀏覽器開發者工具（DevTools） +#### 瀏覽器開發者工具 (DevTools) 現代瀏覽器包含全面的開發套件： -| 工具類別 | 功能 | 使用案例 | -|----------|------|----------| -| **元素檢查器** | 即時查看和編輯 HTML/CSS | 調整樣式並立即查看效果 | -| **控制台** | 查看錯誤信息並測試 JavaScript | 調試問題並嘗試代碼 | -| **網絡監控** | 跟蹤資源加載情況 | 優化性能和加載時間 | -| **可訪問性檢查器** | 測試包容性設計 | 確保網站適合所有用戶 | -| **設備模擬器** | 預覽不同屏幕尺寸 | 測試響應式設計而無需多台設備 | +| 工具類別 | 功能說明 | 範例用途 | +|----------|----------|----------| +| **元素檢視器** | 即時查看和編輯 HTML/CSS | 調整樣式以立即看到效果 | +| **主控台** | 查看錯誤訊息和測試 JavaScript | 調試問題和試驗程式碼 | +| **網路監控器** | 追蹤資源載入狀況 | 優化效能和載入時間 | +| **可存取性檢查** | 測試無障礙設計 | 確保網站適合所有使用者 | +| **裝置模擬器** | 預覽不同螢幕尺寸 | 測試響應式設計無需多裝置 | -#### 推薦的開發瀏覽器 +#### 建議開發用瀏覽器 -- **[Chrome](https://developers.google.com/web/tools/chrome-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](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 上看起來不同。專業開發者會在所有主流瀏覽器上進行測試，以確保一致的用戶體驗。 +> ⚠️ **重要測試提示**：一定要在多個瀏覽器中測試你的網站！在 Chrome 完美顯示的網站，可能在 Safari 或 Firefox 有不同表現。專業開發者會在所有主要瀏覽器中測試，確保使用者體驗一致。 -### 命令行工具：開發者的超能力入口 -好吧，讓我們坦誠地聊聊命令行，因為我希望你能聽到一個真正理解它的人說的話。當我第一次看到它時——那個黑乎乎的屏幕上閃爍著文字——我真的想，「不行，絕對不行！這看起來像是1980年代黑客電影裡的場景，我肯定不夠聰明去搞懂這個！」😅 +### 指令行工具：你通往超級開發力的大門 -但我希望有人當時能告訴我這些，而現在我告訴你：命令行並不可怕——它其實就像在和你的電腦直接對話。想像一下，這就像通過一個帶有圖片和菜單的高級應用程序點餐（這很簡單也很方便），與走進你最喜歡的本地餐廳，廚師知道你喜歡什麼，只需說一句「給我來點驚喜的美味」就能做出完美的菜肴之間的區別。 +好，讓我們誠實一點談談指令行，因為我希望你聽到的是從真正瞭解它的人那裡來的。剛開始看到那黑乎乎且閃爍著文字的螢幕時，我直覺反應是：「不行，絕對不行！這看起來像1980年代駭客電影裡的東西，我肯定不夠聰明！」😅 -命令行是開發者感覺自己像巫師的地方。你輸入幾個看似神奇的詞（好吧，它們只是命令，但感覺很神奇！），按下回車鍵，然後——砰——你創建了整個項目結構，安裝了來自世界各地的強大工具，或者將你的應用部署到互聯網上供數百萬人使用。一旦你嘗到這種力量的滋味，真的會上癮！ +但我當時希望有人告訴我，也現在想告訴你的是真相：指令行並不可怕——它其實就像在和你的電腦直接對話。想像一下，用有圖片和菜單的精美App點餐（簡單方便）跟走進你常去的餐廳，廚師準確知道你喜歡什麼且只要你說「給我點驚喜」就能做出完美餐點的差別。 -**為什麼命令行會成為你最喜歡的工具：** +指令行是開發者覺得自己像魔法師的地方。你輸入幾個看似神奇的字（其實只是命令，但感覺就像魔法），按下 Enter，砰——你就創建了整個專案結構，安裝了全球強大的工具，或者將你的應用部署到網路，讓數百萬人看到。當你第一次感受到這種力量，就真的會上癮！ -雖然圖形界面在許多任務中表現出色，但命令行在自動化、精確性和速度方面更勝一籌。許多開發工具主要通過命令行界面工作，學會高效使用它們可以顯著提高你的生產力。 +**為何指令行會成為你最喜歡的工具：** + +雖然圖形介面適合許多工作，但指令行在自動化、精確度和速度上表現優異。許多開發工具主要透過指令行介面運作，學會有效使用它們能大幅提高工作效率。 ```bash -# Step 1: Create and navigate to project directory +# 第一步：建立並進入項目目錄 mkdir my-awesome-website cd my-awesome-website ``` -**這段代碼的作用：** -- **創建**一個名為「my-awesome-website」的新目錄作為你的項目 -- **進入**新創建的目錄開始工作 +**這段程式碼做了什麼：** +- **建立** 一個叫做「my-awesome-website」的新資料夾當專案資料夾 +- **進入** 剛建立的資料夾開始工作 ```bash -# Step 2: Initialize project with package.json +# 第 2 步：使用 package.json 初始化專案 npm init -y -# Install modern development tools +# 安裝現代開發工具 npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**逐步解析：** -- 使用 `npm init -y` **初始化**一個帶有默認設置的 Node.js 項目 -- **安裝** Vite 作為現代構建工具，用於快速開發和生產構建 -- **添加** Prettier 用於自動代碼格式化，以及 ESLint 用於代碼質量檢查 -- 使用 `--save-dev` 標誌將這些標記為僅限開發的依賴項 +**一步步執行內容：** +- 使用 `npm init -y` **初始化** 一個預設的 Node.js 專案 +- **安裝** Vite 作為快速開發及生產建置的現代化工具 +- **新增** Prettier 用來自動格式化程式碼和 ESLint 做程式碼品質檢查 +- 以 `--save-dev` 標記為開發時依賴 ```bash -# Step 3: Create project structure and files +# 第三步：建立項目結構和檔案 mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# 啟動開發伺服器 npx vite ``` -**以上操作中，我們已完成：** -- **組織**項目，創建了分別存放源代碼和資產的文件夾 -- **生成**了一個基本的 HTML 文件，具有正確的文檔結構 -- **啟動**了 Vite 開發服務器，用於實時重新加載和模塊熱替換 +**以上內容涵蓋了：** +- **組織** 專案架構，建立獨立的原始碼和資源資料夾 +- **產生** 一個具有正確文件結構的基本 HTML 檔案 +- **啟動** Vite 開發伺服器，提供即時重新載入和模組熱替換 -#### 網頁開發必備命令行工具 +#### 網頁開發必要指令行工具 -| 工具 | 用途 | 為什麼需要它 | -|------|------|-------------| -| **[Git](https://git-scm.com/)** | 版本控制 | 跟蹤更改、與他人協作、備份你的工作 | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript 運行時和包管理 | 在瀏覽器外運行 JavaScript，安裝現代開發工具 | -| **[Vite](https://vitejs.dev/)** | 構建工具和開發服務器 | 超快的開發速度，支持模塊熱替換 | -| **[ESLint](https://eslint.org/)** | 代碼質量 | 自動查找並修復 JavaScript 中的問題 | -| **[Prettier](https://prettier.io/)** | 代碼格式化 | 保持代碼一致的格式和可讀性 | +| 工具 | 用途 | 重要性說明 | +|------|------|------------| +| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤修改、團隊協作、備份作品 | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境和套件管理 | 瀏覽器外執行 JavaScript，安裝現代開發工具 | +| **[Vite](https://vitejs.dev/)** | 建置工具與開發伺服器 | 超快開發，支援模組熱替換 | +| **[ESLint](https://eslint.org/)** | 程式碼品質檢查 | 自動發現和修正 JavaScript 問題 | +| **[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 命令行 +- **[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)** 💻 - 強大的指令腳本環境 +- **[命令提示字元](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/)** - 增強型終端，擁有高級功能 +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 內建終端機應用程式 +- **[iTerm2](https://iterm2.com/)** - 進階功能的終端機軟體 **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 標準 Linux shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高級終端模擬器 +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Linux 標準 Shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 功能強大的終端模擬器 + +> 💻 = 作業系統預先安裝 -> 💻 = 操作系統預裝 +> 🎯 **學習路徑**：先從基本指令開始，如 `cd`（切換目錄）、`ls` 或 `dir`（列出檔案）、`mkdir`（建立資料夾）。搭配現代開發流程指令如 `npm install`、`git status`、以及 `code .`（以 VS Code 開啟當前目錄）。隨著熟悉度提升，自然會學會更多進階指令和自動化技巧。 -> 🎯 **學習路徑**：從基本命令開始，例如 `cd`（切換目錄）、`ls` 或 `dir`（列出文件）、`mkdir`（創建文件夾）。練習使用現代工作流命令，例如 `npm install`、`git status` 和 `code .`（在 VS Code 中打開當前目錄）。隨著你越來越熟悉，你會自然掌握更多高級命令和自動化技術。 -### 文檔：你的隨時可用學習導師 +### 文件資料：你永遠取得的學習導師 -好吧，讓我分享一個小秘密，這會讓你對自己是初學者的身份感覺好很多：即使是最有經驗的開發者，也會花大量時間閱讀文檔。而這並不是因為他們不知道自己在做什麼——這其實是智慧的象徵！ +好了，我要分享一個小秘密，它會讓你對自己是新手的身份感到更安心：即便是最資深的開發者，也花大量時間閱讀文件。這不代表他們不懂事情，而是智慧的象徵！ -把文檔想像成擁有世界上最耐心、最知識淵博的老師，他們全天候都在你身邊。凌晨2點卡在一個問題上？文檔會以溫暖的虛擬擁抱和你需要的答案陪伴你。想了解大家都在談論的某個新功能？文檔會提供分步示例支持你。想弄清楚某些東西為什麼會這樣運作？你猜對了——文檔會以一種讓你恍然大悟的方式解釋清楚！ +把文件看作是世界上最有耐心、最博學的老師，全天候隨時待命。凌晨兩點卡關了？文件就像溫暖的虛擬擁抱，給你正確答案。想學習大家都在談論的新功能？文件有逐步範例支援你。想知道為什麼某件事情是這樣運作？沒錯，文件會用淺顯易懂的方式解釋，讓你恍然大悟！ -有一件事徹底改變了我的看法：網頁開發世界發展得非常快，沒有人（我指的是絕對沒有人！）能把所有東西都記住。我曾看過擁有15年以上經驗的資深開發者查詢基本語法，你知道嗎？這並不丟人——這很聰明！重點不是擁有完美的記憶力，而是知道如何快速找到可靠的答案並理解如何應用它們。 +改變我觀點的一件事是：網頁開發世界變化非常快，沒有人（重點是沒有人！）會把所有細節都記牢。我看到有超過 15 年經驗的資深開發者還查語法，沒什麼尷尬的——那很聰明！重點不是記憶完美，而是知道快速找到可靠答案並解決問題。 -**真正的魔力在這裡：** +**真實魔法發生在這裡：** -專業開發者花大量時間閱讀文檔——不是因為他們不知道自己在做什麼，而是因為網頁開發領域發展迅速，保持更新需要不斷學習。優秀的文檔不僅幫助你理解如何使用某些工具，還幫助你理解為什麼以及何時使用它們。 +專業開發者花大部分時間閱讀文件，不是因為不會做，而是因為網頁開發快速演進，要持續學習才能跟上。優秀文件讓你不只懂「怎麼用」，更了解「為什麼要用」和「什麼時候用」。 -#### 必備文檔資源 +#### 重要文件資源 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- 網頁技術文檔的黃金標準 -- 提供 HTML、CSS 和 JavaScript 的全面指南 -- 包括瀏覽器兼容性信息 -- 提供實用示例和交互式演示 +- 網頁技術文件的黃金標準 +- 包羅萬象的 HTML、CSS 和 JavaScript 指南 +- 包含瀏覽器相容性資訊 +- 實用範例與互動示範 -**[Web.dev](https://web.dev)** (由 Google 提供) +**[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 "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "開發者花在工具上的時間" + "程式編輯器" : 40 + "瀏覽器測試" : 25 + "命令列" : 15 + "閱讀文件" : 15 + "除錯" : 5 ``` +> **有趣洞察**：大部分開發者約 40% 時間待在程式碼編輯器中，但注意測試、學習和解決問題花了多少時間。寫程式不只是寫程式碼，而是在塑造使用者體驗！ -> **有趣的洞察**：大多數開發者大約40%的時間花在代碼編輯器上，但注意有多少時間用於測試、學習和解決問題。編程不僅僅是寫代碼——它是創造體驗！ - -✅ **思考食糧**：這裡有一個有趣的問題值得思考——你認為用於構建網站的工具（開發）和設計網站外觀的工具（設計）有什麼不同？這就像設計一座漂亮房子的建築師和實際建造它的承包商之間的區別。兩者都至關重要，但需要不同的工具箱！這種思考方式真的能幫助你看到網站如何誕生的全貌。 +✅ **思考題**：這有趣的是，網站「開發」（寫程式碼）工具，和網站「設計」（外觀設計）工具會有什麼差別？就像建築師設計漂亮房子，跟實際承包商蓋房子，兩者都很重要但工具箱不一樣！這種想法會幫你看到網站誕生的全貌。 ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： -**描述：** 探索現代代碼編輯器或 IDE 的功能，展示它如何改善你作為網頁開發者的工作流程。 +**描述：** 探索一款現代程式碼編輯器或 IDE 的功能，並示範它如何提升你作為網頁開發者的工作流程。 -**提示：** 選擇一個代碼編輯器或 IDE（例如 Visual Studio Code、WebStorm 或基於雲的 IDE）。列出三個幫助你更高效地編寫、調試或維護代碼的功能或擴展。對每個功能進行簡要說明，解釋它如何改善你的工作流程。 +**提示：** 選擇一款程式碼編輯器或 IDE（如 Visual Studio Code、WebStorm、或雲端 IDE）。列出三個功能或擴充套件，說明它們如何幫助你更有效率地撰寫、調試或維護程式碼。並針對每項說明其對工作流程的好處。 --- ## 🚀 挑戰 -**好了，偵探，準備好迎接你的第一個案件了嗎？** +**偵探，你準備好接案了嗎？** -現在你已經有了這麼棒的基礎，我有一個冒險任務，將幫助你看到編程世界的多樣性和迷人之處。聽著——這不是要你現在就開始寫代碼，所以不用有壓力！把自己想像成一個編程語言偵探，正在進行你的第一個激動人心的案件！ +現在你已打下超棒的基礎，我會帶你一趟冒險，看清楚程式世界究竟多麼多元且有趣。聽我說——這還不是寫程式碼的時候，別有壓力！把自己當成程式語言偵探，接受你人生的第一個有趣案件！ -**你的任務，如果你選擇接受：** -1. **成為語言探索者**：選擇三種來自完全不同領域的編程語言——也許一種用於構建網站，一種用於創建移動應用，一種用於科學家數據分析。找到每種語言中完成同一簡單任務的示例代碼。我保證你會驚訝於它們在完成相同事情時的不同表現！ +**你的任務（如你願意接受）：** +1. **成為語言探險家**：從完全不同領域挑三種程式語言——比方說，一個是用來建網站，一個用來寫手機應用，一個用於科學資料分析。找出同一個簡單任務在每種語言的範例。我保證你會驚訝地發現他們外觀可以完全不同，做出來卻一樣！ -2. **揭開它們的起源故事**：每種語言有什麼特別之處？這裡有個有趣的事實——每一種編程語言的誕生都是因為有人認為：「你知道嗎？一定有更好的方法來解決這個特定問題。」你能找出那些問題是什麼嗎？其中一些故事真的非常有趣！ +2. **挖掘起源故事**：什麼讓每種語言特別？冷知識來了——每種程式語言的誕生都是因為有人想著：「有沒有更好的方法來解決這個特定問題？」你能找出這些問題是什麼嗎？背後故事真心很吸引人！ -3. **了解它們的社群**：看看每種語言的社群有多熱情和友好。有些語言的開發者數以百萬計，分享知識並互相幫助；有些語言的社群規模較小，但非常緊密和支持。你會喜歡看到這些社群的不同個性！ +3. **認識社群**：看看每個語言的社群有多熱情和包容。有些社群有數百萬開發者共享知識助人，有些則是小而緊密支持彼此。你會喜歡看到這些社群的不同個性！ -4. **跟隨你的直覺**：哪種語言現在對你來說最容易接近？不要為做出「完美」的選擇而感到壓力——只需聽從你的直覺！這裡真的沒有錯誤的答案，你以後可以隨時探索其他語言。 +4. **跟隨直覺**：現在哪個語言感覺最親切？別擔心做「完美」選擇——只要聽從你的直覺！這裡沒有錯答案，未來你隨時都能探索其他語言。 -**額外偵探工作**：看看你能否發現哪些主要網站或應用是用每種語言構建的。我保證你會對 Instagram、Netflix 或你停不下來玩的那款手機遊戲背後的技術感到震驚！ +**額外偵探工作**：試著發掘每種語言支持開發了哪些大型網站或應用。我敢保證，你會震驚 Instagram、Netflix 或你停不下來玩的手機遊戲是用什麼寫成的！ -> 💡 **記住**：今天你並不是要成為這些語言的專家。你只是先熟悉一下這些領域，然後再決定在哪裡安家。慢慢來，享受這個過程，讓你的好奇心引導你！ +> 💡 **記住**：你今天不是要成為專家，只是先熟悉這個領域，看看想在哪裡落腳。慢慢來，玩得開心，讓好奇心引領你！ -## 讓我們慶祝你的發現！ +## 來慶祝你發現的新世界！ -天啊，你今天吸收了這麼多令人難以置信的信息！我真的很期待看到你從這段精彩旅程中學到了多少。而且記住——這不是一個需要你完美答題的測試。這更像是一次慶祝，慶祝你所學到的所有關於這個迷人世界的知識！ +哇哩咧，你今天吸收了超多精彩資訊！我真心期待知道這趟精彩旅程中，你留下了多少印象。記住——這不是考試，不用全數完美通過。這是一場你對即將進入的奇妙世界認識的慶祝派對！ -[參加課後測驗](https://ff-quizzes.netlify.app/web/) -## 回顧與自學 +[前往課後小測驗](https://ff-quizzes.netlify.app/web/) -**慢慢探索，享受其中的樂趣吧！** +## 複習與自學 -今天你已經學到了很多，這是值得驕傲的事！現在來到最有趣的部分——探索那些激發你好奇心的主題。記住，這不是作業——這是一場冒險！ +**慢慢探索，玩得開心！** +你今天已經學了好多，值得感到驕傲！現在來到有趣的部分——探索激發你好奇心的主題。記住，這不是功課——而是一場冒險！ -**深入探索讓你感興趣的內容：** +**深入探索讓你興奮的事物：** -**動手嘗試程式語言：** -- 瀏覽2-3個吸引你注意的程式語言官方網站。每個語言都有自己的特色和故事！ -- 試試一些線上程式碼遊樂場，例如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。不要害怕嘗試——你不會弄壞任何東西！ -- 閱讀你喜歡的程式語言的誕生故事。真的，有些故事非常有趣，能幫助你理解為什麼這些語言會以現在的方式運作。 +**親身實踐程式語言：** +- 瀏覽你感興趣的 2-3 種程式語言官方網站。每一種語言都有自己的個性和故事！ +- 嘗試一些線上編程遊樂場，例如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、或 [Replit](https://replit.com/)。不要害怕嘗試——你不會壞掉任何東西！ +- 閱讀你最喜歡語言的誕生故事。說真的，其中一些起源故事非常有趣，能幫助你理解語言的運作原理。 **熟悉你的新工具：** -- 如果還沒下載 Visual Studio Code，趕快下載吧——它是免費的，你一定會喜歡！ -- 花幾分鐘瀏覽擴展市場。這就像是你的程式碼編輯器的應用商店！ -- 打開瀏覽器的開發者工具，隨便點點看。別擔心是否能完全理解——只要熟悉一下裡面的內容就好。 +- 如果還沒下載 Visual Studio Code，趕快下載——它是免費的，而且你一定會喜歡！ +- 花幾分鐘瀏覽擴充套件市場。它就像你編輯器的應用程式商店！ +- 打開瀏覽器的開發者工具，隨便點點。別擔心要完全理解，只要熟悉內容即可。 + +**加入開發者社群：** +- 追蹤一些開發者社群，像是 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/)，或 [GitHub](https://github.com/)。程式設計社群對新人非常友善！ +- 在 YouTube 上看一些適合初學者的編程影片。有許多優秀的創作者記得當初入門時的感受。 +- 考慮參加本地聚會或線上社群。相信我，開發者們很樂意幫助新人！ -**加入社群：** -- 追蹤一些開發者社群，例如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。程式開發社群對新手非常友好！ -- 在 YouTube 上觀看一些適合初學者的程式教學影片。有很多優秀的創作者，他們都記得自己剛開始學習時的感受。 -- 考慮加入本地的聚會或線上社群。相信我，開發者們非常樂意幫助新手！ +> 🎯 **聽著，這是我希望你記得的**：你不需要一夕之間成為程式高手！現在，你只是在認識即將加入的這個精彩世界。慢慢來，享受過程，並記得——每一個你敬佩的開發者都曾坐在你現在的位置，既興奮又可能有些茫然。這很正常，也代表你做得很對！ -> 🎯 **聽著，我希望你記住這一點**：沒有人期望你一夜之間成為程式高手！現在，你只是開始了解這個令人驚嘆的新世界。慢慢來，享受這段旅程，記住——你所崇拜的每一位開發者曾經也坐在你現在的位置上，感到興奮，也許有點不知所措。這是完全正常的，這意味著你正在正確地進行！ ## 作業 -[閱讀文件](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **給你的作業一點提示**：我非常希望看到你探索一些我們還沒提到的工具！跳過我們已經討論過的編輯器、瀏覽器和命令行工具——還有一整個令人驚嘆的開發工具宇宙等著你去發掘。尋找那些活躍維護並擁有充滿活力、樂於助人的社群的工具（這些工具通常有最好的教學資源和最支持的社群，當你遇到困難需要幫助時，會有友善的手伸向你）。 +> 💡 **作業的小提示**：我非常希望看到你探索我們還沒提過的工具！跳過已講過的編輯器、瀏覽器和指令列工具——有整個令人驚嘆的開發工具世界正等待你發現。挑選那些仍積極維護且擁有活躍、熱心社群的工具（這些通常有最棒的教學，當你卡住需要幫助時也有最支持你的人）。 --- ## 🚀 你的程式設計旅程時間表 -### ⚡ **接下來5分鐘可以做的事** -- [ ] 收藏2-3個吸引你注意的程式語言網站 -- [ ] 如果還沒下載 Visual Studio Code，趕快下載吧 -- [ ] 打開瀏覽器的開發者工具（F12），隨便點點看任何網站 +### ⚡ **接下來 5 分鐘能做的事** +- [ ] 標記 2-3 個你有興趣的程式語言網站 +- [ ] 如果還沒下載，趕快下載 Visual Studio Code +- [ ] 打開瀏覽器的開發者工具（F12），並在任一網站隨意點擊 - [ ] 加入一個程式設計社群（Dev.to、Reddit r/webdev 或 Stack Overflow） -### ⏰ **接下來一小時可以完成的事** +### ⏰ **接下來 1 小時可完成的事** - [ ] 完成課後測驗並反思你的答案 -- [ ] 設置 VS Code 並安裝 GitHub Copilot 擴展 -- [ ] 在線上嘗試兩種不同程式語言的 "Hello World" 範例 -- [ ] 在 YouTube 上觀看 "開發者的一天" 影片 -- [ ] 開始你的程式語言探索（來自挑戰） - -### 📅 **一週的冒險** -- [ ] 完成作業並探索3個新的開發工具 -- [ ] 在社交媒體上追蹤5位開發者或程式設計相關帳號 -- [ ] 在 CodePen 或 Replit 上嘗試建立一些小作品（即使只是 "Hello, [你的名字]!"） -- [ ] 閱讀一篇開發者的部落格文章，了解他們的程式設計旅程 -- [ ] 參加一次線上聚會或觀看程式設計講座 -- [ ] 開始使用線上教學學習你選擇的程式語言 - -### 🗓️ **一個月的蛻變** -- [ ] 建立你的第一個小型專案（即使只是簡單的網頁也算！） -- [ ] 為開源專案做出貢獻（從修正文件開始） -- [ ] 指導一位剛開始學習程式設計的人 -- [ ] 建立你的開發者作品集網站 -- [ ] 與本地開發者社群或學習小組建立聯繫 -- [ ] 開始規劃你的下一個學習里程碑 - -### 🎯 **最終反思檢查** - -**在繼續之前，花點時間慶祝一下：** -- 今天有什麼關於程式設計的事情讓你感到興奮？ -- 你最想先探索哪個工具或概念？ -- 你對開始這段程式設計旅程有什麼感受？ -- 你現在最想問開發者的一個問題是什麼？ +- [ ] 設定 VS Code，安裝 GitHub Copilot 擴充套件 +- [ ] 線上嘗試兩種程式語言寫「Hello World」範例 +- [ ] 看一部 YouTube 上的「開發者的一天」影片 +- [ ] 開始你的程式語言偵探任務（依挑戰內容） + +### 📅 **你的一週冒險計畫** +- [ ] 完成作業，探索 3 種全新開發工具 +- [ ] 在社群媒體上追蹤 5 位開發者或程式相關帳號 +- [ ] 嘗試在 CodePen 或 Replit 製作一些小作品（即使只是「Hello, [你的名字]！」） +- [ ] 閱讀一篇有關開發者程式生涯的部落格文章 +- [ ] 參加一次線上聚會或觀看程式設計演講 +- [ ] 使用線上教學開始學習你選擇的程式語言 + +### 🗓️ **你的一個月轉化計畫** +- [ ] 製作你的第一個小專案（即使只是簡單網頁也算！） +- [ ] 為開源專案貢獻（先從文件修正開始） +- [ ] 指導剛開始學程式的人 +- [ ] 建立你的開發者個人作品網站 +- [ ] 與本地開發者社群或讀書會建立連結 +- [ ] 開始規劃你的下一個學習目標 + +### 🎯 **最後反思檢視** + +**在繼續之前，花點時間慶祝：** +- 今天關於程式設計，讓你感到興奮的是什麼？ +- 你想先探索哪個工具或概念？ +- 你對開始這段程式旅程感覺如何？ +- 你現在最想問開發者什麼問題？ ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title 你的自信心建立旅程 + section 今天 + 好奇: 3: 你 + 不知所措: 4: 你 + 興奮: 5: 你 + section 這星期 + 探索中: 4: 你 + 學習中: 5: 你 + 聯繫中: 4: 你 + section 下個月 + 建立中: 5: 你 + 自信: 5: 你 + 幫助他人: 5: 你 ``` - -> 🌟 **記住**：每位專家曾經都是初學者。每位資深開發者曾經也和你現在一樣——興奮、可能有點不知所措，並且對未來的可能性感到好奇。你有著令人驚嘆的同伴，這段旅程將會非常精彩。歡迎來到程式設計的奇妙世界！🎉 +> 🌟 **記住**：每個專家都曾是初學者。每位資深開發者都有過和你現在一樣的感受——興奮、可能有點不知所措，並且充滿好奇。你正處於一群了不起的人群中，這趟旅程將十分精彩。歡迎來到美妙的程式世界！ 🎉 --- + **免責聲明**： -本文件已使用 AI 翻譯服務 [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/zh-MO/AGENTS.md b/translations/zh-MO/AGENTS.md index 1d454f437..c9e1f898c 100644 --- a/translations/zh-MO/AGENTS.md +++ b/translations/zh-MO/AGENTS.md @@ -1,47 +1,47 @@ # AGENTS.md -## 項目概覽 +## Project Overview -這是一個用於教導初學者網頁開發基礎的教育課程資源庫。課程為一個由 Microsoft Cloud Advocates 開發的完整 12 週課程，包含 24 節實作課程，涵蓋 JavaScript、CSS 和 HTML。 +這是一個用於教授初學者網頁開發基礎的教育課程資源庫。課程是一個全面的 12 週課程，由 Microsoft Cloud Advocates 開發，包含 24 個涵蓋 JavaScript、CSS 和 HTML 的實作課程。 -### 主要組成部分 +### Key Components -- **教育內容**：24 節結構化課程，組織成以專案為基礎的模組 -- **實作專案**：Terrarium、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助理 -- **互動測驗**：48 個測驗，每個有 3 題（課前/課後評估） -- **多語言支援**：透過 GitHub Actions 自動翻譯 50 多種語言 +- **教育內容**：24 個依專案模塊組織的結構化課程 +- **實作專案**：Terrarium、Typing Game、Browser Extension、Space Game、Banking App、Code Editor 和 AI 聊天助理 +- **互動小測驗**：48 個小測驗，每個有3題（課程前後評估） +- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言 - **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案） -### 架構 +### Architecture -- 以課程為基礎的教育資源庫架構 -- 每個課程資料夾包含 README、程式碼示例和解答 -- 獨立專案分置於不同目錄中（quiz-app、各課程專案） -- 使用 GitHub Actions（co-op-translator）進行翻譯系統 -- 文件使用 Docsify 呈現，並提供 PDF 版本 +- 以課程為基礎結構的教育資源庫 +- 每個課程資料夾包含 README、程式碼範例及解答 +- 獨立專案位於不同目錄（quiz-app、各課程專案） +- 使用 GitHub Actions（co-op-translator）進行翻譯 +- 文件由 Docsify 提供，且有 PDF 格式可用 -## 設置命令 +## Setup Commands -該資源庫主要用於教育內容消費。若要操作特定專案： +此資源庫主要供教育內容瀏覽。使用特定專案時： -### 主資源庫設置 +### Main Repository Setup ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### 測驗應用設置 (Vue 3 + Vite) +### Quiz App Setup (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # 開始開發伺服器 -npm run build # 生產環境建構 +npm run build # 為生產環境建立 npm run lint # 執行 ESLint ``` -### 銀行專案 API (Node.js + Express) +### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api @@ -51,23 +51,23 @@ npm run lint # 執行 ESLint npm run format # 使用 Prettier 格式化 ``` -### 瀏覽器擴充專案 +### Browser Extension Projects ```bash cd 5-browser-extension/solution npm install -# 遵循瀏覽器特定的擴充功能載入指示 +# 按照瀏覽器特定的擴充功能載入指示 ``` -### 太空遊戲專案 +### Space Game Projects ```bash cd 6-space-game/solution npm install -# 在瀏覽器中開啟 index.html 或使用即時伺服器 +# 喺瀏覽器開啟 index.html 或者用 Live Server ``` -### 聊天專案 (Python 後端) +### Chat Project (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -76,207 +76,207 @@ pip install openai python api.py ``` -## 開發工作流程 +## Development Workflow -### 對內容貢獻者 +### For Content Contributors -1. **Fork 該資源庫** 至你的 GitHub 帳號 -2. **將你的 fork 複製** 至本地 -3. **為你的更改創建新分支** +1. **Fork 該資源庫** 到你的 GitHub 帳號 +2. **將 fork 克隆** 到本地 +3. **建立新分支** 以進行修改 4. 修改課程內容或程式碼範例 -5. 在相關專案目錄中測試任何程式碼更動 -6. 根據貢獻規範提交 Pull Request +5. 在相關專案目錄測試程式碼變更 +6. 按照貢獻指引提交 pull request -### 對學習者 +### For Learners -1. Fork 或複製該資源庫 -2. 按順序瀏覽課程資料夾 -3. 閱讀每節課的 README 文件 -4. 完成 https://ff-quizzes.netlify.app/web/ 上的課前測驗 -5. 按課程資料夾操作程式碼範例 -6. 完成作業和挑戰 -7. 進行課後測驗 +1. Fork 或克隆該資源庫 +2. 按順序瀏覽課程目錄 +3. 閱讀每課的 README 文件 +4. 在 https://ff-quizzes.netlify.app/web/ 完成課前小測 +5. 實作課程資料夾中的程式碼範例 +6. 完成作業與挑戰 +7. 參加課後小測驗 -### 實時開發 +### Live Development -- **文件**：在根目錄執行 `docsify serve` (端口 3000) -- **測驗應用**：在 quiz-app 目錄執行 `npm run dev` -- **專案**：HTML 專案使用 VS Code Live Server 擴充套件 -- **API 專案**：分別在 API 目錄執行 `npm start` +- **文件**：在根目錄執行 `docsify serve`（預設埠 3000） +- **Quiz App**：在 quiz-app 目錄執行 `npm run dev` +- **專案**：使用 VS Code Live Server 外掛服務 HTML 專案 +- **API 專案**：在各 API 目錄執行 `npm start` -## 測試說明 +## Testing Instructions -### 測驗應用測試 +### Quiz App Testing ```bash cd quiz-app -npm run lint # 檢查程式碼風格問題 -npm run build # 確認建構成功 +npm run lint # 檢查代碼風格問題 +npm run build # 驗證建構成功 ``` -### 銀行 API 測試 +### Bank API Testing ```bash cd 7-bank-project/api npm run lint # 檢查程式碼風格問題 -node server.js # 確認伺服器啟動無錯誤 +node server.js # 驗證伺服器啟動時無錯誤 ``` -### 一般測試方法 +### General Testing Approach -- 本教育資源庫無全面自動化測試 -- 人工作測重點： - - 程式碼範例可正常執行 +- 本資源庫為教育用途，無完善的自動化測試 +- 手動測試重點： + - 程式碼範例能正常執行且無錯誤 - 文件中的連結功能正常 - - 專案成功構建 - - 範例符合最佳實踐 + - 專案能成功建置 + - 範例編寫遵循最佳實踐 -### 提交前檢查 +### Pre-submission Checks -- 在有 package.json 的目錄下執行 `npm run lint` -- 驗證 Markdown 連結有效性 -- 在瀏覽器或 Node.js 測試程式碼範例 -- 確認翻譯保持適當架構 +- 在有 package.json 的目錄執行 `npm run lint` +- 驗證 markdown 連結有效 +- 在瀏覽器或 Node.js 中測試程式碼範例 +- 確認翻譯保留正確結構 -## 代碼風格指導 +## Code Style Guidelines ### JavaScript - 使用現代 ES6+ 語法 -- 遵循專案中 ESLint 標準配置 -- 使用具教育意義的變數和函數命名 -- 添加解釋概念的註解以利學習者理解 -- 在配置了 Prettier 的地方進行格式化 +- 遵守專案中提供的標準 ESLint 設定 +- 使用有意義的變數及函數名稱，便於教學理解 +- 加入說明概念的註解 +- 於配置 Prettier 的地方使用自動格式化 ### HTML/CSS -- 語意化的 HTML5 元素 -- 響應式設計原則 -- 清晰的類名命名規則 -- CSS 技術附加註解以供學習參考 +- 使用語意化的 HTML5 元素 +- 採用響應式設計原則 +- 清晰的 class 命名規範 +- CSS 技術附帶學習解說註解 ### Python -- 遵循 PEP 8 風格指南 -- 清晰且具教育意義的程式碼範例 -- 需時可加上型別提示以助學習 +- 遵循 PEP 8 樣式指引 +- 提供清晰且具教育意義的程式碼範例 +- 需要時使用型別提示以輔助學習 -### Markdown 文件 +### Markdown Documentation -- 清晰的標題層級 -- 附帶語言標示的程式碼區塊 -- 指向額外資源的連結 -- `images/` 資料夾中的截圖和圖片 -- 具可及性的圖片替代文字 +- 清楚的標題階層結構 +- 指定語言的程式碼區塊 +- 附加資源連結 +- screenshots 與圖片存放於 `images/` 目錄 +- 圖片具有替代文字以提升無障礙性 -### 檔案組織 +### File Organization -- 課程依序編號 （1-getting-started-lessons、2-js-basics 等） -- 每個專案有 `solution/` 且通常有 `start/` 或 `your-work/` 目錄 -- 圖片存放於課程專屬的 `images/` 文件夾 -- 翻譯文件在 `translations/{language-code}/` 結構中 +- 課程依序編號（1-getting-started-lessons、2-js-basics 等） +- 每專案有 `solution/`，通常帶有 `start/` 或 `your-work/` 目錄 +- 圖片放在課程專用的 `images/` 資料夾 +- 翻譯存放於 `translations/{language-code}/` 結構 -## 建置和部署 +## Build and Deployment -### 測驗應用部署 (Azure Static Web Apps) +### Quiz App Deployment (Azure Static Web Apps) -quiz-app 配置用於 Azure Static Web Apps 部署： +quiz-app 已配置用於 Azure Static Web Apps 部署： ```bash cd quiz-app npm run build # 建立 dist/ 資料夾 -# 在 push 到 main 時透過 GitHub Actions 工作流程部署 +# 在推送到 main 時透過 GitHub Actions 工作流程部署 ``` Azure Static Web Apps 配置： -- **應用位置**：`/quiz-app` +- **App 位置**：`/quiz-app` - **輸出位置**：`dist` -- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Workflow**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### 文件 PDF 產生 +### Documentation PDF Generation ```bash npm install # 安裝 docsify-to-pdf npm run convert # 從 docs 生成 PDF ``` -### Docsify 文件 +### Docsify Documentation ```bash -npm install -g docsify-cli # 全域安裝 Docsify +npm install -g docsify-cli # 全局安裝 Docsify docsify serve # 在 localhost:3000 提供服務 ``` -### 專案特定建置 +### Project-specific Builds -每個專案目錄可能擁有自己的建置流程： -- Vue 專案：使用 `npm run build` 產生生產環境包 -- 靜態專案：無建置步驟，直接提供檔案服務 +各專案目錄可能有專屬建置流程： +- Vue 專案：執行 `npm run build` 建立生產版本 +- 靜態專案：無建置步驟，直接提供檔案使用 -## Pull Request 指引 +## Pull Request Guidelines -### 標題格式 +### Title Format -使用清晰且描述變更範圍的標題： -- `[Quiz-app] Add new quiz for lesson X` -- `[Lesson-3] Fix typo in terrarium project` -- `[Translation] Add Spanish translation for lesson 5` -- `[Docs] Update setup instructions` +使用清晰且描述性的標題指出變更範圍： +- `[Quiz-app] 新增第 X 課小測` +- `[Lesson-3] 修正 terrarium 專案打字錯誤` +- `[Translation] 新增第 5 課西班牙語翻譯` +- `[Docs] 更新設置指引` -### 必須檢查事項 +### Required Checks -提交 PR 前： +提交 PR 前須: -1. **代碼品質**： +1. **程式碼品質**： - 在受影響專案目錄執行 `npm run lint` - 修正所有 lint 錯誤及警告 2. **建置驗證**： - - 如適用執行 `npm run build` + - 必要時執行 `npm run build` - 確保無建置錯誤 3. **連結驗證**： - - 測試所有 Markdown 連結 - - 驗證圖片引用是否有效 + - 測試所有 markdown 連結 + - 確認圖片參考正常 -4. **內容審核**： - - 校對拼寫與文法 +4. **內容審查**： + - 校對拼字與文法 - 確認程式碼範例正確且具教育意義 - - 驗證翻譯內容保持原意 + - 確認翻譯保留原意 -### 貢獻要求 +### Contribution Requirements -- 同意 Microsoft CLA（首個 PR 自動檢查） -- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/) -- 詳細規範見 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如適用，PR 描述中引用議題號碼 +- 同意 Microsoft CLA（首個 PR 會自動檢查） +- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- 詳細規則參考 [CONTRIBUTING.md](./CONTRIBUTING.md) +- 如有議題，於 PR 描述中提及編號 -### 審核流程 +### Review Process -- PR 由維護者及社群審核 -- 優先考量教學清晰度 -- 程式碼範例應遵循現行最佳實踐 -- 翻譯審核確保準確且符合文化 +- PR 由維護者及社群審閱 +- 優先確保教育清晰度 +- 程式碼範例應採用當前最佳實踐 +- 翻譯需確保準確性及文化適切性 -## 翻譯系統 +## Translation System -### 自動翻譯 +### Automated Translation -- 使用 GitHub Actions 搭配 co-op-translator 工作流程 -- 自動翻譯至 50 多種語言 -- 原始檔置於主目錄 -- 翻譯檔案於 `translations/{language-code}/` 目錄 +- 使用 GitHub Actions 與 co-op-translator 工作流程 +- 自動翻譯成超過 50 種語言 +- 原始文件位於主目錄 +- 翻譯檔案位於 `translations/{language-code}/` 目錄 -### 手動翻譯改善 +### Adding Manual Translation Improvements -1. 定位至 `translations/{language-code}/` 中檔案 -2. 在保留架構前提下進行改進 -3. 確保程式碼範例持續可用 -4. 測試任何本地化的測驗內容 +1. 尋找文件於 `translations/{language-code}/` +2. 在保留結構下進行改進 +3. 確保程式碼範例仍可正常運作 +4. 測試任何本地化的小測內容 -### 翻譯元資料 +### Translation Metadata -翻譯檔包含元資料標頭： +翻譯檔含有元資料標頭： ```markdown ``` -## 除錯與故障排除 +## Debugging and Troubleshooting -### 常見問題 +### Common Issues -**測驗應用啟動失敗**： -- 檢查 Node.js 版本（建議 v14 以上） -- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install` -- 檢查埠口衝突（預設：Vite 使用端口 5173） +**Quiz app 無法啟動**： +- 檢查 Node.js 版本（建議 v14+） +- 刪除 `node_modules` 和 `package-lock.json` 後重新執行 `npm install` +- 檢查埠口衝突（預設 Vite 使用 5173） -**API 服務器無法啟動**： -- 確認 Node.js 版本符合最低需求（node >=10） -- 檢查埠口是否被佔用 -- 確保所有依賴皆已安裝 (`npm install`) +**API 伺服器無法啟動**： +- 確認 Node.js 版本符合要求（node >=10） +- 確認埠口未被佔用 +- 確保依賴透過 `npm install` 安裝完整 **瀏覽器擴充功能無法載入**： -- 確認 manifest.json 格式正確 -- 檢查瀏覽器控制台錯誤訊息 -- 遵循瀏覽器特定的擴充安裝說明 +- 驗證 manifest.json 格式無誤 +- 查看瀏覽器控制檯錯誤訊息 +- 依瀏覽器指示安裝擴充功能 **Python 聊天專案問題**： -- 確認已安裝 OpenAI 套件：`pip install openai` -- 確認已設定 GITHUB_TOKEN 環境變數 -- 檢查 GitHub Models 存取權限 +- 確認 OpenAI 套件已安裝：`pip install openai` +- GITHUB_TOKEN 環境變量已設定 +- 確認 GitHub Models 存取權限 -**Docsify 未提供文件服務**： -- 全域安裝 docsify-cli：`npm install -g docsify-cli` +**Docsify 無法提供文件**： +- 全局安裝 docsify-cli：`npm install -g docsify-cli` - 從資源庫根目錄執行 - 確認 `docs/_sidebar.md` 存在 -### 開發環境小提示 +### Development Environment Tips -- 使用 VS Code 搭配 Live Server 擴充套件開發 HTML 專案 -- 安裝 ESLint 與 Prettier 擴充以維持格式一致 -- 使用瀏覽器開發工具除錯 JavaScript -- Vue 專案安裝 Vue DevTools 瀏覽器擴充 +- HTML 專案使用 VS Code Live Server 外掛 +- 安裝 ESLint 與 Prettier 擴充套件保持格式一致 +- 使用瀏覽器 DevTools 偵錯 JavaScript +- Vue 專案建議安裝 Vue DevTools 瀏覽器擴充 -### 效能考量 +### Performance Considerations -- 翻譯檔案多（50 多種語言）使整體複製體積大 -- 對僅操作內容者可用淺層複製：`git clone --depth 1` -- 編輯英文內容時，盡量排除翻譯目錄搜尋 -- 建置過程首次執行可能較慢（npm install、Vite 建置） +- 有大量翻譯檔案（超過 50 種語言），完整複製較大 +- 僅工作內容時可用淺層複製：`git clone --depth 1` +- 編輯英文內容時排除翻譯目錄搜尋 +- 建置首次運行可能較慢（npm 安裝、Vite 建置） -## 安全考量 +## Security Considerations -### 環境變數 +### Environment Variables - API 金鑰絕不可提交至資源庫 -- 使用 `.env` 檔案（已加入 `.gitignore`） -- 在專案 README 中記錄所需環境變數 +- 使用 `.env` 檔案（已包含於 `.gitignore`） +- 專案 README 記錄必要環境變量 -### Python 專案 +### Python Projects -- 使用虛擬環境管理依賴：`python -m venv venv` +- 使用虛擬環境：`python -m venv venv` - 保持依賴更新 -- GitHub 令牌需設定最小權限 +- GitHub 令牌應只具必要最低權限 -### GitHub Models 存取 +### GitHub Models Access -- 需使用個人存取令牌（PAT） -- 將令牌存為環境變數 -- 絕不可將令牌或認證資料提交到資源庫 +- 使用個人存取權杖 (PAT) 存取 GitHub Models +- 令牌存於環境變量中 +- 絕不可將令牌或認證提交至資源庫 -## 補充說明 +## Additional Notes -### 目標受眾 +### Target Audience -- 完全初學網頁開發者 +- 完全初學者學習網頁開發 - 學生及自學者 -- 教師課堂使用者 -- 內容設計注重無障礙及循序漸進技術提升 +- 教師在課堂中使用此課程 +- 內容設計注重無障礙及技能循序漸進 -### 教育理念 +### Educational Philosophy -- 以專案為核心的學習方式 -- 頻繁知識檢測（測驗） -- 實作練習為主 -- 實務範例導入 -- 先學基礎概念再進階框架 +- 專案導向學習方式 +- 頻繁的知識測驗（小測） +- 實作編碼練習 +- 以真實案例示範應用 +- 先打穩基礎再學框架 -### 資源庫維護 +### Repository Maintenance -- 積極活躍的學習者和貢獻者社群 -- 定期更新依賴和內容 -- 維護者監控議題和討論 -- 翻譯更新自動執行於 GitHub Actions +- 活躍的學習者及貢獻者社群 +- 定期更新相依元件及內容 +- 維護者監控議題與討論 +- 翻譯更新透過 GitHub Actions 自動化 -### 相關資源 +### Related Resources - [Microsoft Learn 模組](https://docs.microsoft.com/learn/) -- [學生中心資源](https://docs.microsoft.com/learn/student-hub/) -- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- 其他課程：生成式 AI、數據科學、機器學習、物聯網課程可用 +- [Student Hub 資源](https://docs.microsoft.com/learn/student-hub/) +- 推薦學員使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用 -### 使用特定專案說明 +### Working with Specific Projects -個別專案詳細說明見相應 README： -- `quiz-app/README.md` - Vue 3 測驗應用 -- `7-bank-project/README.md` - 帶認證的銀行應用 +各專案詳細指引見以下 README： +- `quiz-app/README.md` - Vue 3 小測應用 +- `7-bank-project/README.md` - 含身分驗證的銀行應用 - `5-browser-extension/README.md` - 瀏覽器擴充功能開發 - `6-space-game/README.md` - Canvas 遊戲開發 - `9-chat-project/README.md` - AI 聊天助理專案 -### Monorepo 結構說明 +### Monorepo Structure -雖然非傳統 monorepo，此資源庫包含多個獨立專案： -- 每節課程獨立自主 -- 專案間無依賴共用 -- 可單獨作業不影響他人 -- 複製整個資源庫以獲得完整課程體驗 +雖非傳統 monorepo，但此資源庫包含多個獨立專案： +- 每課單獨成章 +- 專案不共用相依套件 +- 可單獨作業不影響其它專案 +- 想獲得完整課程體驗，請克隆整個資源庫 --- **免責聲明**： -本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言文件應被視為具權威性的來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯概不負責。 +本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我哋致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於重要信息，建議採用專業人工翻譯。因使用此翻譯而引起的任何誤解或錯誤詮釋，本公司概不負責。 \ No newline at end of file diff --git a/translations/zh-MO/README.md b/translations/zh-MO/README.md index 77e596a4d..e8fea5866 100644 --- a/translations/zh-MO/README.md +++ b/translations/zh-MO/README.md @@ -10,200 +10,210 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Web Development for Beginners - 課程綱要 +# Web 開發初學者教程 -透過 Microsoft Cloud Advocates 提供的 12 週完整課程學習網頁開發基礎。24 堂課每堂都透過實作專案深入探討 JavaScript、CSS 與 HTML，專案包括生態瓶、瀏覽器擴充功能及太空遊戲。配合小測驗、討論與實作作業，提升技能與知識吸收效果，體驗有效的專案導向學習法。立即開始你的程式設計旅程！ +透過 Microsoft Cloud Advocates 開發嘅 12 星期全方位課程，學習網頁開發基礎知識。24 堂課涵蓋 JavaScript、CSS 同 HTML，並透過實作項目如生態瓶、瀏覽器擴充功能同太空遊戲深入了解。參與測驗、討論同實踐作業。運用具成效嘅項目導向教學，提高技能同優化知識記憶。今日就開始你嘅編碼旅程！ 加入 Azure AI Foundry Discord 社群 [![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 支援（自動化及保持更新） -[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](../zh-HK/README.md) | [中文（繁體，澳門）](./README.md) | [中文（繁體，台灣）](../zh-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) | [葡萄牙語（巴西）](../pt-BR/README.md) | [葡萄牙語（葡萄牙）](../pt-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) +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](./README.md) | [Chinese (Traditional, Taiwan)](../zh-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) | [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)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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 種語言翻譯，將大幅增加下載大小。若想省略翻譯內容可使用 sparse checkout： +> **想本地克隆？** +> +> 呢個儲存庫包括 50 多種語言翻譯，會大大增加下載大小。如想不包括翻譯而克隆，請使用稀疏檢出： +> +> **Bash / macOS / Linux:** > ```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' > ``` -> 這樣你可以更快下載並取得完成課程所需的一切。 +> +> **CMD (Windows):** +> ```cmd +> 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" +> ``` +> +> 呢啲方法會更快下載，亦包含你完成課程所需全部資源。 -**若希望新增其它翻譯語言，支援清單列於 [這裡](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) -#### 🧑‍🎓 _你是學生嗎？_ +#### 🧑‍🎓 _你係學生嗎？_ -造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡提供初學者資源、學生套件，甚至可取得免費證書兌換券。這是你想要收藏並偶爾查看的頁面，內容每月更新。 +請訪問 [**學生中心頁面**](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 助手項目剛新增，查看 [項目](./9-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/zh-MO/background.148a8d43afde5730.webp) -- 課程涵蓋從基礎到 RAG 技術。 -- 使用生成式 AI 及我們的夥伴應用與歷史人物互動。 -- 有趣且引人入勝的故事，帶你穿越時空！ +- 課程涵蓋由基礎到 RAG 等所有內容。 +- 利用生成式 AI 同我哋嘅伴侶應用同歷史人物互動。 +- 好玩同投入嘅故事，會令你穿越時空！ ![character](../../translated_images/zh-MO/character.5c0dd8e067ffd693.webp) +每堂課包括作業、知識檢測同挑戰，引導你學習： +- 提示與提示工程 +- 文字同圖片應用開發 +- 搜尋應用 -每堂課含作業、知識檢查及挑戰，幫助你學習： -- 提示語及提示工程 -- 文字和圖像應用程式生成 -- 搜尋應用程式 - -造訪 [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](for-teachers.md) 中提供了一些使用本課程綱要的建議。歡迎於我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)分享回饋！ +> **教師們**，我哋有 [包括建議](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/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課開始前先做預習測驗，再閱讀課程內容、完成各種活動，並用課後測驗檢查理解。 -為提升學習體驗，建議你與同學一同合作專案！鼓勵在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)進行討論，我們的管理團隊會隨時協助回答你的問題。 +為促進學習，鼓勵你與同儕一齊完成項目！歡迎你喺我哋嘅[討論區](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) 的補充學習資源。 +若要進一步學習，我哋強烈建議瀏覽 [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 帳戶中建立一份本課程綱要的複本。 +#### 建立你自己的儲存庫 +為方便儲存工作，建議你建立自己嘅儲存庫複本。點擊頁面頂部嘅 **使用此範本（Use this template）** 按鈕，即可在你的 GitHub 帳戶中創建套用課程嘅新儲存庫。 -步驟如下： -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 執行課程綱要 +#### 喺 Codespace 執行課程 -於你建立的倉庫複本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為你建立一個新的 Codespace 以供使用。 +喺你創建嘅儲存庫複本中，點選 **Code** 按鈕，揀選 **Open with Codespaces**。會建立一個新嘅 Codespace 俾你使用。 ![Codespace](../../translated_images/zh-MO/createcodespace.0238bbf4d7a8d955.webp) -#### 在電腦本機執行課程綱要 +#### 喺本地電腦運行課程 -要在本機執行此課程，需準備文字編輯器、瀏覽器及指令工具。首課 [程式語言與開發工具簡介](../../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)下載。 - -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。 +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)，並執行以下指令，將 `` 替換成您剛剛複製的 URL： + + 然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下指令，將 `` 換成你剛才複製的 URL： ```bash git clone ``` -2. 在 Visual Studio Code 裡開啟資料夾。您可以點擊 **檔案** > **開啟資料夾**，然後選擇剛剛克隆的資料夾。 +2. 在 Visual Studio Code 開啟資料夾。你可以點擊 **File** > **Open Folder**，然後選擇你剛剛克隆的資料夾。 -> 推薦的 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/](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 基礎 | 陣列與迴圈 | 使用陣列和迴圈處理資料 | [陣列與迴圈](./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 以及本地儲存變數 | 在瀏覽器擴充元件中加入呼叫 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) | 進階遊戲開發：繼承與發布訂閱模式 | 介紹繼承 (繼承類別與組合) 及 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 | [瀏覽器/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/) 取得，Quiz 應用程式可本地執行或部署到 Azure；請依照 `quiz-app` 資料夾中的指示操作。 + +## 🗃️ 課程清單 + +| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Getting Started | 程式設計與工具入門 | 了解多數程式語言的基本原理與協助專業開發者工作的軟體 | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Getting Started | GitHub 基礎與團隊合作 | 如何在專案中使用 GitHub，以及如何與他人協作管理程式碼 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Getting Started | 無障礙設計 | 學習網頁無障礙設計基礎 | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basics | JavaScript 資料類型 | JavaScript 資料類型基礎 | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basics | 函數與方法 | 學習如何以函數與方法管理應用程式流程 | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | +| 06 | JS Basics | 使用 JS 做決策 | 學習如何在程式碼中使用條件判斷 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basics | 陣列與迴圈 | 使用陣列與迴圈操作資料 | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建構打造線上生態缸的 HTML，重點在建置版面 | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 製作 CSS 為線上生態缸套用樣式，重點是 CSS 基礎與響應式設計 | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 使用 JavaScript 實現拖放介面，著重閉包與 DOM 操作 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | 打字遊戲製作 | 學習如何使用鍵盤事件驅動 JavaScript 應用邏輯 | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器運作原理 | 了解瀏覽器運作及歷史，並構建基本的瀏覽器擴充功能元件 | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 建立表單、呼叫 API 及本地儲存變數 | 製作瀏覽器擴充的 JavaScript 元件，使用本地儲存的變數呼叫 API | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器的背景程序與網頁效能 | 使用瀏覽器背景程序管理擴充圖示；學習網頁效能與優化方法 | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | 進階遊戲開發：JavaScript 繼承與設計模式 | 學習使用 Classes 和 Composition 以及 Pub/Sub 模式，為製作遊戲做準備 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | 畫布繪圖 | 了解 Canvas API，如何繪圖顯示元素 | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | 元素移動與動畫 | 探索如何用笛卡兒座標與 Canvas API 讓元件動起來 | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 使元素碰撞並以按鍵事件反應彼此，並提供冷卻功能以維持遊戲效能 | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | 計分 | 根據遊戲狀態進行數學計算與分數統計 | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | 結束與重新開始遊戲 | 了解遊戲結束與重啟，包括資源清理與變數重置 | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | 網頁應用 HTML 模板與路由 | 學習如何運用路由與 HTML 模板建構多頁網站架構 | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | 製作登入與註冊表單 | 學習製作表單與處理驗證流程 | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | 資料抓取與使用方法 | 資料在應用程式的流入與流出，如何抓取、儲存與釋放 | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 了解應用程式如何保留狀態並程式化管理 | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode 編輯器 | 學習如何使用程式碼編輯器| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | 使用人工智慧 | 學習如何打造自己的 AI 助理 | [AI Assistant project](./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 上的 [Learn Path](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 基礎入門課程，搭配來自 “[Beginners Series to: 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：《[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/#/) 離線瀏覽本文件。先 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)找到。 ## 🎒 其他課程 -我哋團隊亦有出其他課程！睇睇： + +我們團隊還製作其他課程！快來看看： ### LangChain @@ -245,23 +255,23 @@ [![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) -## 尋求幫助 +## 尋求協助 -如果您遇到困難或者對開發 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) -## 版權聲明 +## 授權 -本儲存庫採用 MIT 許可授權。詳情請參閱 [LICENSE](../../LICENSE) 檔案。 +本儲存庫採用 MIT 授權。詳細資訊請參閱 [LICENSE](../../LICENSE) 檔案。 --- -**免責聲明**： -本文件係經由人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。雖然我哋致力追求準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。本公司不對因使用本翻譯而引致之任何誤解或誤釋負責。 +**免責聲明**： +本文件係使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能存在錯誤或不準確之處。原始語言的文件應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而引起的任何誤解或錯誤解釋承擔責任。 \ No newline at end of file diff --git a/translations/zh-TW/.co-op-translator.json b/translations/zh-TW/.co-op-translator.json index 5dbb7e81f..922ab1201 100644 --- a/translations/zh-TW/.co-op-translator.json +++ b/translations/zh-TW/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T14:23:14+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T18:05:21+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "zh-TW" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T16:24:11+00:00", + "translation_date": "2026-03-06T18:08:50+00:00", "source_file": "AGENTS.md", "language_code": "zh-TW" }, @@ -516,8 +516,8 @@ "language_code": "zh-TW" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T16:19:00+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T18:01:09+00:00", "source_file": "README.md", "language_code": "zh-TW" }, diff --git a/translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5bc0d3cab..d3e9fbb96 100644 --- a/translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh-TW/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ -# 程式語言與現代開發者工具介紹 - -嗨，未來的開發者！👋 可以跟你說一件每天都讓我熱血沸騰的事情嗎？你將會發現程式設計不只是關於電腦，而是擁有真正超能力，把你最狂野的想法變成現實！ +# 程式語言與現代開發工具入門 -你知道那種使用你最喜歡的應用程式，畫面跟操作都剛剛好的時刻嗎？當你點一下按鈕，發生了某種完全神奇的事情，讓你忍不住想說「哇，他們到底是怎麼做到的？」那就是跟你一樣的人，可能凌晨兩點坐在他們最愛的咖啡店，喝著第三杯濃縮咖啡，寫下那段創造魔法的程式碼。而且，這裡要讓你大吃一驚的是：課程結束時，你不只會理解他們怎麼做到的，還會迫不及待想自己試試看！ +嗨，未來的開發者！👋 我能告訴你一件每天都讓我感到興奮的事情嗎？你即將發現，程式設計不只是關於電腦 —— 它是擁有真正超能力，將你最狂野的創意變為現實的能力！ -我完全理解現在如果覺得程式設計有點可怕。剛開始學時，我真的以為必須是數學天才，或者從五歲就開始寫程式。但真正改變我想法的是：程式設計就像學習用新語言聊天。你先學「你好」和「謝謝」，接著學會點咖啡，然後突然就能討論哲學了！不過這次，對象是電腦，老實說，它們是你見過最有耐心的聊天夥伴—從不批評你的錯誤，還總是樂於再試一次！ +你知道當你使用你最喜歡的應用程式時，一切完美契合的那一刻嗎？當你點擊一個按鈕，發生了某種絕對神奇的事情，讓你忍不住說「哇，他們到底是怎麼做到的？」那麼，正是像你一樣的人 —— 可能半夜兩點坐在他們最愛的咖啡店，喝著第三杯濃縮咖啡 —— 寫出了創造那份魔法的程式碼。接下來要讓你震驚的是：到本課程結束時，你不僅會了解他們如何做到，還會迫不及待想自己試試看！ -今天，我們要探討一些令人驚嘆的工具，讓現代網頁開發不僅可能且讓人上癮。我說的正是Netflix、Spotify以及你最愛的獨立應用工作室每天使用的編輯器、瀏覽器和工作流程。這裡最酷的部分是：大多數這些專業級、業界標準的工具完全免費！ +聽著，如果程式設計現在感覺令人生畏，我完全理解。當我剛開始時，我真的以為你得是那種數學天才，或是從五歲開始寫程式的人。但有件事徹底改變了我的觀點：程式設計就像學會用一種新語言交談一樣。你先學「你好」和「謝謝」，接著學點單咖啡，不久後你就在進行深度哲學討論！只不過這次，你是在跟電腦交談，說真的？它們是你能遇過最有耐心的對話夥伴 —— 從不批評你的錯誤，並且總是樂於重試！ + +今天，我們要探索那些讓現代網頁開發不只是可能而且令人上癮的神奇工具。我說的是Netflix、Spotify，以及你最愛的獨立應用工作室每天都在使用的編輯器、瀏覽器和工作流程。而接下來會讓你跳起來歡呼的是：這些專業級、業界標準的工具大多完全免費！ ![Intro Programming](../../../../translated_images/zh-TW/webdev101-programming.d6e3f98e61ac4bff.webp) -> 筆記圖由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 +> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid journey @@ -19,8 +19,8 @@ journey 程式語言: 4: You 工具概覽: 5: You section 探索 - 程式碼編輯器: 4: You - 瀏覽器與開發工具: 5: You + 程式編輯器: 4: You + 瀏覽器與開發者工具: 5: You 命令列: 3: You section 練習 語言偵探: 4: You @@ -29,68 +29,67 @@ journey ``` ## 讓我們看看你已經知道什麼！ -在進入精彩的內容前，我很好奇—你對這個程式設計世界已經知道什麼呢？而且聽我說，如果你看到這些問題覺得「我完全不懂」，這不只沒問題，還非常完美！這代表你就在正確的地方。把這個測驗當作運動前的暖身而已—我們只是在熱身大腦肌肉！ - -[參加課前測驗](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +在我們跳入有趣的內容前，我很好奇 —— 你對這個程式設計世界已有多少了解？而且聽著，如果你看著這些問題想「我根本一點頭緒都沒有」，這不只沒問題，簡直完美！這代表你在正確的地方。把這個小考當作運動前的暖身 —— 我們只是要喚醒那顆大腦的肌肉！ +[參加前置測驗](https://ff-quizzes.netlify.app/web/) ## 我們即將一起展開的冒險 -好啦，我真的超興奮要跟你一起探索今天的內容！說真的，我真希望能看到你的表情，當某些概念突然明白時，那種感覺。以下是我們一起踏上的精彩旅程： +好吧，我真的因為我們今天要探索的內容激動得跳腳了！說真的，我真希望我能看到你當某些概念突然理解時的表情。這是我們將一起踏上的精彩旅程： -- **甚麼是程式設計（以及為什麼它超酷！）**— 我們會發現程式碼其實就是看不見的魔法，驅動你周圍的一切，從某個鬧鐘突然知道是週一早晨，到推薦你最完美的Netflix節目演算法 -- **程式語言及其令人驚豔的個性**— 想像你參加一場派對，每個人都有截然不同的超能力和解決問題的方法。這就是程式語言世界的樣子，你會愛上認識它們！ -- **促成數位魔法的基本建構塊**— 把這些當作終極創意樂高組合。當你理解這些積木怎麼拼合，就會發現你真的能打造出任何你想像得到的東西 -- **專業工具讓你感覺像拿到魔法師的魔杖**— 我不是在誇張，這些工具真的會讓你感覺擁有超能力，而最棒的是，它們就是專業人士每天使用的！ +- **什麼是程式設計（以及為什麼它是最酷的東西！）** —— 我們將發現程式碼就是無形的魔法，驅動著你周圍的一切，從那個神秘辨識星期一早晨的鬧鐘，到完美為你推薦Netflix影片的演算法 +- **程式語言及其驚人的個性** —— 想像你走進一個派對，每個人都有完全不同的超能力和解決問題的方式。程式語言世界正是如此，你會愛上認識它們！ +- **構成數位魔法的基本積木** —— 把這些看作終極創意積木組。了解這些積木如何組合後，你會發現你能構建出任何你想像的東西 +- **專業工具讓你感覺像拿到巫師魔杖** —— 我不是誇張 —— 這些工具真的會讓你感覺自己有超能力，而最好的是？它們也是專業人士使用的同一套！ -> 💡 **重點是**：別想著今天要全部記住！現在我只想讓你感受到這個領域的無限可能。細節會隨著我們一起練習自然吸收—這才是真正的學習！ +> 💡 **重點是**：今天別想著要記住所有東西！現在，我只是想讓你感受到可能帶來的那股興奮。細節會隨著我們一起練習自然留下 —— 這才是真正的學習方式！ -> 你也可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上學習這堂課！ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上完成這堂課！ -## 那麼，什麼是程式設計？ +## 那麼，什麼才是*程式設計*呢？ -好，讓我們來解決這個百萬美元問題：到底什麼是程式設計？ +好，讓我們解答這個價值百萬美元的問題：程式設計，到底是什麼？ -我來說一個徹底改變我想法的故事。上週，我試著教媽媽如何使用我們的新智慧電視遙控器。結果我發現自己一直說：「按紅色按鈕，不是大紅色，是左邊小紅色…不，不，是你的另一個左邊…好，現在按住兩秒，不是一秒，也不是三秒…」聽過這種情況嗎？😅 +我給你一個徹底改變我對這件事看法的故事。上週，我試著向我媽媽說明如何使用我們的新智慧電視遙控器。我發現自己會說：「按紅色按鈕，不是大紅色，是左邊的小紅色……不，不是那邊是你的另外一隻左手……好，現在按住兩秒，不是一秒，也不是三秒……」聽起來熟悉嗎？😅 -這就是程式設計！它是給出超級詳盡、逐步指令的藝術，目標是讓一個非常強大卻需要每個步驟都表達清楚的對象理解。可不同的是，你不是跟媽媽講（媽媽還能問「哪個紅色按鈕？！」），而是跟電腦講（它完全照你說的做，哪怕你說得不完全是你想表達的意思）。 +這就是程式設計！它是給一個非常強大但需要完全明確指令的東西，極其詳細且循序漸進的教學藝術。只不過你不是在跟你的媽媽說（她還能問「哪個紅色按鈕？！」），而是在跟電腦說（電腦只會依照你說的做，哪怕你說的不是你本意）。 -當我第一次了解這件事時讓我驚訝的是：電腦其實在本質上相當簡單。它們真的只懂兩個東西—1和0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇就在這裡—我們不用像電影《駭客任務》那樣，一直講1和0。這時候，**程式語言**跳出來救場。它們就像全世界最棒的翻譯員，能把你人類思考過程的語言完美轉換成電腦懂的語言。 +當我第一次學這個時，有件事讓我震驚：電腦其實核心相當簡單。它們只懂兩種東西 —— 1 和 0，基本上就是「是」和「否」或者「開」和「關」。就這樣！但接下來的魔法是 —— 我們不需要像在《駭客任務》裡那樣只用 1 和 0 來說話。這就是**程式語言**出場的時刻。它們像是世界上最棒的翻譯員，將你完全正常的人類思緒轉換成電腦語言。 -更讓我每天早上起床還雞皮疙瘩的是：你生活中所有的數位東西，都是從跟你一樣的人開始的，那些人可能穿著睡衣、手握咖啡，坐在電腦前敲程式碼。那個讓你看起來完美無瑕的Instagram濾鏡？有人寫的。讓你找到新歌的推薦演算法？也是有人寫的。幫助你跟朋友分帳的應用程式？沒錯，就是有人想著「太麻煩了，我肯定能改變它」，然後就真的做到了！ +而每天早上醒來仍讓我起雞皮疙瘩的是：你生活中所有數位事物，都是從跟你一樣的人開始，可能穿著睡衣，一杯咖啡在手，打著程式碼。那個讓你看起來完美無瑕的 Instagram 濾鏡？有人寫了那段程式。讓你找到新愛歌推薦的演算法？開發者打造的。幫你跟朋友分帳的應用程式？沒錯，有人想「這太煩了，我可以改善它」，於是……他們做到了！ -當你學會程式設計，你不只是學到一項新技能—你成為一群不可思議的問題解決者社群一部份，他們每天都在想：「如果我能打造一個讓別人日子更好一點的東西該多好？」說真的，有比這更酷的事嗎？ +當你學會寫程式，你不只是學了一項新技能 —— 你成為一群令人敬佩的問題解決者的一份子，他們每天都在思考：「如果我能造出點什麼讓別人生活更好一點怎麼辦？」說真的，還有什麼比這更酷的嗎？ -✅ **趣味知識獵人**：有空的時候，試著查查世界上第一位電腦程式設計師是誰？給你個提示：可能不是你期待的那個人！這個人的故事非常吸引人，也說明程式設計一直是關於創意解決問題和跳脫框架的思考。 +✅ **有趣的小尋寶**：有空時查查這個超酷的故事 —— 你覺得世界上第一位電腦程式設計師是誰？給你一個提示：可能不是你想像的那位！他/她的故事相當精彩，證明了編程一直是關於創意思考與跳脫框架。 -### 🧠 **檢查時間：你感覺如何？** +### 🧠 **檢視時刻：你感覺如何？** -**花點時間反思：** -- 「對電腦下指令」這個想法，你現在懂了嗎？ -- 你能想到哪些日常任務可以用程式自動化嗎？ -- 有哪些問題讓你對整個程式設計有更多好奇？ +**花點時間想想：** +- 「給電腦下指令」的想法現在對你有意義嗎？ +- 你是否想到日常工作中有想自動化的？ +- 對程式設計整體，你腦海中浮現了什麼問題？ -> **記住**：現在如果有些概念還模糊，是完全正常的。學程式就像學語言—大腦需要時間建構神經連結，你做得非常棒！ +> **記得**：一開始如果有些概念感到模糊是完全正常的。學程式就像學新語言 —— 大腦建立神經迴路需要時間。你做得很好！ -## 程式語言就像不同的魔法風格 +## 程式語言就像不同風味的魔法 -好，這聽起來有點怪，但請跟我一起想—程式語言很像不同種類的音樂。想想看：你有爵士，柔和且即興；搖滾，強而有力且直接；古典，優雅且結構完整；還有嘻哈，創意且表達力強。每種風格都有它的氛圍和熱情粉絲社群，並且適合不同心情與場合。 +好，這可能聽起來怪，但請撐著聽我說 —— 程式語言很像不同類型的音樂。想想看：你有爵士樂，風格流暢且即興，搖滾強烈直接，古典優雅嚴謹，嘻哈創意且富表現力。每種風格都有自己的氛圍、熱愛者社群，而且適合不同心情與場合。 -程式語言也是如此！你不會用同一種語言去寫一款有趣的手機遊戲，又用它來處理大量氣候資料，就像你不會在瑜珈課放死亡金屬音樂一樣（嗯，大多數瑜珈課啦😄）。 +程式語言也是同理！你不會用同一種語言寫休閒手機遊戲，卻用那語言分析大量氣候資料；就像你不會在瑜珈課放死亡金屬（嗯，多數瑜珈課啦！😄）。 -但每次想到這點，我都覺得超神奇：這些語言就像世界上最有耐心且聰明的翻譯官坐在你旁邊。你可以用自然的人類思維表達想法，它們負責處理複雜的轉換，把它變成電腦聽得懂的1和0。就像有個朋友，兩種語言都流利—「人類創意」與「電腦邏輯」—而且永遠不會累、永遠不需要咖啡休息，也不會因為你問同個問題兩次而生氣！ +但每次想起這點都讓我很震撼：這些語言就像坐在你旁邊的最有耐心且聰明的翻譯官。你用自然的人類思維表達想法，他們負責將其翻譯成電腦說的 1 和 0。就像一個既通曉「人類創意」又精通「電腦邏輯」的朋友 —— 他永不疲倦、不喝咖啡提神，也不會因為你問同一問題兩次而生氣！ -### 受歡迎的程式語言及用途 +### 流行的程式語言及用途 ```mermaid mindmap root((程式語言)) - 網頁開發 + Web 開發 JavaScript 前端魔法 互動式網站 TypeScript - JavaScript + 類型 + JavaScript + 型別 企業應用 資料與人工智慧 Python @@ -113,47 +112,47 @@ mindmap 系統與效能 C++ 遊戲 - 高效能關鍵 + 效能關鍵 Rust 記憶體安全 系統程式設計 Go 雲端服務 - 可擴充後端 + 可擴展後端 ``` -| 語言 | 最適合 | 為什麼受歡迎 | +| 語言 | 最適合 | 為何受歡迎 | |----------|----------|------------------| -| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器中執行，推動互動式網站 | -| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，強大函式庫支援 | -| **Java** | 企業應用、Android 應用程式 | 跨平台，適合大型系統 | -| **C#** | Windows 應用、遊戲開發 | 微軟生態系強大支援 | -| **Go** | 雲端服務、後端系統 | 快速簡潔，專為現代運算設計 | +| **JavaScript** | 網頁開發、使用者介面 | 可於瀏覽器執行，驅動互動網站 | +| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，強大函式庫支持 | +| **Java** | 企業應用、Android應用 | 跨平台，大型系統穩健 | +| **C#** | Windows應用、遊戲開發 | 強大微軟生態系支持 | +| **Go** | 雲端服務、後端系統 | 快速、簡潔，為現代運算設計 | -### 高階語言 vs 低階語言 +### 高階語言 vs. 低階語言 -說真的，這一點剛開始學時讓我一度崩潰，所以我想分享一個讓我終於理解的比喻—希望你也覺得有用！ +說實話，這個概念一開始真的讓我頭腦短路，所以我要分享讓我頓悟的類比 —— 我希望你也能有同感！ -想像你去了一個不會說當地語言的國家，急著找最近的廁所（我們都經歷過吧😅）： +想像你到一個不會講當地語言的國家，急需找最近的洗手間（我們都有過這種經驗，對吧？😅）： -- **低階程式設計**就像你學會當地方言，能用文化引喻、當地俚語和只有本地人懂的暗號跟街角賣水果的老太太聊天。超厲害且效率超高...如果你真精通的話！但要是你只是想找廁所，可能會覺得超困難。 +- **低階程式設計** 就像學會當地方言，能跟角落賣水果的阿嬤用文化暗示、本地俚語和只有本地人成長才懂的笑話熱絡交談。非常厲害且高效率……如果你流利的話！但當你只想找廁所時，會相當崩潰。 -- **高階程式設計**就像你有個超棒的當地朋友懂你。你只要用簡單英文說「我需要找廁所」，然後他幫你用當地語言翻譯，還給你清楚的指引，簡單又明瞭。 +- **高階程式設計** 就像有個超棒的當地朋友懂你心思。你用簡單英語說「我真的想找洗手間」時，他們會處理所有文化差異，並用你理解的方式指路。 -用程式語言來說： -- **低階語言**（像是組合語言或 C 語言）可以讓你跟電腦硬體非常細節化溝通，但你必須像機器一樣思考，那是個巨大的心智轉換！ -- **高階語言**（像 JavaScript、Python 或 C#）讓你用人類思維講話，背後處理所有機器語言轉換。而且它們的社群非常歡迎新手，大家都記得自己剛開始時的感受，且真心想幫忙！ +換成程式語言術語： +- **低階語言**（像是組合語言或C）讓你能跟電腦硬體細緻對話，但你得以機器思考，嗯……這代表得大翻轉你的腦袋！ +- **高階語言**（像 JavaScript、Python 或 C#）讓你用人類思維，幕後它們替你翻譯成機器語言。此外，它們擁有超熱情的社群，裡面充滿了解當新手是怎麼一回事、且真心想幫助的人！ -猜猜我會建議你從哪邊開始？😉 高階語言就像有輔助輪的腳踏車，雖然你有時會想砍掉它，但其實它讓整個過程更愉快！ +猜我建議你從哪個開始？😉 高階語言就像訓練輪，你可能一輩子都不想拆掉，因為它們讓整個過程更愉快！ ```mermaid flowchart TB - A["👤 人類思考：
'我想計算費氏數列'"] --> B{選擇語言層級} + A["👤 人類思考：
'我想計算費氏數列'"] --> B{選擇程式語言層級} - B -->|高層| C["🌟 JavaScript/Python
易讀易寫"] - B -->|低層| D["⚙️ 組合語言/C
直接硬體控制"] + B -->|高階| C["🌟 JavaScript/Python
易於閱讀與撰寫"] + B -->|低階| D["⚙️ 組合語言/C
直接控制硬體"] - C --> E["📝 編寫：fibonacci(10)"] - D --> F["📝 編寫：mov r0,#00
sub r0,r0,#01"] + C --> E["📝 撰寫：fibonacci(10)"] + D --> F["📝 撰寫：mov r0,#00
sub r0,r0,#01"] E --> G["🤖 電腦理解：
翻譯器處理複雜性"] F --> G @@ -164,18 +163,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### 讓我向你展示為什麼高階語言更友善 +### 讓我示範為什麼高階語言更親切 -好，我要給你看一個完美展示我為什麼愛上高階語言的範例，但首先—請答應我，不要看到第一個程式碼例子就慌張！它故意看起來很嚇人，這就是我要說的重點！ +好，我即將示範一個完美展示我為何愛上高階語言的範例，但首先 —— 請你答應我一件事。當你看到第一個程式碼範例時，不要慌！它應該看起來有點嚇人。這正是我要說的重點！ -我們將看兩種完全不同風格的程式碼，完成同一個任務：產生費波那契數列—一個美麗的數學模式，每個數字是前兩個數字相加：0, 1, 1, 2, 3, 5, 8, 13...（趣味小知識：你大自然會到處看到這個模式—向日葵籽的螺旋、松果的形狀，甚至星系的形成！） +我們會看到同一個工作用兩種完全不同風格寫成的程式。它們都會產生所謂的費波那契數列 —— 這是個漂亮的數學模式，每個數字都是前兩個數字的和：0、1、1、2、3、5、8、13……（趣味知識：你會在自然界中看到這個數列 —— 葵花子螺旋、松果紋理，甚至星系形成都用得到！） -準備好看差異了嗎？走吧！ +準備好看差異了嗎？出發！ -**高階語言（JavaScript）—人類友善版：** +**高階語言（JavaScript）— 友善人類：** ```javascript -// 第一步：基本費波那契設置 +// 第一步：基本的費波那契設置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -184,13 +183,13 @@ console.log('Fibonacci sequence:'); ``` **這段程式碼做了什麼：** -- **宣告**一個常數，指定要產生多少個費波那契數 -- **初始化**兩個變數，追蹤數列中目前和下一個數字 -- **設定**起始值（0 和 1），定義費波那契模式 -- **顯示**標題訊息，說明輸出內容 +- **宣告** 一個常數指定我們想要產生多少個費波那契數 +- **初始化** 兩個變數用來追蹤序列中的當前與下一個數字 +- **設定** 開始值 (0 與 1) 定義費波那契模式 +- **顯示** 標題訊息，以辨識輸出結果 ```javascript -// 步驟 2：使用迴圈產生序列 +// 步驟 2：使用迴圈生成序列 for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,14 +200,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**解析這裡發生的事：** -- **用 `for` 迴圈**依序走訪數列各位置 -- **顯示**每個數字及其位置，使用模板字串格式化 -- **計算**下一個費波那契數字，將目前與下一個相加 -- **更新**追蹤變數，移動到下一次迭代 +**解析過程：** +- **用 `for` 迴圈** 遍歷序列中的每個位置 +- **用範本字串** 顯示每個數字與其位置 +- **計算** 下個費波那契數字 = 當前數字 + 下一個數字 +- **更新** 追蹤變數以進入下一輪迭代 ```javascript -// 第三步：現代函式式方法 +// 第3步：現代函數式方法 const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -224,13 +223,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**這上面程式碼，我們：** -- **使用**現代箭頭函式語法，創建可重複使用的函式 -- **建立**陣列來存完整數列，而不是一個個顯示 -- **用**陣列索引計算每個新數字 -- **回傳**完整數列，方便程式其他部分使用 +**以上範例中，我們：** +- **用現代箭頭函數語法創建** 可重用函數 +- **建立** 陣列來儲存完整數列，而非一個個顯示 +- **透過陣列索引** 從之前的值計算每個新數字 +- **回傳** 完整序列，方便程式其他部分靈活使用 -**低階語言（ARM 組合語言）—電腦友善版：** +**低階語言（ARM組合語言）— 電腦友善：** ```assembly area ascen,code,readonly @@ -257,28 +256,28 @@ back add r0,r1 end ``` -注意 JavaScript 版幾乎像英文指令，而組合語言版是直接控制電腦處理器的神秘指令。兩者完成同樣任務，但高階語言對人而言更容易理解、撰寫與維護。 +注意 JavaScript 版本讀起來幾乎像英文指令，但組合語言版本使用隱晦的命令直接操控電腦處理器。兩者達成完全相同的任務，但高階語言對人類來說更容易理解、撰寫和維護。 -**你會注意到的關鍵差異：** -- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣描述性的名稱，而組合語言用像 `r0`、`r1` 的代號 -- **註解**：高階語言鼓勵撰寫說明性註解，使程式碼具備自我說明能力 -- **結構**：JavaScript 的邏輯流程符合人類逐步思考問題的方式 -- **維護**：針對不同需求更新 JavaScript 版本簡單明瞭 +**你會發現的關鍵差異：** +- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣具描述性的名稱，而 Assembly 則使用像 `r0`、`r1` 這種晦澀的標籤 +- **註解**：高階語言鼓勵加上說明性的註解，使程式碼自我說明 +- **結構**：JavaScript 的邏輯流程符合人類思考問題的步驟 +- **維護**：針對不同需求更新 JavaScript 版本簡單明瞭 -✅ **關於費波那契數列**：這個絕美的數字模式（每個數字等於之前兩個數字的和：0、1、1、2、3、5、8...）在自然界中隨處可見！你會發現在向日葵的螺旋花序、松果的排列、鸚鵡螺的殼形曲線，甚至是樹枝的生長方式中都有它。數學與程式碼怎麼能幫助我們理解並重現大自然用於創造美麗的模式，實在令人讚嘆！ +✅ **關於費波那契數列**：這個絕美的數字模式（每個數字是前兩數的和：0、1、1、2、3、5、8……）在大自然中幾乎無處不在！你可以在向日葵的螺旋狀、松果的圖案、鹦鹉螺的曲線，甚至在樹枝的生長方式中找到它。數學和程式碼如何幫助我們理解並重新創造自然創造美的模式，真是令人驚嘆！ -## 造就魔法的基礎構件 +## 造就奇蹟的構件 -好了，現在你已經看過程式語言的實際運作，讓我們來拆解組成每一個程式的基本單元。把它們想像成你最愛食譜中必不可少的材料 — 一旦理解每個材料的作用，你就能閱讀與撰寫幾乎任何語言的程式碼！ +好，現在你已經見識過程式語言的運作方式，讓我們拆解組成每個程式的基礎零件。可把它們想成你最愛食譜中的必備材料——只要你了解每個材料的用途，就能閱讀並撰寫幾乎任何語言的程式碼！ -這有點像是在學習程式設計的文法。還記得你小時候學名詞、動詞以及如何組句子嗎？程式設計有自己的語法，老實說，它比英語文法更合邏輯也更寬容！😄 +這有點像學習程式的文法。還記得學校裡學過名詞、動詞和句子結構嗎？程式有它自己的文法，而且說真的，比英文文法還要合邏輯且寬容得多！😄 -### 陳述句：逐步指令 +### 陳述句（Statements）：一步步的指令 -先從**陳述句**開始 — 它們就像你與電腦之間交流的句子。每條陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」，「停到那個車位」。 +先從 **陳述句** 講起，陳述句就像和電腦對話的句子。每個陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」、「停在那個車位」。 -我喜歡陳述句之處在於它通常非常易讀。看這個： +我喜歡陳述句的地方是它們通常非常易讀。看這裡： ```javascript // 執行單一動作的基本敘述 @@ -287,10 +286,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**這段程式碼做了什麼：** -- **宣告**一個以儲存使用者姓名的常數變數 -- **顯示**一條問候訊息到主控台輸出 -- **計算**並儲存一個數學運算結果 +**這段代碼做了什麼：** +- **宣告**一個常數變數用來存使用者姓名 +- **顯示**一則問候訊息在控制台輸出 +- **計算**並儲存數學運算的結果 ```javascript // 與網頁互動的語句 @@ -298,19 +297,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**逐步來看，發生了什麼：** -- **修改**網頁標題（瀏覽器分頁上顯示） -- **變更**整個網頁主體的背景顏色 +**一步步發生了什麼：** +- **修改**瀏覽器標籤頁中顯示的網頁標題 +- **更改**整個網頁主體的背景色 -### 變數：程式的記憶系統 +### 變數（Variables）：程式的記憶系統 -好啦，**變數**老實說是我最喜歡教的概念之一，因為它們很像你每天都用到的東西！ +真的，**變數** 是我最喜歡教的概念之一，因為它們很像你每天都在用的東西！ -想想你手機的聯絡人列表。你不會背起每個電話號碼，而是儲存「媽媽」、「摯友」，或「凌晨兩點還送餐的披薩店」，讓手機幫你記住真正的號碼。變數也是如此！它們像有標籤的容器，你的程式可以塞進資訊，並用有意義的名稱隨時取出。 +想想你的手機通訊錄。你不記住每個電話號碼，而是存「媽媽」、「好朋友」或「營業到凌晨兩點的披薩店」，手機幫你記住真正的號碼。變數就是這樣！它們像帶標籤的容器，你的程式可以存資訊，然後用有意義的名字取回。 -更酷的是：變數可以隨程式運行改變（這就是「變數」名稱的由來 — 你懂的！）。就像你發現更好吃的披薩店會更新聯絡資訊一樣，變數也能隨程式學習新資訊或情況改變而更新！ +最酷的是：變數在程式執行時可以變化（所以叫變數嘛～）。就像你會更新披薩店的聯絡方式，變數也能隨著程式獲得新資訊或情況改變而更新！ -讓我示範它有多簡單美妙： +看這例子，超簡單而美妙： ```javascript // 第一步：建立基本變數 @@ -321,13 +320,13 @@ let isRaining = false; ``` **理解這些概念：** -- **儲存**不變的值於 `const` 變數（例如網站名稱） -- **使用** `let` 來存放會變動的值 -- **指派**不同資料型別：字串（文字）、數字、布林值（true/false） -- **選擇**具描述性的名稱解釋變數內容 +- **使用** `const` 儲存不會變的值（例如網站名稱） +- **使用** `let` 儲存程序中可能改變的值 +- **指派**不同資料型態：字串（文字）、數字、布林值（true/false） +- **挑選**清楚描述變數內容的名稱 ```javascript -// 第2步：使用物件來群組相關資料 +// 步驟 2：使用物件來群組相關資料 const weatherData = { location: "San Francisco", humidity: 65, @@ -335,47 +334,47 @@ const weatherData = { }; ``` -**以上我們：** -- **建立**一個物件來整理相關的天氣資訊 -- **把多個資料彙整**到一個變數名稱下 -- **用**鍵值組清楚標記每一筆資料 +**上面的程式碼裡，我們：** +- **建立**一個物件用來整理相關的天氣資訊 +- **用**一個變數名稱組織多組資料 +- **用**鍵值對明確標示每個資訊項目 ```javascript -// 步驟 3：使用及更新變數 +// 第3步：使用和更新變數 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// 更新可變動的變數 +// 更新可變的變數 currentWeather = "cloudy"; temperature = 68; ``` -**來看每個部分：** -- **使用**模板字面量和 `${}` 語法顯示資訊 -- **用**點記法存取物件屬性（`weatherData.windSpeed`） -- **更新**以 `let` 宣告的變數反映變化狀況 -- **結合**多個變數產生有意義的訊息 +**我們來了解各部分：** +- **用**模板字串 `${}` 語法顯示資訊 +- **用**點記號法 (`weatherData.windSpeed`) 讀取物件屬性 +- **更新**使用 `let` 宣告的變數反映變化的條件 +- **結合**多個變數來製造有意義的訊息 ```javascript -// 第4步：現代解構賦值使代碼更清晰 +// 第4步：現代解構賦值，讓程式碼更簡潔 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**你需要知道：** -- **透過解構賦值**擷取物件中特定屬性 -- **自動建立**與物件鍵同名的新變數 -- **簡化**程式碼，避免重复的點記法 +**你需要知道的技巧：** +- **用**解構賦值從物件中取出特定屬性 +- **自動建立**同名的新變數 +- **減少**繁瑣重複使用點記號法的代碼 -### 控制流程：教你的程式思考 +### 控制流程（Control Flow）：教程式思考 -好了，這裡是程式設計最令人驚嘆的部分！**控制流程**基本上是在教你的程式如何做聰明的判斷，就像你每天不假思索地做的事情一樣。 +這裡編程真的開始令人驚艷！**控制流程** 就是教你的程式做出聰明決策，就像你每天不假思索地做的事一樣。 -想像一下：今天早上你可能過程是「如果下雨，我會帶傘；如果冷，我會穿外套；如果要遲到了，我會跳過早餐路上買咖啡」。你的大腦每天自然就按照這種 if-then 邏輯運作數十次！ +想像今天早上你可能想，「如果下雨，我帶傘；如果冷，我穿外套；如果快遲到了，就不吃早餐，路上喝咖啡。」你的大腦每天自然根據這種「如果-那麼」的邏輯運作好幾十次！ -這讓程式感覺聰明、有生命力，不再只是照著無聊、可預測的劇本行事。它們可以觀察情況，評估正在發生的事，並做出合適反應。就像給程式一顆能因應情況做選擇的大腦！ +這讓程式感覺聰明且有活力，而不是死板又無聊。它們真的可以看情況、評估狀況，再做出適當反應。就像給程式一個能適應並做選擇的大腦！ -想看看這有多美妙？讓我示範： +想看看這種神奇怎麼運作？看這個： ```javascript // 第一步：基本條件邏輯 @@ -389,14 +388,14 @@ if (userAge >= 18) { } ``` -**程式碼做了什麼：** -- **檢查**使用者的年齡是否符合投票資格 -- **依條件結果**執行不同程式區塊 -- **計算並顯示**未滿18歲還需多久才可投票 -- **提供**針對每種情況的具體有用回饋 +**這段代碼做了什麼：** +- **檢查**使用者是否達到投票年齡 +- **依條件執行**不同程式區塊 +- **算出**若未滿 18 歲需多久才能投票並顯示 +- **針對每種情況**給出明確且有用的回饋 ```javascript -// 步驟2：多個條件與邏輯運算子 +// 步驟 2：使用邏輯運算子的多重條件 const userAge = 17; const hasPermission = true; @@ -409,22 +408,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**拆解過程：** -- **用 `&&`（且）運算符**組合多重條件 -- **用 `else if`**建立多層條件判斷架構 -- **用最後 `else`**涵蓋所有可能情況 -- **提供**每種不同狀況清楚明確的反饋 +**來拆解一下：** +- **用** `&&`（且）組合多條件 +- **用** `else if` 建立有層次的多條件判斷 +- **用** 最後的 `else` 包攬所有未涵蓋狀況 +- **給予**每種情況清楚且可操作的反饋 ```javascript -// 第三步：使用三元運算子的簡潔條件判斷 +// 步驟3：使用三元運算子的簡潔條件判斷 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**記住：** -- **用三元運算子 (`? :`)**快速處理簡單兩選一條件 -- **先寫判斷式**，接著是 `?`，接著是條件為真時的結果，再來是 `:`，最後是條件為假的結果 -- **適用於根據條件賦值** +**你得記得：** +- **用** 三元運算子 (`? :`) 寫簡單的兩選一條件 +- **語法是**先寫條件、接著 `?`、接著條件為真時結果、然後 `:`、最後條件為假時結果 +- **用於**依條件選擇值時非常好用 ```javascript // 第4步：處理多個特定情況 @@ -447,55 +446,55 @@ switch (dayOfWeek) { } ``` -**這段程式碼完成：** -- **對變數值比對多個特定案例** -- **將相似案例歸類（平日與週末）** -- **找到符合時執行對應程式碼塊** -- **用 `default` 處理不預期的值** -- **用 `break` 防止繼續執行下一案例** +**這段程式實現了：** +- **比對**變數值對應多個具體案例 +- **依案例性質**將相似狀況分組（平日 vs 假日） +- **找到匹配時**執行相對應程式區塊 +- **用** `default` 例外狀況處理未預期的值 +- **用** `break` 結束該案例，避免繼續執行到下一個案例 -> 💡 **現實類比**：想像控制流程就像世界上最有耐心的 GPS 指示路線。它可能說「如果主街塞車，就走高速公路。如果高速公路施工封路，試試風景線路。」程式正是用這種條件邏輯聰明回應不同情況，且永遠給使用者最佳體驗。 +> 💡 **現實生活比喻**：把控制流程想成全球最有耐心的導航，一路指引你：「如果主街交通堵塞，就走高速公路；如果高速公路封路，就改走風景路。」程式也用相同條件邏輯，智慧且靈活回應各種狀況，總是提供使用者最佳體驗。 -### 🎯 **概念檢測：基礎構件掌握** +### 🎯 **概念測驗：基礎構件大考驗** -**來看看你對基礎的掌握：** -- 你能用自己的話解釋變數和陳述句的差別嗎？ -- 想出一個現實生活中會用到 if-then 判斷的例子（像投票例子） -- 有哪些程式邏輯讓你感到驚訝？ +**來看看你吸收得如何：** +- 你能用自己的話解釋變數和陳述句有什麼不同嗎？ +- 想一個生活中的例子會用到 if-then 決策（比如投票例子） +- 程式邏輯中，你發現了什麼讓你驚訝的地方？ -**快速提振信心：** +**快速增強信心：** ```mermaid flowchart LR - A["📝 陳述式
(指令)"] --> B["📦 變數
(儲存)"] --> C["🔀 控制流程
(判斷)"] --> D["🎉 可執行程式!"] + A["📝 陳述
(指令)"] --> B["📦 變數
(儲存)"] --> C["🔀 控制流程
(決策)"] --> D["🎉 運作程式！"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **接下來是什麼**：我們將會非常盡興地深入這些概念，繼續這段奇妙旅程！此刻先專注感受那種對未來無限可能的興奮吧。隨著練習，具體技巧自然會牢牢記住 — 我保證你會比預期還要享受這過程！ +✅ **接下來我們要做什麼**：我們將繼續深入這些概念，一起踏上這個難以置信的學習旅程！現在專注感受前方充滿無限可能的激動吧。具體技能會隨練習自然養成——我保證，比你想像中還要有趣多了！ -## 工具裝備介紹 +## 必備法寶 -老實說，到了這裡我已經興奮到快控制不住了！🚀 我們將談談那些令人讚嘆的工具，讓你感覺像是剛拿到一架數位太空船的鑰匙。 +好啦，說真的，現在我快要興奮到受不了！🚀 我們要談談那些讓你有如獲得數位太空船鑰匙的超讚工具。 -你知道廚師的刀具平衡得恰到好處，好像手臂的延伸嗎？或是音樂家有把只要一彈就唱的吉他？開發者們也有自己版本的魔法工具，而接下來要說的絕對令你瞠目結舌 — 這些大部分全都是免費的！ +你知道廚師有種刀具拿起來就像手的一部分嗎？音樂家有把吉他彈起來就像會唱歌的樂器？開發者也有屬於自己的神奇工具，最讓我覺得不可思議的是——它們大多是完全免費的！ -我幾乎坐立難安想跟你分享，因為這些工具徹底改變了我們建立軟體的方式。像是 AI 助手可以幫忙寫程式碼（不是開玩笑！）、雲端環境讓你能在任何有 Wi-Fi 的地方開發完整應用程式，還有那種進階到像透視眼一樣的除錯工具。 +我坐不住了，想著要跟你分享這些工具，因為它們徹底改變了我們寫軟體的方式。我們談的是能幫你寫程式碼的 AI 助手（真的不是開玩笑！）、只要有 Wi-Fi 就能從任何地方架設應用程式的雲端環境，以及具有 X 光視力般強大除錯工具。 -更令人起雞皮疙瘩的是：這些不是「初學者工具」用膩就丟的喔。這些正是 Google、Netflix、你愛的獨立 App 工作室的開發者現在就正用的專業級工具。你用它們會感覺自己超級專業！ +更刺激的是：這些不是你練習完就不用的「新手工具」。這些就是 Google、Netflix 和你愛的獨立 APP 工作室專業開發者就在用的真槍實彈。用它們你會覺得自己超級專業！ ```mermaid graph TD - A["💡 你的想法"] --> B["⌨️ 程式編輯器
(VS Code)"] - B --> C["🌐 瀏覽器開發工具
(測試與除錯)"] + A["💡 您的想法"] --> B["⌨️ 程式編輯器
(VS Code)"] + B --> C["🌐 瀏覽器開發者工具
(測試與除錯)"] C --> D["⚡ 命令列
(自動化與工具)"] - D --> E["📚 文件
(學習與參考)"] - E --> F["🚀 優秀的網頁應用程式!"] + D --> E["📚 文件資源
(學習與參考)"] + E --> F["🚀 驚人的網頁應用程式!"] B -.-> G["🤖 AI 助手
(GitHub Copilot)"] C -.-> H["📱 裝置測試
(響應式設計)"] - D -.-> I["📦 套件管理器
(npm, yarn)"] + D -.-> I["📦 套件管理工具
(npm, yarn)"] E -.-> J["👥 社群
(Stack Overflow)"] style A fill:#fff59d @@ -505,106 +504,105 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 程式碼編輯器與 IDE：你新的數位最佳夥伴 +### 程式編輯器和 IDE：你新的數位最佳夥伴 -談談程式碼編輯器 — 它們真的會成為你最愛待著的地方！把它們想成你個人的程式創作聖地，你會花大量時間在這裡打造你的數位作品。 +來談談程式編輯器——它們快變成你新歡的打卡聖地！把它想成你個人專屬的程式創作聖殿，絕大多數時間都會在這裡打造與完善數位作品。 -現代編輯器的魔法在於：它們不只是華麗的純文字編輯器。就像有位最聰明、最支持你的程式教練全天候陪你坐在旁邊。它們在你察覺錯誤前就幫你抓出來，給你建議讓你看起來像個天才，幫你理解每段程式碼在做什麼，有些甚至能預測你下一秒想打什麼，主動幫你補全！ +現代編輯器的魔力就在於：它們不只是高級文字編輯器。它們就像有最聰明且支持你的程式導師 24 小時陪伴，錯字還沒出現就幫你抓到，抄捷徑讓你看起來像天才，還幫你理解每段代碼的作用，甚至有的能預測你下一步會打什麼，主動幫你完成！ -我記得第一次發現自動完成時的感覺 — 就像活在未來。你開始打字，編輯器說：「嘿，你是不是想用這個功能，它正好做你需要的事？」彷彿有個讀心術高手當你程式夥伴！ +我還記得第一次用上自動補完時，覺得自己活在未來。一開始打字，編輯器就像在說：「嘿，你是在想用這個函式吧？它剛好能幫你做這件事！」這簡直就是讀心師當程式夥伴！ -**這些編輯器厲害在哪裡？** +**讓編輯器如此厲害的祕密是什麼？** -現代程式碼編輯器提供一系列設計來提升工作效率的功能： +現代程式編輯器擁有豐富功能，大幅提升生產力： -| 功能 | 作用 | 為何有用 | +| 功能 | 它做什麼 | 為什麼有用 | |---------|--------------|--------------| -| **語法高亮** | 為程式碼不同部分上色 | 讓程式碼更易讀、易發現錯誤 | -| **自動完成** | 打字時建議程式碼 | 加快寫程式速度、減少錯字 | -| **除錯工具** | 幫你找出並修正錯誤 | 省下大量問題排查時間 | -| **擴充套件** | 新增專門功能 | 客製化編輯器符合各種技術需求 | -| **AI 助手** | 建議程式碼與解釋 | 加速學習與提升生產力 | - -> 🎥 **影片資源**：想看這些工具實戰嗎？請查看這支[工具裝備介紹影片](https://youtube.com/watch?v=69WJeXGBdxg)獲得完整概覽。 - -#### 推薦網頁開發用編輯器 - -**[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) — 幫你抓拼字錯誤 - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付費，學生免費） -- 進階除錯與測試工具 -- 智慧化程式碼補全 +| **語法高亮** | 用顏色區分程式碼不同部分 | 讓程式碼更容易閱讀與找錯 | +| **自動補完** | 輸入時自動建議代碼 | 加快編程速度並減少錯字 | +| **除錯工具** | 幫你找錯誤並修正 | 省下數小時的除錯時間 | +| **擴充套件** | 加入專業功能 | 依技術需求客製化編輯器 | +| **AI 助手** | 建議程式碼與說明 | 加快學習及提升效率 | + +> 🎥 **影片資源**：想看看這些工具如何運作？觀看這個[工具介紹影片](https://youtube.com/watch?v=69WJeXGBdxg)，有完整的說明！ + +#### 網頁開發推薦編輯器 + +**[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) - 拼字錯誤檢查 + +**[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/) — 立即啟用全端網頁開發 - -> 💡 **初學者建議**：從 Visual Studio Code 開始 — 它免費、產業廣泛使用，加上強大的社群與豐富教學與擴充套件。 +**雲端 IDE**（價格不一） +- [GitHub Codespaces](https://github.com/features/codespaces) - 在瀏覽器裡完整 VS Code +- [Replit](https://replit.com/) - 方便學習和分享程式碼 +- [StackBlitz](https://stackblitz.com/) - 即時全端網頁開發 +> 💡 **入門建議**：從 Visual Studio Code 開始吧——它免費且業界廣泛使用，有龐大社群提供豐富教學與擴充套件。 -### 網頁瀏覽器：你的秘密開發實驗室 +### 網頁瀏覽器：你秘密的開發實驗室 -好了，準備好被徹底震撼吧！你知道你平常用瀏覽器滑社群媒體、看影片？其實它們一直藏著個令人難以置信的祕密開發實驗室，等著你發掘！ +好，準備好被徹底震撼了嗎！你可能一直用瀏覽器滑社群、看影片，沒想到它竟然藏著這座超強祕密開發實驗室，等待你來探索！ -每次你在網頁上右鍵點選「檢查元素」，你就打開了一個隱藏的開發者工具世界，誠實說它比我過去花大錢買的部分軟體還強大。就像發現你平常用的廚房後面藏著一座專業主廚實驗室！ -第一次有人給我看瀏覽器開發者工具 (DevTools) 時，我花了大概三個小時瘋狂點擊，然後驚呼：「等等，這個功能它也有？！」你真的可以即時編輯任何網站，精準看到載入速度，測試網站在不同裝置上的呈現，甚至像專家一樣除錯 JavaScript。這真的超神奇！ +每次你在網頁上右鍵點選「檢查」元素，就打開了隱藏的開發者工具，比我以前花大錢買的專業軟體還厲害。就像發現平凡廚房後面藏了個頂尖大廚的實驗室一樣！ +第一次有人向我展示瀏覽器開發者工具（DevTools）時，我花了差不多三個小時，光是在那裡點來點去，然後一直說：「等等，它居然也能做到這個？！」你真的可以即時編輯任何網站，精準看到每個元素載入的速度，測試網站在不同裝置上的呈現，甚至像專業人士一樣除錯 JavaScript。這簡直讓人驚呆了！ -**這就是瀏覽器成為你秘密武器的原因：** +**瀏覽器為什麼是你的秘密武器：** -當你建立一個網站或網頁應用程式時，你需要知道它在真實世界中的樣子和行為。瀏覽器不僅負責呈現你的作品，還會提供性能、無障礙和潛在問題的詳細反饋。 +當你建立網站或網頁應用程式時，你需要看到它在真實世界中的樣貌與行為。瀏覽器不僅能顯示你的作品，還提供有關效能、可及性及潛在問題的詳細回饋。 -#### 瀏覽器開發者工具 (DevTools) +#### 瀏覽器開發者工具（DevTools） 現代瀏覽器包含完整的開發套件： -| 工具類別 | 功能說明 | 範例用途 | -|----------|----------|----------| -| **元素檢查器** | 即時檢視和編輯 HTML/CSS | 調整樣式立刻看到效果 | -| **主控台** | 查看錯誤訊息和測試 JavaScript | 除錯問題並嘗試程式碼 | -| **網路監視器** | 追蹤資源載入情形 | 優化效能和載入時間 | -| **無障礙檢查器** | 測試包容性設計 | 確保網站適合所有用戶 | -| **裝置模擬器** | 預覽不同螢幕尺寸 | 測試響應式設計不需多台裝置 | +| 工具類別 | 功能 | 範例使用情境 | +|----------|-------|--------------| +| **元素檢視器** | 即時檢視和編輯 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](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 看起來不同。專業開發者會跨主要瀏覽器測試，確保用戶體驗一致。 +> ⚠️ **重要測試技巧**：務必在多種瀏覽器中測試你的網站！在 Chrome 上完美的效果可能在 Safari 或 Firefox 看起來完全不同。專業開發者會跨所有主要瀏覽器測試，確保用戶體驗一致。 -### 指令列工具：帶你開啟開發者超能力之門 +### 命令列工具：開啟你的開發超能力之門 -好了，讓我們來一個完全坦白的小時刻講講指令列，因為我想讓你聽聽來自真正懂它的人的說法。剛看到指令列那個黑黑的、閃爍著文字的螢幕時，我腦中只有一句話：「絕對不行！這看起來像是 80 年代駭客電影裡的東西，我肯定不夠聰明用！」😅 +好了，讓我們坦白談談命令列，因為我想讓你聽聽真正懂這玩意兒的人怎麼說。第一次看到命令列的時候——這個恐怖的黑色螢幕，閃爍的文字——我真的想，「絕對不行！這感覺像是1980年代駭客電影裡面才會出現的東西，我絕對不夠聰明！」😅 -但其實我當時最想有人告訴我，也是我現在想跟你說的：指令列一點也不可怕，它就像是直接跟你的電腦對話。想像你點餐時，用有圖片選單的漂亮 App 很輕鬆，但如果你直接走進你最愛的餐廳，廚師一聽你說「驚喜幫我做個超讚的菜」，馬上就給你完美料理，那指令列就像是廚師，聽你的話立刻做出結果。 +但現在我希望有人當時對我說這些話，我現在也想對你說：命令列不可怕——它其實就像是直接跟你的電腦對話。想像一下，用一個有漂亮圖片與選單的美食訂購 App（簡單又好用）跟走進你最愛的本地餐廳，由了解你口味的主廚直接為你「驚喜料理」的差異。 -指令列是讓開發者感覺自己像超級巫師的地方。你打出幾個看似神奇的字（好啦，他們只是命令，但感覺很神奇！）然後按下 Enter，砰－－你建立了整個專案架構、安裝全球強大的工具，甚至把應用部署上線讓千萬人看。嘗到這種力量後，真的會上癮！ +命令列就是開發者施展魔法的地方。你輸入幾個看似神奇的字（其實只是指令，但就是覺得神奇！），按下回車，BOOM —— 你建立了整個專案結構，安裝了世界各地強大工具，或者把你的應用部署到網路上讓成千上萬人看到。你一嘗過這種力量，真的會上癮！ -**為什麼你會喜歡指令列：** +**為什麼命令列會成為你最愛的工具：** -雖然圖形介面很適合多種任務，指令列在自動化、精準度和速度上更勝一籌。很多開發工具主要透過指令列操作，學會有效使用可以大幅提升生產力。 +雖然圖形介面適合許多任務，但命令列在自動化、精準與速度方面無出其右。許多開發工具主要透過命令列操作，學會有效使用可以大幅提高生產力。 ```bash -# 第一步：建立並切換到專案目錄 +# 第一步：建立並進入專案目錄 mkdir my-awesome-website cd my-awesome-website ``` -**這段程式碼的功能：** -- **建立** 一個叫做 "my-awesome-website" 的新資料夾當作專案 -- **進入** 新建資料夾開始工作 +**這段程式碼的作用：** +- **建立** 一個名為 "my-awesome-website" 的新資料夾作為專案 +- **進入** 新建立的資料夾開始工作 ```bash # 第2步：使用 package.json 初始化專案 @@ -615,14 +613,14 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**逐步說明如下：** -- **初始化** 一個帶預設設定的 Node.js 專案，使用 `npm init -y` -- **安裝** Vite，作為快速開發與生產環境建置的現代化工具 -- **加入** Prettier 進行自動格式化，ESLint 確保程式碼品質 -- **使用** `--save-dev` 標明這些為開發階段的依賴 +**一步步說明：** +- 使用 `npm init -y` **初始化** 新的 Node.js 專案並使用預設設定 +- **安裝** Vite 這個現代化建置工具，用於快速開發與生產建置 +- **加入** Prettier 進行自動格式化，ESLint 進行程式碼品質檢查 +- 使用 `--save-dev` 參數表示這些只是開發階段的依賴 ```bash -# 第3步：建立專案結構與檔案 +# 步驟 3：建立專案結構和檔案 mkdir src assets echo 'My Site

Hello World

' > index.html @@ -630,86 +628,85 @@ echo 'My Site

Hello Wo npx vite ``` -**上面我們做了：** -- **整理** 專案架構，分出原始碼與資源資料夾 -- **產生** 基本 HTML 檔案，符合文件結構標準 -- **啟動** 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/)** | 程式碼格式化 | 保持程式碼風格一致且易讀 | +| 工具 | 目的 | 為什麼你需要它 | +|------|------|-----------------| +| **[Git](https://git-scm.com/)** | 版本控制 | 追蹤變更，團隊協作，備份工作 | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript 執行環境與套件管理 | 在瀏覽器外執行 JS，安裝現代開發工具 | +| **[Vite](https://vitejs.dev/)** | 建置工具與開發伺服器 | 極高速開發與模組熱更換 | +| **[ESLint](https://eslint.org/)** | 程式碼品質 | 自動發現並修正 JavaScript 問題 | +| **[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 指令列 +- **[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/)** － 進階功能的終端機模擬器 +- **[終端機(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)** － 進階終端機模擬器 +- **[Bash](https://www.gnu.org/software/bash/)** 💻 — 標準 Linux shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** — 高階終端模擬器 -> 💻 = 作業系統預裝 +> 💻 = 作業系統預先安裝 -> 🎯 **學習路徑**：從基礎指令如 `cd`（切換目錄）、`ls` 或 `dir`（列出檔案）、`mkdir`（建立資料夾）開始操作。練習現代工作流程命令如 `npm install`、`git status`、`code .`（在 VS Code 開啟目前資料夾）。熟悉後，自然會掌握更進階與自動化技巧。 +> 🎯 **學習路徑**：從基本指令如 `cd`（切換目錄）、`ls` 或 `dir`（列出清單）、`mkdir`（建立資料夾）開始。實作現代工作流程常用指令如 `npm install`、`git status`、`code .`（在 VS Code 開啟當前目錄）。習慣之後，自然會接觸並吸收較高級的指令與自動化技巧。 -### 文件說明：你全天候的學習導師 +### 文件：你永遠可用的學習導師 -好，讓我告訴你一個小祕密，讓你作為初學者時感覺好很多：就算是經驗最老練的開發者，也花大量時間在閱讀文件。這並不是他們不懂，而是一種智慧的象徵！ +來，讓我透露一個小祕密，讓你對自己是新手這件事感覺輕鬆很多：即使是最資深的開發者，也花大量時間閱讀文件。這不是他們不懂，而是一種智慧的表現！ -把文件想像成擁有世界上最耐心、最博學老師的全天候資源。凌晨兩點卡關？文件像溫暖的虛擬擁抱，給你正確答案。想學大家都在用的新功能？文件裡有一步步範例。想搞懂為什麼要用，怎麼運作？沒錯，文件會用讓你終於明白的方式解釋！ +把文件想像成世界上最有耐心又知識淵博的老師，全天候24/7待命。凌晨2點被問題卡住？文件就在那裡，給你溫暖的虛擬擁抱和正確答案。想學剛剛大家都在討論的酷新功能？文件有步驟範例支援你。想知道為什麼某件事情會那樣運作？對了，那些文件能幫你恍然大悟！ -有件事徹底改變我看法的：網頁開發更新太快，沒有人（真的沒有）能把一切記在腦子裡。我看到有 15 年資深的開發大佬也會查基本語法，你知道嗎？這不尷尬，這是聰明！不是記憶力完美，而是知道怎麼快速找到可靠答案，並懂得應用。 +讓我徹底改觀的一件事是：網頁開發發展超快，沒有人（我說絕對沒有人！）能背下全部內容。我看過超過15年的資深工程師還在查基本語法，你知道嗎？這不是丟臉，是聰明！重要的不是記憶力多好，而是知道在哪裡快速找到可靠答案並懂得運用。 -**真正關鍵的地方在這裡：** +**真正的魔法在這裡：** -專業開發者花大量時間看文檔，不是因為不懂，而是因為網頁開發環境變化如此快速，必須不斷學習才能跟上。好的文件幫你理解不只是 *怎麼用*，還有 *為什麼* 跟 *何時* 使用。 +專業開發者花大量時間閱讀文件，不是因為不懂，而是因為網頁開發環境變動飛快，持續學習才是關鍵。優秀文件不只告訴你「怎麼用」，還講「為什麼」和「何時用」。 -#### 重要文件資源 +#### 必備文件資源 -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +**[Mozilla 開發者網路 (MDN)](https://developer.mozilla.org/docs/Web)** - 網頁技術文件的黃金標準 -- HTML、CSS、JavaScript 全面指南 -- 包含瀏覽器相容性資訊 -- 實例範例與互動演示 +- HTML、CSS、JavaScript 詳盡指南 +- 含有瀏覽器相容性資訊 +- 實用範例與互動示範 -**[Web.dev](https://web.dev)** (由 Google 提供) +**[Web.dev](https://web.dev)**（由 Google 提供） - 現代網頁開發最佳實踐 -- 效能優化指引 -- 無障礙及包容性設計原則 -- 真實案例分享 +- 效能優化指南 +- 可及性與包容性設計原則 +- 實務案例研究 -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +**[微軟開發者文件](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge 瀏覽器開發資源 -- 漸進式網頁應用程式指南 -- 跨平台開發洞察 +- 漸進式網頁應用指南 +- 跨平台開發見解 -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- 系統化課程規劃 -- 業界專家影片課程 -- 實作編碼練習 +**[Frontend Masters 學習路徑](https://frontendmasters.com/learn/)** +- 結構化學習課程 +- 業界專家影音課程 +- 實作程式練習 -> 📚 **學習策略**：別嘗試死記文件內容，學會有效快速瀏覽才是王道。收藏常用參考資源，練習用搜尋找到特定資訊。 +> 📚 **研讀策略**：不要死背文件，而是學會高效導航。書籤常用參考資料，練習用搜尋功能快速找到訊息。 +### 🔧 **工具掌握自我檢測：你最有感的是什麼？** -### 🔧 **工具掌握測試：哪個最吸引你？** - -**請花一點時間想想：** -- 你第一個最想嘗試的工具是什麼？（無所謂正錯！） -- 指令列還是覺得害怕，或是開始想試試看了？ -- 你能想像用瀏覽器 DevTools 來窺探你最愛網站的「幕後秘辛」嗎？ +**花點時間思考：** +- 你最想先嘗試哪個工具？（沒有錯的答案！） +- 命令列對你來說還是令人畏懼，還是開始有興趣了？ +- 你能想像用瀏覽器 DevTools 窺探你最愛網站的內幕嗎？ ```mermaid pie title "開發者使用工具的時間分配" @@ -719,139 +716,137 @@ pie title "開發者使用工具的時間分配" "閱讀文件" : 15 "除錯" : 5 ``` -> **有趣洞見**：大多數開發者約 40% 時間待在編輯器，但請注意花多少時間在測試、學習和解決問題。編程不只是寫程式碼－而是在打造體驗！ +> **有趣觀察**：大多數開發者約40%時間使用程式編輯器，但你會注意到，他們花很多時間在測試、學習與解決問題。程式設計不只是寫碼，更是打造體驗！ -✅ **思考題**：想想看建立網站的工具 (開發) 跟設計網站外觀的工具 (設計) 有什麼不同？就像是蓋房子的建築師和實際施工的承包商。兩者都很重要，但工具箱不同！這樣的思維幫你看清網站如何誕生的全貌。 +✅ **值得思考**：不同工具如何區分開發與設計？這很像建築師設計漂亮的房子，和承包商實際蓋屋的差別。兩者都很重要，但工具箱不同！這種思考能幫助你看到網站如何誕生的全貌。 ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： -**描述：** 探索現代程式碼編輯器或 IDE 的功能，並示範它如何提升你作為網頁開發者的工作流程。 +**說明：** 探索現代程式碼編輯器或 IDE 的功能，並示範它如何改進你作為網頁開發者的工作流程。 -**提示：** 選擇一款程式碼編輯器或 IDE（像 Visual Studio Code、WebStorm，或雲端 IDE）。列出三個功能或擴充套件說明它們如何幫助你更有效率地撰寫、除錯或維護程式碼。對每一項提供簡短說明其對工作流程的好處。 +**提示：** 選擇一個編輯器或 IDE（例如 Visual Studio Code、WebStorm 或雲端 IDE）。列出三個幫助你撰寫、除錯或維護程式碼更有效率的特色或外掛，並簡述它如何提升你的工作流程。 --- -## 🚀 挑戰任務 +## 🚀 挑戰 -**破案者，準備好了嗎？** +**好了，偵探，準備好你的第一個案件了嗎？** -你已經打下堅實基礎，現在有個冒險任務要讓你見識程式世界有多麼多元迷人。別擔心，這還不是寫程式碼的時候！把自己當成一名編程語言偵探，開始你的首宗刺激案件！ +有了這個超棒基礎，我有個冒險要帶你看編程世界的多元與迷人。放心，這還不是寫程式的階段，不用緊張！想像自己是語言偵探，正在接手第一個精彩案件！ -**你的任務，如果你願意接受：** -1. **成為語言探索者**：從截然不同的三個編程語言挑選出來──可能一個用於網站，另一個開發手機 App，還有一個用於科學資料分析。找相同簡單任務的各語言範例。保證你會驚訝它們看起來多不同，卻完成同一件事！ +**你的任務，如你願意接受：** +1. **成為語言探險家**：挑選三種來自完全不同領域的程式語言——或許一個用於網站開發、一個用於手機應用，另一個用於科學數據處理。找出相同簡單任務的程式碼範例。我保證你會驚訝它們完成相同事情的方式竟然長得這麼不同！ -2. **挖掘起源故事**：每種語言的特別之處是什麼？有趣的是，每種語言都是有人想：「該死，我一定可以用更好的方法解決這個問題！」才誕生的。你能找出它們當初解決的問題嗎？這些故事超好玩！ +2. **追溯起源故事**：每種語言有何獨特？酷事實是，每個程式語言都是因為有人想著「這有更好的方式來解決這個特定問題」。你能找出那些問題是什麼嗎？有些故事真的是非常吸引人！ -3. **認識社群**：看看各語言社群如何包容熱情。某些有百萬開發者互相分享、支援；有些較小但非常團結密切。你會愛上他們不同的個性！ +3. **認識社群**：感受各語言社群的熱情與友善。有些有百萬名開發者分享知識互助，有些較小但緊密且支持彼此。你會很喜歡看這些社群各自的個性！ -4. **聽從直覺**：哪個語言現在對你來說最友善？別強迫「完美選擇」──相信你的直覺！沒有錯答案，日後還可以再多探索。 +4. **憑直覺選擇**：哪種語言現在感覺最親近你？別擔心選擇「完美」與否——聽從你的直覺！這裡沒有錯的答案，也可以之後再探索其他。 -**額外偵探任務**：試找出這些語言用在哪些知名網站或 App。保證會讓你震驚 Instagram、Netflix 或你玩不膩的手機遊戲背後的技術！ +**加碼偵探任務**：試著找出每種語言主力開發的主要網站或應用。保證讓你震驚，知道 Instagram、Netflix 或那款讓你停不下來玩的手機遊戲背後用的語言！ -> 💡 **記住**：今天你不用成為任何語言專家。只是先認識街區，決定想在哪裡落腳。慢慢來，玩得開心，讓好奇心帶路！ +> 💡 **記住**：今天你不是要成為專家，只是在決定落腳之前認識社區。放輕鬆，享受探索，讓好奇心帶路！ -## 讓我們一起慶祝你的發現！ +## 讓我們慶祝你的發現！ -哇靠，今天你吸收了好多令人驚奇的資訊！我非常期待看到這趟精彩旅程在你心中留下多少痕跡。記得──這不是要你考試或要完美表現。更像是在慶祝你已經了解這個即將踏入的奇妙世界！ +天哪，你今天吸收了這麼多厲害的資訊！我真心期待看到你對這趟旅程的記憶。記得——這不是一場考試，不用完美。這更像是一場派對，慶祝你在即將深入的神奇世界中學到的所有酷東西！ -[前往課後測驗](https://ff-quizzes.netlify.app/web/) -## Review & Self Study +[參加課後測驗](https://ff-quizzes.netlify.app/web/) -**花點時間探索並享受其中的樂趣！** +## 複習與自學 -你今天已經學了很多，這真的是值得驕傲的事！現在來到有趣的部分——探索激發你好奇心的主題。記得，這不是作業，而是一場冒險！ +**慢慢來，盡情探索且享受學習樂趣！** +你今天已經學習了很多，這是一件值得驕傲的事情！接下來就是有趣的部分——探索那些激發你好奇心的主題。記得，這不是作業——這是一場冒險！ -**深入探究讓你感興趣的內容：** +**深入挖掘你感興趣的領域：** -**親自動手玩程式語言：** -- 造訪吸引你目光的 2-3 種程式語言官方網站。每種語言都有它獨特的個性與故事！ -- 嘗試一些線上編碼平台，如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。別害怕嘗試——你不會破壞任何東西！ -- 閱讀你喜愛語言的誕生故事。真的，有些起源故事非常迷人，能幫助你理解語言設計背後的原因。 +**親自動手試試程式語言：** +- 訪問你感興趣的 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 上觀看一些入門程式教學影片。許多優質創作者都記得初學時的心情。 -- 考慮參加本地聚會或線上社群。相信我，開發者都很樂於幫助新手！ +- 如果你還沒下載 Visual Studio Code，現在就下載吧——它是免費的，你會喜歡它！ +- 花幾分鐘瀏覽擴充功能市集。它就像是你的程式碼編輯器的應用商店！ +- 打開瀏覽器的開發者工具，隨便點點。別擔心要理解所有東西——先熟悉它們的存在即可。 -> 🎯 **記住，我希望你牢記的是**：你不需要一夜之間成為程式高手！現在，你只是開始認識這個即將成為你生活一部分的精彩新世界。慢慢來，享受這趟旅程，並記得——你所敬佩的每位開發者，都曾經坐在你現在的位置，滿心期待也可能帶著些許不安。那是完全正常的，這也代表你正在走在正確的道路上！ +**加入社群：** +- 在 [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, [你的名字]！」） +## 🚀 你的程式學習旅程時間軸 + +### ⚡ **接下來 5 分鐘能完成的事** +- [ ] 收藏 2-3 個讓你感興趣的程式語言官網 +- [ ] 如果還沒下載，安裝 Visual Studio Code +- [ ] 打開瀏覽器的 DevTools（F12）並隨意點開任何網站 +- [ ] 加入一個程式開發社群（Dev.to、Reddit r/webdev 或 Stack Overflow） + +### ⏰ **這一小時能完成的事** +- [ ] 完成課後小測並反思你的答案 +- [ ] 安裝 VS Code 的 GitHub Copilot 擴充功能 +- [ ] 線上用兩種不同的程式語言嘗試寫一個「Hello World」範例 +- [ ] 在 YouTube 觀看一段「開發者的一天」類型的影片 +- [ ] 開始進行你的程式語言偵探任務（來自挑戰） + +### 📅 **你這一週的冒險** +- [ ] 完成作業並探索 3 種全新的開發工具 +- [ ] 在社交媒體上追蹤 5 位開發者或程式帳號 +- [ ] 嘗試在 CodePen 或 Replit 製作一個小作品（哪怕只是「Hello, [你的名字]！」） - [ ] 閱讀一篇開發者分享他們程式旅程的部落格文章 -- [ ] 參加線上聚會或觀看程式演講 -- [ ] 開始用線上教程學習你選定的程式語言 +- [ ] 參加一場線上聚會或觀看一次程式講座 +- [ ] 開始用線上教學學習你選擇的語言 -### 🗓️ **你這月的轉變** -- [ ] 建立你的第一個小專案（即使只是簡單的網頁也算！） -- [ ] 貢獻於開源專案（從文件修正開始） +### 🗓️ **你一個月的蛻變** +- [ ] 打造你的第一個小專案（即使是一個簡單的網頁也算！） +- [ ] 為開源專案做點貢獻（從文件修正開始） - [ ] 指導剛開始學程式的人 -- [ ] 建立你的開發者個人作品集網站 -- [ ] 與本地開發者社群或學習小組聯繫 -- [ ] 開始規劃下一個學習里程碑 +- [ ] 建立你的開發者作品集網站 +- [ ] 與當地開發社群或讀書會建立連結 +- [ ] 開始規劃你的下一個學習里程碑 -### 🎯 **最後的反思檢查點** +### 🎯 **最後反思檢視** -**在繼續前，花點時間慶祝：** -- 今天程式中讓你最興奮的是什麼？ -- 你最想先探索哪個工具或概念？ -- 對於剛開始的程式旅程，你有什麼感覺？ -- 現在你最想問開發者的一個問題是什麼？ +**在繼續前，花點時間慶祝一下：** +- 今天讓你對程式設計感到興奮的是什麼？ +- 你想先探索哪個工具或概念？ +- 你對展開這段程式學習旅程的感覺如何？ +- 現在你最想問一位開發者的問題是什麼？ ```mermaid journey - title 你的自信建立旅程 + title 你的自信建立之旅 section 今天 好奇: 3: You 不知所措: 4: You 興奮: 5: You - section 這週 - 探索: 4: You - 學習: 5: You - 連結: 4: You + section 本週 + 探索中: 4: You + 學習中: 5: You + 連結中: 4: You section 下個月 - 建立: 5: You + 建立中: 5: You 自信: 5: You 幫助他人: 5: You ``` -> 🌟 **記住**：每位專家都曾是初學者。每位資深開發者也曾像你現在一樣興奮、可能有點不知所措，卻充滿好奇想知道未來的可能性。你正在與了不起的人同行，這趟旅程將會非常精彩。歡迎來到美妙的程式世界！🎉 +> 🌟 **記住**：每位專家也曾是初學者。每位資深開發者當初都曾有過和你一樣的感受——興奮、可能有些不知所措，還充滿對未來可能性的好奇。你身處一群了不起的人之中，這段旅程將會非常精彩。歡迎來到美妙的程式世界！🎉 --- **免責聲明**： -本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，機器翻譯可能包含錯誤或不準確之處。文件原文應視為權威資料。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所產生的任何誤解或誤用承擔責任。 +本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保準確性，但請注意自動翻譯結果可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。 \ No newline at end of file diff --git a/translations/zh-TW/AGENTS.md b/translations/zh-TW/AGENTS.md index 28222442a..f895e187c 100644 --- a/translations/zh-TW/AGENTS.md +++ b/translations/zh-TW/AGENTS.md @@ -2,42 +2,42 @@ ## 專案概述 -這是一個用於教導初學者網頁開發基礎的教學課程庫。該課程為期12週，由微軟雲端推廣者開發，包含24堂實作課程，涵蓋JavaScript、CSS及HTML。 +這是一個針對初學者教授網頁開發基礎的教育課程資源庫。此課程是由 Microsoft Cloud Advocates 所設計的綜合性 12 週課程，包含 24 節實作課程，涵蓋 JavaScript、CSS 與 HTML。 -### 主要組成部分 +### 主要組成 -- **教學內容**：24堂結構化課程，組織為專案模組 -- **實務專案**：Terrarium、生字輸入遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器以及AI聊天助理 -- **互動測驗**：48份測驗，每份含3題（課前/課後評估） -- **多語言支持**：透過GitHub Actions自動翻譯超過50種語言 -- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於AI專案） +- **教育內容**：24 節結構化課程，按照專案模組組織 +- **實際專案**：Terrarium、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 AI 聊天助理 +- **互動測驗**：48 個測驗，每個包含 3 題（課前/課後評量） +- **多語言支援**：透過 GitHub Actions 自動翻譯超過 50 種語言 +- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AI 專案專用） ### 架構 -- 教育資源庫，課程基於單元結構 -- 每堂課資料夾包含README、程式碼範例及解答 -- 獨立專案分布於不同目錄（quiz-app、各種課程專案） -- 利用GitHub Actions的翻譯系統（co-op-translator） -- 文件使用Docsify呈現，亦可另存為PDF +- 教育資源庫，採用以課程為基礎的結構 +- 每堂課的資料夾包含 README、程式碼範例與解答 +- 獨立專案獨立在不同目錄（如 quiz-app、各課程專案） +- 使用 GitHub Actions (co-op-translator) 的翻譯系統 +- 使用 Docsify 提供文件服務，並可匯出 PDF -## 設置指令 +## 安裝指令 -本倉庫主要用於教育內容瀏覽。若要操作特定專案： +此資源庫主要用於教育內容瀏覽。若需操作特定專案： -### 主要倉庫設置 +### 主要資源庫安裝 ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### 測驗應用設置（Vue 3 + Vite） +### 測驗應用程式安裝（Vue 3 + Vite） ```bash cd quiz-app npm install npm run dev # 啟動開發伺服器 -npm run build # 建置生產環境 +npm run build # 為生產環境進行建置 npm run lint # 執行 ESLint ``` @@ -56,7 +56,7 @@ npm run format # 使用 Prettier 格式化 ```bash cd 5-browser-extension/solution npm install -# 遵循瀏覽器特定的擴充功能載入說明 +# 遵循瀏覽器特定的擴充功能載入指示 ``` ### 太空遊戲專案 @@ -76,42 +76,42 @@ pip install openai python api.py ``` -## 開發工作流程 +## 開發流程 ### 內容貢獻者 -1. **Fork 倉庫**到您的 GitHub 帳號 -2. **本機 Clone** 您的 Fork -3. **建立新分支**以進行更改 -4. 修改課程內容或程式碼範例 +1. **將資源庫 fork** 至您的 GitHub 帳號 +2. **在本機 clone 您的 fork** +3. **建立新分支** 進行修改 +4. 對課程內容或程式碼範例進行修改 5. 在相關專案目錄測試程式碼變更 -6. 遵循貢獻指南提交 Pull Request +6. 按照貢獻指南提交 pull request ### 學習者 -1. Fork 或 Clone 倉庫 -2. 按順序瀏覽課程目錄 -3. 閱讀每堂課的 README 文件 -4. 完成 https://ff-quizzes.netlify.app/web/ 的課前測驗 +1. Fork 或 clone 此資源庫 +2. 依序瀏覽課程目錄 +3. 閱讀各課程的 README +4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/ 5. 練習課程資料夾中的程式碼範例 -6. 完成作業和挑戰任務 +6. 完成作業與挑戰 7. 進行課後測驗 -### 即時開發 +### 現場開發 -- **文件**：於根目錄執行 `docsify serve`（預設port 3000） -- **測驗應用**：於 quiz-app 目錄執行 `npm run dev` -- **專案**：使用 VS Code Live Server 擴充功能開啟 HTML 專案 -- **API 專案**：於各 API 目錄執行 `npm start` +- **文件**：於專案根目錄執行 `docsify serve` (監聽 3000 埠) +- **測驗應用程式**：於 quiz-app 目錄執行 `npm run dev` +- **專案**：對 HTML 專案使用 VS Code Live Server 擴充功能 +- **API 專案**：於對應 API 目錄執行 `npm start` ## 測試說明 -### 測驗應用測試 +### 測驗應用程式測試 ```bash cd quiz-app npm run lint # 檢查程式碼風格問題 -npm run build # 驗證建置成功 +npm run build # 驗證建置是否成功 ``` ### 銀行 API 測試 @@ -119,77 +119,77 @@ npm run build # 驗證建置成功 ```bash cd 7-bank-project/api npm run lint # 檢查程式碼風格問題 -node server.js # 驗證伺服器啟動是否無錯誤 +node server.js # 確認伺服器啟動時無錯誤 ``` -### 一般測試方式 +### 一般測試方法 -- 本教育資源庫沒有完善的自動化測試 -- 以手動測試為主： - - 程式碼範例執行無誤 - - 文件中的連結正確可用 - - 專案編譯成功 - - 範例符合最佳實務 +- 本資源庫為教育用途，未包含全面自動化測試 +- 主要手動測試聚焦於： + - 程式碼範例正確執行無誤 + - 文件中的連結正常 + - 專案建構成功 + - 範例遵循最佳實務 ### 提交前檢查 -- 在含有 package.json 的目錄執行 `npm run lint` -- 驗證 markdown 連結有效 -- 在瀏覽器或 Node.js 中測試程式碼範例 -- 確認翻譯內容結構正確 +- 於含 package.json 目錄執行 `npm run lint` +- 確認 markdown 連結有效 +- 在瀏覽器或 Node.js 測試程式碼範例 +- 確保翻譯保留正確結構 ## 程式碼風格指南 ### JavaScript -- 使用現代 ES6+ 語法 -- 遵循專案中預設的 ESLint 配置 -- 使用有意義的變數及函式名稱以利教學 -- 添加註解說明概念供學習者理解 -- 有設定 Prettier 的地方使用其格式化 +- 採用現代 ES6+ 語法 +- 遵循專案中提供的標準 ESLint 設定 +- 使用具意義的變數與函式名稱以便教學說明 +- 加入註解解釋概念 +- 於有配置處使用 Prettier 格式化 ### HTML/CSS - 使用語義化 HTML5 元素 - 採用響應式設計原則 -- 清晰的類別命名規範 -- 添加註解說明 CSS 技巧給學習者 +- 清晰的類別命名約定 +- 加入註解解釋 CSS 技巧以便學習 ### Python - 遵循 PEP 8 風格指南 -- 清楚且具教學意義的程式碼範例 -- 提供有助學習的類型標註 +- 清楚且具教育意義的程式碼範例 +- 在有助於理解的地方加入型別提示 ### Markdown 文件 -- 條理分明的標題層級 -- 指定語言的程式碼區塊 -- 提供額外資源連結 -- 在 `images/` 資料夾內附有截圖和圖片 -- 圖片務必添加替代文字以利無障礙 +- 清晰的標題階層 +- 具語言標示的程式碼區塊 +- 附加資源連結 +- 包含截圖與位於 `images/` 目錄的圖片 +- 圖片具備輔助功能的替代文字 ### 檔案組織 -- 課程以序號編排（1-getting-started-lessons、2-js-basics 等） -- 各專案擁有 `solution/` 以及通常的 `start/` 或 `your-work/` 目錄 -- 圖片存放於課程專用的 `images/` 子資料夾 -- 翻譯檔案位於 `translations/{language-code}/` 結構中 +- 課程依序編號（如 1-getting-started-lessons、2-js-basics 等） +- 各專案含有 `solution/`，常見有 `start/` 或 `your-work/` 目錄 +- 圖片儲存在課程專屬的 `images/` 資料夾 +- 翻譯依照 `translations/{language-code}/` 結構儲存 ## 建置與部署 -### 測驗應用部署（Azure 靜態網站） +### 測驗應用程式部署（Azure 靜態網頁應用） -quiz-app 已配置為 Azure 靜態網站部署： +quiz-app 已配置可用於 Azure 靜態網頁應用部署： ```bash cd quiz-app npm run build # 建立 dist/ 資料夾 -# 在推送到 main 時透過 GitHub Actions 工作流程部署 +# 在推送至 main 時透過 GitHub Actions 工作流程部署 ``` -Azure 靜態網站配置： -- **應用程式位置**：`/quiz-app` +Azure 靜態網頁應用配置： +- **App 位置**：`/quiz-app` - **輸出位置**：`dist` - **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` @@ -204,79 +204,79 @@ npm run convert # 從 docs 生成 PDF ```bash npm install -g docsify-cli # 全域安裝 Docsify -docsify serve # 在 localhost:3000 提供服務 +docsify serve # 在 localhost:3000 上提供服務 ``` ### 專案特定建置 -各專案資料夾可能有各自的建置流程： -- Vue 專案：使用 `npm run build` 建置生產版 +各專案目錄可能有自己的建置流程： +- Vue 專案：使用 `npm run build` 製作生產用包 - 靜態專案：無建置步驟，直接提供檔案服務 ## Pull Request 指南 ### 標題格式 -使用清楚描述修改範圍的標題： -- `[Quiz-app] 新增第X課測驗` +使用明確且描述性的標題指出變更範圍： +- `[Quiz-app] 新增第 X 課測驗` - `[Lesson-3] 修正 terrarium 專案錯字` -- `[Translation] 新增第5課西班牙語翻譯` -- `[Docs] 更新設置說明` +- `[Translation] 新增第 5 課西班牙語翻譯` +- `[Docs] 更新安裝說明` ### 必要檢查 提交 PR 前： 1. **程式碼品質**： - - 在影響的專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤和警告 + - 在受影響專案目錄執行 `npm run lint` + - 修正所有 lint 錯誤與警告 2. **建置驗證**： - - 執行 `npm run build`（若適用） - - 確保無建置錯誤 + - 如適用，執行 `npm run build` + - 確認無建置錯誤 3. **連結驗證**： - 測試所有 markdown 連結 - - 確認圖片路徑正確 + - 確認圖片引用正常 -4. **內容審校**： - - 校對拼寫和語法 +4. **內容校對**： + - 文稿拼寫與文法檢查 - 確認程式碼範例正確且具教育意義 - - 驗證翻譯維持原意 + - 驗證翻譯保有原意 -### 貢獻條件 +### 貢獻要求 -- 同意 Microsoft CLA（自動於首次 PR 檢查） -- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/) -- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如有，於 PR 描述中引用議題編號 +- 同意 Microsoft CLA（首次 PR 進行自動檢查） +- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md) +- 如適用，於 PR 描述中參考 issue 編號 ### 審查流程 -- 由維護者與社群共同審查 PR -- 以教學清晰度為優先 -- 程式碼範例須遵守最新最佳實務 -- 翻譯需審核正確性與文化適應性 +- PR 由維護者與社群審查 +- 優先考量教育清晰度 +- 程式碼範例應遵循最新最佳實踐 +- 翻譯檢視準確度與文化適當性 ## 翻譯系統 ### 自動翻譯 -- 透過 GitHub Actions 使用 co-op-translator 工作流程 -- 自動翻譯超過50種語言 -- 原始檔案於主目錄 -- 翻譯檔案置於 `translations/{language-code}/` 目錄 +- 使用 GitHub Actions 且採 co-op-translator 工作流程 +- 自動翻譯超過 50 種語言 +- 原始檔案在主要目錄 +- 翻譯檔案儲存在 `translations/{language-code}/` -### 手動翻譯改進 +### 新增人工翻譯改進 1. 找出 `translations/{language-code}/` 中的檔案 -2. 改善內容同時保留結構 -3. 確保程式碼範例仍可使用 -4. 測試本地化後測驗內容 +2. 進行改進時維持結構不變 +3. 確保程式碼範例能正常運作 +4. 測試本地化的測驗內容 -### 翻譯元資料 +### 翻譯元數據 -翻譯檔包含元資料標頭： +翻譯檔包含如下元資料標頭： ```markdown ``` -## 偵錯與故障排除 +## 偵錯與問題排解 ### 常見問題 -**測驗應用無法啟動**： -- 檢查 Node.js 版本（建議 v14+） -- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install` -- 檢查埠號衝突（預設 Vite 使用 port 5173） +**測驗應用程式無法啟動**： +- 檢查 Node.js 版本（建議最低 v14） +- 刪除 `node_modules` 及 `package-lock.json` 後重新執行 `npm install` +- 檢查埠號衝突（預設 Vite 使用埠 5173） **API 伺服器無法啟動**： - 確認 Node.js 版本符合最低要求（node >=10） -- 檢查埠號是否被占用 -- 確保已安裝所有依賴（`npm install`） +- 確認埠號未被占用 +- 確保所有依賴已安裝（`npm install`） -**瀏覽器擴充功能無法載入**： +**瀏覽器擴充無法載入**： - 確認 manifest.json 格式正確 -- 使用瀏覽器主控台查看錯誤 -- 依照瀏覽器特定擴充功能安裝指引操作 +- 檢查瀏覽器控制台錯誤訊息 +- 遵循瀏覽器特定擴充安裝說明 **Python 聊天專案問題**： -- 確保安裝 OpenAI 套件：`pip install openai` -- 核實 GITHUB_TOKEN 環境變數已設定 -- 檢查 GitHub Models 權限設定 +- 確認已安裝 OpenAI 套件：`pip install openai` +- 確認已設定 GITHUB_TOKEN 環境變數 +- 檢查 GitHub Models 存取權限 **Docsify 無法提供文件**： - 全域安裝 docsify-cli：`npm install -g docsify-cli` -- 於倉庫根目錄啟動 -- 確認 `docs/_sidebar.md` 存在 +- 從資源庫根目錄執行 +- 確認存在 `docs/_sidebar.md` ### 開發環境建議 -- 使用 VS Code 並安裝 Live Server 擴充功能開啟 HTML 專案 -- 安裝 ESLint 與 Prettier 擴充確保格式一致 -- 利用瀏覽器的開發者工具除錯 JavaScript -- Vue 專案安裝 Vue DevTools 瀏覽器擴充功能 +- HTML 專案使用 VS Code Live Server 擴充 +- 安裝 ESLint 與 Prettier 擴充以維持格式一致 +- 使用瀏覽器開發工具偵錯 JavaScript +- Vue 專案可安裝 Vue DevTools 瀏覽器擴充 -### 性能考量 +### 效能考量 -- 翻譯檔案數量龐大（超過50種語言），完整 clone 會很大 -- 若只處理內容，採用淺層 clone：`git clone --depth 1` -- 工作英文內容時可排除翻譯檔案搜尋 -- 初次執行建置流程（npm install，Vite build）可能較慢 +- 翻譯檔案眾多（超過 50 種語言），完整 clone 會很大 +- 僅需內容時建議使用淺層 clone：`git clone --depth 1` +- 使用中英文內容時，建議排除翻譯檔案搜尋 +- 初次執行可能建置緩慢（npm install、Vite 建置） ## 安全考量 ### 環境變數 -- API 金鑰切勿提交至倉庫 -- 使用 `.env` 檔案（已加入 `.gitignore`） -- 各專案 README 記錄必要環境變數 +- API 金鑰絕不可被提交至資源庫 +- 使用 `.env` 檔案（已於 `.gitignore` 中忽略） +- 專案 README 中記錄必要環境變數 ### Python 專案 - 使用虛擬環境：`python -m venv venv` -- 維持依賴套件更新 -- GitHub token 僅需最低權限 +- 保持依賴更新 +- GitHub token 需設置最低必要權限 ### GitHub Models 存取 -- 使用個人存取權杖（PAT）存取 GitHub Models -- 將權杖存為環境變數 -- 禁止提交權杖或憑證 +- 需使用個人存取權杖 (PAT) +- 權杖應存放於環境變數 +- 絕不可提交權杖或憑證 -## 其他注意事項 +## 附加說明 -### 目標受眾 +### 目標族群 -- 完全初學網頁開發者 +- 網頁開發完全初學者 - 學生與自學者 -- 教師用於課堂教學 -- 內容設計注重可及性與逐步技能培養 +- 教室中使用本課程的教師 +- 內容設計注重無障礙與技能漸進培養 ### 教育理念 -- 專案導向學習 -- 經常性知識檢測（測驗） +- 以專案為基礎的學習方式 +- 常態性的知識檢測（測驗） - 實作編碼練習 -- 真實生活應用範例 -- 先掌握基礎再談框架 +- 強調實務應用範例 +- 先學習基礎原理，再接觸框架 -### 倉庫維護 +### 資源庫維護 -- 活躍學習者與貢獻者社群 -- 定期依賴與內容更新 -- 由維護者監控議題與討論 -- 翻譯更新自動化透過 GitHub Actions +- 學習者與貢獻者活躍社群 +- 定期更新依賴與內容 +- 維護者監控議題與討論 +- 使用 GitHub Actions 自動化翻譯更新 ### 相關資源 - [Microsoft Learn 模組](https://docs.microsoft.com/learn/) - [學生中心資源](https://docs.microsoft.com/learn/student-hub/) -- [推薦 GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 給學習者 -- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可取得 +- 推薦學習使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- 附加課程：生成式 AI、資料科學、機器學習、物聯網課程內容 -### 操作特定專案 +### 個別專案操作 -詳細指引請參考下列專案目錄中的 README 文件： -- `quiz-app/README.md` - Vue 3 測驗應用 -- `7-bank-project/README.md` - 銀行應用含驗證功能 -- `5-browser-extension/README.md` - 瀏覽器擴充功能開發 -- `6-space-game/README.md` - Canvas 遊戲開發 -- `9-chat-project/README.md` - AI 聊天助理專案 +關於各專案詳細說明請參考對應 README： +- `quiz-app/README.md` — Vue 3 測驗應用 +- `7-bank-project/README.md` — 銀行應用含認證功能 +- `5-browser-extension/README.md` — 瀏覽器擴充功能開發 +- `6-space-game/README.md` — Canvas 太空遊戲開發 +- `9-chat-project/README.md` — AI 聊天助理專案 ### Monorepo 結構 -雖非傳統 monorepo，本倉庫包含多個獨立專案： -- 每堂課皆自成一體 -- 專案間不共用相依套件 -- 可單獨作業不影響其他專案 -- 若要完整課程體驗，請完整 clone 倉庫 +本資源庫非傳統 monorepo，但包含多個獨立專案： +- 每堂課自成一格 +- 專案不共用依賴 +- 可獨立作業不影響他專案 +- 想完整體驗這門課請 clone 整個資源庫 --- -**免責聲明**： -本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為權威資料。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯版本所產生之任何誤解或誤用承擔責任。 +**免責聲明**： +本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不精確之處。原始文件的母語版本應被視為權威資料來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。 \ No newline at end of file diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index fa62fe1d2..586bf9da0 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -10,203 +10,213 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# 初學者網站開發 - 一套課程 +# 初學者的網頁開發課程 -透過微軟雲端推廣者的12週完整課程學習網站開發的基礎。這24堂課透過動手專案深入探索JavaScript、CSS和HTML，範例涵蓋玻璃箱生態瓶、瀏覽器擴充功能和太空遊戲。參與測驗、討論與實作作業。使用我們有效的專案導向教學法提升你的技能並優化知識吸收。立即開始你的程式碼學習旅程！ +透過微軟雲端推廣員的 12 週全面課程，學習網頁開發的基礎知識。24 個課程單元透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲，深入探討 JavaScript、CSS 和 HTML。參與測驗、討論及實務作業。利用我們高效的專案導向教學法，強化技能並優化知識吸收。立即展開你的程式設計之旅！ 加入 Azure AI Foundry Discord 社群 [![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 Action 實現（自動且持續更新） -[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語 (Myanmar)](../my/README.md) | [中文 (簡體)](../zh-CN/README.md) | [中文 (繁體, 香港)](../zh-HK/README.md) | [中文 (繁體, 澳門)](../zh-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) | [卡納達語](../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) | [葡萄牙語 (巴西)](../pt-BR/README.md) | [葡萄牙語 (葡萄牙)](../pt-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) +[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](../zh-HK/README.md) | [中文（繁體，澳門）](../zh-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) | [卡納達語](../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) | [葡萄牙語 (巴西)](../pt-BR/README.md) | [葡萄牙語 (葡萄牙)](../pt-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) -> **想要本機 Clone？** - -> 此程式庫包含50多種語言翻譯，將大幅增加下載大小。若想不帶翻譯下載，請使用 sparse checkout： +> **偏好本機複製？** +> +> 本倉庫包含 50 多種語言翻譯，會大幅增加下載大小。若想不包含翻譯檔複製，請使用稀疏簽出： +> +> **Bash / macOS / Linux:** > ```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' > ``` -> 這可讓你以更快的速度取得完成課程所需的所有內容。 +> +> **CMD (Windows):** +> ```cmd +> 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" +> ``` +> +> 這可幫助你用更快速度下載並擁有完成課程所需的一切資料。 -**如需其他翻譯語言支援，請參考 [此處](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) #### 🧑‍🎓 _你是學生嗎？_ -造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 這裡有初學者資源、學生套件，甚至還有取得免費證書兌換券的方式。這個頁面非常值得收藏並定期查看，因為內容會每月更新。 +請造訪[**學生專區頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，這裡提供初學者資源、學生套件，甚至免費證書代金券兌換方式。請收藏此頁，並定期瀏覽，我們會每月更新內容。 -### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰可完成！ +### 📣 公告 - 新增 GitHub Copilot 代理模式挑戰關卡！ -新增挑戰，請在多數章節尋找「GitHub Copilot Agent Challenge 🚀」。這是利用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果你還沒用過 Agent 模式，它不只會生成文字，還能建立及編輯檔案、執行命令等等。 +新挑戰已加入，大多數章節中可見 "GitHub Copilot Agent Challenge 🚀"。這是使用 GitHub Copilot 與代理模式完成的全新挑戰。如果你還沒用過代理模式，它不僅能生成文字，還能建立與編輯檔案、執行指令等。 -### 📣 公告 - _新專案使用生成式 AI 建構_ +### 📣 公告 - _新增使用生成式 AI 建置的專案_ -剛新增 AI 助手專案，請查看 [專案](./9-chat-project/README.md) +最新 AI 助理專案已推出，詳見[專案](./9-chat-project/README.md) -### 📣 公告 - _新課程_ 針對 JavaScript 的生成式 AI 課程剛發布 +### 📣 公告 - _全新生成式 AI JavaScript 課程大公開_ -別錯過我們的生成式 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/zh-TW/background.148a8d43afde5730.webp) +![背景](../../translated_images/zh-TW/background.148a8d43afde5730.webp) -- 課程範圍涵蓋從基礎到檢索增強生成（RAG）。 -- 使用生成式 AI 和我們的伴侶應用與歷史人物互動。 -- 有趣且引人入勝的敘事，你將穿越時空！ +- 課程涵蓋從基礎到 RAG 技術。 +- 使用生成式 AI 與伴隨應用互動，與歷史人物對話。 +- 趣味且引人入勝的故事情節，你將展開時光之旅！ -![character](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp) +![角色](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp) -每堂課包含作業、知識檢測和挑戰，協助你學習： -- 提示詞及提示詞工程 -- 文本和圖片應用程式生成 -- 搜尋應用程式 +每堂課均包含作業、知識測試及挑戰，協助你學習以下主題： +- 提示語及提示語工程 +- 文字與圖片應用生成 +- 搜尋應用 -請造訪 [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)提供回饋！ +> **老師們**，我們有[包含一些建議](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/student-page/?WT.mc_id=academic-77807-sagibbon)**，每堂課從課前測驗開始，接著閱讀課程內容，完成各種活動，並以課後測驗檢驗理解度。 -為了提升學習體驗，建議與同儕合作完成專案！鼓勵在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)中討論，我們的版主團隊會協助你解答問題。 +為強化學習體驗，請與同儕合作專案！我們歡迎在[討論區](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)，那裡有更多學習資源。 +若想進一步進修，强烈推薦探索[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 帳號建立一個使用此課程內容的新程式庫。 +#### 建立你的代碼庫 +為方便儲存作業，建議你建立本倉庫的個人副本。按下頁面頂端的 **Use this template** 按鈕，系統會在你的 GitHub 帳號內建立包含課程內容的新代碼庫。 -請依照以下步驟操作： -1. **Fork 程式庫**：點擊本頁右上方的「Fork」按鈕。 -2. **Clone 程式庫**： `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 中執行課程 +#### 在 Codespace 執行課程 -於你建立的程式庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**，將為你建立一個新的 Codespace 以便作業。 +於持有的此倉庫副本中點擊 **Code** 按鈕，選擇 **Open with Codespaces**，系統即為你建立新的 Codespace 工作環境。 ![Codespace](../../translated_images/zh-TW/createcodespace.0238bbf4d7a8d955.webp) #### 在本機電腦執行課程 -若要在本機執行此課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課 [程式語言簡介與開發工具介紹](../../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. 將你的程式庫 Clone 到電腦。可點擊 **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)功能。你可在此處下載 Visual Studio Code：[https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon](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) 中開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下指令，將 `` 替換為你剛剛複製的 URL： + + 接著，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) 並執行以下指令，將 `` 替換成剛剛複製的 URL： ```bash git clone ``` -2. 在 Visual Studio Code 中開啟資料夾。你可以點選 **File** > **Open Folder**，選擇剛剛克隆的資料夾。 +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) - 幫助你更快撰寫程式碼 +> * [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/) +- [課後測驗](https://ff-quizzes.netlify.app/web/) -> **關於測驗的說明**：所有測驗皆收錄於 Quiz-app 資料夾中，共有 48 組測驗，且每組包含三個問題。這些測驗可於 [此處](https://ff-quizzes.netlify.app/web/) 取得，測驗應用可在本機執行或部署至 Azure；請參照 `quiz-app` 資料夾中的說明。 +> **關於測驗的註解**：所有測驗均包含在 Quiz-app 資料夾中，共 48 場測驗，每場三題。可在[此處](https://ff-quizzes.netlify.app/web/)取得。測驗應用可以在本機運行或部署至 Azure；詳細說明請參考 quiz-app 資料夾。 ## 🗃️ 課程列表 -| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 | -| :-: | :---------------------------------------------------: | :----------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-----------------: | -| 01 | Getting Started | 程式設計入門與常用工具介紹 | 瞭解多數程式語言背後的基本原理，並認識協助專業開發者的軟體工具 | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Getting Started | GitHub 基礎與團隊協作教學 | 了解如何在專案中使用 GitHub，及如何與他人協同合作維護程式碼 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Getting Started | 無障礙設計 | 學習網頁無障礙設計的基礎 | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | JavaScript 資料類型 | JavaScript 資料類型的基礎知識 | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | 函式與方法介紹 | 瞭解函式與方法如何管理應用程式邏輯流程 | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | JavaScript 決策製作 | 學習如何使用決策結構在程式碼中建立條件 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | 陣列與迴圈 | 使用陣列與迴圈來操作資料 | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以打造線上生態瓶，專注於建立排版布局 | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 製作 CSS 以美化線上生態瓶，學習 CSS 基礎與響應式設計 | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 撰寫 JavaScript 以實作拖放式生態瓶介面，專注於閉包及 DOM 操作 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | 打字遊戲製作 | 學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯 | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器原理與操作 | 瞭解瀏覽器的工作原理與歷史，並搭建瀏覽器擴充功能的初始元件 | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 製作表單、呼叫 API 並儲存至本地儲存空間 | 撰寫瀏覽器擴充功能中的 JavaScript 元素以呼叫 API，並使用變數存儲於本地儲存空間 | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 背景程序與網頁效能優化 | 利用瀏覽器背景程序管理擴充功能圖示，理解網頁效能並學習優化方法 | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | 進階 JavaScript 遊戲開發 | 瞭解繼承、類別與組合模式以及發布/訂閱模式，為遊戲開發做準備 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas 繪圖 | 瞭解 Canvas API 以繪製螢幕上的元素 | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | 控制元素在螢幕上移動 | 探索如何利用直角座標系與 Canvas API 使元素產生運動 | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 實作元素之間的碰撞與反應，並透過按鍵觸發冷卻功能以確保遊戲效能 | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | 計分系統 | 根據遊戲狀態與表現執行數學計算 | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | 結束及重新開始遊戲 | 了解如何結束與重新啟動遊戲，包括清理資源與重設變數 | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | 網頁應用中的 HTML 範本與路由 | 學習如何使用路由與 HTML 範本來建立多頁網站架構 | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 認識表單建置及驗證流程 | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | 資料獲取與使用方法 | 瞭解資料如何流入與流出應用程式，包含取得、儲存與處理 | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 學會應用程式如何保留狀態，以及如何以程式化方式管理狀態 | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器 | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何打造自己的 AI 助手 | [AI Assistant project](./9-chat-project/README.md) | Chris | +| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 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，用於繪製畫面元素 | [畫到 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 基礎入門課程，搭配來自 "[Beginners Series to: 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 週課程結束時逐步變得複雜。 -雖然我們刻意避免介紹 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 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」來深入 Node.js。 -> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。非常歡迎您提供建設性的意見！ +> 請參閱我們的[行為準則](CODE_OF_CONDUCT.md)與[貢獻指南](CONTRIBUTING.md)。歡迎您提供建設性回饋！ -## 🧭 離線存取 +## 🧭 離線使用 -你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽此文件。將此倉庫 fork 至你的本機，並安裝 [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)找到。 ## 🎒 其他課程 -我們團隊還製作了其他課程！歡迎參考： + +我們團隊還製作其他課程！請參考： ### LangChain @@ -250,21 +260,21 @@ ## 尋求協助 -如果您在構建 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) -## 授權條款 +## 授權 -本儲存庫採用 MIT 授權條款。更多資訊請參閱 [LICENSE](../../LICENSE) 檔案。 +本專案庫採用 MIT 授權。詳情請參閱 [LICENSE](../../LICENSE) 檔案。 --- **免責聲明**： -本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。文件原文的原始語言版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或曲解負責。 +本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或誤譯承擔責任。 \ No newline at end of file