朱敏

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

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

0 引言

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

1 在HTML中的用法

1.1 設(shè)置腳本語言

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

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

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

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

具體方法如下：

關(guān)閉窗口

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

2 應(yīng)用實例

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

2.1 滾動字幕

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

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

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

2.2 計算練習(xí)

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

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

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

3 結(jié)束語

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

【參考文獻】

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

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

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

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