JavaScript 入門教學（十四）：物件與 class（屬性、方法、this 與類別）

前面幾篇已經大量使用物件（例如 document、Math）。這一篇要學習如何自己建立物件，並用 class 把「資料」與「功能」包裝在一起，讓程式更有條理。

一、物件：用屬性描述一個東西

const student = {
  name: '小明',
  age: 20,
  scores: [78, 92, 65],
  greet() {
    return '大家好，我是' + this.name;
  }
};

console.log(student.name);          // 小明（點記法）
console.log(student['age']);        // 20（中括號記法，屬性名稱可用變數）
console.log(student.greet());       // 大家好，我是小明

student.age = 21;                   // 修改
student.email = 'ming@example.com'; // 新增（範例信箱）
delete student.email;               // 刪除

物件裡的函式稱為方法。

二、this：指的是「呼叫它的物件」

方法裡的 this 通常指向呼叫該方法的那個物件。上例中 student.greet() 的 this 就是 student。

常見陷阱：箭頭函式沒有自己的 this

const obj = {
  name: '小明',
  good() { return this.name; },          // 正確
  bad: () => { return this.name; }       // 箭頭函式的 this 不是 obj，拿不到 name
};

console.log(obj.good());            // 小明
console.log(obj.bad());             // 拿不到「小明」（結果依執行環境而定，可能是空字串或 undefined）

所以「物件裡的方法」請用 greet() { ... } 的寫法，不要用箭頭函式。另一個陷阱是把方法單獨取出來呼叫（例如 const f = student.greet; f();），這時 this 就不是 student 了。

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。