第一行 code —
就在這個頁面跑

為什麼第一站選 JavaScript

這門課的第一行 code 選 JavaScript，不是因為它最神秘，也不是因為它比較高級，而是因為它離你最近。你每天打開的瀏覽器（browser），例如 Chrome、Safari、Edge，本來就會執行 JavaScript。網頁按鈕會動、表單會檢查、購物車會更新，很多時候背後都有 JavaScript 在工作。

對完全不會寫程式的人來說，第一個門檻常常不是觀念，而是環境。安裝工具、設定路徑、處理版本，這些事情很重要，但不適合放在第一天。第一天最重要的是讓你看見因果：我輸入一段食譜，電腦照著做，結果出現在畫面上。這個因果一旦建立，你就不再只是看別人寫 code。

JavaScript 的好處是，這個頁面就能當你的工作室。左邊是你寫食譜的地方，中間或下方是執行結果，按下 Run，瀏覽器就會把你的指令交給 JavaScript 引擎處理。你不用知道引擎裡面每個齒輪怎麼轉，但你要知道一件事：電腦不會猜你的意思，它只會照你寫下來的字元做事。

這也是從白帶進到黃帶的差別。前四章我們用食譜、盒子、判斷、重複、函式建立程式思維；從這章開始，你要把那些想法放進真的 code 裡。今天不追求寫很多，只追求每一行都知道自己在要求電腦做什麼。

console.log("你好，世界");
console.log("這行 code 是在瀏覽器裡跑的");

console.log 是把結果喊出來

第一個要認識的工具是 console.log。主控台（console）可以想成工作室裡的紀錄板，log 是把訊息記上去。你寫 console.log("哈囉！")，意思不是叫電腦做一個網頁標題，也不是寄出訊息，而是請它把 "哈囉！" 這段內容顯示在輸出（output）裡，方便你確認程式有沒有跑到這一步。

把這行拆開看，console 是地方，.log 是動作，括號 () 裡面放你要交給這個動作的材料。引號 "" 代表裡面的東西是一段文字，在程式裡叫字串（string）。分號 ; 像一句話結尾的句號，JavaScript 很多時候可以沒有它，但初學時先養成寫上去的習慣，會讓每一行更清楚。

請注意，電腦看字元很嚴格。console.log("哈囉！") 裡的括號如果少一邊，引號如果只打一個，對人類來說可能只是小筆誤；對電腦來說，食譜就斷掉了。它不會替你補字，也不會猜「你應該是想印出哈囉」。這不是電腦在刁難，而是程式世界的交換條件：只要你把指令寫清楚，它就會很穩定地重複同一件事。

以後你請 AI 這個實習生幫忙寫 code，console.log 也會是你檢查它有沒有做對的第一個工具。不要只看 AI 說「完成了」，要自己跑，自己看輸出。會印出結果，就是你開始掌握驗證的第一步。

console.log("哈囉！");
console.log("我正在學第一行 JavaScript");

讓電腦當不會累的計算機

JavaScript 不只能印文字，也能做數字運算。+ 是加，- 是減，* 是乘，/ 是除。你可以把 365 * 24 放進 console.log 裡，電腦會先算出結果，再把答案印出來。這和你在計算機按鍵很像，只是現在按鍵變成一行可以保存、修改、重複執行的食譜。

運算也有順序。JavaScript 會先處理乘除，再處理加減；如果你想指定順序，就用括號。(10 + 5) * 2 會先算 10 + 5，再乘以 2，結果是 30。沒有括號的 10 + 5 * 2 會先算 5 * 2，再加 10，結果是 20。這不是數學考試，而是讓你看到：同樣幾個符號，排列方式不同，食譜就不同。

初學者最容易混淆的是數字和文字。365 * 24 沒有引號，JavaScript 會把它當數字運算。"365 * 24" 有引號，JavaScript 會把整段當文字，原樣印出來。這一點很重要，因為 AI 產出的 code 有時候看起來像會算，其實只是把文字印出來。你要看輸出是不是正確答案，而不是只看 code 很像。

練習時，先從心算能驗證的數字開始。你知道 365 * 24 是一年有幾小時，答案應該是 8760。如果輸出不是這個數字，就表示食譜裡某個材料或順序錯了。程式不是黑盒子，它每次都會留下可檢查的結果。

console.log(365 * 24);
console.log((10 + 5) * 2);
console.log(10 + 5 * 2);

字串、變數與加號的兩種角色

接著把文字和資料放在一起。字串（string）就是用引號包起來的文字，例如 "我叫"。變數（variable）可以想成 ch02 學過的有名字的盒子，盒子裡放一個值，之後用盒子的名字取出來。寫 const name = "小安";，意思是建立一個叫 name 的盒子，裡面放 "小安"。再寫 console.log("我叫" + name);，JavaScript 會把文字和盒子裡的內容接起來，印出 我叫小安。

這裡的 + 很值得停一下。兩邊都是數字時，+ 是加法，例如 10 + 5 會得到 15。其中一邊是字串時，+ 常常會變成拼接，把兩段內容接在一起。"我今年" + 18 + "歲" 會印出 我今年18歲，不是把文字拿去做數學。電腦沒有生活常識，它只看資料的形狀。

const 代表這個盒子建立後不打算換內容。你現在不用背完整規則，只要先記住：const name = "小安"; 是把資料命名，讓後面的食譜可以重複使用。當 code 變長時，變數能讓你少抄錯，也讓人比較容易讀懂這段程式在處理什麼。

使用 AI 時，這個觀念會直接派上用場。你可以要求實習生「把使用者名字存在 name，再組成一句歡迎訊息」。它如果把所有文字硬塞在一行，你就知道這段 code 不容易改；它如果有清楚的變數，你就能用盒子的觀念檢查資料有沒有放對。

const name = "小安";
const age = 18;
console.log("我叫" + name);
console.log("我今年" + age + "歲");
console.log(10 + 5);
console.log("10" + 5);

故意打錯，讀第一行紅字

現在做一件重要的事：故意把 code 打錯。很多新手第一次看到紅字會停住，以為自己不適合寫程式。其實紅字不是審判，它只是電腦回報「這份食譜我讀到某一段時卡住了」。你要練的不是永遠不犯錯，而是看見錯誤訊息後，能找到第一個該檢查的位置。

最常見的是語法錯誤（SyntaxError）。語法就是程式語言的句型。少一個引號、少一個括號、把 console 拼成 consol，都可能讓電腦不知道怎麼讀。錯誤訊息通常會有好幾行，第一行最重要，因為它會先告訴你錯誤種類，例如 SyntaxError 或 ReferenceError。先讀種類，再看它指向哪一行，不要從整片紅字裡亂猜。

例如你寫 console.log("哈囉！);，少了右邊的引號。人類看得懂你想印哈囉，JavaScript 不行，因為它看到字串開始了，卻找不到字串結束的位置。修法不是重寫整個程式，而是補回缺少的引號。這個動作很小，但心態很關鍵：錯誤訊息把範圍縮小，你照著線索改一個地方，再跑一次。

這就是差別會拉開的地方。純 vibe coder 只把錯誤丟回 AI，等它再吐一版；你要先自己讀第一行，描述你看到的錯誤，再請 AI 這個實習生協助。你不是要比 AI 會寫，而是要比它更會驗收。敢跑 code、敢看紅字、敢修一個小地方，這章就完成了。

console.log("第一行可以跑");
console.log("錯誤修好後，下一行也會跑");

把跑 code 變成驗收習慣

這章最後要把動作收成一個固定流程。看到一段 JavaScript，不要先問自己「我是不是全部都懂」，先問三件小事：它會印出什麼、我能不能用心算或常識預測、實際輸出是不是一致。這三件事比背更多術語更重要，因為它們讓你從旁觀者變成驗收者。

當 AI 這個實習生交出 code，你可以要求它一起交出可檢查的輸出。例如請它在重要步驟加上 console.log，印出目前處理的名字、年齡、計算結果或錯誤狀態。你不需要一次讀懂整份食譜，但你可以要求它把每個關鍵步驟端到紀錄板上。只要輸出不符合預期，就代表還不能說完成。

這個習慣也會保護你不被漂亮的 code 騙過。有些程式排版整齊、變數名稱好看，但運算順序錯了；有些回答看起來很有自信，實際跑起來第一行就紅字。你現在已經有最小的檢查工具：按 Run、看輸出、讀第一行錯誤、改一個地方、再跑一次。這個循環很短，卻是所有後面專案的基礎。

請把今天的成果定義得很具體：你能用 console.log 印出文字，能讓電腦做四則運算，能用變數把資料取名字，能分辨字串和數字，還能在錯誤發生時先讀第一行。這些不是表演用的技巧，而是你每次使用 AI 寫程式時都會用到的基本驗收動作，也會讓你在每次修改後留下可追蹤的證據。

const task = "印出名字";
const result = "我叫小安";
console.log("任務：" + task);
console.log("輸出：" + result);
console.log("驗收：通過");

檢查一下這章