# 【JavaScript 筆記】從零開始的 JS - part 1
[TOC]
歡迎你點入本篇文章，本系列網頁程式設計，主要紀錄我個人自學的軌跡，另外也作為日後個人複習用。若你喜歡本篇文章，歡迎在文章底下點一顆愛心，或是追蹤我的個人公開頁～
---
## 簡介（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、後端邏輯） |
| 手機 App | React Native（一套程式碼跑 iOS + Android 跨平台） |
| 遊戲 | 在瀏覽器裡運行的網頁遊戲 |
| AI / 機器學習 | TensorFlow.js 等函式庫 |
| IoT 物聯網 | 控制硬體裝置 |
### 為什麼學 JS？
在一份 [Stack Overflow 2025 Survey](https://survey.stackoverflow.co/2025/technology#1-programming-scripting-and-markup-languages) 調查中，JavaScript 仍然是當前最多人使用的程式語言，而第二名為 Python。
主要因為 JS 可以同時做太多事情了，而且靈活性也很高，因此是非常值得學的一門程式語言。
## 在 HTML 裡面寫 JS
### `<script>` 內部撰寫
放在 `<head>` 裡：
```html=
<!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 需要操作頁面上的元素（例如找某個按鈕），此時頁面還沒渲染完，會找不到該元素而出錯。
### 放在 `</body>` 結尾前
```html=
<!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。
原本的畫面：
點擊後：
### 外部 JS 檔案呼叫
當程式碼變多，全塞進 HTML 會非常難維護，正確做法是把 JS 獨立成一個 `.js` 檔案，再用 `<script>` 中的 `src` 屬性引入。
`main.js`：
```javascript=
function changeTitle() {
document.getElementById("title").innerHTML = "標題被改掉了！";
}
```
`index.html`：
```html=
<!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：
開啟 Console 頁面後如下所示：
那有了 `>` 的提示後，就代表可以在這裡寫 JavaScript 了，一個簡單的範例如下（印出字串）：
出現 `undefined` 表示該函式是沒有回傳值的，屬於正常現象。
那在這個 Console 裡面也可以做很多事情，例如改掉網頁標題：
### Console 的一些函式
#### 1. `console.log()`
最基本、最常用的輸出方法，可以印出任何型別的值。
語法：
```javascript
console.log(值1, 值2, ...)
```
範例：
```javascript=
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（呼叫路徑），通常用來表示程式遇到嚴重問題。
語法：
```javascript
console.error(訊息)
```
範例：
```javascript=
console.error("找不到使用者資料！")
// 例如當 API 請求失敗時
function fetchUser(id) {
if (!id) {
console.error("錯誤：使用者 ID 不能為空")
return
}
console.log("正在查詢使用者：", id)
}
fetchUser(null)
```
實際執行情況：
#### 3. `console.warn()`
輸出黃色警告訊息，帶有 ⚠️ 圖示，表示這不是錯誤，但要注意。
語法：
```
console.warn(訊息)
```
範例：
```javascript=
console.warn("此功能即將在下一版本移除，請改用新 API！")
// 輸入值接近上限時
let diskUsage = 85
if (diskUsage > 80) {
console.warn(`磁碟使用量已達 ${diskUsage}%，請注意空間`)
}
```
實際執行情況：
#### 4. `console.info()`
功能與 `console.log()` 幾乎相同，現代瀏覽器常將 Info 與 Log 顏色統一，所以現在看不到他的藍色了。
語法：
```javascript
console.info(訊息)
```
範例：
```javascript=
console.info("程式啟動中，版本：v2.5.0")
console.info("資料庫連線成功，共載入 42 筆資料")
```
實際執行情況：
log、warn、error、info 的差別主要在顏色與語意，方便我們在 Console 的訊息過濾器中快速篩選特定類型的訊息。
#### 5. `console.table()`
這個函式會把陣列（Array）或物件（Object）以表格形式顯示出來。
語法：
```
console.table(陣列或物件)
```
範例：
```javascript=
// 印出陣列
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
```
實際執行情況：
#### 6. `console.time()` & `console.timeEnd()`
成對使用，用來測量兩點之間的程式碼執行時間，單位是毫秒（ms）。
語法：
```javascript
console.time("計時器名稱") // 開始計時
// ... 要測量的程式碼 ...
console.timeEnd("計時器名稱") // 停止計時並印出結果
```
註：`time()` 和 `timeEnd()` 的計時器名稱必須一模一樣，才能對應到同一個計時器。
範例：
```javascript=
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")
```
實際執行情況：
#### 7. `console.assert()`
斷言（Assert）：給定一個條件，如果條件為 `false`，就輸出紅色錯誤訊息；如果條件為 `true`，什麼都不輸出 。
語法：
```javascript
console.assert(條件, 錯誤訊息)
```
範例：
```javascript=
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() 計算錯誤！")
```
實際執行情況：
#### 8. `console.group()` & `console.groupEnd()`
把一群相關的 log 訊息縮排收納成一個群組，讓輸出更有層次感，可以折疊/展開。
語法：
```javascript
console.group("群組名稱")
// ... 群組內的 log ...
console.groupEnd()
```
範例：
```javascript=
console.log("=== 程式開始 ===")
console.group("使用者資訊")
console.log("姓名：XXX")
console.log("城市：高雄")
console.group("學業資訊") // 巢狀群組（Nested Group）
console.log("科系：資訊工程學系")
console.log("年級：大一")
console.groupEnd() // 關閉內層群組
console.groupEnd() // 關閉外層群組
console.log("=== 程式結束 ===")
```
實際執行情況：
註：`console.groupCollapsed("名稱")` 可以讓群組預設折疊，適合資訊量很多時使用。
#### 9. `console.count()`
每次呼叫時，計算並印出該標籤被呼叫了幾次，適合追蹤某段程式碼執行的頻率。
語法：
```javascript
console.count("標籤名稱") // 計數
console.countReset("標籤名稱") // 重置計數
```
範例：
```javascript=
// 基本用法
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
```
實際執行情況：
#### 10. `console.trace()`
輸出目前的 Stack Trace（函式呼叫堆疊路徑），顯示程式是怎麼一步步走到這裡的，是深層除錯的利器。
語法：
```javascript
console.trace("標籤（可選）")
```
範例：
```javascript=
function c() {
console.trace("追蹤到這裡了！")
}
function b() {
c()
}
function a() {
b()
}
a()
```
實際執行情況：
從輸出可以看到 `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](https://www.geeksforgeeks.org/javascript/introduction-to-javascript/)
[Adding JavaScript in HTML Document - GeeksforGeeks](https://www.geeksforgeeks.org/javascript/where-to-put-javascript-in-an-html-document/)
[Console in JavaScript - GeeksforGeeks](https://www.geeksforgeeks.org/javascript/console-in-javascript/)
[JavaScript 简介 | 菜鸟教程](https://www.runoob.com/js/js-intro.html)
[JavaScript 用法 | 菜鸟教程](https://www.runoob.com/js/js-howto.html)
[Chrome 浏览器中执行 JavaScript | 菜鸟教程](https://www.runoob.com/js/js-chrome.html)
[JavaScript 输出 | 菜鸟教程](https://www.runoob.com/js/js-output.html)
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet