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

任課老師：王曉璿

學　　生：林品彤

學 號：ADT110143

一、課程摘要

1. HTML 網頁設計中【button】的應用

【作業練習】

1.按下[猜猜我是誰]，在網頁上會出現自己的學號姓名

2.按下[現在日期時間]：在網頁上會出現目前的日期時間(選項處理)

2. javascript 基本介紹與應用

【練習作業】

請使用ChatGPT協助完成【數學加法練習系統.html】並提供【AI輔助數學加法系統設計說明_空白格式.docx】

二、課程網路資源

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

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

3.

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

《按下<button>後，網頁內容會改變》

程式碼：

<button class="button button1" type="button" onclick="document.getElementById('info').innerHTML = '學號：ADT110143 姓名：林品彤';">猜猜我是誰</button>
解釋：

<!-- class="button button1"：

class 屬性用來為按鈕指定 CSS 樣式。

button 和 button1 是兩個類別名稱（class），可以在 CSS 中使用.button 和 .button1 來設定樣式。-->

<!-- type="button"：

指定按鈕的類型為 "button"，代表這個按鈕是一般按鈕，不會觸發表單提交（與 type="submit" 相比）。-->

<!-- onclick="..."：

這是 JavaScript 的滑鼠點擊事件，當按鈕被點擊時，執行 onclick 內的 JavaScript 指令。-->

<!-- document.getElementById('info')：

document：代表整個網頁 (DOM)。

getElementById('info')：取得 id="info" 的 HTML 元素（在你的程式碼中，這是 <p id="info"></p> 的段落標籤）。-->

<!-- .innerHTML = '學號：ADT110143 姓名：林品彤'：

.innerHTML 代表該元素的內部 HTML 內容。

這段程式碼的作用是將 id="info" 的段落內容改為 '學號：ADT110143 姓名：林品彤'。-->

<!--執行效果

當使用者點擊 「猜猜我是誰」 按鈕：

document.getElementById('info') 會找到 <p id="info"></p> 這個段落標籤。

innerHTML 會將段落內容改為 學號：ADT110143 姓名：林品彤。

畫面上就會顯示這段文字。-->

四、學習心得

這周又進一步學習了botton語法以及javascript的內容，而且現在有了AI來輔助學習，讓整體效率提升不少，也使網頁程式設計更容易上手。