JavaScript 入门


第 1 章 JavaScript 语言概述 JavaScript 是目前 Web 应用程序开发者使用最为广泛的客户端脚本编程语言,它不仅可 用来开发交互式的 Web 页面,更重要的是它将 HTML、XML 和 Java applet、flash 等功能强 大的 Web 对象有机结合起来,使开发人员能快捷生成 Internet 或 Intranet 上使用的分布式应 用程序。另外由于 Windows 对其最为完善的支持并提供二次开发的接口来访问操作系统各 组件并实施相应的管理功能,JavaScript 成为继.bat(批处理文件)以来 Windows 系统里使用最 为广泛的脚本语言。 1.1 JavaScript 是什么 应用程序开发者在学习一门新语言之前,兴趣肯定聚焦在诸如“它是什么”、“它能做什 么”等问题而不是“如何开发”等问题上面。同样,学习 JavaScript 脚本,首先来揭开 JavaScript 脚本的面纱:“JavaScript 是什么?” 1.1.1 JavaScript 简史 二十世纪 90 年代中期,大部分因特网用户使用 28.8kbit/s 的 Modem 连接到网络进行网 上冲浪,为解决网页功能简单的问题,HTML 文档已经变得越来越复杂和庞大,更让用户 痛苦的是,为验证一个表单的有效性,客户端必须与服务器端进行多次的数据交互。难以想 象这样的情景:当用户填完表单单击鼠标提交后,经过漫长的几十秒等待,服务器端返回的 不是“提交成功”的喜悦却是“某某字段必须为阿拉伯数字,请单击按钮返回上一页面重新 填写表单!”的错误提示!当时业界已经开始考虑开发一种客户端脚本语言来处理诸如验证 表单合法性等简单而实用的问题。 1995 年 Netscape 公司和 Sun 公司联合开发出 JavaScript 脚本语言,并在其 Netscape Navigator 2 中实现了 JavaScript 脚本规范的第一个版本即 JavaScript 1.0 版,不久就显示了其 强大的生机和发展潜力。由于当时 Netscape Navigator 主宰着 Web 浏览器市场,而 Microsoft 的 IE 则扮演追赶者的角色,为了跟上 Netscape 步伐,Microsoft 在其 Internet Explorer 3 中以 JScript 为名发布了一个 JavaScript 的克隆版本 JScript 1.0。 1997 年,为了避免无序竞争,同时解决 JavaScript 几个版本语法、特性等方面的混乱, JavaScript 1.1 作为草案提交给 ECMA(欧洲计算机厂商协会),并由 Netscape、Sun、Microsoft、 Borland 及其它一些对脚本语言比较感兴趣的公司组成的 TC39(第 39 技术委员会:以下简 称 TC39)协商并推出了 ECMA-262 规范版本,其定义了以 JavaScript 为蓝本、全新的 ECMAScript 脚本语言。 ECMA-262 标准 Edition 1 删除了 JavaScript 1.1 中与浏览器相关的部分,同时要求对象 是平台无关的并且支持 Unicode 标准。 在接下来的几年,ISO/IEC(估计标准化组织/国际电工委员会)采纳 ECMAScript 作为 Web 脚本语言标准(ISO/IEC-16262)。从此,ECMAScript 作为 JavaScript 脚本的基础开始 得到越来越多的浏览器厂商在不同程度上支持。 为了与ISO/IEC-16262 标准严格一致,ECMA-262 标准发布Edition2,此版本并没有添加、 更改和删除内容。ECMA-262 标准Edition 3 提供了对字符串处理、错误定义和数值输出等方 面的更新,同时增加了对try…catch异常处理、正则表达式、新的控制语句等方面的完美支 持,它标志着ECMAScript成为一门真正的编程语言,以ECMAScript为核心的JavaScript脚本 语言得到了迅猛的发展。ECMA-262 标准Edition 4 正在制定过程中,可能明确的类的定义方 法和命名空间等概念。表 1.1 是ECMA-262 标准四个版本之间的异同及浏览器支持情况。 表 1.1 ECMA-262 标准各版本间异同及浏览器支持情况 ECMA版本 特性 浏览器支持 Edition 1 删除了JavaScript 1.1中与浏览器相关的部分,同时 要求对象是平台无关的并且支持Unicode标准 Netscape Navigators 4(.06版)、 Internet Explorer 5 Edition 2 提供与ISO/IEC-16262标准的严格一致 Opera 6.0-7.1 Edition 3 提供了对字符串处理、错误定义和数值输出等方面 的更新,同时增加了对try…catch异常处理、正则表 达式、新的控制语句等方面的完美支持 Internet Explorer 5.5+、Netscape Navigators 6.0+、Opera 7.2+、 Safari 1.0+ Edition 4* 可能明确的类的定义方法和命名空间等概念 未知(此版本正在制订过程中) 1999 年 6 月 ECMA 发布 ECMA-290 标准,其主要添加用 ECMAScript 来开发可复用组 件的内容。 2005 年 12 月 ECMA 发布 ECMA-357 标准(ISO/IEC 22537)出台,主要增加对扩展标 记语言 XML 的有效支持。 注意:JavaScript 脚本也能进行服务器端应用程序的开发,但相对于客户端的功能和应用范围而言,一般 仍将其作为一门客户端脚本语言对待,后面有专门章节讲述服务器端 JavaScript 脚本。 对 JavaScript 历史的了解有助于开发者迅速掌握这门语言,同时也能加深对 JavaScript 语言潜力的理解。下面介绍其语言特点。 1.1.2 JavaScript 有何特点 JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,主要用于 创建具有交互性较强的动态页面。主要具有如下特点: z 基于对象:JavaScript 是基于对象的脚本编程语言,能通过 DOM(文档结构模型) 及自身提供的对象及操作方法来实现所需的功能。 z 事件驱动:JavaScript 采用事件驱动方式,能响应键盘事件、鼠标事件及浏览器窗 口事件等,并执行指定的操作。 z 解释性语言:JavaScript 是一种解释性脚本语言,无需专门编译器编译,而是在嵌 入 JavaScript 脚本的 HTML 文档载入时被浏览器逐行地解释,大量节省客户端与服 务器端进行数据交互的时间。 z 实时性:JavaScript 事件处理是实时的,无须经服务器就可以直接对客户端的事件 做出响应,并用处理结果实时更新目标页面。 z 动态性:JavaScript 提供简单高效的语言流程,灵活处理对象的各种方法和属性, 同时及时响应文档页面事件,实现页面的交互性和动态性。 z 跨平台:JavaScript 脚本的正确运行依赖于浏览器,而与具体的操作系统无关。只 要客户端装有支持 JavaScript 脚本的浏览器,JavaScript 脚本运行结果就能正确反 映在客户端浏览器平台上。 z 开发使用简单:JavaScript 基本结构类似 C 语言,采用小程序段的方式编程,并提 供了简易的开发平台和便捷的开发流程,就可以嵌入到 HTML 文档中供浏览器解 释执行。同时 JavaScript 的变量类型是弱类型,使用不严格。 z 相对安全性:JavaScript 是客户端脚本,通过浏览器解释执行。它不允许访问本地 的硬盘,并且不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只 能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失。 综上所述,JavaScript 是一种有较强生命力和发展潜力的脚本描述语言,它可以被直接 嵌入到 HTML 文档中,供浏览器解释执行,直接响应客户端事件如验证数据表单合法性, 并调用相应的处理方法,迅速返回处理结果并更新页面,实现 Web 交互性和动态的要求, 同时将大部分的工作交给客户端处理,将 Web 服务器的资源消耗降到最低。 注意:之所以说相对安全性,是因为 JavaScript 代码嵌入到 HTML 页面中,在客户端浏览该页面过程中, 浏览器自动解释执行该代码,且不需要用户的任何操作,给用户带来额外的执行恶意代码的风险。 1.1.3 JavaScript 能做什么 JavaScript 脚本语言由于其效率高、功能强大等特点,在表单数据合法性验证、网页特 效、交互式菜单、动态页面、数值计算等方面获得广泛的应用,甚至出现了完全使用 JavaScript 编写的基于 Web 浏览器的类 Unix 操作系统 JS/UIX 和无需安装即可使用的中文输入法程序 JustInput,可见 JavaScript 脚本编程能力不容小觑!下面仅介绍 JavaScript 常用功能。 注意:JS/UIX(系统测试:http://www.masswerk.at/jsuix/,命令手册:http://www.masswerk.at/ jsuix/man.txt, 说明文档:http://www.masswerk.at/jsuix/jsuix-documentation.txt ); JustInput (官方网站 http://justinput.com/) 1.表单数据合法性验证 使用 JavaScript 脚本语言能有效验证客户端提交的表单上数据的合法性,如数据合法则 执行下一步操作,否则返回错误提示信息,如图 1.1 所示。 图 1.1 应用之一:表单数据合法性验证 2.网页特效 使用 JavaScript 脚本语言,结合 DOM 和 CSS 能创建绚丽多彩的网页特效,如火焰状闪 烁文字、文字环绕光标旋转等。火焰状闪烁文字效果如图 1.2 所示。 图 1.2 应用之二:火焰状闪烁文字特效 3.交互式菜单 使用 JavaScript 脚本可以创建具有动态效果的交互式菜单,完全可以与 falsh 制作的页 面导航菜单相媲美。如图 1.3 所示,鼠标在文档内任何位置单击,在其周围出现如下图所示 的导航菜单。 图 1.3 应用之三:动态的交互式菜单 4.动态页面 使用JavaScript脚本可以对Web 页面的所有元素对象进行访问并使用对象的方法访问并 修改其属性实现动态页面效果,其典型应用如网页版俄罗斯方块、扑克牌游戏等。如图 1.4 所示为网页版俄罗斯方块游戏。 图 1.4 应用之四:使用 JavaScript 脚本的网页版俄罗斯方块游戏 5.数值计算 JavaScript 脚本将数据类型作为对象,并提供丰富的操作方法使得 JavaScript 用于数值 计算。如图 1.5 所示为用 JavaScript 脚本编写的计算器。 图 1.5 应用之五:使用 JavaScript 脚本编写的网页版计算器 JavaScript 脚本的应用远非如此,Web 应用程序开发者能将其与 XML 有机结合,并嵌 入 Java applet 和 flash 等小插件,就能实现功能强大并集可视性、动态性和交互性于一体的 HTML 网页,吸引更多的客户来浏览该网站。 使用 DOM 所定义的文档结构,JavaScript 可用于多框架的 HTML 页面中框架之间的数 据交互。同时 Windows 提供给 JavaScript 特有的二次编程接口,客户端可以通过编写非常短 小的 JavaScript 脚本文件(.js 格式),通过内嵌的解释执行平台 WSH(Windows Script Host: Windows 脚本宿主,以下简称 WSH)解释来实现高效的文件系统管理。 注意:1、任何一种语言都是伟大的,都可以做很多事情,包括很不可思议的事情,但有一些是有意义 的,另一些是没有意义的,只是语言的侧重点不同而已。 1.1.4 JavaScript 的未来如何 自 ECMA-262 标准以来,JavaScript 及其派生语言如 Flash MX 中的 ActionScript、微软 的 JScript 等在很多不同的编程环境中得到了大量的应用,同时 TC39 一直积极促进 JavaScript 新标准的出台。2005 年 12 月 ECMAScript for XML (E4X) Specification 作为 ECMA-357 标准 (ISO/IEC 22537)出台,主要增加对扩展标记语言 XML 的有效支持: z 在 ECMAScript 中定义了 XML 的语法和语义,同时将 XML 的数据类型添加进 ECMAScript 类型库中; z 专门为 XML 扩展、修订和增加了少数操作符(operators),如搜索(searching)、 过滤(filtering)等,同时增加对 XML 名字空间(namespaces)等的支持。 ECMA-357 标准是 JavaScript 发展史上的变革点,显示出对传统 ECMAScript 从根本上 的改变,采用一种操作简单而功能强大的方式来支持 XML。 ECMAScript 4 作为下一个事实版本(在 IE 7 和 Mozilla 上已部分实现其功能),已作为 提案最先由 Netscape 提出,接着 Microsoft 也将自己的修改意见提交给 TC39。由 于 TC39 各 成员的观点存在较大的分歧,主要是不能很好统一有关 JavaScript 未来发展方向的意见,该 标准到本书截稿时还未获通过。 从 IE 5.5 版本发布开始,Microsoft 就没有更新过它基于浏览器的 JavaScript 实现策略, 但在.NET Framework 中包含了 JScript.NET 作为 ECMAScript 4 的实现,它不能被浏览器解 释执行,而只能通过特有编译器编译后作为独立的应用程序来使用。 令人意想不到的是,一直特立独行的苹果(Apple)电脑在其操作系统 MacOS X Tiger 版本中支持名为 DashBoard 的新型开发平台,它使用 JavaScript 脚本来创建轻量级应用程序, 并能在 MacOS 桌面环境中运行。 JavaScript 作为一门语言依然在发展,虽然发展方向不太确定,其逐渐走出 Web 世界进 入桌面应用领域也只是一种可能,但可以肯定的是,迎接 JavaScript 脚本语言的将是十分美 好的前景。 注意:有关ECMAScript for XML (E4X) Specification(即ECMA-357 标准)的具体内容请参见其官方文档: www.ecma-international.org/publications/files/ECMA-ST/ECMA-357.pdf 1.2 JavaScript 编程起步 JavaScript 脚本已经成为 Web 应用程序开发的一门炙手可热的语言,成为客户端脚本的 首选。网络上充斥着形态各异的 JavaScript 脚本实现不同的功能,但用户也许并不了解 JavaScript 脚本是如何被浏览器中解释执行,更不知如何开始编写自己的 JavaScript 脚本来 实现自己想要实现的效果。本节将一步步带领读者踏入 JavaScript 脚本语言编程的大门。 1.2.1 “Hello World!”程序 像学习 C、Java 等其他语言一样,先来看看使用 JavaScript 脚本语言编写的 “Hello World!”程序: //源程序 1.1 Sample Page!
将上述代码保存为.html(或.html)文件并双击打开,系统调用默认浏览器解释执行,结果 如图 1.6 所示。 图 1.6 JavaScript 编写的“Hello World!”程序 JavaScript 脚本编程一般分为如下步骤: z 选择 JavaScript 语言编辑器编辑脚本代码; z 嵌入该 JavaScript 脚本代码到 HTML 文档中; z 选择支持 JavaScript 的浏览器浏览该 HTML 文档; z 如果错误则检查并修正源代码,重新浏览,此过程重复直至代码正确为止; z 处理不支持 JavaScript 脚本的情况。 由于 JavaScript 脚本代码是嵌入到 HTML 文档中被浏览器解释执行,所以开发 JavaScript 脚本代码并不需要特殊的编程环境,只需要普通的文本编辑器和支持 JavaScript 脚本的浏览 器即可。那么如何选择 JavaScript 脚本编辑器呢? 1.2.2 选择 JavaScript 脚本编辑器 编写 JavaScript 脚本代码可以选择普通的文本编辑器,如 Windows Notepad、UltraEdit 等,只要所选编辑器能将所编辑的代码最终保存为 HTML 文档类型(.htm、.html 等)即可。 虽然 Dreamweaver、Microsoft FrontPage 等专业网页开发工具套件内部集成了 JavaScript 脚本的开发环境,但笔者依然建议 JavaScript 脚本程序开发者在起步阶段使用最基本的文本 编辑器如 NotePad、UltraEdit 等进行开发,以便把注意力放在 JavaScript 脚本语言而不是开 发环境上。 同时,如果脚本代码出现错误,可用该编辑器打开源文件(.html、.html 或.js)修改后 保存,并重新使用浏览器浏览,重复此过程直到没有错误出现为止。 注意:.js 为 JavaScript 纯脚本代码文件的保存格式,该格式在通过标记对,然后嵌入到 HTML 文档中; z 通过标记对引入 在源程序 1.1 的代码中除了标记对之间的内容外,都是最基本的 HTML 代码,可见标记对将 JavaScript 脚本代码封装并嵌入到 HTML 文 档中: document.write("Hello World!"); 浏览器载入嵌有 JavaScript 脚本的 HTML 文档时,能自动识别 JavaScript 脚本代码起始 标记,并将其间的代码按照解释 JavaScript 脚本代码的方法加以 解释,然后将解释结果返回 HTML 文档并在浏览器窗口显示。 注意:所谓标记对,就是必须成对出现的标记,否则其间的脚本代码不能被浏览器解释执行。 来看看下面的代码: 首先,标记对将 JavaScript 脚本代码封装,同时告诉浏览器其间的代 码为 JavaScript 脚本代码,然后调用 document 文档对象的 write( )方法写字符串到 HTML 文 档中。 下面重点介绍标记对之间插入的脚本代码类型; z src 属性:用于将外部的脚本文件内容嵌入到当前文档中,一般在较新版本的浏览 器中使用,使用 JavaScript 脚本编写的外部脚本文件必须使用.js 为扩展名,同时在 标记对中不包含任何内容,如下: 注意:W3C HTML 标准中不推荐使用 language 语法,要标记所使用的脚本类型,应设置 同时在文本编辑器中编辑如下代码并将其保存为 1.js: document.write("Hello World!"); 将 test.html 和 1.js 文件放置于同一目录,双击运行 test.html,结果如图 1.6 所示。 可见通过外部引入 JavaScript 脚本文件的方式,能实现同样的功能。同时具有如下优点: z 将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本,可以轻易实 现多个页面共用完成同一功能的脚本文件,以便通过更新一个脚本文件内容达到批 量更新的目的; z 浏览器可以实现对目标脚本文件的高速缓存,避免额外的由于引用同样功能的脚本 代码而导致下载时间的增加。 与 C 语言使用外部头文件(.h 文件等)相似,引入 JavaScript 脚本代码时使用外部脚本 文件的方式符合结构化编程思想,但也有不利的一面,主要表现在如下几点: z 不是所有支持 JavaScript 脚本的浏览器都支持外部脚本,如 Netscape 2 和 Internet Explorer 3 及以下版本都不支持外部脚本。 z 外部脚本文件功能过于复杂或其他原因导致的加载时间过长有可能导致页面事件 得不到处理或者得不到正确的处理,程序员必须谨慎使用并确保脚本加载完成后其 中的函数才被页面事件调用,否则浏览器报错。 综上所述,引入外部 JavaScript 脚本文件的方法是效果与风险并存,开发者应权衡优缺 点以决定是将脚本代码嵌入到目标 HTML 文档中还是通过引用外部脚本文件的方式来实现 相同的功能。 注意:一般来讲,将实现通用功能的 JavaScript 脚本代码作为外部脚本文件引用,而实现特有功能的 JavaScript 代码则直接嵌入到 HTML 文档中的与标记对之间提前载入以及时、正确 响应页面事件。 下面介绍一种短小高效的脚本代码嵌入方式:伪 URL 引入。 3.通过 JavaScript 伪 URL 引入 在多数支持 JavaScript 脚本的浏览器中,可以通过 JavaScript 伪 URL 地址调用语句来引 入 JavaScript 脚本代码。伪 URL 地址的一般格式如下: JavaScript:alert("Hello World!") 一般以“javascript:”开始,后面紧跟要执行的操作。下面的代码演示如何使用伪 URL 地址来引入 JavaScript 代码: //源程序 1.3 Sample Page!

伪 URL 地址引入 JavaScript 脚本代码实例:

鼠标点击文本框,弹出警示框如图 1.7 所示。 图 1.7 伪 URL 地址引入 JavaScript 脚本代码实例 伪 URL 地址可用于文档中任何地方,并触发任意数量的 JavaScript 函数或对象固有的 方法。由于这种方式代码短小精悍,同时效果颇佳,在表单数据合法性验证譬如某个字段是 否符合日期格式等方面应用非常广泛。 4.通过 HTML 文档事件处理程序引入 在开发 Web 应用程序的过程中,开发者可以给 HTML 文档中设定不同的事件处理器, 通常是设置某 HTML 元素的属性来引用一个脚本(可以是一个简单的动作或者函数),属 性 一般以 on 开头,如鼠标移动 onmousemove( )等。 下面的程序演示如何使用 JavaScript 脚本对按钮单击事件进行响应: //源程序 1.4 Sample Page!

通过文档事件处理程序引入 JavaScript 脚本代码实例:

程序运行后,在原始页面单击“鼠标单击”按钮,出现如图 1.8 所示的警告框。 图 1.8 通过文档事件处理程序引入 JavaScript 脚本实例 遗憾的是,许多版本较低的浏览器,不能够从众多 HTML 标记中识别出事件处理器, 即使支持,支持的程度也不同,对事件的处理方法差别也很大。但是大部分浏览器都能理解 HTML 标记的核心事件,如 onclick、ondbclick、onkeydown、onkeypress、onkeyup、 onmousedown、onmousemove、onmouseover、onmouseout 等鼠标和键盘触发事件。 知道了如何引入 JavaScript 脚本代码,下面介绍在 HTML 中嵌入 JavaScript 脚本代码的 位置。 1.2.4 嵌入 JavaScript 脚本代码的位置 JavaScript 脚本代码可放在 HTML 文档任何需要的位置。一般来说,可以在与 标记对、与标记对之间按需要放置 JavaScript 脚本代码。 1.与标记对之间放置 放置在与标记对之间的 JavaScript 脚本代码一般用于提前载入以响应用 户的动作,一般不影响 HTML 文档的浏览器显示内容。如下是其基本文档结构: //源程序 1.5 文档标题 2.与标记对之间放置 如果需要在页面载入时运行 JavaScript 脚本生成网页内容,应将脚本代码放置在 与标记对之间,可根据需要编写多个独立的脚本代码段并与 HTML 代码结合在一起。 如下是其基本文档结构: //源程序 1.6 文档标题 //HTML 语句 3.在两个标记对之间混合放置 如果既需要提前载入脚本代码以响应用户的事件,又需要在页面载入时使用脚本生成页 面内容,可以综合以上两种方式。如下是其基本文档结构: //源程序 1.7 文档标题 在 HTML 文档中何种位置嵌入 JavaScript 脚本代码应由其实际功能需求来决定。嵌入脚 本的 HTML 文档编辑完成,下一步选择合适的浏览器。 1.2.5 选择合适的浏览器 JavaScript 脚本在客户端由浏览器解释执行并将结果更新目标页面,由于各浏览器厂商 对 JavaScript 版本的支持不尽相同,浏览器的版本也对 JavaScript 脚本的支持有很大影响, 所以编写代码时一定要考虑合适的浏览器之间的兼容性,重点在于编写符合 JavaScript 标准 的代码以适应目标浏览器。下面是浏览器版本与其支持的 JavaScript 版本之间的关系,如表 1.2 所示: 表 1.2 浏览器版本与其支持的JavaScript版本之间的关系表 浏览器版本 JavaScript版本 Netscape Navigator 2.x 1.0 Netscape Navigator 3.x 1.1 Netscape Navigator 4.0-4.05 1.2 Netscape Navigator 4.06-4.08,4.5x,4.6x,4.7x 1.3 Netscape Navigator 6.0+ 1.5 Internet Explorer 3.0 JScript 1.0 Internet Explorer 4.0 JScript 3.0 Internet Explorer 5.0 JScript 5.0 Internet Explorer 5.5 JScript 5.5 Internet Explorer 6.0+ JScript 5.6 在各大浏览器厂商中,基于 Mozilla 的浏览器(包括 Netscape Navigator 6+)对 JavaScript 标准的支持最好,其实现了 JavaScript 1.5 且只修改了其中很少的语言特性。 即使 ECMA 出台 ECMA-262、ECMA-290、ECMA-357 等标准意在消除 JavaScript 各个 不同版本之间的差异性,JavaScript 的应用依然受到很大的挑战。本书将在后面的章节中结 合 DOM(文档结构模型)针对 JavaScript 各种规范版本之间差异进行重点讨论以真正解决 脚本代码的浏览器兼容问题。 可通过如下的代码检查当前浏览器的版本信息: //源程序 1.8 Sample Page!

鼠标单击按钮显示当前浏览器的版本信息

程序运行后,在原始页面单击“鼠标单击”按钮,弹出警告框如图 1.9 所示。 图 1.9 获取当前浏览器的版本信息 在确定浏览器的版本信息后,可以根据浏览器类型编写有针对性的脚本,同时可在其源 程序中加入针对不同浏览器版本的脚本代码,根据浏览器的类型返回相应结果给浏览器,从 而克服客户端浏览器对 JavaScript 脚本支持程度不同的问题。 1.2.6 处理不支持 JavaScript 脚本的情况 客户端浏览器不支持当前 JavaScript 脚本存在如下三种可能: z 客户端浏览器不支持任何 JavaScript 脚本; z 客户端浏览器支持的 JavaScript 脚本版本与该脚本代码使用的版本所支持的对象、 属性或方法不同; z 客户端为了安全起见,已经将浏览器对 JavaScript 脚本的支持设置为禁止。 以上三种情况总结起来,就是浏览器对当前脚本不能解释出正确的结果,在编写脚本代 码时如不进行相关处理,用户使用该浏览器浏览带有该脚本的文档时将出现警告框。可以通 过以下两种方法解决: 1.使用标记对直接屏蔽法 该方法使用标记对将 JavaScript 代码进行封装,告诉浏览器如果它不支持该脚 本就直接跳过,如果支持脚本代码则自动跳过该标记对,达到如果浏览器不支持脚本代码则 将其隐藏的目的。如下代码结构: 注意:上述方法并没有实现 JavaScript 脚本代码的真正隐藏,因为浏览器同样下载了该脚本,并将其作 为源代码使用,只是在解释的时候忽略标记对之间的代码。 2.使用标记对给出提示信息 该方法在浏览器不支持该脚本代码或者浏览器对 JavaScript 脚本的支持已设置为禁止的 情况下,忽略标记对之间脚本代码,返回标记对中 预设的页面提示信息;如果支持该脚本代码则解释执行标记对之间脚本代 码,而忽略标记对之间预设的页面提示信息。这种方法较之第一种方 法更人性化。如下代码结构: 目前,客户端浏览器版本很少有不支持 JavaScript 脚本的情况,但其禁用 JavaScript 脚 本的情况很常见,在编写代码的应充分考虑不支持 JavaScript 脚本的情况并采取相应的代码 编写策略。 1.3 JavaScript 的实现基础 前面已经描述过,ECMAScript 是 JavaScript 脚本的基石,但并不是使用 JavaScript 脚本 开发过程中应唯一特别值得关注的部分。实际上,一个完整的 JavaScript 脚本实现应包含如 下三部分: z ECMAScript 核心:为不同的宿主环境提供核心的脚本能力; z DOM(文档对象模型):规定了访问 HTML 和 XML 的应用程序接口; z BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象 和方法。 下面分别介绍这三个部分: 1.3.1 ECMAScript ECMAScript 规定了能适应于各种宿主环境的脚本核心语法规则,关于 ECMAScript 语 言,ECMA-262 标准描述如下: “ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力,因此核心的脚本 语言是与任何特定的宿主环境分开进行规定的……” ECMAScript 并不附属于任何浏览器,事实上,Web 浏览器只是其中一种宿主环境,但 并不唯一。在其发展史上有很多宿主环境,如 Microsoft 的 WSH、Micromedia 的 ActionScript、 Nombas 的 ScriptBase 和 Yahool!的 Widget 引擎等都可以容纳 ECMAScript 实现。 ECMAScript 仅仅是个描述,定义了脚本语言所有的对象、属性和方法,其主要描述了 如下内容: z 语法 z 数据类型 z 关键字 z 保留字 z 运算符 z 对象 z 语句 支持 ECMA 标准的浏览器都提供自己的 ECMAScript 脚本接口,并按照需要扩展其内 容如对象、属性和方法等。 ECMAScript 标准定义了 JavaScript 脚本中最为核心的内容,是 JavaScript 脚本的骨架, 有了骨架,就可以在其上进行扩展,典型的扩展如 DOM(文档对象模型)和 BOM(浏览 器对象模型)等。 1.3.2 DOM DOM 定义了 JavaScript 可以进行操作的文档的各个功能部件的接口,提供访问文档各 个功能部件(如 document、form、textarea 等)的途径以及操作方法。 在浏览器载入文档(HTML 或 XML)时,根据其支持的 DOM 规范级别将整个文档规 划成由节点层级构成的节点树,文档中每个部分都是一个节点,然后依据节点树层级同时根 据目标节点的某个属性搜索到目标节点后,调用节点的相关处理方法进行处理,完成定位到 处理的整个过程。先看下面简单的 HTML 代码: //源程序 1.9 First Page!

Test!

Welcome to DOM World!

  • Newer
浏览器载入该文档后,根据 DOM 中定义的结构,将其以图 1.10 所示的节点树形式表 示出来(灰色表示本本节点)。 图 1.10 DOM 载入实例中文档后形成的节点树层级 关于 DOM 的具体内容在本书“文档对象模型(DOM)”一章将作详细的介绍。 1.3.3 BOM BOM 定义了 JavaScript 可以进行操作的浏览器的各个功能部件的接口,提供访问文档 各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。遗憾 的是,BOM 只是 JavaScript 脚本实现的一部分,没有任何相关的标准,每种浏览器都有自 己的 BOM 实现,这可以说是 BOM 的软肋所在。 通常情况下浏览器特定的 JavaScript 扩展都被看作 BOM 的一部分,主要包括: z 关闭、移动浏览器及调整浏览器窗口大小; z 弹出新的浏览器窗口; z 提供浏览器详细信息的定位对象; z 提供载入到浏览器窗口的文档详细信息的定位对象; z 提供用户屏幕分辨率详细信息的屏幕对象; z 提供对 cookie 的支持; z 加入 ActiveXObject 类扩展 BOM,通过 JavaScript 实例化 ActiveX 对象。 BOM 有一些事实上的标准,如窗口对象、导航对象等,但每种浏览器都为这些对象定 义或扩展了属性及方法。 在后面的章节中,将详细介绍 BOM 模型中的相关对象。 1.4 客户端脚本与服务器端脚本 最早实现动态网页的技术是 CGI(Common Gateway Interface,通用网关接口)技术,, 它可根据用户的 HTTP 请求数据动态从 Web 服务器返回请求的页面。客户与服务器端的一 次握手过程如图 1.11 所示。 图 1.11 CGI 动态网页技术中的页面请求处理过程 当用户从 Web 页面提交 HTML 请求数据后,Web 浏览器发送用户的请求到 Web 服务器 上,服务器运行 CGI 程序,后者提取 HTTP 请求数据中的内容初始化设置,同时交互服务 器端的数据库,然后将运行结果返回 Web 服务器,Web 服务器根据用户请求的地址将结果 返回该地址的浏览器。从整个过程来讲,CGI 程序运行在服务器端,同时需要与数据库交换 数据,这需要开发者拥有相当的技巧,同时拥有服务器端网站开发工具,程序的编写、调试 和维护过程十分复杂。 同时,由于整个处理过程全部在服务器端处理,无疑是服务器处理能力的一大硬伤,而 且客户端页面的反应速度不容乐观。基于此,客户端脚本语言应运而生,它可直接嵌入到 HTML 页面中,及时响应用户的事件,大大提高页面反应速度。 脚本分为客户端脚本和服务器端脚本,其主要区别如表 1.3 所示: 表 1.3 客户端脚本与服务器端脚本的区别 脚本类型 运行环境 优缺点 主要语言 客户端 脚本 客户端 浏览器 当用户通过客户端浏览器发送HTTP请求时,Web服务器将 HTML文档部分和脚本部分返回客户端浏览器,在客户端浏览 器中解释执行并及时更新页面,脚本处理工作全部在客户端浏 览器完成,减轻服务器负荷,同时增加页面的反应速度,但浏 览器差异性导致的页面差异问题不容忽视 JavaScript、 JScript、 VBScript等 服务器端 脚本 Web 服务器 当用户通过客户端浏览器发送HTTP请求时,Web服务器运行 脚本,并将运行结果与Web页面的HTML部分结合返回至客户 端浏览器,脚本处理工作全部在服务器端完成,增加了服务器 的负荷,同时客户端反应速度慢,但减少了由于浏览器差异带 来的运行结果差异,提高页面的稳定性。 PHP、 JSP、 ASP、 Perl、 LiveWire等 注意:有关 HTTP 请求、TCP\IP 协议、Web 服务器、CGI 技术等请参阅相关文档。 客户端脚本与服务器端脚本各有其优缺点,在不同需求层次上得到了广泛的应用。 JavaScript 作为一种客户端脚本,在页面反应速度、减轻服务器负荷等方面效果非常明显, 但由于浏览器对其支持的程度不同导致的页面差异性问题也不容小觑。 下面几节来阐明几个容易混淆的概念,如 JavaScript 与 JScript、VBScript 背景的区别、 JavaScript 与 Java、Java applet 概念的不同等。 1.5 JavaScript 与 JScript、 VBScript JavaScript 由 Netscape 公司和 Sun 公司联合开发,并在其 Netscape Navigator 2 上首先实 现了该语言的 JavaScript 1.0 版,主要应用于客户端 Web 应用程序开发,由于及时推出了相 关标准,以及语言本身使用简单、实现功能强大的优点,受到 Web 应用程序开发者的追捧, 并陆续推出其 1.1,1.2,1.3,1.4 和 1.5 版。 为了应对 JavaScript 脚本强劲的发展势头,Microsoft 在其 Internet Explorer 3 里推出了 JavaScript 1.0 的克隆版本 JScript 1.0 来抢占客户端脚本市场。在后来的版本中 JScript 逐渐被 WSH 和 ASP(Active Server Pages:活动服务器页面,以下简称 ASP)所支持,并实现了动 态脚本技术。JScript 的最新版本是基于尚未定稿的 ECMAScript4.0 版规范的 JScript .NET, 其可在微软的.Net 环境下编译,然后生成.net 框架内的应用程序。其保持了与 JScript 以前 版本的完全向后兼容性,同时包含了强大的新功能并提供了对公共语言运行库和.NET Framework 的访问方法。 VBScript(Microsoft Visual Basic Scripting Edition)是程序开发语言 Visual Basic 家族 的最新成员,它将灵活的脚本应用于更广泛的领域,包括 Microsoft Internet Explorer 中的 Web 客户端脚本和 Microsoft Internet Information Server 中的 Web 服务器端脚本。VBScript 也是Microsoft推出的产品,开始主要定位于客户端脚本,由于动态页面技术的快速发展, VBScript走向服务器端,与ASP、IIS(Internet Information Server:互联网信息服务)紧密结 合,有力促进动态页面技术的发展。 同时,Microsoft 的 JScript 和 VBScript 脚本应用在服务器端,执行相应的管理权限,同 时 Microsft 提供其访问系统组建的 API,使之与系统紧密结合,如访问本地数据库,并将结 果返回客户端浏览器等。 这三种脚本语言各有各的产生背景,同时其侧重点也不大相同。 1.6 JavaScript 与 Java、Java applet JavaScript 和 Java 虽然名字都带有 Java,但它们是两种不同的语言,也可以说是两种互 不相干的语言:前者是一种基于对象的脚本语言,可以嵌在网页代码里实现交互及控制功能, 而后者是一种面向对象的编程语言,可用在桌面应用程序、Internet 服务器、中间件、嵌入 式设备以及其他众多环境。其主要区别如下: z 开发公司不同:JavaScript 是 Netscape 公司的产品,其目的是为了扩展 Netscape Navigator 功能,而开发的一种可以嵌入 Web 页面中的基于对象和事件驱动的解释 性语言;Java 是 Sun 公司推出的新一代面向对象的程序设计语言,特别适合于 Internet 应用程序开发。 z 语言类型不同:JavaScript 是基于对象和事件驱动的脚本编程语言,本身提供了非 常丰富的内部对象供设计人员使用;Java 是面向对象的编程语言,即使是开发简单 的程序,也必须设计对象。 z 执行方式不同:JavaScript 是一种解释性编程语言,其源代码在发往客户端执行之 前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行;Java 的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平 台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编 译代码的束缚。 z 代码格式不同:JavaScript 的代码是一种文本字符格式,可以直接嵌入 HTML 文档 中,并且可动态装载;Java 是一种与 HTML 无关的格式,必须将其通过专门编译 器编译为 Java applet,其代码以字节代码的形式保存在独立的文档中,然后在 HTML 中通过引用外部插件的方式进行装载, z 变量类型不同:JavaScript 采用弱类型变量,即变量在使用前不需作特别声明,而 是在浏览器解释运行时该代码时才检查其数据类型;Java 采用强类型变量,即所有 变量在通过编译器编译之前必须作专门声明,否则报错。 z 嵌入方式不同:JavaScript 使用 标记对来标识其脚本代码并将其 嵌入到 HTML 文档中;Java 程序通过专门编译器编译后保存为单独的 Java applet 文件,并通过使用 ... 标记对来标识该插件。 z 联编方式不同:JavaScript 采用动态联编,即其对象引用在浏览器解释运行时进行 检查,如不经编译则就无法实现对象引用的检查;Java 采用静态联编,即 Java 的 对象引用必须在编译时进行,以使编译器能够实现强类型检查。 经过以上几个方面的比较,读者应该能清醒认识 JavaScript 和 Java 是没有任何联系的两 门语言。下面讨论 Java applet。 Java applet 是用 Java 语言编写的、有特定用途的应用程序,其直接嵌入到 HTML 页面 中,由支持 Java 的浏览器解释执行并发挥其特定功能,大大提高 Web 页面的交互和动态执 行能力,包含 applet 应用程序的页面被称为 Java-powered 页。 当用户访问这样的网页时,如果客户端浏览器支持 Java 且没有将 Java 支持选项设置为 禁止,则 applet 被下载到用户的计算机上执行,且执行速度不受网络带宽的限制,用户可以 更好地欣赏网页上 applet 产生的各种效果。 与其他应用程序不同,applet 应用程序必须通过标记对将自己内嵌 到 HTML 页面中,当支持 Java 的客户端浏览器遇到该标记对时,立即下载该 applet 并在本 地计算机上执行。执行的过程中它可从目标页面中获得相应的参数,并产生相应的功能,与 Web 页面进行交互,实现页面的动态效果。 在HTML 页面中嵌入 applet,至少需获得该 applet 的以下信息: z 字节码文件名:编译后的 Java 文件,以.class 为后缀; z 字节码文件的地址:相对地址和绝对地址均可; z 显示参数设定:一些需要设定的参数如 width、height 等。 嵌入 applet 应用程序使页面更加富有生气,增加页面的交互能力,改进页面的定态效果, 同时,嵌入 applet 应用程序并不影响 HTML 页面中的其他元素。在本书将有专门的章节来 讲述网页中 Java applet 的应用。 1.7 本章小结 本章主要介绍了 JavaScript 脚本的发展历史、使用特点、功能和未来,同时带领读者开 始编写自己的“Hello World!”程序,兼顾 JavaScript 及浏览器的版本差异性提出相应的编程 策略;讲述了 JavaScript 脚本语言的实现基础,阐明了几个比较易混淆的脚本术语,如 JavaScript 与 JScript、VBScript 背景的区别,以及 JavaScript 与 Java、Java applet 概念的异同 点等,力图给读者一个比较全面、直观的印象。 第 2 章 JavaScript 语言基础 JavaScript 脚本语言作为一门功能强大、使用范围较广的程序语言,其语言基础包括数 据类型、变量、运算符、函数以及核心语句等内容。本章主要介绍 JavaScript 脚本语言的基 础知识,带领读者初步领会 JavaScript 脚本语言的精妙之处,并为后续章节的深入学习打下 坚实的基础。 本章涉及到对象的相关知识,在本书后续章节将对其进行适当的分类和详细的论述,如 读者理解有困难,可自行跳过,待学习了对象的基本概念和相关知识后再进行深入理解。 2.1 编程准备 在正式介绍 Javascript 脚本语言之前,先介绍使用 JavaScript 脚本进行编程需要首先了 解的知识,包括编程术语、大小写敏感性、空白字符以及分号等内容,以及脚本编程过程中 需遵守的一些约定,以编写合法的 JavaScript 脚本程序。 2.1.1 编程术语 首先我们来学习一下 Javascript 程序语言的基本术语,这些术语将贯穿 JavaScript 脚本 编程的每个阶段,汇总如表 2.1 所示: 表 2.1 Javascript脚本编程基本术语 项目 简要说明 举例 Token(语言符号) Javascrip脚本语言中最小的词汇单元,是一 个字符序列 6,“I am a boy”,所有的标识符和关 键字 Literal(常量) 拥有固定值的表达式 6,“I am a boy”,[1,2,3] Identifer(标识符) 变量、函数、对象等的名称 num,alert,yourSex Operator(运算符) 执行赋值、数学运算、比较等的符号 =,+,%,> Expression(表达式) 标识符、运算符等组合起来的一个语句,返 回该语句执行特定运算后的值 x+1,(num+1)/5 Statement(语句) 达到某个特定目的的强制性命令,脚本程序 由多个语句构成 var num=5; function sum(x,y){ result=x+y; return(result); } Keyword(关键字) 作为脚本语言一部分的字符串,不能用作标 识符使用 if,for,var,function Reserved(保留字) 有可能作为脚本语言一部分的字符串,但并 不严格限制其不能作为标识符 const,short,long 2.1.2 脚本执行顺序 JavaScript 脚本解释器将按照程序代码出现的顺序来解释程序语句,因此可以将函数定 义和变量声明放在和之间,此时与函数体相关的操作不会被立即执行。 2.1.3 大小写敏感 JavaScript 脚本程序对大小写敏感,相同的字母,大小写不同,代表的意义也不同,如 变量名 name、Name 和 NAME 代表三个不同的变量名。在 JavaScript 脚本程序中,变量名、 函数名、运算符、关键字、对象属性等都是对大小写敏感的。同时,所有的关键字、内建函 数以及对象属性等的大小写都是固定的,甚至混合大小写,因此在编写 JavaScript 脚本程序 时,要确保输入正确,否则不能达到编写程序的目的。 2.1.4 空白字符 空白字符包括空格、制表符和换行符等,在编写脚本代码时占据一定的空间,但脚本被 浏览器解释执行时无任何作用。脚本程序员经常使用空格作为空白字符,JavaScript 脚本解 释器是忽略任何多余空格的。考察如下赋值语句: s = s + 5 ; 以及代码: s=s+5; 上述代码的运行结果相同,浏览器解释执行第一个赋值语句时忽略了其中的空格。值得 注意的是,浏览器解释执行脚本代码时,并非语句中所有的空格均被忽略掉。考察如下变量 声明: x=typeof y; x=typeofy; 上面这两行代码代表的意义是不同的。第一行是将运算符 typeof 作用在变量 y 上,并 将结果赋值给变量 x;而第二行是直接将变量 typeofy 的值赋给了 x,两行代码的意义完全 不同。 在编写 JavaScript 脚本代码时经常使用一些多余的空格来增强脚本代码的可读性,并有 助于专业的 JavaScript 脚本程序员(或者非专业人员)查看代码结构,同时有利于脚本代码 的日后维护。 注意:在字符串中,空格不被忽略,而作为字符串的一部分显示出来,在编写 JavaScript 脚本代码时, 经常需添加适当的空格使脚本代码层次明晰,方便相关人员查看和维护。 2.1.5 分号 在编写脚本语句时,用分号作为当前语句的结束符,例如: var x=25; var y=16; var z=x+y; 当然,也可将多个语句写在同一行中,例如: var x=25;var y=16;var z=x+y; 值得注意的是,为养成良好的编程习惯,尽量不要将多个语句写在一行中,避免降低脚 本代码的可读性。 另外,语句分行后,作为语句结束符的分号可省略。例如可改写上述语句如下: var x=25 var y=16 var z=x+y 代码运行结果相同,如将多个语句写在同一行中,则语句之间的分号不可省略。 2.1.6 块 在定义函数时,使用大括号“{}”将函数体封装起来,例如: function muti(m,n) { var result=m*n; return result; } 在使用循环语句时,使用大括号“{}”将循环体封装起来,例如: if(age<18) { alert("对不起,您的年龄小于 18 岁,您无权浏览此网页"); } 从本质上讲,使用大括号“{}”将某段代码封装起来后,构成“块”的概念,JavaScript 脚本代码中的块,即为实现特定功能的多句(也可为空或一句)脚本代码构成的整体。 2.2 数值类型 2.2.1 整型和浮点数值 JavaScript 允许使用整数类型和浮点类型两种数值,其中整数类型包含正整数、0 和负 整数;而浮点数则可以是包含小数点的实数,也可以是用科学计数法表示的实数,例如: var age = 32; //整数型 var num = 32.18; //包含小数点的浮点型 var num = 3.7E-2; //科学计数法表示的浮点型 2.2.2 八进制和十六进制 在整数类型的数值中,数制可使用十进制、八进制以及十六进制,例如: var age = 32; //十进制 var num = 010; //八进制 var num = C33; //十六进制 2.3 变量 几乎任何一种程序语言都会引入变量(variable),包括变量标识符、变量申明和变量 作用域等内容。JavaScript 脚本语言中也将涉及到变量,其主要作用是存取数据以及提供存 放信息的容器。在实际脚本开发过程中,变量为开发者与脚本程序交互的主要工具。下面分 别介绍变量标识符、变量申明和变量作用域等内容。 2.3.1 变量标识符 与 C++、Java 等高级程序语言使用多个变量标识符不同,JavaScript 脚本语言使用关键 字 var 作为其唯一的变量标识符,其用法为在关键字 var 后面加上变量名。例如: var age; var MyData; 2.3.2 变量申明 在 JavaScript 脚本语言中,声明变量的过程相当简单,例如通过下面的代码声明名为 age 的变量: var age; JavaScript 脚本语言允许开发者不首先声明变量就直接使用,而在变量赋值时自动申明 该变量。一般来说,为培养良好的编程习惯,同时为了使程序结构更加清晰易懂,建议在使 用变量前对变量进行申明。 变量赋值和变量声明可以同时进行,例如下面的代码声明名为 age 的变量,同时给该变 量赋初值 25: var age = 25; 当然,可在一句 JavaScript 脚本代码中同时声明两个以上的变量,例如: var age , name; 同时初始化两个以上的变量也是允许的,例如: var age = 35 , name = “tom”; 在编写 JavaScript 脚本代码时,养成良好的变量命名习惯相当重要。规范的变量命名, 不仅有助于脚本代码的输入和阅读,也有助于脚本编程错误的排除。一般情况下,应尽量使 用单词组合来描述变量的含义,并可在单词间添加下划线,或者第一个单词头字母小写而后 续单词首字母大写。 注意:JavaScript 脚本语言中变量名的命名需遵循一定的规则,允许包含字母、数字、下划线和美元符号, 而空格和标点符号都是不允许出现在变量名中,同时不允许出现中文变量名,且大小写敏感。 2.3.3 变量作用域 要讨论变量的作用域,首先要清楚全局变量和局部变量的联系和区别: z 全局变量:可以在脚本中的任何位置被调用,全局变量的作用域是当前文档中整个 脚本区域。 z 局部变量:只能在此变量声明语句所属的函数内部使用,局部变量的作用域仅为该 函数体。 声明变量时,要根据编程的目的决定将变量声明为全局变量还是局部变量。一般而言, 保存全局信息(如表格的原始大小、下拉框包含选项对应的字符串数组等)的变量需声明为 全局变量,而保存临时信息(如待输出的格式字符串、数学运算中间变量等)的变量则声明 为局部变量。 考察如下代码: //源程序 2.1 Sample Page!
浏览器载入上述代码后,弹出警告框显示局部变量 total 的值,其结果如图 2.1 所示。 图 2.1 局部变量 在上述警告框中单击“确定”后,关闭该警告框。单击“局部和全局变量测试”按钮, 弹出警告框显示全局变量 total 的值,如图 2.2 所示。 图 2.2 全局变量 代码载入后,add(num)函数响应 body 元素对象的 onload 事件处理程序,输出其函数体 中定义的局部变量 total 的值(整数 200)。单击“局部和全局变量测试”按钮,触发其 onclick 事件处理程序运行与其关联的 JavaScript 代码输出全局变量 total 的值(整数 100): javascript:alert('\n 全局变量 : \n\ntotal ='+total+'\n'); 由上述结果可以看出,全局变量可作用在当前文档的 JavaScript 脚本区域,而局部变量 仅存在于其所属的函数体内。实际应用中,应根据全局变量和局部变量的作用范围恰当定义 变量,并尽量避免全局变量与局部变量同名,否则容易出现不易发现的变量调用错误。同时 注意应对代码中引入的任何变量均进行声明。 2.4 弱类型 JavaScript 脚本语言像其他程序语言一样,其变量都有数据类型,具体数据类型将在下 一节中介绍。高级程序语言如 C++、Java 等为强类型语言,与此不同的是,JavaScript 脚本 语言是弱类型语言,在变量声明时不需显式地指定其数据类型,变量的数据类型将根据变量 的具体内容推导出来,且根据变量内容的改变而自动更改,而强类型语在变量声明时必须显 式地指定其数据类型。 变量声明时不需显式指定其数据类型既是 JavaScript 脚本语言的优点也是缺点,优点是 编写脚本代码时不需要指明数据类型,使变量声明过程简单明了;缺点就是有可能造成因微 妙的拼写不当而引起致命的错误。 考察如下代码: //源程序 2.2 Sample Page!
程序运行后,在原始页面单击“弱类型测试”按钮,弹出警告框如图 2.3 所示。 图 2.3 弱类型语言测试 由上图中前三个表达式运算结果可知,JavaScript 脚本在解释执行时自动将字符型数据 转换为数值型数据,而最后一个结果由于加号“+”的特殊性导致运算结果不同,是将数值 型数据转换为字符型数据。运算符“+”有两个作用: z 作为数学运算的加和运算符 z 作为字符型数据的连接符 由于加号“+”作为后者使用时优先级较高,故实例中表达式“'600'+5”的结果为字符 串“6005”,而不是整数 605。 2.5 基本数据类型 在实现预定功能的程序代码中,一般需定义变量来存储数据(作为初始值、中间值、最 终值或函数参数等)。变量包含多种类型,JavaScript 脚本语言支持的基本数据类型包括 Number 型、String 型、Boolean 型、Undefined 型、Null 型和 Function 型,分别对应于不同 的存储空间,汇总如表 2.2 所示: 表 2.2 六种基本数据类型 类型 举例 简要说明 Number 45 , -34 , 32.13 , 3.7E-2 数值型数据 String "name" , 'Tom' 字符型数据,需加双引号或单引号 Boolean true , flase 布尔型数据,不加引号,表示逻辑真或假 Undefined Null null 表示空值 Function 表示函数 2.5.1 Number 型 Number 型数据即为数值型数据,包括整数型和浮点型,整数型数制可以使用十进制、 八进制以及十六进制标识,而浮点型为包含小数点的实数,且可用科学计数法来表示。一般 来说,Number 型数据为不在括号内的数字,例如: var myDataA=8; var myDataB=6.3; 上述代码分别定义值为整数 8 的 Number 型变量 myDataA 和值为浮点数 6.3 的 Number 型变量 myDataB。 2.5.2 String 型 String 型数据表示字符型数据。JavaScript 不区分单个字符和字符串,任何字符或字符 串都可以用双引号或单引号引起来。例如下列语句中定义的 String 型变量 nameA 和 nameB 包含相同的内容: var nameA = "Tom"; var nameB = 'Tom'; 如果字符串本身含有双引号,则应使用单引号将字符串括起来;若字符串本身含有单引 号,则应使用双引号将字符串引起来。一般来说,在编写脚本过程中,双引号或单引号的选 择在整个 JavaScript 脚本代码中应尽量保持一致,以养成好的编程习惯。 2.5.3 Boolean 型 Boolean 型数据表示的是布尔型数据,取值为 ture 或 false,分别表示逻辑真和假,且任 何时刻都只能使用两种状态中的一种,不能同时出现。例如下列语句分别定义 Boolean 变量 bChooseA 和 bChooseB,并分别赋予初值 true 和 false: var bChooseA = true; var bChooseB = false; 值得注意的是,Boolean 型变量赋值时,不能在 true 或 false 外面加引号,例如: var happyA = true; var happyB = “true”; 上述语句分别定义初始值为 true 的 Boolean 型变量 happyA 和初始值为字符串“true” 的 String 型变量 happyB。 2.5.4 Undefined 型 Undefined 型即为未定义类型,用于不存在或者没有被赋初始值的变量或对象的属性, 如下列语句定义变量 name 为 Undefined 型: var name; 定义 Undefined 型变量后,可在后续的脚本代码中对其进行赋值操作,从而自动获得由 其值决定的数据类型。 2.5.5 Null 型 Null 型数据表示空值,作用是表明数据空缺的值,一般在设定已存在的变量(或对象的 属性)为空时较为常用。区分 Undefined 型和 Null 型数据比较麻烦,一般将 Undefined 型和 Null 型等同对待。 2.5.6 Function 型 Function 型表示函数,可以通过 new 操作符和构造函数 Function()来动态创建所需功能 的函数,并为其添加函数体。例如: var myFuntion = new Function() { staments; }; JavaScript 脚本语言除了支持上述六种基本数据类型外,也支持组合类型,如数组 Array 和对象 Object 等,下面介绍组合类型。 2.6 组合类型 JavaScript 脚本支持的组合类型比基本数据类型更为复杂,包括数组 Array 型和对象 Object 型。本节将简要介绍上述组合类型的基本概念及其用法,在本书后续章节将进行专门 论述。 2.6.1 Array 型 Array 型即为数组,数组是包含基本和组合数据的序列。在 JavaScript 脚本语言中,每 一种数据类型对应一种对象,数组本质上即为 Array 对象。考察如下定义: var score = [56,34,23,76,45]; 上述语句创建数组 score,中括号“[]”内的成员为数组元素。由于 JavaScript 是弱类型 语言,因此不要求目标数组中各元素的数据类型均相同,例如: var score = [56,34,”23”,76,”45”]; 由于数组本质上为 Array 对象,则可用运算符 new 来创建新的数组,例如: var score=new Array(56,34,”23”,76,”45”); 访问数组中特定元素可通过该元素的索引位置 index 来实现,如下列语句声明变量 m 返 回数组 score 中第四个元素: var m = score [3]; 数组作为 Array 对象,具有最重要的属性 length,用来保存该数组的长度,考察如下的 测试代码: 源程序 2.3 Sample Page!
程序运行后,在原始页面单击“数组测试”按钮,弹出警告框如图 2.4 所示。 图 2.4 数组的 length 属性 值得注意的是,数组的 length 属性为可读可写属性,作为可写属性时,若新的属性值小 于原始值时,将调整数组的长度为新的属性值,数组中其余元素将删除。 2.6.2 Object 型 对象为可包含基本和组合数据的组合类型,且对象的成员作为对象的属性,对象的成员 函数作为对象的方法。在 JavaScript 脚本语言中,可通过在对象后面加句点“.”并加上对象 属性(或方法)的名称来访问对象的属性(或方法),例如: document.bgColor document.write(“Welcome to JavaScript World!”); 考察如下的测试代码: //源程序 2.4 Sample Page!
程序运行后,在原始页面单击“数组测试”按钮,弹出警告框如图 2.5 所示。 图 2.5 访问对象的属性和方法 单击“确定”按钮,将弹出如图 2.6 所示的警告框提示用户浏览器正试图关闭当前文档 页面。 图 2.6 响应 window.close()方法 2.7 运算符 编写 JavaScript 脚本代码过程中,对目标数据进行运算操作需用到运算符。JavaScript 脚本语言支持的运算符包括:赋值运算符、基本数学运算符、位运算符、位移运算符、高级 赋值语句、自加和自减、比较运算符、逻辑运算符、逗号运算符、空运算符、?...:…运算符、 对象运算符以及 typedof 运算符等,下面分别予以介绍。 2.7.1 赋值运算符 JavaScript 脚本语言的赋值运算符包含“=”、“+=”、“—=”、“*=”、“/=”、“%=”、 “&=”、“^=”等,汇总如表 2.3 所示: 表 2.3 赋值运算符 运算符 举例 简要说明 = m=n 将运算符右边变量的值赋给左边变量 += m+=n 将运算符两侧变量的值相加并将结果赋给左边变量 -= m-=n 将运算符两侧变量的值相减并将结果赋给左边变量 *= m*=n 将运算符两侧变量的值相乘并将结果赋给左边变量 /= m/=n 将运算符两侧变量的值相除并将整除的结果赋给左边变量 %= m%=n 将运算符两侧变量的值相除并将余数赋给左边变量 &= m&=n 将运算符两侧变量的值进行按位与操作并将结果赋值给左边变量 ^= m^=n 将运算符两侧变量的值进行按位或操作并将结果赋值给左边变量 <<= m<<=n 将运算符左边变量的值左移由右边变量的值指定的位数,并将操作 的结果赋予左边变量 >>= m>>=n 将运算符左边变量的值右移由右边变量的值指定的位数,并将操作 的结果赋予左边变量 >>>= m>>>=n 将运算符左边变量的值逻辑右移由右边变量的值指定的位数,并将 操作的结果赋给左边变量 赋值运算符是编写 JavaScript 脚本代码时最为常用的操作,读者应熟练掌握各个运算符 的功能,避免混淆其具体作用。 考察如下的测试程序: //源程序 2.5 Sample Page!
程序运行后,在原始页面单击“运算符测试”按钮,弹出警告框如图 2.7 所示。 图 2.6 赋值运算符 由上述结果可知,JavaScript 脚本语言的运算符在参与数值运算时,其右侧的变量将保 持不变。从本质上讲,运算符右侧的变量作为运算的参数而存在,脚本解释器执行指定的操 作后,将运算结果作为返回值赋予运算符左侧的变量。 2.7.2 基本数学运算符 JavaScript 脚本语言中基本的数学运算包括加、减、乘、除以及取余等,其对应的数学 运算符分别为“+”、“-”、“*”、“/”和“%”等,如表 2.4 所示: 表 2.4 基本数学运算符 基本数学运算符 举例 简要说明 + m=5+5 将两个数据相加,并将结果返回操作符左侧的变量 - m=9-4 将两个数据相减,并将结果返回操作符左侧的变量 * m=3*4 将两个数据相乘,并将结果返回操作符左侧的变量 / m=20/5 将两个数据相除,并将结果返回操作符左侧的变量 % m=14%3 求两个数据相除的余数,并将结果返回操作符左侧的变量 考察如下测试代码: //源程序 2.6 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.8 所示。 图 2.8 基本数学运算符 2.7.3 位运算符 JavaScript 脚本语言支持的基本位运算符包括:“&”、“|”、“^”和“~”等。脚本 代码执行位运算时先将操作数转换为二进制数,操作完成后将返回值转换为十进制。位运算 符的作用如表 2.5 所示: 表 2.5 位运算符 位运算符 举例 简要说明 & 9&4 按位与,若两数据对应位都是1,则该位为1,否则为0 ^ 9^4 按位异或,若两数据对应位相反,则该位为1,否则为0 | 9|4 按位或,若两数据对应位都是0,则该位为0,否则为1 ~ ~4 按位非,若数据对应位为0,则该位为1,否则为0 位运算符在进行数据处理、逻辑判断等方面使用较为广泛,恰当应用位运算符,可节省 大量脚本代码。 考察如下测试代码: //源程序 2.7 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.9 所示。 图 2.9 位运算符 原始操作数分别为二进制 0000 0110b 和 0010 0100b,执行位与、位异或、位或和位非 操作后,其结果分别为二进制 0000 0100b、0010 0010b、0010 0110b 和 1000 0111b,对应的 十进制结果分别为 4、34、38 和-7。 2.7.4 位移运算符 位移运算符用于将目标数据往指定方向移动指定的位数。JavaScript 脚本语言支持“<<”、 “>>”和“>>>”等位移运算符,其具体作用如见表 2.6: 表 2.6 位移运算符 运算符 举例 简要说明 >> 9>>2 算术右移,将左侧数据的二进制值向左移动由右侧数值表示的位数,右边空位补0 << 9<<2 算术左移,将左侧数据的二进制值向右移动由右侧数值表示的位数,忽略被移出的位 >>> 9>>>2 逻辑右移,将左边数据表示的二进制值向右移动由右边数值表示的位数,忽略被移出 的位,左侧空位补0 位移运算符在逻辑控制、数值处理等方面应用较为广泛,恰当应用位移运算符,可节省 大量脚本代码。 考察如下测试代码: //源程序 2.8 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.10 所示。 图 2.10 位移运算符 目标数据的二进制值 1011 1101b,执行算术右移两位、算术左移两位和逻辑右移两位后, 其结果分别为二进制 0010 1111b、10 1110 1100b 和 0010 1111b,分别对应于十进制值 47、 756 和 47。 2.7.5 自加和自减 自加运算符为“++”和自减运算符为“--”分别将操作数加 1 或减 1。值得注意的是, 自加和自减运算符放置在操作数的前面和后面含义不同。运算符写在变量名前面,则返回值 为自加或自减前的值;而写在后面,则返回值为自加或自减后的值。 考察如下测试代码: //源程序 2.9 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.11 所示。 图 2.11 自加和自减运算符 由程序运行结果可以看出: z 若自加(或自减)运算符放置在操作数之后,执行该自加(或自减)操作时,先将 操作数的值赋值给运算符前面的变量,然后操作数自加(或自减); z 若自加(或自减)运算符放置在操作数之前,执行该自加(或自减)操作时,操作 数先进行自加(或自减),然后将操作数的值赋值给运算符前面的变量。 2.7.6 比较运算符 JavaScript 脚本语言中用于比较两个数据的运算符称为比较运算符,包括“= =”、“!=”、 “>”、“<”、“<=”、“>=”等,其具体作用见表 2.7。 表 2.7 比较运算符 运算符 举例 作用 == num==8 相等,若两数据相等,则返回布尔值true,否则返回false != num!=8 不相等,若两数据不相等,则返回布尔值true,否则返回false > num>8 大于,若左边数据大于右边数据,则返回布尔值true,否则返回false < num<8 小于,若左边数据小于右边数据,则返回布尔值true,否则返回false >= num>=8 大于或等于,若左边数据大于或等于右边数据,则返回布尔值true,否则返回false <= num<=8 小于或等于,若左边数据小于或等于右边数据,则返回布尔值true,否则返回false 比较运算符主要用于数值判断及流程控制等方面,考察如下的测试代码。 //源程序 2.10 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出提示框提示用户输入相关 信息,如图 2.12 所示。 图 2.12 提示用户输入相关信息 在上述提示框输入相关信息(如年龄 35)后,单击“确定”按钮,弹出警告框如图 2.13 所示。 图 2.13 根据用户输入进行特定操作 可以看出,脚本代码采集用户输入的数值,然后通过比较运算符进行判定,再做出相对 应的操作,实现了程序流程的有效控制。 注意:比较运算符 “= =”与赋值运算符“=”截然不同,前者用于比较运算符前后的两个数据,主要用 语数值比较和流程控制;后者用于将运算符后面的变量的值赋予运算符前面的变量,主要用于变 量赋值。 2.7.7 逻辑运算符 JavaScript 脚本语言的逻辑运算符包括 “&&”、“||”和“!”等,用于两个逻辑型数据 之间的操作,返回值的数据类型为布尔型。逻辑运算符的功能如表 2.8 所示: 表 2.8 逻辑运算符 运算符 举例 作用 && num<5&&num>2 逻辑与,如果符号两边的操作数为真,则返回true,否则返回false || num<5||num>2 逻辑或,如果符号两边的操作数为假,则返回false,否则返回true ! !num<5 逻辑非,如果符号右边的操作数为真,则返回false,否则返回true 逻辑运算符一般与比较运算符捆绑使用,用以引入多个控制的条件,以控制 JavaScript 脚本代码的流向。 2.7.8 逗号运算符 编写 JavaScript 脚本代码时,可使用逗号“,”将多个语句连在一起,浏览器载入该代码 时,将其作为一个完整的语句来调用,但语句的返回值是最右边的语句。 考察如下的测试代码: //源程序 2.11 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.14 所示。 图 2.14 逗号“,”运算符 由运行结果可知,使用长语句赋值时,返回值为赋值语句最右边变量的值,为养成良好 的编程习惯,建议不是用该方法。逗号“,”一般用于在函数定义和调用时分隔多个参数, 例如: function sum(a,b,c){ statements } 2.7.9 空运算符 空运算符对应的关键字为“void”,其作用是定义一个表达式,但该表达式并不返回任 何值。修改源程序 2.11 中变量赋值语句为: dataA=(dataB=1,dataC=2,dataD=3); 保存代码后,使用浏览器载入,在原始页面单击“运算符测试”按钮,弹出警告框如图 2.15 所示。 图 2.15 空运算符 由程序运行结果可知,使用空运算符 void 后,变量 dataA 定义为 undefined 型,并不返 回任何值。 2.7.10 ?...:运算符 在 JavaScript 脚本语言中,“?...:”运算符用于创建条件分支。在动作较为简单的情况 下,较之 if…else 语句更加简便,其语法结构如下: (condition)?statementA:statementB; 载入上述语句后,首先判断条件 condition,若结果为真则执行语句 statementA,否则执 行语句 statementB。值得注意的是,由于 JavaScript 脚本解释器将分号“;”作为语句的结束 符,statementA 和 statementB 语句均必须为单个脚本代码,若使用多个语句会报错,例如下 列代码浏览器解释执行时得不到正确的结果: (condition)?statementA:statementB;ststementC; 考察如下简单的分支语句: var age= prompt("请输入您的年龄(数值) : ",25); var contentA="\n 系统提示 :\n 对不起,您未满 18 岁,不能浏览该网站!\n"; var contentB="\n 系统提示 :\n 点击''确定''按钮,注册网上商城开始欢乐之旅!" if(age<18) { alert(contentA); } else{ alert(contentB); } 程序运行后,单击原始页面中“测试”按钮,弹出提示框提示用户输入年龄,并根据输 入值决定后续操作。例如在提示框中输入整数 17,然后单击“确定”按钮,则弹出警告框 如图 2.16 所示: 图 2.16 输入值为 12 若在提示框中输入整数 24,然后单击“确定”按钮,则弹出警告框如图 2.17 所示: 图 2.17 输入值为 24 上述语句中的条件分支语句完全可由“?...:”运算符简单表述: (age<18)?alert(contentA):alert(contentB); 可以看出,使用“?...:”运算符进行简单的条件分支,语法简单明了,但若要实现较为 复杂的条件分支,推荐使用 if…else 语句或者 switch 语句。 2.7.11 对象运算符 JavaScript 脚本语言主要支持四种对象运算符,包括点号运算符、new 运算符、delete 运算符以及()运算符等。 对象包含属性和方法,点号运算符用来访问对象的属性和方法。其用法是将对象名称与 对象的属性(或方法)用点号隔开,例如: var myColor=document.bgColor; window.alert(msg); 语句一使用变量 myColor 返回 Document 对象的 bgColor 属性,语句二调用 Window 对 象的 alert()方法输出提示信息。当然,也可使用双引号“[]”来访问对象的属性,改写上述 语句: var myColor=document[" bgColor "]; new 运算符用来创建新的对象,例如创建一个新的数组对象,可以写成: var exam = new Array (43,76,34 89,90); new 运算符可以创建程序员自定义的对象,以可以创建 JavaScript 内建对象的实例。下 列函数创建 Date 对象,并调用 Window 对象的 alert()方法输出当前时间信息: function createDate() { var myDate=new Date(); var msg="\n 当前时间 : \n\n"; msg+=" "+myDate+" \n"; alert(msg) } 上述函数被调用后,弹出警告框显示当前时间信息,如图 2.18 所示。 图 2.18 new 运算符 delete 运算符主要用于删除数组的特定元素,也可用来删除对象的属性、方法等。考察 如下的测试代码: //源程序 2.12 Sample Page!
程序运行后,在原始页面中单击“运算符测试”按钮,将弹出警告框如图 2.19 所示。 图 2.19 delete 运算符 由上图可知,执行“delete myClassmate[2];”语句后,数组元素 myClassmate[2]被定义 为 undefined 类型。 “()”运算符用来调用对象的方法,例如: window.alert(msg); 上述四种对象运算符,在后续章节将进行更为深入的介绍。 2.7.12 typeof 运算符 typeof 运算符用于表明操作数的数据类型,返回数值类型为一个字符串。在 JavaScript 脚本语言中,其使用格式如下: var myString=typeof(data); 考察如下实例: //源程序 2.13 Sample Page!
程序运行后,出现如图 2.20 所示页面: 图 2.20 typeof 运算符 可以看出,使用关键字 var 定义变量时,若不指定其初始值,则变量的数据类型默认为 undefined。同时,若在程序执行过程中,变量被赋予其他隐性包含特定数据类型的数值时, 其数据类型也随之发生更改。 2.7.13 运算符优先级 JavaScript 脚本编程中,运算表达式中可能含有多个运算符,同其他程序语言一样,这 些运算符也是有处理的先后顺序的,运算符的优先级如表 2.9 所示。 表 2.9 运算符优先级 运算符优先级 运算符 简要说明 ( ) 1 [ ] ! 逻辑非 ~ 按位非 — 取负 + + 自加 —— 自减 2 typeof 表明数据类型 * 乘 / 除 3 % 取余 + 4 — << 按位移 > 5 >> < 比较运算符 > <= 6 >= = = 7 != 8 & 按位与 9 ^ 按位异或 10 | 按位或 11 && 逻辑与 12 || 逻辑或 13 ? 条件表达式 = 赋值运算符 += —= *= /= %= <<= >= >>= &= ^= 14 |= 15 , 参数分隔 进行表达式求值时,先执行优先级脚高的运算符,再执行优先级较低的运算符;若优先 级相同则按照从左至右的顺序执行。构造特定运算功能的表达式时,应根据上述表格中列举 的运算符优先级合理安排。 2.8 核心语句 前面小节讲述了 JavaScript 脚本语言数据结构方面的基础知识,包括基本数据类型、运 算符、运算符优先级等,本节将重点介绍 JavaScript 脚本的核心语句。 在 JavaScript 脚本语言中,语句的基本格式为: ; 分号为语句结束标志符,为养成良好的编程习惯,在编程中应使用分号。值得注意的是, JavaScript 脚本支持符号匹配,如双引号、单引号等。若分号嵌套在上述匹配符号内,脚本 解释器搜索匹配的符号: z 若存在匹配符,则将其中的分号作为普通符号而不是作为语句结束符对待。例如: var msg="语句 : var myData;"; z 若不存在匹配符,则提示脚本出现语法错误。例如: var msg="语句 : var myData; 基本语句构成代码段,下面介绍 JavaScript 脚本代码的基本处理流程 2.8.1 基本处理流程 基本处理流程就是对数据结构的处理流程,在 JavaScript 里,基本的处理流程包含三种 结构,即顺序结构、选择结构和循环结构。 顺序结构即按照语句出现的先后顺序依次执行,为 JavaScript 脚本程序中最基本的结构, 如图 2.21 所示。 图 2.21 顺序结构 选择结构即按照给定的逻辑条件来决定执行顺序,可以分为单向选择、双向选择和多向 选择。但无论是单向还是多向选择,程序在执行过程中都只能执行其中一条分支。单向选择 和双向选择结构如图 2.22 所示。 图 2.22 单向和双向选择结构 循环结构即根据代码的逻辑条件来判断是否重复执行某一段程序。若逻辑条件为 true, 则重复执行,即进入循环,否则结束循环。循环结构可分为条件循环和计数循环,如图 2.23 所示。 图 2.23 循环结构 一般而言,在 JavaScript 脚本语言中,程序总体是按照顺序结构执行的,而在顺序结构 中可以包含选择结构和循环结构。 2.8.2 if 条件假设语句 if 条件假设语句是比较简单的一种选择结构语句,若给定的逻辑条件表达式为真,则执 行一组给定的语句。其基本结构如下: if(conditions) { statements; } 逻辑条件表达式 conditions 必须放在小括号里,且仅当该表达式为真时,执行大括号内 包含的语句,否则将跳过该条件语句而执行其下的语句。大括号内的语句可为一个或多个, 当仅有一个语句时,大括号可以省略。但一般而言,为养成良好的编程习惯,同时增强程序 代码的结构化和可读性,建议使用大括号将指定执行的语句括起来。 if 后面可增加 else 进行扩展,即组成 if…else 语句,其基本结构如下: if(conditions) { statement1; } else { statement2; } 当逻辑条件表达式 conditions 运算结果为真时,执行 statement1 语句(或语句块),否 则 执行 statement2 语句(或语句块)。 if(或 if…else)结构可以嵌套使用来表示所示条件的一种层次结构关系。值得注意的是, 嵌套时应重点考虑各逻辑条件表达式所表示的范围。 2.8.3 switch 流程控制语句 在 if 条件假设语句中,逻辑条件只能有一个,如果有多个条件,可以使用嵌套的 if 语 句来解决,但此种方法会增加程序的复杂度,并降低程序的可读性。若使用 switch 流程控 制语句就可完美地解决此问题,其基本结构如下: switch (a) { case a1: statement 1; [break;] case a2: statement 2; [break]; …… default: [statement n;] } 其中 a 是数值型或字符型数据,将 a 的值与 a1、a2、……比较,若 a 与其中某个值相等 时,执行相应数据后面的语句,且当遇到关键字 break 时,程序跳出 statement n 语句,并重 新进行比较;若找不到与 a 相等的值,则执行关键字 default 下面的语句。 考察如下的测试代码: //源程序 2.14 Sample Page!
程序运行后,在原始页面中单击“测试”按钮,将弹出提示框提示用户输入相关信息, 例如输入 12,单击“确定”按钮提交,弹出警告框如图 2.24 所示。 图 2.24 switch 流程控制语句 2.8.4 for 循环语句 for 循环语句是循环结构语句,按照指定的循环次数,循环执行循环体内语句(或语句 块),其基本结构如下: for(initial condition; test condition; alter condition) { statements; } 循环控制代码(即小括号内代码)内各参数的含义如下: z initial condition 表示循环变量初始值; z test condition 为控制循环结束与否的条件表达式,程序每执行完一次循环体内语句 (或语句块),均要计算该表达式是否为真,若结果为真,则继续运行下一次循环 体内语句(或语句块);若结果为假,则跳出循环体。 z alter condition 指循环变量更新的方式,程序每执行完一次循环体内语句(或语句 块),均需要更新循环变量。 上述循环控制参数之间使用分号“;”间隔开来,考察如下的测试函数: function Test() { var iArray=new Array("JHX","QZY","LJY","HZF"); var iLength=iArray.length; var msg="\nfor 循环语句测试 :\n\n"; msg+="数组长度 : \n "+iLength+"\n"; msg+="数组元素 : \n"; for(var i=0;i Sample Page!
程序运行后,在原始页面中单击“测试”按钮,弹出警告框如图 2.26 所示。 图 2.26 break 和 continue 语句 从上图的结果可以看出: z 当 n=3 时,跳出当前循环而直接进行下一个循环,故 iArray[3]不进行显示; z 当 n=6 时,直接跳出 while 循环,不再执行余下的循环,故 iArray[5]之后的数组元 素不进行显示。 在编写 JavaScript 脚本过程中,应根据实际需要来选择使用哪一种循环语句,并确保在 使用了循环控制语句 continue 和 break 后,循环不出现任何差错。 2.8.7 with 对象操作语句 在编写 JavaScript 脚本过程中,经常需引用同一对象的多个属性或方法,正常的对象属 性或方法的引用途径能达到既定的目的,但代码显得尤为复杂。JavaScript 脚本语言提供 with 操作语句来简化对象属性和方法的引用过程,其语法结构如下: with (objct) { statements; } 例如下列连续引用 document 对象的 write()方法的语句: document.write("Welcome to China"); document.write("Welcome to Beijing"); document.write("Welcome to Shanghai"); 可以使用 with 语句简化为: with(document) { write("Welcome to China"); write("Welcome to Beijing"); write("Welcome to Shanghai"); } 在脚本代码中适当使用 with 语句可使脚本代码简明易懂,避免不必要的重复输入。若 脚本代码中涉及到多个对象,不推荐使用 with 语句,避免造成属性或方法引用的混乱。 2.8.8 使用 for…in 进行对象循坏 使用 for…in 循环语句可以对指定对象的属性和方法进行遍历,其语法结构如下: for (变量名 in 对象名) { statements; } 考察如下测试代码: 源程序 2.16 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.27 所示。 图 2.27 for…in 对象循环语句 2.8.9 含标签的语句 经常在循环标志前加上标签文本来引用该循环,其使用方法是标识符后面加冒号“:”。 在使用 break 和 continue 语句配合使用控制循环语句时,可使用 break 或 continue 加上标识 符的形式使循环跳转到指定的位置。 考察如下的测试代码: //源程序 2.17 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.28 所示。 图 2.28 使用标签控制循环 若不加标签 outer,而直接使用 break 语句跳出循环,其运行结果如图 2.29 所示。 图 2.29 不使用标签 outer 比较上述两个实例可知: z 若增加标签 outer,则执行到 break outer 语句时跳出整个 while 循环; z 若直接使用 break 语句仅跳出 break 所在的 for 循环。 由此可见,标签对循环控制非常有效。若配合 break 和 continue 语句使用,可精确控制 循环的走向,在实际编写脚本代码过程中应根据需要选择添加标签与否。 2.9 函数 JavaScript 脚本语言允许开发者通过编写函数的方式组合一些可重复使用的脚本代码 块,增加了脚本代码的结构化和模块化。函数是通过参数接口进行数据传递,以实现特定的 功能。本小节将重点介绍函数的基本概念、组成、全局函数与局部函数、作为对象的函数以 及递归函数等知识,让读者从头开始,学习如何编写执行效率高、代码利用率高,且易于查 看和维护的函数。 2.9.1 函数的基本组成 函数由函数定义和函数调用两部分组成,应首先定义函数,然后再进行调用,以养成良 好的编程习惯。 函数的定义应使用关键字 function,其语法规则如下: function funcName ([parameters]) { statements; [return 表达式;] } 函数的各部分含义如下: z funcName 为函数名,函数名可由开发者自行定义,与变量的命名规则基本相同; z parameters 为函数的参数,在调用目标函数时,需将实际数据传递给参数列表以完 成函数特定的功能。参数列表中可定义一个或多个参数,各参数之间加逗号“,” 分隔开来,当然,参数列表也可为空; z statements 是函数体,规定了函数的功能,本质上相当于一个脚本程序; z return 指定函数的返回值,为可选参数。 自定义函数一般放置在 HTML 文档的和标记对之间。除了自定义函数外, JavaScript 脚本语言提供大量的内建函数,无需开发者定义即可直接调用,例如 window 对 象的 alert()方法即为 JavaScript 脚本语言支持的内建函数。 函数定义过程结束后,可在文档中任意位置调用该函数。引用目标函数时,只需在函数 名后加上小括号即可。若目标函数需引入参数,则需在小括号内添加传递参数。如果函数有 返回值,可将最终结果赋值给一个自定义的变量并用关键字 return 返回。 考察如下测试代码: //源程序 2.18 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.30 所示。 图 2.30 函数调用 上述代码中,定义了实现两数加和的函数 sum(data1,data2)及响应“测试”按钮 onclick 事件处理程序的 Test()函数,并在后者内部调用了 window 对象的内建函数 alert(),实现了函 数的相互引用。 如果函数中引用的外部函数较多或函数的功能很复杂,势必导致函数代码过长而降低脚 本代码可读性,违反了开发者使用函数实现特定功能的初衷。因此,在编写函数时,应尽量 保持函数功能的单一性,使脚本代码结构清晰、简单易懂。 2.9.2 全局函数与局部函数 JavaScript 脚本语言提供了很多全局(内建)函数,在脚本编程过程中可直接调用,在 此介绍四种简单的全局函数:parseInt()、parseFloat()、escape()和 unescape()。 parseInt()函数的作用是将字符串转换为整数,parseFloat()函数的作用是将字符串转换为 浮点数;escape()函数的作用是将一些特殊字符转换成 ASCII 码,而 unescape()函数的作用是 将 ASCII 码转换成字符。 考察如下测试代码: //源程序 2.19 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.31 所示。 图 2.31 全局函数 由程序运行结果可知上述全局函数的具体作用,当然 JavaScript 脚本语言还支持很多其 他的全局函数,在编程中适当使用它们可大大提高编程效率。 与全局函数相对应的函数是局部函数,即定义在某特定函数内部,并仅能在其内使用的 函数。 考察如下测试代码: //源程序 2.20 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.32 所示。 图 2.32 局部函数 函数 muti()内部定义了局部函数 inner(),判断变量 m 是否为偶数,如果是偶数则返回 1, 否则返回 0。根据调用语句 muti(4,3),m=4 为偶数,故局部函数 inner()返回值为 1,函数 muti()的返回值为 3。 注意:通过上述方式定义的函数为局部函数,函数的作用域为自所属的框架函数,任何处于框架函数外 部对局部函数的引用均为不合法。 2.9.3 作为对象的函数 JavaScript 脚本语言中所有的数据类型、数组等均可作为对象对待,函数也不例外。可 以使用 new 操作符和 Function 对象的构造函数 Function()来生成指定规则的函数,其基本语 法如下: var funcName = new Function (arguments,statements;); 值得注意的是,上述的构造函数 Function()首字母必须为大写,同时函数的参数列表与 操作代码之间使用逗号隔开。考察如下测试代码: //源程序 2.21 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.33 所示。 图 2.33 作为对象的函数 通过 new 操作符和 Function()构造函数定义函数对象时,并没有给函数赋予名称,而是 定义函数后直接将其赋值给变量 newFunc,并通过 newFunc 进行访问,与通常的函数定义 不同。 注意:在定义函数对象时,参数列表可以为空,也可有一个或多个参数,使用变量引用该函数时,应将 函数执行所需要的参数传递给函数体。 作为对象的函数最重要的性质即为它可以创建静态变量,给函数增加实例属性,使得函 数在被调用之间也能发挥作用。考察如下测试代码: //源程序 2.22 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.34 所示。 图 2.34 创建静态变量 由上述结果可以看出,作为对象的函数使用静态变量后,可以用来保存其运行的环境参 数如中间值等数据。 2.9.4 函数递归调用 函数的递归调用即函数在定义时调用自身,考察如下实例代码: //源程序 2.35 Sample Page!
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图 2.35 所示。 图 2.35 函数递归调用 函数递归调用能使代码显得紧凑、简练,但也存在执行效率并低、容易出错、资源耗费 较多等问题,推荐在递归调用次数较少的情况下使用该方法,其余情况尽量使用其余方法来 代替。 2.9.5 语言注释语句 在 JavaScript 脚本代码中,可加如一些提示性的语句,以便提示代码的用途及跟踪程序 执行的流程,并增加程序的可读性,同时有利于代码的后期维护。上述提示性语句称作语言 注释语句,JavaScript 脚本解释器并不执行语言解释语句。 一般使用双反斜杠“//”作为每行解释语句的开头,例如: // 程序解释语句 值得注意的是,必须在每行注释语句前均加上双反斜杠“//”。例如: // 程序解释语句 1 // 程序解释语句 2 下面的语句为错误的注释语句: // 程序解释语句 1 程序解释语句 2 上述语句在中第二行不被脚本解释器作为解释语句,而作为普通的代码对待,即由脚本 解释器解释执行。 对于多行的解释语句,可以在解释语句开头加上“/*”,末尾加上*/,不须在每行开头 加上双反斜杠“//”。例如: /* 程序解释语句 1 程序解释语句 2 程序解释语句 3 */ JavaScript 脚本语言中,还允许使用 HTML 风格的语言注释,即用“”来结束注 释语句,而 HTML 中则必须用“-->”来结束注释语句。 为养成良好的编程习惯,最好不用 HTML 风格的语言注释语句,而使用双反斜杠“//” 来加入单行注释语句,用“/*”和“*/”加入多行注释语句。 2.9.6 函数应用注意事项 最后介绍一下在使用函数过程中应特别予以注意的几个问题,以帮助读者更好、更准确 确地使用函数,并养成良好的编程习惯。具体表现在如下几点: z 定义函数的位置:如果函数代码较为复杂,函数之间相互调用较多,应将所有函数 的定义部分放在 HTML 文档的和标记对之间,既可保证所有的函数 在调用之前均已定义,又可使开发者后期的维护工作更为简便; z 函数的命名:函数的命名原则与变量的命名原则相同,但尽量不要将函数和变量取 同一个名字。如因实际情况需要将函数和变量定义相近的名字,也应给函数加上可 以清楚辨认的字符(如前缀 func 等)以示区别; z 函数返回值:在函数定义代码结束时,应使用 return 语句返回,即使函数不需要返 回任何值; z 变量的作用域:区分函数中使用的变量是全局变量还是局部变量,避免调用过程中 出现难以检查的错误; z 函数注释:在编写脚本代码时,应在适当的地方给代码的特定行添加注释语句,例 如将函数的参数数量、数据类型、返回值、功能等注释清楚,既方便开发者对程序 的后期维护,也方便其他人阅读和使用该函数,便于模块化编程; z 函数参数传递:由于 JavaScript 是弱类型语言,使用变量时并不检查其数据类型, 导致一个潜在的威胁,即开发者调用函数时,传递给函数的参数数量或数据类型不 满足要求而导致错误的出现。在函数调用时,应仔细检查传递给目标函数的参数变 量的数量和数据类型。 其中第五点尤为值得特别关注,因由其导致的错误非常难于检测。考察如下两数乘法的 测试代码: function muti(x,y) { if(muti.arguments.length==2) return (x*y); } 以上代码检查了输入参数的数量,但未检查操作数的数据类型,例如输入字符串“num1” 和“num2”,并调用 multi(num1,num2)时,浏览器报错。修改函数 multi()如下: function muti(x,y) { if(muti.arguments.length==2) { if( (typeof(x)!="number" || (typeof(y)!="number")) return errorNum; else return (x*y); } return; } 这个函数既检查了参数的数量,又检查了参数的数据类型,避免了我们在调用时传递了 错误的参数数量或数据类型。 以上简要讨论了在使用函数时应注意的问题,应该说编写一个好的函数,一个好的脚本 程序是不容易的,需要读者朋友在以后的编程实践中去摸索,去总结,养成良好的编程习惯。 2.10 本章小结 本章介绍了 JavaScript 脚本语言的基本语法知识,包括数据类型、变量、运算符、核心 语句以及函数等相关内容。其中,数据类型和运算符较为简单,通过本章的学习相信读者可 以完全掌握;变量、核心语句和函数等知识,本章只作简要的介绍,在后续章节将加大介绍 的力度。 本章还涉及到小部分与对象相关的知识,在后续章节中将进行深入的讲解。JavaScript 脚本是基于事件的程序开发语言,下一章将重点介绍“JavaScript 事件处理”的相关知识。 第 3 章 JavaScript 事件处理 用户可以通过多种方式与浏览器中的页面进行交互,而事件是交互的桥梁。Web 应用 程序开发人员通过 JavaScript 脚本内置的和自定义的事件处理器来响应用户的动作,就可以 开发出更具交互性、动态性的页面。 本章主要介绍 JavaScript 脚本中的事件处理的概念、方法,列出了 JavaScript 预定义的 事件处理器,并且介绍了如何编写用户自定义的事件处理函数以及如何将它们与页面中用户 的动作相关联,以得到预期的交互性能。同时讲述了 IE4 和 NN4 对基本事件模型的扩展, 以及 DOM2 标准事件模型的架构等。 3.1 什么是事件 广义上讲,JavaScript 脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览 器的动作及该页面对用户操作的响应。事件的复杂程度大不相同,简单的如鼠标的移动、当 前页面的关闭、键盘的输入等,复杂的如拖曳页面图片或单击浮动菜单等。 事件处理器是与特定的文本和特定的事件相联系的 JavaScript 脚本代码,当该文本发生 改变或者事件被触发时,浏览器执行该代码并进行相应的处理操作,而响应某个事件而进行 的处理过程称为事件处理。 下面就是简单的事件触发和处理过程,如图 3.1 所示。 图 3.1 基本的用户动作触发事件示意图 如前所述,JavaScript 脚本中的事件并不限于用户的页面动作如 MouseMove、Click 等, 还包括浏览器的状态改变,如在绝大多数浏览器获得支持的 Load、Resize 事件等。Load 事 件在浏览器载入文档时触发,如果某事件(如启动定时器、提前加载图片等)要在文档载入 时触发,一般都在标记里面加入类似于“onload="MyFunction()"”的语句;Resize 事 件则在用户改变了浏览器窗口的大小时触发,当用户改变窗口大小时,有时需改变文档页面 的内容布局,使其以恰当、友好的方式显示给用户。 浏览器响应用户的动作,如鼠标单击按钮、链接等,并通过默认的系统事件与该动作相 关联,但用户可以编写自己的脚本,来改变该动作的默认事件处理器。举个简单的例子,模 拟用户单击页面链接的例子,该事件产生的默认操作是浏览器载入链接的 href 属性对应的 URL 地址所代表的页面,但利用 JavaScript 脚本可很容易编写另外的事件处理器来响应该单 击鼠标的动作。考察如下代码: MyLinker 鼠标单击页面中名为“MyLinker”的文本链接,其默认操作是浏览器载入该链接的 href 属性对应的 URL 地址(本例中为“http://www.baidu.com/”)所代表的页面,但程序员编写 了自定义的事件处理器即: onclick="javascript:this.href='http://www.sina.com/' 通过该 JavaScript 脚本代码,上述事件处理器取代了浏览器默认的事件处理器,并将页 面引导至 URL 地址为“http://www.sina.com/”指向的页面。 现代事件模型中引入 Event 对象,它包含其它对象使用的常量和方法的集合。当事件发 生后,产生临时的 Event 对象实例,并附加当前事件的信息如鼠标定位、事件类型等,然后 传递给相关的事件处理器进行处理。事件处理完毕后,该临时 Event 对象实例所占据的内存 空间被清理出来,浏览器等待其他事件的出现并进行处理。如果短时间内发生的事件较多, 浏览器按事件按发生的顺序将这些事件排序,然后按照该顺序依次执行。 事件发生的场合很多,包括浏览器本身的状态改变和页面中的按钮、链接、图片、层等。 同时根据 DOM 模型,文本也可以作为对象,并响应相关动作,如鼠标双击、,文本被选择 等。当然,事件的处理方法甚至于结果同浏览器环境有很大的关系,但总的来说,浏览器的 版本越新,所支持的事件处理器就越多,支持也就越完善。基于此,在编写 JavaScript 脚本 时,要充分考虑浏览器的兼容性,以编写适合大多数浏览器的安全脚本。 3.2 HTML 文档事件 HTML 文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面 对用户操作的响应,主要分为浏览器事件和 HTML 元素事件两大类。在了解这两类事件之 前,先来了解事件捆绑的概念。 3.2.1 事件捆绑 HTML 文档将元素的常用事件(如 onclick、onmouseover 等)当作属性捆绑在 HTML 元素上,当该元素的特定事件发生时,对应于此特定事件的事件处理器就被执行,并将处理 结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。考察如下 代码: MyLinker 上述代码为“MyLinker”文本链接定义了一个 Click 事件的处理器,返回警告框“You have Clicked the link!”。 同样,也可将该事件处理器独立出来,编成单独的函数来实现同样的功能。将下列代码 加入文档的和标记对之间: MyLinker 自定义的函数 MyClick()实现如下: function MyClick() { alert("You have Clicked the link!"); } 鼠标单击“MyLinker”链接后,浏览器调用自定义的 Click 事件处理器,并将结果(警 告框“You have Clicked the link!”)返回给浏览器。由事件处理器的实现形式来看,标记 的 onclick 事件与其 href 属性地位均等,实现了 HTML 中的事件捆绑策略。 3.2.2 浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件 onload、关闭该文档事件 onunload、浏览器失去焦点事件 onblur、获得焦点事件 onfocus 等。 先考察如下的代码: //源程序 3.1 Sample Page!

载入文档:

取得焦点:

失去焦点:

拖动滚动条:

变换尺寸:

将上述源程序保存为*.html(或*.htm)文档,双击该文档后系统调用默认的浏览器进行 浏览。 当载入该文档时,触发 window.load 事件,弹出警告框如图 3.2 所示。 图 3.2 载入文档时触发 window.load 事件 当把焦点给该文档页面时,触发 window.onfocus 事件,弹出警告框如图 3.3 所示。 图 3.3 文档取得焦点时触发 window.onfocus 事件 当该页面失去焦点时,触发 window.blur 事件,弹出警告框如图 3.4 所示。 图 3.4 文档失去焦点时触发 window.onblur 事件 当用户拖动滚动条时,触发 window.onscroll 事件,弹出警告框如图 3.5 所示。 图 3.5 拖动滚动条,触发 window.onscroll 事件 当用户改变文档页面大小时,触发 window.onresize 事件,弹出警告框如图 3.6 所示。 图 3.6 改变文档页面大小,触发 window.onresize 事件 浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容 等场合,在页面的交互性、动态性方面使用较为广泛。 注意:Netscape Navigator 4 支持 window.onmove 事件,该事件在当前浏览器窗口被用户移动时触发,主 要用于窗口的定位方面。Internet Explorer 不支持 window.onmove 事件。 3.2.3 HTML 元素事件 页面载入后,用户与页面的交互主要指发生在如按钮、链接、表单、图片等 HTML 元 素上的用户动作以及该页面对此动作所作出的响应。如简单的鼠标单击按钮事件,元素为 button,事件为 click,事件处理器为 onclick()。只要了解了该事件的相关信息,程序员就可 以编写此接口的事件处理程序,也称事件处理器,以完成诸如表单验证、文本框内容选择等 功能。 HTML 文档中元素对应的事件因元素类型而异,表 3.1 按 HTML4 标记类型和字母顺序 列出了当前通用版本浏览器上支持的事件。其中的标记代表标记对,如
代表 标记对,其余类似。 表 3.1 通用浏览器上定义的事件 标记类型 标记列表 事件触发模型 简要说明 onclick 鼠标单击链接 ondbclick 鼠标双击链接 onmouseDown 鼠标在链接的位置按下 onmMouseOut 鼠标移出链接所在的位置 onmouseOver 鼠标经过链接所在的位置 onmouseUp 鼠标在链接的位置放开 onKeyDown 键被按下 onkeyPress 按下并放开该键 链接 onkeyUp 键被松开 onerror 加载图片出现错误时触发 onload 图片加载时触发 onkeyDown 键被按下 onkeyPress 按下并放开该键 图片 onkeyUp 键被松开 ondbClick 双击该图形映射区域 onmouseOut 鼠标从该图形映射区域内移动到该区域之外 区域 onmouseOver 鼠标从该图形映射区域外移动到区域之内 onblur 文档正文失去焦点 onclick 在文档正文中单击鼠标 ondbClick 在文档正文中双击单击鼠标 onkeyDown 在文档正文中键被按下 onkeyPress 在文档正文中按下并放开该键 onkeyUp 在文档正文中键被松开 onmouseDown 在文档正文中鼠标按下 文档主体 onmouseUp 在文档正文中鼠标松开 onblur 当前窗口失去焦点 onerror 装入窗口时发生错误 onfocus 当前窗口获得焦点 onload 载入窗口时触发 onresize 窗口尺寸改变 帧、帧组 onunload 用户关闭当前窗口 onreset 窗体复位 窗体
onsubmit 提交窗体里的表单 onblur 按钮失去焦点 onclick 鼠标在按钮响应范围单击 onfocus 按钮获得焦点 onmouseDown 鼠标在按钮响应范围按下 按钮 onmouseUp 鼠标在按钮响应范围按下后弹起 onblur 复选框(或单选框)失去焦点 onclick 鼠标单击复选框(或单选框) 复选框 单选框 or "radio" onfocus 复选框(或单选框)得到焦点 onblur 复位(或确认)按钮失去焦点 onclick 鼠标单击复位(或确认)按钮 复位按钮 提交按钮 or "submit" onfocus 复位(或确认)按钮得到焦点 onblur 口令字段失去当前输入焦点 口令字段 onfocus 口令字段得到当前输入焦点 onblur 文本框失去当前输入焦点 onchange 文本框内容发生改变并且失去当前输入焦点 onfocus 文本框得到当前输入焦点 文本字段 onselect 选择文本框中的文本 onblur 文本区失去当前输入焦点 onchange 文本区内容发生改变并且失去当前输入焦点 onfocus 文本区得到当前输入焦点 onkeyDown 在文本区中键被按下 onkeyPress 在文本区中按下并放开该键 onkeyUp 在文本区中键被松开 文本区
滚动条 :
大小改变 :
目录按钮 :
地址栏 :
菜单栏 :

程序运行后,出现如图 7.24 所示的页面。 图 7.24 程序运行后的原始页面 在原始页面选中五个 checkbox 单选框,单击“新建浏览器窗口”按钮,浏览器将按照 表单中设定的属性弹出当前目录下 HTML 文档“temp.html”的页面,如图 7.25 所示。 图 7.25 按照设定的属性加载已存在的 HTML 文档 在原始页面选中五个 checkbox 单选框,在原始页面单击“写内容进空白页面”按钮, 浏览器将按照表单中设定的属性生成新浏览器窗口,并将文本域“MyContents”的内容 “Contents Write to the new blank window!”写进该页面,如图 7.26 所示。 图 7.26 生成新浏览器页面并写入指定的内容 该新建的 HTML 页面拥有写入的字符串,不包含任何格式信息。查看源文件,仅包含 “Contents Write to the new blank window!”字符串。 当然,往新建的 HTML 窗口动态写入 HTML 语句也是可行的。查看如下代码: var embedHtml="Sample Page!"; embedHtml+="Contents Write to the new blank window!"; NewWindow.document.write(embedHtml); 将上述代码替换源程序 7.4 中的下列语句: NewWindow.document.write(document.MyForm.MyContents.value); 保存后,运行该程序,单击“写内容进空白页面”按钮,弹出新页面,与源程序 7.4 一 样,但查看源程序,如图 7.27 所示。 图 7.27 将 HTML 语句写入新窗口 通过上述实例,读者可以适当扩展,按照需要给新窗口适当的属性值,然后根据新窗口 的引用名称动态写入 HTML 语句生成交互性较强的页面。 7.2.5 常见属性和方法汇总 Window 对象提供诸多属性和方法用于浏览器窗口操作,如获取和设置当前窗口信息、 创建浏览器窗口等。但由于各大浏览器厂商在继承 DOM 标准的基础上各自扩展了 Window 对象,而且浏览器的版本对 Window 对象的支持程度也不一样。出于兼容性考虑,表 7.2 列 出了 Internet Explorer(简称 IE,下同)和 Netscape Navigator(简称 NN,下同)浏览器平 台通用的 Window 对象常见属性和方法。 表 7.2 Window对象常见属性和方法汇总 类型 项目 简要说明 closed 表示窗口是否已被关闭 defaultStatus 窗口底部默认的状态栏信息 document 窗口中当前文档对象 frames 包含窗口中所有Frame对象的数组 history 包含窗口历史URL清单的History对象 location 包含与Window对象相关联的URL地址的对象 name 当前窗口的标识 opener 表示打开窗口的Window对象 parent 与包含某个窗口的父窗口含义相同 self 与当前窗口的含义相同 status 窗口底部的状态栏信息 属性 top 指一组嵌套窗口的最上层浏览器窗口 alert() 显示提示信息对话框 blur() 使当前窗口失去焦点 clearInterval(TimerID) 使由参数TimerID指定的间隔定时器失效 clearTimeout(TimerID) 使由参数TimerID指定的超时设置失效 close() 关闭当前窗口 conform(text) 显示确认对话框,text为确认内容 focus() 使当前窗口获得焦点 moveBy(deltaX,deltaY) 将浏览器窗口移动到由参数deltaX和deltaY(像素)指定相对距离的位置 moveTo(x,y) 将浏览器移动到由参数x和y(像素)指定的位置 open(URL,Name,Options) 按照Options指定的属性打开新窗口并创建Window对象 prompt(text[, str]) 显示提示对话框,text为问题,str为默认答案(可选参数) resizeBy(deltaX,deltaY) 将浏览器窗口大小按照参数deltaX和deltaY(像素)指定的相对像素改变 resizeTo(x,y) 将浏览器窗口的大小按照参数参数x和y(像素)指定的值进行设定 scroll(hori,Verti) 将目标文档移动到浏览器窗口中由参数hori和Verti指定的位置(NN3+) scrollBy(deltaX,deltaY) 在浏览器窗口中将文档移动由deltaX和deltaY指定相对距离的位置 scrollTo(x,y) 在浏览器窗口中将文档移动到由x和y指定的位置 setInterval(expression, milliseconds, [arguments]) 通过由参数milliseconds指定的时间间隔重复触发由参数expression指定 的表达式求值或函数调用,可选参数arguments为供函数调用的参数列 表,以逗号为分隔符 方法 setTimeout(expression, milliseconds, [arguments]) 通过由参数milliseconds指定的超时时间触发由参数expression指定的表 达式求值或函数调用,可选参数arguments为供函数调用的参数列表, 以逗号为分隔符 Window 对象为 Web 应用开发者提供了丰富的属性和操作浏览器窗口及事件的方法,通 过 Window 对象,可以访问对象关系层次中处于其下层的对象如 Navigator 对象等。下面讨 论与浏览器紧密相关的 Navigator 对象。 7.3 Navigator 对象 由于浏览器及其版本对 JavaScript 脚本的支持情况不同,出于脚本代码兼容性考虑,经 常需要获取客户端浏览器相关信息,以根据其浏览器具体情况编制不同的脚本代码。 Navigator 对象最初由 Netscape 浏览器引入,并在其 NN2 中获得支持。Microsoft 在其 IE3 上引入 Navigator 对象,但只支持其部分属性和方法。由于 Navigator 对象为程序员提供 了十分有效的浏览器相关信息而得到较为广泛的应用,Microsoft 在其 IE4 中引入 Navigator 对象的克隆版本即 clientInformation 对象并在 IE4 后续版本中得到更为完善的支持,该对象 的所有属性和方法与 Navigator 对象完全相同。不同的是,clientInformation 对象仅适用于 IE 浏览器,而 Navigator 对象则适用于所有浏览器,当然也包括 IE 浏览器。 同 Window 对象一样,Navigator 对象为浏览器对象模型中的顶级对象,而不是作为其 他对象的属性而存在。相比较 Window 对象而言,Navigator 对象与浏览器及其版本的关联 程度更紧密,对编写代码兼容性较强的应用程序贡献更大,但 Navigator 对象的属性多为只 读,且提供的操作方法也较少。 7.3.1 获取浏览器信息 在编写跨平台 JavaScript 脚本时,须事先获取客户端浏览器的相关信息,然后作对应的 操作,此方法可解决脚本代码在各浏览器中的兼容性问题。下面的代码演示了如何获取客户 端浏览器的相关信息并作相应的处理: //源程序 7.5 Sample Page!
程序运行后,单击页面中的“测试”按钮,如果客户端浏览器为 IE4+,则弹出警告框 如图 7.28 所示。 图 7.28 当客户端浏览器为 IE4+时弹出警告框 如果客户端浏览器为 NN2+,则弹出警告框如图 7.29 所示。 图 7.29 当客户端浏览器为 NN2+时弹出提示框 浏览器载入页面后,客户单击“测试”按钮,触发 GetInfo()函数,该函数判断当前浏览 器的类型:若其 appName 属性为“Netscape”,则转向 displayNNInfo()函数输出当前浏览器 相关信息;若其 appName 属性为“Microsoft Internet Explorer”,则转向 displayIEInfo()函数 输出当前浏览器相关信息。 注意:上述程序的调试平台为 IE6 和 NN7,较低浏览器版本可能不支持某些属性,有关 Navigator 对象 属性的版本支持将在后面列表详述。 7.3.2 常见方法和属性汇总 Navigator 对象拥有的属性和方法随浏览器版本的更新而不断增加,总的来说,除了早 期的 Navogator 对象的基本属性和方法之外,大多数新增的属性和方法都与浏览器版本相关。 表 7.3 列出了 Navigator 常见的属性、方法及浏览器支持情况。 表 7.3 Navigator常见的属性和方法 类型 项目 简要说明 浏览器支持 appCodeName 返回包含每个浏览器的客户类,代表浏览器代码号 NN2+、IE3+ appName 返回浏览器官方名称,如IE的Microsoft Internet Explorer等 NN2+、IE3+ appVersion 返回浏览器的版本号 NN2+、IE3+ cookieEnabled 标记浏览器的cookie功能是否已开启 NN6+、IE4+ MimeTypes 保存MIME类型信息的数组 NN4+、IE4+ Plugins 保存网页中插件程序的数组 NN3+、IE4+ platform 保存操作系统的类型 NN4+、IE4+ userAgent 保存从客户端向服务器发送的HTTP协议用户代理头的值 NN2+、IE3+ appMinorVersion 返回浏览器的次版本号 IE4+ cpuClass 返回运行浏览器的中央处理器种类 IE4+ browserLanguage 返回程序本地语言版本的标识符 IE4+ userLanguage 返回当前操作系统使用的自然语言 IE4+ systemLanguage 返回操作系统默认使用的语言 IE4+ online 标记浏览器确定脱机浏览的状态,联机状态下该属性为true IE4+ userProfile 返回用户的档案设置 IE4+ 属性 language 返回浏览器应用程序的语言代码 NN4+ javaEnabled() 返回浏览器是否禁止Java的标志位 NN3+,IE4+ taintEnabled() 返回浏览器支持数据感染安全特性的标志位 NN3+、IE4+ 方法 preference() 允许标识的脚本获取并设置某些 Navigator 的首选项信息 NN4+ Navigator 对象的属性和方法在实际调用过程中,除了理解其基本含义外,还需了解以 下几项内容: z appName 属性返回浏览器应用程序的官方名称,IE 浏览器的官方名称为“Microsoft Internet Explorer”,NN 浏览器的官方名称为“Netscape”,而有些浏览器则通过 Navigator 对象的扩展方法来检测其官方名称,如 Opera 浏览器的 isOpera()、Safari 浏览器的 isSafari()等。 z appVersion 属性返回当前浏览器的版本号,一般情况下可通过 parseInt()和 parseFloat()方法提取其中的数值再进行相关比较,但此数值更多的是表现浏览器版 本的继承特性而不是真正的版本号,如 IE6 的 appVersion 属性在提取数值后,返回 4 而不是 6。 z platform 属性返回操作系统的类型。Win32 代表 Window XP、Win98 代表 Windows 98、WinNT 代表 Windows NT、Win16 代表 Window3.x、Mac68k 代表 Mac(680x0 CPU)、MscPPC 代表 Mac(PowerPC CPU)、SunOS 代表 Saloris 等。 z plugins 属性在 IE4+上获得支持,但返回一个空数组,表示不包含任何 IE 中不存在 的对象。 Navigator 对象从本质上说是在顶级对象模型中与浏览器类型及其版本紧密相关的顶级 对象,其属性和方法随着浏览器类型、版本及系统设置的完成而确定下来,多为只读的属性 和方法。Navigator 对象又包括两个作为其属性的对象,分别为 mimeType 对象和 plugin 对 象,该部分内容在后续章节详细叙述。下面介绍与浏览器物理相关的 Screen 对象。 7.4 Screen 对象 Screen 对象最初由 NN4 引入,该对象提供了客户端用户屏幕的相关信息,如屏幕尺寸、 颜色深度等。如同 Navogator 对象由 NN2 引入后 Micorsoft 在其 IE3 中引入 Navigator 对象的 克隆版本 clientInformation 对象一样,在 NN4 中 Screen 对象引入后,Microsoft 在其 IE4 中 定义了新的 Screen 对象,其属性和方法与 NN4 中定义的完全相同,不同点在于 IE4 中的 Screen 对象作为 Window 对象的属性而存在,而 NN4 中 Screen 对象和 Window 对象同为顶 级对象模型的成员。 Screen 对象的属性可用 screen.property 的方式调用,在 IE4+中还可以使用如下的语法: [window.]navigator.screen.property Screen 对象基本的属性包括 height、width 和 colorDepth 等,但各浏览器厂商都对其进 行了一定的扩展,如 NN4 扩展了 availLeft 和 availTop、pixelDepth 等属性,用于返回屏幕可 用区域的初始像素位置坐标(像素);IE4 扩展了 bufferDepth 属性,用于打开 offscreen 缓冲 并控制缓冲的颜色深度等。除此之外,NN4 和 IE4 共同扩展了 availHeight 和 availWidth 等 属性,前两个表示客户端屏幕的可用尺寸(像素),而后者返回客户端的“显示”控制面板 中设置的颜色位数。 7.4.1 获取客户端屏幕信息 在 Web 应用程序中,为某种特殊目的如固定文档窗口相对于屏幕尺寸的比例、根据显 示器的颜色位数选择需要加载的目标图片等都需要首先获得屏幕的相关信息。Screen 对象提 供了 height 和 width 属性用于获取客户屏幕的高度和宽度信息,如分辨率为 1024*768 的显 示器,调用这两个属性后分别返回 1024 和 768。但并不是所有的屏幕区域都可以用来显示 文档窗口,如任务栏等都占有一定的区域。为此,Screen 对象提供了 availHeight 和 availWidth 属性来返回客户端屏幕的可用显示区域。一般来说,Windows 操作系统的任务栏默认在屏幕 的底部,也可以被拖动到屏幕的两侧或者顶部。假定屏幕的分辨率为 1024*768,当任务栏 在屏幕的底部或者顶部时,其占据的屏幕区域大小为 1024*30(像素);当任务栏被拖动到 屏幕两侧时,其占据的屏幕区域大小为 60*768。 考察如下针对不同浏览器平台获取客户端屏幕相关信息的代码: //源程序 7.6 Sample Page!
保存文档,若使用 IE 浏览器打开,当任务栏在屏幕底端或顶端时,在目标页面上鼠标 鼠标单击“测试”按钮,将弹出警告框如图 7.30 所示。 图 7.30 IE 中当任务栏在底端或顶部时的屏幕信息 当任务栏在屏幕两侧时,在目标页面上鼠标单击“测试”按钮,将弹出警告框如图 7.31 所示。 图 7.31 IE 中当任务栏在两侧时的屏幕信息 若使用 NN 浏览器打开,无论任务栏在屏幕的哪个位置,在目标页面上鼠标单击“测试” 按钮,将弹出警告框如图 7.32 所示。 图 7.32 NN 中获取屏幕的相关信息 可以发现,不管任务栏在何种位置,其 availHeight 和 availWidth 属性都返回默认状态 栏在底部时可用的区域高度和宽度。 获取客户端屏幕的相关信息后,就可以通过 JavaScript 脚本来进行感兴趣的操作,如窗 口的尺寸、位置及文档中图片的大小等。典型应用如全屏页面、保持图片与文档页面大小比 例等。 7.4.2 定位窗口到指定位置 通过 Screen 对象的属性获得屏幕的相关信息后,结合 Window 对象有关窗口移动、更 改尺寸的属性,可准确定位目标窗口。实际应用中如跟随鼠标移动的窗口、拥有固定位置的 窗口等。考察如下控制窗口位置的代码: //源程序 7.7 Sample Page!

顺序单击如下按钮,实现窗口准确定位






程序运行后,原始页面如图 7.33 所示。 图 7.33 使用 Screen 对象的属性控制窗口位置 程序主要分为如下几个步骤: z 在页面中单击“初始化浏览器窗口”按钮,按照 InitWindow()函数设定的参数值初 始化目标窗口。通过 Window 对象的 moveTo()方法将窗口移动到(200,200)位置,并 通过其 resizeTo()方法改变目标窗口大小为 480*320,单位均为像素值; z 单击“将浏览器窗口居中”按钮,JavaScript 脚本通过 Screen 对象的 width 和 height 属性及窗口的宽度和高度计算窗口居中时其左上顶点的坐标,通过 Window 对象的 moveTo()方法将目标窗口居中; z 单击“开始目标窗口移动”按钮,触发 StartMove()函数启动间隔时间计时器,该 计时器连接到函数 MoveWindow(),后者计算目标窗口的当前位置设定移动的方向 和下一个位置,并通过 Window 对象的 moveTo()方法更新目标窗口的位置。此过 程在间隔时间计时器的控制下循环进行,实现窗口的移动; z 单击“停止目标窗口移动”按钮,取消控制窗口移动的间隔时间计时器,并通过 CenterWindow()函数将窗口居中放置; z 单击“全屏化浏览器窗口”按钮,触发 FullWindow()函数,后者通过检查客户端浏 览器的类型,并调用其支持的属性,通过 Window 对象的 moveTo()和 resizeTo()方 法将目标窗口最大化。 上述代码演示了如何精确控制指定窗口的位置,在窗口移动过程中,可通过缩短间隔计 时器时间并减小像素的每次偏移 xDirection 和 yDirection 的初始值来达到使目标窗口移动流 畅的目的。 7.4.3 常见属性和方法汇总 Screen 对象提供较少但非常有效的属性用于获取客户端屏幕的相关信息并据此作出相 应的动作。表 7.4 列出了 Screen 对象常见的属性及浏览器支持情况。 表 7.4 Screen对象常见属性和方法汇总 属性 简要说明 浏览器支持 availHeight 返回客户端屏幕分辨率中可用的高度(像素) NN4+、IE4+ availWIdth 返回客户端屏幕分辨率中可用的宽度(像素) NN4+、IE4+ height 返回客户端屏幕分辨率中的高度(像素) NN4+、IE4+ width 返回客户端屏幕分辨率中的宽度(像素) NN4+、IE4+ colorDepth 返回客户端“显示”控制面板中设置的颜色位数 NN4+、IE4+ availLeft 返回客户端屏幕的可用区域最左边初始像素位置(像素) NN4+ availTop 返回客户端屏幕的可用区域最顶端初始像素位置(像素) NN4+ pixelDepth 返回客户端“显示”控制面板中设置的颜色位数 NN4+ bufferDepth 返回标记offscreen缓冲是否打开和缓冲的颜色深度,默认值为0 IE4+ Screen 对象保存了客户端屏幕的相关信息,与文档本身相关程度较弱。下面介绍在顶级 对象模型中与浏览器浏览网页后保存已访问页面和所在位置相关信息的 History 对象和 Location 对象。 7.5 History 对象 在顶级对象模型中,History 对象处于 Window 对象的下一个层次,主要用于跟踪浏览 器最近访问的历史 URL 地址列表,但除了 NN4+中使用签名脚本并得到用户许可的情况之 外,该历史 URL 地址列表并不能由 JavaScript 脚本显示读出,而只能通过调用 History 对象 的方法模仿浏览器的动作来实现访问页面之间的漫游。 7.5.1 使用 back()和 forward()方法进行站点导航 History 对象提供 back()、forward()和 go()方法来实现站点页面的导航。back()和 forward() 方法实现的功能分别与浏览器工具栏中“后退”和“前进”导航按钮相同,而 go()方法则可 接受合法参数,并将浏览器定位到由参数指定的历史页面。这三种方法触发脚本检测浏览器 的历史 URL 地址记录,然后将浏览器定位到目标页面,整个过程与文档无关,但在 IE 和 NN 浏览器中这两种方法又存在着不同点。 在 IE3+中,back()和 forward()方法模拟工具栏的物理行为,并不局限于框架集中特定的 框架。如果要确保框架集中特定框架的跨浏览器的行为,而不是跨浏览器版本的行为,则须 将 history.back()和 history.forward()方法的引用传递给父窗口。 在 NN4 中,History 对象的 back()和 forward()方法遵循其基本功能,同时又变成一对 Window 对象的方法 window.back()和 window.forward()。除此之外,History 对象不局限于框 架集中使用,当框架集中使用 parent.frameName.history.forward()到达框架历史 URL 地址记 录的尾部时,此方法无效。 站点导航是 back()和 forward()方法应用最为广泛的场合,可以想象在没有工具栏或菜单 栏的页面(如用户注册进程中间页面等)中设置导航按钮的必要性。考察站点页面导航的实 例,先看简单的框架集文档“index.html”的代码: //源程序 7.8 Sample Page! 其中 HTML 文档“01.html”与下面将要引用的“02.html”、“03.html”、“04.html”文档 类似,只列出“01.html”文档的代码: //源程序 7.9 测试文档 01

测试文档 01

测试文档具体内容

页面中左框架文档“left_main.html”的代码如下: //源程序 7.10 Sample Page!

控制框架页面

演示文档 01
演示文档 02
演示文档 03
演示文档 04

NN4+独有方法 :

window.back() :
window.forward() :

NN4+和 IE3+公共方法 :

parent.Display.history.back() :
parent.Display.history.forward() :

访问当前框架历史记录 :

history.back() :
history.forward() :

访问父页面历史记录 :

parent.history.back() :
parent.history.forward() :
保存后运行“index.html”文档,显示如图 7.34 所示的页面。 图 7.34 使用 back()和 forward()方法进行站点页面导航 除非要在导航到另外一地址之前需要进行一些附加操作,否则只需将 back()和 forward() 方法作为参数传递给按钮定义的事件处理属性即可: 出于兼容性考虑,一般通过框架对象的parent属性回溯到父文档中调用back()和forward() 方法进行导航。 值得注意的是,History 对象的 back()和 forward()方法只能通过目标窗口或框架的历史 URL 地址记录列表分别向后和向前延伸,两者互为平衡。这两种方法有个显著的缺点,就 是只能实现历史 URL 地址列表的顺序访问,而不能实现有选择的访问。为此,History 对象 引入了 go()方法实现历史 URL 地址列表的随机访问。 7.5.2 使用 go()方法进行站点导航 History 对象提供另外一种站点导航的方法即 history.go(index|URLString),该方法可接受 两种形式的参数: z 参数 index 传入导航目标页面与当前页面之间的相对位置,正整数值表示向前,负 整数值表示向后。 z 参数 URLString 表示历史 URL 列表中目标页面的 URL,要使 history.go(URLString) 方法有效,则 URLString 必须存在于历史 URL 列表中。 更改上节中的“left_main.html”文档,使用 history.go()方法进行站点页面导航: //源程序 7.11 Sample Page!

控制框架页面

演示文档 01
演示文档 02
演示文档 03
演示文档 04
演示文档 05
演示文档 06
演示文档 07
演示文档 08
演示文档 09
演示文档 10

目标页面偏移 :

历史页面 URL :

该程序将文本框数值或 URL 地址作为参数调用 History 对象的 go()方法实现站点页面的 导航,其中“01.html”、“02.html”、…、“10.html”与源程序 7.9 中“01.html”文档结构类 似,内容基本相同。主框架集文档“index.html”与源程序 7.8 相同。 运行“index.html”文档,显示如图 7.35 所示页面。 图 7.35 使用 go()方法进行站点页面导航 History 对象的 go()方法可传入参数 0 并设置合适的间隔时间计时器来实现文档页面重 载。同时,history.go(-1)等同于 history.back(),history.go(1)等同于 history.forward()。 值得注意的是,go()方法在 IE 浏览器较老版本中获得的支持欠佳,具体表现在如下几 个方面: z IE3 中在 go()方法传入非 0 值,其结果相当于传入参数-1,即返回上一页面(如果 存在的话)。同时,go()方法不接受字符串类型的历史 URL 地址; z IE4 中,匹配字符串必须是 URL 的一部分,而不是文档标题的一部分。同时,传 入参数 0 进行页面重载时,浏览器直接请求服务器返回重载页面,而不是从文档缓 存中重载。 实际应用中,由于历史 URL 地址列表对用户而言一般为不可见的,所以其相对位置不 确定,很难使用除-1、1 和 0 之外的参数调用 go()方法进行准确的站点页面导航。 7.5.3 常见属性和方法汇总 History 对象在处理历史 URL 地址列表并进行站点页面导航方面有着广泛的应用,表 7.5 列出了其常见的属性、方法以及浏览器支持情况。 表 7.5 History对象常见属性和方法汇总 类型 项目 简要说明 浏览器支持 length 保存历史URL地址列表的长度信息 NN2+、IE3+ current 在具有签名脚本的网页中指向历史URL列表的当前项 NN4+ 属性 next 在具有签名脚本的网页中指向历史URL列表当前项的前一项 NN4+ previous 在具有签名脚本的网页中指向历史URL列表当前项的下一项 NN4+ back() 浏览器载入历史URL地址列表的当前URL的前一个URL NN2+、IE3+ forward() 浏览器载入历史URL地址列表的当前URL的下一个URL NN2+、IE3+ 方法 go(num|str) 浏览器载入历史URL列表中由参数num指定相对位置的URL地址 对应的页面、或由参数str指定其URL地址对应的页面。 NN2+、IE3+ 总的来说,JavaScript 脚本很难使用 History 对象提供的方法来管理历史 URL 地址列表 或者明确当前 URL 在此列表中的相对位置,使得脚本在站点页面导航时精确定位相当困难, 如每个方向能导航多远、指定偏移相对位置将跳转到哪个 URL 等。 理解了保存浏览器访问历史 URL 地址信息的 History 对象,下面介绍与浏览器当前文档 URL 信息相关的 Location 对象。 7.6 Location 对象 Location 对象在顶级对象模型中处于 Window 对象的下一个层次,用于保存浏览器当前 打开的窗口或框架的 URL 信息。如果窗口含有框架集,则浏览器的 Location 对象保存其父 窗口的 URL 信息,同时每个框架都有与之相关联的 URL 信息。在深入了解 Location 对象 之前,先简单介绍 URL 的概念。 7.6.1 统一资源定位器(URL) URL(Uniform Resource Locator:统一资源定位器,以下简称 URL)是 Internet 上用来 描述信息资源的字符串,主要用在各种 WWW 客户程序和服务器程序上。采用 URL 可以用 一种统一的格式来描述各种信息资源,包括文件、服务器地址和目录等。 URL 常见格式如下: protocol://hostname[:port]/[path][?search][#hash] 参数的意义如下: z protocol:指访问 Internet 资源和服务的网络协议。常见的协议有 Http、Ftp、File、 Telnet、Gopher 等; z hostname:指要访问的资源和服务所在的主机对应的域名,由 DNS 负责解析。例 如 www.baidu.com、www.lenovo.com 等; z port:指网络协议所使用的 TCP 端口号,此参数可选,并且在服务器端可自由设置。 如 Http 协议常使用 80 端口等; z path:指要访问的资源和服务相对于主机的路径,此参数可选。假设目标页面 “query.cgi”相对于主机 hostname 的位置为/MyWeb/htdocs/,访问该页面的网络协 议为 Http,则通过 http://hostname/MyWeb/htdocs/query.cgi 访问; z search:指 URL 中传递的查询字符串,该字符串通过环境变量 QUERY_STRING 传递给 CGI 程序,并使用问号(?)与 CGI 程序相连,若有多项查询目标,则使用 加号(+)连接,此参数可选。例如要在“query.cgi”中查询 name、number 和 code 信息,可通过语句 http://hostname/MyWeb/htdocs/query.cgi?name+number+code 实现; z hash:表示指定的文件偏移量,包括散列号(#)和该文件偏移量相关的位置点名 称,此参数可选。例如要创建与位置点“MyPart”相关联的文件部分的链接,可在 链接的 URL 后添加“#MyPart”。 URL 是 Location 对象与目标文档之间联系的纽带。Location 对象提供的方法可通过传 入的 URL 将文档装入浏览器,并通过其属性保存 URL 的各项信息,如网络协议、主机名、 端口号等。 注意:search 代表的产旬字符串有多种形式,其形式与搜索引擎相关。如常见的名-值对应格式,用等号 (=)分开名字与对应的值,多个名值之间使用连接符(&)连接。上述的搜索字符串可表示 为:?name=zzangpu&num=200104&code=014104。在实际应用中常将查询字符串使用 escape()函数 转换位 URL 适用的格式。 7.6.2 Location 对象属性与 URL 的对应 浏览器载入目标页面后,Location 对象的诸多属性保存了该页面 URL 的所有信息,其 属性、方法及浏览器支持情况如表 7.6 所示。 表 7.6 Location对象的属性列表 类型 项目 简要说明 浏览器支持 hash 保存URL的散列参数部分,将浏览器引导到文档中锚点 NN2+、IE3+ host 保存URL的主机名和端口部分 NN2+、IE3+ hostname 保存URL的主机名 NN2+、IE3+ href 保存完整的URL NN2+、IE3+ pathname 保存URL完整的路径部分 NN2+、IE3+ port 保存URL的端口部分 NN2+、IE3+ protocol 保存URL的协议部分,包括协议之后的冒号 NN2+、IE3+ 属性 search 保存URL的查询字符串部分 NN2+、IE3+ assign(URL) 将以参数传入的URL赋予Location对象或其href属性 NN2+、IE3+ reload(Boolean) 重载(刷新)当前页面 NN3+、IE4+ 方法 replace(URL) 载入以参数URL传入的地址对应的文档 NN3+、IE4+ 在 URL 载入后,其各个部分将分别由 Location 对象的各个属性保存起来。考察如下典 型网页的 URL 地址实例: http://www.webname.com:80/MyWeb/htdocs/query.cgi?name+num+code#MyPart3 浏览器载入该 URL 对应的页面时创建 Window 对象,并立即创建 Location 对象,且将 URL 的各个部分作为其属性值保存起来,如表 7.7 所示。 表 7.7 创建Location对象后各属性与其值的对应表 属性 取值 hash #MyPart3 host www.webname.com:80 hostname www.webname.com href http://www.webname.com:80/MyWeb/htdocs/query.cgi?name+num+code#MyPart3 pathname /MyWeb/htdocs/query.cgi port 80 protocol http: search ?name+num+code 在使用 Location 对象的属性获得了 URL 地址的各个部分之后,可重新对属性赋值,实 现页面跳转、锚点间转移、指定搜索串等功能。考察如下使用 Location 对象的 hash 属性进 行锚点间跳转的实例代码: //源程序 7.12 Sample Page!

锚点间跳转实例

Start Anchor

First Anchor

Second Anchor

Third Anchor

Forth Anchor


程序运行结果如图 7.36 所示。 图 7.36 使用 Location 对象的 hash 属性进行锚点间跳转 单击页面中的“使用 hash 进行锚点转换”按钮,锚点在五个锚点间循环移动。主要使 用的语句为: window.location.hash=AnchorArray[index]; 同样,可以使用 Location 对象的 href 属性将浏览器页面导航到任意的 URL,方法如下: window.location.href=newURL; 在框架集中,Location 对象的引用需遵循一定的原则,考察如下的包含框架集的简单网 页代码: //源程序 7.13 Sample Page! 文档载入后,将产生几个 Location 对象,具体来说: z window.location:显示运行包含此脚本的文档的框架 URL; z parent.location:表示框架集的父窗口的 URL 信息; z parent.frames[0].location:表示框架集中第一个可见框架的 URL 信息; z parent.frames[1].location:表示框架集中第二个可见框架的 URL 信息; z parent.otherFrameName.location:同一框架集中另一个框架的 URL 信息。 可见,对于框架集中某一个可见框架而言,访问其 URL 信息,需先将引用指向其父窗 口,然后通过层次关系来调用。 7.6.3 使用 reload()方法重载页面 Location 对象的 reload()方法容易与浏览器工具栏中的 Reload/Refresh(重载/刷新)按钮 发生混淆,但前者比后者可实现的重载方式要灵活得多。总体来讲,reload()方法可实现的 重载方式主要有三种: z 强制从服务器重载:每次刷新页面时,浏览器都默认请求 Web 服务器返回当前 URL 对应的页面给客户端,此法使用 true 作为参数; z 启动会话时从服务器重载:如果 Web 服务器上的文档较之缓冲区内存放的文档新, 或者缓冲区内根本没有这个文档,则从 Web 服务器重载当前 URL 对应的页面; z 强制从缓冲区重载:每次刷新页面时,浏览器都默认请求浏览器从缓冲区载入当前 URL 对应的页面。如果缓冲区没有此页面,则从 Web 服务器重载。 前面已经讲述过,使用 History 对象的 go(0)方法也可实现页面的重载。从本质上讲,主 要体现了两种不同性质的重载。 history.go(0)方法重载页面时,在缓冲区取得文档,并保持页面中许多对象的状态,仅 改变其全局变量值及一些可设置但不可见的属性(如 hidden 输入对象的值等),该方法与浏 览器工具栏内的 Reload/Refresh(重载/刷新)按钮功能相同。 location.reload(URL)方法重载页面时,不管是从 Web 服务器还是从缓冲区重载,目标页 面内的所有对象都自动更新。 考察如下实现页面不同重载方式的代码: //源程序 7.14 Sample Page!

学籍注册程序

姓名 :

性别 : Male Female

年级 :

程序运行后,出现如图 7.37 所示的页面。 图 7.37 程序运行后的原始页面 在原始页面表单中更改“姓名”栏为“YSQ”、“性别”栏为“Female”、“年级”栏为“Class 3”后,出现如图 7.38 所示页面。 图 7.38 更改表单中各项参数 单击“使用 history.go(0)方法重载”按钮后,页面刷新但表单内容不变,结果如图 7.38 所示;单击“使用 location.reload()方法重载”按钮后,页面刷新且表单内容发生变化,结果 如图 7.37 所示。 Location 对象在搜索引擎和页面的重定位、重载等方面应用比较广泛,实际使用过程中 应综合使用字符串处理的有关方法如 substring()、escape()和 unescape()等方法分析目标 URL 地址以得到有用的信息。下面介绍与 Window 对象紧密相连的 Frame 对象。 7.7 Frame 对象 框架在 Web 应用程序设计中存在着很大的争议,某些场合使用框架能简化设计步骤, 如多页面导航实例中,可在一个固定的框架内添加导航控件如图片、按钮等,而在另外的框 架中显示导航的结果,这样客户端随时都可通过该导航控件控制其它框架的显示内容而不需 刷新整个文档。 浏览器载入含有框架的文档时自动创建 Frame 对象,并允许脚本通过调用 Frame 对象 的属性和方法来控制页面中的框架。在 IE 和 NN 浏览器中,一般将 Frame 对象实现为 Window 对象,但前者不支持 close()方法关闭框架自身,并且 Frame 对象拥有其独有的属性和方法用 于框架操作。在介绍 Frame 对象之前,先来了解框架集文档中对象的结构层次。 7.7.1 框架集文档中对象的结构 对于单个、无框架的文档,对象模型以 Window 对象开始,并将其作为对象模型层次的 起始点和默认的对象而存在,实际使用过程中可忽略对该对象的引用。 对于含有多个框架的框架集文档,该框架集文档作为父窗口,且此时浏览器的标题栏显 示的是框架集文档的标题。考察如下最简单的框架集文档代码: //源程序 7.15 Sample Page! 每个标记都可以加载一个新的文档(当然也可引入新的框架集文档形成更为复 杂的框架集文档)而产生各自的 document 对象,并可通过对象之间的层次关系进行访问操 作。父子对象之间通过 parent 对象进行联系,且存在 top 对象指向所有框架唯一共有的顶层 窗口。图 7.39 显示了上述框架集文档的结构: 图 7.39 简单的框架集文档模型 在对象模型中构造一个对象的引用,首先要获得目标对象的位置信息,然后应了解用何 种方法来实现该引用。在框架集文档中对框架的引用路径主要有三种: z 子到父 z 父到子 z 子对子 在子到父的引用路径中,可使用 parent 关键字实现;父到子的引用可直接使用对象模型 层次;而子到子的访问则需要通过 top 关键字引用其共有的父对象,然后通过该父对象实现 对另一框架的访问。综合如下: this.parent; parent.frameName; top.otherFrameName.document; Frame 对象的属性和方法受标记的控制,可在此标记内设定该框架的相关信息, 如框架是否有滚动条、边框的颜色等。一般而言,在标记内应设置其 ID 属性(或 name 属性)以实现对象的有效引用。在上述最简单的框架集文档中,可通过如下方法实现 对框架 Frame02 的 frameBorder 属性的访问(假设操作焦点在 Frame01 框架中): parent.document.all.Frame02.frameBorder; parent.document.getElementById("Frame02").frameBorder; 在嵌套的框架集文档中,可根据对象模型层次从顶层的 Window 对象开始引用并到达最 终的 Frame 对象,然后通过其属性和方法来操作该框架中载入的文档。 注意:如果框架集中某个框架载入了另外的框架集文档,则该框架的 top 属性属于另一个框架集文档中 定义的框架集。如果总是把 top 设定为父对象,则该引用将不可实现。实际应用中可通过判断顶 级文档是否为其 top 或 parent 属性载入,并根据结果实施页面重定位的方法来禁止框架中载入新 的框架集文档,进而解决对象引用失效的问题。 7.7.2 控制指定的框架 Frame 对象提供诸多的属性和方法用于控制制定的框架,如更改框架是否能改变大小的 标志、是否显示框架的滚动条等。 NN6+浏览器中实现的 Frame 对象提供 contentDocument 属性来引用与当前框架载入的 文档相关的 document 对象,从而获取框架中其它有用的信息。IE5.5+和 NN7 浏览器实现的 Frame 对象提供 contentWindow 属性来引用与当前框架产生的窗口相关的 Window 对象,从 而根据文档对象模型来获取 document 对象及其他信息。 例如某框架集文档包含两个框架分别为“FrameName1”和“FrameName2”,而 targetWin 是与“FrameName2”框架相关的 Window 对象,则在“FrameName1”框架所载入的文档中 可通过下面句子实现对 targetWin 的引用: var targetWin=parent.document.getElementById("FrameName1").contentWindow; 考察如下使用 Frame 对象的属性和方法控制框架的实例。首先考虑包含左右两个框架 并设定了相关参数的框架集文档: //源程序 7.16 Sample Page! 其中右侧框架中载入的“target.html”文档为“学籍注册程序”页面,包含文本框、单 选框和下拉框等。其程序代码如下: //源程序 7.17 Sample Page!

学籍注册程序

姓名 :

性别 :

年级 :

其中 MySubmitFunc()、MyCancleFunc()事件处理程序为演示程序,读者可自行扩充以实 现更为复杂的功能。框架集左侧框架载入的“leftmain.html”文档的代码如下: //源程序 7.18 Sample Page!

设置右侧框架信息

框架名称 :

边框显示 :

边框颜色 :

//设置右侧框架的元素对象信息

姓名字段 :

性别字段 :

年级字段 :


显示右侧框架信息

程序运行后,出现如图 7.40 所示的页面。 图 7.40 程序运行后的原始页面 此时单击“获取信息”按钮,则弹出包含右侧框架及其对应得 Frame 对象相关信息的 警告框,如图 7.41 所示。 图 7.41 页面载入时根据页面初始值设定的右侧框架信息 在原始页面更改右侧框架及 Frame 对象的相关信息,将 Frame 对象的 name 属性改为 “RightFrame”,frameBorder 属性改为“no”,borderColor 属性改为“red”,“姓名字段”文 本框改为“YSQ”,“性别字段”单选框改为“女”,“年级字段”下拉框改为“class 3”。然 后单击“提交设置”按钮后更新右侧框架及其对应的 Frame 对象相关信息。 单击“获取信息”按钮,弹出包含右侧框架及对应的 Frame 对象相关信息的警告框, 如图 7.42 所示。 图 7.42 更改相关设置后更新右侧框架及 Frame 对象相关信息 不同的浏览器通常都会在文档内容和框架之间添加空白区域以便文档载入时其内容能 自动插入到框架中。Frame 对象提供属性 marginHeight(上边界和下边界)、marginWidth(左边 界和右边界)来表示该空白区域的大小。 值得注意的是,Frame 对象的属性如 frameBorder、marginHeight 等都可读可写,但框架 集加载后,改变这些属性的取值能够改变其具体内容,并不能改变框架中文档的外观,而需 通过 document 对象调用其对应的属性和方法来修改。 7.7.3 常见属性和方法汇总 Frame 对象提供的属性和方法较少,主要用于设置框架的标记(如 name、src 等属性)、 改变框架的外观(如 borderColor、scrolling 等属性)等,表 7.8 列出了其常见的属性及浏览 器版本支持情况。 表 7.8 Frame对象常见的属性汇总 属性 简要说明 浏览器支持 allowTransparency 标记框架的背景是否透明,为Boolean值 IE6+ borderColor 设置框架边框的颜色,为三组16进制值或颜色字符串 IE4+ contentDocument 对框架载入的目标文档对应的document对象的引用 NN6+ contentWindow 对与框架对应的窗口相关的Window对象的引用 NN7+、IE5.5+ frameBorder 设置框架是否包含边框,为字符串“yes”或“no” NN6+、IE4+ height 保存框架的高度信息(像素) IE4+ marginHeight 保存框架与所载入文档之间空白区域的高度(像素) NN6+、IE6+ marginWidth 保存框架与所载入文档之间空白区域的宽度(像素) NN6+、IE6+ name 返回与框架相关的标识符,用于框架的引用 NN6+、IE4+ noResize 表示框架是否能改变大小的状态标识符 NN6+、IE6+ scrolling 表示框架打开和关闭滚动条的状态标识符 NN6+、IE6+ src 框架载入的文档对应的URL地址 NN6+、IE6+ width 保存框架的宽度信息(像素) IE4+ 注意:如果某属性的取值为 Boolean 类型,则在调用该属性时可使用 1 代替 true、0 代替 false 作为其取 值或返回的结果,下同。 框架(Frame)一般包含在框架集(Frameset)中,并且一个框架集一般包含多个框架。 下面简要介绍与框架集相关的 Frameset 对象和 iframe 元素对象。 7.7.4 Frameset 对象 Frameset 对象主要用于处理框架与框架之间的关系,如框架之间边框的厚度(像素)、 颜色及框架集的大小等。浏览器载入包含框架集的文档时,生成 Frameset 对象,表 7.9 列出 了其常见的属性及浏览器版本支持情况。 表 7.9 Frameset对象常见属性 属性 简要说明 浏览器支持 border 保存框架集中各框架之间的边框厚度信息(像素) IE4+ borderColor 保存框架边框的颜色,为三组16进制值或颜色字符串 IE4+ cols 保存框架集cols信息的字符串,以百分比或星号引入 NN6+、IE4+ frameBorder 设置框架是否包含边框,为字符串“yes”或“no” IE4+ frameSpacing 保存框架集中各框架之间的间距(像素) IE4+ rows 保存框架集rows信息的字符串,以百分比或星号引入 NN6+、IE4+ 在框架集文档中,如果某属性未被指定,则该属性为空,浏览器一般以该属性的默认值 来定义框架集,如框架集文档定义中 frameSpacing 属性未被指定时,该框架集中框架之间 的间距为默认值 2 像素。 一般而言,在框架集中访问 Frameset 对象的属性可通过如下方法: (IE4+) document.all.FramesetID.property (IE5+/W3C) document.getElementById(FramesetID).property 在框架集的某个框架内,可通过如下方法访问该 Frameset 对象: (IE4+) parent.document.all.FramesetID.property (IE5+/W3C) parent.document.getElementById(FramesetID).property 考察如下的框架集文档代码: //源程序 7.19 Sample Page! 该框架集包含六个框架,其中“target1.html”、“target2.html”、…、“target5.html”文档 格式基本相同,文档“target1.html”的代码如下: //源程序 7.20 Sample Page!

学籍注册

步骤之一
框架一载入的文档“main.html”实现对 Frameset 对象各属性的访问,同时可根据文档 中文本框、单选框和下拉框对应的值更新该对象的各项属性,同时更新框架集文档视图。其 代码如下: //源程序 7.21 Sample Page!

设置并显示框架集信息
边框显示 :
边框厚度 :
边框颜色 :
框架间距 :
行高信息 :
列宽信息 :

程序运行后,出现如图 7.43 所示的页面。 图 7.43 程序运行后的原始页面 在该页面中修改表单中各项 HTML 元素对应的值,如选择“边框显示”为“否”、“框 架间距”为 5,单击“提交更改并获取信息”按钮,将触发 SetInfo()函数更新 Frameset 对象 各个对应的属性。浏览器根据 Frameset 对象的新属性值来刷新目标页面的视图,如图 7.44 所示。 图 7.44 更改 Frameset 对象的属性后刷新视图 在更新目标页面视图的同时,将弹出包含修改前后框架集文档对应的 Frameset 对象属 性值对比信息的警告框。如选择“边框显示”为“否”、“边框厚度”为 10、“框架间距”为 20,并单击“提交更改并获取信息”按钮后,浏览器更新目标页面视图并弹出警告框如图 7.45 所示。 图 7.45 修改前后 Frameset 对象各属性值对比 值得注意的是,Frameset 对象的属性均为可读可写,但在框架集载入后,某些属性的更 改并不反映到页面布局上来,如 frameBorder、border 属性等,其更多的是作为可读的属性 而存在。 由上面的实例不难看出,框架集文档中的 Frameset 对象在框架管理方面提供快捷的途 径来操作指定的项目并能实时更新目标页面。当框架集文档中所含的框架比较多或结构嵌套 比较复杂的情况下,一般设定框架的 name 属性(或 id 属性),然后通过父窗口 document 对象的 getElementById(FrameID)方法准确定位,并进行相关操作。 7.7.5 iframe 元素对象 iframe 元素对象本质上是通过标记对嵌入目标文档到父文档时所产 生的对象,表示浮动在父窗口中的目标文档,表 7.10 列出了其常见的属性及浏览器版本支 持情况。 表 7.10 iframe元素对象常见属性汇总 属性 简要说明 浏览器支持 align 根据文档中其他元素的位置对目标iframe元素进行定位 NN6+、IE4+ allowTransparency 标识iframe的背景是否透明 IE6+ contentDocument 包含对iframe框架内文档对象的引用 NN6+ contentWindow 包含对iframe框架所产生的Window对象的引用 NN7+、IE5.5+ height 保存iframe框架的高度信息(像素) NN6+、IE4+ Hspace 保存iframe框架左右边框的页边空白(像素) IE4+ longDesc 提供一个包含iframe元素详细描述的文档的URL NN6+、IE6+ marginHeight 保存iframe框架上下边框与外部元素之间的间隔(像素) NN6+、IE4+ marginWidth 保存iframe框架左右边框与外部元素之间的间隔(像素) NN6+、IE4+ name 标识目标iframe框架的字符串 NN6+、IE4+ scrolling 标识目标iframe框架是否含有的滚动条的Boolean值 NN6+、IE4+ src 保存嵌入目标iframe框架内文档的URL NN6+、IE4+ Vspace 保存iframe框架上下边框的页边空白(像素) IE4+ Width 保存iframe框架的宽度信息(像素) NN6+、IE4+ iframe 元素对象的访问方法与 Frameset 对象类似,在父文档中访问 iframe 元素对象的 属性可通过如下方式: (IE4+) document.all.iframeID.property (IE4+/NN6+) window.frames[iframeID].property (IE5+/W3C) document.getElementById(iframeID).property 在包含 iframe 元素对象的文档内,可通过如下方式访问该 iframe 元素对象: (IE4+) parent.document.all.iramesetID.property (IE5+/W3C) parent.document.getElementById(FramesetID).property 考察如下通过 iframe 元素对象的属性操作其对应框架的代码: //源程序 7.22 Sample Page!
设置并显示框架集信息
框架对齐 :
背景透明 :
框架高度 :
框架宽度 :
空白高度 :
空白宽度 :
滚动显示 :
文档地址 :

框架集对象的属性均为可读可写,但某些属性的更改并不反映到页面视图中. 当框架集文档中所含的框架比较多时,一般需设定框架的 name 属性或 id 属性.
其中“空白高度”和“空白宽度”表示框架中的内容与边框之间的距离(像素),而“ 水 平空白”和“垂直空白”表示框架与其外部文档之间的距离(像素);测试文档“target.html” 和“other.html”为普通的 HTML 页面。 程序运行后,出现如图 7.46 所示的页面。 图 7.46 程序运行后出现的原始页面 在原始页面中修改各个下拉框的选项及文本框的内容后,单击“提交更改并获取信息” 按钮,将弹出包含修改前后框架对应的 iframe 元素对象各属性值对比信息的警告框。如修 改 “框架对齐”为“middle”、“框架高度”为 300、“框架宽度”为 350 等信息,并单击“提 交更改并获取信息”按钮后,浏览器根据设置的属性值更新目标页面视图并弹出警告框如图 7.47 所示。 图 7.47 修改前后 iframe 元素对象各属性值对比 iframe 对象的 align 属性表示框架与其外内容的对齐方式,可以利用 JavaScript 脚本动态 调整该属性来定位目标框架。表 7.11 列出了该属性的可能取值及简要说明: 表 7.11 iframe元素对象的align属性的可能属性值 取值 简要说明 absbottom 框架的底部与周围文本下方的虚线对齐 absmiddle 框架的中部与周围文本的top和absbottom值之间的中心点对齐 baseline 框架的滚动条按钮与周围文本的基线对齐 bottom 框架的滚动条按钮与周围文本的基线对齐(IE) left 根据新设定的属性值刷新框架,同时使该框架与包含元素的左边缘对齐 middle 框架的垂直方向中心线与周围文本的虚垂直中心线对齐 right 根据新设定的属性值刷新框架,同时使该框架与包含元素的右边缘对齐 texttop 框架顶部与周围文本顶部最高点的虚线对齐 top 框架顶部与周围元素顶部最高点的虚线对齐 值得注意的是,除 contentDocument 和 contentWindow 属性为只读外,iframe 对象的其 余属性均为可读可写,但并非所有的属性被改变后都能实时更新目标 iframe 框架,如控制 滚动条显示与否的 scrolling 属性、控制框架与其外部的文档之间空白尺寸的 hspace 和 vspace 属性等,其更多的是作为一种只读属性而存在。 下面简要介绍顶级对象模型中的 Document 对象。 7.8 Document 对象 JavaScript 主要作为一门客户端脚本而存在,在与客户交互的过程中 Document 对象扮 演着及其重要的角色。深入理解 Document 对象对编写跨浏览器的 Web 应用程序是 JavaScript 脚本程序员进阶的关键。 Document 对象在顶级对象模型中处于较低的层次,通俗地说,浏览器载入文档后,首 先产生顶级对象模型中的 Window、Frame 等对象,且当该文档包含框架集时,一个 Window 对象下面可包含多个 Document 对象。 Document 对象及其组件相关的内容相当丰富,在“Document 对象”章节将对 Document 对象作专门的讲述。 7.9 本章小结 本章主要讲述了Window及相关顶级对象如Frames、Navigator、Screen、History、Location、 Document 等,并从实际应用的角度分析了其创建过程、属性、方法、操作实例等。并重点 介绍了如何通过这些对象创建和管理浏览器窗口及文档中的框架。 Document 对象提供了与客户交互的平台,使用 JavaScript 脚本操作 Document 对象可以 创建动态、交互性较强的页面,下一章将重点介绍 Document 对象的创建,以及如何使用 JavaScript 脚本调用其属性和方法来动态更新页面。 第 8 章 Document 对象 Document 对象在顶级对象模型中占据非常重要的地位,它可以更新正在装入和已经装 入的文档,并使用JavaScript脚本访问其属性和方法来操作已加载文档中包含的HTML元素, 如表单 form、单选框 radio、下拉框 checkbox 等,并将这些元素当作具有完整属性和方法的 元素对象来引用。本章将重点讲述顶级对象模型中 Document 对象及与其相关的 body 元素 对象的基础知识,如对象的创建、引用及与其它 HTML 元素对象之间的相互关系等。 8.1 对象模型参考 客户端浏览器载入目标 HTML 文档后,在创建顶级对象模型中其它顶级对象的同时, 创建 Document 对象的实例,并将该实例指向当前的文档。当文档包含多个框架组成的框架 集或者在该文档中由标记对引入其它外部文档时,当前浏览器窗口就同 时包含了多个 Document 对象。Web 程序开发人员根据对象之间的相对位置关系使用 JavaScript 脚本进行相关操作如对象定位、访问等。 Document 对象在文档结构模型中处于顶级层次,但较之如 Window 等其它顶级对象而 言,该对象与客户端浏览器的关联程度比较小,而与所载入文档本身的关联程度较为紧密。 图 8.1 从 Document 对象的角度出发,显示了它在文档对象模型的参考层次中所处的相对位 置(NN4+和 IE4+文档结构模型通用): 图 8.1 Document 对象模型参考 在上述的对象模型参考中,灰色表示的是 DOM 中的顶级对象,而 Document 对象所在 层次之下的对象为目标文档包含的 HTML 元素对象。可见在文档中定位了 Document 对象之 后,就可根据对象的层次关系操作其层次之下任意的元素对象。 注意:上面描述的对象模型中 frames 分别作为顶级对象和 Document 对象包含的元素对象而存在,因为 当某文档包含框架集时,frames 对象作为该文档对应的 Document 对象的元素对象而存在。当框 架集中某个框架载入另一个文档时,该文档对应的 Document 对象又作为 frames 对象下一层次的 对象而存在。 8.2 Document 对象 Document 对象包括当前浏览器窗口或框架内区域中的所有内容,包含文本域、按钮、 单选框、复选框、下拉框、图片、链接等 HTML 页面可访问元素,但不包含浏览器的菜单 栏、工具栏和状态栏。 Document 对象提供多种方式获得 HTML 元素对象的引用,如在某目标文档中含有多个 通过
标记对引入的表单,则可通过如下方式获得对该文档中 forms 对象数 组长度信息的引用: document.forms.length document.getElementsByTagName("form").length 获取了对象数组信息后,就可以根据目标文档中该类型对象的相对位置定位某对象,如 循环检索 forms 数组各表单的 name 属性的代码: var MyForms=document.forms; for(i=0;i Sample Page! 该框架集文档包含右框架文档“target.html”和左框架文档“leftmain.html”,其中前者 为普通测试文档,而后者为包含链接、图片、插件、表单等 HTML 页面可见元素的文档, 其代码如下: //源程序 8.2 Sample Page!

获取文档 Document 对象信息

链接 :

超级链接一
超级链接二
超级链接三
图片 :
音乐 :
多媒体 :
表单一 :

单选框 :
下拉框 :
表单二 :

复选框 :
文本框 :
程序运行后,出现如图 8.2 所示的原始页面。 图 8.2 程序运行后的原始页面 鼠标单击上述原始页面中的“获取信息”按钮后,触发 GetInfo()函数收集当前文档对应 的 Document 对象相关信息,并使用警告框输出,如图 8.3 所示。 图 8.3 当前文档的 Document 对象信息 由上图可以看出,浏览器载入文档后,根据 HTML 元素载入的顺序和类型生成对象数 组并按顺序分配数组下标以便 JavaScript 脚本对各元素对象进行访问。对象数组生成后,可 根据数组中各元素的相对位置或其标识符(name 属性等)来引用。如在上述实例中,表单 MyForm3 载入时顺序为 3,则可通过下面的方式引用该表单的 name 属性: document.forms["MyForm3"].name document.forms[2].name 当然,也可使用如下方式直接进行访问: document.all.MyForm3.name document.getElementByName("MyForm3") 其中,getElementByName()为 W3C DOM Level 1 中定义的标准方法,目前通用的浏览 器版本都基本实现了 W3C DOM Level 1 规范。同样,如果设置了标记元素的 id 属性,也可 使用 getElementById()方法来代替该方法。 综上所述,Document 对象一般的处理步骤如下: z 获取文档的指定对象类型的目标数组,如 images、forms 数组等; z 使用目标数组的长度为参数遍历数组,根据提供的属性值检索出目标在对象数组中 的位置信息; z 使用目标对象的位置信息访问该对象的属性和方法。 在 W3C 新版本中定义了更多访问 Document 对象中标记元素对象的通用方法,同时浏 览器版本的更新也对其进行了大量的扩展,本章仅讨论通用浏览器版本上的 Document 对象 的相关知识。 8.2.2 设置文档颜色值 Document 对象提供了几个属性如 fgColor、bgColor 等来设置 Web 页面的显示颜色,它 们一般定义在标记中,在文档布局确定之前完成设置。例如: 其中 bgColor 属性可通过 JavaScript 脚本动态改变。Document 对象提供有关颜色的属性 分别代表如下: z bgColor 表示文档的背景色; z fgColor 表示文档中文本的颜色; z linkColor 表示文档中未访问链接的颜色; z alinkColor 表示文档中链接被单击时出现的颜色; z vlinkColor 表示文档中已访问链接的颜色; 考察如下设置文档中各项颜色的实例代码: //源程序 8.3 Sample Page!

设置颜色

链接实例
该程序使用标记内的 onload()事件调用 SetColor()方法来设置文档页面各项颜色 的初始值如背景色 bgColor 为颜色字符串常量“white”。程序运行后,将出现如图 8.4 所示 的页面。 图 8.4 设置文档页面各项颜色的初始值 在上述页面中,鼠标移动到“改变背景色”按钮上时,触发 onmouseOver()事件调用 ChangeColorOver()函数来改变文档的背景颜色为黑色;当鼠标移离“改变背景色”按钮时, 触发 onmouseOut()方法调用 ChangeColorOut()函数来改变文档的背景颜色为白色。 例如在页面中单击“链接实例”链接,并将鼠标移动到“改变背景色”按钮之上时,出 现如图 8.5 所示的页面。 图 8.5 改变文档的背景色 在 HTML4 中,颜色有如下两种表示方式: z 颜色字符串常量表示法:使用特定的字符串表示某种颜色,如字符串“blue”表示 蓝色、“red”表示红色等。在 W3C 制定的 HTML 4.0 标准中,存在 16 个颜色字符 串常量,详情请见表 8.1; z RGB 原色表示法:RGB 是 Red、Green、Blue 三个词语的缩写,一个 RGB 颜色 值由三个两位十六进制数字组成,分别代表各原色的强度。该强度为从 0 到 255 之间的整数值,如果换算成十六进制值表示,则范围从#00 到#FF。例如 RGB(255,255,255)表示白色,且用#FFFFFF 表示;RGB(0,0,0)表示黑色,且用#000000 表示。 在遵循 HTML4 规范的同时,各大浏览器厂商都扩展了在 HTML4 中预定义的颜色字符 串常量,但 RGB 原色表示法可以在所有浏览器中得到正确的显示。在编写需跨浏览器环 境工作的 HTML 文档时,要尽量使用 RGB 原色表示法以避免出现兼容性问题。 在 HTML4 中预定义的颜色字符串常量与 RGB 原色值之间存在一定对应关系,如表 8.1 所示。 表 8.1 颜色字符串常量与RGB原色值之间关系 字符串常量 RGB原色值 字符串常量 RGB原色值 aqua #00ffff navy #000080 black #000000 olive #808000 blue #0000ff purple #800080 fuchsia #ff00ff red #ff0000 gray #808080 silver #c0c0c0 green #008000 teal #008080 lime #00ff00 white #ffffff maroon #800000 yellow #ffff00 8.2.3 往文档写入新内容 Document 对象提供 open()用于打开新文档以准备执行写入操作,并提供 write()方法和 writeIn()方法用于写入新内容。这些动作完成后,可以使用 close()方法来关闭该文档。 open()方法的语法如下: open([mimeType][,replace]) 其中参数 mimeType 指定发送到窗口的 MIME 类型,如 text/html、image/jpeg 等。MIME 类型是在 Internet 上描述和传输多媒体数据的规范。在浏览器参数设置的辅助应用程序列表 中已简单描述 MIME 类型,它是用斜杠分隔的一对数据类型。将某个 MIME 类型以参数传 入 open()方法即是通知浏览器准备接收该类型的数据,接收完成后,浏览器调用其相关功能 将该数据显示出来。 各浏览器支持的 MIME 类型会有所区别,一般来说,常见的 MIME 类型有超文本标记 语言文本 text/html、普通 文本 text/plain、RTF 文本 application/rtf、GIF 图形 image/gif、JPEG 图形image/jpeg、au声音文件audio/basic、MIDI音乐文件audio/midi或audio/x-midi、RealAudio 音乐文件 audio/x-pn-realaudio、MPEG 文件 video/mpeg、AV I 文件 video/x-msvideo 等。open() 方法默认(缺省)的 MIME 类型参数为 text/html,在文档载入浏览器前,使用脚本组合典 型的数据类型,包括 HTML 页面上的任何图片。如果当前浏览器不支持以参数传入的特定 MIME 类型,则浏览器搜索支持该 MIME 类型的插入件。如果目标插入件存在,则浏览器 装入该插入件,并在文档载入时将要写入的内容传入该插入件。open()方法接收的第二个可 选参数 replace 表示待写入的目标文档是否替换浏览器历史列表中当前文档。 注意:在 IE3 中 open()方法不接收任何参数,IE4 中仅接收 MIME 类型为 text/html 的参数,IE5+和 NN4+ 支持第二个可选参数;若使用 open()方法打开文档成功,则该方法返回非 null 值,若由于某种原 因打开文档失败,则返回 null 值。 使用 open()方法打开文档后,可调用 write()和 writeIn()方法往其中写入新内容并在浏览 器窗口中显示出来。write()和 writeIn()方法本质上并无大的不同,唯一的区别在于后者在发 送给文档的内容末尾添加换行符,下面两种表达方式等价: document.write(targetStr+"
"); document.writeIn(targetStr); 实际上,一旦文档载入窗口或框架完成后,使用 write()和 writeIn()方法可在不重载或不 重写整个页面的情况下改变文本节点和文本域 textarea 对象的内容。 一般情况下,脚本在当前文档收集用户输入(或动作)和浏览器环境信息,然后通过一 定的算法产生表示另一个窗口(或框架)布局和内容的字符串变量,并使用 write()和 writeIn() 方法将目标字符串变量写入新窗口或者多框架窗口中的某个框架中。该种方式允许使用任意 多个 document.write()和 document.writeIn()方法写入任意多个字符串变量,同时可通过一个 组合字符串调用这两种方法来写入。实际中采用何种方法写入目标字符串取决于浏览器环境 和脚本样式。 在组合字符串过程中,可通过加号“+”或逗号“,”将字符串连接起来,例如下列两种 方式均合法: document.write(targetStr+"
"); document.write(targetStr,"
"); 考察如下将相关字符串写入框架集中指定框架的实例,演示了“学生注册程序”中如何 收集学生相关信息并在目标框架显示。其中框架集文档“main.html”的代码如下: //源程序 8.4 Sample Page! 其中左框架载入的文档为“leftmain.html”,该文档收集学生信息如姓名、性别、年级和 学号等。其代码如下: //源程序 8.5 Sample Page!

学籍注册程序

姓名 :

性别 : male female

年级 :

学号 :

右框架为待写入新内容的目标框架,其载入的文档“target.html”代码为: //源程序 8.6 Sample Page!

待写入的目标框架

浏览器载入“main.html”文档后,出现如图 8.6 所示的原始页面。 图 8.6 浏览器载入框架集文档后出现的原始页面 在上述原始页面中,单击“写新内容进右框架”按钮,触发左框架文档“leftmain.html” 中WriteContent()函数将通过当前框架文档MyForm表单收集的学生信息写入右框架文档中, 同时更新页面,如图 8.7 所示。 图 8.7 写入新信息后的框架集文档页面 查看此时右框架所载入文档的源代码,如下所示: 写入的新内容 :

姓名 : ZangPu
性别 : male
性别 : class 1
姓名 : 20010401 4104
除了可以往窗口(或框架)所载入文档中写入普通字符串外,还可写入 HTML 格式的 代码来生成标准的 HTML 文档。修改上述实例中的“leftmain.html”文档中 WriteContent() 函数为下述形式: //源程序 8.7 function WriteContent() { var msg="Sample Page!<\/title><\/head><body>"; msg="写入的新内容 : <br><br>"; //获取"姓名"字段信息 var iName=document.MyForm.MyName; if(iName.value=="") { alert("''姓名''字段不能为空!"); iName.focus(); } else { msg+="姓名 : "+iName.value+"<br>"; } //获取"性别"字段信息 var iSex=document.MyForm.MySex; for(i=0;i<iSex.length;i++) { if(iSex[i].checked) msg+="性别 : "+iSex[i].value+"<br>"; } //获取"班级"字段信息 var iClass=document.MyForm.MyClass; for(i=0;i<iClass.length;i++) { if(iClass[i].selected) msg+="班级 : "+iClass[i].value+"<br>"; } //获取"学号"字段信息 var iNum=document.MyForm.MyNum; if(iNum.value=="") { alert("''学号''字段不能为空!"); iNum.focus(); } else { msg+="学号 : "+iNum.value+"<br>"; } msg+="<\/body><\/html>" //写入新内容到右框架 parent.frames[1].document.write(msg); //关闭文档 parent.frames[1].document.close(); } 单击左框架文档页面中“写新内容进右框架”按钮,将新内容写入右框架文档,其结果 不变。但此时右框架所载入文档的源代码发生变化: <html> <head> <title>Sample Page! 写入的新内容 :

姓名 : ZangPu
性别 : male
班级 : class 1
学号 : 200104014104
可以看出,该文档为标准的 HTML 文档,但写入 HTML 标记如时要注意写入的 格式,如 document.write("")语句将会出现错误,因为浏览器会将脚本标记的 尾标记解释为进行写操作脚本的结束符。 可通过将尾标记分成几个部分的方式解决,可将上句改写如下: document.write("<\/head>"); 在使用组合字符串进行文档写操作时,容易出现难于觉察的错误,JavaScript 脚本程序 初学者应尽量使用多个 write()和 writeIn()方法多次写入相关内容的方式,避免字符串相加时 出现错误。 通过 Document 对象的 open()方法或者 write()方法打开一个到目标窗口或框架的输出流 并往文档写入新内容的过程结束后,应使用其 close()方法来关闭该输出流。关闭输出流步骤 相当重要,如果不关闭,则后续的写入操作会将新内容添加到该输出流对应的文档底部。 当 document.close()方法调用后,往指定窗口或框架添加的部分或全部数据才能正常显 示,特别是 open()方法接收的 MIME 类型参数为 GIF 图形 image/gif 或 JPEG 图形 image/jpeg 时,使用 close()方法后图片才能正确显示出来。 8.2.4 常见属性和方法汇总 Document 对象提供一系列属性和方法操作目标文档,其属性分为包含文档附加信息的 属性如标记文档背景色的 bgColor 等,以及文档结构模型中作为其属性的对象如表单元素对 象 forms 等。表 8.2 列出了 IE 和 NN 浏览器上 Document 对象通用的属性、方法及浏览器版 本支持情况。 表 8.2 Document对象常见属性和方法汇总 类型 项目 简要说明 浏览器支持 alinkColor 表示标记的alink属性 NN2+、IE3+ anchor、anchors 表示文档中所有的锚点对象及形成的数组 NN2+、IE3+ applet、applets 表示文档中所有嵌入的小程序及形成的数组 NN2+、IE3+ area 表示文档中包含图形映射区的对象 NN2+、IE3+ bgColor 表示标记的bgColor属性值 NN2+、IE3+ compatMode 表示在文档中DOCTYPE元素说明的兼容模式 NN7+、IE6+ cookie 表示文档的cookie值 NN2+、IE3+ domain 表示受当前文档信任的域名列表 NN3+、IE4+ embeds 表示文档中所有插入件形成的数组 NN3+、IE4+ fgColor 表示标记的fgColor属性值 NN2+、IE3+ form、forms 表示文档中所有表单对象及它们形成的数组 NN2+、IE3+ image、images 表示文档中所有图片对象及它们形成的数组 NN3+、IE4+ lastModified 表示文档最后的修改时间 NN2+、IE3+ 属性 link、links 表示文档中所有链接对象及它们形成的数组 NN2+、IE3+ linkColor 表示标记的linkColor属性值 NN2+、IE3+ plugin、plugins 表示文档中所有插入件对象及它们形成的数组 NN4+、IE4+ referrer 为文档提供一个链接文档的URL NN2+、IE3+ title 表示文档的标题栏文本内容 NN2+、IE3+ URL 表示文档的URL地址 NN3+、IE4+ vlinkColor 表示标记的vlinkColor属性值 NN2+、IE3+ clear() 清除当前文档的内容 NN2+、IE3+ close() 关闭用于创建当前文档对象的流 NN2+、IE3+ createAttribute(attributeStr) 创建新的attribute对象并引用该对象 NN6+、IE6+ createComment(commentStr) 创建新注释节点对象并引用该对象 NN6+、IE6+ createElement(elementStr) 创建以参数elementStr为名称的HTML元素 NN6+、IE6+ createTextNode(nodeStr) 创建以参数nodeStr为名称的文本节点对象 NN6+、IE5+ exeCommand(commandStr) 执行以参数commandStr标识的命令 NN7+、IE4+ getElementById(idStr) 根据元素的id属性引用文档中任意元素 NN6+、IE5+ getElementByName(nameStr) 根据元素的name属性引用文档中任意元素 NN6+、IE5+ open([mimeType][,replace]) 用可选MIME类型的参数mimeType打开用于创 建当前文档对象的流,repalce参数用于取代历史 清单中的当前文档 NN2+、IE3+ queryCommandEnabled(str) 显示适合调用的对象是Document还是TextRange NN7+、IE4+ queryCommandIndtem(str) 显示命令是否处于不确定状态 NN7+、IE4+ queryCommandCommandState (str) 显示命令是处于完成状态(true)、正在执行状态 (false)、还是不确定状态(null) NN7+、IE4+ queryCommandSupported(str) 显示当前浏览器是否支持指定的命令 NN7+、IE4+ queryCommandText(str) 返回命令执行完毕以结果返回的任何文本 NN7+、IE4+ queryCommandValue(str) 返回命令执行完毕返回的结果(如果存在) NN7+、IE4+ write(expr1[,expr2,…,exprn]) 将表达式expr1,expr2,…,exprn写入当前文档 NN2+、IE3+ 方法 writeIn(expr1[,expr2,…exprn]) 将表达式expr1,expr2,…,exprn写入当前文档并在 结尾加上换行符 NN2+、IE3+ 上表中关于元素节点对象的相关内容如 createTextNode()、createElement()等方法已在“文 档对象模型(DOM)”章节详细叙述,此处不再累述。 Document 对象提供的属性和方法主要用于设置浏览器当前载入文档的相关信息、管理 页面中已存在的标记元素对象、往目标文档添加新文本内容、产生并操作新的元素对象等方 面。在包含框架集的文档中,要注意 Document 对象引用的层次关系,并通过该层次关系准 确定位目标对象并调用 Document 对象的属性和方法进行相关操作。 关于 Document 对象下一层次中的对象如 forms 对象、links 对象、images 对象等将在后 续的章节进行专门的叙述。下面讲述与 Document 对象紧密相连的 body 元素对象。 8.3 body 元素对象 Document 对象在 HTML 文档中并没有使用任何显式标记来描述,但 JavaScript 脚本将 其作为文档设置的入口,这些设置的内容又作为 body 元素的内在属性在 HTML 中描述。根 据 DOM 中的节点模型概念,可将 body 元素对象作为标记的引用。首先考虑如下简 单的 HTML 代码:

Contents

...
...
如上述的文档背景颜色 bgColor、文本颜色 fgColor 等均可以作为 body 元素对象的属性 来调用;同时,body 标记元素对象也可以作为其他标记元素对象如、等的 HTML 容器而存在。 body 元素对象具有 Document 对象的大部分功能,但不具有 title、URL 等属性,主要包 含与文档页面相关的属性和方法,如设置文档背景图片的 background 属性、控制页面滚动 条的 scroll 属性等。 8.3.1 获取 body 元素对象信息 如前所述,Document 对象提供了表示文档背景、文本、链接等颜色的属性,body 对象 也提供了这几个属性的别名来访问文档中的各项与颜色相关的内容,如 body 元素对象的 aLink 属性、link 属性和 vLink 属性分别对应于 Document 对象的 alinkColor 属性、linkColor 属性和 vlinkColor 属性,而 text 属性则对应于 Document 对象的 fgColor 属性。 考察如下获取目标文档 body 元素对象信息的实例代码: //源程序 8.8 Sample Page!

文本链接测试

上述代码在标记内初始化了文档背景、文本、链接等颜色及文档的背景图片。 程序运行后,出现如图 8.8 所示的原始页面。 图 8.8 显示 body 元素对象信息的原始页面 在原始页面中单击“获取 body 元素对象信息”按钮,触发“GetInfo()”函数,收集当 前文档的 body 元素对象的相关信息后,弹出如图 8.9 所示的警告框。 图 8.9 显示当前文档的 body 元素对象相关信息 body 元素对象中与颜色相关的属性如 bgColor、text 等与 body 元素的 HTML 属性等同, 而不是与旧属性名相联系。 通过 body 元素对象的 background 属性设置文档页面背景图片后,浏览器使用目标图片 覆盖背景颜色,可以通过如下脚本动态去除该背景图片并显示背景色: document.body.background= ""; 以上列举的属性在 NN6+和 IE4+浏览器上均获得完善的支持。 8.3.2 常见属性和方法汇总 body 元素对象提供的属性和方法为数不多,但提供了快捷设置文档页面的途径。表 8.3 列出了 body 元素对象常见的属性、方法和浏览器版本支持情况。 表 8.3 body元素对象常见属性和方法汇总 类型 项目 简要说明 浏览器版本 aLink 表示文档中文本链接被单击后的颜色 NN6+、IE4+属性 background 表示文档的背景图片 NN6+、IE4+ bgColor 表示文档的背景色 NN6+、IE4+ bgProperties 标识文档滚动时页面背景图片是固定还是随文档移 动,可选值scroll(表示滚动)和fixed(表示固定) IE4+ bottomMargin 保存文档内容与浏览器窗口或框架底部的距离 IE4+ leftMargin 保存文档内容与浏览器窗口或框架左边的距离 IE4+ link 表示文档中未访问文本链接的颜色 NN6+、IE4+ rightMargin 保存文档内容与浏览器窗口或框架右边的距离 IE4+ text 表示文档中文本的颜色 NN6+、IE4+ topMargin 保存文档内容与浏览器窗口或框架顶部的距离 IE4+ vLink 表示文档中已访问文本链接的颜色 NN6+、IE4+ noWrap 标识是否将文档中文本限制在窗口或框架的宽度内, 参数为布尔值“true”或“false” IE4+ scroll 标识是否隐藏文档的滚动条,参数为布尔型字符串 “yes”或“no” IE4+ scrollLeft 返回页面左边与水平滚动条左端之间的距离 NN7+、IE4+ scrollTop 返回页面顶部与垂直滚动条顶部之间的距离 NN7+、IE4+ createControlRange() 返回处于编辑模式下当前文档选定范围内所有控件 形成的数组,常规视图下返回空数组 IE5+ createTextRange() 返回包含body元素的HTML文本和body文本对应的 初始TextRange对象 IE4+ 方法 doScroll(ScrollAction) 模拟滚动条上的用户动作,以ScrollAction标识用户的 动作,如PageDown、Left、PageUp等 IE5+ 在提供上述属性和方法基础上,body 元素对象提供事件处理程序 onscroll 响应用户的动 作,如鼠标移动滚动条到底部时调用 Window 对象的 scroll()方法将当前浏览器窗口移动到指 定位置等。 8.4 本章小结 本章主要介绍了顶级对象模型中与文档紧密相关的 Document 对象和 body 元素对象, 重点讲述了对象模型中 Document 对象和 body 元素对象的层次关系及基础知识,如对象的 创建、引用及与其它 HTML 元素对象之间的相互关系等。理解了 HTML 文档中元素对象如 form、image 等都作为 Document 对象层次之下的元素对象而存在,并各自具有独特的属性 和方法用于文档界面的设置。 从下章开始,将进入 DOM 层次规范中 Document 对象层次以下的元素对象如 anchor、 link 等对象的基本概念的学习,并通过实例让读者熟悉其属性和方法,并深刻体会浏览器版 本与它们之间的依存关系。
还剩294页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

gecko115

贡献于2014-01-07

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!