41 KiB

Raw Blame History Unescape Escape

程式語言與現代開發工具入門

嗨，未來的開發者！👋 我能告訴你一件每天都讓我感到興奮的事嗎？你即將發現，程式設計不僅僅是關於電腦的事情——它是一種真正的超能力，可以將你最狂野的想法變成現實！

你知道那種使用你最喜歡的應用程式時，一切都完美契合的感覺嗎？當你點擊一個按鈕，發生了一些絕對神奇的事情，讓你忍不住驚呼「哇，他們是怎麼做到的？」好吧，有人就像你一樣——可能坐在他們最喜歡的咖啡館裡，凌晨兩點喝著第三杯濃縮咖啡——寫下了創造這種魔法的程式碼。而最讓人驚訝的是：在這堂課結束之前，你不僅會明白他們是怎麼做到的，還會迫不及待地想自己試試！

聽著，如果你現在覺得程式設計很難，我完全理解。當我剛開始學習時，我真的以為你需要是某種數學天才，或者從五歲開始就一直在寫程式。但有件事徹底改變了我的看法：程式設計就像學習一種新語言的對話。你從「你好」和「謝謝」開始，然後慢慢學會點咖啡，最後你就能進行深刻的哲學討論了！只不過在這種情況下，你是在和電腦對話，說真的？它們是你能遇到的最有耐心的對話夥伴——它們從不批評你的錯誤，並且總是樂於再試一次！

今天，我們將探索那些讓現代網頁開發不僅成為可能，還讓人欲罷不能的不可思議工具。我說的是Netflix、Spotify以及你最喜歡的獨立應用程式工作室的開發者每天都在使用的編輯器、瀏覽器和工作流程。而最讓人開心的是：大多數這些專業級、行業標準的工具都是完全免費的！

Sketchnote由Tomomi Imura創作

來看看你已經知道什麼！

在我們開始有趣的內容之前，我很好奇——你對這個程式設計世界已經了解多少？聽著，如果你看到這些問題時心想「我完全不知道這些是什麼」，這不僅僅是可以接受的，這是完美的！這意味著你正處於正確的地方。把這個測驗想像成運動前的拉伸——我們只是在熱身你的大腦肌肉！

參加課前測驗

我們即將一起展開的冒險

好吧，我真的非常興奮能和你一起探索今天的內容！說真的，我真希望能看到你在理解某些概念時的表情。以下是我們即將一起踏上的精彩旅程：

什麼是程式設計（以及為什麼它是最酷的事情！）——我們將發現程式碼如何成為驅動你周圍一切事物的隱形魔法，從那個知道今天是星期一早上的鬧鐘，到完美推薦你Netflix節目的演算法。
程式語言及其驚人的個性——想像一下走進一個派對，每個人都有完全不同的超能力和解決問題的方式。這就是程式語言的世界，你會愛上認識它們！
創造數位魔法的基本構件——把這些想像成終極創意的樂高積木。一旦你了解這些部分如何組合在一起，你會意識到你可以建造任何你想像中的東西。
讓你感覺像是拿到魔法棒的專業工具——我不是在誇張——這些工具真的會讓你感覺自己擁有超能力，而最棒的是？它們就是專業人士每天使用的工具！

💡 重點是：今天不要試圖記住所有的細節！現在，我只希望你能感受到對未來可能性的興奮。隨著我們一起練習，細節會自然地記住——這才是真正的學習方式！

你可以在Microsoft Learn上學習這堂課！

那麼，程式設計到底是什麼？

好吧，讓我們來解答這個價值百萬美元的問題：程式設計到底是什麼？

我來講一個完全改變我對程式設計看法的故事。上週，我試圖向我媽媽解釋如何使用我們的新智能電視遙控器。我聽到自己說：「按紅色按鈕，但不是大紅色按鈕，是左邊的小紅色按鈕……不，你的另一邊……好，現在按住兩秒鐘，不是一秒，也不是三秒……」聽起來熟悉嗎？😅

這就是程式設計！它是一種藝術，能夠向一個非常強大的東西提供非常詳細的逐步指令，但需要完全清楚地表達。只不過，與其向你的媽媽解釋（她可能會問「哪個紅色按鈕？！」），你是在向電腦解釋（它只會完全按照你的指令執行，即使你說的並不是你真正的意思）。

當我第一次了解到這一點時，讓我大開眼界的是：電腦的核心其實非常簡單。它們只懂兩件事——1和0，基本上就是「是」和「否」或「開」和「關」。就這樣！但神奇的是——我們不需要像《駭客任務》裡那樣用1和0來交流。這就是程式語言的救星。它們就像世界上最棒的翻譯員，能將你完全正常的人類思維轉換成電腦語言。

而這也是每天早上讓我感到激動的原因：你生活中的每一件數位事物，都是由像你一樣的人創造的，他們可能穿著睡衣，手裡拿著一杯咖啡，在筆記本電腦上敲打著程式碼。那個讓你看起來完美無瑕的Instagram濾鏡？有人寫了那段程式碼。那個推薦你新最愛歌曲的演算法？開發者構建了它。那個幫你和朋友分攤晚餐費用的應用程式？是的，有人想「這太麻煩了，我想我可以解決這個問題」，然後……他們真的做到了！

當你學會程式設計時，你不僅僅是在學習一項新技能——你正在成為這個令人難以置信的問題解決者社群的一部分，他們每天都在思考：「如果我能建造一些能讓某人的一天變得更好一點的東西呢？」說真的，有什麼比這更酷的嗎？

✅ 趣味事實探索：當你有空的時候，找找看這個超酷的事情——你認為世界上第一位電腦程式設計師是誰？我給你一個提示：可能不是你想像中的人！這個人的故事非常有趣，顯示了程式設計一直以來都是關於創造性解決問題和跳出框架思考的。

程式語言就像不同口味的魔法

好吧，這聽起來可能有點奇怪，但請跟著我——程式語言就像不同類型的音樂。想想看：有爵士樂，流暢且即興；搖滾樂，強而有力且直接；古典音樂，優雅且結構化；還有嘻哈音樂，創意且表達力強。每種風格都有自己的氛圍、熱情的粉絲社群，每一種都適合不同的心情和場合。

程式語言的運作方式完全一樣！你不會用同一種語言來構建一個有趣的手機遊戲和處理大量氣候數據，就像你不會在瑜伽課上播放死亡金屬音樂（嗯，大多數瑜伽課啦！😄）。

但每次想到這一點，我都感到非常震撼：這些語言就像有世界上最耐心、最聰明的翻譯員坐在你旁邊。你可以用一種對人類大腦感覺自然的方式表達你的想法，而它們會處理所有將其轉換成電腦實際語言的複雜工作。就像有一個朋友，既精通「人類創意」又精通「電腦邏輯」——而且他們永遠不會累，永遠不需要咖啡休息，也永遠不會因為你問了同樣的問題兩次而批評你！

流行的程式語言及其用途

語言	最適合	為什麼受歡迎
JavaScript	網頁開發、使用者介面	在瀏覽器中運行，驅動互動式網站
Python	數據科學、自動化、人工智慧	易於閱讀和學習，擁有強大的函式庫
Java	企業應用程式、Android應用程式	平台獨立，適合大型系統
C#	Windows應用程式、遊戲開發	微軟生態系統支持強大
Go	雲端服務、後端系統	快速、簡單，為現代計算設計

高階語言 vs. 低階語言

好吧，這是我剛開始學習時讓我腦袋爆炸的概念，所以我要分享一個最終讓我理解的比喻——希望它也能幫助到你！

想像一下，你正在拜訪一個你不會說當地語言的國家，而你急需找到最近的洗手間（我們都經歷過，對吧？😅）：

低階程式設計就像學會當地的方言，能夠用文化參考、本地俚語和只有當地人才能理解的內部笑話與街角賣水果的奶奶聊天。非常令人印象深刻且高效……如果你恰好精通！但當你只是想找洗手間時，可能會感到非常壓力。
高階程式設計就像有一個超棒的當地朋友，他完全理解你。你可以用簡單的英文說「我真的需要找洗手間」，而他會處理所有文化翻譯，並以一種對你的非本地大腦完全合理的方式給你指路。

在程式設計術語中：

低階語言（如Assembly或C）讓你能與電腦的實際硬體進行非常詳細的對話，但你需要像機器一樣思考，這是……嗯，讓我們說這是一個相當大的心理轉變！
高階語言（如JavaScript、Python或C#）讓你像人類一樣思考，而它們處理所有背後的機器語言。此外，它們擁有非常友好的社群，充滿了記得自己曾經是新手並真心想幫助你的熱心人！

猜猜我會建議你從哪一種開始？😉 高階語言就像有訓練輪，讓整個學習過程更加愉快，你甚至不會想把它們拆下來！

讓我告訴你為什麼高階語言更友好

好吧，我要展示一些東西，完美地說明了為什麼我愛上了高階語言，但首先——我需要你答應我一件事。當你看到第一個程式碼範例時，不要驚慌！它看起來很嚇人是正常的。這正是我要說的重點！

我們將看同一個任務用兩種完全不同的風格寫出來。兩者都創造了所謂的斐波那契數列——這是一個美麗的數學模式，每個數字都是前兩個數字的總和：0, 1, 1, 2, 3, 5, 8, 13……（趣事：你會在自然界的各個地方找到這個模式——向日葵種子螺旋、松果圖案，甚至是星系的形成！）

準備好看差異了嗎？我們開始吧！

高階語言（JavaScript）——人類友好：

// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;

console.log('Fibonacci sequence:');

這段程式碼的作用：

宣告一個常數來指定我們想生成多少個斐波那契數字
初始化兩個變數來追蹤序列中的當前數字和下一個數字
設置定義斐波那契模式的起始值（0和1）
顯示一個標題消息來標識我們的輸出

// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
  console.log(`Position ${i + 1}: ${current}`);
  
  // Calculate next number in sequence
  const sum = current + next;
  current = next;
  next = sum;
}

分解這裡發生的事情：

循環通過使用for循環遍歷序列中的每個位置
顯示每個數字及其位置，使用模板字面格式
計算下一個斐波那契數字，通過相加當前值和下一個值
更新我們的追蹤變數以進入下一次迭代

// Step 3: Modern functional approach
const generateFibonacci = (count) => {
  const sequence = [0, 1];
  
  for (let i = 2; i < count; i++) {
    sequence[i] = sequence[i - 1] + sequence[i - 2];
  }
  
  return sequence;
};

// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);

在上面，我們已經：

創建一個可重用的函數，使用現代箭頭函數語法
構建一個數組來存儲完整的序列，而不是逐一顯示
使用數組索引來從前面的值計算每個新數字
返回完整的序列，以便在程式的其他部分靈活使用

低階語言（ARM Assembly）——電腦友好：

 area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end

注意，JavaScript版本幾乎像英文指令一樣易讀，而Assembly版本使用了直接控制電腦處理器的晦澀命令。兩者完成了完全相同的任務，但高階語言更容易讓人類理解、編寫和維護。

你會注意到的主要差異：

可讀性：JavaScript使用描述性名稱如fibonacciCount，而Assembly使用晦澀的標籤如r0、r1
註解：高階語言鼓勵使用解釋性註解，使程式碼自我記錄
結構：JavaScript的邏輯流程與人類逐步解決問題的方式相匹配
維護性：根據不同需求更新JavaScript版本既直接又清晰 ✅ 關於斐波那契數列：這個絕美的數字模式（每個數字等於前兩個數字的和：0, 1, 1, 2, 3, 5, 8...）幾乎無處不在！你可以在向日葵的螺旋形排列、松果的圖案、鸚鵡螺的曲線，甚至樹枝的生長方式中找到它。數學和程式碼能幫助我們理解並重現自然界用來創造美的模式，真是令人驚嘆！

創造魔法的基石

好了，既然你已經看過程式語言的運作方式，現在讓我們來拆解每個程式的基本組成部分。把它們想像成你最喜歡的食譜中的基本材料——一旦你了解了每個部分的作用，你幾乎可以用任何語言來閱讀和編寫程式！

這有點像學習程式設計的語法。還記得在學校時學過名詞、動詞以及如何組成句子嗎？程式設計也有自己的語法版本，老實說，比英語語法要邏輯得多，也寬容得多！😄

語句：一步步的指令

我們先從語句開始——它們就像是你和電腦對話中的單獨句子。每個語句都告訴電腦執行一個特定的操作，就像給出指令一樣："在這裡左轉"，"紅燈停下"，"停在那個位置"。

我喜歡語句的一點是它們通常非常易讀。看看這個例子：

// Basic statements that perform single actions
const userName = "Alex";                    
console.log("Hello, world!");              
const sum = 5 + 3;

這段程式碼的作用：

宣告一個常量變數來存儲使用者的名字
顯示一個問候語到控制台輸出
計算並存儲一個數學運算的結果

// Statements that interact with web pages
document.title = "My Awesome Website";      
document.body.style.backgroundColor = "lightblue";

一步步解析：

修改瀏覽器標籤中顯示的網頁標題
更改整個頁面的背景顏色

變數：程式的記憶系統

好吧，變數是我最喜歡教的概念之一，因為它們和你每天使用的東西非常相似！

想想你的手機聯絡人列表。你不會記住每個人的電話號碼——相反，你會保存"媽媽"、"最好的朋友"或"送外賣到凌晨兩點的披薩店"，然後讓你的手機記住實際的號碼。變數的工作方式完全一樣！它們就像是標記好的容器，你的程式可以存儲資訊，並使用一個實際有意義的名字來檢索它。

有趣的是：變數可以在程式運行時改變（因此叫做"變數"——明白了吧？）。就像當你發現更好的披薩店時更新聯絡人一樣，當程式獲得新資訊或情況發生變化時，變數也可以更新！

讓我展示一下它的簡單之處：

// Step 1: Creating basic variables
const siteName = "Weather Dashboard";        
let currentWeather = "sunny";               
let temperature = 75;                       
let isRaining = false;

理解這些概念：

存儲不變的值在const變數中（例如網站名稱）
使用let來存儲程式中可能改變的值
分配不同的數據類型：字串（文本）、數字和布林值（真/假）
選擇描述性名稱來解釋每個變數包含的內容

// Step 2: Working with objects to group related data
const weatherData = {                       
  location: "San Francisco",
  humidity: 65,
  windSpeed: 12
};

在上面的例子中，我們：

創建一個物件來將相關的天氣資訊分組
組織多個數據片段到一個變數名下
使用鍵值對來清楚地標記每個資訊

// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);

// Updating changeable variables
currentWeather = "cloudy";                  
temperature = 68;

讓我們理解每個部分：

顯示資訊，使用模板字面值和${}語法
訪問物件屬性，使用點符號（weatherData.windSpeed）
更新用let宣告的變數以反映變化的條件
結合多個變數來創造有意義的訊息

// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData; 
console.log(`${location} humidity: ${humidity}%`);

你需要知道的：

提取物件中的特定屬性，使用解構賦值
自動創建與物件鍵名相同的新變數
簡化程式碼，避免重複使用點符號

控制流程：教你的程式如何思考

好了，這是程式設計真正令人驚嘆的地方！控制流程基本上是教你的程式如何做出明智的決定，就像你每天不假思索地做的事情一樣。

想像一下：今天早上你可能經歷了類似這樣的情況："如果下雨，我就帶傘。如果天冷，我就穿外套。如果我遲到了，我就不吃早餐，改拿杯咖啡。" 你的大腦每天自然地遵循這種如果-那麼邏輯數十次！

這就是讓程式感覺智能和活躍的原因，而不是僅僅遵循一些無聊、可預測的腳本。它們可以實際查看情況，評估正在發生的事情，並做出適當的反應。這就像給你的程式一個可以適應和做出選擇的大腦！

想看看這是如何美妙地運作的嗎？讓我展示給你看：

// Step 1: Basic conditional logic
const userAge = 17;

if (userAge >= 18) {
  console.log("You can vote!");
} else {
  const yearsToWait = 18 - userAge;
  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}

這段程式碼的作用：

檢查使用者的年齡是否符合投票要求
執行基於條件結果的不同程式碼塊
計算並顯示距離投票資格的剩餘時間（如果未滿18歲）
提供每種情況的具體、有幫助的反饋

// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;

if (userAge >= 18 && hasPermission) {
  console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
  console.log("You need parent permission to enter.");
} else {
  console.log("Sorry, you must be at least 16 years old.");
}

分解這裡發生的事情：

結合多個條件，使用&&（和）運算符
創建條件層次結構，使用else if處理多種情況
處理所有可能的情況，使用最終的else語句
提供每種不同情況的清晰、可操作的反饋

// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);

你需要記住的：

使用三元運算符（? :）處理簡單的兩選一條件
先寫條件，接著是?，然後是正確結果，接著是:，最後是錯誤結果
應用這種模式，當你需要基於條件分配值時

// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";

switch (dayOfWeek) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("It's a weekday - time to work!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend - time to relax!");
    break;
  default:
    console.log("Invalid day of the week");
}

這段程式碼完成以下工作：

匹配變數值與多個特定情況
分組相似的情況（工作日與週末）
執行找到匹配時的適當程式碼塊
包含default情況以處理意外值
使用break語句防止程式碼繼續執行到下一個情況

💡 現實生活類比：想像控制流程就像擁有世界上最耐心的GPS為你指路。它可能會說："如果主街有交通堵塞，改走高速公路。如果高速公路有施工，試試風景路線。" 程式使用完全相同的條件邏輯來智能地響應不同的情況，並始終為使用者提供最佳的體驗。

✅ 接下來的內容：我們將繼續深入探索這些概念，這將是一段令人興奮的旅程！現在，專注於感受對未來所有驚人可能性的興奮。隨著我們一起練習，具體的技能和技術會自然地記住——我保證這會比你想像的更有趣！

工具箱

好了，這是我激動得幾乎無法控制自己的地方！🚀 我們即將談論一些令人難以置信的工具，它們會讓你感覺自己剛剛拿到了數位飛船的鑰匙。

你知道廚師有那些完美平衡的刀具，感覺就像是他們手的延伸嗎？或者音樂家有那把一碰就能唱出美妙旋律的吉他？嗯，開發者也有我們自己的這些神奇工具，而最令人驚嘆的是——其中大多數完全免費！

想到要和你分享這些工具，我幾乎要從椅子上跳起來，因為它們徹底改變了我們構建軟體的方式。我們談論的是AI驅動的程式碼助手，它們可以幫助你編寫程式碼（我不是在開玩笑！），雲端環境讓你可以在任何有Wi-Fi的地方構建整個應用程式，以及如此先進的除錯工具，它們就像為你的程式提供X光視野。

還有一點讓我感到激動：這些工具並不是你剛開始使用的"入門工具"，然後會被淘汰。這些是Google、Netflix以及你喜愛的獨立應用工作室的開發者此刻正在使用的專業級工具。使用它們，你會感覺自己像個真正的專家！

程式碼編輯器和IDE：你的新數位好夥伴

讓我們來談談程式碼編輯器——它們即將成為你最喜歡的工作場所！把它們想像成你的個人程式碼聖地，你將在這裡花費大部分時間來創作和完善你的數位作品。

但現代編輯器的神奇之處在於：它們不僅僅是高級文本編輯器。它們就像有一位最聰明、最支持你的程式碼導師24/7陪伴在你身邊。它們在你注意到之前就能捕捉到你的拼寫錯誤，提出改進建議讓你看起來像個天才，幫助你理解每段程式碼的作用，有些甚至能預測你即將輸入的內容並幫你完成想法！

我記得第一次發現自動完成功能時——我真的覺得自己生活在未來。你開始輸入某些內容，然後你的編輯器會說："嘿，你是不是在想這個正好符合你需求的函數？" 就像有一個讀心術的程式碼夥伴！

這些編輯器為什麼如此令人驚嘆？

現代程式碼編輯器提供了一系列令人印象深刻的功能，旨在提高你的生產力：

功能	它的作用	為什麼有幫助
語法高亮	為程式碼的不同部分上色	使程式碼更易讀，便於發現錯誤
自動完成	在輸入時建議程式碼	加快編碼速度並減少拼寫錯誤
除錯工具	幫助你找到並修復錯誤	節省大量排查問題的時間
擴展功能	添加專業化功能	為任何技術定制你的編輯器
AI助手	建議程式碼和解釋	加速學習和提高生產力

🎥 影片資源：想看看這些工具的實際操作嗎？查看這個工具箱影片以獲得全面的概述。

網頁瀏覽器：你的秘密開發實驗室

好了，準備好讓你的腦袋完全被震撼吧！你知道你一直在用瀏覽器刷社交媒體和看影片嗎？事實上，它們一直隱藏著一個令人難以置信的秘密開發實驗室，就等著你去發現！

每次你右鍵點擊網頁並選擇"檢查元素"，你就打開了一個隱藏的開發者工具世界，這些工具的強大程度甚至超過了我以前花幾百美元購買的一些昂貴軟體。這就像發現你的普通廚房後面藏著一個專業廚師的實驗室！

第一次有人向我展示瀏覽器的開發者工具時，我花了大約三個小時只是點來點去，驚呼"等等，它也能做到這個？!" 你可以即時編輯任何網站，查看每個部分的加載速度，測試你的網站在不同設備上的外觀，甚至像專業人士一樣除錯JavaScript。這真是令人驚嘆！

為什麼瀏覽器是你的秘密武器：

當你創建網站或網頁應用程式時，你需要查看它在真實世界中的外觀和行為。瀏覽器不僅顯示你的作品，還提供有關性能、可訪問性和潛在問題的詳細反饋。

瀏覽器開發者工具（DevTools）

現代瀏覽器包含全面的開發套件：

工具類別	它的作用	示例使用案例
元素檢查器	即時查看和編輯HTML/CSS	調整樣式以立即查看結果
控制台	查看錯誤訊息並測試 JavaScript	偵錯問題並嘗試編寫程式碼
網路監控器	追蹤資源載入情況	優化效能和載入時間
無障礙檢查工具	測試包容性設計	確保您的網站適合所有使用者
設備模擬器	預覽不同螢幕尺寸	測試響應式設計而無需多台設備

命令列工具：開發者的超能力入口

好吧，讓我們坦誠相待聊聊命令列，因為我希望你能聽到一個真正了解它的人說的話。當我第一次看到它時——只是一個可怕的黑色螢幕，閃爍著文字——我真的想，「不行，絕對不行！這看起來像是1980年代的駭客電影場景，我絕對不夠聰明去搞懂這個！」😅

但我希望當時有人告訴我這件事，而現在我告訴你：命令列並不可怕——它其實就像在和你的電腦直接對話。想像一下，這就像通過一個有圖片和菜單的高級應用程式點餐（這很簡單也很方便），與走進你最喜歡的當地餐廳，廚師知道你喜歡什麼，只需說「給我一個驚喜的美味」就能做出完美的菜肴之間的區別。

命令列是開發者感覺自己像巫師的地方。你輸入幾個看似神奇的詞（好吧，它們只是命令，但感覺很神奇！），按下回車鍵，然後砰——你就創建了整個專案結構，安裝了來自世界各地的強大工具，或者將你的應用程式部署到互聯網上供數百萬人使用。一旦你嘗到這種力量的滋味，真的會上癮！

為什麼命令列會成為你最喜愛的工具：

雖然圖形介面在許多任務中表現出色，但命令列在自動化、精確性和速度方面更勝一籌。許多開發工具主要通過命令列介面運作，學會高效使用它們可以顯著提高你的生產力。

# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website

這段程式碼的作用：

創建一個名為「my-awesome-website」的新目錄作為您的專案
進入新創建的目錄以開始工作

# Step 2: Initialize project with package.json
npm init -y

# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js

逐步解析，以下是發生的事情：

使用 npm init -y 初始化一個新的 Node.js 專案，並採用預設設定
安裝 Vite 作為現代化的建構工具，用於快速開發和生產建構
添加 Prettier 用於自動程式碼格式化，以及 ESLint 用於程式碼品質檢查
使用 --save-dev 標誌將這些標記為僅限開發的依賴項

# Step 3: Create project structure and files
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html

# Start development server
npx vite

在上述操作中，我們：

組織專案，創建了分別存放原始碼和資產的文件夾
生成一個基本的 HTML 文件，具有正確的文檔結構
啟動 Vite 開發伺服器，支持即時重新載入和模組熱替換

網頁開發必備命令列工具

工具	用途	為什麼需要它
Git	版本控制	追蹤變更、與他人協作、備份工作
Node.js & npm	JavaScript 執行環境與套件管理	在瀏覽器外執行 JavaScript，安裝現代開發工具
Vite	建構工具與開發伺服器	超快速開發，支持模組熱替換
ESLint	程式碼品質	自動發現並修復 JavaScript 中的問題
Prettier	程式碼格式化	保持程式碼格式一致且易於閱讀

平台特定選項

Windows:

Windows Terminal - 現代化且功能豐富的終端
PowerShell 💻 - 強大的腳本環境
Command Prompt 💻 - 傳統的 Windows 命令列

macOS:

Terminal 💻 - macOS 內建的終端應用程式
iTerm2 - 提供進階功能的增強型終端

Linux:

Bash 💻 - 標準的 Linux Shell
KDE Konsole - 高級終端模擬器

💻 = 作業系統預裝

🎯 學習路徑：從基本命令開始，例如 cd（切換目錄）、ls 或 dir（列出文件）、mkdir（創建文件夾）。練習使用現代工作流程命令，例如 npm install、git status 和 code .（在 VS Code 中打開當前目錄）。隨著熟悉度的提高，您自然會掌握更多高級命令和自動化技術。

文檔：隨時可用的學習導師

好吧，讓我告訴你一個小秘密，這會讓你對自己是初學者的身份感覺好很多：即使是最有經驗的開發者，也會花大量時間閱讀文檔。而這並不是因為他們不知道自己在做什麼——這其實是智慧的象徵！

把文檔想像成擁有世界上最耐心、最有知識的老師，他們全天候都在等著你。凌晨兩點卡住了問題？文檔會以溫暖的虛擬擁抱和正確的答案陪伴你。想了解大家都在談論的酷炫新功能？文檔會提供逐步的示例。想理解某些東西為什麼會這樣運作？你猜對了——文檔會以一種讓你恍然大悟的方式解釋它！

有一件事徹底改變了我的觀點：網頁開發世界發展得非常快，沒有人（我指的是絕對沒有人！）能記住所有的東西。我曾看過擁有15年以上經驗的資深開發者查詢基本語法，你知道嗎？這並不丟臉——這很聰明！重點不是擁有完美的記憶力，而是知道如何快速找到可靠的答案並理解如何應用它們。

真正的魔力在這裡發生：

專業開發者花費大量時間閱讀文檔——這並不是因為他們不知道自己在做什麼，而是因為網頁開發領域發展迅速，保持最新需要不斷學習。優秀的文檔不僅幫助你理解如何使用某些工具，還能幫助你理解為什麼以及何時使用它們。

必備文檔資源

Mozilla Developer Network (MDN)

網頁技術文檔的黃金標準
提供 HTML、CSS 和 JavaScript 的全面指南
包括瀏覽器兼容性資訊
提供實用示例和互動演示

Web.dev (由 Google 提供)

現代網頁開發最佳實踐
性能優化指南
無障礙和包容性設計原則
真實專案的案例研究

Microsoft Developer Documentation

Edge 瀏覽器開發資源
漸進式網頁應用指南
跨平台開發見解

Frontend Masters Learning Paths

結構化學習課程
行業專家的視頻課程
實踐編程練習

📚 學習策略：不要試圖記住文檔——而是學會如何高效地瀏覽它。收藏常用的參考資料，並練習使用搜索功能快速找到具體資訊。

✅ 思考食糧：這裡有一個有趣的問題值得思考——建設網站的工具（開發）與設計網站外觀的工具（設計）有什麼不同？這就像設計一座漂亮房子的建築師和實際建造它的承包商之間的區別。兩者都很重要，但需要不同的工具箱！這種思考方式將幫助你更好地理解網站是如何誕生的。

GitHub Copilot Agent 挑戰 🚀

使用 Agent 模式完成以下挑戰：

描述： 探索現代代碼編輯器或 IDE 的功能，展示它如何改善您作為網頁開發者的工作流程。

提示： 選擇一個代碼編輯器或 IDE（例如 Visual Studio Code、WebStorm 或基於雲的 IDE）。列出三個幫助您更高效編寫、調試或維護代碼的功能或擴展。對於每一項功能，簡要說明它如何改善您的工作流程。

🚀 挑戰

好了，偵探，準備好迎接你的第一個案件了嗎？

現在你已經有了這麼棒的基礎，我有一個冒險任務要幫助你了解編程世界的多樣性和迷人之處。聽著——這不是要你現在就開始寫代碼，所以不用有壓力！把自己想像成一個編程語言的偵探，正在進行第一次令人興奮的調查！

你的任務，如果你願意接受：

成為語言探險家：選擇三種來自完全不同領域的編程語言——也許一種用於建設網站，一種用於創建移動應用，還有一種用於科學家數據分析。找到每種語言中完成同一簡單任務的示例。我保證你會對它們在完成完全相同的事情時看起來如此不同感到驚訝！
揭開它們的起源故事：是什麼讓每種語言如此特別？這裡有一個很酷的事實——每一種編程語言的誕生都是因為有人認為「你知道嗎？一定有更好的方法來解決這個特定問題。」你能找出這些問題是什麼嗎？其中一些故事真的非常有趣！
了解社群：看看每種語言的社群有多熱情和友好。有些語言有數百萬開發者分享知識和互相幫助，其他語言的社群可能較小但非常緊密和支持。你會喜歡看到這些社群的不同特質！
跟隨你的直覺：現在哪種語言對你來說最容易接近？不要為做出「完美」的選擇而感到壓力——只需聽從你的直覺！這裡真的沒有錯誤的答案，你以後可以隨時探索其他選擇。

額外的偵探工作：看看你是否能發現哪些主要網站或應用程式是用每種語言構建的。我保證你會對 Instagram、Netflix 或你無法停止玩的那款手機遊戲背後的技術感到驚訝！

💡 記住：今天你不是要成為這些語言的專家。你只是先熟悉一下這些領域，然後再決定在哪裡安家。慢慢來，享受這個過程，讓你的好奇心引導你！

讓我們慶祝你的發現！

天啊，你今天吸收了這麼多令人難以置信的資訊！我真的很期待看到你從這段精彩旅程中學到了多少。記住——這不是一個需要完美的測試。這更像是慶祝你所學到的所有有趣內容！

參加課後測驗

回顧與自學

慢慢探索，享受其中的樂趣！

今天你已經學到了很多，這是值得驕傲的事情！現在來到最有趣的部分——探索那些激發你好奇心的主題。記住，這不是作業——這是一場冒險！

深入探索讓你興奮的內容：

動手嘗試編程語言：

訪問吸引你注意的2-3種語言的官方網站。每種語言都有自己的個性和故事！
嘗試一些線上編程平台，例如 CodePen、JSFiddle 或 Replit。不要害怕嘗試——你不會破壞任何東西！
閱讀你喜歡的語言的誕生故事。認真地說，其中一些起源故事非常有趣，能幫助你理解為什麼語言會以某種方式運作。

熟悉你的新工具：

如果你還沒下載 Visual Studio Code，趕快下載吧——它是免費的，你一定會喜歡！
花幾分鐘瀏覽擴展市場。這就像你的代碼編輯器的應用商店！
打開瀏覽器的開發者工具，隨便點點看。不要擔心理解所有內容——只需熟悉一下界面。

加入社群：

在 Dev.to、Stack Overflow 或 GitHub 上關注一些開發者社群。編程社群對新手非常友好！
在 YouTube 上觀看一些適合初學者的編程影片。有很多很棒的創作者，他們記得剛開始學習時的感受。
考慮加入本地聚會或線上社群。相信我，開發者非常喜歡幫助新手！

🎯 聽著，這是我希望你記住的事情：沒有人期望你一夜之間就成為編程高手！現在，你只是開始了解這個令人驚嘆的新世界，這是你即將成為其中一部分的世界。慢慢來，享受這段旅程，記住——你所崇拜的每一位開發者曾經也和你一樣，坐在同樣的位置上，感到既興奮又有些不知所措。這是完全正常的，這意味著你正在正確地進行！

作業

閱讀文件

💡 給你的作業一點提示：我非常希望看到你探索一些我們尚未涵蓋的工具！跳過我們已經討論過的編輯器、瀏覽器和命令列工具——還有一整個令人驚嘆的開發工具世界等著你去發掘。尋找那些仍在積極維護並擁有活躍且樂於助人的社群的工具（這些工具通常有最好的教程，並且當你不可避免地遇到困難需要幫助時，會有最支持你的夥伴）。

免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。

41 KiB

Raw Blame History Unescape Escape

程式語言與現代開發工具入門

來看看你已經知道什麼！

我們即將一起展開的冒險

那麼，程式設計到底是什麼？

程式語言就像不同口味的魔法

流行的程式語言及其用途

高階語言 vs. 低階語言

讓我告訴你為什麼高階語言更友好

創造魔法的基石

語句：一步步的指令

變數：程式的記憶系統

控制流程：教你的程式如何思考

工具箱

程式碼編輯器和IDE：你的新數位好夥伴

推薦的網頁開發編輯器

網頁瀏覽器：你的秘密開發實驗室

瀏覽器開發者工具（DevTools）

推薦的開發瀏覽器

命令列工具：開發者的超能力入口

網頁開發必備命令列工具

平台特定選項

文檔：隨時可用的學習導師

必備文檔資源

GitHub Copilot Agent 挑戰 🚀

🚀 挑戰

讓我們慶祝你的發現！

回顧與自學

作業

41 KiB Raw Blame History Unescape Escape

程式語言與現代開發工具入門

來看看你已經知道什麼！

我們即將一起展開的冒險

那麼，程式設計到底是什麼？

程式語言就像不同口味的魔法

流行的程式語言及其用途

高階語言 vs. 低階語言

讓我告訴你為什麼高階語言更友好

創造魔法的基石

語句：一步步的指令

變數：程式的記憶系統

控制流程：教你的程式如何思考

工具箱

程式碼編輯器和IDE：你的新數位好夥伴

推薦的網頁開發編輯器

網頁瀏覽器：你的秘密開發實驗室

瀏覽器開發者工具（DevTools）

推薦的開發瀏覽器

命令列工具：開發者的超能力入口

網頁開發必備命令列工具

平台特定選項

文檔：隨時可用的學習導師

必備文檔資源

GitHub Copilot Agent 挑戰 🚀

🚀 挑戰

讓我們慶祝你的發現！

回顧與自學

作業

41 KiB

Raw Blame History Unescape Escape