周文豪 馬明浩 黃振豪 彭玉華

摘要：Web頁面前端呈現(xiàn)給用戶，通常缺少動(dòng)態(tài)效果，用戶體驗(yàn)有待提升，通過JavaScript可以在HTML中嵌入動(dòng)態(tài)文本、對瀏覽器事件做出響應(yīng)，因此使用JavaScript可以帶來更好的瀏覽體驗(yàn)。本文主要論述JavaScrip，在Web前端頁面開發(fā)中的應(yīng)用，JavaScript的組成，DOM概念及解析過程，BOM概念，對象在Web頁面作用。

關(guān)鍵詞：JavaScript;Web前端開發(fā);HTML;腳本語言

1.引言

JavaScript是目前非常流行、應(yīng)用廣泛的一門客戶端腳本語言，被廣泛用于Web前端開發(fā)過程中，特別在Html添加網(wǎng)頁動(dòng)態(tài)功能開發(fā)中應(yīng)用更加廣泛。具有簡單性、安全性、動(dòng)態(tài)性、跨平臺(tái)性。不需要和Web服務(wù)器發(fā)生任何數(shù)據(jù)交換，不增加服務(wù)器的負(fù)擔(dān)，通過合理有效地使用JavaScript腳本語言可以使Web開發(fā)過程變得簡單。

2.JavaScrip

2.1 JavaScript的組成

ECMAScript 5.0定義了Js的語法標(biāo)準(zhǔn)，包含變量 、表達(dá)式、運(yùn)算符、函數(shù)、if語句、for循環(huán)、while循環(huán)、內(nèi)置的函數(shù);DOM（Document，文檔模型） ：操作網(wǎng)頁上元素的API，比如讓盒子顯示隱藏、變色、動(dòng)畫 form表單驗(yàn)證;BOM（瀏覽器對象模型）：操作瀏覽器部分功能的API，比如刷新頁面、前進(jìn)后退、讓瀏覽器自動(dòng)滾動(dòng)。

2.2 DOM概念

DOM全稱 Docuemnt Object Model 文檔對象模型，是一個(gè)文檔對象模型。DOM 為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)。目的是為了能讓Js操作html元素而制定的一個(gè)規(guī)范。

2.2.1 解析過程

HTML加載完畢，渲染引擎會(huì)在內(nèi)存中把HTML文檔，生成一個(gè)DOM樹，getElementById是獲取內(nèi)中DOM上的元素節(jié)點(diǎn)，然后操作的時(shí)候修改的是該元素的屬性。

2.2.2 DOM樹

在HTML當(dāng)中，元素節(jié)點(diǎn)有HMTL標(biāo)簽、文本節(jié)點(diǎn)就是標(biāo)簽中的文字（比如標(biāo)簽之間的空格、換行）、屬性節(jié)點(diǎn)表示標(biāo)簽的屬性整個(gè)html文檔就是一個(gè)文檔節(jié)點(diǎn)。所有的節(jié)點(diǎn)都是Object對象。

2.3 BOM概念

Window對象是BOM的頂層（核心）對象，所有對象都是通過它延伸出來的，也可以稱為Window的子對象，DOM是BOM的一部分，Window對象是JavaScript中的頂級對象，全局變量、自定義函數(shù)也是Window對象的屬性和方法。

2.4 對象

JS中萬物皆對象，把任何的數(shù)據(jù)和行為抽象成一個(gè)形象的對象，類似于人生活中思考的方式，而類就是對象（Object）的模版，定義了同一組對象（又稱"實(shí)例"）共有的屬性和方法面向?qū)ο蟆?/p>

2.4.1對象構(gòu)造

程序使用類創(chuàng)建對象時(shí)，生成的對象叫做類的實(shí)例（instance）。對類生成的對象的個(gè)數(shù)的唯一限制來自于運(yùn)行代碼的機(jī)器的物理內(nèi)存。每個(gè)實(shí)例的行為相同，但實(shí)例處理一組獨(dú)立的數(shù)據(jù)。由類創(chuàng)建對象實(shí)例的過程叫做實(shí)例化。

2.4.2 Location對象

Location 對象存儲(chǔ)在 Window 對象的 Location 屬性中，表示窗口中當(dāng)前顯示的文檔的 Web 地址。

2.4.3 History對象

History對象也可以叫做歷史清單對象，是記錄用戶曾經(jīng)瀏覽過的頁面（URL），并且可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退，從窗口被打開的那一刻開始記錄，每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁乃至每個(gè)框架，都有自己的history對象與特定的Window對象關(guān)聯(lián)。通過其不同屬性，瀏覽窗口的歷史記錄。

2.4.4 Frames對象

Frames 屬性可以返回窗口中所有命名的框架，該集合是 Window 對象的數(shù)組，每個(gè) Window 對象在窗口中含有一個(gè)框架。屬性 frames.length 可以存放數(shù)組 frames[]中含有的元素個(gè)數(shù)。frames[]是窗口中所有命名的框架組成的數(shù)組。而這個(gè)數(shù)組的每個(gè)元素都是一個(gè)Window對象，對應(yīng)于窗口中的一個(gè)框架。

2.4.5 Navigator對象

Navigator 對象包含有關(guān)瀏覽器的信息，其屬性描述了正在使用的瀏覽器?？梢允褂眠@些屬性進(jìn)行平臺(tái)專用的配置。查詢?yōu)g覽器的代碼名、版本信息等。也可以通過 JavaEnabled 屬性規(guī)定瀏覽器是否使用Java。

2.4.6 Screen 對象

Screen 對象包含有關(guān)客戶端顯示屏幕的信息，通過不同屬性調(diào)節(jié)客戶端屏幕高度、寬度，還可以返回其屏幕的分辨率、刷新率等因素。通過 JavaScript 程序?qū)⒗眠@些信息來優(yōu)化它們的輸出，以達(dá)到用戶的顯示要求。

3.結(jié)論

通過JavaScript在Web設(shè)計(jì)中進(jìn)行面向?qū)ο蟮木幊虝r(shí)，可以更好地給網(wǎng)頁帶來動(dòng)態(tài)效果，提高用戶瀏覽感受體驗(yàn)。不與Web服務(wù)器發(fā)生任何數(shù)據(jù)交換，不增加服務(wù)器的負(fù)擔(dān)，具有更高的安全性，避免網(wǎng)頁設(shè)計(jì)中造成HTML代碼重復(fù)臃腫的現(xiàn)象，在Web設(shè)計(jì)中的廣泛使用可以更好的提升體驗(yàn)效果。

參考文獻(xiàn)

[1]儲(chǔ)久良.web前端開發(fā)技術(shù)——HTML、CSS、JavaScript.3版.北京：清華大學(xué)出版社，2022.

[2]安興亞，關(guān)玉欣，云靜，李雷孝.HTML+CSS+JavaScript前端開發(fā)技術(shù)教程.北京：清華大學(xué)出版社，2020。

[3]楊蓓，李林.web前端開發(fā)案例教程（HTML5+CSS3+JavaScript）.北京：中國鐵道出版社有限公司，2021。

[4]賈素玲，王強(qiáng). JavaScript程序設(shè)計(jì).北京：清華大學(xué)出版社，2009。