朱敏

【摘 要】本文介紹了JavaScript的特點(diǎn)和功能，給出了JavaScript腳本語言在HTML中的應(yīng)用語法。用JavaScript語言可以寫出各種功能的代碼，使網(wǎng)頁更具有特色和交互性。最后通過實(shí)例對(duì)JavaScript在HTML中的應(yīng)用進(jìn)行了探討。

【關(guān)鍵詞】JavaScript；HTML；動(dòng)態(tài)網(wǎng)頁

0 引言

當(dāng)你使用各種各樣的瀏覽器在WWW上漫游時(shí)，你會(huì)發(fā)現(xiàn)網(wǎng)站上的圖片在不斷的刷新變化，或者鼠標(biāo)移到某處時(shí)字體的顏色會(huì)變，或者有那么一串文字一直跟隨著你的鼠標(biāo)在動(dòng)等等這些有趣的事情，使我們?yōu)g覽的網(wǎng)頁變得生動(dòng)活潑起來。而這些效果是如何來的呢？其實(shí)是由web上的腳本語言所控制的。目前可用的腳本語言中，最流行的就是JavaScript。它是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言，可用于客戶端和服務(wù)器端的編程。通過嵌入或?qū)氲綐?biāo)準(zhǔn)的HTML文檔中來控制頁面，并能對(duì)用戶的觸發(fā)事件做出響應(yīng)，增強(qiáng)了網(wǎng)頁的表現(xiàn)力和交互性。它還有一個(gè)強(qiáng)大的特點(diǎn)就是跨平臺(tái)性，依賴于Web瀏覽器本身，與操作環(huán)境無關(guān)。需要注意的是，我們?cè)谑褂肑avaScript的時(shí)候，要注意瀏覽器的不同版本。

1 在HTML中的用法

1.1 設(shè)置腳本語言

JavaScript代碼可以直接包含在標(biāo)記之間放置在HTML的任何位置，既可以放在head內(nèi)，也可以放在body內(nèi)。具體用法如下：

其中URL處填寫保存的腳本文件名即可。這種方法的優(yōu)點(diǎn)是當(dāng)你需要修改所有HTML文檔中的函數(shù)定義時(shí)，對(duì)腳本庫進(jìn)行修改即可，這樣便于實(shí)現(xiàn)網(wǎng)站的模塊化設(shè)計(jì)。

1.3 通過屬性調(diào)用文本

在實(shí)際應(yīng)用中，經(jīng)常會(huì)用到事件驅(qū)動(dòng)。所以我們還可以通過某個(gè)HTML元素的事件處理程序的屬性值來調(diào)用JavaScript腳本。例如對(duì)于元素，可以將其onclick屬性設(shè)置為一段JavaScript代碼。當(dāng)用戶點(diǎn)擊的時(shí)候，瀏覽器將解釋執(zhí)行由onclick屬性指定的腳本代碼。

具體方法如下：

關(guān)閉窗口

該例中點(diǎn)擊“關(guān)閉窗口”這個(gè)超鏈接時(shí)，執(zhí)行window.close（），實(shí)現(xiàn)窗口的關(guān)閉。

2 應(yīng)用實(shí)例

基于以上介紹的方法，我們可將JavaScript腳本程序嵌入HTML文檔中實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)，下面就舉兩個(gè)日常生活中常見的例子和大家一起分享。

2.1 滾動(dòng)字幕

我們經(jīng)常會(huì)看見一些網(wǎng)頁上一段移動(dòng)的廣告文字，看上去很有趣，實(shí)現(xiàn)這一動(dòng)態(tài)效果的代碼如下：

在瀏覽器窗口的標(biāo)題欄中循環(huán)顯示要顯示的內(nèi)容。

在這個(gè)例子里，我們主要通過把字符串截成兩個(gè)子串，然后再右子串與左子串連接，重新組成一個(gè)完整的字符串，再通過定時(shí)器每隔0.2秒重新進(jìn)行以上操作來實(shí)現(xiàn)字幕的滾動(dòng)。

2.2 計(jì)算練習(xí)

小學(xué)生學(xué)習(xí)各種計(jì)算的時(shí)候，需要多加練習(xí)。完全靠自己手動(dòng)出題很麻煩，我們可以在網(wǎng)頁上實(shí)現(xiàn)動(dòng)態(tài)的出題，還可以及時(shí)得出對(duì)錯(cuò)，這樣省時(shí)省力，詳細(xì)代碼如下：

兩位數(shù)的加法練習(xí)

在這個(gè)例子中，設(shè)計(jì)了一個(gè)表單，包含了顯示題目和對(duì)錯(cuò)消息的兩個(gè)“標(biāo)簽”，用于輸入結(jié)果的“文本框”以及一個(gè)“確定按鈕”和一個(gè)“重新出題按鈕”。其中“確定”按鈕用來判斷文本框中的結(jié)果是否與題目的正確結(jié)果相等，并根據(jù)答題情況，在最后一個(gè)標(biāo)簽處給出相應(yīng)消息?！爸匦鲁鲱}”按鈕用來產(chǎn)生兩個(gè)兩位數(shù)的隨機(jī)整數(shù)，并把題目顯示在第一個(gè)標(biāo)簽處。由于篇幅有限，只列舉了計(jì)算兩位數(shù)加法練習(xí)的代碼，有興趣的讀者可以擴(kuò)充為兩位數(shù)的四則運(yùn)算的練習(xí)。

3 結(jié)束語

JavaScript由于其簡(jiǎn)單性、動(dòng)態(tài)性、跨平臺(tái)性、基于對(duì)象、事件驅(qū)動(dòng)等等一系列的特點(diǎn)，在動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)中得到了廣泛的應(yīng)用。它的功能非常強(qiáng)大，本文的介紹僅僅只是冰山一角。當(dāng)大家對(duì)JavaScript相當(dāng)熟悉之后，會(huì)做出非常有趣生動(dòng)的網(wǎng)頁出來。

【參考文獻(xiàn)】

[1]于萬國.用HTML+CSS+JavaScript實(shí)現(xiàn)滾動(dòng)圖片的技術(shù)[J].衡水學(xué)院學(xué)報(bào).2015（4）.

[2]郭珂.用JavaScript腳本語言編寫試題網(wǎng)頁[J].電腦編程技巧與維護(hù)，2014（6）.

[3]吳通，陳雨亭.基于動(dòng)態(tài)分析的JavaScript代碼推薦[J].計(jì)算機(jī)工程，2014（10）.

[責(zé)任編輯：朱麗娜]