JavaScript 入門教學（十三）：錯誤處理與除錯（try/catch、Console 與開發者工具）

寫程式一定會出錯，差別在於能不能快速找到原因，以及出錯時程式會不會整個停擺。本篇介紹常見的錯誤類型、用 try...catch 優雅地處理錯誤，以及瀏覽器內建的除錯工具。

一、常見的錯誤訊息

錯誤類型	常見原因	例子
SyntaxError	語法寫錯，程式根本無法執行	括號、引號沒有成對
ReferenceError	使用了不存在的變數	變數名稱拼錯、忘了宣告
TypeError	對不適合的值做操作	對 undefined 讀取屬性

最常見的 TypeError 訊息類似「Cannot read properties of undefined (reading 'name')」，意思是：你想讀取 name，但前面的值是 undefined。遇到這種錯誤，先檢查前面的變數是不是沒有拿到預期的資料。

二、用 Console 觀察程式

const user = { name: '小明', age: 20 };

console.log('目前資料：', user);       // 一般訊息
console.warn('這是警告');               // 黃色警告
console.error('這是錯誤');              // 紅色錯誤

const list = [{ id: 1, n: 'A' }, { id: 2, n: 'B' }];
console.table(list);                    // 以表格顯示陣列或物件

在瀏覽器按 F12（部分電腦要按 Fn + F12，或在選單開啟「開發人員工具」），切換到 Console 分頁就能看到輸出，錯誤訊息會附上出錯的檔案與行號，點擊即可跳到該處。

JavaScript 入門教學（十二）：內建物件（Date、Math、字串、陣列與 JSON）

JavaScript 內建了許多現成的物件與方法，不必自己從頭寫。本篇整理最常用的五類：日期（Date）、數學（Math）、字串、陣列與 JSON。熟悉它們，可以省下大量重複的程式碼。

一、Date：日期與時間

const now = new Date();                 // 現在的日期時間
console.log(now.getFullYear());         // 年，例如 2026
console.log(now.getMonth() + 1);        // 月：回傳 0～11，所以要加 1
console.log(now.getDate());             // 日
console.log(now.getDay());              // 星期：0 是星期日，6 是星期六

console.log(now.toLocaleDateString('zh-TW'));   // 依地區格式顯示日期

最容易出錯的是月份：getMonth() 的 0 代表一月。建立指定日期時也是同樣規則：

const newYear = new Date(2027, 0, 1);   // 2027 年 1 月 1 日（月份寫 0）

計算兩個日期相差幾天

const d1 = new Date(2026, 10, 8);       // 2026-11-08
const d2 = new Date(2027, 0, 1);        // 2027-01-01
const days = Math.round((d2 - d1) / (1000 * 60 * 60 * 24));
console.log(days);                      // 54

兩個日期相減，得到的是毫秒數，再除以一天的毫秒數即可。使用 Math.round 是為了避開夏令時間造成的小誤差。

二、Math：數學運算

方法	說明	範例
Math.round(x)	四捨五入	Math.round(2.5) 得 3
Math.floor(x)	無條件捨去	Math.floor(2.9) 得 2
Math.ceil(x)	無條件進位	Math.ceil(2.1) 得 3
Math.max／min	最大／最小值	Math.max(3, 9, 5) 得 9
Math.random()	0 到不含 1 的隨機小數	見下方

// 擲骰子：1～6 的隨機整數
const dice = Math.floor(Math.random() * 6) + 1;

// 陣列取最大值，用展開運算子
const scores = [78, 92, 65];
console.log(Math.max(...scores));       // 92

另外，(3.14159).toFixed(2) 可以指定小數位數，回傳的是字串 '3.14'；(1234567).toLocaleString('zh-TW') 會加上千分位，得到 '1,234,567'。

JavaScript 入門教學（十一）：Cookie 的現代用法（讀寫、屬性與隱私）

Cookie 是網站存在使用者瀏覽器裡的一小段文字資料，常用來記住登入狀態、偏好設定等。它歷史悠久，寫法也有很大的改變。本篇說明現在的正確用法，以及和 localStorage 的差別。

一、Cookie 與 localStorage 的差異

項目	Cookie	localStorage
容量	每個約 4KB	通常約 5MB
是否隨請求送到伺服器	會，每次請求都會附上	不會
有效期限	可設定，到期自動刪除	不會自動過期
主要用途	登入識別、伺服器需要讀取的資料	只在瀏覽器端使用的資料

如果資料只有前端程式要用（例如介面主題），用 localStorage 比較簡單，也不會增加每次請求的大小。需要讓伺服器知道的資料才用 Cookie。

JavaScript 入門教學（十）：用 JavaScript 處理圖片（預先載入、切換與延遲載入）

早期的 JavaScript 教材花很多篇幅介紹「影像物件」：滑鼠移上去換圖（rollover）、預先載入圖片等。這些功能現在有更簡單的做法。本篇保留仍然有用的觀念，並介紹現代的替代方案。

一、img 元素也是 DOM 物件

網頁上的 <img> 就是一個普通的 DOM 元素，可以用 src、alt 等屬性控制：

<img id="pic" src="photo1.jpg" alt="第一張照片" width="400" height="300">

<script>
const pic = document.getElementById('pic');
pic.src = 'photo2.jpg';
pic.alt = '第二張照片';
</script>

換圖時別忘了一併更新 alt，這是給視障者使用的朗讀軟體，以及圖片載入失敗時顯示的替代文字。