JavaScript教學：基礎語法、DOM 操作與範例練習

JavaScript 是什麼？它在網頁中負責什麼

JavaScript 是讓網頁產生互動、行為與動態內容的程式語言。HTML 負責結構，CSS 負責外觀，JavaScript 負責使用者點擊、輸入、切換內容、驗證表單、更新畫面等行為。

技術	負責內容	常見例子
HTML	網頁結構	標題、段落、按鈕、表單
CSS	視覺樣式	顏色、字體、排版、間距
JavaScript	互動行為	點按鈕改文字、表單檢查、切換 class

HTML、CSS、JavaScript 的分工

把網頁想成一個可操作的畫面，HTML 是畫面上有哪些元素，CSS 是元素看起來如何，JavaScript 則是在使用者操作後決定畫面怎麼變。初學者常卡住的地方，不是語法本身，而是不知道 JavaScript 最後要接到哪個 HTML 元素。

為什麼現在還值得學 JavaScript

只要目標是做網站，JavaScript 仍然是瀏覽器中最直接的互動語言。即使只會基礎語法，也能處理選單開合、按鈕狀態、表單提示、內容切換。我的判斷是：先把 DOM 和事件練熟，比一開始追很多名詞更有用。

JavaScript 可以延伸到哪些方向，但本文只先學基礎

JavaScript 入門後可以延伸到 API 串接、資料處理、前端元件化與伺服器端程式。不過第一階段應該先把變數、函式、條件判斷、DOM 操作、事件處理弄懂，因為這些才是做出互動網頁的底層能力。

開始寫第一段 JavaScript：放在哪裡、怎麼執行

JavaScript 可以寫在 HTML 的 <script> 標籤中，也可以放在外部 .js 檔案，再由 HTML 載入。新手最適合先用瀏覽器 Console 和最小 HTML 範例確認程式真的有執行。

用 <script> 寫在 HTML 裡

最小範例可以直接存成 index.html 後用瀏覽器開啟。把 <script> 放在頁面元素後面，JavaScript 才選得到前面的 HTML。

<h1 id="title">原本的標題</h1>
<script>
const title = document.querySelector(“#title”);
title.textContent = “這是 JavaScript 改過的標題”;
</script>

用外部 .js 檔案管理程式碼

當程式碼變多時，建議拆成外部 JS 檔案，HTML 負責結構，JavaScript 檔案負責互動。這樣檔案比較好維護，也比較接近真實網站的做法。

<h1 id="title">網站標題</h1>
<script src="main.js"></script>

const title = document.querySelector("#title");
title.textContent = "外部 JS 檔案已載入";

console.log()、alert() 與修改網頁文字的差別

console.log() 主要給開發者檢查資料，alert() 會跳出提示視窗，修改 DOM 則會真的改變網頁內容。實務上我會優先用 Console 檢查，再把結果接到畫面上。

console.log("檢查程式是否執行");
alert("這會跳出提示視窗");
const message = document.querySelector(“#message”);
message.textContent = “這行文字會顯示在網頁上”;

JavaScript 基礎語法速查

JavaScript 基礎語法包含註解、語句、分號、大小寫、命名規則與程式區塊。先掌握這些規則，讀程式碼時才知道每一行在做什麼，也比較容易找出錯誤。

語法項目	用途	範例
註解	說明程式碼，不會被執行	// 這是註解
語句	一個可執行的指令	const name = "建宏";
區塊	用大括號包住一組程式碼	if (ok) { ... }
命名	替變數或函式取可讀名稱	userName

註解、語句與分號

註解是給人看的說明，語句是給瀏覽器執行的指令。分號多數時候可省略，但初學階段保留分號有助於看清楚每一行的結尾。

// 儲存使用者名稱
const userName = "Amy";
// 顯示在 Console
console.log(userName);

大小寫與命名規則

JavaScript 會區分大小寫，userName 和 username 是兩個不同名稱。變數命名建議用小駝峰，例如 totalPrice、submitButton，名稱要看得出用途。

程式區塊 {} 怎麼看

大括號代表一組程式碼的範圍，常出現在條件判斷、函式、迴圈裡。看 JavaScript 時，先找到外層大括號，再看裡面每一行，會比從頭硬讀更穩。

if (isMember) {
  console.log("顯示會員優惠");
}

變數與資料型態：let、const、字串、數字、布林

變數用來儲存可重複使用的資料，常見資料型態包含字串、數字、布林值、陣列與物件。初學者建議預設用 const，真的需要重新指定值時才用 let。

寫法	能否重新指定	建議使用情境
const	不能	不會重新指定的資料、DOM 元素、設定值
let	可以	計數器、狀態切換、會變動的值
var	可以	舊程式碼中會看到，新專案不建議當預設

let、const、var 差在哪

const 適合大多數情況，因為它能避免不小心重新指定資料。let 適合需要變動的值。var 是早期寫法，初學時知道它存在即可。

const siteName = "makewebsites.tw";
let clickCount = 0;
clickCount = clickCount + 1;
console.log(siteName);
console.log(clickCount);

字串、數字、布林值

字串是文字，數字可做計算，布林值只有 true 或 false，常用在條件判斷。資料型態不是背名詞，重點是知道每一種資料能做什麼。

const title = "JavaScript教學";
const price = 1200;
const isPublished = true;
console.log(title, price, isPublished);

陣列與物件的入門用法

陣列用來存放多筆同類資料，物件用來描述一個東西的多個屬性。文章列表、選單項目、商品資料，都常用這兩種結構。

const lessons = ["變數", "函式", "DOM"];
const article = {
  title: "JavaScript 入門",
  author: "陳建宏",
  year: 2026
};
console.log(lessons[0]);
console.log(article.title);

初學者建議：預設用 const，需要改值才用 let

我的習慣是先寫 const，當你真的遇到數字累加、狀態切換、輸入內容更新，再改成 let。這個規則能讓程式碼更穩，也會逼你想清楚資料是否應該被改動。

運算子與條件判斷：讓程式做決策

運算子用來比較、計算或組合條件，條件判斷則根據布林結果執行不同程式碼。表單驗證、會員狀態、按鈕是否可點，都會用到這一層邏輯。

比較運算子與邏輯運算子

比較運算子會產生 true 或 false，邏輯運算子則把多個條件組合起來。初學者要先習慣用嚴格比較 ===。

const age = 20;
const hasTicket = true;
console.log(age >= 18);
console.log(age >= 18 && hasTicket);

if...else 基本寫法

if...else 是最常見的判斷語法。條件成立就執行第一段，不成立就執行另一段。寫判斷時，先把條件用白話講清楚，再轉成程式碼。

const score = 75;
if (score >= 60) {
console.log(“及格”);
} else {
console.log(“需要再練習”);
}

表單驗證的簡單判斷例子

表單驗證的核心就是檢查輸入是否符合條件。下面例子會判斷姓名是否為空，若沒有輸入，就顯示提示文字。

<input id="nameInput" type="text" placeholder="輸入姓名">
<p id="error"></p>
<script>
const nameInput = document.querySelector(“#nameInput”);
const error = document.querySelector(“#error”);
if (nameInput.value === "") {
error.textContent = “請先輸入姓名”;
}
</script>

函式教學：參數、回傳值與重複使用

函式可以把重複使用的邏輯包起來，需要時再呼叫。函式可接收參數，也可以用 return 回傳結果，是 JavaScript 基礎語法中最重要的組織方式之一。

函式宣告怎麼寫

函式宣告由 function、函式名稱、小括號與大括號組成。把會重複出現的程式碼放進函式，可以降低複製貼上的錯誤。

function sayHello() {
  console.log("你好，歡迎學 JavaScript");
}
sayHello();

參數與回傳值

參數是函式接收的資料，回傳值是函式算完後交回來的結果。初學者要分清楚：console.log() 只是顯示資料，return 才是把結果交出去。

function addPrice(price, fee) {
  return price + fee;
}
const total = addPrice(1000, 80);
console.log(total);

傳統函式與箭頭函式入門差異

箭頭函式是現代 JavaScript 常見寫法，適合寫較短的函式或事件處理。入門階段先會讀、會寫基本形式即可，不需要急著處理更深入的行為差異。

function double(number) {
  return number * 2;
}
const doubleAgain = (number) => {
return number * 2;
};

迴圈、陣列方法與物件基本操作

迴圈用來重複執行程式碼，陣列方法用來處理多筆資料，物件屬性則用來讀取或更新一筆資料的細節。只要開始做清單、選單、文章卡片，就會用到它們。

for 與 while 基本用法

for 適合知道要跑幾次的情境，while 適合依條件持續執行。初學者可先把 for 練熟，因為它在處理陣列時最直覺。

const items = ["首頁", "文章", "聯絡"];
for (let i = 0; i < items.length; i++) {
console.log(items[i]);
}

forEach 與 map 入門

forEach 適合逐筆執行動作，map 適合把原本的陣列轉成新的陣列。兩者都常見，但目的不同，不能只因為語法短就混用。

const prices = [100, 200, 300];
prices.forEach((price) => {
console.log(price);
});
const discountedPrices = prices.map((price) => {
return price * 0.9;
});
console.log(discountedPrices);

讀取與更新物件屬性

物件適合描述一筆有多個屬性的資料，例如文章標題、作者、年份。讀取屬性可用點記法，更新時直接指定新的值。

const post = {
  title: "CSS Flexbox 教學",
  author: "陳建宏",
  views: 0
};
post.views = post.views + 1;
console.log(post.title);
console.log(post.views);

DOM 操作：選取元素、修改內容與樣式

DOM 是瀏覽器把 HTML 轉成可被 JavaScript 操作的文件結構。透過 DOM，JavaScript 可以選取元素、修改文字、插入 HTML、切換 class、調整樣式。

任務	常用寫法	用途
選取元素	document.querySelector()	取得第一個符合條件的元素
修改文字	textContent	安全地改純文字
插入 HTML	innerHTML	需要產生標籤時使用
切換 class	classList	控制樣式狀態
修改行內樣式	style	少量即時樣式調整

DOM 是什麼

DOM 代表 HTML 文件在瀏覽器中的結構。你看到的是網頁畫面，JavaScript 操作的是 DOM 節點。這也是為什麼 HTML 還沒出現時就選元素，會得到 null。

用 querySelector() 選元素

querySelector() 可以用 CSS 選擇器選取元素，例如 ID、class 或標籤名稱。實作網站時，我通常會替重要互動元素加上清楚的 class 或 ID，避免選到錯的元素。

<h2 class="page-title">原本標題</h2>
<script>
const pageTitle = document.querySelector(“.page-title”);
console.log(pageTitle);
</script>

修改文字、HTML、CSS class

修改純文字用 textContent，切換樣式狀態用 classList。少量樣式可用 style，但大量視覺變化通常交給 CSS class 比較乾淨。

<p id="status">尚未啟用</p>
<script>
const statusText = document.querySelector(“#status”);
statusText.textContent = “已啟用”;
statusText.classList.add(“is-active”);
statusText.style.color = “green”;
</script>

textContent 與 innerHTML 什麼時候用

只要是單純改文字，優先用 textContent。只有在你確定需要產生 HTML 標籤時，才使用 innerHTML。這個判斷很重要，因為 innerHTML 若處理不可信內容，容易讓頁面暴露風險。

事件處理：click、input、submit 怎麼綁定

事件處理是讓使用者操作觸發 JavaScript 的方式。常見事件包含 click、input、submit，通常用 addEventListener() 綁定指定函式。

addEventListener() 基本寫法

addEventListener() 需要事件名稱與要執行的函式。寫事件時，可以照著「選元素、綁事件、更新畫面、用 Console 驗證」這個流程走。

const button = document.querySelector("#button");
button.addEventListener(“click”, () => {
console.log(“按鈕被點擊了”);
});

點擊按鈕改變文字

這是最適合新手的第一個 DOM 事件練習，因為可以清楚看到點擊後畫面改變。若按了沒有反應，先檢查按鈕是否選得到，再看 Console 有沒有錯誤訊息。

<button id="changeButton">改變文字</button>
<p id="result">等待點擊</p>
<script>
const changeButton = document.querySelector(“#changeButton”);
const result = document.querySelector(“#result”);
changeButton.addEventListener(“click”, () => {
result.textContent = “文字已經被 JavaScript 更新”;
});
</script>

表單輸入即時顯示結果

input 事件會在使用者輸入時觸發，適合做即時預覽、字數提示、簡單搜尋。下面範例會把輸入內容同步顯示到段落中。

<input id="keyword" type="text" placeholder="輸入關鍵字">
<p id="preview">尚未輸入</p>
<script>
const keyword = document.querySelector(“#keyword”);
const preview = document.querySelector(“#preview”);
keyword.addEventListener(“input”, (event) => {
preview.textContent = event.target.value;
});
</script>

JavaScript 入門實作：做一個簡單網頁時鐘

網頁時鐘可以把變數、函式、DOM、時間物件與定時更新串在一起。這個練習不大，但能看出 JavaScript 如何把資料轉成畫面上的即時內容。

HTML 結構

先準備一個顯示時間的元素。結構越單純，越能專心看 JavaScript 的流程。

<div class="clock-box">
  <p>目前時間</p>
  <strong id="clock">--:--:--</strong>
</div>

JavaScript 更新時間

使用 Date 取得目前時間，再把小時、分鐘、秒數組成字串，最後寫回 DOM。這裡的重點是把「算資料」和「改畫面」放進同一個函式。

const clock = document.querySelector("#clock");
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, “0”);
const minutes = String(now.getMinutes()).padStart(2, “0”);
const seconds = String(now.getSeconds()).padStart(2, “0”);
clock.textContent = ${hours}:${minutes}:${seconds};
}
updateClock();

每秒自動刷新畫面

setInterval() 可以每隔指定時間執行一次函式。時間單位是毫秒，所以每秒更新一次要填入 1000。

const clock = document.querySelector("#clock");
function updateClock() {
const now = new Date();
const timeText = now.toLocaleTimeString(“zh-TW”);
clock.textContent = timeText;
}
updateClock();
setInterval(updateClock, 1000);

延伸練習：改成倒數計時器

做完時鐘後，可以改成倒數計時器：準備一個目標時間，用目前時間相減，算出剩餘秒數，再更新畫面。這個練習會用到變數、函式、條件判斷與 DOM 更新，很適合當第一個小作品。

初學者常見錯誤與除錯流程

JavaScript 沒反應時，先看 Console 錯誤，再確認 JS 檔案有載入、元素是否選得到、事件是否成功綁定、大小寫與拼字是否正確。不要只盯著畫面猜原因。

先看 Console 錯誤

瀏覽器開發者工具的 Console 會顯示錯誤訊息與行號。初學者常忽略這一步，但它通常已經把問題位置指出來了。先讀錯誤，再改程式碼，會比重寫一整段有效。

確認 JS 檔案有載入

外部 JS 沒載入時，頁面不會有互動。可以先在檔案第一行加上 console.log("main.js loaded")，重新整理後看 Console 是否出現文字。

console.log("main.js loaded");

確認元素已存在再選取

如果 querySelector() 回傳 null，通常是選擇器寫錯，或 JavaScript 執行時 HTML 元素還沒出現。把 <script> 放在元素後面，是最直覺的處理方式。

常見拼字與大小寫錯誤

addEventListener、querySelector、textContent 都要注意大小寫。JavaScript 對大小寫敏感，少一個字母或大小寫錯了，就可能讓程式停止執行。

學完基礎後，JavaScript 下一步該學什麼

學完 JavaScript 基礎後，下一步應該先練 DOM、事件與小專案，再理解現代語法、API 串接與非同步概念。不要急著跳到大型工具，先做出能互動的網頁。

階段	要學的內容	練習方向
基礎語法	變數、函式、條件、迴圈	寫計算、判斷、資料整理練習
DOM 與事件	querySelector、classList、addEventListener	按鈕互動、表單提示、內容切換
小專案	Date、setInterval、陣列資料	時鐘、待辦清單、字數計算器
資料串接	Fetch、Promise、async/await	理解 API 回傳資料怎麼顯示到頁面
進階方向	框架或後端環境	等基礎和 DOM 觀念穩定後再選方向

現代 JavaScript 至少要知道哪些語法

現代入門至少要知道 let、const、箭頭函式、模板字串、陣列方法與物件基本操作。這些語法會頻繁出現在範例和真實網站中。

非同步 JavaScript 只先理解用途

非同步常用在向伺服器取得資料，例如讀取文章列表、提交表單、載入外部資料。初學者先知道它解決「等待資料回來」的問題即可，不需要一開始就鑽進完整細節。

什麼時候再學 React、Vue 或 Node.js

等你能用 Vanilla JavaScript 做出按鈕互動、表單驗證、內容切換、小型專案後，再考慮學框架或伺服器端環境。過早跳進工具，常會讓真正的基礎問題被包起來，看似會做，其實不會修。

JavaScript 教學常見問題

JavaScript 入門常見問題多半集中在語言差異、HTML/CSS 前置能力、script 放置位置、DOM 觀念、事件沒反應與下一步學習順序。先把這些問題釐清，練習會順很多。

JavaScript 和 Java 一樣嗎？

不一樣。JavaScript 和 Java 是不同語言，語法、用途與執行環境都不同。學網頁互動時，重點是 JavaScript，因為瀏覽器可以直接執行它，用來操作 DOM、處理事件與更新畫面。

學 JavaScript 前一定要先會 HTML/CSS 嗎？

建議先會基本 HTML 和 CSS。JavaScript 常要選取 HTML 元素、修改文字、切換 class，如果完全不懂 HTML/CSS，會很難理解程式碼最後影響的是哪個畫面位置。

JavaScript 要寫在 HTML 的 head 還是 body？

初學時建議把 <script> 放在需要操作的 HTML 元素後面，通常接近 </body> 前。這樣 JavaScript 執行時，元素已經存在，比較不容易選不到 DOM。

let、const、var 差在哪？

const 不能重新指定，適合大多數資料；let 可以重新指定，適合會變動的值；var 是舊寫法，新手不建議當成預設。日常寫法可先用 const，需要改值再用 let。

DOM 是什麼？為什麼 JavaScript 要操作 DOM？

DOM 是瀏覽器把 HTML 轉成可操作的文件結構。JavaScript 透過 DOM 才能選取元素、改文字、切換樣式、綁定事件。沒有 DOM，JavaScript 就很難影響使用者看見的頁面。

為什麼我點按鈕沒有反應？

先打開 Console 看錯誤，再檢查按鈕選擇器是否正確、JS 檔案是否載入、事件名稱是否拼對、程式是否在元素出現前就執行。多數按鈕沒反應，都能從這幾項找到原因。

console.log() 和 alert() 差在哪？

console.log() 會把資料顯示在開發者工具 Console，適合除錯；alert() 會跳出視窗，會打斷使用者操作。實作時通常用 console.log() 檢查，用 DOM 更新畫面。

初學者需要先學 async/await 嗎？

不需要一開始就深入。先理解 async/await 常用在等待資料回來，例如 API 串接。等變數、函式、DOM、事件都能順手使用後，再學非同步會比較容易接上實際情境。

JavaScript 大概要學多久才算入門？

沒有固定天數。能看懂變數、函式、條件判斷、陣列、物件，並用 DOM 和事件做出按鈕互動、表單提示、小型時鐘，就可以算具備入門能力。重點是可實作，不是看完多少章節。

可以只用 JavaScript 做完整網站嗎？

可以做出很多互動，但完整網站仍需要 HTML 負責結構、CSS 負責樣式。JavaScript 最適合處理行為與資料變化。對初學者來說，三者一起練，會比只盯著 JavaScript 更實際。

瀏覽器關掉 JavaScript 會怎樣？

如果瀏覽器停用 JavaScript，依賴它的互動功能可能失效，例如按鈕切換、表單即時提示、動態載入內容。基本 HTML 內容仍可能顯示，但互動體驗會大幅受限。