基于JavaScript在Web設計中應用

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

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

關鍵詞：JavaScript;Web前端開發;HTML;腳本語言

1.引言

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

2.JavaScrip

2.1 JavaScript的組成

ECMAScript 5.0定義了Js的語法標準，包含變量 、表達式、運算符、函數、if語句、for循環、while循環、內置的函數;DOM（Document，文檔模型） ：操作網頁上元素的API，比如讓盒子顯示隱藏、變色、動畫 form表單驗證;BOM（瀏覽器對象模型）：操作瀏覽器部分功能的API，比如刷新頁面、前進后退、讓瀏覽器自動滾動。

2.2 DOM概念

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

2.2.1 解析過程

HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點，然后操作的時候修改的是該元素的屬性。

2.2.2 DOM樹

在HTML當中，元素節點有HMTL標簽、文本節點就是標簽中的文字（比如標簽之間的空格、換行）、屬性節點表示標簽的屬性整個html文檔就是一個文檔節點。所有的節點都是Object對象。

2.3 BOM概念

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

2.4 對象

JS中萬物皆對象，把任何的數據和行為抽象成一個形象的對象，類似于人生活中思考的方式，而類就是對象（Object）的模版，定義了同一組對象（又稱"實例"）共有的屬性和方法面向對象。

2.4.1對象構造

程序使用類創建對象時，生成的對象叫做類的實例（instance）。對類生成的對象的個數的唯一限制來自于運行代碼的機器的物理內存。每個實例的行為相同，但實例處理一組獨立的數據。由類創建對象實例的過程叫做實例化。

2.4.2 Location對象

Location 對象存儲在 Window 對象的 Location 屬性中，表示窗口中當前顯示的文檔的 Web 地址。

2.4.3 History對象

History對象也可以叫做歷史清單對象，是記錄用戶曾經瀏覽過的頁面（URL），并且可以實現瀏覽器前進與后退，從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的Window對象關聯。通過其不同屬性，瀏覽窗口的歷史記錄。

2.4.4 Frames對象

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

2.4.5 Navigator對象

Navigator 對象包含有關瀏覽器的信息，其屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。查詢瀏覽器的代碼名、版本信息等。也可以通過 JavaEnabled 屬性規定瀏覽器是否使用Java。

2.4.6 Screen 對象

Screen 對象包含有關客戶端顯示屏幕的信息，通過不同屬性調節客戶端屏幕高度、寬度，還可以返回其屏幕的分辨率、刷新率等因素。通過 JavaScript 程序將利用這些信息來優化它們的輸出，以達到用戶的顯示要求。

3.結論

通過JavaScript在Web設計中進行面向對象的編程時，可以更好地給網頁帶來動態效果，提高用戶瀏覽感受體驗。不與Web服務器發生任何數據交換，不增加服務器的負擔，具有更高的安全性，避免網頁設計中造成HTML代碼重復臃腫的現象，在Web設計中的廣泛使用可以更好的提升體驗效果。

參考文獻

[1]儲久良.web前端開發技術——HTML、CSS、JavaScript.3版.北京：清華大學出版社，2022.

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

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

[4]賈素玲，王強. JavaScript程序設計.北京：清華大學出版社，2009。