該筆記會在 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>
