案例1：表格行懸停提示效果
【參考文獻】
1.JavaScript前端開發模塊化教材（人民郵電出版社）趙健保
2.https://www.w3cschool.cn/
任務導入：
在Web標準中，HTML定義了頁面結構和內容，CSS定義了頁面佈局和外觀，如顏色、字體、邊框、邊距和版式佈局等，而JavaScript定義了頁面交互行為，比如元素交互、表單驗證、網頁遊戲等。也就是說JavaScript是讓HTML和CSS協同運作的粘合劑。
所以要想成為Web開發工程師，掌握JavaScript必不可少。正式開始學習JavaScript前端開發之前，需要先配置JavaScript編輯器和Web瀏覽器，其中JavaScript編輯器用於編寫HTML、CSS和JavaScript前端代碼，Web瀏覽器用於Web應用的開發測試。
任務一：學會如何配置JavaScript前端編碼和測試環境
任務二：體驗鼠標mouseover、mouseout事件時表格行背景變色效果開發。
任務實施：
1.安裝和配置Visual Studio Code
下載地址：https://code.visualstudio.com/Download
本人電腦安裝的Windows操作系統，右鍵單擊“我的電腦”->屬性，顯示系統類型為“64位”。user版會安裝在當前計算機帳戶目錄，這意味著如果使用另一個帳號登陸計算機將無法使用別人安裝的vscode。而system版本可以安裝在非用戶目錄，例如C盤根目錄，任何帳戶都可以使用。故選擇安裝“User Installer 64bit”。
初學者可以將軟件的language改為中文，方法如下：
（1）打開“vscode” ，按快捷鍵“Ctrl+Shift+P”。
（2）在頂部搜索框中輸入“configure language”，按回車鍵。
（3）然後選擇安裝其他language
（4）安裝中文簡體，安裝完後如下圖所示
2.安裝Chrome瀏覽器及Chrome開發者工具初探
下載地址：https://www.google.cn/chrome/
打開Chrome 開發者工具
•在Chrome菜單中選擇 更多工具 > 開發者工具
•在頁面元素上右鍵點擊，選擇 “檢查”
•使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
開發者工具簡介：
3.在VScode編寫代碼
源代碼：
運行效果：
4.源代碼講解
（1）<5>
擴展生成HTML5文檔代碼
（2）行數：2
聲明必須是 HTML 文檔的第一行，位於 標籤之前。
聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
（3）行數：3
向搜索引擎表示該頁面是html語言，並且語言為英文網站，其"lang"的意思就是“language”，語言的意思，而“en”即表示english。你的頁面如果是中文頁面，可將其改為
（4）行數：5，6，7
元素可提供有關頁面的元信息（meta-information）
（5）行數：9-24
瞭解CSS id 選擇器：https://www.w3school.com.cn/css/css_syntax_id_selector.asp
<table>標籤定義HTML表格。thead表頭、tr行、td單元格。（6）行數：57-69
使用 var 關鍵詞來聲明變量，JavaScript變量學習圖
HTML DOM Document 對象，getElementById() 方法，getElementsByTagName()方法。
getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。
getElementsByTagName() 方法可返回帶有指定標籤名的對象的集合。
詳細資料參考網址：https://www.w3school.com.cn/jsref/dom_obj_document.asp
HTML DOM addEventListener() 方法
document.addEventListener() 方法用於向文檔添加事件句柄。
鼠標事件：
再來看一段代碼：
實例使用 addEventListener() 方法在同一個按鈕中添加多個事件。
<button>點我/<button>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!
"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!
"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!
"
}
運行效果圖：
強化訓練：
結合本任務實施過程，重置本地環境，重新搭建JavaScript前端編碼和測試環境，將Web站點根目錄設置為”d:/wwwroot”，編寫一個鼠標懸停圖片透明度變化的頁面，具體要求是從百度下載6張同類主題的圖片，規範文件名稱和調整大小後，使用ul和li標籤插入到網頁中，定義樣式表讓6張圖片排成2行3列，設置當鼠標懸停圖片在任意圖片上時，圖片透明度改為半透明（opacity為0.5），當鼠標移開後恢復到正常透明度，保存並測試你的頁面。
"/<table>閱讀更多 希顏之士 的文章
