JavaScript程序设计实例教程(第2版)
上QQ阅读APP看书,第一时间看更新

知识准备

1.1 JavaScript简述

978-7-111-64715-7-Chapter01-5.jpg

1-1 JavaScript简述

JavaScript是一种广泛应用于Web页面的脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译,而是直接嵌入HTML(Hyper Text Markup Language,超文本标记语言)页面中,把静态页面转变成支持用户交互并响应事件的动态页面。

JavaScript非常重要,可以说学习前端的本质就是学习JavaScript编程。后面学的很多高级技术都是基于JavaScript的。JavaScript可以让网页元素具备更加流畅的动态效果。这在目前流行的B/S架构体系下是极其重要的事情,也是为什么前端工程师被广泛需求的根本原因。

1.1.1 JavaScript的组成

JavaScript由如下三部分组成。

●核心(ECMAScript),描述了该语言的语法和基本对象。

●浏览器对象模型(Browser Object Model,BOM),描述了与浏览器进行交互的方法和接口。

●文档对象模型(Document Object Model,DOM),描述了处理网页内容的方法和接口。

BOM用来获取或设置浏览器的属性、行为,例如新建窗口、调整窗口大小、关闭窗口、浏览历史记录等。DOM定义了JavaScript操作HTML文档的接口,提供了访问HTML文档中元素(如body、form、div、textarea等)的途径以及操作方法,可以用来获取或设置文档中标签的属性,例如获取或者设置input表单元素的value值。

浏览器载入HTML文档后,将整个文档规划成由节点构成的节点树,文档中每个部分都是一个节点。例如<div id="div1"class="div1">DOM示例</div>,其中<div>标签是元素节点,“id”和“class”是属性节点,“DOM示例”是文本节点。

1.1.2 JavaScript的主要特点

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,主要用于创建具有较强交互性的动态页面,主要具有如下特点。

1.解释型脚本语言

JavaScript是一种解释型脚本语言,嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释,可以大量节省客户端与服务器端进行数据交互的时间。

2.基于对象的语言

JavaScript是基于对象的,它提供了大量的内置对象,如String、Number、Boolean、Array、Date、Math及RegExp等。它还具有一些面向对象的基本特征,用户可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,编写功能强大的Web文档。

3.简单性

JavaScript基本结构类似于C语言,采用小程序段的方式编程,提供了便捷的开发流程,并通过简易的开发平台就可以嵌入HTML文档中供浏览器解释执行。同时,JavaScript的变量类型是弱类型,不强制检查变量的类型,也就是说可以不定义其变量的类型。

4.相对安全性

JavaScript是一种安全性语言,它不允许访问本地硬盘,也不能将数据存入服务器,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而能有效地防止数据的丢失。

5.动态性

JavaScript是动态的,它可以直接对用户或客户的输入做出响应,无须经过Web服务程序。它对用户的响应是采用事件驱动的方式进行的。所谓事件,就是指在页面中执行了某种操作所产生的动作,例如按下鼠标、移动窗口、选择菜单等。当事件发生后,可能会引起相应的事件响应,即事件驱动。

6.跨平台性

JavaScript依赖于浏览器本身,与操作系统环境无关,只要操作系统能运行浏览器并且浏览器支持JavaScript,就可以正确执行。

综上所述,JavaScript是一种有较强生命力和发展潜力的脚本描述语言,它可以被直接嵌入HTML文档供浏览器解释执行,直接响应客户端事件(如验证数据表单合法性),并调用相应的处理方法,迅速返回处理结果并更新页面,实现Web交互性和动态的要求;同时,它将大部分工作交给客户端处理,将Web服务器的资源消耗降到最低。

1.1.3 JavaScript相关应用

978-7-111-64715-7-Chapter01-6.jpg

1-2 JavaScript相关应用

JavaScript的功能十分强大,可实现多种任务,如在数据被送往服务器前对表单输入的数据进行验证、对浏览器事件做出响应、读写HTML元素、检测访客的浏览器信息等,实现如执行计算、检查表单、编写游戏、添加特殊效果、自定义图形选择、创建安全密码等操作,所有这些功能都有助于增强站点的动态效果和交互性。

1.验证数据

通过使用JavaScript,可以创建动态HTML页面,以便用特殊对象、文件和相关数据库来处理用户输入和维护永久性数据。正如大家都知道的,向某个网站注册时必须填写一份表单,输入各种详细信息,如果某个字段输入有误,向Web服务器提交表单前,错误会经客户端验证被发现,并弹出提示警告信息,如图1-5所示。

2.页面特效

浏览页面时,经常会看到一些动画效果,这些动画效果使页面显得更加生动。使用JavaScript也可以实现这些动画效果,图1-6所示为使用JavaScript实现的几幅图片的轮播效果。

3.数值计算

JavaScript脚本将数据类型作为对象,并提供丰富的操作方法,使得JavaScript可以用于数值计算。图1-7所示为用JavaScript脚本编写的进货单结算页面效果。

978-7-111-64715-7-Chapter01-7.jpg

图1-5 JavaScript数据验证提示

978-7-111-64715-7-Chapter01-8.jpg

图1-6 图片的轮播效果

978-7-111-64715-7-Chapter01-9.jpg

图1-7 进货单结算页面效果

4.动态页面效果

使用JavaScript脚本可以对Web页面的所有元素对象进行访问,并通过使用对象的方法访问和修改其属性来实现动态页面效果。例如可以使用JavaScript实现网页版象棋游戏、俄罗斯方块游戏,如图1-8和图1-9所示。

978-7-111-64715-7-Chapter01-10.jpg

图1-8 象棋游戏页面效果

978-7-111-64715-7-Chapter01-11.jpg

图1-9 俄罗斯方块游戏页面效果

1.1.4 JavaScript的工作原理

JavaScript的工作原理如图1-10所示。

978-7-111-64715-7-Chapter01-12.jpg

图1-10 JavaScript脚本执行原理

在脚本执行的过程中,浏览器客户端与应用服务器采用请求/响应模式进行交互,具体执行过程分解如下。

第一步:用户在浏览器的地址栏中输入要访问的页面(这个页面中包含JavaScript脚本程序),浏览器接收用户的请求。

第二步:向Web服务器请求某个包含JavaScript脚本的页面,浏览器把请求信息(要打开的页面信息)发送到应用服务器端,等待服务器端的响应。

第三步:Web服务器端向浏览器客户端发送响应信息,即把含有JavaScript脚本的HTML文件发送到浏览器客户端,然后由浏览器从上至下逐条解析HTML标签和JavaScript脚本,并显示页面效果给用户。

使用客户端脚本的好处有两点,第一,含有JavaScript脚本的页面只要下载一次即可,能够减少不必要的网络通信;第二,脚本程序是由浏览器客户端执行,而不是由服务器端执行的,因此能够减轻服务器端的压力。

1.2 JavaScript编程起步

978-7-111-64715-7-Chapter01-13.jpg

1-3 HBuilder的快速开发

1.2.1 选择JavaScript脚本编辑器

在编写JavaScript脚本的过程中,一款好的编辑器能让开发者事半功倍。目前市面上流行的JavaScript脚本编辑器很多,主要有Dreamweaver、NotePad++、Aptana、HBuilder等。

1.Dreamweaver

Dreamweaver是Adobe公司推出的一款Web开发工具,是一款很好的入门工具,是集网页制作和管理网站于一身的所见即所得的网页编辑器,在Web开发中占有重要的地位。

2.NotePad++

NotePad++是一款开源免费的文本编辑器,功能比Windows自带的记事本强大很多。NotePad++支持多国语言,支持众多编程语言的语法高亮和语法折叠。

3.Aptana

Aptana是一款专业级的Web开发软件,拥有功能较强的JavaScript脚本编辑器和调试工具(支持常见的JavaScript类库)。较新版本的Aptana还集成了iPhone开发环境。

4.HBuilder

HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。“快”是HBuilder的最大优势,它通过完整的语法提示和代码输入法、代码块等,大幅提升了HTML、JavaScript、CSS的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据,支持手机数据线真机联调;有无死角提示,除了语法,还能提示id、class、图片、链接、字体等,可以一边写代码,一边看效果。HBuilder是笔者认为当前最好的Web开发工具。

在HBuilder官网上可以免费下载最新版的HBuilder。HBuilder目前有两个版本,一个是Windows版,一个是MAC版,下载的时候所根据自己的计算机系统情况选择适合自己的版本。

(1)创建Web项目

选择“文件”|“新建”|“选择Web项目”命令,如图1-11所示。打开“创建Web项目”对话框,如图1-12所示,在“项目名称”文本框中填写新建项目的名称,“位置”文本框中填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次使用时会默认使用更改后的路径),然后选择使用的模板,本书案例选择默认项。

978-7-111-64715-7-Chapter01-14.jpg

图1-11 HBuilder菜单

978-7-111-64715-7-Chapter01-15.jpg

图1-12 “创建Web项目”对话框

(2)创建HTML文件

选择“文件”|“新建”|“选择HTML文件”命令,打开“创建文件向导”对话框,如图1-13所示,在“文件名”文本框中填写新建文件的名称,如test.html,然后选择使用的模板,本书PC端的案例选择HTML5。

(3)index.html文件

新建的页面或新项目中自带的index.html文件内容如下。

978-7-111-64715-7-Chapter01-16.jpg

978-7-111-64715-7-Chapter01-17.jpg

DOCTYPE是document type(文档类型)的简写,!DOCTYPE是一个文档类型标记,是一种标准通用标记语言的文档类型声明,<!DOCTYPE>声明位于文档中最前面的位置,处于<html>标签之前。<!DOCTYPE>声明不是一个HTML标签,用来告知Web浏览器页面使用了哪种HTML版本。对于中文网页需要使用<meta charset="UTF-8">声明编码,否则会出现乱码。

将光标置于title标签内,给HTML文件设置title:HelloHBuilder,完成后按“Ctrl+Enter”组合键在当前位置的下一行插入空行,并将光标移动到下一行,按“s”快捷键打开下拉列表,选择生成一个script块来编写JavaScript代码(或者输入“s”后按“Enter”键)如图1-14所示,也可以向下移动,比如选择第三个实现外链JavaScript文件。

978-7-111-64715-7-Chapter01-18.jpg

图1-13 “创建文件向导”对话框

978-7-111-64715-7-Chapter01-19.jpg

图1-14 快捷键的使用

1.2.2 引入JavaScript脚本代码到HTML文档中的方法

978-7-111-64715-7-Chapter01-20.jpg

1-4 JavaScript的使用方法

将代码包含于<script>和</script>标签对内,然后可嵌入HTML文档中。将JavaScript脚本嵌入HTML文档中有4种标准方法,下面分别介绍。

1.通过<script>标签嵌入HTML文档

【例1-1】利用<script>和</script>标签引入JavaScript脚本(运行结果如图1-16a所示),代码如下。

978-7-111-64715-7-Chapter01-21.jpg

978-7-111-64715-7-Chapter01-22.jpg

首先,<script>和</script>标签对将JavaScript脚本代码封装,同时告诉浏览器其间的代码为JavaScript脚本代码,然后调用document文档对象的write()方法写字符串到HTML文档中:

978-7-111-64715-7-Chapter01-23.jpg

【例1-1】的代码中除了<script>与</script>标签对之间的内容外,都是最基本的HTML代码,可见<script>和</script>标签对将JavaScript脚本代码封装并嵌入到HTML文档中。

浏览器载入嵌有JavaScript脚本的HTML文档时,能自动识别JavaScript脚本代码起始标签<script>和结束标签</script>,并将其间的代码按照解释JavaScript脚本代码的方法加以解释,然后将解释结果返回HTML文档并在浏览器客户端显示。

注意:HTML文件中的脚本必须位于<script>与</script>标签之间,否则被浏览器解析为普通文本。

2.通过<script>标签的src属性链接外部的JavaScript脚本文件

【例1-2】利用src属性可链接外部的JavaScript脚本文件引入HTML文档。

创建JavaScript文件,命名为“myjs.js”如图1-15所示。

978-7-111-64715-7-Chapter01-24.jpg

图1-15 创建JavaScript文件

在myjs.js文件中编辑如下代码并将其保存。

978-7-111-64715-7-Chapter01-25.jpg

创建HTML文档,代码如下:

978-7-111-64715-7-Chapter01-26.jpg

运行结果如图1-16b所示。

978-7-111-64715-7-Chapter01-27.jpg

图1-16 运行结果对比

a)【例1-1】运行结果 b)【例1-2】运行结果

代码中的src属性用于将外部的脚本文件内容嵌入当前文档中,使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名。

可见通过外部引入JavaScript脚本文件的方式,能实现同样的功能,并具有如下优点。

1)将脚本程序同页面的逻辑结构分离。

2)通过外部脚本,可以轻易实现多个页面共用同一功能的脚本文件,以便通过更新一个脚本文件内容达到批量更新的目的。

3)浏览器可以实现对目标脚本文件的高速缓存,避免额外的由于引用同样功能的脚本代码而导致下载时间的增加。

注意:一般来讲,将实现通用功能的JavaScript脚本代码作为外部脚本文件引用,而实现特有功能的JavaScript代码则直接嵌入HTML文档中,目前业界推荐的做法是JavaScript代码放到最后,这样会避免因DOM没加载而产生的错误。

3.通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器中,可以通过JavaScript伪URL调用语句来引入JavaScript脚本代码,这是一种短小高效的脚本代码嵌入方式。伪URL的一般格式如下,一般以“javascript:”开始,后面紧跟要执行的操作。

978-7-111-64715-7-Chapter01-28.jpg

【例1-3】通过JavaScript伪URL引入脚本,运行效果如图1-17和图1-18所示,代码如下。

978-7-111-64715-7-Chapter01-29.jpg

978-7-111-64715-7-Chapter01-30.jpg

978-7-111-64715-7-Chapter01-31.jpg

图1-17 代码运行结果

978-7-111-64715-7-Chapter01-32.jpg

图1-18 单击后弹出提示框(1)

4.通过HTML文档事件处理程序引入

在开发Web应用程序的过程中,开发者可以在HTML文档中设定不同的事件处理器,通常是设置某HTML元素的属性来引用一个脚本(可以是一个简单的动作或者函数),属性一般以on开头,如onmousemove(鼠标移动)等。

【例1-4】通过HTML文档事件处理程序引入脚本,使用JavaScript脚本对按钮单击事件进行响应,代码如下。

978-7-111-64715-7-Chapter01-33.jpg

程序运行后,原始页面如图1-19所示,单击“单击按钮”按钮,出现如图1-20所示的提示框。

978-7-111-64715-7-Chapter01-34.jpg

图1-19 显示单击按钮页面

978-7-111-64715-7-Chapter01-35.jpg

图1-20 单击后弹出提示框(2)

事件处理机制:除鼠标单击事件例子,类似的还有双击事件,需要使用ondblclick属性,示例中当单击事件触发时,弹出提示框,提示单击事件触发。

1.2.3 实现与用户交流的常用方式

978-7-111-64715-7-Chapter01-36.jpg

1-5 JavaScript常用的输出语句

JavaScript与用户交流的方式有多种,以多样的方式显示数据,实现页面的交互性,下面分别介绍JavaScript脚本常用的与用户交流的方式。

1.使用window.alert()弹出警告框,向用户发出警告或提醒

alert()方法会创建一个警告框,用于将浏览器或文档的警告信息传递给客户。参数可以是变量、字符串或表达式,警告框无返回值。“window”可以省略。

alert()方法的基本语法格式:

978-7-111-64715-7-Chapter01-37.jpg

示例如下。

978-7-111-64715-7-Chapter01-38.jpg

2.使用document.write()方法将内容写到HTML文档中

document.write()方法可以向文档写文本、HTML、表达式或JavaScript代码。该方法需要一个字符串参数,它是写到文档HTML中的内容,这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标签语言。

document.write()方法的基本语法格式:

978-7-111-64715-7-Chapter01-39.jpg

示例如下。

978-7-111-64715-7-Chapter01-40.jpg

3.使用console.log()写入浏览器的控制台

示例如下。

978-7-111-64715-7-Chapter01-41.jpg

如果浏览器支持调试,可以使用console.log()方法在浏览器客户端显示JavaScript值。在调试窗口中单击“console”选项卡,HBuilder默认控制台里也可以显示结果。

4.使用confirm()方法确认用户的选择

向用户提供信息是有用的,但有时候还希望从用户那里获得信息。window.confirm("str")等效于confirm("str"),确认消息对话框返回值为布尔型,单击“确认”返回true,单击“取消”返回false,可以根据用户对提示的反应给出相应的回复,示例如下。

978-7-111-64715-7-Chapter01-42.jpg

5.使用prompt()方法提示用户

978-7-111-64715-7-Chapter01-43.jpg

1-6 prompt() 方法

有时候,不仅希望用户回答Yes/No,而且希望得到更特定的响应。在这种情况下,可问一个问题(带默认回答),然后接收回复。

prompt()方法用于显示可提示用户进行输入的对话框,返回用户输入的字符串,其基本语法prompt(msg,defaultText)

其中,参数msg可选,是要在对话框中显示的纯文本(而不是HTML格式的文本),用于提示。参数defaultText可选,是默认的输入文本。

例如可以使用prompt对话框询问用户籍贯,如图1-21所示,输入内容如图1-22所示,然后单击“确定”按钮,会出现如图1-23的结果,若单击“取消”按钮,会出现如图1-24的结果,示例代码如下。

978-7-111-64715-7-Chapter01-44.jpg

978-7-111-64715-7-Chapter01-45.jpg

图1-21 提示输入信息

978-7-111-64715-7-Chapter01-46.jpg

图1-22 输入信息

978-7-111-64715-7-Chapter01-47.jpg

图1-23 单击“确定”按钮处理结果界面

978-7-111-64715-7-Chapter01-48.jpg

图1-24 单击“取消”按钮处理结果界面

6.使用innerHTML将JavaScript脚本写入HTML元素

【例1-5】使用innerHTML将JavaScript脚本写入HTML元素,代码如下。

978-7-111-64715-7-Chapter01-49.jpg

978-7-111-64715-7-Chapter01-50.jpg

以上JavaScript语句可以在Web浏览器中执行,document.getElementById("demo")是通过id属性值来查找HTML元素的JavaScript代码;“innerHTML="学习环境无处不在,只要有文本编辑器,就能编写JavaScript程序。"”是用于修改元素的HTML内容(innerHTML)的JavaScript代码。

注意:console.log()和alert()主要用于调试,使用alert()和document.write()不好控制显示的位置,而使用innerHTML将JavaScript脚本写入HTML元素的方式可以精确地控制显示的位置,所以第6种方案最为常用。

1.2.4 调试JavaScript程序

本书案例使用HBuilder进行开发,并采用Chrome浏览器作为展示和调试工具,如果脚本代码出现错误,通过Chrome浏览器找出错误的类型和位置,用编辑器打开源文件修改后保存,并重新使用浏览器浏览,重复此过程直到没有错误出现为止。

1.边改边看模式

HBuilder的边改边看模式最方便,最常用。在HBuilder主界面右上角可以切换开发模式,可以选“边改边看模式”,切换模式的快捷键是“Ctrl+P”。进入“边改边看模式”后,左侧窗格会显示代码,右侧窗格会显示浏览器,如图1-25所示。Windows版的HBuilder界面右侧窗格的浏览器是Chrome;MAC版右侧窗格的浏览器是Safari。

978-7-111-64715-7-Chapter01-51.jpg

图1-25 边改边看模式

在此模式下,如果当前打开的是HTML文件,每次保存均会自动刷新显示当前页面效果。若为JavaScript、CSS文件,如与当前浏览器视图打开的页面有引用关系,也会刷新。Windows版的边改边看模式还支持代码和页面元素的互相跳转。右击代码里的一个div元素,在弹出的快捷菜单中选择“高亮浏览器内对应元素”命令,就会看到右侧窗格浏览器里指定的元素高亮显示了,如图1-26所示。反之,右击浏览器某个元素点,在弹出的快捷菜单中选择“查找文档中对应元素”命令,会跳转到相应代码段落。

978-7-111-64715-7-Chapter01-52.jpg

图1-26 HBuilder默认控制台

边改边看模式有两个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志,显示了代码行号,单击后可直接转到该行代码,如图1-26所示。

另一个控制台是Chrome控制台。在Windows版HBuilder的边改边看模式下右击,可以通过在快捷菜单中选择命令选择启动Chrome控制台。Chrome控制台的功能非常多,如检查CSS覆盖、调试JavaScript、查看网页加载性能等。

2.程序出错的类型

(1)语法错误

语法错误是在程序开发中由于使用不符合某种语言规则的语句而产生的错误,例如错误地使用了JavaScript的关键字、错误地定义了变量名称等。如果存在语法错误,当浏览器运行JavaScript程序时就会报错。

如图1-27所示,代码“document.write("欢迎来到JavaScript世界");”中的英文分号“;”误写成了中文分号“;”,控制台就会提示错误(第9行中包含一个语法错误,在解决错误之前,代码提示可能无法正常工作)。

若要使用Chrome浏览器的错误代码提示信息,需要在浏览器中右击,在弹出的快捷菜单中选择“查看”命令打开开发者工具调试窗口,反复按“F12”键也可以切换状态(打开或关闭)。单击右上角的红色小叉号按钮就可以看到错误提示信息,如图1-28所示。

978-7-111-64715-7-Chapter01-53.jpg

图1-27 语法错误实时检测(内置控制台输出错误信息)

978-7-111-64715-7-Chapter01-54.jpg

图1-28 在Chrome浏览器中调试JavaScript

JavaScript区分大小写,如图1-29所示,代码“prompt("请输入你的年龄",20);”中的第一个字符误输成了大写字母,即“Prompt("请输入你的年龄",20);”,保存文件后运行本程序,将会出现错误提示。在外置Chrome浏览器中调试JavaScript(prompt方法),会出现如图1-30所示的错误。

978-7-111-64715-7-Chapter01-55.jpg

图1-29 内置控制台输出错误提示

978-7-111-64715-7-Chapter01-56.jpg

图1-30 在外置Chrome浏览器中调试JavaScript(prompt方法)

(2)逻辑错误

有时候,程序不存在语法错误,也没有执行非法操作的语句,可是程序运行时的结果却是不正确的,这种错误叫作逻辑错误。逻辑错误对于编辑器来讲并不算错误,但是由于代码中存在逻辑问题,导致运行时没有得到预期结果。逻辑错误在语法上是不存在错误的,但是在程序的功能上是个错误,而且是最难调试和发现的错误。因为它们不会抛出任何错误信息,唯一结果就是程序功能不能实现。

比如想判断一个人的名字是不是叫Bill,如果编写程序时却少写了一个字母“l”,写成了Bil,程序运行时就会发生逻辑错误。

更隐蔽的逻辑错误的例子还有很多,比如变量由于忘记初始化而包含垃圾数据、忘记判断结束条件或结束条件不正确使得循环提前或延后结束甚至成为死循环等。

【例1-6】逻辑错误判断,输入如下代码。

978-7-111-64715-7-Chapter01-57.jpg

以上代码中,最直接的逻辑错误是2(width+height),因为在编程过程中乘号不可忽略,所以代码应为:

978-7-111-64715-7-Chapter01-58.jpg

测试代码,默认宽为10米,高为20米,得到的结果如图1-31所示。

978-7-111-64715-7-Chapter01-59.jpg

图1-31 测试结果

虽然用户输入的是数字10和20,但prompt()返回的是字符串类型,也就是"10"和"20",所以语句c=2*(width+height)中变量width和height都是字符串类型,字符串类型的值相加是首尾相连,语句相当于:c=2*("10"+"20"),所以出现了“2040”的结果。所以输入的参数需要通过parseFloat()函数转换为数字,语句应为:

978-7-111-64715-7-Chapter01-60.jpg

再次运行代码,可得到正确结果为60。

1.2.5 页面结构、样式和行为

HTML定义了网页的内容,即页面结构;CSS(Cascading Style Sheet,层叠样式表)描述网页布局的样式;JavaScript控制网页的行为,即通过JavaScript脚本改变网页的内容和样式,实际上就是通过调用JavaScript函数改变文档中各个元素对象的属性值,或使用文档对象的方法模仿用户操作的效果。本书介绍JavaScript如何与HTML和CSS一起工作。

若按照结构、样式、行为的方式进行分离,对站点进行修改就会很容易,尤其修改全站点范围的效果会很方便,所以实现高质量的代码需要在结构、样式、行为分离的基础上做到精简、重用、有序。

1)精简:尽量减小文件的大小,提高页面加载速度。

2)重用:提高代码的重用性,减少冗余代码,提高开发速度。

3)有序:提高代码的结构性,组织好代码结构更利于维护和应变特殊情况。