11324物聯網系統設計應用 Week04 學習日誌

任課老師：王曉璿

學　　生：林品彤

學 號：ADT110143

一、課程摘要

Javascript 程式設計

1. 網頁輸入資料後，以list形式呈現

【作業練習】

請參考上述指令，設計index.html 包含javascript 程式，執行後，會出現 輸入文字框，按【輸入】，會將目前輸入的資料，接在之前的資料後面以list格式持續顯示資料 。

2. 圖書管理資料系統：顯示圖書資料

【練習作業】

建立【顯示圖書資料】按鈕，加入onclick事件執行【顯示圖書資料】函數。

3. 圖書管理資料系統：顯示圖書資料、新增圖書資料

【練習作業】

建立【新增圖書資料】按鈕，加入onclick事件執行【新增圖書資料】函數。

4. 圖書管理資料系統：顯示圖書資料、新增圖書資料、刪除圖書資料

【練習作業】

加入【刪除圖書資料】按鈕

5. 圖書管理資料系統：顯示圖書資料、新增圖書資料、刪除圖書資料、查詢圖書資料

【練習作業】

完成圖書管理系統，具有圖書資料新增、編修、刪除、查詢等功能。

二、課程網路資源

1. W3school：https://www.w3schools.com/

2. ChatGPT：https://chatgpt.com/

三、課程重要指令語法摘要

以Array indexOf()查詢圖書清單，然後以 splice()進行拼接處理。

var oAddBook = document.getElementById('bookName1').value; //將網頁輸入要刪除的圖書名稱轉入javascript

let eIndex = books.indexOf(oAddBook); //查詢是否在陣列中

if (eIndex == -1){ //若不在，則顯示無此圖書訊息

document.getElementById('bookName1').innerHTML = "查無此圖書";

}else{

books.splice(eIndex,1); //若查到資料，則將此資料，自陣列中合併掉(刪除)

}

四、學習心得

這周的課程進度一步一步學習後，把所有內容整合在最後一份作業，雖然有AI的幫助，但成功寫出web還是很有成就感。