許至晶

（郴州職業(yè)技術(shù)學(xué)院 湖南 郴州 423000）

0 引言

如今是一個(gè)網(wǎng)絡(luò)信息爆炸的時(shí)代，如何讓用戶快速地獲取重要信息是當(dāng)前急需要思考的問(wèn)題。網(wǎng)頁(yè)作為信息傳遞的窗口，Web開發(fā)人員需要通過(guò)設(shè)計(jì)網(wǎng)頁(yè)功能使用戶在最短的時(shí)間內(nèi)看到網(wǎng)站要傳達(dá)的重要信息，從而提升瀏覽效率和用戶體驗(yàn)度[1]。HTML、CSS、JavaScript是Web開發(fā)的最關(guān)鍵、最基礎(chǔ)的技術(shù)，在Web開發(fā)中，又密不可分。其中HTML（Hyper Text Markup Language）全稱為超文本標(biāo)記語(yǔ)言，是生成現(xiàn)代Web內(nèi)容規(guī)范技術(shù)的總稱，他能有效運(yùn)用在各個(gè)瀏覽器之中，為Web的發(fā)展帶來(lái)了更多的可能性。CSS（Cascading Style Sheets）是層疊樣式表，它可以直接針對(duì)HTML元素設(shè)置樣式，可利用id、class選擇器實(shí)現(xiàn)結(jié)構(gòu)與樣式更好的分離，易于開發(fā)者維護(hù)。JavaScript是一種嵌入性腳本語(yǔ)言，可以直接對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行連接與交互處理，具有支持用戶交互響應(yīng)事件功能。打個(gè)簡(jiǎn)單的比方，若把網(wǎng)頁(yè)比作一個(gè)人，HTML則是人的軀干，CSS便是裝扮人的外觀，而JavaScript相當(dāng)于人的行為、動(dòng)作，即實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)交互效果的主要技術(shù)。

1 JavaScript概述

行為即是交互邏輯，Web開發(fā)中大部分交互邏輯都是由JavaScript實(shí)現(xiàn)，它可以直接內(nèi)嵌于HTML網(wǎng)頁(yè)，也可以寫成有利于結(jié)構(gòu)和行為的分離單獨(dú)的JavaScript文件，通過(guò)瀏覽器內(nèi)置的JavaScript引擎直接編譯，把一個(gè)原來(lái)只用來(lái)顯示的頁(yè)面，轉(zhuǎn)變成支持用戶交互的頁(yè)面程序[2]。JavaScript主要運(yùn)作于瀏覽器當(dāng)中，瀏覽器主要由渲染引擎和JavaScript引擎組成，渲染引擎俗稱內(nèi)核，以谷歌瀏覽器為例，blink用來(lái)解析HTML與CSS代碼。JavaScript引擎也稱JavaScript解釋器，比如谷歌瀏覽器的V8用來(lái)讀取網(wǎng)頁(yè)中的JavaScript代碼，對(duì)解析處理后運(yùn)行。JavaScript誕生于1995年，由網(wǎng)景公司的Brendan Eich設(shè)計(jì)，是一種運(yùn)行在客戶端的腳本語(yǔ)言，在設(shè)計(jì)之初，JavaScript一般用于瀏覽器表單數(shù)據(jù)校驗(yàn)，在Web開發(fā)實(shí)際過(guò)程中，JavaScript也可基于語(yǔ)言編程規(guī)范，強(qiáng)化網(wǎng)頁(yè)數(shù)據(jù)安全，確保信息有效性。JavaScript主要由ECMAScript、DOM、BOM三個(gè)部分組成，其中ECMAScript指的就是JavaScript的語(yǔ)法規(guī)范。DOM指的是文檔對(duì)象模型，描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口。BOM是瀏覽器對(duì)象模型，即瀏覽器進(jìn)行交互的方法和接口[3]。下面將依次對(duì)這兩種對(duì)象模型進(jìn)行介紹。

（1） DOM

DOM（Document Object Model）即文檔對(duì)象模型，是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTML或者XML）的標(biāo)準(zhǔn)編程接口。文檔（document）指的便是整個(gè)頁(yè)面，是DOM的頂級(jí)對(duì)象。頁(yè)面中的所有標(biāo)簽都是元素（element），網(wǎng)頁(yè)中的所有內(nèi)容例如標(biāo)簽、屬性、文本、注釋等都是節(jié)點(diǎn)（node）。對(duì)于JavaScript來(lái)說(shuō)，DOM是一種操作HTML頁(yè)面的重要手段，利用DOM對(duì)網(wǎng)頁(yè)元素進(jìn)行獲取從而改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式。頁(yè)面元素可以通過(guò)getElementById(‘id’)、document.getElementsByClassName(‘類名’)、document.querySelector('選擇器')等方法獲取。

以更改頁(yè)面文字為例：。首先需要通過(guò)var關(guān)鍵字定義接收該元素變量，再通過(guò)document對(duì)象方法獲取該節(jié)點(diǎn)，最終通過(guò)innerHTML屬性更改頁(yè)面文字。類選擇器類名前需加‘.’號(hào)標(biāo)識(shí)，id選擇器類名前需加‘#’號(hào)標(biāo)識(shí)。具體代碼如下。

var text = document.querySelector(".text");

text.innerHTML = "你好";

通過(guò)如上代碼，可將頁(yè)面所顯示的“Hello”更改為：“你好”。值得注意的是，單線程是JavaScript最突出的特點(diǎn)之一，簡(jiǎn)單來(lái)說(shuō)就是不能同時(shí)對(duì)某個(gè)DOM元素進(jìn)行添加和刪除操作。所有任務(wù)需要按順序排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。且所有節(jié)點(diǎn)獲取的順序自上而下，所以當(dāng)JavaScript執(zhí)行的時(shí)間過(guò)長(zhǎng)，會(huì)造成頁(yè)面的渲染不連貫，導(dǎo)致頁(yè)面渲染加載阻塞等問(wèn)題。

（2）BOM

BOM（Browser Object Model）瀏覽器對(duì)象模型包含了DOM，它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，其頂級(jí)對(duì)象是window，具有雙重角色，它可以是JavaScript訪問(wèn)瀏覽器的一個(gè)接口，也可以是全局對(duì)象，定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。比如常用的alert()和prompt()都屬于window對(duì)象的方法。但是BOM缺乏統(tǒng)一的標(biāo)準(zhǔn)，都是各個(gè)瀏覽器廠商自由定義，最終由瀏覽器間共有對(duì)象成為事實(shí)標(biāo)準(zhǔn)，這也造就了不同瀏覽器之間代碼不兼容等問(wèn)題。

BOM為了實(shí)現(xiàn)用戶和頁(yè)面動(dòng)態(tài)交互、訪問(wèn)和操作瀏覽器各個(gè)組件，window提供了一系列子對(duì)象屬性和方法：（1）定時(shí)器setTimeout()和setInterval()是Web開發(fā)中的重要屬性，setTimeout()是以某一時(shí)間結(jié)束后調(diào)用函數(shù)或者執(zhí)行某一段代碼，setInterval()是以某周期為單位調(diào)用函數(shù)或者執(zhí)行某一段代碼，定時(shí)器是JavaScript的關(guān)鍵對(duì)象，在對(duì)頁(yè)面進(jìn)行異步管理、Web動(dòng)畫頁(yè)面執(zhí)行等操作可充分利用定時(shí)器的功能優(yōu)化Web頁(yè)面，提升網(wǎng)頁(yè)性能。（2）location()地址欄對(duì)象可用于獲取當(dāng)前瀏覽器地址（URL），并利用URL內(nèi)相關(guān)數(shù)據(jù)實(shí)現(xiàn)頁(yè)面重載（reload）、載入（assign）、替換（replace）等功能，比如頁(yè)面倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)、頁(yè)面自動(dòng)刷新等功能都可通過(guò)location對(duì)象實(shí)現(xiàn)，在Web開發(fā)中可利用location對(duì)象對(duì) Web 網(wǎng)頁(yè)數(shù)據(jù)的處理過(guò)程、信息分析等進(jìn)行優(yōu)化，利用對(duì)話框，對(duì)相關(guān)數(shù)據(jù)進(jìn)行整合，優(yōu)化 Web 網(wǎng)頁(yè)的流暢性[4]。（3）history()歷史對(duì)象，可以基于用戶需求在瀏覽器的訪問(wèn)歷史記錄進(jìn)行操作，即通過(guò)back()、forward()、go()方法，和length屬性實(shí)現(xiàn)瀏覽器頁(yè)面后退、前進(jìn)、跳轉(zhuǎn)具體頁(yè)面的功能。對(duì)瀏覽器歷史數(shù)據(jù)進(jìn)行功能處理，可提高網(wǎng)頁(yè)控制水平[5]。（4）navigator()瀏覽器對(duì)象可以獲取當(dāng)前Web頁(yè)面所處的瀏覽器信息，比如瀏覽器名稱、版本信息、是否啟用cookie等，可用于為Web開發(fā)者提供瀏覽器兼容指向，提高交互數(shù)據(jù)傳輸與處理的效率。（5）screen()屏幕對(duì)象可用于開發(fā)者獲取客戶端瀏覽器屏幕顯示信息，如屏幕的寬、高、顏色深度等，可通過(guò)該對(duì)象對(duì)瀏覽器顯示的高度、寬度相關(guān)參數(shù)進(jìn)行調(diào)整，比如頁(yè)面的懸停條、下拉刷新等功能都需要使用到該對(duì)象，在實(shí)際的Web可將瀏覽器中心點(diǎn)合理定位，充分提高Web開發(fā)設(shè)計(jì)水平。（6）document()文檔對(duì)象可用于對(duì)網(wǎng)頁(yè)所有節(jié)點(diǎn)進(jìn)行獲取，并通過(guò)document對(duì)象方法更改對(duì)頁(yè)面節(jié)點(diǎn)進(jìn)行添加或刪除、更改樣式等操作。在Web開發(fā)中可開發(fā)者可根據(jù)用戶需求對(duì)瀏覽器，頁(yè)面之間的交互進(jìn)行數(shù)據(jù)處理，并通過(guò)集合（anchors[]、images[]、links[]、forms[]等）、屬性（domain、cookie、referrer、URL、title 等）、方法（ writeln()、open()、write()、close()等），對(duì)集合屬性以及參數(shù)等進(jìn)行優(yōu)化，例如利用domain屬性實(shí)現(xiàn)跨域操作，利用端口和協(xié)議信息處理，提高 Web網(wǎng)頁(yè)的通信能力與數(shù)據(jù)處理能力[6]。

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

據(jù)觀察，各大主流網(wǎng)站的首頁(yè)都會(huì)出現(xiàn)輪播圖的身影。輪播圖又稱首頁(yè)焦點(diǎn)圖，幾乎是網(wǎng)站首頁(yè)的標(biāo)配。輪播圖主要指在網(wǎng)頁(yè)中焦點(diǎn)位置上的類似幻燈片循環(huán)播放的一組圖片，利用輪播圖效果，能夠讓瀏覽者在最短的時(shí)間內(nèi)看到網(wǎng)站要傳達(dá)的重要信息。

輪播圖主要由若干圖片、左右箭頭按鈕和若干焦點(diǎn)組成，在默認(rèn)狀態(tài)下，輪播圖片從左至右按照設(shè)定時(shí)差循環(huán)撥動(dòng)，同時(shí)圖片左右會(huì)放置箭頭符號(hào)，用戶也可點(diǎn)擊箭頭實(shí)現(xiàn)圖片左右滑動(dòng)，焦點(diǎn)一般放置在圖片下方，用戶點(diǎn)擊焦點(diǎn)也可實(shí)現(xiàn)指定圖片切換。本案例將綜合運(yùn)用Web開發(fā)技術(shù)實(shí)現(xiàn)頁(yè)面樣式排版和JavaScript自動(dòng)輪播功能，效果如圖1所示。

圖1 輪播圖示例

2.1 網(wǎng)頁(yè)布局

輪播圖頁(yè)面采用DIV+CSS布局方式，圖片尺寸統(tǒng)一、數(shù)量隨意，但為了增強(qiáng)用戶體驗(yàn)感，建議圖片數(shù)量不超過(guò)5張。左右按鈕由特殊符號(hào)<、>添加實(shí)現(xiàn)，輪播焦點(diǎn)就圖片數(shù)量自動(dòng)生成。具體HTML結(jié)構(gòu)如下所示：

2.2 功能實(shí)現(xiàn)

（1）焦點(diǎn)自動(dòng)生成。該功能根據(jù)輪播圖片數(shù)量自動(dòng)生成焦點(diǎn)，通過(guò)document.createElement()創(chuàng)建元素，再通過(guò)element.appendChild()添加元素，并通過(guò)for循環(huán)為每一個(gè)焦點(diǎn)綁定點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊焦點(diǎn)，指定輪播圖片跳轉(zhuǎn)。

var ul = focus.querySelector('ul');

var ol = focus.querySelector('.circle');

for (var i = 0; i < ul.children.length;i++) {

var li = document.createElement('li');

li.setAttribute('index', i);

ol.appendChild(li);

li.addEventListener('click',function() {

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].className = '';

}

this.className = 'current';

var index = this.getAttribute('index');

num = index;

circle = index;

animate(ul, -index * focusWidth);

})

}

（2）為右側(cè)箭頭按鈕綁定點(diǎn)擊事件。該功能實(shí)現(xiàn)點(diǎn)擊右側(cè)按鈕圖片前進(jìn)滑動(dòng)，當(dāng)輪播到最后一張圖片的時(shí)候，轉(zhuǎn)到輪播第 1張圖片，同時(shí)控制焦點(diǎn)隨之變化。

var flag = true;

arrow_r.addEventListener('click',function() {

if (flag) {

flag = false; // 關(guān)閉節(jié)流閥

if (num == ul.children.length - 1) {

ul.style.left = 0;

num = 0;

}

num++;

animate(ul, -num * focusWidth,function() {

flag = true; // 打開節(jié)流閥

});

circle++;

if (circle == ol.children.length) {

circle = 0;

}

circleChange();

}

});

（3）為左側(cè)按鈕綁定點(diǎn)擊事件。此處功能主要實(shí)現(xiàn)當(dāng)輪播圖處于初始狀態(tài)時(shí)，點(diǎn)擊左側(cè)按鈕圖片從第一張倒退到最后一張。

arrow_l.addEventListener('click', function() {

if (flag) {

flag = false;

if (num == 0) {

num = ul.children.length - 1;

ul.style.left = -num *focusWidth + 'px';

}

num--;

animate(ul, -num * focusWidth,function() {

flag = true;

}); });

（4）圖片自動(dòng)輪播。此處功能主要實(shí)現(xiàn)當(dāng)輪播圖處于初始狀態(tài)時(shí)，利用定時(shí)器實(shí)現(xiàn)自動(dòng)輪播。

var timer = setInterval(function() {arrow_r.click(); }, 2000);

3 結(jié)語(yǔ)

綜上所述，網(wǎng)頁(yè)是信息展示的重要窗口，加強(qiáng)JavaScript技術(shù)在Web開發(fā)中的功能設(shè)計(jì)為信息的傳遞提供了有效保障。JavaScript作為嵌入式的高級(jí)程序語(yǔ)言，是Web開發(fā)中一項(xiàng)不可或缺的技術(shù)。本文利用JavaScript技術(shù)對(duì)象模型知識(shí)點(diǎn)對(duì)網(wǎng)頁(yè)輪播圖展開設(shè)計(jì)分析，旨在提高Web開發(fā)應(yīng)用功能，為網(wǎng)頁(yè)開發(fā)者提供知識(shí)借鑒。每一個(gè)開發(fā)者都應(yīng)該基于用戶需求，結(jié)合數(shù)據(jù)分析處理技術(shù)，充分探究JavaScript技術(shù)運(yùn)用于Web開發(fā)功能創(chuàng)新，為進(jìn)一步優(yōu)化我國(guó)Web開發(fā)整體水平貢獻(xiàn)力量。