【JavaScript 筆記】從零開始的 JS - part 1

歡迎你點入本篇文章，本系列網頁程式設計，主要紀錄我個人自學的軌跡，另外也作為日後個人複習用。若你喜歡本篇文章，歡迎在文章底下點一顆愛心，或是追蹤我的個人公開頁～

簡介（Introduction）

JavaScript 接下來都簡稱 JS，JS 是一個輕量級的程式語言，也是一個腳本語言，也是一種讓網頁動起來的程式語言。

JS 是一種直譯式（Interpreted）、動態型別、跨平台的腳本語言。

  • 直譯式：程式碼不需要事先編譯，瀏覽器直接讀取、直接執行。
  • 動態型別：變數的型別不需要事先宣告，執行時自動判斷。
  • 跨平台：能在瀏覽器、伺服器（Node.js）、甚至手機 App 上執行。
  • 物件導向 + 函式導向：支援多種程式設計風格，彈性非常高。

JS 的小故事

JavaScript 是由 Brendan Eich 在 1995 年於 Netscape 公司任職時創造，前後只花了 10 天就設計完成。雖然名字裡有 Java，但和 Java 其實是完全不同的語言，當年取這個名字純粹是行銷噱頭，純粹只是想要蹭而已。

之後 JavaScript 被提交給 ECMA 國際組織制定標準，這個標準規範就叫做 ECMAScript（ES），每年都會更新版本，目前最新為 ES2026。

JS 的應用

應用領域真實案例
網頁互動按鈕點擊、表單驗證、動態更新畫面
前端框架React、Vue、Angular 等現代框架
後端伺服器Node.js（可以寫 API、後端邏輯）
手機 AppReact Native（一套程式碼跑 iOS + Android 跨平台）
遊戲在瀏覽器裡運行的網頁遊戲
AI / 機器學習TensorFlow.js 等函式庫
IoT 物聯網控制硬體裝置

為什麼學 JS？

在一份 Stack Overflow 2025 Survey 調查中，JavaScript 仍然是當前最多人使用的程式語言，而第二名為 Python。

主要因為 JS 可以同時做太多事情了，而且靈活性也很高，因此是非常值得學的一門程式語言。

在 HTML 裡面寫 JS

<script> 內部撰寫

放在 <head> 裡：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script>
    function sayHello() {
      alert("Hello World");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">Print HelloWorld</button>
</body>
</html>

註：放在 <head> 裡的程式碼會在網頁內容載入之前就執行，如果我們設計的 JS 需要操作頁面上的元素（例如找某個按鈕），此時頁面還沒渲染完，會找不到該元素而出錯。

image

放在 </body> 結尾前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="title">原本的標題</h1>
  <button onclick="changeTitle()">點我改標題</button>

  <script>
    function changeTitle() {
      document.getElementById("title").innerHTML = "標題被改掉了！";
    }
  </script>
</body>
</html>

把 <script> 放在 </body> 前，能保證 HTML 全部載入後才執行 JS。

原本的畫面：

image

點擊後：

image

外部 JS 檔案呼叫

當程式碼變多，全塞進 HTML 會非常難維護，正確做法是把 JS 獨立成一個 .js 檔案，再用 <script> 中的 src 屬性引入。

main.js：

1
2
3
function changeTitle() {
  document.getElementById("title").innerHTML = "標題被改掉了！";
}

index.html：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="title">原本的標題</h1>
  <button onclick="changeTitle()">點我改標題</button>

  <script src="main.js"></script>
</body>
</html>

內部 / 外部 js 比較

內部 <script>外部 .js 檔
適合情境小型測試、單頁面正式專案、多頁面共用
維護性低（JS 混在 HTML 裡）高（JS 與 HTML 分離）
重複性無（只能在當前頁面用）高（多個 HTML 都能 src 同一支 JS）
快取效果無有（瀏覽器會快取 .js 檔）

在 Google Chrome 中執行 JavaScript

首先開啟 DevTools，有以下三種方式：

方法操作
鍵盤快捷鍵F12（Windows）或 Cmd + Option + J（Mac）
右鍵選單在網頁任意處按右鍵 → 選「檢查」
Chrome 選單右上角 ⋮ → 更多工具 → 開發人員工具

開啟之後點到 Console：

image

開啟 Console 頁面後如下所示：

image

那有了 > 的提示後，就代表可以在這裡寫 JavaScript 了，一個簡單的範例如下（印出字串）：

image

出現 undefined 表示該函式是沒有回傳值的，屬於正常現象。

那在這個 Console 裡面也可以做很多事情，例如改掉網頁標題：

image

Console 的一些函式

1. console.log()

最基本、最常用的輸出方法，可以印出任何型別的值。

語法：

1
console.log(值1, 值2, ...)

範例：

1
2
3
4
5
6
7
8
9
10
11
console.log("Hello World!")           // Hello World!
console.log(42)                        // 42
console.log(true)                      // true

// 同時印出多個值，用逗號分隔
let name = "LukeTseng"
let age = 19
console.log("姓名：", name, "年齡：", age) // 姓名： Luke 年齡： 19

// 也可用樣板字串（Template Literal）
console.log(`我是 ${name}，今年 ${age} 歲`) // 我是 Luke，今年 19 歲

2. console.error()

輸出紅色錯誤訊息，並自動附上 stack trace（呼叫路徑），通常用來表示程式遇到嚴重問題。

語法：

1
console.error(訊息)

範例：

1
2
3
4
5
6
7
8
9
10
11
console.error("找不到使用者資料！")

// 例如當 API 請求失敗時
function fetchUser(id) {
  if (!id) {
    console.error("錯誤：使用者 ID 不能為空")
    return
  }
  console.log("正在查詢使用者：", id)
}
fetchUser(null)

實際執行情況：

image

3. console.warn()

輸出黃色警告訊息，帶有 ⚠️ 圖示，表示這不是錯誤，但要注意。

語法：

1
console.warn(訊息)

範例：

1
2
3
4
5
6
7
console.warn("此功能即將在下一版本移除，請改用新 API！")

// 輸入值接近上限時
let diskUsage = 85
if (diskUsage > 80) {
  console.warn(`磁碟使用量已達 ${diskUsage}%，請注意空間`)
}

實際執行情況：

image

4. console.info()

功能與 console.log() 幾乎相同，現代瀏覽器常將 Info 與 Log 顏色統一，所以現在看不到他的藍色了。

語法：

1
console.info(訊息)

範例：

1
2
3
console.info("程式啟動中，版本：v2.5.0")

console.info("資料庫連線成功，共載入 42 筆資料")

實際執行情況：

image

log、warn、error、info 的差別主要在顏色與語意，方便我們在 Console 的訊息過濾器中快速篩選特定類型的訊息。

5. console.table()

這個函式會把陣列（Array）或物件（Object）以表格形式顯示出來。

語法：

1
console.table(陣列或物件)

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 印出陣列
let fruits = ["蘋果", "香蕉", "芒果"]
console.table(fruits)
// (index) | Values
// 0       | 蘋果
// 1       | 香蕉
// 2       | 芒果

// 印出物件陣列
let students = [
  { name: "Luke", score: 95 },
  { name: "Amy",  score: 87 },
  { name: "Bob",  score: 72 }
]
console.table(students)
// (index) | name | score
// 0       | Luke | 95
// 1       | Amy  | 87
// 2       | Bob  | 72

實際執行情況：

image

6. console.time() & console.timeEnd()

成對使用，用來測量兩點之間的程式碼執行時間，單位是毫秒（ms）。

語法：

1
2
3
console.time("計時器名稱")   // 開始計時
// ... 要測量的程式碼 ...
console.timeEnd("計時器名稱") // 停止計時並印出結果

註：time() 和 timeEnd() 的計時器名稱必須一模一樣，才能對應到同一個計時器。

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.time("迴圈計時")

let total = 0
for (let i = 0; i < 1000000; i++) {
  total += i
}

console.timeEnd("迴圈計時")

// 也可以同時跑多個計時器
console.time("任務A")
console.time("任務B")
// ... 任務A 的程式碼 ...
console.timeEnd("任務A")
// ... 任務B 的程式碼 ...
console.timeEnd("任務B")

實際執行情況：

image

7. console.assert()

斷言（Assert）：給定一個條件，如果條件為 false，就輸出紅色錯誤訊息；如果條件為 true，什麼都不輸出 。

語法：

1
console.assert(條件, 錯誤訊息)

範例：

1
2
3
4
5
6
7
8
9
10
let age = 15

// 斷言 age 必須大於等於 18
console.assert(age >= 18, "年齡不符：必須滿 18 歲！")

console.assert(age > 0, "年齡不能為負數")

function add(a, b) { return a + b }
console.assert(add(2, 3) === 5, "add() 計算錯誤！")
console.assert(add(2, 3) === 6, "add() 計算錯誤！")

實際執行情況：

image

8. console.group() & console.groupEnd()

把一群相關的 log 訊息縮排收納成一個群組，讓輸出更有層次感，可以折疊/展開。

語法：

1
2
3
console.group("群組名稱")
// ... 群組內的 log ...
console.groupEnd()

範例：

1
2
3
4
5
6
7
8
9
10
11
12
console.log("=== 程式開始 ===")

console.group("使用者資訊")
  console.log("姓名：XXX")
  console.log("城市：高雄")
  console.group("學業資訊")     // 巢狀群組（Nested Group）
    console.log("科系：資訊工程學系")
    console.log("年級：大一")
  console.groupEnd()             // 關閉內層群組
console.groupEnd()               // 關閉外層群組

console.log("=== 程式結束 ===")

實際執行情況：

image

註：console.groupCollapsed("名稱") 可以讓群組預設折疊，適合資訊量很多時使用。

9. console.count()

每次呼叫時，計算並印出該標籤被呼叫了幾次，適合追蹤某段程式碼執行的頻率。

語法：

1
2
console.count("標籤名稱")   // 計數
console.countReset("標籤名稱") // 重置計數

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 基本用法
console.count("點擊")  // 點擊: 1
console.count("點擊")  // 點擊: 2
console.count("點擊")  // 點擊: 3
console.count("登入")  // 登入: 1（不同標籤各自計算）
console.count("點擊")  // 點擊: 4

// 實際情境：追蹤函式被呼叫了幾次
function processData(item) {
  console.count("processData 呼叫次數")
  // ... 處理邏輯
}

let data = ["A", "B", "C", "D"]
data.forEach(processData)
// processData 呼叫次數: 1
// processData 呼叫次數: 2
// processData 呼叫次數: 3
// processData 呼叫次數: 4

實際執行情況：

image

10. console.trace()

輸出目前的 Stack Trace（函式呼叫堆疊路徑），顯示程式是怎麼一步步走到這裡的，是深層除錯的利器。

語法：

1
console.trace("標籤（可選）")

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
function c() {
  console.trace("追蹤到這裡了！")
}

function b() {
  c()
}

function a() {
  b()
}

a()

實際執行情況：

image

從輸出可以看到 a() 呼叫了 b()，b() 呼叫了 c()，最終執行到 console.trace() 的那一行 。

Console 函式比較

方法顏色/圖示主要用途
console.log()白色（預設）一般輸出，最萬用
console.error()紅色嚴重錯誤
console.warn()黃色警告、需注意但不致命
console.info()同 console.log()系統資訊說明
console.table()表格視覺化陣列、物件
console.time/End()計時器效能測量
console.assert()紅色假設驗證
console.group/End()縮排群組組織大量輸出
console.count()計數追蹤呼叫次數
console.trace()呼叫路徑深層除錯

總整理

簡介

JS 是一種讓網頁動起來的輕量級腳本語言。

  • 四大特性：
    • 直譯式：不需事先編譯，瀏覽器直接讀取執行。
    • 動態型別：不需事先宣告變數型別，執行時自動判斷。
    • 跨平台：可運行於瀏覽器、伺服器、手機 App。
    • 多重風格：同時支援物件導向與函式導向。
  • 冷知識：1995 年 Brendan Eich 僅花 10 天發明。名字裡的 Java 只是行銷蹭熱度，兩者毫無關係。其國際標準規範稱為 ECMAScript (ES)。
  • 為什麼要學？Stack Overflow 2025 霸榜第一的語言，用途極廣，涵蓋：前端網頁、後端 (Node.js)、手機 App (React Native)、遊戲、AI (TensorFlow.js) 及 IoT。

如何在 HTML 中寫 JS？

根據載入位置與方式，主要分為三種做法：

撰寫方式語法範例優缺點與適用情境
放 <head> 裡<script> 程式碼 </script>不推薦操作畫面：會在 HTML 渲染前執行，容易發生找不到網頁元素的錯誤，適合放純邏輯設定。
放 </body> 前<script> 程式碼 </script>推薦單頁面：保證 HTML 載入完畢後才執行 JS，適合小型測試。
引入外部 .js<script src=""main.js""></script>將 JS 與 HTML 分離，維護性高、多頁面可共用程式碼，且瀏覽器會有快取效果。

Chrome Console

在網頁按 F12 或右鍵選「檢查」即可開啟開發人員工具 (DevTools) 的 Console 面板。

基礎輸出:

  • console.log()：最萬用的基本輸出。
  • console.info()：系統資訊說明（外觀通常與 log() 無異）。
  • console.warn()：黃字警告（需注意但不致命）。
  • console.error()：紅字錯誤（並附上呼叫路徑）。

進階視覺化 & 結構化:

  • console.table()：將陣列（Array）或物件（Object）化為表格，較直觀的函式。
  • console.group() / console.groupEnd()：將多行 log() 縮排分群組，還能摺疊收合，讓畫面不雜亂。

效能與邏輯測試:

  • console.time("標籤") / console.timeEnd("標籤")：測量執行時間（毫秒 ms），標籤名稱必須一致。
  • console.count("標籤")：紀錄該行程式碼被執行的次數（可用 countReset() 重置）。
  • console.assert(條件, "錯誤訊息")：假設驗證。只有當條件為 false 時，才會印出紅色錯誤訊息；true 則無反應。
  • console.trace()：印出目前的函式呼叫堆疊路徑（Stack Trace），用來追蹤程式是怎麼一步步走到這裡的，深層除錯必備。

參考資料

Introduction to JavaScript - GeeksforGeeks

Adding JavaScript in HTML Document - GeeksforGeeks

Console in JavaScript - GeeksforGeeks

JavaScript 简介 | 菜鸟教程

JavaScript 用法 | 菜鸟教程

Chrome 浏览器中执行 JavaScript | 菜鸟教程

JavaScript 输出 | 菜鸟教程