JavaScript 基礎入門教程 2026 | 零基礎小白學編程

JavaScript 基礎入門教程

HTML 搭好了網頁的骨架，CSS 穿上了漂亮的衣服，但網頁還是「死的」——不會動、不會響應用戶的操作。JavaScript 就是讓網頁「活起來」的語言。這篇教程用大白話帶你從零開始學編程。

一、JavaScript 是什麼？

1.1 通俗理解

想象一個木偶：

HTML = 木偶的身體骨架
CSS = 木偶的衣服和化妝
JavaScript = 操控木偶的線（讓木偶動起來）

一句話總結：JavaScript 是讓網頁能「動起來」的編程語言。

1.2 JavaScript 能做什麼？

能力	例子
修改網頁內容	點擊按鈕後文字變成「已點贊」
響應用戶操作	鼠標點擊、鍵盤輸入、滾動頁面
動畫效果	圖片輪播、下拉菜單、彈窗
數據處理	計算價格、格式化日期、驗證表單
網絡請求	從服務器獲取數據（AJAX/Fetch）
存儲數據	記住用戶的偏好（localStorage）

1.3 怎麼寫 JavaScript？

創建一個 HTML 文件，在 <script> 標籤裡寫 JavaScript：

html

<!DOCTYPE html>
<html>
<head>
  <title>學 JavaScript</title>
</head>
<body>
  <h1 id="title">你好</h1>
  <button onclick="sayHi()">點我</button>

  <script>
    // 這就是 JavaScript 代碼
    function sayHi() {
      document.getElementById('title').textContent = '你點擊了按鈕！'
    }
  </script>
</body>
</html>

用瀏覽器打開，點擊按鈕，標題就會變化。這就是 JavaScript 的魔力！

1.4 在瀏覽器裡試寫代碼

最快的方式：打開瀏覽器 → 按 F12 → 點擊 Console（控制檯）標籤，直接輸入代碼回車：

javascript

console.log('Hello, World!')  // 在控制檯打印信息
alert('彈窗提示！')            // 彈出一個提示框

💡 新手建議：用瀏覽器的 Console 來練習本教程的代碼，不需要額外安裝任何東西。

二、變量（裝數據的盒子）

2.1 什麼是變量？

變量就像一個貼了標籤的盒子，你可以在裡面放東西（數據）：

javascript

let name = '小明'    // 盒子名叫 name，裡面放了 "小明"
let age = 25         // 盒子名叫 age，裡面放了 25

console.log(name)    // 打開 name 盒子看看 → 小明
console.log(age)     // 打開 age 盒子看看 → 25

2.2 let、const 和 var

聲明變量有三種方式：

javascript

// 1. let：可以改變的變量（現代寫法）
let score = 80
score = 90  // ✅ 可以重新賦值

// 2. const：不能改變的常量（現代寫法）
const PI = 3.14159
// PI = 3  // ❌ 報錯！const 不能重新賦值

// 3. var：老寫法（不推薦）
var oldName = '老寫法'

💡 新手記住：
能用 const 就用 const（不會變的值）
需要改變時才用 let
不要用 var（它是老版本的遺留物）

2.3 命名規則

javascript

// ✅ 合法的命名
let userName = '張三'       // 駝峰命名（推薦）
let age2 = 20               // 可以包含數字
let $price = 99.9           // 可以用 $ 開頭
let _temp = '臨時'          // 可以用 _ 開頭

// ❌ 非法的命名
// let 2age = 20            // 不能數字開頭
// let my-name = '張三'     // 不能用連字符
// let let = '關鍵字'       // 不能用保留字

💡 駝峰命名法：第一個單詞小寫，後面每個單詞首字母大寫。如 myFirstName、userAge。

三、數據類型

3.1 基本類型

JavaScript 有幾種基本數據類型：

javascript

// 1. 字符串（文字）— 用引號包起來
let name = '小明'
let greeting = "你好"
let sentence = `我叫${name}`  // 模板字符串（用反引號）

// 2. 數字
let age = 25           // 整數
let price = 9.99       // 小數
let negative = -10     // 負數

// 3. 布爾值（真/假）
let isStudent = true   // 真
let isRich = false     // 假

// 4. undefined（未定義）
let empty             // 聲明瞭但沒賦值
console.log(empty)    // → undefined

// 5. null（空值）
let nothing = null    // 明確表示「什麼都沒有」

3.2 字符串操作

javascript

let firstName = '三'
let lastName = '張'

// 拼接字符串
let fullName = lastName + firstName  // → "張三"

// 模板字符串（推薦！更直觀）
let greeting = `你好，我叫${lastName}${firstName}，今年${age}歲`

// 字符串長度
console.log(name.length)  // → 2（"小明"有兩個字）

// 常用方法
console.log('Hello'.toUpperCase())    // → "HELLO"（轉大寫）
console.log('HELLO'.toLowerCase())    // → "hello"（轉小寫）
console.log('  hi  '.trim())          // → "hi"（去兩端空格）
console.log('apple,banana'.split(','))  // → ["apple", "banana"]（分割）

💡 模板字符串是 ES6 的新特性，用反引號（鍵盤上 1 左邊那個鍵）包裹，${} 裡可以放變量，非常方便。

3.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.333...（除）
console.log(a % b)   // → 1（取餘數：10除以3餘1）

// 自增自減
let count = 0
count++  // count 變成 1
count++  // count 變成 2
count--  // count 變成 1

// 常用數學方法
Math.round(3.7)    // → 4（四捨五入）
Math.floor(3.7)    // → 3（向下取整）
Math.ceil(3.2)     // → 4（向上取整）
Math.random()      // → 0~1 之間的隨機數
Math.max(1, 5, 3)  // → 5（最大值）
Math.min(1, 5, 3)  // → 1（最小值）

四、條件判斷

4.1 if 語句

讓程序根據條件做不同的事：

javascript

let age = 18

if (age >= 18) {
  console.log('你已經成年了')
} else {
  console.log('你還未成年')
}

大白話：如果 age >= 18 成立，就執行第一個 { } 裡的代碼；否則執行 else 裡的代碼。

4.2 if...else if...else

多個條件判斷：

javascript

let score = 85

if (score >= 90) {
  console.log('優秀！')
} else if (score >= 80) {
  console.log('良好！')
} else if (score >= 60) {
  console.log('及格')
} else {
  console.log('不及格')
}
// score=85 → 輸出 "良好！"

4.3 比較運算符

javascript

// 等於（只比值，不比類型）
5 == '5'    // → true（不推薦，容易出 bug）

// 嚴格等於（值和類型都必須相同）
5 === '5'   // → false ✅（推薦用這個）
5 === 5     // → true

// 不等於
5 != '5'    // → true（不推薦）
5 !== '5'   // → true ✅（推薦）

// 大小比較
5 > 3       // → true（大於）
5 < 3       // → false（小於）
5 >= 5      // → true（大於等於）
5 <= 4      // → false（小於等於）

💡 新手鐵律：永遠用 === 和 !==，不用 == 和 !=。嚴格比較更安全，能避免很多莫名其妙的 bug。

4.4 邏輯運算符

javascript

// && 與（兩個條件都要滿足）
let age = 20
let hasTicket = true
if (age >= 18 && hasTicket) {
  console.log('可以入場')
}

// || 或（滿足一個條件就行）
let isVIP = false
let isMember = true
if (isVIP || isMember) {
  console.log('可以享受優惠')
}

// ! 非（取反）
let isRaining = false
if (!isRaining) {
  console.log('可以出門')
}

💡 記憶技巧：
&& = "並且"（兩個都要 true）
|| = "或者"（一個 true 就行）
! = "不是"（true 變 false，false 變 true）

4.5 三元運算符（簡寫 if）

javascript

let age = 20

// if...else 寫法
let result
if (age >= 18) {
  result = '成年'
} else {
  result = '未成年'
}

// 三元運算符簡寫（效果完全一樣）
let result2 = age >= 18 ? '成年' : '未成年'

💡 語法：條件 ? 為真時的值 : 為假時的值

4.6 switch 語句

當條件很多時，switch 比 if...else 更清晰：

javascript

let day = 'Monday'

switch (day) {
  case 'Monday':
    console.log('星期一，上班')
    break
  case 'Saturday':
  case 'Sunday':
    console.log('週末，休息')
    break
  default:
    console.log('其他工作日')
}

💡 注意：每個 case 後面要加 break，否則會繼續執行下面的代碼。default 是所有條件都不滿足時執行的。

五、函數（可重複使用的代碼塊）

5.1 什麼是函數？

函數就像一個食譜：

你給它食材（參數）
它按步驟處理（函數體）
它返回做好的菜（返回值）

javascript

// 定義函數
function greet(name) {
  return `你好，${name}！`
}

// 調用函數
console.log(greet('小明'))  // → "你好，小明！"
console.log(greet('小紅'))  // → "你好，小紅！"

5.2 參數和返回值

javascript

// 帶多個參數和返回值
function add(a, b) {
  return a + b
}

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

// 沒有參數
function sayHello() {
  console.log('Hello!')
}

// 沒有返回值
function logMessage(msg) {
  console.log(`[日誌] ${msg}`)
  // 沒有 return，默認返回 undefined
}

// 默認參數
function greet(name = '匿名用戶') {
  return `你好，${name}`
}

console.log(greet())       // → "你好，匿名用戶"
console.log(greet('小明'))  // → "你好，小明"

5.3 箭頭函數（現代寫法）

ES6 引入了更簡潔的函數寫法：

javascript

// 傳統函數
function add(a, b) {
  return a + b
}

// 箭頭函數（效果完全一樣）
const add = (a, b) => {
  return a + b
}

// 簡寫（只有一行代碼時可以省略 {} 和 return）
const add = (a, b) => a + b

// 只有一個參數時可以省略括號
const double = n => n * 2

// 沒有參數時必須有空括號
const sayHi = () => console.log('Hi!')

💡 新手建議：先學會傳統 function 寫法，再學箭頭函數。日常開發中箭頭函數用得更多。

5.4 函數實戰

javascript

// 計算 BMI
function calcBMI(weight, height) {
  // weight: 體重(kg)，height: 身高(m)
  const bmi = weight / (height * height)
  return Math.round(bmi * 10) / 10  // 保留一位小數
}

// 判斷 BMI 等級
function bmiLevel(bmi) {
  if (bmi < 18.5) return '偏瘦'
  if (bmi < 24) return '正常'
  if (bmi < 28) return '偏胖'
  return '肥胖'
}

let myBMI = calcBMI(70, 1.75)
console.log(`你的BMI是 ${myBMI}，等級：${bmiLevel(myBMI)}`)
// → "你的BMI是 22.9，等級：正常"

六、數組（一排數據）

6.1 創建數組

數組用來存放一組數據：

javascript

// 創建數組
let fruits = ['蘋果', '香蕉', '橘子']
let numbers = [10, 20, 30, 40, 50]
let mixed = [1, 'hello', true, null]  // 可以混合類型（但不推薦）

// 訪問數組元素（從 0 開始數）
console.log(fruits[0])  // → "蘋果"（第1個）
console.log(fruits[1])  // → "香蕉"（第2個）
console.log(fruits[2])  // → "橘子"（第3個）

// 數組長度
console.log(fruits.length)  // → 3

💡 重要：數組下標從 0 開始！第一個元素是 [0]，不是 [1]。

6.2 數組操作

javascript

let fruits = ['蘋果', '香蕉']

// 末尾添加
fruits.push('橘子')   // → ['蘋果', '香蕉', '橘子']

// 末尾刪除
fruits.pop()          // → ['蘋果', '香蕉']

// 開頭添加
fruits.unshift('葡萄')  // → ['葡萄', '蘋果', '香蕉']

// 開頭刪除
fruits.shift()        // → ['蘋果', '香蕉']

// 查找元素位置
let index = fruits.indexOf('蘋果')  // → 0

// 刪除指定位置
fruits.splice(0, 1)   // 從位置0開始刪1個 → ['香蕉']

// 數組長度
console.log(fruits.length)

6.3 遍歷數組

javascript

let fruits = ['蘋果', '香蕉', '橘子']

// 方法1：for 循環
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i])
}

// 方法2：for...of（更簡潔，推薦）
for (let fruit of fruits) {
  console.log(fruit)
}

// 方法3：forEach
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`)
})

6.4 數組常用方法

javascript

let numbers = [1, 2, 3, 4, 5]

// map：對每個元素做處理，返回新數組
let doubled = numbers.map(n => n * 2)
console.log(doubled)  // → [2, 4, 6, 8, 10]

// filter：過濾，返回滿足條件的元素
let evens = numbers.filter(n => n % 2 === 0)
console.log(evens)  // → [2, 4]

// find：找到第一個滿足條件的元素
let found = numbers.find(n => n > 3)
console.log(found)  // → 4

// includes：判斷是否包含某個值
console.log(numbers.includes(3))  // → true

// join：數組轉字符串
let str = ['2026', '08', '01'].join('-')
console.log(str)  // → "2026-08-01"

// reduce：累加
let sum = numbers.reduce((total, n) => total + n, 0)
console.log(sum)  // → 15

💡 map 和 filter 是最常用的兩個方法，務必記住！
map = 「每個都加工一下」
filter = 「挑出符合條件的」

七、對象（鍵值對集合）

7.1 什麼是對象？

如果說數組是「一排編號的盒子」，那對象就是「一排貼了名字標籤的盒子」：

javascript

let person = {
  name: '小明',
  age: 25,
  city: '北京',
  isStudent: true
}

// 讀取屬性（兩種方式）
console.log(person.name)       // → "小明"
console.log(person['age'])     // → 25

// 修改屬性
person.age = 26

// 添加新屬性
person.email = 'xm@example.com'

// 刪除屬性
delete person.isStudent

💡 大白話：對象就是 { 名字: 值, 名字: 值, ... } 的結構。用 . 來讀寫屬性。

7.2 對象嵌套

javascript

let student = {
  name: '小明',
  age: 20,
  address: {
    city: '北京',
    street: '中關村大街1號'
  },
  hobbies: ['編程', '音樂', '遊戲'],
  sayHi: function() {
    return `你好，我是${this.name}`
  }
}

// 訪問嵌套屬性
console.log(student.address.city)    // → "北京"
console.log(student.hobbies[0])      // → "編程"

// 調用對象裡的函數（方法）
console.log(student.sayHi())         // → "你好，我是小明"

7.3 對象常用操作

javascript

// 獲取所有屬性名
let keys = Object.keys(student)
console.log(keys)  // → ["name", "age", "address", "hobbies"]

// 獲取所有值
let values = Object.values(student)
console.log(values)

// 遍歷對象
for (let key in student) {
  console.log(`${key}: ${student[key]}`)
}

// 解構賦值（從對象中取值）
const { name, age } = student
console.log(name)  // → "小明"
console.log(age)   // → 20

八、循環

8.1 for 循環

重複執行一段代碼：

javascript

// 打印 1 到 5
for (let i = 1; i <= 5; i++) {
  console.log(i)
}
// → 1, 2, 3, 4, 5

// 解讀：
// let i = 1     → 從 1 開始
// i <= 5        → 只要 i 小於等於 5 就繼續
// i++           → 每次循環後 i 加 1

大白話理解 for 循環：

初始值：i = 1
條件：i <= 5？
  → 是 → 執行代碼 → i++ → i變成2
  → 是 → 執行代碼 → i++ → i變成3
  → 是 → 執行代碼 → i++ → i變成4
  → 是 → 執行代碼 → i++ → i變成5
  → 是 → 執行代碼 → i++ → i變成6
  → 否 → 結束循環

8.2 while 循環

javascript

// while：先判斷條件，再執行
let count = 0
while (count < 3) {
  console.log(`第 ${count} 次`)
  count++
}

// do...while：先執行一次，再判斷條件
let i = 0
do {
  console.log(`執行了 ${i}`)
  i++
} while (i < 3)

8.3 break 和 continue

javascript

// break：直接跳出循環
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break  // 到5就停了
  }
  console.log(i)
}
// → 1, 2, 3, 4

// continue：跳過本次，繼續下一次
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue  // 跳過3
  }
  console.log(i)
}
// → 1, 2, 4, 5

💡 記憶技巧：
break = 「不幹了，走人」（結束整個循環）
continue = 「這個跳過，繼續下一個」（跳過本次循環）

九、操作網頁（DOM）

9.1 什麼是 DOM？

DOM（文檔對象模型）就是 JavaScript 操作網頁的接口。通過 DOM，你可以：

改變網頁上的文字
改變樣式
添加/刪除元素
響應用戶的點擊、輸入等操作

9.2 獲取元素

javascript

// 通過 id 獲取（最常用）
let title = document.getElementById('title')

// 通過 CSS 選擇器獲取（最靈活，推薦）
let button = document.querySelector('.btn')      // 第一個匹配的
let items = document.querySelectorAll('.item')   // 所有匹配的

// 通過 class 獲取
let cards = document.getElementsByClassName('card')

// 通過標籤名獲取
let paragraphs = document.getElementsByTagName('p')

💡 推薦用 querySelector，它支持所有 CSS 選擇器，和寫 CSS 的方式一致。

9.3 修改內容

javascript

let title = document.getElementById('title')

// 修改文字內容
title.textContent = '新標題'

// 修改 HTML 內容
title.innerHTML = '<strong>加粗的標題</strong>'

// 修改屬性
let img = document.querySelector('img')
img.src = 'new-image.jpg'
img.alt = '新圖片'

9.4 修改樣式

javascript

let box = document.querySelector('.box')

// 修改單個樣式
box.style.color = 'red'
box.style.backgroundColor = '#f0f0f0'  // 注意：用駝峰命名
box.style.fontSize = '20px'

// 添加/刪除/切換 class（推薦方式）
box.classList.add('active')
box.classList.remove('active')
box.classList.toggle('active')  // 有就刪，沒有就加
box.classList.contains('active')  // 判斷是否有某個 class

💡 最佳實踐：用 classList 操作 class 比直接改 style 更好，把樣式寫在 CSS 裡，JS 只負責切換 class。

9.5 添加和刪除元素

javascript

// 創建新元素
let newDiv = document.createElement('div')
newDiv.textContent = '我是新元素'
newDiv.classList.add('card')

// 添加到頁面中
document.body.appendChild(newDiv)  // 添加到 body 末尾

let container = document.querySelector('.container')
container.appendChild(newDiv)  // 添加到指定容器

// 刪除元素
let oldElement = document.querySelector('.old')
oldElement.remove()

十、事件（響應用戶操作）

10.1 什麼是事件？

事件就是用戶的操作：點擊、輸入、滾動、鼠標移動等。JavaScript 可以「監聽」這些事件，並在事件發生時執行代碼。

10.2 添加事件監聽

javascript

let button = document.querySelector('#myButton')

// 推薦方式：addEventListener
button.addEventListener('click', function() {
  alert('你點擊了按鈕！')
})

// 箭頭函數寫法
button.addEventListener('click', () => {
  console.log('按鈕被點擊了')
})

10.3 常用事件

javascript

// 點擊
element.addEventListener('click', () => { ... })

// 鼠標移入/移出
element.addEventListener('mouseenter', () => { ... })
element.addEventListener('mouseleave', () => { ... })

// 輸入框內容變化
input.addEventListener('input', (e) => {
  console.log('當前輸入：', e.target.value)
})

// 表單提交
form.addEventListener('submit', (e) => {
  e.preventDefault()  // 阻止默認提交行為
  console.log('表單提交了')
})

// 鍵盤按鍵
document.addEventListener('keydown', (e) => {
  console.log('按下了：', e.key)
})

// 頁面加載完成
window.addEventListener('load', () => {
  console.log('頁面加載完成！')
})

10.4 事件對象

事件處理函數可以接收一個「事件對象」，包含事件的詳細信息：

javascript

document.addEventListener('click', (event) => {
  console.log('點擊了：', event.target)      // 被點擊的元素
  console.log('座標：', event.clientX, event.clientY)  // 鼠標座標
})

input.addEventListener('input', (event) => {
  console.log('輸入的內容：', event.target.value)  // 輸入框的當前值
})

form.addEventListener('submit', (event) => {
  event.preventDefault()  // 阻止表單默認提交
  // 然後用 JS 處理表單數據
})

💡 e.preventDefault() 非常常用：阻止元素的默認行為（如表單提交刷新頁面、鏈接跳轉）。

十一、實戰練習

11.1 練習一：點擊計數器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>計數器</title>
</head>
<body>
  <h1>點擊計數器</h1>
  <p>你點擊了 <span id="count">0</span> 次</p>
  <button id="btn">點我</button>
  <button id="reset">重置</button>

  <script>
    // 獲取元素
    const countEl = document.getElementById('count')
    const btn = document.getElementById('btn')
    const resetBtn = document.getElementById('reset')

    // 計數變量
    let count = 0

    // 點擊按鈕時 +1
    btn.addEventListener('click', () => {
      count++
      countEl.textContent = count
    })

    // 重置
    resetBtn.addEventListener('click', () => {
      count = 0
      countEl.textContent = count
    })
  </script>
</body>
</html>

11.2 練習二：待辦事項

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>待辦事項</title>
</head>
<body>
  <h1>我的待辦</h1>
  <input id="input" placeholder="輸入任務..." />
  <button id="add">添加</button>
  <ul id="list"></ul>

  <script>
    const input = document.getElementById('input')
    const addBtn = document.getElementById('add')
    const list = document.getElementById('list')

    // 添加任務
    function addTodo() {
      const text = input.value.trim()  // 獲取輸入值並去空格
      if (!text) return  // 空內容不添加

      // 創建列表項
      const li = document.createElement('li')
      li.textContent = text

      // 添加刪除按鈕
      const delBtn = document.createElement('button')
      delBtn.textContent = '刪除'
      delBtn.addEventListener('click', () => li.remove())
      li.appendChild(delBtn)

      // 點擊任務切換完成狀態
      li.addEventListener('click', () => {
        li.style.textDecoration = li.style.textDecoration ? '' : 'line-through'
      })

      list.appendChild(li)
      input.value = ''  // 清空輸入框
    }

    // 點擊添加按鈕
    addBtn.addEventListener('click', addTodo)

    // 按回車也能添加
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') addTodo()
    })
  </script>
</body>
</html>

11.3 練習三：溫度轉換器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>溫度轉換</title>
</head>
<body>
  <h1>溫度轉換器</h1>

  <label>攝氏度：<input type="number" id="celsius" value="0"></label>
  <button id="convert">轉換</button>
  <p>華氏度：<span id="fahrenheit">32</span>°F</p>

  <script>
    const celsiusInput = document.getElementById('celsius')
    const convertBtn = document.getElementById('convert')
    const fahrenheitEl = document.getElementById('fahrenheit')

    // 轉換函數
    function celsiusToFahrenheit(c) {
      return Math.round(c * 9 / 5 + 32)
    }

    convertBtn.addEventListener('click', () => {
      const c = Number(celsiusInput.value)
      const f = celsiusToFahrenheit(c)
      fahrenheitEl.textContent = f
    })

    // 輸入時實時轉換
    celsiusInput.addEventListener('input', () => {
      const c = Number(celsiusInput.value)
      const f = celsiusToFahrenheit(c)
      fahrenheitEl.textContent = f
    })
  </script>
</body>
</html>

十二、常見問題

12.1 `=`、`==`、`===` 有什麼區別？

javascript

// = 是賦值（給變量存值）
let name = '小明'

// == 是比較（只比值，會自動轉換類型）
5 == '5'   // → true（字符串'5'被轉成了數字5）

// === 是嚴格比較（值和類型都必須一樣）
5 === '5'  // → false（數字和字符串類型不同）

💡 記住：= 存值，=== 比值。不要用 ==。

12.2 `null` 和 `undefined` 有什麼區別？

javascript

// undefined：變量聲明瞭但沒賦值
let a
console.log(a)  // → undefined

// null：明確表示「什麼都沒有」
let b = null
console.log(b)  // → null

💡 大白話：undefined 是「還沒給值」，null 是「主動清空了」。

12.3 let 和 const 怎麼選？

javascript

// 不會變的值用 const
const PI = 3.14159
const appName = '我的應用'
const config = { theme: 'dark' }

// 需要變化的值用 let
let count = 0
let isLoggedIn = false
let currentTab = 'home'

💡 原則：默認用 const，需要重新賦值時才改成 let。

12.4 函數和箭頭函數有什麼區別？

javascript

// 傳統函數
function greet(name) {
  return `你好，${name}`
}

// 箭頭函數
const greet = (name) => `你好，${name}`

// 兩者功能基本一樣
// 箭頭函數更簡潔
// 但 this 指向不同（進階內容，初學不用糾結）

十三、JavaScript 速查表

13.1 常用語法速查

功能	代碼
聲明變量	`let x = 1` / `const y = 'hi'`
打印輸出	`console.log('hello')`
條件判斷	`if (a > b) { ... } else { ... }`
函數	`function fn(a) { return a }`
箭頭函數	`const fn = (a) => a * 2`
數組	`let arr = [1, 2, 3]`
對象	`let obj = { name: '小明' }`
模板字符串	`你好${name}`

13.2 數組方法速查

方法	作用	返回
`push()`	末尾添加	新長度
`pop()`	末尾刪除	刪除的元素
`map()`	每個加工	新數組
`filter()`	過濾	新數組
`find()`	找第一個	元素
`includes()`	是否包含	true/false
`join()`	轉字符串	字符串
`forEach()`	遍歷	undefined

13.3 DOM 方法速查

方法	作用
`querySelector(sel)`	獲取第一個匹配元素
`querySelectorAll(sel)`	獲取所有匹配元素
`getElementById(id)`	通過 id 獲取
`createElement(tag)`	創建元素
`appendChild(el)`	添加子元素
`addEventListener(event, fn)`	添加事件監聽

十四、總結

回顧本教程的要點：

變量：用 const 和 let 聲明，默認用 const
數據類型：字符串、數字、布爾值、undefined、null
條件判斷：if...else、switch、三元運算符
比較：永遠用 === 和 !==
函數：可複用的代碼塊，用 return 返回結果
箭頭函數：const fn = (a) => a * 2 更簡潔
數組：有序數據集合，下標從 0 開始
對象：鍵值對集合，用 . 訪問屬性
循環：for、while、for...of 重複執行代碼
DOM：用 querySelector 獲取元素，修改 textContent、style、classList
事件：用 addEventListener 監聽用戶操作

JavaScript 是前端開發的核心語言，入門後繼續學習 ES6+ 特性、異步編程、框架（Vue/React），你的前端之路會越走越寬。

相關閱讀：

JavaScript 基礎入門教程 2026 | 零基礎小白學編程 ​

一、JavaScript 是什麼？ ​

1.1 通俗理解 ​

1.2 JavaScript 能做什麼？ ​

1.3 怎麼寫 JavaScript？ ​

1.4 在瀏覽器裡試寫代碼 ​

二、變量（裝數據的盒子） ​

2.1 什麼是變量？ ​

2.2 let、const 和 var ​

2.3 命名規則 ​

三、數據類型 ​

3.1 基本類型 ​

3.2 字符串操作 ​

3.3 數字操作 ​

四、條件判斷 ​

4.1 if 語句 ​

4.2 if...else if...else ​

4.3 比較運算符 ​

4.4 邏輯運算符 ​

4.5 三元運算符（簡寫 if） ​

4.6 switch 語句 ​

五、函數（可重複使用的代碼塊） ​

5.1 什麼是函數？ ​

5.2 參數和返回值 ​

5.3 箭頭函數（現代寫法） ​

5.4 函數實戰 ​

六、數組（一排數據） ​

6.1 創建數組 ​

6.2 數組操作 ​

6.3 遍歷數組 ​

6.4 數組常用方法 ​

七、對象（鍵值對集合） ​

7.1 什麼是對象？ ​

7.2 對象嵌套 ​

7.3 對象常用操作 ​

八、循環 ​

8.1 for 循環 ​

8.2 while 循環 ​

8.3 break 和 continue ​

九、操作網頁（DOM） ​

9.1 什麼是 DOM？ ​

9.2 獲取元素 ​

9.3 修改內容 ​

9.4 修改樣式 ​

9.5 添加和刪除元素 ​

十、事件（響應用戶操作） ​

10.1 什麼是事件？ ​

10.2 添加事件監聽 ​

10.3 常用事件 ​

10.4 事件對象 ​

十一、實戰練習 ​

11.1 練習一：點擊計數器 ​

11.2 練習二：待辦事項 ​

11.3 練習三：溫度轉換器 ​

十二、常見問題 ​

12.1 =、==、=== 有什麼區別？ ​

12.2 null 和 undefined 有什麼區別？ ​

12.3 let 和 const 怎麼選？ ​

12.4 函數和箭頭函數有什麼區別？ ​

十三、JavaScript 速查表 ​

13.1 常用語法速查 ​

13.2 數組方法速查 ​

13.3 DOM 方法速查 ​

十四、總結 ​

JavaScript 基礎入門教程 2026 | 零基礎小白學編程

一、JavaScript 是什麼？

1.1 通俗理解

1.2 JavaScript 能做什麼？

1.3 怎麼寫 JavaScript？

1.4 在瀏覽器裡試寫代碼

二、變量（裝數據的盒子）

2.1 什麼是變量？

2.2 let、const 和 var

2.3 命名規則

三、數據類型

3.1 基本類型

3.2 字符串操作

3.3 數字操作

四、條件判斷

4.1 if 語句

4.2 if...else if...else

4.3 比較運算符

4.4 邏輯運算符

4.5 三元運算符（簡寫 if）

4.6 switch 語句

五、函數（可重複使用的代碼塊）

5.1 什麼是函數？

5.2 參數和返回值

5.3 箭頭函數（現代寫法）

5.4 函數實戰

六、數組（一排數據）

6.1 創建數組

6.2 數組操作

6.3 遍歷數組

6.4 數組常用方法

七、對象（鍵值對集合）

7.1 什麼是對象？

7.2 對象嵌套

7.3 對象常用操作

八、循環

8.1 for 循環

8.2 while 循環

8.3 break 和 continue

九、操作網頁（DOM）

9.1 什麼是 DOM？

9.2 獲取元素

9.3 修改內容

9.4 修改樣式

9.5 添加和刪除元素

十、事件（響應用戶操作）

10.1 什麼是事件？

10.2 添加事件監聽

10.3 常用事件

10.4 事件對象

十一、實戰練習

11.1 練習一：點擊計數器

11.2 練習二：待辦事項

11.3 練習三：溫度轉換器

十二、常見問題

12.1 `=`、`==`、`===` 有什麼區別？

12.2 `null` 和 `undefined` 有什麼區別？

12.3 let 和 const 怎麼選？

12.4 函數和箭頭函數有什麼區別？

十三、JavaScript 速查表

13.1 常用語法速查

13.2 數組方法速查

13.3 DOM 方法速查

十四、總結