JavaScript 入門教學（十六）：綜合實作——做一個會記住資料的簡易記帳本

學了這麼多功能，最好的練習方式就是做一個完整的小專案。這一篇我們用前面學過的 DOM、事件、表單驗證、localStorage 與 JSON，做一個可以新增、刪除並記住資料的「簡易記帳本」。

一、功能與用到的技術

功能	用到的技術	對應文章
輸入項目與金額，按下新增	表單、事件、FormData	（二）、（八）
顯示清單與結餘	DOM 建立元素、陣列方法	（二）、（十二）
點擊刪除	事件委派	（二）
重新開啟網頁後資料還在	localStorage、JSON	（五）、（十二）
資料讀取失敗時不當機	try...catch	（十三）

二、步驟一：HTML 結構

<h2>簡易記帳本</h2>

<form id="ledgerForm">
  <input name="item" placeholder="項目" required maxlength="20">
  <input name="amount" type="number" placeholder="金額" min="1" step="1" required>
  <select name="type">
    <option value="out">支出</option>
    <option value="in">收入</option>
  </select>
  <button>新增</button>
</form>

<ul id="ledgerList"></ul>
<p>結餘：<span id="ledgerTotal">0</span> 元</p>

欄位的 required、min 等屬性會自動交給瀏覽器做基本驗證（第八篇）。

JavaScript 入門教學（十五）：用 JavaScript 控制樣式與動畫（classList、CSS 變數、animate）

網頁的外觀主要由 CSS 決定，而 JavaScript 負責在適當的時機「切換」樣式或啟動動畫。本篇介紹最推薦的做法：用 classList 切換 CSS 類別、用 CSS 變數改變主題色，並用瀏覽器內建的動畫功能製作簡單的動態效果。

一、直接修改 style（適合單一、臨時的變化）

const box = document.getElementById('box');
box.style.backgroundColor = '#ffe9a8';   // CSS 的 background-color 要改成駝峰式
box.style.width = '200px';
box.style.display = 'none';              // 隱藏

直接寫 style 的缺點是樣式散落在程式裡，不容易維護，而且 box.style 只能讀到「行內樣式」，讀不到 CSS 檔案裡設定的值。要讀取實際套用的樣式，請用 getComputedStyle(box).width。

二、classList：切換 CSS 類別（建議做法）

把樣式寫在 CSS，JavaScript 只負責「加上或移除類別」，兩邊各管各的，最好維護。

方法	說明
classList.add('on')	加上類別
classList.remove('on')	移除類別
classList.toggle('on')	有就移除，沒有就加上
classList.contains('on')	檢查是否有此類別（回傳 true／false）

範例：展開與收合

<style>
  .panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
  .panel.open { max-height: 200px; }
</style>

<button id="toggleBtn">顯示／隱藏說明</button>
<div id="panel" class="panel">
  <p>這是可以展開與收合的說明文字。</p>
</div>

<script>
const panel = document.getElementById('panel');
document.getElementById('toggleBtn').addEventListener('click', () => {
  panel.classList.toggle('open');
});
</script>

CSS 的 transition 會讓 max-height 的變化變成平滑的動畫，JavaScript 完全不需要處理動畫細節。

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 分頁就能看到輸出，錯誤訊息會附上出錯的檔案與行號，點擊即可跳到該處。