diff --git a/translations/zh-HK/.co-op-translator.json b/translations/zh-HK/.co-op-translator.json index 12a9a78bb..f88aa85c4 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T17:59:01+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:41:11+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-03-06T18:07:37+00:00", + "translation_date": "2026-03-27T22:47:08+00:00", "source_file": "AGENTS.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 5bbe7fc79..7b2b6cc6e 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 @@ -# 程式語言與現代開發工具入門 - -嗨，未來的開發者！👋 我可以告訴你一件每天都讓我起雞皮疙瘩的事情嗎？你即將發現，程式設計不只是關於電腦——它是擁有真正超能力，將你最瘋狂的想法變成現實！ +# 程式語言及現代開發工具入門 -你知道使用你最喜歡的應用程式、所有東西都完美契合的那一刻嗎？當你點一下按鈕，發生了某種神奇的事，讓你讚嘆「哇，他們怎麼做到的？」那麼，創造這種魔法的程式碼就是某個像你一樣的人寫的，可能當時他正坐在他最愛的咖啡店凌晨兩點，喝著第三杯特濃咖啡。你準備好了嗎？到了這堂課結束時，你不僅會了解他們怎麼做到的，還會迫不及待自己嘗試！ +嗨，未來的開發者！👋 我可以告訴你一件每天都令我激動到雞皮疙瘩的事嗎？你即將發現，程式設計不是只關乎電腦——它是擁有真正超能力去實現你最瘋狂創意的能力！ -說真的，如果你現在覺得程式設計很嚇人，我完全理解。當我剛開始時，我真的以為你必須是數學天才或從五歲就開始寫程式。但有件事徹底改變了我的想法：程式設計就像學習用新語言交談一樣。你從「哈囉」和「謝謝」開始，接著學會點咖啡，不久後就能展開深刻的哲學對話！只是這次，你是在和電腦對話，說實話？電腦是你最有耐心的對話夥伴——它們永遠不會批評你的錯誤，總是樂於嘗試再來一次！ +你知不知道那種感覺，當你用你最喜歡的應用程式時，一切剛剛好很順暢？當你點一下按鈕，發生了什麼魔法般的事情，令你忍不住想：「哇，他們怎麼做到的？」嗯，就像你一樣的人——可能正坐在他們最愛的咖啡店，在凌晨兩點喝著第三杯濃縮咖啡——寫出創造魔法的程式碼。而令你震驚的是：到這堂課結束時，你不但會明白他們如何做到，還會迫不及待想親自嘗試！ -今天，我們要探索那些讓現代網頁開發不只是可能，而是令人上癮的強大工具。我說的是 Netflix、Spotify 以及你最愛的獨立應用工作室的開發者每天使用的編輯器、瀏覽器和工作流程。最棒的是：這些專業級、業界標準的工具大部分都是免費的！ +說真的，如果你現在覺得程式設計令人害怕，我完全能理解。當我剛開始學習時，真心以為你必須是數學天才，或從五歲開始就寫程式才行。但徹底改變我看法的是：程式設計就像學習一種新語言的對話。你從「你好」「謝謝」開始，接著學會點咖啡，不久後就能討論深刻的哲學問題！不過在這個情況下，是你在跟電腦對話，說真心話？它們是你遇過最有耐性的對話夥伴——永遠不會因為你的錯誤而評判你，還總是樂意再試一次！ + +今天，我們將探索那些讓現代網頁開發不只是可能，更令人致迷的驚人工具。我說的正是像 Netflix、Spotify 和你喜歡的獨立應用工作室，每天都在用的編輯器、瀏覽器和工作流程。最令人開心的是：這些專業級、業界標準的工具大多完全免費！ ![Intro Programming](../../../../translated_images/zh-HK/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ```mermaid journey - title 你今日的編程之旅 - section 發現 - 什麼是編程: 5: You + title 你今日的編程旅程 + section 發掘 + 乜嘢係編程: 5: You 編程語言: 4: You 工具概覽: 5: You section 探索 代碼編輯器: 4: You - 瀏覽器與開發工具: 5: You + 瀏覽器與開發者工具: 5: You 命令行: 3: You section 練習 語言偵探: 4: You 工具探索: 5: You - 社群連繫: 5: You + 社區聯繫: 5: You ``` ## 先看看你已經知道什麼！ -在我們跳進有趣的部分前，我很好奇——你對這個程式世界已經知道什麼？如果你看著這些問題心想「我完全一頭霧水」，那不只是沒關係，簡直是完美！代表你正站在最正確的起點。把這次測驗想像成運動前的暖身——我們只是在熱身大腦肌肉！ +在跳進有趣的內容前，我很好奇——你對這個程式設計世界已經知道什麼？聽著，如果你看這些問題時想：「我完全一點概念都沒有」，這不只是無妨，還是最理想的狀態！代表你來對地方了。把這個小測驗當成運動前的伸展——我們只是熱身那群腦筋！ -[做這堂課前測驗](https://ff-quizzes.netlify.app/web/) +[做課前小測驗](https://ff-quizzes.netlify.app/web/) -## 我們即將一起踏上的冒險 +## 我們即將一起展開的冒險 -好吧，我對今天將要探索的內容超級興奮！說真的，我真希望能看到你理解某些觀念時的表情。這是我們將一起展開的奇妙旅程： +好，我真的超興奮地想跟你分享今天要探索的東西！說真的，我多希望能看到你當某些概念瞬間明白時的表情。以下是我們將一起踏上的精彩旅程： -- **程式設計到底是什麼（以及為什麼它超酷！）** — 我們將發現程式碼如何成為你周圍所有事物的隱形魔法，從那個怎麼知道是周一早晨的鬧鐘，到完美策展你 Netflix 推薦的演算法 -- **程式語言和它們驚人的個性** — 想像走進一個派對，每個人的超能力和解決問題的方法都截然不同。程式語言世界就是這樣，而你將會愛上認識它們！ -- **數位魔法的基本構成積木** — 把它們想成終極創意樂高套裝。當你理解這些積木如何拼合，你會發現你真的可以打造任何你想像的東西 -- **專業工具讓你感覺像得到魔法棒** — 我不是在誇張——這些工具真的會讓你覺得有超能力，最棒的是？它們是專業人士正在使用的同樣工具！ +- **程式設計究竟是什麼（以及為何它是最酷的事情！）**——我們會發現程式碼是包藏在你周圍一切中的無形魔法力量，從那個不知怎的知道是週一早上的鬧鐘，到能完美推介 Netflix 節目算法 +- 程式語言及其精彩的個性——想像走進一個派對，每個人都有截然不同的超能力和解決問題的方法。這就是程式語言的世界，你會愛上認識它們！ +- 成就數碼魔法的基本基石——把它們當作終極創意 LEGO 拼砌。當你懂得如何把這些組件融合，你會發現你能創造出任何你幻想得到的東西 +- **專業工具，讓你感覺像剛握到法師魔杖**——我不是在誇張，這些工具真的讓你感覺有超能力，最棒的是？它們跟專業人士用的是同一套！ -> 💡 **這裡有件事**：今天不要試著把所有東西都記起來！現在我只希望你感受到對未來可能性的興奮火花。細節會隨著我們一起練習自然留下——這才是真正的學習！ +> 💡 重點：今天先別著急要背下所有東西！現在，我只想讓你感受到對可能性的興奮火花。細節會隨著我們一起練習自然而然地記住——真正的學習就是這樣！ -> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/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。就像你有個朋友，流利掌握「人類創意」和「電腦邏輯」兩種語言——而且他永遠不累、不需要喝咖啡休息，也不會因為你連問兩次同一個問題就生氣！ +但讓我目瞪口呆的是：這些語言像有個世界上最有耐性的頂級翻譯員陪著你。你用人類大腦自然的語言表達想法，他們負責把所有複雜的細節翻譯成電腦真正懂的 0 與 1。就像有個全通「人類創意」和「電腦邏輯」的朋友——永遠不會累、永遠不需要喝咖啡、也不會因為你重複問同一個問題而評判你！ -### 熱門程式語言及用途 +### 流行程式語言與用途 ```mermaid mindmap @@ -102,13 +102,13 @@ mindmap 研究 Mobile Apps Java - 安卓 - 企業 + Android + 企業級 Swift iOS 蘋果生態系統 Kotlin - 現代安卓 + 現代 Android 跨平台 Systems & Performance C++ @@ -116,66 +116,66 @@ mindmap 性能關鍵 Rust 記憶體安全 - 系統編程 + 系統程式設計 Go 雲端服務 可擴展後端 ``` -| 語言 | 最適合 | 為何受歡迎 | +| 語言 | 擅長範疇 | 流行原因 | |----------|----------|------------------| -| **JavaScript** | 網頁開發，用戶介面 | 可直接在瀏覽器運行，驅動互動式網站 | -| **Python** | 資料科學，自動化，人工智慧 | 易讀易學，有強大函式庫 | -| **Java** | 企業應用，安卓應用 | 跨平台，適合大型系統 | -| **C#** | Windows 應用，遊戲開發 | 微軟生態系統支援強大 | -| **Go** | 雲端服務，後端系統 | 快速、簡潔，為現代運算設計 | +| **JavaScript** | 網頁開發、使用者介面 | 在瀏覽器中運行，推動互動網站 | +| **Python** | 數據科學、自動化、人工智能 | 易學易讀，強大函式庫 | +| **Java** | 企業應用、Android 應用 | 跨平台，適合大型系統 | +| **C#** | Windows 應用、遊戲開發 | 強大微軟生態支持 | +| **Go** | 雲端服務、後端系統 | 快速、簡潔，設計適合現代運算 | -### 高階語言 vs 低階語言 +### 高階語言與低階語言 -坦白說，這是我剛開始學程式時最讓我腦袋打結的概念，所以我想分享一個最後讓我懂得比喻——希望對你也有幫助！ +老實說，這是我剛開始學時腦袋瓦解的概念，現在我想用我終於懂得的比喻跟你分享——希望對你也有幫助！ -想像你去了一個不會說當地語言的國家，急需找廁所（我們都遇過吧？😅）： +想像你去一個不懂當地語言的國家，又急著找洗手間（我們大家都曾經吧？😅）： -- **低階程式語言** 就像你學會當地方言，能跟街角賣水果的阿嬤用文化典故、當地俚語和只有在地人懂的內部笑話聊天。超級厲害且效率極高⋯⋯如果你真通這語言的話！但你光是想找個廁所時，這就有點嚇人了。 +- 低階程式設計 就像你學會當地方言到可以跟賣水果的阿嬤用文化典故、當地俚語還有只有當地人知道的笑話聊天一樣。超猛又高效⋯⋯如果你懂得這些！但只想找洗手間時，這就太複雜了。 -- **高階程式語言** 就像你有個超棒的當地朋友懂你意思。你用簡單的英文說「我真的很想找洗手間」，他幫你翻譯文化差異、用你非當地人能理解的方式給你指路。 +- 高階程式設計 就像有個超棒的當地朋友完全懂你。你只要用簡單的英語說「我需要洗手間」，他就會幫你翻譯成當地語言，並給你簡單明瞭的指示，讓你這個外地人完全聽得懂。 -用程式語言來說： -- **低階語言**（像是組合語言或 C 語言）讓你能用超細節跟電腦硬件談判，但你得用機器般思考，說真的，這是個相當大的心態轉換！ -- **高階語言**（像 JavaScript、Python 或 C#）讓你用人的思考模式思考，後台幫你處理所有機器語言，而且還有超熱心的社群，有許多人記得第一次學時的挫折，願意真心幫助！ +程式設計的角度來看： +- 低階語言（像組合語言 Assembly 或 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"] + 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..."] + 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 -// 步驟 1：基本斐波那契設置 +// 第一步：基本斐波那契設置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,14 +183,14 @@ let next = 1; 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 +201,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**細節解析：** -- **用 `for` 迴圈**逐個位置遍歷數列 -- **顯示**每個數字與它的位置，使用模板字串格式化 -- **計算**下一個費氏數，將目前與下一個值相加 -- **更新**追蹤變數以進入下次迭代 +**這裡的運作拆解：** +- 用迴圈（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,59 +257,60 @@ 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⋯）實際上在大自然中隨處可見！你會在向日葵的螺旋排列、松果的圖案、鸚鵡螺殼的曲線甚至樹枝的生長方式中發現它。數學和程式碼幫助我們理解並重現自然用來創造美的模式，真是令人驚嘆！ -✅ **關於 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 點的披薩店」，讓手機幫你記住真正的號碼。變數也是這樣！它們就像有標籤的容器，你的程式可以存放資訊，之後用有意義的名稱取回。 +想想你手機的聯絡人清單。你不會背起每個人的電話號碼，而是會存成「媽媽」、「最好的朋友」或「凌晨2點前有外賣的披薩店」，讓手機幫你記住實際號碼。變數也是一樣！它們像是標籤容器，讓你的程式能儲存資訊，然後使用易懂的名稱來調用。 -這有趣的是：變數會隨著程式執行而改變（所以才叫「變數」嘛——你看他們多聰明）。就像你可能會更新披薩店聯絡資訊當你發現更好的外賣選擇，變數也能隨著程式得到新資訊或情況變化而更新！ +更酷的是：變數可以在程式執行時改變（這也是變數名的由來）。就如你發現更讚的披薩店時會更新聯絡人一樣，變數也能隨著程式運行時學到新資訊或情境變化而更新！ -來看看多簡單： +讓我給你看看這有多簡單又美妙： ```javascript // 第一步：建立基本變數 @@ -320,13 +321,13 @@ let isRaining = false; ``` **理解這些概念：** -- **將**不變的值儲存在 `const` 變數（例如網站名稱） -- **用** `let` 來儲存程式過程中會變的值 -- **指派**不同資料型態：字串（文字）、數字，布林值（true/false） -- **挑選**描述性名稱以說明每個變數裡存什麼 +- 存儲不會改變的數值用 `const`（像網站名稱） +- 使用 `let` 保存程式中可能會改變的值 +- 指定不同資料類型：字串（文字）、數字、布林值（真/假） +- 挑選具描述性的名稱，讓變數內容一目了然 ```javascript -// 第2步：使用物件來分組相關資料 +// 第 2 步：使用物件將相關數據分組 const weatherData = { location: "San Francisco", humidity: 65, @@ -334,13 +335,13 @@ const weatherData = { }; ``` -**上面做了以下事：** -- **建立**一個物件來將相關天氣資訊群組起來 -- **在一個變數名稱下**組織多筆資料 -- **用**鍵值對清晰標記每筆資訊 +**上述操作：** +- 建立一個物件來整合相關天氣資訊 +- 組織多筆資料在同一變數名稱底下 +- 使用鍵值對清楚標記每筆資訊 ```javascript -// 第三步：使用和更新變量 +// 第三步：使用及更新變量 console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); @@ -350,31 +351,31 @@ temperature = 68; ``` **理解各部分：** -- **用**模板字串和 `${}` 語法來顯示資訊 -- **用點記法**訪問物件屬性 (`weatherData.windSpeed`) -- **更新**用 `let` 宣告的變數以反映變化條件 -- **結合**多個變數來組成有意義的訊息 +- 用模板字串 `${}` 顯示資訊 +- 使用點符號（`weatherData.windSpeed`）存取物件屬性 +- 更新用 `let` 宣告的變數以反映變化情況 +- 結合多個變數以產生有意義的訊息 ```javascript -// 第4步：使用現代解構賦值讓代碼更簡潔 +// 第4步：使用現代解構賦值以使程式碼更整潔 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**你需要知道：** -- **用解構賦值**從物件中取出特定屬性 -- **自動建立**與物件鍵相同名稱的新變數 -- **省略**繁複的點記法來簡化程式碼 +**你需要知道的：** +- 利用結構賦值從物件中取出特定屬性 +- 自動建立與物件鍵同名的新變數 +- 避免反覆使用點符號，簡化程式碼 -### 控制流程：教你的程式思考 +### 控制流程：教你的程式學會思考 -這裡開始編程變得超乎想像！**控制流程**基本上就是教你的程式如何做出智慧判斷，就像你自己每天不假思索地做的事一樣。 +好了，這裡程式設計開始令人驚嘆！控制流程就是教你的程式如何做出聰明決策，像你每天不假思索地做的事情一樣。 -舉例說：今早你可能心想「如果下雨，我就帶傘；如果冷，我就穿外套；如果遲到了，我就跳過早餐，路上買咖啡」。你的大腦每天都自然地遵循這種 if-then 邏輯好多次！ +想想今天早上你可能這麼思考：「如果下雨就帶傘，如果冷就穿外套，如果快遲到了就跳過早餐改路上買咖啡。」你的大腦每天自然而然地重複數十次這種 if-then 邏輯！ -這正是讓程式感覺聰明又有生命力，而不是只照著無聊死板劇本走的原因。它們真能看狀況，評估發生什麼，然後適當回應。就像給你的程式一個能夠適應和做選擇的腦袋！ +這讓程式感覺聰明有生命，而非只是死板遵循無聊固定腳本。程式能查看狀況、評估情形並做出適當反應。這就像給程式一顆能適應並做選擇的大腦！ -想看這是多麼美妙嗎？讓我展示給你： +想看看它有多奇妙嗎？我來示範： ```javascript // 第一步：基本條件邏輯 @@ -388,11 +389,11 @@ if (userAge >= 18) { } ``` -**這段程式碼的功能：** -- **檢查**用戶年齡是否符合投票資格 -- **根據條件結果**執行不同的程式區塊 -- **計算**如果未滿18歲，距離投票資格還有多久 -- **針對每個情況**提供明確有幫助的反饋 +**這段程式碼做了這些事：** +- 檢查使用者年齡是否達投票資格 +- 根據條件結果執行不同程式區塊 +- 計算如果未滿18歲，還要多久能投票 +- 針對每種情況提供具體且有用的反饋 ```javascript // 第2步：使用邏輯運算子的多重條件 @@ -408,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**把發生的事拆解：** -- **用** `&&`（且）運算符組合多個條件 -- **用** `else if` 建立多重情況條件階層 -- **用** 最後的 `else` 處理所有可能狀況 -- **為每種狀況**提供明確且可執行的回饋 +**拆解內容：** +- 用 `&&`（且）運算符串接多個條件 +- 用 `else if` 建立多重情境條件層級 +- 用 最後的 `else` 處理所有剩餘狀況 +- 針對各種不同情況提供清楚可行的反饋 ```javascript -// 第3步：使用三元運算符的簡潔條件語句 +// 第3步：使用三元運算子簡潔條件表達式 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**你要記住：** -- **使用**三元運算子 (`? :`) 處理簡單兩種選項的條件 -- **先寫**條件，後跟 `?`，再是符合條件的結果，接著 `:`，最後是假條件的結果 -- **在需要根據條件指派值時**套用此模式 +**你需要記得：** +- 使用三元運算子（`? :`）表達簡單的二選一條件 +- 先寫條件，接著 `?`，然後是真結果，接著 `:`，最後是假結果 +- 當需要根據條件賦值時使用這種模式 ```javascript -// 第4步：處理多個具體情況 +// 第4步：處理多個特定情況 const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -446,51 +447,51 @@ switch (dayOfWeek) { } ``` -**這段程式完成：** -- **將變數值與多個指定案例比對** -- **將類似案例分組**（工作日與週末） -- **找到符合案例時**執行相應程式區塊 -- **包含**`default` 案例處理未預期值 -- **用** `break` 防止程式跑到下一案例 +**這段程式可做到：** +- 配對變數值至多個特定案例 +- 集合類似案例（工作日 vs 週末） +- 當匹配成功時執行對應區塊 +- 包含 `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)"] C -.-> H["📱 裝置測試
(響應式設計)"] @@ -504,108 +505,107 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 程式碼編輯器與整合開發環境：你的全新數碼摯友 +### 程式碼編輯器和整合開發環境：你的新數位好夥伴 -談談程式碼編輯器——它們很快會成為你最愛的 hangout 地方！把它們想像成你個人的程式創作天堂，你會花大部分時間在這裡雕琢與完善你的數碼作品。 +說到程式碼編輯器——它們真的會成為你最愛待著的地方！想像它們是你個人的程式碼聖地，你會花大部分時間在這裡打造和完善數位創作。 -但現代編輯器的厲害之處是：它們不只是高級文字編輯器。它們就像全年無休、最聰明又超支持你的程式導師。在你察覺之前抓住你的打字錯誤，建議改進讓你看起來像天才，幫助你理解程式每段的作用，甚至有些還能預測你要輸入什麼，主動幫你完成想法！ +但現代編輯器最神奇的地方是：它們不只是一個華麗的文字編輯器。它們就像一個全天候超聰明、全力支持你的程式導師。它們在你注意到之前抓住你的錯字、建議能讓你看起來像天才的改進、幫你理解每行程式的作用，有些甚至能預測你想打什麼，主動幫你補完！ -我記得第一次發現自動補完功能時，真有活在未來的感覺。你開始打字，編輯器立刻說：「嘿，你想用這個剛好符合需求的函式嗎？」就像有個能讀心的 coding 伙伴！ +我記得第一次發現自動補全時，感覺自己就像活在未來。你剛輸入一點，它就說：「欸，你是不是想用這個函式，正好符合你需求？」就像有個讀心術的程式夥伴！ -**這些編輯器怎麼這麼厲害？** +**這些編輯器厲害在哪裡？** -現代程式碼編輯器提供豐富功能讓你工作更高效： +現代編輯器提供豐富功能，能大幅提升生產力： -| 功能 | 功能說明 | 幫助原因 | +| 功能 | 作用 | 好處 | |---------|--------------|--------------| -| **語法高亮** | 不同程式碼區塊上色 | 讓代碼更易讀，錯誤更易察覺 | -| **自動補全** | 邊打字邊建議程式碼 | 加快編碼速度，減少錯字 | -| **偵錯工具** | 幫助找錯與修錯 | 節省大量除錯時間 | -| **擴充功能** | 添加專業功能 | 針對各種技術客製化編輯器 | -| **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 驅動的程式碼建議 +- 必裝擴充功能： + - [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) -現代瀏覽器包含了全面的開發套件： +現代瀏覽器包含全面的開發套件： -| 工具類別 | 功能 | 例子應用場景 | +| 工具類別 | 功能說明 | 範例用途 | |---------------|--------------|------------------| -| **元素檢查器** | 即時查看和編輯 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 上完美運作的東西，可能在 Safari 或 Firefox 會呈現不同。專業開發者會在所有主流瀏覽器上測試，以確保用戶體驗一致。 +- **[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 可能會看起來不一樣。專業開發者會跨主要瀏覽器測試，以確保用戶體驗一致。 -### 命令行工具：你的開發者超能力入口 -好吧，讓我們來談談命令行的完全真心話，因為我想讓你聽聽一個真正理解它的人怎麼說。當我第一次看到它——只是一個令人生畏的黑色螢幕和閃爍的文字——我真的想，「不行，絕對不行！這看起來像1980年代黑客電影的東西，我肯定不夠聰明！」😅 +### 命令行工具：打開你的開發者超能力大門 -但我一直希望當時有人告訴我，現在我要告訴你：命令行並不可怕——它就像和你的電腦進行直接對話一樣。把它想像成與通過華麗有圖片和菜單的應用來點餐（那當然很方便）相比，你走進你最愛的本地餐廳，廚師知道你喜歡什麼，只要你說「驚喜，來點厲害的」就能瞬間做出完美料理。 +好了，讓我們誠實談談命令行，因為我想讓你從一個真正懂的人那裡聽聽這件事。剛開始看到命令行這個黑屏閃爍著文字的東西時，我真的心想：「不行，絕對不行！這看起來像是1980年代駭客電影的東西，我肯定不夠聰明用這個！」😅 -命令行是開發者覺得自己像魔法師的地方。你打出幾個看似神奇的字（好吧，其實只是命令，但感覺超神奇！），按下 Enter，砰——你就建立了整個專案架構，安裝了全球最強大的工具，或者將你的應用部署到大家都能看到的網絡上。第一次感受到這種力量後，老實說，真的是會上癮的！ +但我當時真希望有人告訴我，也就是現在我要告訴你的：命令行不可怕——它其實就像是與電腦直接對話的方式。想像你點餐時，用漂亮的 App 看菜單（輕鬆又方便）跟你走進最愛的小餐館，廚師知道你喜歡什麼，只要你說「給我驚喜」就能做出完美料理，哪一個更酷？命令行就是那種讓開發者覺得自己是巫師的地方。你只要輸入幾個看似神奇的詞（好啦，它們其實是命令，但感覺像魔法），按下 Enter ，砰——你就建立起整個專案結構、從世界各地安裝強大的工具，甚至把你的應用部署到網路上，讓數百萬人看到。嘗到這股力量後，你會上癮的！ **為什麼命令行會成為你最愛的工具：** -雖然圖形介面適合很多任務，但命令行在自動化、精準和速度方面非常出色。許多開發工具主要通過命令行操作，學會高效使用它們能大幅提升生產力。 +圖形介面確實適合很多任務，但命令行在自動化、精準度和速度方面超強。許多開發工具主要透過命令行介面運作，學會有效使用它們能大幅提升你的生產力。 ```bash -# 第一步：建立並進入專案目錄 +# 第一步：建立並進入項目目錄 mkdir my-awesome-website cd my-awesome-website ``` -**這段程式碼作用是：** -- **建立** 一個名為「my-awesome-website」的新目錄給你的專案 -- **進入** 新建立的目錄開始工作 +**這段程式碼做了什麼：** +- 建立 一個叫做 "my-awesome-website" 的新資料夾給你的專案 +- 切換 進入剛建立的資料夾開始工作 ```bash -# 第2步：使用 package.json 初始化項目 +# 第2步：使用 package.json 初始化專案 npm init -y # 安裝現代開發工具 @@ -613,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步：建立專案結構及檔案 +# 步驟 3：建立項目結構和檔案 mkdir src assets echo 'My Site

Hello World

' > index.html @@ -628,156 +628,156 @@ 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 命令行 +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - 強大的腳本環境 +- **[命令提示字元](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - 傳統的 Windows 命令行 **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 內建終端機應用程式 -- **[iTerm2](https://iterm2.com/)** - 帶高級功能的強化終端機 +- **[終端機](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 隨時幫助你。凌晨兩點卡關？文件就像虛擬的溫暖擁抱，提供你完整且精確的答案。想學習熱門新功能？文件會有分步範例帶你慢慢理解。試圖搞懂為什麼某事情能那麼運作？你猜對了——文件會用讓你恍然大悟的方式解釋。 +把文件想像成全球最有耐心、知識最豐富的老師，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 瀏覽器開發資源 -- 漸進式網頁應用指南 -- 跨平台開發洞見 +- 漸進式網頁應用程式 (PWA) 指南 +- 跨平台開發心得 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - 有結構的學習課程 -- 業界專家視訊課程 -- 實作編碼練習 +- 業界專家授課影片 +- 實作練習題 -> 📚 **學習策略**：別試著背文件——而是學會如何有效導覽。把常用參考標記書籤，練習用搜尋功能快速找到特定資訊。 +> 📚 學習策略：不要死記文件，而是學會高效瀏覽。把常用參考書籤收藏，練習用搜尋功能快速找到關鍵資訊。 -### 🔧 **工具掌握檢核：你有什麼共鳴？** +### 🔧 **工具掌握小檢測：你最有共鳴的是？** -**花點時間想想：** -- 你最想先試用哪個工具？（沒有錯誤答案！） -- 命令行還讓你覺得害怕嗎？還是開始好奇了？ -- 你能想像用瀏覽器 DevTools 去窺探你最愛網站的幕後嗎？ +**花點時間思考：** +- 你最想先嘗試哪個工具？（沒有錯答案！） +- 命令行還覺得害怕嗎？還是開始好奇了？ +- 能想像用瀏覽器 DevTools 窺探你最愛網站的內幕嗎？ ```mermaid -pie title "開發者使用工具時間分佈" - "代碼編輯器" : 40 +pie title "開發者使用工具的時間分佈" + "程式碼編輯器" : 40 "瀏覽器測試" : 25 - "命令行" : 15 + "命令列" : 15 "閱讀文件" : 15 "除錯" : 5 ``` -> **趣味洞察**：大多數開發者花約40%時間在程式碼編輯器，但也別忘了花很多時間在測試、學習與解決問題。編程不只是寫程式碼，而是創造經驗！ +> 有趣訊息：多數開發者約40%時間待在程式碼編輯器，但你會發現測試、學習與問題解決也佔很大比例。寫程式不只是寫程式碼——而是在打造體驗！ -✅ **思考食糧**：有趣的觀點在這——你覺得用於建構網站（開發）的工具和設計它外觀的工具會有什麼不同？這就像建築師設計美麗房子和承包商實際建造的差別。兩者同等重要，但需要不同工具！這種思維會幫助你看到網站誕生的整體圖景。 +✅ 給你思考的點子：你覺得建造網站（開發）用的工具，跟設計它們外觀（設計）用的工具有何不同？就像建築師設計漂亮房屋，跟承包商直接蓋房子的差別。兩者都重要，但工具箱完全不同！這種想法會幫助你看到網站誕生的全貌。 -## GitHub Copilot 代理人挑戰 🚀 +## GitHub Copilot Agent 挑戰 🚀 -使用代理人模式完成以下挑戰： +使用 Agent 模式完成以下挑戰： -**描述：** 探索現代程式碼編輯器或 IDE 的功能，展示它如何提升你的網頁開發工作流程。 +**說明：** 探索現代程式碼編輯器或 IDE 的功能，並展示它如何提升你作為網頁開發者的工作流程。 -**提示：** 選擇一個程式碼編輯器或 IDE（例如 Visual Studio Code、WebStorm 或雲端 IDE）。列出三個幫助你更高效編寫、調試或維護程式碼的功能或擴充套件。並簡短說明它們如何助益你的工作流程。 +**提示：** 選擇一個程式碼編輯器或 IDE（如 Visual Studio Code、WebStorm，或雲端 IDE）。列出三個特性或擴充功能，說明如何幫助你更有效率地撰寫、偵錯或維護程式碼。每個功能附上簡短說明，解釋其對工作流程的優勢。 --- ## 🚀 挑戰 -**好的，偵探，準備好接受你的第一個案件了嗎？** +**偵探，準備好接你的第一個案件了嗎？** -既然你有了這扎實的基礎，接下來有個冒險要讓你看到編程世界究竟多樣又迷人。聽著——現在還不用寫程式，別緊張！把自己當作編程語言偵探，解決你第一個令人興奮的案件！ +現在你已經有了很棒的基礎，我這裡有個冒險任務，能幫你看到程式世界多麼多元又迷人。聽著——這不是寫程式的要求，所以不用有壓力！把自己當成程式語言偵探，踏上你的第一場刺激探案吧！ **你的任務，如果你願意接受：** -1. **成為語言探險家**：從完全不同的領域挑選三種程式語言——可能一個用於建網站，一個做移動應用，一個做科學數據處理。找找同一個簡單任務用每種語言寫成的範例。我保證你會驚訝它們用不同方式做同樣的事！ +1. 成為語言探險家：挑選三種完全不同宇宙的程式語言——或許一個用來建網站，一個用來寫手機 App，還有一個用於科學資料處理。找找相同簡單任務在每種語言的寫法。保證你會驚訝它們做同一件事的長相是多麼不同！ -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 看一些適合初學者的程式教學影片。很多優秀的創作者都記得剛開始的感受。 +- 考慮參加當地聚會或線上社群。相信我，開發者很樂意幫助新手！ -> 🎯 **請牢記，我希望你記得的是**：你不必一夜之間成為編程高手！現在，你只是開始認識這個即將成為你一部分的奇妙新世界。慢慢來，享受這段旅程，並記住——你崇拜的每一位開發者，都曾經正坐在你現在的位置，既興奮又可能有點不知所措。這是完全正常的，表示你正走在正確的路上！ +> 🎯 **聽著，這是我希望你記住的**：你不需要一夜之間成為編碼高手！現在，你只是開始了解你即將參與這個精彩新世界。慢慢來，享受過程，記得——每個你敬佩的開發者，曾經都坐在你現在的位置，既興奮又可能稍微有點不知所措。這完全正常，這表示你走在正確的路上！ @@ -785,52 +785,52 @@ pie title "開發者使用工具時間分佈" [Reading the Docs](assignment.md) -> 💡 **給你的作業小提示**：我非常期待看到你探索一些我們還未介紹過的工具！跳過我們已經提過的編輯器、瀏覽器和命令列工具，這裡有整個令人驚嘆的開發工具宇宙正等待著你去發掘。尋找那些仍在積極維護，且有活躍且有幫助的社群（這些通常有最佳教學，且當你卡住時會有熱心的人伸出援手）。 +> 💡 給你作業的一點提示：我真的很希望看到你去探索一些我們還沒說過的工具！跳過編輯器、瀏覽器和命令行工具這些我們已經講過的——那裡有一整個令人驚嘆的開發工具世界等著你去發現。尋找那些有活躍維護和充滿活力、樂於助人社群的工具（這些工具往往有最好的教學和當你卡住時能伸出援手的社群）。 --- -## 🚀 你的程式學習旅程時間表 - -### ⚡ **接下來 5 分鐘可以做的事** -- [ ] 收藏 2 至 3 個吸引你注意的程式語言網站 -- [ ] 如果還沒下載 Visual Studio Code，現在下載它 -- [ ] 打開瀏覽器的 DevTools（F12），隨便點擊任何網站看看 -- [ ] 加入一個程式社群（Dev.to、Reddit r/webdev 或 Stack Overflow） - -### ⏰ **這一小時可以完成的事** -- [ ] 完成課程後小測驗並反思你的答案 -- [ ] 安裝 GitHub Copilot 擴充到 VS Code -- [ ] 在線上用兩種不同程式語言寫一個「Hello World」範例 -- [ ] 觀看一支「開發者的一天」的 YouTube 影片 -- [ ] 開始你的程式語言偵探工作（來自挑戰） - -### 📅 **你的一週冒險計畫** -- [ ] 完成作業並探索 3 種新的開發工具 -- [ ] 在社群媒體追蹤 5 位開發者或程式帳號 -- [ ] 嘗試在 CodePen 或 Replit 製作一些小作品（即使只是「Hello, [你的名字]！」） -- [ ] 閱讀一篇開發者的程式旅程部落格文章 -- [ ] 參加線上聚會或觀看程式講座 -- [ ] 用線上教程開始學習你選的語言 - -### 🗓️ **你的一個月蛻變計畫** -- [ ] 建立你的第一個小專案（連簡單網頁也算！） -- [ ] 貢獻一個開源專案（從修正文檔開始） -- [ ] 指導一個剛開始程式旅程的人 -- [ ] 建立你的開發者個人作品集網站 -- [ ] 與本地開發者社群或讀書會建立連結 -- [ ] 開始規劃你的下一個學習目標 - -### 🎯 **最後的反思檢視** - -**在繼續前，花點時間慶祝：** -- 今天關於程式設計，有什麼事情讓你感到興奮？ -- 哪個工具或概念是你想先探索的？ -- 你對開始這個程式旅程有什麼感覺？ -- 現在你想問一位開發者什麼問題？ +## 🚀 你的程式旅程時間表 + +### ⚡ **接下來5分鐘內你可以做到的事** +- [ ] 收藏2-3個吸引你的程式語言網站 +- [ ] 如果還沒下載，下載 Visual Studio Code +- [ ] 開啟瀏覽器的開發者工具（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 @@ -838,17 +838,17 @@ journey section 本週 探索: 4: You 學習: 5: You - 聯繫: 4: You + 連繫: 4: You section 下個月 建立: 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 f1fcc4994..9a731fe3d 100644 --- a/translations/zh-HK/AGENTS.md +++ b/translations/zh-HK/AGENTS.md @@ -1,57 +1,57 @@ # AGENTS.md -## 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、各課程專案） -- 使用 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 ``` -### Quiz App Setup (Vue 3 + Vite) +### 測驗應用程式設定（Vue 3 + Vite） ```bash cd quiz-app npm install -npm run dev # 開始開發伺服器 -npm run build # 編譯生產環境版本 +npm run dev # 啟動開發伺服器 +npm run build # 建立生產版本 npm run lint # 執行 ESLint ``` -### Bank Project API (Node.js + Express) +### 銀行專案 API（Node.js + Express） ```bash cd 7-bank-project/api npm install npm start # 啟動 API 伺服器 -npm run lint # 執行 ESLint +npm run lint # 運行 ESLint npm run format # 使用 Prettier 格式化 ``` -### Browser Extension Projects +### 瀏覽器擴充功能專案 ```bash cd 5-browser-extension/solution @@ -59,224 +59,224 @@ npm install # 遵循瀏覽器特定的擴充功能載入指示 ``` -### Space Game Projects +### 太空遊戲專案 ```bash cd 6-space-game/solution npm install -# 在瀏覽器中打開 index.html 或使用實時伺服器 +# 在瀏覽器中打開 index.html 或使用 Live Server ``` -### Chat Project (Python Backend) +### 聊天專案（Python 後端） ```bash cd 9-chat-project/solution/backend/python pip install openai -# 設定 GITHUB_TOKEN 環境變數 +# 設定 GITHUB_TOKEN 環境變量 python api.py ``` -## Development Workflow +## 開發工作流程 -### For Content Contributors +### 對內容貢獻者 -1. **Fork 倉庫** 至您的 GitHub 帳號 -2. **Clone 您的 fork** 至本地端 -3. **建立新分支** 以做出變更 +1. **將資源庫 fork 到您的 GitHub 帳號** +2. **將 fork 複製到本地端** +3. 為您的修改建立新分支 4. 修改課程內容或程式碼範例 -5. 在相關專案目錄測試任何程式碼變更 -6. 依貢獻指南提交 pull request +5. 在相關專案目錄中測試程式碼修改 +6. 根據貢獻指南提交 pull requests -### For Learners +### 對學習者 -1. Fork 或 clone 這個倉庫 -2. 按順序進入課程目錄 -3. 閱讀每課程的 README 文件 -4. 在 https://ff-quizzes.netlify.app/web/ 完成課前測驗 -5. 練習課程資料夾內的程式碼範例 -6. 完成作業及挑戰 -7. 完成課後測驗 +1. Fork 或 Clone 此資源庫 +2. 依序瀏覽課程資料夾 +3. 閱讀每堂課的 README 檔案 +4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/ +5. 實作課程資料夾內的程式碼範例 +6. 完成作業與挑戰 +7. 參加課後測驗 -### Live Development +### 即時開發 -- **文件**：在根目錄執行 `docsify serve`（預設端口 3000） -- **Quiz App**：在 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` -## Testing Instructions +## 測試說明 -### Quiz App Testing +### 測驗應用程式測試 ```bash cd quiz-app npm run lint # 檢查代碼風格問題 -npm run build # 驗證構建是否成功 +npm run build # 驗證編譯成功 ``` -### Bank API Testing +### 銀行 API 測試 ```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 技巧的註解供學習者理解 +- 清晰的 class 命名規則 +- 註解說明 CSS 技術給學習者 ### Python -- 遵循 PEP 8 風格指南 -- 清晰且具教育意義的程式碼範例 -- 適時使用型別提示以輔助學習 +- 遵守 PEP 8 風格指南 +- 清楚且具教學性的程式碼範例 +- 需要時使用型別提示以利學習 -### Markdown Documentation +### Markdown 文件 -- 清楚的標題層級 -- 使用指定語言的程式碼區塊 +- 清晰的標題階層 +- 標明語言的程式區塊 - 連結至額外資源 -- 在 `images/` 目錄中放置截圖與圖片 -- 圖片使用替代文字提高可及性 +- `images/` 資料夾的截圖與圖片 +- 圖片具備替代文字以利無障礙 -### File Organization +### 檔案組織 -- 課程依序編號（1-getting-started-lessons、2-js-basics 等） -- 每個專案含有 `solution/`，並通常有 `start/` 或 `your-work/` -- 圖片存放於課程專屬的 `images/` 資料夾 -- 翻譯存放在 `translations/{語言代碼}/` 結構中 +- 課程依序編號 (1-getting-started-lessons, 2-js-basics 等) +- 每個專案含有 `solution/`，通常有 `start/` 或 `your-work/` +- 圖片存放於課程專屬 `images/` 資料夾 +- 翻譯存放於 `translations/{language-code}/` 結構 -## Build and Deployment +## 建構與部署 -### Quiz App Deployment (Azure Static Web Apps) +### 測驗應用程式部署（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 location**：`/quiz-app` -- **Output location**：`dist` -- **Workflow**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- 應用程式位置：`/quiz-app` +- 輸出位置：`dist` +- 工作流程：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Documentation PDF Generation +### 文件 PDF 產生 ```bash npm install # 安裝 docsify-to-pdf npm run convert # 從 docs 生成 PDF ``` -### Docsify Documentation +### Docsify 文件 ```bash npm install -g docsify-cli # 全域安裝 Docsify docsify serve # 在 localhost:3000 提供服務 ``` -### Project-specific Builds +### 專案專屬建構 -每個專案目錄可能有專屬建置流程： -- Vue 專案：使用 `npm run build` 產生生產用套件 -- 靜態專案：無需建置步驟，直接提供檔案 +每個專案目錄可能有自己的建構流程： +- Vue 專案：`npm run build` 建置正式包 +- 靜態專案：無建置步驟，直接提供檔案服務 -## Pull Request Guidelines +## Pull Request 指南 -### Title Format +### 標題格式 -使用清楚描述變更範圍的標題： -- `[Quiz-app] 為第 X 課新增測驗` -- `[Lesson-3] 修正生態缸專案錯字` +使用清晰且描述性標題顯示修改範圍： +- `[Quiz-app] 新增第 X 課測驗` +- `[Lesson-3] 修正生態球專案拼寫錯誤` - `[Translation] 新增第 5 課西班牙語翻譯` -- `[Docs] 更新設定說明` +- `[Docs] 更新設定指示` -### Required Checks +### 必要檢查事項 -提交 PR 前： +在提交 PR 前： -1. **程式碼品質**： +1. 程式碼品質： - 在受影響專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤和警告 + - 修正所有 lint 錯誤及警告 -2. **建置驗證**： +2. 建構驗證： - 執行 `npm run build`（若適用） - - 確保無建置錯誤 + - 確保無建構錯誤 -3. **連結驗證**： - - 測試所有 markdown 連結 - - 驗證圖片路徑正確 +3. 連結驗證： + - 測試所有 Markdown 連結 + - 確認圖片參考可用 -4. **內容審核**： - - 校對拼字與文法 - - 確認程式碼範例正確且具教育性 - - 確認翻譯保持原意 +4. 內容審查： + - 校對拼字與語法 + - 確認程式碼範例正確且具教學意義 + - 確保翻譯保持原意 -### Contribution Requirements +### 貢獻要求 -- 同意 Microsoft CLA（首次 PR 會自動檢查） -- 遵守 [Microsoft 共用開源行為準則](https://opensource.microsoft.com/codeofconduct/) -- 詳細指南請見 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 若有，請在 PR 描述中提及議題編號 +- 同意 Microsoft CLA（首次 PR 自動檢查） +- 遵從 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/) +- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md) +- PR 描述中引用相關 issue 編號（如適用） -### Review Process +### 審查流程 -- PR 由維護者與社群審查 +- PR 由維護者及社群共同審查 - 優先考量教育清晰度 -- 程式碼範例須符合現行最佳實踐 -- 翻譯需審核準確度與文化適應性 +- 範例程式要遵循當前最佳實務 +- 翻譯須審核準確性及文化適切性 -## Translation System +## 翻譯系統 -### Automated Translation +### 自動翻譯 -- 使用 GitHub Actions 搭配 co-op-translator 工作流程 -- 自動翻譯超過 50 種語言 -- 原始檔藏於主目錄 -- 翻譯檔藏於 `translations/{語言代碼}/` 目錄 +- 使用 GitHub Actions 與 co-op-translator 工作流程 +- 自動翻譯成 50 多種語言 +- 原文檔案在主目錄 +- 翻譯檔案存放於 `translations/{language-code}/` 目錄 -### Adding Manual Translation Improvements +### 手動翻譯改進 -1. 尋找 `translations/{語言代碼}/` 中的檔案 -2. 進行改善，並保持結構完整 -3. 確保程式碼範例持續正常 -4. 測試任何在地化的測驗內容 +1. 定位檔案於 `translations/{language-code}/` +2. 在保留結構的情況下進行改進 +3. 確保程式碼範例繼續可運作 +4. 測試任何本地化的測驗內容 -### Translation Metadata +### 翻譯元資料 -譯文檔包含元資料標頭： +翻譯檔包含元資料標頭： ```markdown ``` -## Debugging and Troubleshooting +## 除錯與故障排除 -### Common Issues +### 常見問題 -**Quiz app 啟動失敗**： +測驗應用無法啟動： - 檢查 Node.js 版本（建議 v14+） -- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install` -- 檢查埠口衝突（預設 Vite 使用 5173 埠） +- 刪除 `node_modules` 與 `package-lock.json`，重新執行 `npm install` +- 檢查埠號衝突（預設 Vite 使用 5173 埠） **API 伺服器無法啟動**： -- 確認 Node.js 版本符合最低要求（node >=10） -- 確認埠口未被佔用 -- 確保執行 `npm install` 安裝所有依賴 +- 確認 Node.js 版本符合最低要求 (node >=10) +- 檢查埠號是否已被使用 +- 確認所有依賴已安裝（`npm install`） -**瀏覽器擴充套件無法載入**： +瀏覽器擴充功能無法載入： - 確認 manifest.json 格式正確 - 查看瀏覽器主控台錯誤訊息 -- 遵循各瀏覽器特定擴充安裝指引 +- 遵循瀏覽器專屬擴充功能安裝指示 **Python 聊天專案問題**： - 確認已安裝 OpenAI 套件：`pip install openai` - 確認 GITHUB_TOKEN 環境變數已設定 -- 檢查 GitHub Models 的存取權限 +- 檢查 GitHub Models 存取權限 -**Docsify 不讀取文件**： -- 全局安裝 docsify-cli：`npm install -g docsify-cli` -- 從倉庫根目錄執行 -- 確認存在 `docs/_sidebar.md` +**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 瀏覽器擴充套件 +- 使用 VS Code 及 Live Server 擴充功能瀏覽 HTML 專案 +- 安裝 ESLint 與 Prettier 擴充以統一格式 +- 使用瀏覽器開發者工具偵錯 JavaScript +- Vue 專案安裝 Vue DevTools 瀏覽器擴充功能 -### Performance Considerations +### 性能考量 -- 支援超過 50 種語言的翻譯檔案多，完整克隆檔案較大 -- 對內容作業者可使用淺層克隆：`git clone --depth 1` -- 作英文內容時建議排除翻譯目錄以提升搜尋效率 -- 第一次運行建置流程可能較慢（npm install、Vite 建置） +- 多達 50+ 種語言翻譯檔數量多，完整 clone 體積大 +- 僅操作內容時可使用淺層 clone：`git clone --depth 1` +- 作英文內容時可排除搜尋翻譯檔 +- 首次執行建構較慢（npm install、Vite build） -## Security Considerations +## 安全考量 -### Environment Variables +### 環境變數 -- API 金鑰絕不可提交至版本庫 -- 使用 `.env` 檔案（已有列入 `.gitignore`） -- 各專案 README 文件說明必須的環境變數 +- API 金鑰絕不可提交到資源庫 +- 使用 `.env` 檔案（已加入 `.gitignore`） +- 專案 README 有文件說明所需環境變數 -### Python Projects +### Python 專案 - 使用虛擬環境：`python -m venv venv` -- 維持依賴最新 -- GitHub token 授權應儘量精簡 +- 維持依賴套件更新 +- GitHub Token 需具最低必要權限 -### GitHub Models Access +### GitHub Models 存取 -- 使用個人存取權杖（PAT）作為 GitHub Models 存取憑證 -- 權杖應儲存於環境變數中 -- 禁止將權杖或憑證提交至版本庫 +- 需要個人存取權杖（PAT）存取 GitHub Models +- 權杖以環境變數儲存 +- 絕不可將權杖或憑證提交 -## Additional Notes +## 補充說明 -### Target Audience +### 目標對象 -- 完全初學者的網頁開發學習者 +- 完全的網頁開發初學者 - 學生與自學者 -- 在課堂使用此課程的教師 -- 內容設計兼顧可及性及漸進式技能建立 +- 在教室使用此課程的教師 +- 內容設計注重無障礙及循序漸進技能建立 -### Educational Philosophy +### 教育理念 -- 專案導向學習法 -- 頻繁的知識檢核（測驗） +- 專案導向學習 +- 頻繁知識檢核（測驗） - 實作程式練習 -- 真實場景應用範例 -- 著重基礎優先於框架 +- 真實世界應用範例 +- 先掌握基礎，再談框架 -### Repository Maintenance +### 資源庫維護 -- 擁有活躍學習與貢獻社群 -- 定期更新依賴與內容 -- 維護者監控議題與討論 -- 翻譯更新自動化透過 GitHub Actions +- 活躍的學習者與貢獻者社群 +- 依賴與內容定期更新 +- 維護者監控 issues 與討論 +- 使用 GitHub Actions 自動翻譯更新 -### Related Resources +### 相關資源 -- [Microsoft Learn 模組](https://docs.microsoft.com/learn/) +- [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、資料科學、機器學習、物聯網課程 +- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用 -### Working with Specific Projects +### 操作特定專案 -個別專案詳細說明請參考 README： +詳細說明請參考以下專案 README： - `quiz-app/README.md` - Vue 3 測驗應用 -- `7-bank-project/README.md` - 加入驗證的銀行應用程式 -- `5-browser-extension/README.md` - 瀏覽器擴充套件開發 +- `7-bank-project/README.md` - 含身份驗證銀行應用 +- `5-browser-extension/README.md` - 瀏覽器擴充功能開發 - `6-space-game/README.md` - 基於 Canvas 的遊戲開發 -- `9-chat-project/README.md` - AI 聊天助理專案 +- `9-chat-project/README.md` - AI 聊天助手專案 -### Monorepo Structure +### Monorepo 架構 -雖非典型 monorepo，但此資料庫包含多個獨立專案： -- 每堂課自行封裝 -- 專案間不共用依賴 -- 個別專案獨立開發不互相影響 -- 想學完完整課程，請 clone 整個倉庫 +雖非傳統 monorepo，但此資源庫包含多個獨立專案： +- 每堂課程皆自成一格 +- 專案間未共用依賴 +- 可單獨開發專案，不影響其他專案 +- 可整體 clone 以體驗完整課程 --- **免責聲明**： -本文件使用人工智能翻譯服務 [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 deed887b8..9baf24a98 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T17:53:07+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:37:14+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-03-06T18:06:28+00:00", + "translation_date": "2026-03-27T22:45:59+00:00", "source_file": "AGENTS.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 f07432a94..e33f48e3d 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,116 +1,116 @@ -# 程式語言與現代開發工具簡介 +# Introduction to Programming Languages and Modern Developer Tools + +Hey there, future developer! 👋 Can I tell you something that still gives me chills every single day? You're about to discover that programming isn't just about computers – it's about having actual superpowers to bring your wildest ideas to life! -嗨，未來的開發者！👋 可以告訴你一件每天都讓我激動不已的事嗎？你即將發現，程式設計不只是電腦的事——它其實是擁有將你最瘋狂的想法實現的超能力！ +You know that moment when you're using your favorite app and everything just clicks perfectly? When you tap a button and something absolutely magical happens that makes you go "wow, how did they DO that?" Well, someone just like you – probably sitting in their favorite coffee shop at 2 AM with their third espresso – wrote the code that created that magic. And here's what's going to blow your mind: by the end of this lesson, you'll not only understand how they did it, but you'll be itching to try it yourself! -你知道用你最喜歡的應用程式時，那種一切都完美配合的時刻嗎？你點一下一個按鈕，然後發生了某種絕對神奇的事情，讓你忍不住說「哇，他們到底是怎麼做到的？」其實，那魔法就是被像你這樣的人寫出來的——可能正坐在他們最愛的咖啡店裡凌晨兩點，喝著第三杯濃縮咖啡。讓你驚奇的是：到本課程結束時，你不僅會了解他們怎麼做到的，而且你會迫不及待想自己試試看！ +Look, I totally get it if programming feels intimidating right now. When I first started, I honestly thought you needed to be some kind of math genius or have been coding since you were five years old. But here's what completely changed my perspective: programming is exactly like learning to have conversations in a new language. You start with "hello" and "thank you," then work up to ordering coffee, and before you know it, you're having deep philosophical discussions! Except in this case, you're having conversations with computers, and honestly? They're the most patient conversation partners you'll ever have – they never judge your mistakes and they're always excited to try again! -我明白如果現在程式設計讓你覺得害怕也很正常。當我剛開始時，我真的以為你得是數學天才或從五歲就開始寫程式才行。但以下這點完全改變了我的看法：程式設計就像學習一種新語言的溝通方式。你從「你好」和「謝謝」開始，然後學著點咖啡，不知不覺間，你就能有深刻的哲學討論！不過在這案例裡，你是跟電腦對話，而且說真的？它們是你能遇到最有耐心的對話夥伴——永遠不會因為你犯錯而評判你，還永遠樂意再試一次！ - -今天，我們要探索那些讓現代網頁開發不只是可能，而且令人著迷的工具。我說的就是 Netflix、Spotify 和你最愛的獨立應用程式工作室裡開發者每天都在用的編輯器、瀏覽器和工作流程。而且這會讓你忍不住跳舞的部分是：這些專業級、業界標準的工具大多數都是免費的！ +Today, we're going to explore the incredible tools that make modern web development not just possible, but seriously addictive. I'm talking about the exact same editors, browsers, and workflows that developers at Netflix, Spotify, and your favorite indie app studio use every single day. And here's the part that's going to make you do a happy dance: most of these professional-grade, industry-standard tools are completely free! ![Intro Programming](../../../../translated_images/zh-MO/webdev101-programming.d6e3f98e61ac4bff.webp) -> 速寫筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title 您今天的程式設計旅程 + title 你今日嘅編程旅程 section 發現 - 甚麼是程式設計: 5: You - 程式語言: 4: You - 工具概覽: 5: 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 + 社區聯繫: 5: You ``` -## 先來看看你已經知道什麼吧！ +## Let's See What You Already Know! -在進入有趣的部分之前，我很好奇——你對這個程式設計世界已經了解多少？聽著，如果你看到這些問題覺得「我真的完全不懂這些東西」，這不僅沒關係，反而非常完美！那代表你來對地方了。把這個小測驗想像成熱身運動——我們只是在讓大腦肌肉熱起來！ +Before we jump into the fun stuff, I'm curious – what do you already know about this programming world? And listen, if you're looking at these questions thinking "I literally have zero clue about any of this," that's not just okay, it's perfect! That means you're in exactly the right place. Think of this quiz like stretching before a workout – we're just warming up those brain muscles! -[參加課前小測驗](https://ff-quizzes.netlify.app/web/) +[Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/) -## 我們即將一起啟程的冒險 +## The Adventure We're About to Go On Together -好啦，我真的超興奮要跟你分享今天要探討的東西！說真的，我多希望能看到當你某些概念突然懂了時的表情。這裡是我們要一起走的精彩旅程： +Okay, I am genuinely bouncing with excitement about what we're going to explore today! Seriously, I wish I could see your face when some of these concepts click. Here's the incredible journey we're taking together: -- **程式設計到底是什麼（為什麼它超酷！）**——我們會了解程式碼如何是周遭一切無形魔法的核心，從那鬧鐘怎麼知曉星期一早晨到演算法如何精準推薦你喜歡的 Netflix 節目 -- **程式語言及其迷人的個性**——想像走進一場派對，每個人都擁有完全不同的超能力和解決問題的方式。那就是程式語言的世界，你會愛上認識它們！ -- **促成數位魔法的基礎構件**——把這當作最強大的創意 LEGO 組合。一旦你懂得這些組件怎麼組合，你會發現幾乎可以搭建你想像中的任何東西 -- **專業工具讓你像拿到魔法棒一樣的感覺**——我不是誇張，這些工具真的會讓你覺得自己有超能力，最棒的是？它們是專業人士也在用的！ +- **什麼是程式設計（以及它為何是最酷的事物！）** – 我們將發現程式碼其實是讓你周圍一切運作的隱形魔法，從那個神奇地知道是星期一早上的鬧鐘，到幫你精準推薦 Netflix 片單的演算法 +- 程式語言及其驚人的個性 – 想像一下參加一個派對，每個人都有完全不同的超能力和解決問題的方式。程式語言世界就是這樣，而你會很喜歡認識它們！ +- 數位魔法背後的基本構建積木 – 把這些想成終極創意的 LEGO 積木。一旦你理解這些積木如何拼合起來，你會發現自己能打造出任何想像得到的東西 +- 讓你感覺像獲得魔法杖的專業工具 – 我可不是說笑——這些工具真的會讓你感覺擁有超能力，而且它們就是專業開發者用的工具！ -> 💡 **重點是**：今天別試著硬記一切！我想你現在感受一下對可能性的興奮火花，細節會隨著我們一起實作自然記住——這才是真正的學習！ +> 💡 小提醒：今天不要試著把所有東西都記下！現在，我只希望你能感受到關於這個世界的可能性所激起的熱情。細節會隨著我們一起練習自然記住的——這才是真正的學習方式！ -> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/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 root((程式語言)) - 網頁開發 + Web Development JavaScript 前端魔法 互動式網站 TypeScript - JavaScript + 型別 - 企業應用程式 - 資料與人工智能 + JavaScript + 類型 + 企業應用 + Data & AI Python - 資料科學 + 數據科學 機器學習 自動化 R - 統計學 + 統計 研究 - 手機應用程式 + Mobile Apps Java - 安卓 + Android 企業 Swift iOS 蘋果生態系統 Kotlin - 現代安卓 + 現代 Android 跨平台 - 系統與效能 + Systems & Performance C++ 遊戲 高效能關鍵 @@ -119,43 +119,43 @@ mindmap 系統程式設計 Go 雲端服務 - 可擴展後端 + 可擴充後端 ``` -| 語言 | 最適合 | 為何流行 | +| Language | Best For | Why It's Popular | |----------|----------|------------------| -| **JavaScript** | 網頁開發、使用者介面 | 可在瀏覽器中執行，支援互動網站 | -| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，擁有強大函式庫 | -| **Java** | 企業應用、Android 應用 | 跨平台，穩健適合大型系統 | -| **C#** | Windows 應用、遊戲開發 | 微軟生態系統支援強大 | -| **Go** | 雲端服務、後端系統 | 快速簡單，專為現代運算設計 | +| **JavaScript** | Web development, user interfaces | Runs in browsers and powers interactive websites | +| **Python** | Data science, automation, AI | Easy to read and learn, powerful libraries | +| **Java** | Enterprise applications, Android apps | Platform-independent, robust for large systems | +| **C#** | Windows applications, game development | Strong Microsoft ecosystem support | +| **Go** | Cloud services, backend systems | Fast, simple, designed for modern computing | ### 高階語言 vs. 低階語言 -坦白說，這是我剛學時最大的困惑，所以我要分享那個讓我豁然開朗的比喻——希望對你也有幫助！ +好，這其實是我剛開始學習時最讓我頭痛的概念，我要分享一個讓我終於理解的比喻——希望對你也有幫助！ -想像你到了個不會說當地語言的國家，非常想找廁所（我們都有過吧？😅）： +想像你去一個不會當地語言的國家，急需找到廁所（我們都有這經驗，對吧？😅）： -- **低階程式設計** 就像學會當地方言到能跟街角賣水果的阿嬤用當地的文化典故、俚語和內行笑話聊天。超厲害、高效率……如果你流利的話！但就只是想找廁所的你會覺得很頭大。 +- 低階程式設計 就像你學會了當地的方言，能跟賣水果的阿婆用文化典故、當地俚語、只有當地人懂的笑話聊天。超厲害還非常有效率……如果你真的很流利！但當你只是想找廁所時，這很讓人不知所措。 -- **高階程式設計** 就像有個懂你的人當地朋友陪著你。你說「我真的需要找廁所」，他幫你翻譯文化脈絡，並用你的腦袋能理解的方式給你指路。 +- 高階程式設計 就像有個超棒的當地朋友完全懂你。你可以用很簡單的英文說「我很需要找廁所」，他幫你做文化翻譯並給你方向，讓你的外來腦袋完全理解。 -在程式語言裡： -- **低階語言**（像組合語言或 C）讓你能跟電腦的硬體層細緻交流，但你必須用機器思維來想，這……嗯，得改變不少思考方式！ -- **高階語言**（像 JavaScript、Python 或 C#）讓你以人類思考方式想事，機器語言的部分它們幫你處理。而且它們有一群超熱情的社群，大家記得當新手的困難，真心想幫助你！ +程式設計來說： +- 低階語言（像組合語言或 C）讓你能與電腦實體硬體進行非常細緻的對話，但你必須用機器思維，非常...我們說，是大腦的顛覆性轉換！ +- 高階語言（像 JavaScript、Python 或 C#）讓你用人類思考，背後他們幫你處理所有機器語音。更棒的是，這些語言通常都有溫暖友善的社群，他們記得自己剛開始的時候，也誠心想幫助你！ -猜猜我會建議你從哪裡開始？😉 高階語言就像訓練輪，可能你永遠不想摘掉它，因為它讓整個過程輕鬆太多！ +猜猜我建議你從哪種語言開始？😉 高階語言就像訓練輪，讓整個學習過程更愉快，你甚至不想摘掉它們！ ```mermaid flowchart TB - A["👤 人類思考：
'我想計算費波那契數列'"] --> B{選擇程式語言層級} + A["👤 人類思考：
『我想計算費波納契數列』"] --> B{選擇語言層級} - B -->|High-Level| C["🌟 JavaScript/Python
易讀易寫"] - B -->|Low-Level| D["⚙️ 組合語言/C
直接控制硬體"] + B -->|高階| C["🌟 JavaScript/Python
易於閱讀與撰寫"] + 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 -// 第一步：基本的費波納奇設置 +// 第一步：基本費波那契設置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,14 +183,14 @@ let next = 1; 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 +201,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**解析發生的事：** -- 用 `for` 迴圈**循環**遍歷序列中每個位置 -- 以模板字串格式**顯示**每個數字及其位置 -- **計算**下一個費波那契數字，將目前與下一數字相加 -- **更新**追蹤變數，準備進入下一次迭代 +**分解這裡發生了什麼：** +- 用 `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,39 +257,39 @@ back add r0,r1 end ``` -注意 JavaScript 版本幾乎像英語指令，而組合語言則用直接控制電腦處理器的神秘命令。兩者完成的任務完全一樣，但高階語言更容易讓人理解、撰寫與維護。 +你會注意到 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 -// 執行單一動作的基本陳述 +// 執行單一動作的基本語句 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**這段程式碼的作用是：** -- **宣告**一個常數變數用來保存使用者名稱 -- **印出**一段問候訊息到控制台輸出 -- **計算**並保存一個數學運算的結果 +**這段程式碼做了什麼：** +- 宣告一個常數變數來儲存使用者姓名 +- 顯示問候訊息到主控台輸出 +- 計算並儲存數學運算的結果 ```javascript // 與網頁互動的語句 @@ -297,17 +297,17 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**一步步來看發生了什麼：** -- **修改**瀏覽器分頁上顯示的網頁標題 -- **變更**整個頁面主體的背景顏色 +**一步一步發生了什麼：** +- 修改瀏覽器分頁上顯示的網頁標題 +- 更改整個頁面正文的背景顏色 -### 變數：程式的記憶系統 +### 變數：你程式的記憶系統 -好的，**變數**說實話是我最喜歡教的一個概念，因為它們很像你每天使用的東西！ +好，變數說實話是我最喜歡教的概念之一，因為它們跟你每天使用的東西很像！ -想想你手機上的聯絡人列表。你不會背所有人的電話號碼——你是儲存「媽媽」、「摯友」或「深夜外送披薩店」，讓手機幫你記住數字。變數也是一樣！它們像貼有標籤的容器，你的程式可以用有意義的名字存放資訊，之後再拿出來使用。 +想想你的手機聯絡人名單。你不會背下每個人電話號碼──你是把「媽媽」、「最好朋友」或「凌晨2點前還有外送的Pizza店」存下來，讓手機記住那串數字。變數也是一樣！它們是有標籤的容器，你程式可以把資料存進去，之後用有意義的名稱拿出來。 -很酷的是：變數能在程式執行時改變（所以才叫「變數」——看他們怎麼取名的吧？）。就像當你發現更讚的披薩店時會更新聯絡人，變數也可以隨著程式得到新資訊或情況改變而更新！ +超酷的是：變數會隨著程式執行而改變（所以才叫“變數”──你懂的吧？）。就像你發現更好的 Pizza 店會更新聯絡人一樣，變數會隨著程式獲取新資料或情況變化而更新！ 讓我示範這有多簡單： @@ -319,14 +319,14 @@ let temperature = 75; let isRaining = false; ``` -**了解這些概念：** -- **用** `const` 儲存不變的值（例如網站名稱） -- **用** `let` 存儲整個程式中會變動的值 -- **賦值**不同資料型態：字串（文字）、數字、布林值（真/假） -- **選擇**具描述性的變數名稱清楚表達內容 +**理解這些概念：** +- 用 `const` 變數儲存不變的值（例如網站名稱） +- 用 `let` 來儲存程式執行中可變的數值 +- 指定不同資料型態：字串（文字）、數字，和布林值（真/假） +- 選擇能說明變數內容的描述性名稱 ```javascript -// 第 2 步：使用物件來群組相關資料 +// 第 2 步：使用對象來分組相關數據 const weatherData = { location: "San Francisco", humidity: 65, @@ -334,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}%`); ``` -**你需要知道的是：** -- **用**解構賦值擷取物件中特定屬性 -- **自動**透過物件鍵名建立新變數 -- **簡化**程式碼避免重複點號操作 +**你需要知道：** +- 用解構賦值（destructuring）從物件中取出特定屬性 +- 自動建立同名變數與物件鍵匹配 +- 簡化程式碼避免重複使用點記法 ### 控制流程：教你的程式如何思考 -好了，這裡程式設計開始真正讓人驚豔！**控制流程**基本上就是教你的程式做出明智選擇，就像你每天不假思索地一樣。 +好了，這裡程式開始變得超級酷！控制流程就是教你的程式如何做聰明的決策，就像你每天根本不用想就知道要怎麼做一樣。 -想像這樣：今天早上你可能是這樣想，「如果下雨，我就帶傘；如果冷，我就穿外套；如果要遲到了，就跳過早餐直接買咖啡。」大腦每天自動無數次使用這種「如果…那麼」的邏輯！ +想像這樣：今早你可能經歷了這種流程：「如果下雨，就帶傘。若很冷，就穿夾克。如果要遲到了，就跳過早餐，到路上買咖啡。」你的大腦每天很自然地執行這樣的 if-then 邏輯好幾次！ -這讓程式看起來智能又靈活，而不是只是照著死板無聊的指令執行。它們能觀察情況，評估正在發生什麼，並做出適當反應。就像給你的程式裝了一顆能判斷的腦袋！ +這就是讓程式感覺聰明又活生生的地方，而不是死板的腳本。它們能夠看情況、評估狀況，並做出適當的回應。就像給你的程式一個能適應並做選擇的大腦！ -想看看這運作有多美妙？讓我給你示範： +想看看這有多美妙嗎？我示範給你： ```javascript // 第一步：基本條件邏輯 @@ -388,14 +388,14 @@ if (userAge >= 18) { } ``` -**這段程式碼做了這些事：** -- **檢查**使用者年齡是否符合投票資格 -- **根據**條件結果執行不同程式區塊 -- **計算**若未滿18歲，還需多久可投票 -- **提供**針對不同情況的具體幫助訊息 +**這段程式碼做了什麼：** +- 檢查使用者是否符合投票年齡 +- 根據條件結果執行不同區塊程式碼 +- 計算並顯示若未滿18歲需等待多久才能投票 +- 針對每種情況提供具體且有用的回饋 ```javascript -// 第2步：使用邏輯運算符的多重條件 +// 第2步：使用邏輯運算子的多個條件 const userAge = 17; const hasPermission = true; @@ -408,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步：處理多個特定情況 @@ -446,55 +446,55 @@ switch (dayOfWeek) { } ``` -**這段程式完成了：** -- **比對**變數值是否符合特定多個案例 -- **集合**類似案例（平日 vs. 週末） -- **執行**找到匹配時的程式區塊 -- **包含** `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)"] + A["💡 您的想法"] --> B["⌨️ 程式碼編輯器
(VS Code)"] B --> C["🌐 瀏覽器開發工具
(測試與除錯)"] C --> D["⚡ 命令列
(自動化與工具)"] D --> E["📚 文件說明
(學習與參考)"] - E --> F["🚀 驚人的網頁應用程式！"] + E --> F["🚀 優秀的網頁應用程式！"] - B -.-> G["🤖 人工智能助手
(GitHub Copilot)"] + B -.-> G["🤖 人工智能助理
(GitHub Copilot)"] C -.-> H["📱 裝置測試
(響應式設計)"] - D -.-> I["📦 套件管理器
(npm, yarn)"] + D -.-> I["📦 套件管理員
(npm, yarn)"] E -.-> J["👥 社群
(Stack Overflow)"] style A fill:#fff59d @@ -504,105 +504,105 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 程式碼編輯器和 IDE：你的新數碼摯友 +### 程式碼編輯器和整合開發環境：你的新數位好友 -來聊聊程式碼編輯器——它們很快就會成為你最愛待的地方！想像成你專屬的程式碼聖地，你會在這裡花最多時間打造和精進你的數碼創作。 +讓我們來談談程式碼編輯器──它們即將成為你最愛的造訪地點！把它們當成你的程式碼聖地，你會花大多時間在這裡打造和完美化數位作品。 -現代編輯器的厲害之處在於：它們不僅是華麗的文字編輯器。它們就像全天候陪在你身邊的最棒程式碼導師。它們在你發現打錯前就幫你抓錯，還建議你讓程式更酷的改進，幫助你理解每行程式碼的意義，有些甚至能預測你下一句想打的內容，並幫你完成它！ +但現代編輯器最神奇的地方是：它們不只是華麗的文字編輯器。就像有最聰明、支持你編碼的導師全天候陪伴。它們能在你還沒注意到前幫你抓出錯字，建議改善方法讓你看起來像個天才，幫你理解每段程式碼的作用，甚至有些甚至能預測你要輸入什麼並主動幫你補完！ -我記得第一次發現自動補全功能時，感覺自己活在未來。你開始打字，編輯器馬上跳出說「嘿，你是不是想用這個正好符合作業的函式？」真的是像有個讀心的程式夥伴！ +我記得剛發現自動補全功能時，覺得自己真是在未來世界活著。開始打字，編輯器就會說：「嘿，你是不是在想這個剛好能幫你完成需求的函式？」感覺就像有個讀心術師做你的程式夥伴！ -**這些編輯器厲害在哪裡？** +**這些編輯器有什麼令人驚豔的特色？** -現代程式碼編輯器提供令人印象深刻的功能來提升你的生產力： +現代程式碼編輯器提供一系列強大功能，提升你的生產力： -| 功能 | 功用 | 為什麼有幫助 | -|---------|--------------|--------------| -| **語法高亮** | 把程式碼部分分色 | 讓程式碼更易讀且容易發現錯誤 | -| **自動補全** | 打字時建議程式碼 | 加快撰寫速度並減少錯字 | -| **偵錯工具** | 幫助找出並修正錯誤 | 節省大量排錯時間 | -| **擴充套件** | 加入專門功能 | 客製化你的編輯器適合任何技術 | -| **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) - 程式碼拼寫檢查 +- 必裝擴充： + - [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/) - 即時全端網頁開發 +**雲端 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。這真是令人震驚！ +每次你右鍵點網頁選「檢查元素」，其實就是打開了一個隱藏世界的開發工具──它們的強大程度遠超我以前花上百元買的昂貴軟件。就像你平凡的廚房背後藏著一座職業主廚的實驗室，有個祕密通道等你開啟！ +第一次有人給我看瀏覽器開發工具時，我花了大約三個小時不停地點擊，然後一直在想「等等，它竟然還可以做到這個？！」你真的可以即時編輯任何網站，精確地看到每樣東西加載得有多快，測試你網站在不同裝置上的外觀，甚至像專業人士一樣調試 JavaScript。這真是令人目瞪口呆！ -**這就是為何瀏覽器是你秘密武器的原因：** +**這就是瀏覽器成為你秘密武器的原因：** -當你創建網站或網頁應用程式時，你需要看到它在真實世界中的外觀和行為。瀏覽器不僅顯示你的作品，還提供關於效能、可存取性和潛在問題的詳細反饋。 +當你創建網站或網頁應用程式時，你需要看到它在現實中的外觀和行為。瀏覽器不僅展示你的作品，還提供關於性能、可訪問性和潛在問題的詳細反饋。 #### 瀏覽器開發者工具 (DevTools) 現代瀏覽器包含全面的開發套件： -| 工具類別 | 功能說明 | 範例用途 | -|----------|----------|----------| -| **元素檢視器** | 即時查看和編輯 HTML/CSS | 調整樣式以立即看到效果 | -| **主控台** | 查看錯誤訊息和測試 JavaScript | 調試問題和試驗程式碼 | -| **網路監控器** | 追蹤資源載入狀況 | 優化效能和載入時間 | -| **可存取性檢查** | 測試無障礙設計 | 確保網站適合所有使用者 | -| **裝置模擬器** | 預覽不同螢幕尺寸 | 測試響應式設計無需多裝置 | +| Tool Category | What It Does | Example Use Case | +|---------------|--------------|------------------| +| **Element Inspector** | 即時查看和編輯 HTML/CSS | 調整樣式即刻看到效果 | +| **Console** | 查看錯誤訊息並測試 JavaScript | 調試問題和實驗程式碼 | +| **Network Monitor** | 跟蹤資源加載情況 | 優化性能和加載時間 | +| **Accessibility Checker** | 測試無障礙設計 | 確保網站適合所有用戶 | +| **Device Simulator** | 在不同螢幕尺寸上預覽 | 無需多部裝置即可測試響應式設計 | -#### 建議開發用瀏覽器 +#### 推薦用於開發的瀏覽器 -- **[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 初始化專案 @@ -613,241 +613,242 @@ 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 -# 第三步：建立項目結構和檔案 +# 第三步：建立專案結構和檔案 mkdir src assets echo 'My Site

Hello World

' > index.html -# 啟動開發伺服器 +# 開始開發伺服器 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/)** | 程式碼格式化 | 保持程式碼風格統一且易讀 | +| Tool | Purpose | Why You Need It | +|------|---------|-----------------| +| **[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)** 💻 - 強大的指令腳本環境 -- **[命令提示字元](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://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 — 傳統 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 開啟當前資料夾）。隨著熟悉度增加，你會自然掌握更多進階命令和自動化技巧。 -### 文件資料：你永遠取得的學習導師 +### 文件：你隨時可用的學習導師 -好了，我要分享一個小秘密，它會讓你對自己是新手的身份感到更安心：即便是最資深的開發者，也花大量時間閱讀文件。這不代表他們不懂事情，而是智慧的象徵！ +好，讓我分享一個秘訣，會讓你對初學者身份感覺好很多：即使是最有經驗的開發者，也會花大量時間閱讀文件。這不是因為他們不知道自己在做什麼——這其實是智慧的象徵！ -把文件看作是世界上最有耐心、最博學的老師，全天候隨時待命。凌晨兩點卡關了？文件就像溫暖的虛擬擁抱，給你正確答案。想學習大家都在談論的新功能？文件有逐步範例支援你。想知道為什麼某件事情是這樣運作？沒錯，文件會用淺顯易懂的方式解釋，讓你恍然大悟！ +想像文件就是擁有全球最有耐心、最博學老師的隨時支援。凌晨兩點卡關了？文件給你溫暖的虛擬擁抱與精確解答。想學習大家熱議的新功能？文件有逐步範例助你理解。想搞清楚為什麼一件事這樣運作？你猜對了——文件會用讓你恍然大悟的方式說明！ -改變我觀點的一件事是：網頁開發世界變化非常快，沒有人（重點是沒有人！）會把所有細節都記牢。我看到有超過 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 "開發者花在工具上的時間" - "程式編輯器" : 40 +pie title "開發人員使用工具的時間分配" + "代碼編輯器" : 40 "瀏覽器測試" : 25 - "命令列" : 15 + "命令行" : 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 上看一些適合初學者的編程影片。有許多優秀的創作者記得當初入門時的感受。 -- 考慮參加本地聚會或線上社群。相信我，開發者們很樂意幫助新人！ +> 🎯 **聽我說，我希望你記住：** 不指望你一夜之間成為程式高手！現在你只是開始認識這個即將成為你一部分的奇妙新世界。慢慢來，享受這段旅程，並且記得 — 每一位你敬佩的開發者曾經也坐在你現在的位置，感到既興奮又可能有點不知所措。這是完全正常的，這代表你做得對！ -> 🎯 **聽著，這是我希望你記得的**：你不需要一夕之間成為程式高手！現在，你只是在認識即將加入的這個精彩世界。慢慢來，享受過程，並記得——每一個你敬佩的開發者都曾坐在你現在的位置，既興奮又可能有些茫然。這很正常，也代表你做得很對！ -## 作業 +## 任務 [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 你的自信心建立旅程 - section 今天 - 好奇: 3: 你 - 不知所措: 4: 你 - 興奮: 5: 你 - section 這星期 - 探索中: 4: 你 - 學習中: 5: 你 - 聯繫中: 4: 你 + title 你的自信建立之旅 + section 今日 + 好奇: 3: You + 不知所措: 4: You + 興奮: 5: You + section 本週 + 探索中: 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-MO/AGENTS.md b/translations/zh-MO/AGENTS.md index c9e1f898c..b329a1d33 100644 --- a/translations/zh-MO/AGENTS.md +++ b/translations/zh-MO/AGENTS.md @@ -1,282 +1,282 @@ # AGENTS.md -## Project Overview +## 項目概述 -這是一個用於教授初學者網頁開發基礎的教育課程資源庫。課程是一個全面的 12 週課程，由 Microsoft Cloud Advocates 開發，包含 24 個涵蓋 JavaScript、CSS 和 HTML 的實作課程。 +這是一個教育課程存儲庫，旨在向初學者教授網頁開發基礎知識。該課程由微軟雲端推廣者開發，為期12週，包含24個實作課程，涵蓋JavaScript、CSS和HTML。 -### Key Components +### 主要組件 -- **教育內容**：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 專案） +- 教育內容：24個結構化課程，分為基於項目的模組 +- 實踐項目：生態瓶、打字遊戲、瀏覽器擴展、太空遊戲、銀行應用、代碼編輯器及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 ``` -### Quiz App Setup (Vue 3 + Vite) +### 測驗應用設置（Vue 3 + Vite） ```bash cd quiz-app npm install -npm run dev # 開始開發伺服器 -npm run build # 為生產環境建立 +npm run dev # 啟動開發伺服器 +npm run build # 為生產環境構建 npm run lint # 執行 ESLint ``` -### Bank Project API (Node.js + Express) +### 銀行項目API（Node.js + Express） ```bash cd 7-bank-project/api npm install npm start # 啟動 API 伺服器 npm run lint # 執行 ESLint -npm run format # 使用 Prettier 格式化 +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 或者用 Live Server +# 在瀏覽器中打開 index.html 或使用 Live Server ``` -### Chat Project (Python Backend) +### 聊天項目（Python後端） ```bash cd 9-chat-project/solution/backend/python pip install openai -# 設定 GITHUB_TOKEN 環境變量 +# 設置 GITHUB_TOKEN 環境變數 python api.py ``` -## Development Workflow +## 開發工作流程 -### For Content Contributors +### 內容貢獻者 -1. **Fork 該資源庫** 到你的 GitHub 帳號 -2. **將 fork 克隆** 到本地 -3. **建立新分支** 以進行修改 -4. 修改課程內容或程式碼範例 -5. 在相關專案目錄測試程式碼變更 -6. 按照貢獻指引提交 pull request +1. Fork本存儲庫至您的GitHub帳戶 +2. **本地克隆您的 fork** +3. 建立新分支以進行更改 +4. 修改課程內容或代碼範例 +5. 在相關項目目錄中測試代碼更改 +6. 按貢獻指南提交拉取請求 -### For Learners +### 學習者 -1. Fork 或克隆該資源庫 +1. Fork或克隆存儲庫 2. 按順序瀏覽課程目錄 -3. 閱讀每課的 README 文件 -4. 在 https://ff-quizzes.netlify.app/web/ 完成課前小測 -5. 實作課程資料夾中的程式碼範例 -6. 完成作業與挑戰 -7. 參加課後小測驗 +3. 閱讀每課程的README檔案 +4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/ +5. 學習課程中的代碼範例 +6. 完成作業和挑戰 +7. 參加課後測驗 -### Live Development +### 實時開發 -- **文件**：在根目錄執行 `docsify serve`（預設埠 3000） -- **Quiz App**：在 quiz-app 目錄執行 `npm run dev` -- **專案**：使用 VS Code Live Server 外掛服務 HTML 專案 -- **API 專案**：在各 API 目錄執行 `npm start` +- 文件服務：在根目錄執行 `docsify serve`（端口3000） +- 測驗應用：在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 build # 驗證構建是否成功 ``` -### Bank API Testing +### 銀行API測試 ```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 的地方使用自動格式化 +- 使用現代ES6+語法 +- 遵循項目中標準ESLint配置 +- 使用有意義的變量與函數名稱，便於學習理解 +- 添加註釋解釋概念給學習者 +- 在配置好的地方使用Prettier格式化 ### HTML/CSS -- 使用語意化的 HTML5 元素 +- 使用語義化HTML5元素 - 採用響應式設計原則 -- 清晰的 class 命名規範 -- CSS 技術附帶學習解說註解 +- 清晰的類命名規範 +- 添加CSS技巧註釋給學習者 ### Python -- 遵循 PEP 8 樣式指引 -- 提供清晰且具教育意義的程式碼範例 -- 需要時使用型別提示以輔助學習 +- 遵循PEP 8風格指導 +- 清晰且具教育意義的代碼範例 +- 在有助於學習處加上類型提示 -### Markdown Documentation +### Markdown 文檔 -- 清楚的標題階層結構 -- 指定語言的程式碼區塊 -- 附加資源連結 -- screenshots 與圖片存放於 `images/` 目錄 -- 圖片具有替代文字以提升無障礙性 +- 清晰的標題層級結構 +- 帶語言標示的代碼區塊 +- 提供附加資源鏈接 +- 在 `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 +## 編譯與部署 -### Quiz App Deployment (Azure Static Web Apps) +### 測驗應用部署（Azure 靜態網站） -quiz-app 已配置用於 Azure Static Web Apps 部署： +quiz-app已配置為Azure靜態網站部署： ```bash cd quiz-app npm run build # 建立 dist/ 資料夾 -# 在推送到 main 時透過 GitHub Actions 工作流程部署 +# 在推送至 main 時透過 GitHub Actions 工作流程部署 ``` -Azure Static Web Apps 配置： -- **App 位置**：`/quiz-app` -- **輸出位置**：`dist` -- **Workflow**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Azure 靜態網站配置： +- 應用位置：`/quiz-app` +- 輸出位置：`dist` +- 工作流程：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Documentation PDF Generation +### 文件PDF生成 ```bash npm install # 安裝 docsify-to-pdf npm run convert # 從 docs 生成 PDF ``` -### Docsify Documentation +### Docsify 文件服務 ```bash npm install -g docsify-cli # 全局安裝 Docsify 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] 修正 terrarium 專案打字錯誤` -- `[Translation] 新增第 5 課西班牙語翻譯` +使用清晰描述且說明更改範圍的標題： +- `[Quiz-app] 新增第X課測驗` +- `[Lesson-3] 修正生態瓶項目錯字` +- `[Translation] 為第5課新增西班牙語翻譯` - `[Docs] 更新設置指引` -### Required Checks +### 必須檢查 -提交 PR 前須: +提交PR前： -1. **程式碼品質**： - - 在受影響專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤及警告 +1. **代碼品質：** + - 在相關項目目錄執行 `npm run lint` + - 修復所有lint錯誤與警告 -2. **建置驗證**： - - 必要時執行 `npm run build` - - 確保無建置錯誤 +2. **構建驗證：** + - 如適用執行 `npm run build` + - 確保無構建錯誤 -3. **連結驗證**： - - 測試所有 markdown 連結 - - 確認圖片參考正常 +3. **鏈接核查：** + - 測試所有Markdown鏈接 + - 確認圖片引用有效 -4. **內容審查**： - - 校對拼字與文法 - - 確認程式碼範例正確且具教育意義 - - 確認翻譯保留原意 +4. **內容審核：** + - 校對拼字與語法 + - 確保代碼範例正確且有教育意義 + - 驗證翻譯準確且保持原意 -### Contribution Requirements +### 貢獻要求 -- 同意 Microsoft CLA（首個 PR 會自動檢查） -- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- 詳細規則參考 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如有議題，於 PR 描述中提及編號 +- 同意微軟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 +### 常見問題 -**Quiz app 無法啟動**： -- 檢查 Node.js 版本（建議 v14+） -- 刪除 `node_modules` 和 `package-lock.json` 後重新執行 `npm install` -- 檢查埠口衝突（預設 Vite 使用 5173） +測驗應用無法啟動： +- 檢查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 存取權限 +**Python聊天項目問題**： +- 確認安裝OpenAI套件：`pip install openai` +- 檢查GITHUB_TOKEN環境變量設定 +- 確保GitHub Models存取權限 -**Docsify 無法提供文件**： -- 全局安裝 docsify-cli：`npm install -g docsify-cli` -- 從資源庫根目錄執行 -- 確認 `docs/_sidebar.md` 存在 +**Docsify無法提供文件服務**： +- 全局安裝docsify-cli：`npm install -g docsify-cli` +- 從存儲庫根目錄執行 +- 確認存在 `docs/_sidebar.md` -### Development Environment Tips +### 開發環境建議 -- HTML 專案使用 VS Code Live Server 外掛 -- 安裝 ESLint 與 Prettier 擴充套件保持格式一致 -- 使用瀏覽器 DevTools 偵錯 JavaScript -- Vue 專案建議安裝 Vue DevTools 瀏覽器擴充 +- 使用帶Live Server擴展的VS Code瀏覽HTML項目 +- 安裝ESLint和Prettier擴展保持格式統一 +- 使用瀏覽器開發者工具調試JavaScript +- Vue項目建議安裝Vue DevTools瀏覽器擴展 -### Performance Considerations +### 性能考量 -- 有大量翻譯檔案（超過 50 種語言），完整複製較大 -- 僅工作內容時可用淺層複製：`git clone --depth 1` -- 編輯英文內容時排除翻譯目錄搜尋 -- 建置首次運行可能較慢（npm 安裝、Vite 建置） +- 超過50種語言的翻譯文件數量龐大，完整克隆體積較大 +- 若僅需內容，使用淺克隆：`git clone --depth 1` +- 編寫英文內容時排除翻譯目錄搜索 +- 初次構建（npm install、Vite build）可能較慢 -## Security Considerations +## 安全考量 -### Environment Variables +### 環境變量 -- API 金鑰絕不可提交至資源庫 -- 使用 `.env` 檔案（已包含於 `.gitignore`） -- 專案 README 記錄必要環境變量 +- API密鑰絕不可提交至存儲庫 +- 使用 `.env` 文件（已列入 `.gitignore`） +- 在項目README中記錄需要的環境變量 -### Python Projects +### Python項目 - 使用虛擬環境：`python -m venv venv` - 保持依賴更新 -- GitHub 令牌應只具必要最低權限 +- GitHub令牌應具最小必要權限 -### GitHub Models Access +### GitHub Models存取 -- 使用個人存取權杖 (PAT) 存取 GitHub Models -- 令牌存於環境變量中 -- 絕不可將令牌或認證提交至資源庫 +- 需要個人訪問令牌（PAT） +- 將令牌作為環境變量存儲 +- 絕不可提交令牌或憑證 -## Additional Notes +## 附加說明 -### Target Audience +### 目標受眾 -- 完全初學者學習網頁開發 -- 學生及自學者 -- 教師在課堂中使用此課程 -- 內容設計注重無障礙及技能循序漸進 +- 初學網頁開發的新人 +- 學生和自學者 +- 課堂使用此課程的教師 +- 內容設計符合無障礙及循序漸進的技能培養 -### Educational Philosophy +### 教育理念 -- 專案導向學習方式 -- 頻繁的知識測驗（小測） -- 實作編碼練習 -- 以真實案例示範應用 -- 先打穩基礎再學框架 +- 基於項目學習方法 +- 透過測驗持續檢驗知識 +- 實踐編碼練習 +- 範例具真實應用背景 +- 先掌握基礎，再學習框架 -### Repository Maintenance +### 存儲庫維護 -- 活躍的學習者及貢獻者社群 -- 定期更新相依元件及內容 -- 維護者監控議題與討論 -- 翻譯更新透過 GitHub Actions 自動化 +- 活躍的學習者與貢獻者社群 +- 定期更新依賴與內容 +- 維護者監控問題與討論 +- 翻譯更新透過GitHub Actions自動化 -### Related Resources +### 相關資源 -- [Microsoft Learn 模組](https://docs.microsoft.com/learn/) -- [Student Hub 資源](https://docs.microsoft.com/learn/student-hub/) -- 推薦學員使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用 +- [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、數據科學、機器學習、物聯網課程 -### Working with Specific Projects +### 專案使用說明 -各專案詳細指引見以下 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 Structure +### Monorepo 結構 -雖非傳統 monorepo，但此資源庫包含多個獨立專案： -- 每課單獨成章 -- 專案不共用相依套件 -- 可單獨作業不影響其它專案 -- 想獲得完整課程體驗，請克隆整個資源庫 +雖非傳統monorepo，該存儲庫包含多個獨立項目： +- 每節課皆自成一體 +- 項目間不共享依賴 +- 單獨作業不影響其他項目 +- 克隆整個存儲庫可完整體驗課程內容 --- **免責聲明**： -本文件係使用人工智能翻譯服務 [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/.co-op-translator.json b/translations/zh-TW/.co-op-translator.json index 922ab1201..e7e25231c 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T18:05:21+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:44:53+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-03-06T18:08:50+00:00", + "translation_date": "2026-03-27T22:48:22+00:00", "source_file": "AGENTS.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 d3e9fbb96..40d8875f1 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,26 +1,26 @@ -# 程式語言與現代開發工具入門 +# 程式語言與現代開發工具介紹 -嗨，未來的開發者！👋 我能告訴你一件每天都讓我感到興奮的事情嗎？你即將發現，程式設計不只是關於電腦 —— 它是擁有真正超能力，將你最狂野的創意變為現實的能力！ +嗨，未來的開發者！👋 我可以跟你分享一件每天都讓我起雞皮疙瘩的事嗎？你即將發現，程式設計不只是關於電腦——它是擁有真實超能力，讓你最狂野的點子成真的力量！ -你知道當你使用你最喜歡的應用程式時，一切完美契合的那一刻嗎？當你點擊一個按鈕，發生了某種絕對神奇的事情，讓你忍不住說「哇，他們到底是怎麼做到的？」那麼，正是像你一樣的人 —— 可能半夜兩點坐在他們最愛的咖啡店，喝著第三杯濃縮咖啡 —— 寫出了創造那份魔法的程式碼。接下來要讓你震驚的是：到本課程結束時，你不僅會了解他們如何做到，還會迫不及待想自己試試看！ +你知道那種使用你最愛的 app，所有東西完美契合的瞬間嗎？當你輕觸一個按鈕，神奇的事發生了，讓你驚呼「哇，他們到底怎麼做到的？」其實，正是像你這樣的人——可能坐在最愛的咖啡廳裡凌晨兩點，喝著第三杯濃縮咖啡——寫出讓魔法成真的程式碼。接下來要讓你震撼的是：在這堂課結束時，你不僅會了解他們是怎麼做的，還會迫不及待想自己試試看！ -聽著，如果程式設計現在感覺令人生畏，我完全理解。當我剛開始時，我真的以為你得是那種數學天才，或是從五歲開始寫程式的人。但有件事徹底改變了我的觀點：程式設計就像學會用一種新語言交談一樣。你先學「你好」和「謝謝」，接著學點單咖啡，不久後你就在進行深度哲學討論！只不過這次，你是在跟電腦交談，說真的？它們是你能遇過最有耐心的對話夥伴 —— 從不批評你的錯誤，並且總是樂於重試！ +說真的，我完全理解如果你現在覺得程式設計很可怕。剛開始時我也以為你一定要是數學天才，或是從五歲就開始寫程式的人才行。但真正改變我想法的是：寫程式就像學一種新語言的對話技巧。你先從「你好」和「謝謝」開始，再進階到點咖啡，最後你就能展開深度的哲學討論！不過這回你跟的是電腦對話，而說真的？它們是你能遇到最有耐心的對話夥伴——永遠不會因為你的錯誤評判你，且總是願意再嘗試！ -今天，我們要探索那些讓現代網頁開發不只是可能而且令人上癮的神奇工具。我說的是Netflix、Spotify，以及你最愛的獨立應用工作室每天都在使用的編輯器、瀏覽器和工作流程。而接下來會讓你跳起來歡呼的是：這些專業級、業界標準的工具大多完全免費！ +今天，我們要探索使現代網頁開發不只是可能，而是令人上癮的強大工具。我說的正是那些 Netflix、Spotify 和你最愛的獨立 app 工作室裡，開發者每天都在用的編輯器、瀏覽器和工作流程。還有這個好消息會讓你忍不住跳起舞來：大多數這些專業級、業界標準的工具都是完全免費的！ ![Intro Programming](../../../../translated_images/zh-TW/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 +> 筆記圖由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid journey title 你今天的程式設計旅程 - section 發現 + section 探索 什麼是程式設計: 5: You 程式語言: 4: You 工具概覽: 5: You - section 探索 + section 深入 程式編輯器: 4: You - 瀏覽器與開發者工具: 5: You + 瀏覽器與開發工具: 5: You 命令列: 3: You section 練習 語言偵探: 4: You @@ -29,62 +29,64 @@ journey ``` ## 讓我們看看你已經知道什麼！ -在我們跳入有趣的內容前，我很好奇 —— 你對這個程式設計世界已有多少了解？而且聽著，如果你看著這些問題想「我根本一點頭緒都沒有」，這不只沒問題，簡直完美！這代表你在正確的地方。把這個小考當作運動前的暖身 —— 我們只是要喚醒那顆大腦的肌肉！ +在開始有趣的部分之前，我很好奇—你對這個程式設計世界已經有什麼了解？如果你一看到這些問題就在想「我一點都不了解啊」，那不只沒問題，反而最好！這代表你來對地方了。把這個小測驗當成運動前的暖身，讓我們先暖暖腦袋！ + +[做課前測驗](https://ff-quizzes.netlify.app/web/) + +## 我們即將共同啟程的冒險 -[參加前置測驗](https://ff-quizzes.netlify.app/web/) +好啦，我對今天要探討的內容真心超興奮！說真的，我好想看到你某些概念「點亮」的表情。這段難以置信的旅程裡，我們將一起探索： -## 我們即將一起展開的冒險 +- **什麼是程式設計（為什麼它是最酷的東西！）**— 我們會發現程式碼就是那股看不見的魔力，驅動你周遭的一切，從那個不知怎麼知道是週一早上的鬧鐘，到完美分類你 Netflix 推薦的演算法 +- 程式語言與它們的驚人氣質— 想像你走進一場派對，每個人都擁有完全不同的超能力和解決問題的方式。這就是程式語言的世界，而你會愛上和它們見面！ +- 構成數位魔法的基本積木— 把它們想成終極創意的樂高組合。一旦了解這些零件如何結合，你會發現你可以建造任何你想像中的東西 +- 讓你感覺像拿到魔法師魔杖的專業工具— 我沒誇張，這些工具真的會讓你感覺自己有超能力，最棒的是？這些正是專業人士每天都在用的東西！ -好吧，我真的因為我們今天要探索的內容激動得跳腳了！說真的，我真希望我能看到你當某些概念突然理解時的表情。這是我們將一起踏上的精彩旅程： +> 💡 重點是：今天不要試圖把所有東西都背起來！我現在只希望你感受到那種可能性的火花。詳細內容會在我們一起練習過程中自然記得——這才是真正的學習！ -- **什麼是程式設計（以及為什麼它是最酷的東西！）** —— 我們將發現程式碼就是無形的魔法，驅動著你周圍的一切，從那個神秘辨識星期一早晨的鬧鐘，到完美為你推薦Netflix影片的演算法 -- **程式語言及其驚人的個性** —— 想像你走進一個派對，每個人都有完全不同的超能力和解決問題的方式。程式語言世界正是如此，你會愛上認識它們！ -- **構成數位魔法的基本積木** —— 把這些看作終極創意積木組。了解這些積木如何組合後，你會發現你能構建出任何你想像的東西 -- **專業工具讓你感覺像拿到巫師魔杖** —— 我不是誇張 —— 這些工具真的會讓你感覺自己有超能力，而最好的是？它們也是專業人士使用的同一套！ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/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 root((程式語言)) - Web 開發 + 網頁開發 JavaScript 前端魔法 互動式網站 @@ -101,18 +103,18 @@ mindmap 研究 行動應用 Java - 安卓 + Android 企業 Swift iOS - 蘋果生態系 + 蘋果生態系統 Kotlin - 現代安卓 + 現代 Android 跨平台 系統與效能 C++ 遊戲 - 效能關鍵 + 關鍵效能 Rust 記憶體安全 系統程式設計 @@ -120,41 +122,41 @@ mindmap 雲端服務 可擴展後端 ``` -| 語言 | 最適合 | 為何受歡迎 | +| 語言 | 最適合 | 為什麼受歡迎 | |----------|----------|------------------| -| **JavaScript** | 網頁開發、使用者介面 | 可於瀏覽器執行，驅動互動網站 | -| **Python** | 資料科學、自動化、人工智慧 | 易讀易學，強大函式庫支持 | -| **Java** | 企業應用、Android應用 | 跨平台，大型系統穩健 | -| **C#** | Windows應用、遊戲開發 | 強大微軟生態系支持 | -| **Go** | 雲端服務、後端系統 | 快速、簡潔，為現代運算設計 | +| **JavaScript** | 網頁開發，使用者介面 | 可在瀏覽器執行，驅動互動式網站 | +| **Python** | 資料科學，自動化，人工智慧 | 容易閱讀學習，擁有強大函式庫 | +| **Java** | 企業應用，Android 應用 | 平台獨立，大型系統強健 | +| **C#** | Windows 應用，遊戲開發 | 微軟生態系統支援強 | +| **Go** | 雲端服務，後端系統 | 速度快、簡單，針對現代運算設計 | -### 高階語言 vs. 低階語言 +### 高階語言與低階語言差異 -說實話，這個概念一開始真的讓我頭腦短路，所以我要分享讓我頓悟的類比 —— 我希望你也能有同感！ +說實話，這是我第一次學程式時，最讓我頭痛的概念，所以我想分享一個讓我真正理解的比喻——我也希望對你有幫助！ -想像你到一個不會講當地語言的國家，急需找最近的洗手間（我們都有過這種經驗，對吧？😅）： +想像你去一個不會說當地語言的國家，你非常急著找廁所（大家都有這種經驗吧？😅）： -- **低階程式設計** 就像學會當地方言，能跟角落賣水果的阿嬤用文化暗示、本地俚語和只有本地人成長才懂的笑話熱絡交談。非常厲害且高效率……如果你流利的話！但當你只想找廁所時，會相當崩潰。 +- 低階程式設計 就像你學會當地方言，連在街角賣水果的老奶奶說的文化典故、俚語和只有當地人懂的笑話都會聊。超厲害又有效率……如果你真的流利啦！但當你只是想找廁所時，這有點太多了。 -- **高階程式設計** 就像有個超棒的當地朋友懂你心思。你用簡單英語說「我真的想找洗手間」時，他們會處理所有文化差異，並用你理解的方式指路。 +- 高階程式設計 就像你有那位超棒的當地朋友幫忙。你用英語說「我需要找廁所」，他幫你處理文化差異，然後用簡單你能理解的方式給方向。 -換成程式語言術語： -- **低階語言**（像是組合語言或C）讓你能跟電腦硬體細緻對話，但你得以機器思考，嗯……這代表得大翻轉你的腦袋！ -- **高階語言**（像 JavaScript、Python 或 C#）讓你用人類思維，幕後它們替你翻譯成機器語言。此外，它們擁有超熱情的社群，裡面充滿了解當新手是怎麼一回事、且真心想幫助的人！ +用程式語言說： +- 低階語言（像組合語言或 C）讓你跟電腦的硬體直接溝通，但你必須用機器式思考……嗯，有點心理轉換大挑戰。 +- 高階語言（像 JavaScript、Python 或 C#）讓你用人類思維寫程式，它們幕後處理所有機器語言。還有，它們擁有非常熱情的社群，大家都記得剛開始學的感覺，且真心樂意幫助新人！ -猜我建議你從哪個開始？😉 高階語言就像訓練輪，你可能一輩子都不想拆掉，因為它們讓整個過程更愉快！ +你猜我會建議你從哪種語言開始呢？😉 高階語言就像有訓練輪一樣，讓整個體驗既有趣又順暢，你甚至都不想摘掉它！ ```mermaid flowchart TB - A["👤 人類思考：
'我想計算費氏數列'"] --> B{選擇程式語言層級} + A["👤 人類思考：
'我想計算斐波那契數列'"] --> B{選擇程式語言層級} - B -->|高階| C["🌟 JavaScript/Python
易於閱讀與撰寫"] + 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["🤖 電腦理解：
翻譯器處理複雜性"] + E --> G["🤖 電腦理解：
翻譯器處理複雜度"] F --> G G --> H["💻 相同結果：
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -163,18 +165,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; @@ -183,13 +185,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}`); @@ -200,14 +202,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**解析過程：** -- **用 `for` 迴圈** 遍歷序列中的每個位置 -- **用範本字串** 顯示每個數字與其位置 -- **計算** 下個費波那契數字 = 當前數字 + 下一個數字 -- **更新** 追蹤變數以進入下一輪迭代 +**逐步解說：** +- 使用 `for` 迴圈巡訪序列中每個位置 +- 使用模板字串顯示每個數字及其位置 +- 計算下一個費氏數字為目前數字與下一個數字的總和 +- 更新追蹤變數，進到下一次迭代 ```javascript -// 第3步：現代函數式方法 +// 步驟3：現代函數式方法 const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -223,13 +225,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**以上範例中，我們：** -- **用現代箭頭函數語法創建** 可重用函數 -- **建立** 陣列來儲存完整數列，而非一個個顯示 -- **透過陣列索引** 從之前的值計算每個新數字 -- **回傳** 完整序列，方便程式其他部分靈活使用 +**上面，我們：** +- 使用現代箭頭函式語法建立可重複使用的函式 +- 建立陣列儲存完整數列，而非逐一輸出 +- 透過陣列索引計算每個新數字 +- 把完整數列回傳，方便程式其他地方使用 -**低階語言（ARM組合語言）— 電腦友善：** +**低階語言（ARM 組合語言）—電腦友善：** ```assembly area ascen,code,readonly @@ -256,40 +258,40 @@ back add r0,r1 end ``` -注意 JavaScript 版本讀起來幾乎像英文指令，但組合語言版本使用隱晦的命令直接操控電腦處理器。兩者達成完全相同的任務，但高階語言對人類來說更容易理解、撰寫和維護。 +你可以看到 JavaScript 版本讀起來幾乎像英文指令，而組合語言則用晦澀的命令直接控制電腦的處理器。兩者完成相同任務，但高階語言更容易讓人讀懂、撰寫和維護。 -**你會發現的關鍵差異：** -- **可讀性**：JavaScript 使用像 `fibonacciCount` 這樣具描述性的名稱，而 Assembly 則使用像 `r0`、`r1` 這種晦澀的標籤 -- **註解**：高階語言鼓勵加上說明性的註解，使程式碼自我說明 -- **結構**：JavaScript 的邏輯流程符合人類思考問題的步驟 -- **維護**：針對不同需求更新 JavaScript 版本簡單明瞭 +**主要差異你會發現的是：** +- 可讀性：JavaScript 使用像 `fibonacciCount` 這樣描述性名稱，而組合語言使用像 `r0`、`r1` 這樣的神秘標籤 +- 註解：高階語言鼓勵解釋性註解，使程式碼具備自我說明能力 +- 結構：JavaScript 的邏輯流程符合人類逐步思考問題的方式 +- 維護性：根據不同需求更新 JavaScript 版本既直接又清晰 -✅ **關於費波那契數列**：這個絕美的數字模式（每個數字是前兩數的和：0、1、1、2、3、5、8……）在大自然中幾乎無處不在！你可以在向日葵的螺旋狀、松果的圖案、鹦鹉螺的曲線，甚至在樹枝的生長方式中找到它。數學和程式碼如何幫助我們理解並重新創造自然創造美的模式，真是令人驚嘆！ +✅ 關於費波那契數列：這個絕美的數字排列（每個數字等於前兩個數之和：0、1、1、2、3、5、8……）幾乎在自然界的每個角落都能找到！你會在向日葵的螺旋、松果的排列、鹦鹉螺的螺旋曲線，甚至樹枝的生長方式中看到它。數學與程式碼竟然能幫助我們理解並重現自然創造美的模式，真是令人震撼！ -## 造就奇蹟的構件 +## 創造魔法的基本元素 -好，現在你已經見識過程式語言的運作方式，讓我們拆解組成每個程式的基礎零件。可把它們想成你最愛食譜中的必備材料——只要你了解每個材料的用途，就能閱讀並撰寫幾乎任何語言的程式碼！ +好啦，現在你已經看到程式語言的實際運作方式，讓我們拆解組成每個程式最基本的元素。把它們想成你最愛食譜中的關鍵材料 — 一旦知道每個材料的用途，你就能閱讀和撰寫任何語言的程式碼了！ -這有點像學習程式的文法。還記得學校裡學過名詞、動詞和句子結構嗎？程式有它自己的文法，而且說真的，比英文文法還要合邏輯且寬容得多！😄 +這有點像學習程式語言的文法。還記得在學校學過名詞、動詞以及如何組成句子嗎？程式設計也有自己的文法，老實說，它比英文文法還要邏輯且寬容得多！😄 -### 陳述句（Statements）：一步步的指令 +### 陳述句：逐步指令 -先從 **陳述句** 講起，陳述句就像和電腦對話的句子。每個陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」、「停在那個車位」。 +先從 陳述句 開始 — 它們就像你和電腦對話中的獨立句子。每個陳述句告訴電腦做一件特定的事，就像給方向：「這裡左轉」、「紅燈停」、「停在那個位子」。 -我喜歡陳述句的地方是它們通常非常易讀。看這裡： +我喜歡陳述句的地方是它們通常很容易閱讀。看這個範例： ```javascript -// 執行單一動作的基本敘述 +// 執行單一步驟的基本敘述 const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**這段代碼做了什麼：** -- **宣告**一個常數變數用來存使用者姓名 -- **顯示**一則問候訊息在控制台輸出 -- **計算**並儲存數學運算的結果 +**這段程式碼做了什麼：** +- 宣告一個常數變數存放使用者名稱 +- 輸出一則問候消息到主控台 +- 計算並儲存一個數學運算的結果 ```javascript // 與網頁互動的語句 @@ -297,19 +299,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**一步步發生了什麼：** -- **修改**瀏覽器標籤頁中顯示的網頁標題 -- **更改**整個網頁主體的背景色 +**逐步來看這段程式：** +- 修改瀏覽器分頁中顯示的頁面標題 +- 改變整個頁面主體的背景顏色 -### 變數（Variables）：程式的記憶系統 +### 變數：你的程式記憶系統 -真的，**變數** 是我最喜歡教的概念之一，因為它們很像你每天都在用的東西！ +好啦，變數說實話是我最愛教的概念之一，因為它們實在太像你每天生活中會用到的東西了！ -想想你的手機通訊錄。你不記住每個電話號碼，而是存「媽媽」、「好朋友」或「營業到凌晨兩點的披薩店」，手機幫你記住真正的號碼。變數就是這樣！它們像帶標籤的容器，你的程式可以存資訊，然後用有意義的名字取回。 +想想你的手機通訊錄，你不會記得每個人的電話號碼 — 你會儲存「媽媽」、「摯友」或「外送到凌晨2點的披薩店」，讓手機記住真實號碼。變數就是一樣的東西！它們就像標籤容器，你的程式可以把資訊存在裡面，再用合理的名稱去取得。 -最酷的是：變數在程式執行時可以變化（所以叫變數嘛～）。就像你會更新披薩店的聯絡方式，變數也能隨著程式獲得新資訊或情況改變而更新！ +更棒的是：變數可以隨著程式執行而改變（這也是為什麼叫做「變數」——你看到了嗎？）。就好比你發現更棒的披薩店後更新聯絡方式一樣，變數能隨著程式取得新資訊或情況改變而更新！ -看這例子，超簡單而美妙： +讓我示範這有多麼簡單： ```javascript // 第一步：建立基本變數 @@ -320,13 +322,13 @@ let isRaining = false; ``` **理解這些概念：** -- **使用** `const` 儲存不會變的值（例如網站名稱） -- **使用** `let` 儲存程序中可能改變的值 -- **指派**不同資料型態：字串（文字）、數字、布林值（true/false） -- **挑選**清楚描述變數內容的名稱 +- 用 `const` 變數儲存不變的值（如網站名稱） +- 用 `let` 變數儲存程式中可能會變動的值 +- 指派不同的數據類型：字串（文字）、數字，以及布林值（true/false） +- 選擇有描述性的名稱，來說明每個變數儲存什麼 ```javascript -// 步驟 2：使用物件來群組相關資料 +// 步驟2：使用物件來組合相關的資料 const weatherData = { location: "San Francisco", humidity: 65, @@ -334,47 +336,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}%`); ``` -**你需要知道的技巧：** -- **用**解構賦值從物件中取出特定屬性 -- **自動建立**同名的新變數 -- **減少**繁瑣重複使用點記號法的代碼 +**你需要知道：** +- 用解構賦值从物件中提取特定屬性 +- 自動依物件鍵名創建同名變數 +- 簡化程式，避免重複使用點符號 -### 控制流程（Control Flow）：教程式思考 +### 控制流程：教你的程式如何思考 -這裡編程真的開始令人驚艷！**控制流程** 就是教你的程式做出聰明決策，就像你每天不假思索地做的事一樣。 +這部分讓程式設計真的讓人驚嘆不已！控制流程基本上就是教你的程式如何做出聰明的決策，就像你每天自然而然做的那樣。 -想像今天早上你可能想，「如果下雨，我帶傘；如果冷，我穿外套；如果快遲到了，就不吃早餐，路上喝咖啡。」你的大腦每天自然根據這種「如果-那麼」的邏輯運作好幾十次！ +想像一下：今天早上你可能遇過「如果下雨，我會帶傘；如果很冷，我會穿外套；如果遲到，我會跳過早餐並帶杯咖啡」的狀況。你的大腦每天會自動執行好多次這種 if-then（如果-則）邏輯！ -這讓程式感覺聰明且有活力，而不是死板又無聊。它們真的可以看情況、評估狀況，再做出適當反應。就像給程式一個能適應並做選擇的大腦！ +這就是讓程式變得智能、活靈活現的關鍵，不只是死板執行固定腳本。它們其實能觀察狀況、評估情況，做出合適反應。就像給程式一個能夠適應和做決策的大腦！ -想看看這種神奇怎麼運作？看這個： +想看看這怎麼完美實現嗎？跟我來： ```javascript // 第一步：基本條件邏輯 @@ -388,11 +390,11 @@ if (userAge >= 18) { } ``` -**這段代碼做了什麼：** -- **檢查**使用者是否達到投票年齡 -- **依條件執行**不同程式區塊 -- **算出**若未滿 18 歲需多久才能投票並顯示 -- **針對每種情況**給出明確且有用的回饋 +**這段程式碼做了什麼：** +- 檢查使用者年齡是否達投票資格 +- 根據條件執行不同的程式區塊 +- 計算並顯示還要多久才可投票（如果未滿18） +- 為每種情況提供具體且有幫助的回饋 ```javascript // 步驟 2：使用邏輯運算子的多重條件 @@ -408,22 +410,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**來拆解一下：** -- **用** `&&`（且）組合多條件 -- **用** `else if` 建立有層次的多條件判斷 -- **用** 最後的 `else` 包攬所有未涵蓋狀況 -- **給予**每種情況清楚且可操作的反饋 +**這裡的結構拆解：** +- 用 `&&`（且）符號結合多個條件 +- 用 `else if` 建立多層條件判斷結構 +- 用最後的 `else` 處理所有其他可能情况 +- 提供每種不同狀況清晰且具體的反饋訊息 ```javascript -// 步驟3：使用三元運算子的簡潔條件判斷 +// 第 3 步：使用三元運算符的簡潔條件判斷 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**你得記得：** -- **用** 三元運算子 (`? :`) 寫簡單的兩選一條件 -- **語法是**先寫條件、接著 `?`、接著條件為真時結果、然後 `:`、最後條件為假時結果 -- **用於**依條件選擇值時非常好用 +**你該記住的是：** +- 使用三元運算子 (`? :`) 處理兩種情況的簡單判斷 +- 先寫判斷條件，接著 `?`，再寫真值結果，最後 `:` 和假值結果 +- 當你需要根據條件賦值時，這個寫法非常實用 ```javascript // 第4步：處理多個特定情況 @@ -447,54 +449,54 @@ switch (dayOfWeek) { ``` **這段程式實現了：** -- **比對**變數值對應多個具體案例 -- **依案例性質**將相似狀況分組（平日 vs 假日） -- **找到匹配時**執行相對應程式區塊 -- **用** `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 就能從任何地方架設應用程式的雲端環境，以及具有 X 光視力般強大除錯工具。 +我坐在椅子上都快跳起來了，迫不及待想跟你分享這些，它們徹底改變了我們寫軟體的方式。像是用人工智慧幫你寫程式碼的助理（真的不是開玩笑！）、可以從有無線網路的任何地方建置整套應用程式的雲端環境，以及超高級的除錯工具，彷彿擁有程式的X光視覺。 -更刺激的是：這些不是你練習完就不用的「新手工具」。這些就是 Google、Netflix 和你愛的獨立 APP 工作室專業開發者就在用的真槍實彈。用它們你會覺得自己超級專業！ +最酷的是：這些可不只是新手用完就不用的工具，而是 Google、Netflix、你愛的獨立工作室，現今全世界開發者同時在用的專業級利器。用它們你會感覺自己專業度飆升！ ```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 @@ -504,108 +506,109 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 程式編輯器和 IDE：你新的數位最佳夥伴 +### 程式碼編輯器和整合開發環境：你的新數位好伙伴 -來談談程式編輯器——它們快變成你新歡的打卡聖地！把它想成你個人專屬的程式創作聖殿，絕大多數時間都會在這裡打造與完善數位作品。 +現在我們談談程式碼編輯器 — 它們即將成為你最喜歡待的地方！想像成你專屬的程式碼聖地，大部分時間都會在這裡創造與雕琢你的數位作品。 -現代編輯器的魔力就在於：它們不只是高級文字編輯器。它們就像有最聰明且支持你的程式導師 24 小時陪伴，錯字還沒出現就幫你抓到，抄捷徑讓你看起來像天才，還幫你理解每段代碼的作用，甚至有的能預測你下一步會打什麼，主動幫你完成！ +現代編輯器的魔力在於：它們絕不只是華麗的文字編輯器，而是像有個才華洋溢、24/7隨時在旁支持你的導師。它們會在你發現錯誤前就捕捉到、建議令你看起來超棒的改善，幫助你掌握每行程式的意義，部分甚至能預測你接下來要輸入什麼，主動幫你完成思緒！ -我還記得第一次用上自動補完時，覺得自己活在未來。一開始打字，編輯器就像在說：「嘿，你是在想用這個函式吧？它剛好能幫你做這件事！」這簡直就是讀心師當程式夥伴！ +我記得第一次體驗自動完成功能那感覺，簡直像活在未來。你敲字母，它就問：「你是不是想用這函數，它正好能做到你想的事？」感覺像有讀心術的程式碼夥伴！ -**讓編輯器如此厲害的祕密是什麼？** +**這些編輯器有多厲害？** -現代程式編輯器擁有豐富功能，大幅提升生產力： +現代程式碼編輯器擁有提升效率的多種強大功能： -| 功能 | 它做什麼 | 為什麼有用 | +| 功能 | 作用 | 好處 | |---------|--------------|--------------| -| **語法高亮** | 用顏色區分程式碼不同部分 | 讓程式碼更容易閱讀與找錯 | -| **自動補完** | 輸入時自動建議代碼 | 加快編程速度並減少錯字 | -| **除錯工具** | 幫你找錯誤並修正 | 省下數小時的除錯時間 | -| **擴充套件** | 加入專業功能 | 依技術需求客製化編輯器 | -| **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 助手** | 建議程式碼和解釋 | 加速學習與生產力 | + +> 🎥 影片資源：想看這些工具如何運作？快看這支 [Tools of the Trade video](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/) - 方便學習和分享程式碼 +**雲端 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） -現代瀏覽器包含完整的開發套件： +現代瀏覽器包含完善的開發套件： -| 工具類別 | 功能 | 範例使用情境 | -|----------|-------|--------------| -| **元素檢視器** | 即時檢視和編輯 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（簡單又好用）跟走進你最愛的本地餐廳，由了解你口味的主廚直接為你「驚喜料理」的差異。 +但我希望當時有人跟我說，也就是我現在想告訴你的：命令列並不可怕——它其實就像跟你的電腦直接對話。你可以把它想像成，用漂亮介面附帶圖片與選單點餐（很方便）和走進你最愛的在地餐廳，廚師聽你一句「驚喜推薦」就能做出完美料理的差別。 -命令列就是開發者施展魔法的地方。你輸入幾個看似神奇的字（其實只是指令，但就是覺得神奇！），按下回車，BOOM —— 你建立了整個專案結構，安裝了世界各地強大工具，或者把你的應用部署到網路上讓成千上萬人看到。你一嘗過這種力量，真的會上癮！ +命令列就是讓開發者感覺自己像超級法師的地方。你輸入幾個看起來像魔法的字（好啦，只是指令，但確實感覺超神奇），按下 Enter，砰——你可能創建了整個專案架構，安裝了來自世界各地的強大工具，或將你的應用部署到網路上，讓全世界看到。一旦嘗到這種力量，真的會讓人上癮！ **為什麼命令列會成為你最愛的工具：** -雖然圖形介面適合許多任務，但命令列在自動化、精準與速度方面無出其右。許多開發工具主要透過命令列操作，學會有效使用可以大幅提高生產力。 +雖然圖形介面很適合多數工作，但命令列在自動化、精準度和速度上表現卓越。很多開發工具主要透過命令列介面運作，學會高效使用它們能大幅提升你的生產力。 ```bash -# 第一步：建立並進入專案目錄 +# 第一步：創建並進入專案目錄 mkdir my-awesome-website cd my-awesome-website ``` -**這段程式碼的作用：** -- **建立** 一個名為 "my-awesome-website" 的新資料夾作為專案 -- **進入** 新建立的資料夾開始工作 +**這段程式碼的作用是：** +- 建立 一個名為 "my-awesome-website" 的新資料夾作為專案目錄 +- 進入 新建的目錄開始工作 ```bash -# 第2步：使用 package.json 初始化專案 +# 第 2 步：使用 package.json 初始化專案 npm init -y # 安裝現代開發工具 @@ -613,14 +616,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：建立專案結構和檔案 +# 第3步：建立專案結構與檔案 mkdir src assets echo 'My Site

Hello World

' > index.html @@ -628,203 +631,204 @@ echo 'My Site

Hello Wo npx vite ``` -**以上步驟，我們已經：** -- **組織** 專案，創建了獨立的原始碼和資源資料夾 -- **生成** 一個基本的 HTML 檔案，具備完整文件結構 -- **啟動** Vite 開發伺服器，實現即時重載與模組熱更換 +**在上述步驟中，我們：** +- 規劃 專案結構，分別建立原始碼與資源資料夾 +- 產生 基本的 HTML 檔案，包含完整文件結構 +- 啟動 Vite 開發伺服器，實現熱重載和模組熱替換 #### 網頁開發必備命令列工具 -| 工具 | 目的 | 為什麼你需要它 | -|------|------|-----------------| -| **[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/)** | 程式碼格式化 | 保持程式碼一致且易讀 | +| 工具 | 用途 | 你需要它的理由 | +|------|-------|-----------------| +| **[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 命令列 +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 — 強大腳本環境 +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 — 傳統命令提示字元 **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)** — 高階終端模擬器 +- **[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 開發者網路 (MDN)](https://developer.mozilla.org/docs/Web)** +**[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 提供） +- 現代網頁開發最佳實務 - 效能優化指南 -- 可及性與包容性設計原則 -- 實務案例研究 +- 無障礙與包容設計原則 +- 真實專案案例研究 -**[微軟開發者文件](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge 瀏覽器開發資源 - 漸進式網頁應用指南 - 跨平台開發見解 -**[Frontend Masters 學習路徑](https://frontendmasters.com/learn/)** +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - 結構化學習課程 -- 業界專家影音課程 -- 實作程式練習 +- 業界專家影片教學 +- 實戰練習題目 -> 📚 **研讀策略**：不要死背文件，而是學會高效導航。書籤常用參考資料，練習用搜尋功能快速找到訊息。 +> 📚 學習策略：不要死記文件內容，而是學會高效導航。收藏常用參考，練習利用搜尋功能快速找到關鍵資訊。 -### 🔧 **工具掌握自我檢測：你最有感的是什麼？** +### 🔧 **工具熟練度檢視：什麼讓你心動？** -**花點時間思考：** -- 你最想先嘗試哪個工具？（沒有錯的答案！） -- 命令列對你來說還是令人畏懼，還是開始有興趣了？ -- 你能想像用瀏覽器 DevTools 窺探你最愛網站的內幕嗎？ +**停下來想想：** +- 哪個工具是你最想先嘗試的？（答案沒有對錯！） +- 命令列還感覺令人畏懼，還是你開始好奇了？ +- 你能想像用瀏覽器 DevTools 偷偷看你最愛網站的背後祕密嗎？ ```mermaid -pie title "開發者使用工具的時間分配" +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. 成為語言探索者：選三種來自完全不同世界的程式語言——也許一種做網站的，一種做手機 App 的，還有一種用來做科學計算的。找出相同的簡單任務用這三種語言寫成的例子。我保證你會驚艷它們做同一件事卻長得多不一樣！ -2. **追溯起源故事**：每種語言有何獨特？酷事實是，每個程式語言都是因為有人想著「這有更好的方式來解決這個特定問題」。你能找出那些問題是什麼嗎？有些故事真的是非常吸引人！ +2. 挖掘起源故事：什麼讓各語言獨特？很酷的是，每種程式語言誕生時，設計師都想著：「我該有更好的方式解決這個特定問題。」你能找出那些問題是什麼嗎？有些故事真的很精彩！ -3. **認識社群**：感受各語言社群的熱情與友善。有些有百萬名開發者分享知識互助，有些較小但緊密且支持彼此。你會很喜歡看這些社群各自的個性！ +3. 遇見社群：觀察這些語言的社群有多歡迎新手並充滿熱情。有些社群擁有數百萬開發者分享知識、互相幫助，有些則較小而緊密團結。你會喜歡看到這些社群的各種個性！ -4. **憑直覺選擇**：哪種語言現在感覺最親近你？別擔心選擇「完美」與否——聽從你的直覺！這裡沒有錯的答案，也可以之後再探索其他。 +4. 跟隨直覺：現在哪個語言對你來說最友善？不用擔心做出「完美」決定——聽聽你的直覺！真心說，這裡沒有錯誤答案，你也能日後再去探索其他語言。 -**加碼偵探任務**：試著找出每種語言主力開發的主要網站或應用。保證讓你震驚，知道 Instagram、Netflix 或那款讓你停不下來玩的手機遊戲背後用的語言！ +額外偵探任務：試著找出哪些大型網站或 App 是用這些語言建構的。我保證你會對 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 上觀看幾個適合初學者的程式教學影片。很多優秀的創作者都記得剛開始時的心情。 +- 考慮加入當地聚會或線上社群。相信我，開發者很樂意幫助新手！ + +> 🎯 **聽我說，請記得**：沒有人會期望你一夜之間變成程式高手！現在你只是在認識這個你即將成為一部分的神奇新世界。慢慢來，享受這段旅程，並且記住——你敬佩的每一位開發者，都曾經坐在和你現在一樣的位置，滿心期待，也許還有點手忙腳亂。這很正常，代表你在正確的道路上！ -> 🎯 **聽我說，這是你要記住的事**：你不必期待自己一夜之間成為編程高手！此刻，你只是剛開始認識這個你即將加入的美妙新世界。放慢腳步，享受這段旅程，並記得——你崇拜的每位開發者，都曾經坐在你現在的位置上，既興奮又可能有些不知所措。這完全正常，也代表你走對了路！ ## 作業 [Reading the Docs](assignment.md) -> 💡 **給你作業的小提醒**：我非常希望看到你探索一些我們還沒介紹過的工具！跳過我們已經談過的編輯器、瀏覽器和命令列工具——外面還有一整個驚人的開發工具宇宙等待你發掘。找那些持續維護並擁有活躍且樂於助人的社群的工具（這類工具通常有最棒的教學，而且當你遇到困難需要幫助時，會有人支持你）。 +> 💡 關於你的作業的小提醒：我非常希望你去探索一些我們還沒介紹過的工具！跳過我們已經討論過的編輯器、瀏覽器和命令列工具——這個世界中有無數驚人的開發工具正等著你去發現。找那些仍積極維護，並且有活躍、樂於助人的社群的工具（這類工具通常有最棒的教學，也有最多人在你卡關時伸出援手）。 --- -## 🚀 你的程式學習旅程時間軸 - -### ⚡ **接下來 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, [你的名字]！」） -- [ ] 閱讀一篇開發者分享他們程式旅程的部落格文章 -- [ ] 參加一場線上聚會或觀看一次程式講座 -- [ ] 開始用線上教學學習你選擇的語言 - -### 🗓️ **你一個月的蛻變** -- [ ] 打造你的第一個小專案（即使是一個簡單的網頁也算！） -- [ ] 為開源專案做點貢獻（從文件修正開始） -- [ ] 指導剛開始學程式的人 +## 🚀 你的程式學習時間表 + +### ⚡ **接下來 5 分鐘你可以做的事** +- [ ] 書籤2-3個吸引你的程式語言官方網站 +- [ ] 如果還沒下載，立即下載 Visual Studio Code +- [ ] 打開瀏覽器的 DevTools（F12），隨意點擊任何網站 +- [ ] 加入一個程式社群（Dev.to、Reddit r/webdev，或 Stack Overflow） + +### ⏰ 接下來一小時你可以完成的事 +- [ ] 完成課後測驗並反思你的答案 +- [ ] 安裝 GitHub Copilot 擴充套件到 VS Code +- [ ] 在線上嘗試用兩種不同程式語言寫一個「Hello World」範例 +- [ ] 在 YouTube 上觀看一個「開發者的一天」影片 +- [ ] 開始你的程式語言偵探工作（來自挑戰題） + +### 📅 接下來一週的冒險 +- [ ] 完成作業並探索3種新開發工具 +- [ ] 追蹤5位開發者或程式帳號的社交媒體 +- [ ] 在 CodePen 或 Replit 嘗試做點小作品（甚至只是一個「Hello, [你的名字]！」） +- [ ] 閱讀一篇關於某人編程旅程的開發者部落格文章 +- [ ] 加入一場線上聚會或觀看一次程式講座 +- [ ] 用線上教學開始學習你選擇的程式語言 + +### 🗓️ 接下來一個月的蛻變 +- [ ] 建立你的第一個小專案（即使是簡單的網頁也算！） +- [ ] 貢獻開源專案（可以從修正文檔開始） +- [ ] 指導一位剛開始程式旅程的新手 - [ ] 建立你的開發者作品集網站 -- [ ] 與當地開發社群或讀書會建立連結 +- [ ] 與當地開發者社群或讀書會連結 - [ ] 開始規劃你的下一個學習里程碑 -### 🎯 **最後反思檢視** +### 🎯 最後的反思檢查 **在繼續前，花點時間慶祝一下：** -- 今天讓你對程式設計感到興奮的是什麼？ -- 你想先探索哪個工具或概念？ -- 你對展開這段程式學習旅程的感覺如何？ -- 現在你最想問一位開發者的問題是什麼？ +- 今天程式設計中，什麼事最讓你興奮？ +- 你最想先探索哪個工具或概念？ +- 關於開始這趟程式之旅，你感覺如何？ +- 你現在最想問開發者的一個問題是什麼？ ```mermaid journey @@ -839,14 +843,14 @@ journey 連結中: 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 f895e187c..91a741c21 100644 --- a/translations/zh-TW/AGENTS.md +++ b/translations/zh-TW/AGENTS.md @@ -1,47 +1,47 @@ # AGENTS.md -## 專案概述 +## 專案概覽 -這是一個針對初學者教授網頁開發基礎的教育課程資源庫。此課程是由 Microsoft Cloud Advocates 所設計的綜合性 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 節結構化課程，依專案模組組織 +- 實務專案：生態瓶、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器及 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 ``` -### 銀行專案 API（Node.js + Express） +### 銀行專案 API (Node.js + Express) ```bash cd 7-bank-project/api @@ -56,7 +56,7 @@ npm run format # 使用 Prettier 格式化 ```bash cd 5-browser-extension/solution npm install -# 遵循瀏覽器特定的擴充功能載入指示 +# 請遵循特定瀏覽器的擴充功能載入說明 ``` ### 太空遊戲專案 @@ -67,7 +67,7 @@ npm install # 在瀏覽器中打開 index.html 或使用 Live Server ``` -### 聊天專案（Python 後端） +### 聊天專案 (Python 後端) ```bash cd 9-chat-project/solution/backend/python @@ -76,35 +76,35 @@ pip install openai python api.py ``` -## 開發流程 +## 開發工作流程 -### 內容貢獻者 +### 對內容貢獻者 -1. **將資源庫 fork** 至您的 GitHub 帳號 -2. **在本機 clone 您的 fork** -3. **建立新分支** 進行修改 -4. 對課程內容或程式碼範例進行修改 -5. 在相關專案目錄測試程式碼變更 -6. 按照貢獻指南提交 pull request +1. **Fork 本資源庫** 到你的 GitHub 帳號 +2. **Clone 你的 fork** 至本機端 +3. 建立新分支 用來變更程式碼 +4. 修改課程內容或程式範例 +5. 在相關專案目錄中測試程式碼變更 +6. 依貢獻指南提交 pull requests -### 學習者 +### 對學習者 -1. Fork 或 clone 此資源庫 -2. 依序瀏覽課程目錄 -3. 閱讀各課程的 README -4. 完成課前測驗，網址：https://ff-quizzes.netlify.app/web/ -5. 練習課程資料夾中的程式碼範例 +1. Fork 或 clone 資源庫 +2. 依序進入各課程目錄 +3. 閱讀各課程 README 文件 +4. 完成 https://ff-quizzes.netlify.app/web/ 上的課前測驗 +5. 實作課程資料夾內的程式碼範例 6. 完成作業與挑戰 7. 進行課後測驗 -### 現場開發 +### 線上開發 -- **文件**：於專案根目錄執行 `docsify serve` (監聽 3000 埠) -- **測驗應用程式**：於 quiz-app 目錄執行 `npm run dev` -- **專案**：對 HTML 專案使用 VS Code Live Server 擴充功能 -- **API 專案**：於對應 API 目錄執行 `npm start` +- 文件：於根目錄執行 `docsify serve`（預設埠號 3000） +- 測驗應用程式：於 quiz-app 目錄執行 `npm run dev` +- 專案：以 VS Code Live Server 外掛提供 HTML 專案即時伺服 +- **API 專案**：於相應 API 目錄執行 `npm start` -## 測試說明 +## 測試指令 ### 測驗應用程式測試 @@ -119,81 +119,81 @@ 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 技巧以便學習 +- 採用語義化 HTML5 元素 +- 響應式設計原則 +- 清晰的 class 命名規範 +- 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 靜態網頁應用配置： -- **App 位置**：`/quiz-app` -- **輸出位置**：`dist` -- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- 應用程式位置：`/quiz-app` +- 輸出位置：`dist` +- 工作流程：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### 文件 PDF 生成 +### 文件 PDF 產生 ```bash npm install # 安裝 docsify-to-pdf @@ -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 指南 +## Pull Request 指引 ### 標題格式 -使用明確且描述性的標題指出變更範圍： +使用清楚的描述標題，表明更動領域： - `[Quiz-app] 新增第 X 課測驗` -- `[Lesson-3] 修正 terrarium 專案錯字` +- `[Lesson-3] 修正生態瓶專案錯字` - `[Translation] 新增第 5 課西班牙語翻譯` -- `[Docs] 更新安裝說明` +- `[Docs] 更新安裝指引` ### 必要檢查 提交 PR 前： -1. **程式碼品質**： +1. 程式碼品質： - 在受影響專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤與警告 + - 修正所有 lint 警告與錯誤 -2. **建置驗證**： - - 如適用，執行 `npm run build` +2. 建置驗證： + - 如需要執行 `npm run build` - 確認無建置錯誤 -3. **連結驗證**： +3. 連結驗證： - 測試所有 markdown 連結 - - 確認圖片引用正常 + - 確認圖片路徑正確 -4. **內容校對**： - - 文稿拼寫與文法檢查 - - 確認程式碼範例正確且具教育意義 - - 驗證翻譯保有原意 +4. 內容審查： + - 校對拼寫與語法 + - 確認程式碼範例正確且具教學性 + - 驗證翻譯保留原意 ### 貢獻要求 -- 同意 Microsoft CLA（首次 PR 進行自動檢查） -- 遵循 [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- 詳細指南見 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如適用，於 PR 描述中參考 issue 編號 +- 同意 Microsoft CLA（首次 PR 自動檢查） +- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/) +- 詳細規範見 [CONTRIBUTING.md](./CONTRIBUTING.md) +- 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. 測試本地化的測驗內容 +1. 找出 `translations/{language-code}/` 內對應檔案 +2. 在保持結構不變下進行改良 +3. 確保程式範例仍能正常執行 +4. 測試本地化測驗內容 -### 翻譯元數據 +### 翻譯元資料 -翻譯檔包含如下元資料標頭： +翻譯文件內含元資料標頭： ```markdown ``` -## 偵錯與問題排解 +## 除錯與疑難排解 ### 常見問題 -**測驗應用程式無法啟動**： -- 檢查 Node.js 版本（建議最低 v14） -- 刪除 `node_modules` 及 `package-lock.json` 後重新執行 `npm install` -- 檢查埠號衝突（預設 Vite 使用埠 5173） +測驗應用程式無法啟動： +- 檢查 Node.js 版本（建議 v14 以上） +- 刪除 `node_modules` 與 `package-lock.json`，重新執行 `npm install` +- 確認埠號無衝突（Vite 預設使用 5173） **API 伺服器無法啟動**： -- 確認 Node.js 版本符合最低要求（node >=10） -- 確認埠號未被占用 -- 確保所有依賴已安裝（`npm install`） +- 確認 Node.js 版本符合需求（node >=10） +- 檢查埠號是否已使用 +- 確保所有依賴安裝完整（npm install） -**瀏覽器擴充無法載入**： -- 確認 manifest.json 格式正確 -- 檢查瀏覽器控制台錯誤訊息 -- 遵循瀏覽器特定擴充安裝說明 +瀏覽器擴充功能載入失敗： +- 驗證 manifest.json 格式正確 +- 查看瀏覽器主控台錯誤訊息 +- 遵循瀏覽器擴充功能安裝指引 **Python 聊天專案問題**： - 確認已安裝 OpenAI 套件：`pip install openai` -- 確認已設定 GITHUB_TOKEN 環境變數 -- 檢查 GitHub Models 存取權限 +- 設定 GITHUB_TOKEN 環境變數 +- 確認 GitHub Models 存取權限 **Docsify 無法提供文件**： - 全域安裝 docsify-cli：`npm install -g docsify-cli` -- 從資源庫根目錄執行 -- 確認存在 `docs/_sidebar.md` +- 於資源庫根目錄執行 +- 確認 `docs/_sidebar.md` 存在 -### 開發環境建議 +### 開發環境小技巧 -- HTML 專案使用 VS Code Live Server 擴充 -- 安裝 ESLint 與 Prettier 擴充以維持格式一致 -- 使用瀏覽器開發工具偵錯 JavaScript -- Vue 專案可安裝 Vue DevTools 瀏覽器擴充 +- 使用 VS Code 及 Live Server 外掛以支援 HTML 專案即時預覽 +- 安裝 ESLint 與 Prettier 外掛以保持程式碼風格一致 +- 利用瀏覽器開發工具除錯 JavaScript +- Vue 專案則安裝 Vue DevTools 瀏覽器外掛 ### 效能考量 -- 翻譯檔案眾多（超過 50 種語言），完整 clone 會很大 -- 僅需內容時建議使用淺層 clone：`git clone --depth 1` -- 使用中英文內容時，建議排除翻譯檔案搜尋 -- 初次執行可能建置緩慢（npm install、Vite 建置） +- 多達 50 多種語言翻譯檔案，完整 clone 容量大 +- 僅作內容開發時可淺層 clone：`git clone --depth 1` +- 英文內容開發時排除翻譯目錄查詢 +- 第一次執行建置流程較慢（npm install、Vite build） ## 安全考量 ### 環境變數 -- API 金鑰絕不可被提交至資源庫 -- 使用 `.env` 檔案（已於 `.gitignore` 中忽略） -- 專案 README 中記錄必要環境變數 +- API 金鑰嚴禁提交至資源庫 +- 使用 `.env` 檔案（已列入 `.gitignore`） +- 各專案 README 中記錄必須環境變數 ### Python 專案 -- 使用虛擬環境：`python -m venv venv` -- 保持依賴更新 -- GitHub token 需設置最低必要權限 +- 建議使用虛擬環境：`python -m venv venv` +- 保持依賴套件最新 +- GitHub 令牌應設權限最小化 ### GitHub Models 存取 -- 需使用個人存取權杖 (PAT) -- 權杖應存放於環境變數 -- 絕不可提交權杖或憑證 +- 需使用個人存取代幣 (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