淺析JavaScript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

劉進(jìn)軍

（陽(yáng)江職業(yè)技術(shù)學(xué)院，廣東　陽(yáng)江　529566）

淺析JavaScript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

劉進(jìn)軍

（陽(yáng)江職業(yè)技術(shù)學(xué)院，廣東陽(yáng)江529566）

如今已經(jīng)步入到了信息化時(shí)代，隨著計(jì)算機(jī)技術(shù)的使用越來(lái)越廣泛，人們對(duì)于網(wǎng)絡(luò)的使用也越來(lái)越頻繁.在這樣的大背景下，人們對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的需求漸漸提高，傳統(tǒng)的靜態(tài)網(wǎng)頁(yè)早已不能夠滿足人們的需要，從而動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)成為了當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的主流.本文便將針對(duì)JavaScript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用進(jìn)行分析，希望能夠?qū)Ξ?dāng)下網(wǎng)頁(yè)設(shè)計(jì)提出一些意見(jiàn)或建議.

JavaScript；動(dòng)態(tài)網(wǎng)頁(yè)；網(wǎng)頁(yè)設(shè)計(jì)

隨著社會(huì)步入了信息化時(shí)代，網(wǎng)絡(luò)成為了很多人生活中必不可少的一個(gè)重要組成部分.人們通過(guò)瀏覽網(wǎng)絡(luò)進(jìn)行娛樂(lè)、獲取信息、辦公學(xué)習(xí)或是消費(fèi)購(gòu)物.而隨著網(wǎng)絡(luò)的功能越來(lái)越豐富，不同網(wǎng)站之間的競(jìng)爭(zhēng)也越來(lái)越激烈.在當(dāng)前的網(wǎng)絡(luò)環(huán)境下，想要?jiǎng)?chuàng)建出一個(gè)全新的網(wǎng)站并不是什么困難的事情，但是想要讓自己的網(wǎng)頁(yè)能夠得到大多數(shù)網(wǎng)民的關(guān)注卻極為不易.除了網(wǎng)站的實(shí)用性能以及各類網(wǎng)站影響推廣措施之外，如何才能夠提升網(wǎng)站自身的吸引力才是最為重要的.我們可能會(huì)在瀏覽網(wǎng)頁(yè)時(shí)發(fā)現(xiàn)新聞圖片在不斷變化、抑或是文字自動(dòng)發(fā)生跳動(dòng)等現(xiàn)象，這些就屬于網(wǎng)頁(yè)的動(dòng)態(tài)設(shè)計(jì).而通過(guò)網(wǎng)頁(yè)的動(dòng)態(tài)設(shè)計(jì)則可以極大程度上提升網(wǎng)頁(yè)的特殊性與多元性，讓單調(diào)枯燥的網(wǎng)頁(yè)變得豐富多彩.

1　JavaScript語(yǔ)言的適用性

針對(duì)于上述的動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)元素，JavaScript無(wú)疑具有極好的適用性.其作為一種網(wǎng)頁(yè)設(shè)計(jì)的腳本語(yǔ)言，不但可以針對(duì)網(wǎng)頁(yè)的用戶端進(jìn)行編輯，使之能夠產(chǎn)生各式各樣的動(dòng)態(tài)效果；同時(shí)也可以在服務(wù)端生效，經(jīng)由網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)人員的操作進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的功能管理與控制.由此我們可以看出，JavaScript在網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)中占據(jù)著極為重要的地位.而開(kāi)發(fā)人員更應(yīng)該根據(jù)JavaScript的這一優(yōu)勢(shì)加大網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)的開(kāi)發(fā)力度.

1.1JavaScript的語(yǔ)言特性

JavaScript語(yǔ)言的功能極為強(qiáng)大，在進(jìn)行網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)工作時(shí)，JavaScript的代碼便可以與HTML文檔相結(jié)合，發(fā)揮出對(duì)網(wǎng)頁(yè)內(nèi)容以及用戶端操作更為強(qiáng)大的管理控制作用.在用戶對(duì)網(wǎng)頁(yè)中內(nèi)容進(jìn)行瀏覽時(shí)，瀏覽器便可以針對(duì)用戶的操作行為展開(kāi)翻譯與解釋，并且進(jìn)一步執(zhí)行.除此之外，JavaScript也可以實(shí)現(xiàn)其他的任務(wù)類型，無(wú)論是對(duì)網(wǎng)頁(yè)內(nèi)容的計(jì)算、檢查或是動(dòng)態(tài)效果編寫、添加游戲等都有著極為強(qiáng)大的適用性[1].然而這些都是動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中極為需要的.具體來(lái)講，JavaScript已經(jīng)可以將傳統(tǒng)的CGI程序完美替代，成為當(dāng)下網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)中最為重要的語(yǔ)言類型，主要由于其具有如下的幾個(gè)特點(diǎn).

首先，JavaScript不但可以對(duì)網(wǎng)頁(yè)進(jìn)行編寫與設(shè)計(jì)，同時(shí)也可以對(duì)相應(yīng)的操作進(jìn)行解釋，使計(jì)算機(jī)可以識(shí)別.在編程時(shí)，JavaScript所使用的是小程序段，而其與HTML的代碼相互結(jié)合之后便能夠經(jīng)由大多數(shù)的瀏覽器進(jìn)行解釋與執(zhí)行.這使得網(wǎng)頁(yè)的開(kāi)發(fā)與動(dòng)態(tài)設(shè)計(jì)工作更加的簡(jiǎn)單易行.

其次，JavaScript中許多功能都來(lái)自于固有的腳本環(huán)境，這樣便可以讓腳本與語(yǔ)言對(duì)象相互影響、相互作用、相互完善.其最大的優(yōu)點(diǎn)就在于JavaScript可以由此來(lái)使用預(yù)定義對(duì)象，同時(shí)也能夠使用自定義對(duì)象.語(yǔ)言對(duì)象范圍的進(jìn)一步擴(kuò)大使得JavaScript的適用范圍得到了有效的提升.

最后，只要計(jì)算機(jī)上擁有能夠支持JavaScript生效的瀏覽器，那么JavaScript編寫的程序便可以執(zhí)行.無(wú)論計(jì)算機(jī)操作環(huán)境如何，只要瀏覽器達(dá)到既定要求便可以讓JavaScript展現(xiàn)出應(yīng)有的效果，這極大程度上提高了JavaScript語(yǔ)言的適用性.開(kāi)發(fā)人員無(wú)需再針對(duì)用戶可能使用的計(jì)算機(jī)操作系統(tǒng)而對(duì)網(wǎng)頁(yè)進(jìn)行多方面設(shè)計(jì)，減少了網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)的工作量，提高了工作效率.

1.2JavaScript的應(yīng)用范圍

通過(guò)上述JavaScript的特點(diǎn)我們可以看出，雖然該語(yǔ)言較為簡(jiǎn)單，但是它的功能與其他網(wǎng)頁(yè)動(dòng)態(tài)開(kāi)發(fā)語(yǔ)言相比不逞多讓，甚至更加強(qiáng)大.加之JavaScript幾乎在所有的瀏覽器中都可以得到執(zhí)行，這使應(yīng)用更加廣泛.首先，在進(jìn)行網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)時(shí)，往往需要針對(duì)靜態(tài)網(wǎng)頁(yè)現(xiàn)有的資源進(jìn)行編輯，如添加文字特效、圖片特效、提示效果以及操作特效等.這些都可以通過(guò)JavaScript來(lái)完成.其次，JavaScript也可以對(duì)客戶端網(wǎng)頁(yè)用戶所填寫的表單進(jìn)行分析與檢測(cè)，如果不能夠生效便會(huì)自動(dòng)過(guò)濾.這樣極大程度上減輕了服務(wù)器的工作量，支持服務(wù)器在短時(shí)間內(nèi)發(fā)揮更大的作用.除此之外，通過(guò)JavaScript語(yǔ)言可以隨意調(diào)整網(wǎng)頁(yè)窗口的大小、位置、開(kāi)關(guān)等；并且在用戶進(jìn)行特定操作，如鼠標(biāo)移動(dòng)到特定圖片、特定文字或是特定位置時(shí)，可以進(jìn)行連續(xù)的一段程序相應(yīng)，極大程度上提高了后續(xù)網(wǎng)頁(yè)的瀏覽量以及網(wǎng)頁(yè)的實(shí)用效果.最后便是通過(guò)JavaScript語(yǔ)言對(duì)網(wǎng)頁(yè)的設(shè)計(jì)可以得到更加豐富的效果，也能夠在標(biāo)題欄循環(huán)播放所需要展示的文字、連接、消息等，如果用戶點(diǎn)擊或者是將鼠標(biāo)指針移到位置便可以顯示出鏈接地址或是自動(dòng)連接，提高了動(dòng)態(tài)網(wǎng)頁(yè)的利用率[2].

總而言之，JavaScript語(yǔ)言在網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)中能夠發(fā)揮出極大的作用，合理利用不但可以提高網(wǎng)頁(yè)設(shè)計(jì)的效率，更能夠讓網(wǎng)頁(yè)展現(xiàn)出更加豐富多彩的動(dòng)態(tài)效果.

2　JavaScript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用實(shí)例

在進(jìn)行網(wǎng)頁(yè)動(dòng)態(tài)設(shè)計(jì)工作時(shí)，程序員只需要在Web頁(yè)面中使用JavaScript的腳本語(yǔ)言便可以達(dá)到預(yù)期的效果.一般來(lái)說(shuō)，使用JavaScript語(yǔ)言的方法主要有兩種，其一是在HTML中嵌入JavaScript的腳本語(yǔ)言，而另一種則是在Web頁(yè)面中加入JavaScript的鏈接.但無(wú)論是哪一種方式都可以較好的完成動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)工作.將JavaScript代碼嵌入到JavaScript中主要是通過(guò)標(biāo)記使 JavaScript代碼被引入HTML中，瀏覽器一旦接收到固定的信號(hào)便可以執(zhí)行JavaScript腳本所編寫的程序，從而達(dá)到上文所說(shuō)的一系列特殊效果；而后者則不同，其是將JavaScript的腳本語(yǔ)言單獨(dú)儲(chǔ)存，并且加以鏈接到原HTML文件中.這樣下來(lái)，當(dāng)有特定操作被觸發(fā)時(shí)，便可以從HTML文件中直接跳躍到JavaScript腳本編寫的程序中，從而達(dá)到既定效果.下文便將對(duì)動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中不同類型的JavaScript腳本語(yǔ)言進(jìn)行詳細(xì)分析.

2.1字幕滾動(dòng)效果

在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)工作中，最為基本的便是字幕滾動(dòng)效果的設(shè)計(jì).因?yàn)樵谝话愕木W(wǎng)頁(yè)上都會(huì)存在大量文字，為了能夠凸顯出關(guān)鍵詞句在靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)中往往是使用加粗、加大、換色、轉(zhuǎn)化字體等方式.這樣不但不能夠取得較好的效果，同時(shí)也會(huì)讓整個(gè)網(wǎng)頁(yè)看起來(lái)更加的不規(guī)律.對(duì)此，便需要在網(wǎng)頁(yè)中添加字幕滾動(dòng)效果.在字幕滾動(dòng)設(shè)計(jì)中，需要使用的標(biāo)簽是Marquee.但是在添加了標(biāo)簽之后的滾動(dòng)元素一般只會(huì)滾動(dòng)以此，隨后便是一大段空白，無(wú)法達(dá)到預(yù)期的連續(xù)滾動(dòng)效果.對(duì)此，便需要在后臺(tái)將所需要添加滾動(dòng)效果的詞句進(jìn)行一次次的復(fù)制.為了能夠看起來(lái)更加協(xié)調(diào)，便需要讓復(fù)制后的內(nèi)容超出原有滾動(dòng)區(qū)域至少兩倍，之后再隱藏掉溢出的滾動(dòng)條，利用JavaScript代碼控制滾動(dòng)條移動(dòng).具體的代碼操作如下：

此時(shí)字幕滾動(dòng)區(qū)域的高度對(duì)于網(wǎng)頁(yè)的瀏覽者而言是無(wú)法辨別出來(lái)的，此時(shí)所要完成的工作便是將字幕滾動(dòng)內(nèi)容進(jìn)行無(wú)數(shù)次復(fù)制，使之能夠滿足連續(xù)不停滾動(dòng)的需要.為了能夠讓網(wǎng)頁(yè)的瀏覽者不會(huì)發(fā)現(xiàn)字幕復(fù)制之后的內(nèi)容，一般需要將字幕內(nèi)容復(fù)制到一個(gè)不可見(jiàn)層中——templayer，具體代碼如下：

這樣便可以在網(wǎng)頁(yè)中得到不斷滾動(dòng)且自然流暢的動(dòng)態(tài)效果.

2.2圖片的水平滑動(dòng)以及超鏈接設(shè)置

在網(wǎng)頁(yè)設(shè)計(jì)中，除了文字之外，圖像也同樣起到了極為重要的作用，因?yàn)槿藗儗?duì)于圖像內(nèi)容的分析理解往往比文字更加迅速.圖像的使用不僅讓人們所能夠接收到的信息更加豐富，同時(shí)也能夠讓網(wǎng)頁(yè)排版擁有更大的發(fā)揮空間.但是如果在網(wǎng)頁(yè)中頻繁出現(xiàn)圖片，非但不能夠起到正面效果，反而會(huì)讓整個(gè)網(wǎng)頁(yè)看起來(lái)雜亂不堪.圖片占用網(wǎng)頁(yè)篇幅過(guò)大，使得文字內(nèi)容被大幅壓縮，從而減少了網(wǎng)頁(yè)的敘述功能.為了避免此類問(wèn)題的發(fā)生，我們一般會(huì)使用圖片水平滑移設(shè)計(jì)來(lái)減少圖片所占用的網(wǎng)頁(yè)面積，并且提高網(wǎng)頁(yè)排版的整潔程度.同時(shí)，在人們?yōu)g覽網(wǎng)頁(yè)的過(guò)程中，當(dāng)看到某一個(gè)感興趣的內(nèi)容時(shí)往往會(huì)移動(dòng)鼠標(biāo)指針到達(dá)相應(yīng)的特定位置.對(duì)此，我們可以將圖片滑移與超鏈接相結(jié)合，時(shí)鼠標(biāo)移到圖片位置時(shí)可以自動(dòng)開(kāi)始滑移并且彈出原網(wǎng)頁(yè)鏈接地址.

具體代碼如下：

這樣便可以得到預(yù)期的圖片滑動(dòng)平移效果.

3　結(jié)語(yǔ)

通過(guò)上述實(shí)例我們可以看出，通過(guò)JavaScript我們可以方便的在網(wǎng)頁(yè)中添加各種各樣的特效，并且將需要進(jìn)行處理的文字制作成滾動(dòng)字幕與圖片集合等方式來(lái)簡(jiǎn)化或豐富網(wǎng)頁(yè)的形式.但是無(wú)論怎樣我們都需要確定，并不是特效越豐富越好，只有當(dāng)網(wǎng)頁(yè)的實(shí)用性與藝術(shù)性完美結(jié)合時(shí)，網(wǎng)頁(yè)設(shè)計(jì)才算是達(dá)到了最好的效果.

〔1〕劉建莉.基于JavaScript的網(wǎng)頁(yè)游戲的設(shè)計(jì)與制作[J].數(shù)字技術(shù)與應(yīng)用，Digital Technology and Application，2015-12.

〔2〕王紫君.基于JavaScript和Java語(yǔ)言的動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)方法探析[J].科技風(fēng)，Technology Wind，2015-6.

TP391.41

A

1673-260X（2016）09-0017-03

2016-05-09

廣東省高職院校教育教學(xué)改革項(xiàng)目（20120202110）