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开发整体水平贡献力量。