JavaScript在Web開發的應用研究

許至晶

（郴州職業技術學院 湖南 郴州 423000）

0 引言

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

1 JavaScript概述

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

（1） DOM

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

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

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

text.innerHTML = "你好";

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

（2）BOM

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

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

2 JavaScript應用實例

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

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

圖1 輪播圖示例

2.1 網頁布局

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

2.2 功能實現

（1）焦點自動生成。該功能根據輪播圖片數量自動生成焦點，通過document.createElement()創建元素，再通過element.appendChild()添加元素，并通過for循環為每一個焦點綁定點擊事件，實現點擊焦點，指定輪播圖片跳轉。

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）為右側箭頭按鈕綁定點擊事件。該功能實現點擊右側按鈕圖片前進滑動，當輪播到最后一張圖片的時候，轉到輪播第 1張圖片，同時控制焦點隨之變化。

var flag = true;

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

if (flag) {

flag = false; // 關閉節流閥

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

ul.style.left = 0;

num = 0;

}

num++;

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

flag = true; // 打開節流閥

});

circle++;

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

circle = 0;

}

circleChange();

}

});

（3）為左側按鈕綁定點擊事件。此處功能主要實現當輪播圖處于初始狀態時，點擊左側按鈕圖片從第一張倒退到最后一張。

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）圖片自動輪播。此處功能主要實現當輪播圖處于初始狀態時，利用定時器實現自動輪播。

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

3 結語

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