身為網頁程式初學者的我，先從前端開始學習網頁程式，從HTML做出基礎，再帶入CSS樣式設計，再加入JavaScript的動作。
練習內容：
留言板可以輸入姓名與email跟意見反饋，會將輸入的資料顯示於下方表格新增列與資料，也可以刪除整列資料。
HTML
<HTML><HEAD><!-- 頁籤標題 --><TITLE>vivi留言</TITLE><!-- 引用css/style設計 --><link href="css/style.css" rel="stylesheet" type="text/css"><style>p {color: red;}</style></HEAD><BODY align="center"><h1>想說甚麼，勇敢說！</h1><p>寫下你的資料與意見，我們將再與您聯絡。</p><br><!-- 輸入框 先宣告submit不回傳 再定義各個欄位form內容 --><form action="" method="post" onsubmit="return false;"><INPUT TYPE="text" id="username" name="username" value="" placeholder="姓名" class="BG-Copy" size="30" /><INPUT TYPE="text" id="useremail" name="useremail" value="" placeholder="email" class="BG-Copy" size="30" /><br><TEXTAREA NAME="feedback" id="feedback" ROWS="8" COLS="80" placeholder="想說甚麼都可以" class="BG-Copy"style="border:2px #2f3944 solid;"></TEXTAREA><br><!-- 定義送出鍵的動作，使用JavaScript的function--><INPUT TYPE="submit" VALUE="送出" class="Base" style='text-align:"right"' onclick='processFormData();addMsg()'></form><p><!-- 插圖 --><IMG SRC=feedback.gif width="300px"></p><!-- 分隔線hr --><hr><br><CAPTION><h2><strong>我的歷史紀錄</strong></h2></CAPTION><br><!-- 表格定義 設定置中 --><table width="800px" align="center" id='Feedback_table'><tr><th width="25%">留言時間</th><th width="15%">姓名</th><th width="20%">email</th><th width="30%">意見內容</th><th width="10%"></th></tr></table></BODY><!-- 引用js/index的javascript--><script src="js/index.js"></script></HTML>
CSS
.Base {width: 150px;height: 50px;margin: 10px 0 10px 500px;padding: 10px 35px 10px 35px;border-radius: 2px;box-shadow: 2px 2px 0 0 rgba(157, 139, 127, 0.25);background-color: #c20c8bde;color: white;;}.BG-Copy {margin: 10px 40px 10px 10px;padding: 10px 5px 10px 5px;border-color: #2f3944 ;}table {border:2px solid #2f3944;font-family: 微軟正黑體;font-size:16px;text-align:center;border-collapse:collapse;}th {background-color: #c20c8bde;border:1px solid #2f3944;color:#fff;}td {border:1px solid #2f3944;}tr{height:60px;}
JavaScript
var nameElement = document.getElementById("username");var emailElement = document.getElementById("useremail");var feedbackElement = document.getElementById("feedback");function processFormData() {const name = nameElement.value;const email = emailElement.value;alert("謝謝" + name + "的回饋，我們將再用email:" + email + "與您聯繫!");}function addMsg() {// 獲取table標籤元素let table = document.getElementById("Feedback_table");// 建立新行let newRow = table.insertRow();// 建立三個新單元格 向表格中插入元素newRow.insertCell().innerHTML = new Date().toLocaleString();newRow.insertCell().innerHTML = nameElement.value;newRow.insertCell().innerHTML = emailElement.value;newRow.insertCell().innerHTML = feedbackElement.value;newRow.insertCell().innerHTML = '<input type="button" value="Delete" onclick="delRow(this)"></input>'nameElement.value = '';emailElement.value = '';feedbackElement.value = '';}function delRow(r) {// 指定i=r(this)的父層+父層var i = r.parentNode.parentNode.rowIndex;// 刪除指定階層document.getElementById("Feedback_table").deleteRow(i);alert("謝謝您的回饋，我們已將資訊刪除!");}
