案例1：表格行懸停提示效果

【參考文獻(xiàn)】

1.JavaScript前端開(kāi)發(fā)模塊化教材(人民郵電出版社)趙健保

2.https://www.w3cschool.cn/

---

任務(wù)導(dǎo)入：

在Web標(biāo)準(zhǔn)中，HTML定義了頁(yè)面結(jié)構(gòu)和內(nèi)容，CSS定義了頁(yè)面布局和外觀，如顏色、字體、邊框、邊距和版式布局等，而JavaScript定義了頁(yè)面交互行為，比如元素交互、表單驗(yàn)證、網(wǎng)頁(yè)游戲等。也就是說(shuō)JavaScript是讓HTML和CSS協(xié)同運(yùn)作的粘合劑。

所以要想成為Web開(kāi)發(fā)工程師，掌握J(rèn)avaScript必不可少。正式開(kāi)始學(xué)習(xí)JavaScript前端開(kāi)發(fā)之前，需要先配置JavaScript編輯器和Web瀏覽器，其中JavaScript編輯器用于編寫(xiě)HTML、CSS和JavaScript前端代碼，Web瀏覽器用于Web應(yīng)用的開(kāi)發(fā)測(cè)試。

任務(wù)一：學(xué)會(huì)如何配置JavaScript前端編碼和測(cè)試環(huán)境

任務(wù)二：體驗(yàn)鼠標(biāo)mouseover、mouseout事件時(shí)表格行背景變色效果開(kāi)發(fā)。

---

任務(wù)實(shí)施：

1.安裝和配置Visual Studio Code

下載地址：https://code.visualstudio.com/Download

本人電腦安裝的Windows操作系統(tǒng)，右鍵單擊“我的電腦”->屬性，顯示系統(tǒng)類型為“64位”。user版會(huì)安裝在當(dāng)前計(jì)算機(jī)帳戶目錄，這意味著如果使用另一個(gè)帳號(hào)登陸計(jì)算機(jī)將無(wú)法使用別人安裝的vscode。而system版本可以安裝在非用戶目錄，例如C盤(pán)根目錄，任何帳戶都可以使用。故選擇安裝“User Installer 64bit”。

初學(xué)者可以將軟件的language改為中文，方法如下：

(1)打開(kāi)“vscode” ，按快捷鍵“Ctrl+Shift+P”。

(2)在頂部搜索框中輸入“configure language”，按回車(chē)鍵。

(3)然后選擇安裝其他language

(4)安裝中文簡(jiǎn)體，安裝完后如下圖所示

2.安裝Chrome瀏覽器及Chrome開(kāi)發(fā)者工具初探

下載地址：https://www.google.cn/chrome/

打開(kāi)Chrome 開(kāi)發(fā)者工具

?在Chrome菜單中選擇 更多工具 > 開(kāi)發(fā)者工具

?在頁(yè)面元素上右鍵點(diǎn)擊，選擇 “檢查”

?使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

開(kāi)發(fā)者工具簡(jiǎn)介：

3.在VScode編寫(xiě)代碼

源代碼：

運(yùn)行效果：

4.源代碼講解

(1)<5> 5>

擴(kuò)展生成HTML5文檔代碼

(2)行數(shù)：2

聲明必須是 HTML 文檔的第一行，位于 標(biāo)簽之前。

聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

(3)行數(shù)：3

向搜索引擎表示該頁(yè)面是html語(yǔ)言，并且語(yǔ)言為英文網(wǎng)站，其"lang"的意思就是“l(fā)anguage”，語(yǔ)言的意思，而“en”即表示english。你的頁(yè)面如果是中文頁(yè)面，可將其改為

(4)行數(shù)：5，6，7

元素可提供有關(guān)頁(yè)面的元信息(meta-information)

(5)行數(shù)：9-24

了解CSS id 選擇器：https://www.w3school.com.cn/css/css_syntax_id_selector.asp

(6)行數(shù)：57-69

使用 var 關(guān)鍵詞來(lái)聲明變量，JavaScript變量學(xué)習(xí)圖

HTML DOM Document 對(duì)象，getElementById() 方法，getElementsByTagName()方法。

getElementById() 方法可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用。

getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對(duì)象的集合。

詳細(xì)資料參考網(wǎng)址：https://www.w3school.com.cn/jsref/dom_obj_document.asp

HTML DOM addEventListener() 方法

document.addEventListener() 方法用于向文檔添加事件句柄。

鼠標(biāo)事件：

再來(lái)看一段代碼：

實(shí)例使用 addEventListener() 方法在同一個(gè)按鈕中添加多個(gè)事件。

點(diǎn)我

運(yùn)行效果圖：

---

強(qiáng)化訓(xùn)練：

結(jié)合本任務(wù)實(shí)施過(guò)程，重置本地環(huán)境，重新搭建JavaScript前端編碼和測(cè)試環(huán)境，將Web站點(diǎn)根目錄設(shè)置為”d:/wwwroot”，編寫(xiě)一個(gè)鼠標(biāo)懸停圖片透明度變化的頁(yè)面，具體要求是從百度下載6張同類主題的圖片，規(guī)范文件名稱和調(diào)整大小后，使用ul和li標(biāo)簽插入到網(wǎng)頁(yè)中，定義樣式表讓6張圖片排成2行3列，設(shè)置當(dāng)鼠標(biāo)懸停圖片在任意圖片上時(shí)，圖片透明度改為半透明(opacity為0.5)，當(dāng)鼠標(biāo)移開(kāi)后恢復(fù)到正常透明度，保存并測(cè)試你的頁(yè)面。

總結(jié)

以上是生活随笔為你收集整理的javascript 中文帮助文档_实战式方法学习JavaScript（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。