JavaScript在Web開發(fā)的應(yīng)用研究

許至晶

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

0 引言

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

1 JavaScript概述

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

（1） DOM

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

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

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

text.innerHTML = "你好";

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

（2）BOM

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

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

2 JavaScript應(yīng)用實例

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

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

圖1 輪播圖示例

2.1 網(wǎng)頁布局

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

2.2 功能實現(xiàn)

（1）焦點自動生成。該功能根據(jù)輪播圖片數(shù)量自動生成焦點，通過document.createElement()創(chuàng)建元素，再通過element.appendChild()添加元素，并通過for循環(huán)為每一個焦點綁定點擊事件，實現(xià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è)箭頭按鈕綁定點擊事件。該功能實現(xiàn)點擊右側(cè)按鈕圖片前進滑動，當(dāng)輪播到最后一張圖片的時候，轉(zhuǎn)到輪播第 1張圖片，同時控制焦點隨之變化。

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è)按鈕綁定點擊事件。此處功能主要實現(xiàn)當(dāng)輪播圖處于初始狀態(tài)時，點擊左側(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）圖片自動輪播。此處功能主要實現(xiàn)當(dāng)輪播圖處于初始狀態(tài)時，利用定時器實現(xiàn)自動輪播。

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

3 結(jié)語

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