星期三, 2月 18, 2026

[JS] 基礎練習

該筆記會在 GAS 上練習 js
  • 資料來源：陣列、物件概念
  • 基礎函示：push、filter 使用
  • DOM API：使用 API 來顯示資料，而非使用 innerHTML
  • addEventListener 註冊事件：DOMContentLoaded 和 Click 事件

gs code 
/**
 * 處理 HTTP GET 請求
 * @return {HtmlOutput}
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('圖書館館藏管理系統');
}

/**
 * 嵌入 HTML 檔案內容
 * @param {string} filename 檔案名稱
 * @return {string} 檔案內容
 */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

index.html 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>新增書籍館藏</h2>
    <div class="input-group">
      <select class="bookCategory">
        <option value="程式語言">程式語言</option>
        <option value="文學小說">文學小說</option>
        <option value="商業理財">商業理財</option>
      </select>
      <input type="text" placeholder="書籍名稱" class="bookTitle">
      <input type="text" placeholder="作者" class="bookAuthor">
      <input type="button" class="addBtn" value="加入館藏">
    </div>

    <h2>館藏查詢與篩選</h2>
    <div class="filterGroup">
      <input type="button" value="全部">
      <input type="button" value="程式語言">
      <input type="button" value="文學小說">
      <input type="button" value="商業理財">
    </div>

    <ul class="bookList"></ul>

    <?!= include('javascript'); ?>
  </body>
</html>

js.html 
<script>
/**
 * 書籍測試資料
 */
let libraryData = [
  { title: "深入淺出 JavaScript", author: "Eric Freeman", category: "程式語言" },
  { title: "哈利波特", author: "J.K. Rowling", category: "文學小說" },
  { title: "原子習慣", author: "James Clear", category: "商業理財" },
  { title: "Clean Code", author: "Robert C. Martin", category: "程式語言" }
];

// 選取 DOM 元素
const bookList = document.querySelector('.bookList');
const bookTitle = document.querySelector('.bookTitle');
const bookAuthor = document.querySelector('.bookAuthor');
const bookCategory = document.querySelector('.bookCategory');
const addBtn = document.querySelector('.addBtn');
const filterGroup = document.querySelector('.filterGroup');

/**
 * 使用純 DOM API 產生書籍列表
 * @param {Array} data 欲顯示的書籍陣列
 */
function renderLibrary(data) {
  // 清空目前列表
  while (bookList.firstChild) {
    bookList.removeChild(bookList.firstChild);
  }

  // 建立新節點
  data.forEach(function(book) {
    const li = document.createElement('li');
    
    // 建立書籍資訊容器
    const infoSpan = document.createElement('span');
    infoSpan.textContent = `[${book.category}] 《${book.title}》 - 作者：${book.author}`;
    
    li.appendChild(infoSpan);
    bookList.appendChild(li);
  });
}

/**
 * 新增書籍
 */
addBtn.addEventListener('click', function() {
  const title = bookTitle.value.trim();
  const author = bookAuthor.value.trim();
  const category = bookCategory.value;

  if (title === "" || author === "") {
    alert("請完整填寫書名與作者！");
    return;
  }

  const newBook = {
    title: title,
    author: author,
    category: category
  };

  libraryData.push(newBook);
  
  // 重新渲染並清空輸入框
  renderLibrary(libraryData);
  bookTitle.value = "";
  bookAuthor.value = "";
});

/**
 * 篩選資料功能
 */
filterGroup.addEventListener('click', function(e) {
  if (e.target.type !== "button") return;

  const filterType = e.target.value;
  let result;

  if (filterType === "全部") {
    result = libraryData;
  } else {
    result = libraryData.filter(function(book) {
      return book.category === filterType;
    });
  }

  renderLibrary(result);
});

/**
 * 初始化頁面
 */
document.addEventListener('DOMContentLoaded', function() {
  renderLibrary(libraryData);
});

</script>

張貼者： TerryTsai 標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)