JavaScript 是什麼？
JavaScript 是一種用於建立動態與互動式網頁的程式語言。它通常會和 HTML、CSS 搭配使用，讓原本靜態的網頁能夠回應使用者操作，進一步提升整體使用體驗。
如果把一個網站比喻成一間店面，那麼：
- HTML 是店內的基本結構，例如牆面、門窗與櫃台
- CSS 是裝潢與陳列風格，決定整體視覺設計
- JavaScript 則是店員的反應能力，負責回應顧客操作與觸發各種互動功能
例如當使用者點擊按鈕、輸入表單、切換選單或看到提示訊息時，這些動作大多都仰賴 JavaScript 來實現。
為什麼學 JavaScript 很重要？
JavaScript 是現代前端開發的核心技術之一。無論是企業形象網站、購物車網站、會員系統、部落格，甚至是互動式 Web App，都會使用到 JavaScript。
JavaScript 常見用途包括：
- 控制網頁內容的顯示與更新
- 處理按鈕點擊、滑鼠移動、鍵盤輸入等事件
- 驗證表單資料是否填寫正確
- 建立輪播、下拉選單、彈出視窗等互動效果
- 與伺服器交換資料，做到不重整頁面的更新
也就是說，如果 HTML 是把網頁「搭起來」，CSS 是把網頁「變好看」，那 JavaScript 就是把網頁「變聰明」。
JavaScript 如何加入網頁？
JavaScript 可以直接寫在 HTML 中，也可以另外建立 .js 檔案再引入。
方法一：直接寫在 HTML 裡
<script>
alert("歡迎來到我的網站！");
</script>方法二：引用外部 JavaScript 檔案
<script src="script.js"></script>一般來說，實務上比較常使用外部檔案方式，因為比較方便管理，也有利於程式碼維護。
JavaScript 基本語法介紹
1. Hello, World! 範例
學習任何程式語言時，最經典的第一步通常都是顯示一段簡單訊息。
<!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 把文字放進指定元素裡：
<p id="demo"></p>
<script>
document.getElementById("demo").textContent="Hello, World!";
</script>這種方式更符合現代網站開發習慣。
2. 變數與資料類型
變數可以想像成一個用來存放資料的容器。JavaScript 常用 let 與 const 來宣告變數。
let name="John";
let age=25;
let isAdult=true;常見資料類型
字串（String）
let city="Taipei";數字（Number）
let price=100;
let score=95.5;布林值（Boolean）
let isOpen=true;
let isClose=false;陣列（Array）
let fruits= ["蘋果","香蕉","葡萄"];物件（Object）
let user= {
name:"Amy",
age:30
};let 與 const 差異
let
適合宣告之後可能會改變的資料。
let count=1;
count=2;const
適合固定不變的資料。
const siteName="My Website";初學者常見原則很簡單：
會變就用 let，不會變就用 const。
3. 運算子
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比較運算子
console.log(10>5);// true
console.log(10<5);// false
console.log(10=="10");// true
console.log(10==="10");// false這裡有一個很重要的觀念：
== 只比值，=== 會同時比值與型別。實務上通常建議優先使用 ===，能減少很多奇怪的錯誤。
4. 條件判斷
當程式需要依照不同條件做出不同反應時，就會用到條件判斷。
if...else 範例
let age=18;
if (age>=18) {
console.log("你已成年");
}else {
console.log("你還未成年");
}else if 範例
let score=85;
if (score>=90) {
console.log("優秀");
}else if (score>=60) {
console.log("及格");
}else {
console.log("不及格");
}這類語法很常用在：
- 判斷登入狀態
- 判斷折扣條件
- 判斷使用者輸入是否符合規則
5. 迴圈
如果有些動作需要重複執行，就可以使用迴圈。
for 迴圈
for (let i=1;i<=5;i++) {
console.log("這是第 "+i+" 次迴圈");
}while 迴圈
let i=1;
while (i<=5) {
console.log("目前數字是："+i);
i++;
}搭配陣列使用
let fruits= ["蘋果","香蕉","葡萄"];
for (let i=0;i<fruits.length;i++) {
console.log(fruits[i]);
}更簡潔的寫法：for...of
let fruits= ["蘋果","香蕉","葡萄"];
for (let fruit of fruits) {
console.log(fruit);
}6. 函數（Function）
函數是把一段功能包裝起來，之後需要時可以反覆呼叫。
基本函數
function greet(name) {
console.log("Hello, "+name);
}
greet("Alice");有回傳值的函數
function add(a,b) {
return a+b;
}
let result=add(5,3);
console.log(result);// 8箭頭函數
const square=num =>num*num;
console.log(square(6));// 36函數的好處是可以讓程式更整齊，也比較容易重複利用。
7. 陣列與物件
這兩者是 JavaScript 裡很常見的資料型態。
陣列：儲存多筆資料
let colors= ["紅色","藍色","綠色"];
console.log(colors[0]);// 紅色新增資料：
colors.push("黃色");
console.log(colors);物件：儲存有名稱的資料
let person= {
name:"Tom",
age:28,
job:"設計師"
};
console.log(person.name);
console.log(person.age);修改資料：
person.age=29;陣列適合放一串項目，物件適合放一筆完整資料。
8. DOM 操作
DOM 可以理解成網頁中的元素結構。JavaScript 可以透過 DOM 去取得元素，並修改內容、樣式與屬性。
更改文字內容
<p id="text">原本的文字</p>
<script>
document.getElementById("text").textContent="這段文字已被 JavaScript 更改。";
</script>更改樣式
<p id="title">這是一段文字</p>
<script>
const title=document.getElementById("title");
title.style.color="blue";
title.style.fontSize="24px";
</script>加入 class
<p id="message">歡迎光臨</p>
<script>
document.getElementById("message").classList.add("highlight");
</script>通常使用 classList.add() 會比直接修改樣式更好維護。
9. 事件處理
事件就是使用者在網頁上的操作，例如點擊、輸入、滑鼠移入等。
按鈕點擊事件
<button id="btn">點擊我</button>
<script>
document.getElementById("btn").addEventListener("click",function() {
alert("你按下了按鈕！");
});
</script>輸入框事件
<input type="text" id="username" placeholder="請輸入名稱">
<script>
document.getElementById("username").addEventListener("input",function(event) {
console.log("目前輸入內容："+event.target.value);
});
</script>事件處理是 JavaScript 最常見的應用之一，因為互動式網頁幾乎都會用到。
10. 表單驗證
JavaScript 很常被用來檢查表單資料是否填寫完整或格式正確。
基本範例：檢查欄位是否空白
<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 格式驗證簡易範例
function isValidEmail(email) {
return email.includes("@")&&email.includes(".");
}雖然這只是簡化寫法，但對初學者來說很適合先理解概念。
11. 綜合範例：輸入名字後顯示歡迎訊息
下面這個範例把變數、條件判斷、DOM 操作與事件處理結合在一起。
<!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. 新手常見錯誤
1. 大小寫打錯
JavaScript 區分大小寫。
let userName="Amy";
console.log(username);// 錯誤2. 把 = 和 === 搞混
= 是指定值，=== 才是比較。
3. 元素還沒載入就先抓取
如果 JavaScript 太早執行，可能會找不到對應元素。
4. 忘記看瀏覽器 Console
當 JavaScript 沒反應時，先按 F12 打開開發者工具，看 Console 錯誤訊息，通常會比瞎猜有效很多。
13. 初學者建議學習順序
如果你剛開始接觸 JavaScript，建議依照這個順序學：
- 變數與資料型別
- 運算子
- 條件判斷
- 迴圈
- 函數
- 陣列與物件
- DOM 操作
- 事件處理
- 表單驗證
- API 與非同步概念
這樣的順序比較穩，也比較不容易在一開始就被進階語法打到懷疑人生。
結論
JavaScript 是現代網頁開發不可或缺的程式語言。它不只讓網頁能夠與使用者互動，也能處理資料、驗證表單、控制畫面變化，甚至能與伺服器進行溝通。
對初學者而言，最重要的不是一開始就背熟所有語法，而是先理解每個語法的用途，再透過實際範例反覆練習。只要把基本觀念建立起來，後續無論是學習更進階的 JavaScript、前端框架，或開發更完整的網站功能，都會順利很多。
常見問與答 FAQ
JavaScript 和 Java 一樣嗎？
不一樣。雖然名字相似，但它們是兩種不同的程式語言。JavaScript 主要用在網頁互動，Java 則常見於企業應用、後端系統與 Android 開發。
JavaScript 可以單獨使用嗎？
可以。在前端開發中通常會搭配 HTML 與 CSS 使用，但透過 Node.js，JavaScript 也能用在伺服器端。
初學者要先學 HTML、CSS 還是 JavaScript？
一般建議先學 HTML 與 CSS，再學 JavaScript。先了解網頁的結構與外觀後，再學互動行為會比較容易理解。
let 和 const 該怎麼選？
如果資料之後還會變動，用 let；如果不會變動，用 const。這是最實用也最常見的判斷方式。
JavaScript 可以做哪些功能？
JavaScript 可以做按鈕互動、表單驗證、即時搜尋、輪播效果、選單展開、購物車功能、資料載入與 Web App 開發等。
為什麼我的 JavaScript 沒有反應？
常見原因包括語法錯誤、元素 id 打錯、程式載入順序錯誤，或瀏覽器 Console 有報錯訊息。
學完 JavaScript 基礎後下一步學什麼？
可以接著學 DOM 深入操作、ES6 語法、fetch、JSON、非同步處理、localStorage，以及 React 或 Vue 等前端框架。
