程式如何執行：Source Code 不會自己動

Learning outcomes

• 能區分 source code、runtime、process。
• 能說明 Browser JavaScript 與 Node JavaScript 的 host environment 不同。
• 能理解 compile-time 與 runtime 是不同階段。
• 能用 input → instructions → state → output 描述一段程式。

1. Source 只是文字

const price = 100;
const total = price * 2;
console.log(total);

硬碟上的這三行不會自動算出 200。要有 JavaScript engine / runtime 執行它。

2. Browser 是一種 Host Environment

Source JavaScript
   ↓
Browser JavaScript engine
   ↓
runtime state
   ↓
DOM / console / network APIs

Browser 除了語言本身，還提供 document、events、fetch 等 Web APIs。

3. Node 也是 JavaScript Runtime，但 Host APIs 不同

console.log(process.pid);
// Node 有 process

console.log(document);
// Node 預設沒有 Browser DOM

同一種語言不代表同一個執行環境。

4. Compile / Build 與 Runtime

TypeScript / C++
  ↓ compiler/build
JavaScript / executable
  ↓ runtime
actual execution

有些錯誤在執行前就能抓到；另一些只有程式真正跑到某個狀態才出現。

5. 一個最通用的 Mental Model

之後你學任何語言，都可以問：目前 state 是什麼？這一行讀什麼？改什麼？輸出什麼？

Project checkpoint：Request Journey Map v2

Browser receives app.js
  ↓
Browser JS runtime executes
  ↓
variables / functions created
  ↓
DOM updated
  ↓
user sees interactive page

現在你已知道「下載 JavaScript」和「執行 JavaScript」不是同一件事。

Debug evidence：錯誤在哪個階段？

Syntax/build error
→ runtime 可能根本沒開始

Runtime TypeError
→ code 已開始執行

Logic error
→ code 執行完成，但結果不符合規則