基于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。