Upload
others
View
16
Download
0
Embed Size (px)
Citation preview
1.1 JavaScript 是什么 1
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
JavaScript简介
1.1 JavaScript 是什么
JavaScript是一种流行的通用脚本语言。使用JavaScript可以为呆板的Web页面注入活力,因为
基于JavaScript可以实现用户与页面的交互,并响应页面上发生的事件。JavaScript被形容为Web
页面之间的粘合剂①。不仅是商业站点,几乎所有的Web页面中都有JavaScript代码(见图1-1)。
——————————
① 不过JavaScript之父Brendan Eich认为不但如此。他在名为Innovators of the Net: Brendan Eich and JavaScript的文章中
写道:“ ‘ Web页面之间的黏合剂’ 这种说法的确琅琅上口,不过对于JavaScript真正发挥的作用来讲却描述得不
够公正。黏合剂会凝结变硬,但JavaScript要比黏合剂更具动态性。JavaScript更像催化剂,它可以触发反应,并使
事件继续执行下去。”
第 1 章
2 第 1 章 JavaScript 简介
图1-1 通过JavaScript赋予了生命力的一个动态Web页面(例如,将鼠标移动到箭头
后面的文字上,相应的文字就会变成带下划线的超链接形式)
LiveScript是JavaScript的前身,由Netscape的Brendan Eich于1995年开发完成,并同Netscape
Navigator 2.0 beta版一同发布。从LiveScript开始,JavaScript就成为了一种可以赋予静态HTML页
面生命力的脚本语言。JavaScript能运行在绝大多数平台上,并且与硬件无关。它是一种客户端语
言,运行于用户的浏览器中而不是服务器上①。微软的Internet Explorer和Mozilla Firefox是我们比
较常见的浏览器②,它们都直接内置了JavaScript(但JavaScript的应用不仅限于浏览器)。在语法
上,JavaScript同C、Perl和Java类似。例如,if语句同while和for循环几乎完全相同。同Perl一
样,JavaScript是一种解释语言,不是编译语言。
——————————
① 实际上。也存在服务器端实现的JavaScript版本,如Rhino。本书后面也简单提及。——编者注
② 目前主流浏览器Internet Explorer、Firefox、Chrome、Opera、Safari中,都内置了JavaScript引擎。——译者注
1.2 JavaScript 不是什么 3
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
由于JavaScript是同浏览器关联的,所以它跟HTML紧密集成。HTML在浏览器中由专门的网
络库和图形渲染器负责处理,而JavaScript代码则由浏览器内嵌的JavaScript解释器执行。当浏览
器请求页面的时候,服务器会通过网络将包括HTML和JavaScript语句在内的整个文档的全部内容
发送到客户端。在页面加载的时候,HTML内容会被按行读取并显示,遇到JavaScript起始标签后,
由JavaScript解释器进行解释。到达JavaScript结束标签后,继续进行HTML处理。
由浏览器处理的JavaScript被称作客户端JavaScript。虽然JavaScript大都被当做客户端脚本语
言来使用,不过也可以在Web浏览器以外的其他环境中使用。Netscape创建了服务器端的
JavaScript,以CGI语言(如Python或者Perl)的形式进行编程。不过本书的重点会放在JavaScript
最常见的使用方式上——运行于客户端,也就是浏览器上。
1.2 JavaScript 不是什么
JavaScript不是Java。“ Java同JavaScript就好比是汽车(Car)和地毯(Carpet)” ①,这种说法
尽管有些极端,但它告诉我们Java和JavaScript是非常不同的两种语言。
Java是由Sun公司开发的,而JavaScript由Netscape开发。Java应用可以脱离Web页面存在;而
JavaScript程序要嵌于Web页面中,并且在浏览器窗口中执行②。Java是一种强类型语言,有严格
的语法规则;而JavaScript是松散型语言并且更灵活。Java数据类型必须先声明再使用;而JavaScript
中诸如变量、参数和函数返回值类型等都不需要声明。Java程序是需要编译的;而JavaScript是被
——————————
① 出自Usenet讨论组,以及Beginning JavaScript with DOM Scripting and Ajax第4页。Christian Heilmann,APRESS,
2006。
② JavaScript解释器通常嵌入在Web浏览器中,但不限于浏览器。服务器和其他应用程序也都可以使用JavaScript解释器。
4 第 1 章 JavaScript 简介
浏览器内置的JavaScript引擎解释执行的。
JavaScript不是HTML,但JavaScript代码可以嵌入HTML文档,并用HTML的标签括起来。
JavaScript有自己的一套语法规则,需要按照特定的方式编写。JavaScript与HTML是两码事,但却
能在自身的语句中包含HTML内容。我们会在以后的讨论中进一步解释这些内容。
JavaScript不能用来读写客户端机器上的文件,写入cookie除外(详见第16章)。不能用
JavaScript来向服务器写入或者存储文件。JavaScript也不能用来打开或者关闭其他应用程序的窗
口。此外JavaScript还不能读取其他服务器发来的Web页面。
JavaScript是基于对象的,但并不严格地面向对象。这是由于它不像Java和C++一样,支持继
承和类这样传统的面向对象机制。同时Java和C++中的private、protected、public也不能应用于
JavaScript的方法上。
JavaScript不是唯一一种可以嵌入到应用程序中的语言。拿微软开发的VBScript来说,它同
JavaScript很类似,但是也嵌入到了微软的Internet Explorer中。
1.3 JavaScript 的用处
JavaScript程序被用来侦测和响应来自用户的事件,例如鼠标移到超链接或者图片之上等。这
些用户事件可以通过辅助导航、滚动消息和翻转、对话框、动态图像等方式来优化Web站点。有
了JavaScript,还可以在页面解析的同时动态控制页面的显示效果。在没有任何网络数据传输的情
况下,可以在表单提交至服务器之前就对用户所填内容进行验证。JavaScript还可用来检测用户的
1.4 JavaScript 及其在 Web 页面中的位置 5
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
浏览器是否装有插件,并在必要的情况下将用户引导至新的页面来获取插件。JavaScript拥有字符
串函数,支持正则表达式,可以此来检测电子邮件地址、社会保障号码、信用卡数据等的有效性。
JavaScript是一种编程语言,其核心语言描述了变量、数据类型、循环控制、if/else语句、switch
语句、函数和对象等的基本结构①。JavaScript可用来进行算术计算,操作日期和时间,并与数组、
字符串和对象协同操作等。JavaScript处理用户发起的事件、设置计时器、动态更改内容和样式。
JavaScript还能读写cookie值,并基于cookie值动态生成HTML。
1.4 JavaScript 及其在 Web 页面中的位置
分析图
1. 角色
图1-2中的角色是Web页面整个生命周期中所涉及的如下应用。
(1) 浏览器(Firefox、Internet Explorer、Safari、Opera)。这是执行JavaScript的地方。
(2) 网络(HTTP)。
(3) 服务器(Apache、Windows IIS、Zeus)。
(4) 服务器模块(PHP、ASP.NET、ColdFusion、Java servlet)。
(5) 外部文件以及/或者数据库(MySQL、Oracl、Sybase)。
2. 步骤
图1-2展示了一个Web页面从客户端发起请求到获得响应的整个生命周期。
——————————
① JavaScript语言的最新版是1.8.1。Mozilla公司和微软公司均提供支持。
6 第 1 章 JavaScript 简介
图1-2 一个典型Web页面的生命周期
(1) 在图的左侧,我们看到请求是从客户端或者说浏览器发起的。用户通过在浏览器的URL
地址栏中输入Web站点的地址来发起请求。“ 请求” 是通过HTTP(Hypertext Transfer Protocol,
超文本传输协议)提交至服务器的。另一侧的Web服务器作出响应,简单地将文件返回给客户
端浏览器。接着浏览器就会提取HTML标签,格式化页面并显示,然后等待另一个请求。如果
页面包含JavaScript标签,那么JavaScript解释器就会基于用户触发的事件来执行这些代码,这
些事件包括单击按钮、将鼠标移动到超链接或者图片上、提交表单等。正是有了JavaScript,
页面才具备了交互性。JavaScript检测所有在页面上发生的事件,并进行响应。它可以对表单
填写、反馈、动画、幻灯片放映和多媒体等进行处理。能响应按键、图片鼠标悬停、用户提
交表单等事件。JavaScript可以读取cookie并验证数据。可以动态修改HTML表格的某单元格,
修改某段落中的文字,或者为某个列表增加一行可选项。不过不是所有的事情JavaScript都能
胜任。它不能关闭其他程序打开的窗口,不能查询数据库,不能更新上传文件控件的值,也
不能对服务器端的文件进行写操作。在JavaScript解释器完成了自己的任务后,页面就完全显
客户端
服务器获取网页
联网
服务器
数据库
此处显示网页
1.5 Ajax 是什么 7
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
示出来了,此时便可再一次发起请求。在浏览器和服务器之间的往返被称作请求/响应循环,
是Web运转的基础。
(2) 在客户端和服务器端之间的云代表网络。这个网络可以像包含数万亿台电脑的Internet一
样非常巨大,也可以像一个公司的局域网一样小,还可以是一台个人台式电脑或者手持设备的无
线网络。用户不必关心网络的大小——这对用户是透明的。客户端同服务器传送文件的协议被称
作HTTP协议。
(3) 服务器端包括支持HTTP协议的Web服务器,例如Apache,微软公司的IIS和lighttpd①等。
Web服务器通常既能接收基于Web的请求,也能进行相应的响应,是一种泛型程序。在大多数情
况下,所谓的响应仅仅是从服务器本地文件系统中获取某个文件。对于动态Web页面而言,需
要处理很多JavaScript所不能胜任的工作,例如处理网页表单中的内容,发送电子邮件,启动一
个会话(session)或者是连接数据库等。这些事件都要在服务器端完成,Web服务器把查询请求
转发给对应的助手程序来处理。像Apache、IIS等Web服务器都有一组助手应用程序来处理各种
语言。助手程序有CGI/Perl脚本编译器之类的外部程序,也有ColdFusion, ASP.NET和PHP脚本
处理器等这种内嵌在服务器中的应用。举个例子,如果Web服务器收到一个PHP的请求,会先
查找哪个助手程序是用来处理PHP请求的,然后把请求转发给PHP模块,最后等待这个模块返回
结果。
1.5 Ajax 是什么
Ajax是Asny chronous JavaScript and XML(异步JavaScript和XML)的缩写形式,这种说法是
在2005年由Jesse James Garrett首创的。Ajax并不新鲜,早在1996年就有了。Ajax用来在无需等待
服务器端响应的情况下创建快速的交互。在图1-2的Web生命周期中可以看到,浏览器向服务器发
出了一项请求,然后等待响应。通常会在地址栏上显示一个转动着的轮子形状的载入图标,提醒
用户页面正在加载。在用户等待的同时,浏览器也在一起等待,然后等到每个请求序列都完成后,
还要继续等待整个页面全部重新加载一次才能看到新页面的内容。Ajax可以在无需刷新整个页面
的情况下实现数据在浏览器和服务器间的传送,页面中只有一部分内容被替换掉。即使用户在
进行滚动、缩放、填写表单等操作的同时,请求照样可以发出。由于交互是异步的,所以请求会
无需任何等待时间而得到最快速的响应。Ajax的应用实例有很多,如Ajax Stock Qutos Ticker
(SentoSoft LTD)、Flickr的图片存储和显示、Gmail、Google Suggest等,而最棒的一个例子莫过
于maps.google.com上的Google Maps了(见图1-3)。
——————————
① Lighttpd是众多OpenSource轻量级的Web服务器中较为优秀的一个。——译者注
8 第 1 章 JavaScript 简介
在浏览Google Maps网站的时候,用户会感受到完整而快速的交互性。用户可以对地图进行
放大、缩小、随意拖动,在地图上获取两点间的位置信息、观察地形、查看交通状况、浏览卫星
图片等。在第18章我们会详细讨论这种技术的实现细节,不过暂时我们可以将它视为增强型的
JavaScript。
图1-3 Google使用Ajax进行交互(©2010 Google)
1.6 JavaScript 是什么样子的
示例1-1演示了一小段JavaScript代码。在Web页面上显示简单的HTML表格单元格,其中有一
条滚动消息(见图1-4)。没有JavaScript的话,这段消息就是静态的。而有了JavaScript以后,消息
会持续不断地沿着屏幕滚动,为死气沉沉的页面带来了生机。以后我们会详细解释这段代码,在
这里,只是用来告诉大家JavaScript代码是什么样子。注意<script></script>这两个加粗了的
1.6 JavaScript 是什么样子的 9
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
标签,在这两个标签中间就是能产生滚动效果的JavaScript代码。不用多久,我们就能看懂并编写
这类脚本了。
示例1-1
图1-4 JavaScript生成了滚动文字(示例1-1的输出效果)
这就是JavaScript。耐心点,不用多久你就能写出比这更好的代码了
10 第 1 章 JavaScript 简介
1.7 JavaScript 及其在 Web 开发中承担的角色
在开始学习JavaScript以后,我们会把JavaScript直接嵌入到HTML页面中。我们了解了核心编
程架构以后,就会明白页面是如何通过文档对象模型(DOM)来进行组织的,同时也会知道为
何JavaScript能够访问到页面中的所有元素。最后我们还会介绍层叠样式表(CSS),这是一种能
让开发人员通过格式化展现方式实现页面设计的技术。HTML、CSS和JavaScript三者结合,可以
让开发人员制作出结构化、样式化和交互性的Web页面。随着开发人员知识的不断增长,开发出
来的Web页面也在成长,直到有一天可以创建出更多的页面并将它们链接到一起。届时开发人员
还必须确保不论访客在使用什么浏览器,都会得到一个好的用户体验,同时试着在幕后对站点进
行管理。从这些角度来看,Web设计者已经认可的Web页面有三个基础:内容、内容展现的方式
和内容的处理逻辑。
三层
当Web页面在客户端(浏览器)进行设计的时候,很可能先是一份简单的HTML静态页面。
随后设计师会添加一些样式,让其视觉上拥有漂亮的外观。最后为了让页面显得生动,就需要添
加JavaScript代码,实现用户的交互功能,使得页面可以完成某些操作。这样,一个完整的Web
页面可以被分成独立的三层:内容或结构层、样式或展现层、行为层(见图1-5)。每层都需要细
致的设计和娴熟的技术。设计师不一定非得会编程,反过来,程序员也没有必要一定懂设计。层
的分离使得设计师能够专注于他所擅长的领域,同时程序员可以在JavaScript应用中调试代码而不
用担心打乱了页面设计。当然层与层之间的界线往往很模糊,不过从行为中分离内容结构和样式,
1.7 JavaScript 及其在 Web 开发中承担的角色 11
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
可以使得维护变得更简单,能减少重复性工作,甚至减少调试工作。
图1-5 组成Web页面的三层
1. 内容或结构
在Web开发中,HTML/XML标记组成了内容层,并且搭建了Web页面的结构。内容层就是访
问者到达Web页面后能看到的东西。内容包括文本或者图片,以及访问者用来在站点内导航的超
链接等。由于HTML/XML元素被用来搭建页面内容结构,因此误用了这些元素后虽然不会马上
产生视觉效果方面的问题,但是在应用CSS和JavaScript的时候情况可能就不一样了。举例来说,
打乱heading的顺序引发字体大小的变化,先是H1、H3然后才用H2标签,这就是一个不正确的顺
序。这些标签旨在定义页面显示的结构。浏览器将Web页面视为由对象组成的树状结构模型,在
这个模型中,每个HTML元素(例如HEAD、BODY、H1)都是一个对象。这个文档树,也就是
DOM,为我们的页面定义了逻辑分层结构,这也成为了创建动态内容的一个重要工具。正是因
JavaScript行为层
CSS样式层
HTML内容层
12 第 1 章 JavaScript 简介
为结构是如此重要,所以在进入下一层(CSS展现层)之前,有效标记应该是第一重要的。在1.12
节我们会讨论标记验证工具。
2. 样式或展现
样式或展现是指在什么样的媒体类型上页面会如何显示。这一层是由CSS定义的。没有CSS
的话,几乎所有的展现都是包含在HTML标签内的。所有的字体颜色、背景样式、元素位置和对
齐方式、边框等都必须明确标注,往往重复性很高,都包含在页面的HTML标记中。假如开发人
员决定要将页面中所有的标题设置成蓝色,那么必须逐一去设置页面中的标题。CSS的出现改变
了这种状况。设计师通过CSS可以将展现类的内容分离出来,单独保存为样式表,从而使得HTML
标签大大简化了。有了CSS以后,在一处修改字体颜色就可以影响到站点中的所有页面。尽管样
式代码可以嵌入页面中,不过最常见的方式还是在独立的CSS文件中保存样式代码,以便进行统
一的样式更改。通过一份CSS文件,即可控制任意多份页面的样式。使用外部样式表的方式可以
为页面瘦身,减少代码量,并且可以让开发人员在不影响HTML内容的情况下对整个页面进行样
式修正。此外,CSS还可以同JavaScript和DOM协作,创建动态展现内容,也就是DHTML。
3. 行为
行为层是指能让页面执行一些动作的层。对于大部分Web页面来说,行为的第一层是
JavaScript。JavaScript可以基于用户交互来动态控制Web页面的元素,这些用户交互包括敲击键盘、
移动鼠标、提交表单等。JavaScript还便于进行在线样式变更。虽然传统意义上CSS和JavaScript
是分离的两层,但有了DOM之后,这两者紧密协作,之间的界线也越来越模糊。JavaScript代码
1.8 JavaScript 和事件 13
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
也通常保存在外部文件中,这些外部文件被放在库中,便于其他程序共享访问。可参考
http://JavaScriptlibraries.com/。
4. 不唐突的JavaScript
“ 确保你使用的是不唐突的JavaScript。” 在真正开始使用JavaScript后开发人员可能会听人提
到这句话,它指的是我们刚才讨论的三层结构。JavaScript代码放置在自己的文件中,而
HTML/XHTML/XML和CSS也分别保留在它们相应的文件中,通过这种技巧就可以将JavaScript
从Web开发的其他两层中彻底分离出来。在接下来的章节中,我们会把大部分的JavaScript示例代
码同HTML文档放在一份文件中,这是因为这些文件都比较小,而且我们的目的在于演示
JavaScript语言的某个方面。所以在学习之初,我们用的是“ 唐突的” JavaScript。
在有了JavaScript基础并开始开发大型应用的时候,开发人员可能会想更全面地对此进行了
解 。 对 于 不 唐 突 的 JavaScript 的 七 条 规 则 , 可 以 参 考 http://icant.co.uk/articles/seven-rules-of-
unobtrusive-JavaScript/。
1.8 JavaScript 和事件
HTML是静态的,它组织和定义了在浏览器中Web页面的元素会如何呈现。例如,HTML可
以用来创建按钮、表格、文本框以及填写表单,却无法对用户的输入作出响应。而JavaScript是动
态的,它可以异步响应用户触发的事件。例如,用户填写完表单,单击按钮、链接或图片,或者
将鼠标移动到超链接上的时候,JavaScript可以分别作出响应,并与用户产生动态交互。JavaScript
14 第 1 章 JavaScript 简介
可以在信息提交至服务器之前检查用户输入并进行验证,也可以在鼠标移至超链接或单击按钮的
时候显示一幅新图片,还可以改变页面上对象的位置,甚至在线添加、删除、修改HTML元素。
这些事件会在第13章进行详细的讨论。但在学习JavaScript之初,开发人员就应该对这些事件给予
足够重视,因为这是JavaScript的基础,而且在以后的示例代码中都会用到它们。
最简单的事件形式是跟HTML紧密结合的。在下面这个例子中,用<form>标签和相关属性
创建了HTML表单。同type和value属性类似,JavaScript的onClick事件处理函数也是HTML
<form>标签的一个属性。输入字段的类型是button,为其赋值为Pinch me。当用户在浏览器
窗口中单击此按钮的时候,会触发名为click的JavaScript事件。为onClick事件处理函数赋
的值就是在单击按钮以后要执行的命令。在我们的例子中,会弹出一个显示“ OUCH!!” 的小窗
口。示例1-2的输出效果见图1-6和图1-7。
示例1-2
图1-6 用户单击按钮,触发单击事件
1.9 标准化 JavaScript 和 W3C 15
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
图1-7 单击Pinch me按钮后,触发了onClick事件处理函数
表1-1列出了一些JavaScript能够处理的事件。
表1-1 JavaScript事件处理函数
事件处理函数 如何触发
onAbort 终止了图片加载
onBlur 用户移出了某表单元素
onChange 用户修改了表单元素的值
onClick 用户单击了类似按钮的表单元素
onError 程序在加载图片的时候出现错误
onFocus 用户激活了某表单元素
onLoad 页面加载完毕
onMouseOut 鼠标从某对象上移出了
onMouseOver 鼠标移动到某对象上
onSubmit 用户提交表单
onUnLoad 用户离开了窗口或框架页
1.9 标准化 JavaScript 和 W3C
ECMAScript的另一个名字更被人熟知,那就是JavaScriptTM。它不仅是各个Web浏览器的核
心组件,也是促使万维网的应用具备可交互性的核心标准之一。
——Ecma International
20世纪90年代,微软的Internet Explorer和Netscape一直在浏览器市场争夺统治地位。它们以
16 第 1 章 JavaScript 简介
非常快的速度往各自的浏览器中添加新特性和专有功能,进而导致了两者的不兼容性,往往同一
个页面在两种浏览器中的显示效果是不同的。这段浏览器战争时代最终以微软Internet Explorer
的胜利宣告结束。现在,主流浏览器之间看起来相对比较和平,原因是W3C(World Wide Web
Consortium,万维网联盟)设立了一些标准,只有遵循这些标准的浏览器才能称为合格的浏览器。
为了确保Web页面开发商所遵循的JavaScript标准只有同一个版本,ECMA (European
Computer Manufacturer Association,欧洲计算机制造商协会①)同Netscape合作发布了JavaScript
的国际标准——ECMAScript。ECMAScript基于核心的JavaScript,在所有支持标准的应用中都能
保持一致。ECMA标准的第一版被纳入了ECMA-262规范中。不论是JavaScript(Mozilla公司版本)
还是JScript(微软公司专门为Internet Explorer设计的版本)都是ECMAScript的超集,虽然两者
都有各自的一些特性,但都在努力做好与ECMA的兼容性②。在ECMAScript发布后,W3C开始
致力于DOM标准化,也就是熟知的DOM 1,并在1998年末推荐使用。DOM 2发布于2000年末。
而最近的DOM规范是在2004年4月发布的。到了2005年绝大部分W3C DOM都已被常见的支持
ECMAScript的浏览器支持了。其中包括微软的Internet Explorer 6(2001)、基于Gecko的浏览器
(如Mozilla Firefox和Camino)、Konqueror、Opera和Safari。事实上95%的主流浏览器都支持DOM
规范。
最新的ECMA-252第5版规范的信息可以从http://www.ecmascript.org/获取到。
——————————
① 欧洲计算机制造商协会是ECMA1994年之前的名称,由于其国际性,现在一般直接说Ecma国际。——编者注
② ECMAScript第5版添加了一些新特性,现已具备使用和测试条件了(2009)。
1.9 标准化 JavaScript 和 W3C 17
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
1.9.1 JavaScript 对象
与JavaScript相关的所有事情都涉及对象,就像在现实生活中要做什么事情都离不开物品一
样。在JavaScript看来,Web页面就是很多不同类型的对象,有浏览器对象、页面对象,每个页面
的元素也都是一种对象,例如表单、图片、链接等。事实上页面中的所有HTML元素(H1、P、
TD、FORM和HREF)都可被看作对象。JavaScript有一组内置的核心对象,通过它可以操作字符
串、数字、函数、日期等。JavaScript还允许用户自己创建对象。当看到以下的代码
document.write("Hello, world");
时,当前页面就是document对象。对象后面有一个点将对象和write方法分开。方法就是一种
函数,通过它可以操作对象。方法后面一般带有一组括号,括号中可能包含参数也可能为空。在
这个简单的例子中,括号中包含的是“ Hello, world” 字符串,用来告诉JavaScript将这个字符串
写到页面窗口上,即浏览器中。在第8章我们会详细讨论对象的细节。因为所有的东西在JavaScript
中都被当做是对象,所以在学习之初理解这些概念是非常重要的。
1.9.2 文档对象模型
什么是DOM?DOM就是一个由HTML/XML组成的基本Web文档。浏览器的任务就是把这些
标记转换成Web页面,以便用户能在浏览器窗口中看到文本、输入框、图片、表格等信息。解析
HTML页面并保存为模型也是浏览器的一项工作,这种模型就叫做DOM。它跟家族树的结构很类
似,由父节点、子节点、兄弟节点等组成。树中的每个元素都同其他元素有关联。这些元素被称
为节点,最基本的父节点位于树顶。有了这样一种自上而下的树状模型,文档的各个元素便可被
18 第 1 章 JavaScript 简介
JavaScript访问(也可被其他应用访问)。JavaScript程序便因此具备了控制整个Web页面的能力。
这些能力包括导航、创建、添加、修改或者动态删除元素及相关内容。
之前我们提到过,在DOM 1①(见http://www.w3.org/DOM)中,W3C开发的应用程序接口(API)
标准已被所有主流浏览器支持,包括微软的Internet Explorer 6(2001)、基于Gecko的浏览器(如
Mozilla Firefox和Camino)、Konqueror、Opera和Safari。
在学习了JavaScript的基础之后,开发人员将会看到如何创建和操作对象、如何使用核心对象,
以及如何基于DOM使用JavaScript来控制整个Web页面。有了CSS、DOM和JavaScript,开发人员
可以动态地更改页面元素位置、绘制动画、创建滚动信息、基于用户事件使用漂亮的字体和颜色
改变页面风格,这些用户事件包括鼠标移动到一幅图片或超链接上、单击某个图标、提交填写完
的表单,或者仅仅是打开和关闭新窗口。图1-8显示的是一个HTML表格,从中我们可以看到它是
如何像W3C描述的那样将页面转化为了一棵树,其中每个元素都同它的父节点和兄弟节点相连。
——————————
① DOM Level 2和3也都已由W3C开发完成,但是绝大部分浏览器都支持DOM Level 1。
1.10 关于浏览器 19
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
图1-8 http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
1.10 关于浏览器
当用户收到包含JavaScript的页面时,脚本会被发送至JavaScript解释器,在翻译器中执行脚本。
因为每种浏览器都有自己的解释器,所以代码如何执行往往也存在差别。同时浏览器厂商间的竞
争以及对各自旗下浏览器的修改升级,通常会引发新的不兼容性。不仅仅是不同类型的浏览器会
不兼容,即使是同一个的浏览器的不同版本也会存在这样的现象。因为主流浏览器融入了W3C标
准,所以相对以前,这种不一致的现象有逐渐减少的趋势。表1-2列出了现今的主流浏览器。
示例表格的DOM图形化表示如下所示。
示例表格的DOM图形化表示
20 第 1 章 JavaScript 简介
表1-2 主流浏览器
浏 览 器 网 站
Internet Explorer microsoft.com/windows/ie
Firefox mozilla.org/products/firefox
Safari apple.com/safari
Opera opera.com
Google Chrome google.com/chrome
Konqueror konqueror.org/
通过示例1-3的这小段代码就可以识别用户使用的是何种浏览器。尽管应用的名字可能会把
Firefox显示成Netscape,把Opera显示成Microsoft Internet Explorer,不过检查客户端的话,可以在
输出字符串中找到Firefox或者Opera(见图1-9)。用于检测浏览器类型的程序被称为浏览器探测
器。在第10章我们会有一个完整的示例。
示例1-3
1.10 关于浏览器 21
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
图1-9 示例1-3的输出
1.10.1 JavaScript 的版本
JavaScript也有历史。先由Netscape发明,第一个版本是JavaScript 1.0。这门新语言的第1版有
很多问题,存在了相当长的一段时间后才被更简洁的版本替代。微软公司也有一个与JavaScript
相当的脚本语言,叫做JScript。表1-3列出了JavaScript和JScript的各种版本。关于JavaScript的版
本和开发可参见http://ejohn.org/blog/versions-of-JavaScript/。
表1-3 JavaScript版本
JavaScript或者JScript版本 支持的浏览器
JavaScript 1.0(1996) Netscape Navigator 2.0、Internet Explorer 3.0
JavaScript 1.1(1996) Netscape Navigator 3.0、Internet Explorer 4.0
JavaScript 1.2(1997) Netscape Navigator 4.0-4.05、Internet Explorer 4.0
JavaScript 1.3(1998) ECMA-232、Netscape Navigator 4.06-4.7x、Internet Explorer 5.0
JavaScript 1.5(2000) ECMA-232、Netscape Navigator 6.0+,Mozilla Firefox、Internet
Explorer 5.5+, JScript 5.5、5.6、5.7、6
JavaScript 1.6(2006) Mozilla Firefox、Safari
JavaScript 1.7(2006) Mozilla Firefox、Safari、Google Chrome
JavaScript 1.8(2008) Mozilla Firefox
注:FireFox、Internet Explorer、Opera以及这些浏览器的新版本都支持JavaScript。此外HotJava 3也提供对JavaScript的支
持,此外还有Mac下的iCab、WebTV、OS X下的OmniWeb、QNX Voyager和Linux KDE环境下的Konqueror、NetBox
22 第 1 章 JavaScript 简介
for TV、AWeb和Voyager 3 for Amiga、SEGA Dreamcast和RISC OS下的ANT Fresco。
那么现在JavaScript发展到什么程度了?2009年12月,ECMA-262标准发布第5版。虽然
JavaScript只是ECMAScript的一种方言,不过JavaScript 1.8已经可以同ECMAScript第3版相媲美
了,并且是当前应用最广泛的版本(JavaScript 1.9也可以下载了)。为弄明白 JavaScript 2
(ECMAScript版本4)的一些提案,几年前Brendan Eich(JavaScript的发明者)在Web上发布了一
篇有意思的文章。不管怎么说,这篇文章指出了JavaScript语言当前状态下的优势和劣势,以及试
图去改变它会面临的障碍(见图1-10)。
图1-10 JavaScript 2及其网站,Brendan Eich的信息文件
1.10.2 你的浏览器遵循标准吗
现在主流的浏览器使用的是JavaScript 1.5及更高版本,这些版本的JavaScript都普遍遵循W3C
的标准。示例1-4的代码可以用来检测用户所使用的JavaScript是否是遵循DOM标准的主流版本
1.10 关于浏览器 23
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
(见图1-11)。getElementById和createTextNode都是W3C标准的一部分,为DOM提供支持。
示例1-4
图1-11 Internet Explorer支持标准
1.10.3 浏览器是否已启用 JavaScript
要检测浏览器是否启用了JavaScript,在Firefox下可以去目录Tools menu/Options/Content查看。
如果用户使用的是Safari浏览器,则选择menu/Preferences/Security。对于Internet Explorer,选择Tools
menu/Internet Options/Security/CustomLevel,去启用脚本(见图1-12)。如果是Opera,选择menu/
Preferences/Advanced/Content,单击Enable JavaScript。有一种简便的方法可以快速检测浏览器是否
启用了JavaScript,那就是访问http://www.mistered.us/test/alert.shtml并按提示操作(见图1-13)。
24 第 1 章 JavaScript 简介
图1-12 在Internet Explorer中启用JavaScript
图1-13 你的浏览器启用JavaScript了吗
1.11 JavaScript 代码放在哪儿
在学习JavaScript之前,开发人员应该具备一些基本的HTML知识,知道如何创建HTML文档。
虽然你并不需要是HTML的专家,但起码应该了解HTML的文档结构,会利用各种标签来将各种
1.11 JavaScript 代码放在哪儿 25
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
各样的内容显示 在浏览 器上。生成 HTML文档 后 ,再添加 JavaScript 代码就 非常简单了 。
(http://www.w3schools.com上有非常棒的教程。)而对于CSS,本书拿出了一章的篇幅来讲解。有
了CSS,就可以通过改变字体、颜色、背景、外边距等方式,仅仅用一个文件就能控制整个Web
页面的布局和样式。Web站点可以使用HTML、CSS和JavaScript来分别控制结构、样式和行为。
客户端的JavaScript代码是嵌入到HTML文档中的,代码可以放置在HTML的<head>和
</head>标签之间,也可以放置在<body>和</body>之间。很多开发人员倾向于将JavaScript代
码放在<head>标签里面,在后面会看到,有时候<head>标签中间是最适合放置函数定义和对象
的地方。如果开发人员希望在页面的特定部位显示一段文本,那就可能要把JavaScript代码放在
<body>标签里面(示例1-5所示)。否则页面上会出现多段脚本代码,而且在<head>和<body>
两种标签里面都得放置JavaScript代码。不管放在哪里,JavaScript代码都是以<script>标签开始,
以</script>结束的。如果JavaScript代码又长又复杂,或者有可能被多个页面共享使用,那么
就应该将它放置在一个独立的外部文件中(.js的文本文件),然后在页面中进行加载。实际上,
从一开始编写带有 JavaScript的Web页面时,就应该为每个实体创建单独的文件,以养成
HTML/CSS内容跟程序逻辑(JavaScript)分离的习惯。
当浏览器显示某个页面的时候,会从上到下逐行读取HTML代码,然后处理并显示。遇到
JavaScript代码时,就会通过JavaScript解释器来读取和执行,直到JavaScript代码结束。然后继续
解析和显示HTML,到页面结束为止。
示例1-5
26 第 1 章 JavaScript 简介
解释
1. doctype 声明用来告诉 Web 浏览器这个页面会用哪种标记语言,应该放在 HTML 文档的第一行。而
且在 XHTML 文档中,doctype 声明是必不可少的。doctype 的声明指向一种 DTD(Document Type
Definition,文档类型定义)。DTD 指定了标记语言的规则,这样浏览器就能正确显示页面内容了。
这个例子中的页面被声明为 HTML 4.01 Strict。HTML 4.01 Strict 是 HTML 4.01 的一种版本,在结
构语义和表现两者之间,它更注重结构语义。HTML 4 Strict 不支持弃用的元素和属性、框架和链
接目标。在本书的大部分例子中,为了节省篇幅,将会省略此声明。但在实际编码的时候,可别忘
了在页面中包含 doctype 声明。
2. 这是 HTML 文档的起始标签。
3. 这是 HTML 的<head>标签。<head>标签中放置的是所有不属于页面<body>部分的元素,例如
<title>和 JavaScript。
4. <body>标签为整个页面定义了背景色和字体颜色。
5. <script>标签是 JavaScript 代码的起始标志,由文本内容和 JavaScript 代码混合组成。JavaScript
代码放置在此标签与</script>结束标签之间。JavaScript 解释器只能理解 JavaScript 代码,不理
解 HTML。
JavaScript 的 writeln 方法被 document 调用。用括号括起来的字符串被传入 JavaScript 解释器。如
果 JavaScript 解释器读到 HTML 内容,就会将其发送至 HTML 呈现器,然后这部分内容就会在浏
览器中显示出来。在遇到 JavaScript 的结束标签后,HTML 恢复正常的解析和展现。
6. 这是 JavaScript 的结束标签。输出结果见图 1-14。
图1-14 示例1-5的输出,JavaScript已经被嵌入页面中
7. 继续输出页面 body 中的标签和文本。
1.11 JavaScript 代码放在哪儿 27
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
8. 页面 body 部分到此结束。
9. 这是 HTML 页面的结束标签。
外部文件形式的 JavaScript
如果脚本比较长或者需要被多个页面共享使用,那么通常会被放在一个外部文件中,与
HTML页面分离开。在实际的Web站点开发中,保持JavaScript和HTML或者CSS文件的分离(参
见1.7.1节)是非常重要的。这样做的好处是可以在站点的每个页面间共享一系列函数,在需要对
函数作修改时,不必逐个打开每个页面去修改,而是仅仅修改一份文件即可。JavaScript外部文件
完全由JavaScript代码构成,并保存为.js文件。在HTML页面中引入.js文件,需要在<head>标签
中使用<script>标签。在<script>标签中,只要将外部JavaScript文件的路径指定给它的src
属性即可。如果脚本文件位于其他服务器上,那么外部文件名需要包含完整的URL地址;如果位
于当前目录,则需要路径名称或只需要脚本名称即可。一个文件中可以引入多个.js脚本。
示例1-6和示例1-7虽然不长,但是可以帮助大家理解外部文件的使用方式。welcome.js脚本
包含一个JavaScript函数(参见第7章)。
示例1-6
示例1-7
这个外部文件名叫welcome.js
28 第 1 章 JavaScript 简介
解释
1. JavaScript 标签的 src 属性被赋予了一个文件名(文件名必须以.js 结尾),该文件中包含有 JavaScript
代码。文件名是 welcome.js,内有一个 JavaScript 函数。当用户单击 Welcome Me!按钮的时候,会
调用这个函数,见图 1-15。
2. JavaScript 程序到此结束。
3. 这是一个 HTML 输入按钮。当用户单击按钮时,会调用名为 welcome()的 JavaScript 函数。该函
数是在外部文件 welcome.js 中定义的。
图1-15 在单击Welcome Me!按钮之后,位于外部文件中的函数被调用了
如图1-16所示,Pearson Education使用了很多外部JavaScript文件(.js)来搭建他们的Web
站点。
1.12 验证标签 29
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
图1-16 使用外部JavaScript文件浏览Web页面的源代码
1.12 验证标签
JavaScript代码并非独立存在,而是同HTML/XHTML以及CSS集成在一起的。因此找一个验
证工具来检测标签是否正确是非常重要的。特别是在融入DOM和W3C标准之后,这种验证工具
的重要性就尤为突出了。网上有很多工具可以辅助开发人员确保标签的正确性。
1.12.1 W3C 验证工具
W3C的验证工具如图1-17所示。该工具支持通过URL、上传文件或者直接输入的方式进行检
测。W3C验证工具支持HTML、XHTML、SMIL、MathML等格式的Web文档的标签验证,但是
要评估诸如RSS/Atom反馈或者CSS样式表、MobileOK等特定的内容,或者查找死链接的话,还
有其他的验证工具可用。
30 第 1 章 JavaScript 简介
图1-17 一份HTML页面的W3C标签验证
1.12.2 Validome 验证工具
Validome(www.validome.org)是另一款出色的在线页面及XHTML文档验证工具。打开
Validome的网页,选择输入URL地址或者从本地硬盘上传文件。然后单击Validate即可(见图
1-18)。
1.13 应知应会 31
1
2
3
4
5
8
10
18
12
9
13
14
11
6
7
15
17
16
图1-18 Validome验证工具
1.13 应知应会
本章介绍了JavaScript编程语言,它的发展历史,在Web开发中的重要性,以及如何与Web页
面集成。在深入学习之前,应该了解如下内容。
(1) 编译语言同脚本语言的区别。
(2) JavaScript在何处定义,客户端还是服务器端。
(3) JavaScript用来干什么。
32 第 1 章 JavaScript 简介
(4) JavaScript如何让页面具有可交互性。
(5) JavaScript程序保存在什么地方。
(6) JavaScript程序大致是什么样子的。
(7) Ajax用来干什么,以及它的使用示例。
(8) W3C代表什么。
(9) 为什么要将DOM标准化。
(10) 不唐突的JavaScript是什么意思。
(11) 网上哪儿可以找到好的HTML教程。
练 习
1. 描述一个 Web 页面的生命周期。
2. 你使用的是哪种浏览器,什么版本,你是如何知道的?
3. 举一个 JavaScript 事件处理器的例子,将示例 1-2 复制到你的编辑器中,并在浏览器中查看运行
结果。
4. JavaScript 和 JScript 的区别是什么?
5. 在 HTML 页面中,JavaScript 标签应该放在哪儿?JavaScript 识别 HTML 吗?
6. 什么是 DOM?
7. 解释 Web 页面的三层。
8. 如何以外部文件方式引用 JavaScript?
9. 编写一段 JavaScript 程序,以大号蓝色字体打印欢迎消息。检测是否已启用 JavaScript。添加注释
说明编程思路。