在了解了內容及樣式排版之後，最後一個部份，就是來看看我們的程式是怎麼動起來的。程式運作邏輯的 JavaScript，就寫在程式碼最下方的 <script> 標籤裡。

注意 AI 每次生成的實作方式都不太一樣，函式名稱也不一定相同，所以可以再跟 Gemini Cli 互動，請他把 JavaScript 各個步驟加上註釋。或是你的 JavaScript 程式碼貼回去 AI 中，請它解釋各部份的功能。

我們先來對比一下 Python 及 JavaScript 的函式寫法：

# Python 
def 函式名稱(參數):
  函式邏輯
  return 回傳值
  

// JavaScript
function 函式名稱(參數) {
  函式邏輯;
  return 回傳值;
}

接著我們來看看幾個關鍵的函式：

1. 在表單裡填入資料，按下[新增]按鈕後會發生的事。

我們在每行程式的上方加上比較詳細的解釋。你也可以用 AI 幫你的程式碼加上註釋。

function addTransaction(e) {
  //不重要，處理原生按鈕行為
  e.preventDefault();

  // 用 CSS 選擇器找到是"支出"還是"收入"
  const type = document.querySelector('input[name="type"]:checked').value;
  // 找到金額的值，並將文字轉成有小數點的數字
  const amountValue = parseFloat(amountInput.value);

  // 如果輸入不完全的話，就不繼續處理，用 `return` 直接終止函式
  if (descriptionInput.value.trim() === '' || isNaN(amountValue)) {
    alert('請輸入有效的項目描述和金額。');
    return;
  }

  //作出一個新的「交易」的資料
  // 這是在 JavaScript 叫"物件"的資料型別 (類似Python裡的"字典"型別)
  const transaction = {
    id: generateID(),
    description: descriptionInput.value,
    amount: type === 'income' ? amountValue : -amountValue,
    type: type,
    datetime: datetimeInput.value
  };

  //對函式外部的交易記錄裡，新增這本新的交易
  transactions.push(transaction);
  //呼叫將交易記錄儲存到瀏覽裡的 LocalStorage 裡的函式
  saveTransactions();
  //重新產生畫面，這樣新的交易才會出現在畫面上
  renderAll();
  
  // 下兩行都是用來清空表單裡填入的資訊，以便填入新資料
  descriptionInput.value = '';
  amountInput.value = '';
  // 重新設定時間
  setDateTimeToNow();
}

2. 從 LocalStorage 載入交易記錄，及儲存交易記錄

在每個現代的瀏覽器中，都有一個叫 LocalStorage (本地儲存) 的小空間，可以讓你把少量的資料存在裡面，這樣關閉再重新打開網頁，資料也不會消失。

我們可以在 DevTool 中看到它，及裡面儲存的資料。對每個網站來說，你可以想像 LocalStorage 是一個很大的物件(或是 Python 的字典檔)，把一筆筆資料存在不同的 Key 裡面。

另外要注意，LocalStorage 對每個網域大約只能存總共 10MB 的資料。但我們一筆支出的資料只有單純的文字，所以需要的容量很小，這個記帳本大約可以存10萬筆記錄。之後我們要寫多人使用或是存圖片等大資料的程式時，我們會選擇功能更強(但比較複雜)的工具。

來看看我們的程式碼：

// 函式開頭
// ....幾行找到畫面上元素的函式

// State: 從 LocalStorage 載入交易紀錄
let transactions = JSON.parse(localStorage.getItem('transactions')) || [];

// --- 函式 ---
// 將交易紀錄儲存到 LocalStorage
function saveTransactions() {
  // 呼叫 localStorage 上的 `setItem` 函式，並傳入 key 及 資料的值
  localStorage.setItem('transactions', JSON.stringify(transactions));
}

3. 每一筆交易記錄是怎麼被放到畫面上的表格裡的？

// 渲染單筆交易紀錄
function renderTransaction(transaction) {

  // 將交易紀錄分解成各個屬性
  const { id, description, amount, type, datetime } = transaction;
  
  // 根據收支類型決定顯示的符號和顏色
  const sign = type === 'income' ? '+' : '-';

  // 判斷是收入還是支出，並設定相應的 CSS 類別
  const itemClass = type === 'income' ? 'income' : 'expense';

  // 用 <tr> 來增加一行表格列
  const row = document.createElement('tr');
  
  // 在<tr>裡面塞進使用<td>標籤組成的表格內容
  row.innerHTML = `
    <td>${formatDateTime(datetime)}</td>
    <td>${description}</td>
    <td class="${itemClass}">${sign} $${Math.abs(amount).toFixed(2)}</td>
    <td><button class="delete-btn" onclick="deleteTransaction('${id}')">刪除       </button></td>
    `;

  // 將新列插入到歷史紀錄裡面
  historyListEl.appendChild(row);
}

營火前的小複習

1. 網頁程式的邏輯是用 JavaScript 寫的。
2. JavaScript 的函式寫法是 function(args){ }
3. 瀏覽器有個叫 LocalStorage 的空間可以存小量資料

測驗

1. 你能找到你的 JavaScript 程式裡下列功能的函式，以及是哪裡呼叫它的嗎？
   • 更新上方摘要資訊區塊的函式
   • 刪除交易紀錄的函式
2. 最上方的 document.addEventListener('DOMContentLoaded', () => { 是什麼意思

地圖