期末報告繳交說明

本次期末考將完成下列工作，並將相關執行過程及結果呈現於期末報告。(下載期末報告樣板)

一、以個人的學號9碼為名稱於電腦Ｄ槽建立一工作目錄(資料夾)，接著下載『行動電話使用意見調查表』程式final.html, final.css, final.js存檔於工作目錄(資料夾)，以Google Chrome執行此網頁程式final.html，並將此網頁單獨呈現，如下圖（字型可能會不同），此為期末報告的原始網頁。

二、將程式碼以notepad ++打開編輯，完成以下任務。

1. HTML程式中變更製作人姓名後，更新網頁得到[圖1 意見調查表網頁初稿]，並將HTML程式修改處截圖得[圖2 變更製作人姓名]。

2. 指出HTML程式中載入final.css的程式碼，截圖得[圖3 指出HTML中載入final.css的程式碼]。

3. 指出HTML程式中載入final.js的程式碼，截圖得[圖4 指出HTML中載入final.js的程式碼]。

4. CSS程式中插入編修後的程式碼，截圖得[圖5 設定標題背景及字的顏色]，程式碼如下。

h1 {color:white; background:purple}

5. CSS程式中插入編修後的程式碼，截圖得[圖6 設定個人資料區的背景顏色]，程式碼如下。

fieldset#personal {background: lightgray;}

6. 指出HTML程式碼中提交按鈕事件設定的按鈕程式碼，截圖得[圖7 指出HTML中提交按鈕事件設定的程式碼]。

7. JavaScript程式中插入“提交”按鈕事件的函式(function)程式碼，截圖得[圖8 “提交”按鈕事件的JavaScript程式碼]，程式碼如下。

var count=1;

function btn01() {

var Pelement = document.getElementById("pConfirm");

var Nelement = document.getElementsByName("userName");

Pelement.innerHTML = "<第" + count + "筆>" + "姓名：" + Nelement[0].value;

count ++;

}

8. 指出HTML程式碼中“重新輸入”按鈕事件設定的按鈕程式碼，截圖得[圖9 “重新輸入”按鈕事件設定的程式碼]。

9. JavaScript程式中插入重新輸入(reset)按鈕事件的函式(function)程式碼，截圖得[圖8 重新輸入(reset)按鈕事件的JavaScript程式]，程式碼如下。

function btn02() {

var Pelement = document.getElementById("pConfirm");

Pelement.innerHTML = "<第" + count + "筆>";

}

10. 鍵入個資回答問題後按”提交”鍵的執行結果，網頁截圖得[圖9 鍵入個資回答問題，再按”提交”後的頁面]，參考頁面如下。

11. 按”重新輸入”鍵的執行結，網頁截圖得[圖10 按”重新輸入”鍵後的頁面]，參考頁面如下。