JavaScript 語法介紹：初學者也能看懂的完整入門教學

JavaScript 是現代網頁不可或缺的程式語言，負責讓原本靜態的頁面能夠回應使用者的各種操作。無論是按鈕點擊、表單驗證、選單展開，還是與伺服器即時交換資料，背後幾乎都有 JavaScript 在運作。這篇文章專為初學者整理，從「JavaScript 是什麼」開始，循序介紹變數、運算子、條件判斷、迴圈、函數、DOM 操作、事件處理與表單驗證等核心觀念，並附上可以直接執行的範例程式碼。只要跟著順序練習，即使您完全沒有程式基礎，也能逐步建立起對 JavaScript 的整體認識。

本篇目錄

一、JavaScript 是什麼？
二、為什麼學 JavaScript 很重要？
三、JavaScript 如何加入網頁？
四、JavaScript 基本語法介紹
五、結論
六、常見問答 FAQ

一、JavaScript 是什麼？

JavaScript 是一種用於建立動態與互動式網頁的程式語言。它通常會和 HTML、CSS 搭配使用，讓原本靜態的網頁能夠回應使用者操作，進一步提升整體使用體驗。

如果把一個網站比喻成一間店面，那麼：

HTML 是店內的基本結構，例如牆面、門窗與櫃台。
CSS 是裝潢與陳列風格，決定整體視覺設計。
JavaScript 則是店員的反應能力，負責回應顧客操作與觸發各種互動功能。

例如當使用者點擊按鈕、輸入表單、切換選單或看到提示訊息時，這些動作大多都仰賴 JavaScript 來實現。

二、為什麼學 JavaScript 很重要？

JavaScript 是現代前端開發的核心技術之一。無論是企業形象網站、購物車網站、會員系統、部落格，甚至是互動式 Web App，都會使用到 JavaScript。

JavaScript 常見用途包括：

控制網頁內容的顯示與更新。
處理按鈕點擊、滑鼠移動、鍵盤輸入等事件。
驗證表單資料是否填寫正確。
建立輪播、下拉選單、彈出視窗等互動效果。
與伺服器交換資料，做到不重整頁面的更新。

也就是說，如果 HTML 是把網頁「搭起來」，CSS 是把網頁「變好看」，那 JavaScript 就是把網頁「變聰明」。

三、JavaScript 如何加入網頁？

JavaScript 可以直接寫在 HTML 中，也可以另外建立 .js 檔案再引入。兩種方式各有適用情境，初學者先理解差異即可。

方法一：直接寫在 HTML 裡。

HTML

<script>
alert("歡迎來到我的網站！");
</script>

方法二：引用外部 JavaScript 檔案。

HTML

<script src="script.js"></script>

一般來說，實務上比較常使用外部檔案的方式，因為比較方便管理，也有利於程式碼維護。

四、JavaScript 基本語法介紹

掌握以下十三個基礎主題，就能建立起 JavaScript 的核心觀念。建議您依序閱讀，並實際打開瀏覽器動手練習每一段範例程式碼。

1. Hello, World! 範例

學習任何程式語言時，最經典的第一步通常都是顯示一段簡單訊息。

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Hello JavaScript</title>
</head>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html>

這段程式碼會將 Hello, World! 顯示在頁面中。不過現在更常見的寫法，是透過 DOM 把文字放進指定元素裡：

HTML

<p id="demo"></p>

<script>
document.getElementById("demo").textContent = "Hello, World!";
</script>

這種方式更符合現代網站的開發習慣。

2. 變數與資料類型

變數可以想像成一個用來存放資料的容器。JavaScript 常用 let 與 const 來宣告變數。

JavaScript

let name = "John";
let age = 25;
let isAdult = true;

JavaScript 常見的資料類型整理如下：

資料類型	範例	用途說明
字串 String	"Taipei"	文字資料，例如名稱、地址、訊息。
數字 Number	100、95.5	整數或小數，可用於計算。
布林值 Boolean	true、false	表示真或假，常用於條件判斷。
陣列 Array	["蘋果","香蕉"]	儲存多筆有順序的資料。
物件 Object	{ name:"Amy" }	儲存一筆具名稱屬性的完整資料。

以下分別示範各種型別的寫法。字串（String）：

JavaScript

let city = "Taipei";

數字（Number）：

JavaScript

let price = 100;
let score = 95.5;

布林值（Boolean）：

JavaScript

let isOpen = true;
let isClose = false;

陣列（Array）：

JavaScript

let fruits = ["蘋果", "香蕉", "葡萄"];

物件（Object）：

JavaScript

let user = {
  name: "Amy",
  age: 30
};

至於 let 與 const 的差異，整理如下表：

比較項目	let	const
可否重新指定	可以重新賦值	不可重新賦值
適用情境	之後會變動的資料	固定不變的資料
建議用法	確定需重新賦值時才用	預設優先使用

會變動的資料用 let：

JavaScript

let count = 1;
count = 2;

固定不變的資料用 const：

JavaScript

const siteName = "My Website";

初學者原則：會變就用 let，不會變就用 const。實務上建議預設都先用 const，確定需要重新賦值時再改成 let。

3. 運算子

JavaScript 可以透過運算子來進行計算與比較。先看算術運算子：

JavaScript

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.33...
console.log(a % b); // 1

接著是比較運算子：

JavaScript

console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 == "10");  // true
console.log(10 === "10"); // false

重要觀念：== 只比較值，=== 會同時比較值與型別。實務上通常建議優先使用 ===，能避免很多奇怪的型別轉換錯誤。

4. 條件判斷

當程式需要依照不同條件做出不同反應時，就會用到條件判斷。以下是 if...else 範例：

JavaScript

let age = 18;

if (age >= 18) {
  console.log("您已成年");
} else {
  console.log("您還未成年");
}

else if 範例：

JavaScript

let score = 85;

if (score >= 90) {
  console.log("優秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

這類語法很常用在：

判斷登入狀態。
判斷折扣條件。
判斷使用者輸入是否符合規則。

5. 迴圈

如果有些動作需要重複執行，就可以使用迴圈。for 迴圈：

JavaScript

for (let i = 1; i <= 5; i++) {
  console.log("這是第 " + i + " 次迴圈");
}

while 迴圈：

JavaScript

let i = 1;

while (i <= 5) {
  console.log("目前數字是：" + i);
  i++;
}

搭配陣列使用：

JavaScript

let fruits = ["蘋果", "香蕉", "葡萄"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

更簡潔的寫法是 for...of：

JavaScript

let fruits = ["蘋果", "香蕉", "葡萄"];

for (let fruit of fruits) {
  console.log(fruit);
}

6. 函數（Function）

函數是把一段功能包裝起來，之後需要時可以反覆呼叫。基本函數：

JavaScript

function greet(name) {
  console.log("Hello, " + name);
}

greet("Alice");

有回傳值的函數：

JavaScript

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result); // 8

箭頭函數（Arrow Function）：

JavaScript

const square = num => num * num;
console.log(square(6)); // 36

函數的好處是可以讓程式更整齊，也比較容易重複利用。

7. 陣列與物件

這兩者是 JavaScript 裡很常見的資料型態。陣列用來儲存多筆資料：

JavaScript

let colors = ["紅色", "藍色", "綠色"];
console.log(colors[0]); // 紅色

新增資料：

JavaScript

colors.push("黃色");
console.log(colors);

物件則用來儲存有名稱的資料：

JavaScript

let person = {
  name: "Tom",
  age: 28,
  job: "設計師"
};

console.log(person.name);
console.log(person.age);

修改資料：

JavaScript

person.age = 29;

簡單記法是：陣列適合放一串項目，物件適合放一筆完整資料。

8. DOM 操作

DOM 可以理解成網頁中的元素結構。JavaScript 可以透過 DOM 去取得元素，並修改內容、樣式與屬性。更改文字內容：

HTML

<p id="text">原本的文字</p>

<script>
document.getElementById("text").textContent = "這段文字已被 JavaScript 更改。";
</script>

更改樣式：

HTML

<p id="title">這是一段文字</p>

<script>
const title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";
</script>

加入 class：

HTML

<p id="message">歡迎光臨</p>

<script>
document.getElementById("message").classList.add("highlight");
</script>

通常使用 classList.add() 會比直接修改樣式更好維護。

9. 事件處理

事件就是使用者在網頁上的操作，例如點擊、輸入、滑鼠移入等。按鈕點擊事件：

HTML

<button id="btn">點擊我</button>

<script>
document.getElementById("btn").addEventListener("click", function() {
  alert("您按下了按鈕！");
});
</script>

輸入框事件：

HTML

<input type="text" id="username" placeholder="請輸入名稱">

<script>
document.getElementById("username").addEventListener("input", function(event) {
  console.log("目前輸入內容：" + event.target.value);
});
</script>

事件處理是 JavaScript 最常見的應用之一，因為互動式網頁幾乎都會用到。

10. 表單驗證

JavaScript 很常被用來檢查表單資料是否填寫完整或格式正確。以下是檢查欄位是否空白的基本範例：

HTML

<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name">
<button type="submit">送出</button>
</form>

<p id="error" style="color:red;"></p>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
  const name = document.getElementById("name").value;
  const error = document.getElementById("error");

  if (name.trim() === "") {
    event.preventDefault();
    error.textContent = "請輸入姓名";
  } else {
    error.textContent = "";
  }
});
</script>

Email 格式驗證的簡易範例：

JavaScript

function isValidEmail(email) {
  return email.includes("@") && email.includes(".");
}

雖然這只是簡化寫法，但對初學者來說很適合先理解概念。實務上若要嚴謹驗證，會改用正規表達式（Regular Expression）。

11. 綜合範例：輸入名字後顯示歡迎訊息

下面這個範例把變數、條件判斷、DOM 操作與事件處理結合在一起。

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>JavaScript 綜合範例</title>
</head>
<body>
<input type="text" id="userName" placeholder="請輸入您的名字">
<button id="welcomeBtn">送出</button>
<p id="result"></p>

<script>
document.getElementById("welcomeBtn").addEventListener("click", function() {
  const userName = document.getElementById("userName").value.trim();
  const result = document.getElementById("result");

  if (userName === "") {
    result.textContent = "請先輸入名字";
  } else {
    result.textContent = "歡迎您，" + userName + "！";
  }
});
</script>
</body>
</html>

這個小範例很適合初學者練習，因為它一次整合了多個 JavaScript 核心概念。

12. 新手常見錯誤

第一，大小寫打錯。JavaScript 嚴格區分大小寫：

JavaScript

let userName = "Amy";
console.log(username); // 錯誤，找不到 username

第二，把 = 和 === 搞混。= 是指定值，=== 才是比較。

第三，元素還沒載入就先抓取。如果 JavaScript 太早執行，可能會找不到對應元素，可把 script 放在 body 結尾，或使用 DOMContentLoaded 事件。

第四，忘記看瀏覽器 Console。當 JavaScript 沒反應時，先按 F12 打開開發者工具，看 Console 的錯誤訊息，通常會比瞎猜有效很多。

注意：紅色錯誤訊息通常會直接標示出問題出在哪一行，養成先看 Console 的習慣，能大幅縮短偵錯時間。

13. 初學者建議學習順序

如果您剛開始接觸 JavaScript，建議依照以下順序循序學習：

變數與資料型別。
運算子。
條件判斷。
迴圈。
函數。
陣列與物件。
DOM 操作。
事件處理。
表單驗證。
API 與非同步概念。

這樣的順序比較穩，也比較不容易在一開始就被進階語法打到懷疑人生。

五、結論

JavaScript 是現代網頁開發不可或缺的程式語言。它不只讓網頁能夠與使用者互動，也能處理資料、驗證表單、控制畫面變化，甚至能與伺服器進行溝通。

對初學者而言，最重要的不是一開始就背熟所有語法，而是先理解每個語法的用途，再透過實際範例反覆練習。只要把基本觀念建立起來，後續無論是學習更進階的 JavaScript、前端框架，或開發更完整的網站功能，都會順利很多。

六、常見問答 FAQ

JavaScript 和 Java 一樣嗎？

不一樣，這是初學者最容易混淆的地方。兩者名稱相似，卻是完全不同的程式語言，彼此沒有從屬關係。JavaScript 最初是為了讓網頁能互動而設計，主要執行在瀏覽器中，負責按鈕點擊、表單驗證、動態效果等前端行為，近年透過 Node.js 也能用於後端。Java 則是泛用型的物件導向語言，常見於大型企業系統、後端服務與 Android App 開發，需要先編譯才能執行。兩者的語法風格、執行環境與應用領域都不同。簡單記法是：想做網頁互動與前端功能，學的是 JavaScript；想做企業級後端或 Android，才是 Java。名字像，但用途與底層完全不同，請勿混為一談。

JavaScript 可以單獨使用嗎？

可以，但要看您指的是哪種情境。在前端開發中，JavaScript 通常會與 HTML、CSS 搭配：HTML 負責結構、CSS 負責外觀、JavaScript 負責互動，三者分工才能完成完整網頁。不過 JavaScript 本身是一門獨立的程式語言，並非只能附屬於網頁。透過 Node.js，您可以在瀏覽器之外執行它，用來開發後端伺服器、API、命令列工具，甚至桌面應用程式。也就是說，它既能在前端與 HTML、CSS 協作，也能單獨作為後端或工具開發的主力。建議初學者先在網頁環境熟悉基本語法與 DOM 操作，等觀念穩固後再延伸到 Node.js，學習曲線會比較平順。

初學者要先學 HTML、CSS 還是 JavaScript？

一般建議的順序是先學 HTML，接著 CSS，最後才學 JavaScript，因為三者角色不同，循序漸進比較好理解。HTML 是網頁骨架，決定有哪些內容與結構；CSS 負責外觀與排版，讓網頁變美觀；JavaScript 則負責互動與邏輯，讓網頁能回應操作。如果一開始就跳進 JavaScript，會缺少可以操作的網頁元素，學起來容易卡關。先把 HTML 與 CSS 打穩，能做出靜態頁面後，再用 JavaScript 控制這些元素，就能立刻看到互動效果，成就感也高。對完全沒有基礎的人來說，這個順序最不容易半途放棄，也最容易把觀念串連起來。

let 和 const 該怎麼選？

判斷原則很簡單：資料之後還會改變就用 let，不會改變就用 const。const 宣告的是不可重新指定的變數，適合固定不變的值，例如網站名稱、設定參數或常數，一旦賦值就不能再用等號重新指定，可避免不小心被改掉。let 則適合會變動的資料，例如計數器、迴圈索引、會隨操作更新的狀態。實務建議是預設都先用 const，等到確定這個變數真的需要重新賦值，再改成 let，這樣程式碼意圖更清楚，也能減少誤改造成的錯誤。要提醒的是，const 限制的是不能重新指定，若是物件或陣列，其內部屬性或元素仍可修改，這點初學者常誤會。

JavaScript 可以做哪些功能？

JavaScript 的應用範圍非常廣，幾乎現代網站的互動功能都仰賴它。常見用途包括：處理按鈕點擊、滑鼠移動、鍵盤輸入等事件；驗證表單欄位是否填寫完整或格式正確；製作圖片輪播、下拉選單、彈出視窗、分頁切換等效果；即時搜尋與篩選資料；以及購物車計算、會員登入狀態判斷等商業邏輯。進階一點，它還能透過 fetch 與伺服器交換資料，在不重新整理頁面的情況下更新內容，也就是常聽到的非同步技術。若搭配 React、Vue 等框架，更能開發功能完整的 Web App，透過 Node.js 也能跨足後端。簡單說，小至一個按鈕互動，大至整個應用程式，JavaScript 都能參與。

為什麼我的 JavaScript 沒有反應？

JavaScript 沒反應通常是幾個常見原因造成的，建議您依序排查。第一，語法錯誤，例如少了括號、引號或分號，會讓整段程式中斷。第二，元素的 id 或 class 名稱打錯，導致 getElementById 抓不到元素。第三，程式載入順序錯誤，如果在 HTML 元素還沒建立前就執行，就會找不到元素，可把 script 放在 body 結尾，或使用 DOMContentLoaded 事件。第四，大小寫拼錯，因為 JavaScript 嚴格區分大小寫。最有效的偵錯方式，是按 F12 打開瀏覽器的開發者工具，切到 Console 查看錯誤訊息，紅色錯誤通常會直接指出問題出在哪一行。養成先看 Console 的習慣，會比盲目猜測有效率得多。

學完 JavaScript 基礎後下一步學什麼？

打好基礎後，建議先把與網頁互動最相關的進階主題補齊，再進入框架。第一步可以深入 DOM 操作與事件處理，學會動態建立、修改、刪除元素。接著熟悉 ES6 以後的現代語法，例如箭頭函數、解構賦值、模板字串、展開運算子，這些是現今實務的標準寫法。再來是非同步處理，學習 fetch 取得遠端資料、JSON 解析，以及 Promise 與 async／await，這是與伺服器溝通的關鍵，也可了解 localStorage 等瀏覽器儲存機制。等這些觀念都穩固後，再學 React 或 Vue 等前端框架，您會發現上手快很多，因為框架背後仍然是 JavaScript。循序漸進，不要一開始就跳進框架，地基才會扎實。