JavaScript高级教程


目目目目 录录录录 第 1 章 JavaScript 基 础 1.1 关 于 JavaScript 1.2 了 解 JavaScript 1.3 World Wide Web 1.4 Web 应用程序结构 1.5 JavaScript 与 VBScript 第 2 章 JavaScript 与 HTML 2.6 HTML 基 础 2.7 在 HTML 文档中嵌入 JavaScript 2.8 编写 JavaScript 脚本 第 3 章 JavaScript 基本语法 3.9 JavaScript 基本数据结构 3.10 JavaScript 运算符和表达式 3.11 JavaScript 控制结构和循环 第 4 章 Window 窗口 对象 4.12 Window 窗口 对象的属性 4.13 Window 窗口 对象的方法 4.14 创建和关闭窗口 第 5 章 document 对 象 5.15 document 对象的属性 5.16 document 对象的方法 第 6 章 文 本 对 象 6.17 文本对象属性 6.18 文本对象的方法 6.19 文本对象的事件 6.20 文本区域对象 第 7 章 按 钮 对 象 7.21 button submit reset 对 象 7.22 复选框对象 7.23 Radio 对 象 第 8 章 选择和隐藏对象 8.24 select 对 象 8.25 隐 含 对 象 第 9 章 location 对 象 9.26 hash 属 性 9.27 Href 属 性 9.28 pathname 属 性 9.29 Protocol 属 性 第 10 章 history 对 象 第 11 章 layer 对 象 11.30 layer 属 性 11.31 layer 对象的方法 11.32 JavaScript 操作层 第 12 章 字符串对象 12.33 转 义 字 符 12.34 字符串对象的属性 12.35 字符串对象的方法 第 13 章 日期对象 13.36 时间对象的属性 13.37 时间对象的设置 第 14 章 数 学 对 象 14.38 math 对象的属性 14.39 math 对象的方法 第 15 章 数 组 对 象 15.40 数组对象的创建 15.41 数组对象的扩充 15.42 对象类数组 第 16 章 样式单实例 16.43 样式单的实用 16.44 样式单的定义 16.45 样式单的使用 第 17 章 实用小程序 17.46 导 言 17.47 状态栏滚动信息 17.48 计算用户来访次数 17.49 散布页面的星星 17.50 永在顶端的图片 第 18 章 JavaScript 语言的扩展 18.51 ActiveX 通 信 18.52 调用插入件 第 19 章 网上购物系统 19.53 示 例 特 性 19.54 源 代 码 19.55 功 能 概 述 19.56 程 序 详 解 第 20 章 2000 珍藏版 20.57 Cookie 入 门 20.58 实 例 特 性 20.59 程序源代码 20.60 功 能 概 述 20.61 程 序 详 解 第 21 章 时 钟 日 历 21.62 示 例 特 性 21.63 源 代 码 21.64 功 能 概 述 21.65 程 序 详 解 第 22 章 JavaScript 服务器端编程 22.66 预 备 知 识 22.67 实 例 学 习 22.68 功 能 概 述 22.69 脚 本 详 解 第 23 章 网络安全性 23.70 安全性破坏的种类 23.71 安 全 服 务 主要内容 本 章 导 读 第第11章章 JJJJJJJJaaaaaaaavvvvvvvvaaaaaaaaSSSSSSSSccccccccrrrrrrrriiiiiiiipppppppptttttttt 基基基基基基基基 础础础础础础础础 ¡ 关 于 JavaScript ¡ 了 解 JavaScript ¡ World Wide Web ¡ Web 应用程序 ¡ JavaScript 与 VBScript š JavaScript 作为一种新的 Web 技术 自出现以来就获得了各 方面的广泛支持 本章介绍了 JavaScript 的基础知识以及与其它脚 本语言的区别 1.1 关 于 JavaScript JavaScript 是一种新的 Web 技术 JavaScript 最初的名字是 LiveScript 它是 Netscape 开发出的一种脚本语言 其目的是为了扩展基本的 HTML 的功能 用于代替复杂的 CGI 程序来处理 Web 页表单信息 为 Web 页增加动态效果 当 Java 出现以后 Netscape 和 Sun 一起开发了一种新的脚本语言 它的语法和 Java 非常的类似 所以它最后被命名为 JavaScript 在 JavaScript 出现以前 在 Web 页中需要进行的所有处理都必须传回服务器 由服 务器进行集中处理 服务器处理完毕后 在将处理结果通过网络传回客户端的浏览器中供 用户查看 即使是最简单的验证用户在文本框中输入数据的有效性 比如通过判断输入字 符串是否包含 @ 符号来判断用户输入的 E_mail 地址是否有效 都必须由服务器来完 成 在这种方式下 当 Web 访问量增加时 网络和服务器的负担都会增加 这一时期的 客户/服务器结构并不是真正意义上的客户/服务器结构 人们期待一种新的技术来实现真 正的客户/服务器结构 即在客户端也可以进行处理 从而减轻服务器的负担 加快网络 的传输速度 JavaScript 正是在这种背景之下产生的 JavaScript 至 1995 年诞生以来 已经取得了广泛的支持 他们包括 Apple Borland Sybase Informix Oracle Digital HP 和 IBM 等 不仅仅是在浏览器中得到越来越多的 支持 在其它的各种应用程序中也得到应用 新的 Windows 操作系统中也可以使用脚本 来制订需要完成的任务 有经验的 Web 页作者都知道 Java 的小应用程序也可以实现客户端的逻辑处理能力 但作为一种强类型的程序设计语言 Java 并不是制作 Web 页的最佳选择 因为使用 Java 需要 Web 页作者有较高的编程能力 而这对众多 Web 页作者来说是件难事 Web 作者愿 意使用更简单的方法来实现表单的处理 Microsoft 也意识到了 Web 脚本的重要性 作为软件界的领头羊 Microsoft 自然不甘 在 Web 脚本的竞争中落后 由于得不到 Netscape 在技术上的许可 Microsoft 开发了自己 的脚本语言 JScript 并在 Microsoft 自己的浏览器 Microsoft Internet Explorer 3.0 以及 更高版本中对其提供支持 由于 Microsoft 在浏览器市场中的优势 JScript 很快得到广泛 支持和应用 JScript 1.0 只是很粗糙地和 JavaScript 1.1 兼容 Netscape 在其浏览器 Navigator 3.0 及其以后的版本中也对 JScript 提供了支持 随着 JavaScript 版本的增多和浏览器平台 的不同 让众多的 Web 页作者感到难以取舍 也增加了额外的工作量 鉴于脚本语言开发商之间的竞争给 Web 页作者带来的麻烦 Microsoft Netscape 和 其它脚本语言商决定成立一个国际组织 并将其命名为 ECMA 该组织专门从事脚本语 言标准的制订 ECMA 制订的脚本语言标准被称为 ECMAScript 所有开发商的脚本语言 都支持这一标准 尽管有 ECMA 标准的存在 Netscape 和 Microsoft 都有其各自的脚本语 言 JavaScript 和 JScript 这两种语言都对 ECMA 标准进行了扩展 Microsoft 除了 JScript 之外 还有 VBScript 也是一种脚本语言 VBScript实际上是 Visual Basic 程序设计语言的一个子集 使得众多的 VB 程序设计员很容易编写自己的 Web 应用 程序 Netscape 并没有对 VBScript 提供支持 所以使用 VBScript 的还仅是 Microsoft Internet Explorer 用户 即使有 VBScript 的竞争 JavaScript 还是成为了标准的 Web 脚本语言 在人们的印 象中 JavaScript 只是用来编写客户端的 Web 应用程序 Netscape 为用户提供了服务器端 的脚本语言 Netscape Server_Side JavaScript SSJS 可以在服务器端编写需要的 Web 应 用程序 不过使用 SSJS 需要 Netscape Server 3 的支持 Microsoft 也有自己的服务器端脚 本编程语言 Active Server Pages ASP 需要 JScript 引擎的支持 1.2 了 解 JavaScript 学习 JavaScript 这样的新工具可以说是一种挑战 因为很难理解它是如何使用以及能 用于哪些方面 学习 JavaScript 并不是一件非常困难的事 我们先从下面的 10 个方面了 解一下 JavaScript 的特点 1.2.1 JavaScript 是被嵌入到 HTML 中的 JavaScript 的最大特点便是和 HTML 的结合 在客户端的应用中 很难将 JavaScript 程序和 HTML 文档分开 JavaScript 代码总是和 HTML 一起使用的 JavaScript 的各种对 象都有各自的 HTML 标记 当 HTML 文档在浏览器中被打开时 JavaScript 代码才被执 行 JavaScript 代码使用 HTML 标记嵌入到 HTML 文档中 JavaScript 扩展了标准的 HTML 为 HTML 标记增加了事件 通过事件驱动来执行 JavaScript 代码 在服务器端 JavaScript 代码可以作为单独的文件存在 但也必须通过在 HTML 文档中调 用才能起作用 下面的程序清单 1.1 中的例子说明了 JavaScript 代码是如何嵌入到 HTML 文档中的 程序清单 1.1 在 HTML 文档中嵌入 JavaScript 代码 在 HTML 文档中嵌入 JavaScript 代码

使用 JavaScript




本例仅说明如何在 HTML 文档中嵌入 JavaScript 代码 在后面的章节中将详细介绍 JavaScript 的使用 图 1-1 显示了本例在浏览器中打开的实际效果 图1-1 在 HTML 文档中嵌入 JavaScript 代码 1.2.2 JavaScript 需要环境的支持 JavaScript 是作为一种语言而不是工具出现的 工具是可以不依赖环境而单独使用 但 JavaScript 的运行需要环境的支持 运行 JavaScript 的浏览器 如 Microsoft Internet Explorer 和 Netscape Navigator 或者服务器端引擎是一个解释引擎 JavaScript 只有在这 些解释引擎的支持下才能发挥强大作用 如果使用的浏览器不支持 JavaScript 那么嵌套 在 HTML 文档中的 JavaScript 代码将会被忽略 最严重的结果是 JavaScript 代码被不支持 的浏览器当作文本原样显示在浏览器中 由于环境因素的存在 在编写 JavaScript 应用程序时必须考虑我们在何时何地使用它 以及浏览器是否支持 如果浏览器不支持我们又该如何实现 可以使用非 JavaScript 方法 来解决吗 所有的问题都需要我们在编写 JavaScript 应用程序之前进行考虑 一个有力的说明是 帧在刚发布的时候 虽然是一种新的 革命性的技术 但这一技 术却只有 Netscape Navigator 2.0 支持 这让 Web 作者难以决定什么时候使用帧 而当浏 览器不支持时也不知道该如何进行处理 后来 Microsoft Internet Explorer 3.0 开始支持帧 在 HTML 4 中帧已成为了标准 现在 Web 作者不用再对 JavaScript 的环境依赖性做过多的考虑 JavaScript 已获得了 众多浏览器的支持 Netscape Navigator 2.x Microsoft Internet Explorer 3.x Opera 3.x 和 HotJava 3.x 等主要浏览器以及它们的更高版本都能支持 JavaScript 一个数字统计表明 大约有 95%的浏览器现在都对 JavaScript 提供支持 这对 JavaScript 使用者来说是一个福 音 1.2.3 JavaScript 是解释执行的 和大多数脚本语言一样 JavaScript 在浏览器中是解释执行的 应用程序的执行通常 有解释和编译两种方式 编译是将程序源代码翻译成可执行的二进制代码文件 如.EXE 文件 而解释则是翻译一句就执行一句 JavaScript 代码并不被编译为二进制代码文件 而是作为 HTML 文件的一部分 由浏览器解释执行 JavaScript 代码的缺点是代码的执行需 要花更长的时间 优点则是 Web 页的维护和更新更加方便 管理员可以直接打开 HTML 文件来编辑修改 JavaScript 代码 而用户则可通过浏览器立即看到新的结果 值得注意的是 如果是在 Netscape 的服务器端使用 JavaScript 需要用户将所有的 JavaScript 代码和 HTML 文件编译成字节代码 并存储在.web 文件中 1.2.4 JavaScript 是一种弱类型语言 JavaScript 与 Java 和 C++等强类型语言不同 强类型语言要求用户在程序中使用一个 变量之前必须先进行声明 JavaScript 则显得非常灵活 在使用一个变量时 可以先进行 声明 也可以不那样做 下面的例子说明了在 JavaScript 中使用变量的灵活性 JavaScript 是弱类型的 1.2.5 JavaScript 以对象为基础 JavaScript 中使用了面向对象程序设计 OOP 的方法 在后面的章节中 我们将看 到 JavaScript 的各个自定义对象 如 Window Document 等对象 对象实际上是封装了的数据 属性 和行为 方法 的集合 如果你使用过 Java Delphi 或 Visual Basic 则学习 JavaScript 将是一件轻松的事 JavaScript 的对象都是实例化了的 只可以使用而不能创建继承于这些对象的新的子类 1.2.6 JavaScript 通过事件驱动执行 我们在后面将学习到 JavaScript 代码是如何使用事件来驱动执行的 HTML 文档中的 许多 JavaScript 代码都是通过事件驱动的 JavaScript 本身支持事件 HTML 对象 如按 钮和文本框 增加了对事件的支持 如果你学习过 Java 或 Visual Basic 等面向对象程序设 计 则你一定知道事件驱动 如果你仅学习过像 C 语言等面向过程的程序设计 也不用 担心 在后面我们详细讲解 JavaScript 的事件驱动 1.2.7 JavaScript 不是 Java 当你在网上冲浪的时候 你可能会看到许多和 JavaScript 相关的 Web 站点在讨论相 同主题 JavaScript 不是 Java 我们在前面已经提到过 JavaScript 和 Java 是两个不同公司 的产品 JavaScript 是 Netscape 公司的 Java 是 Sun 公司的 名称上的相似只是出于市 场的原因 在后面的学习过程中 你会体会到 JavaScript 和 Java 更多的不同 但我们可以 从几个方面简单了解一下 JavaScript 和 Java 的区别 JavaScript 和 HTML 文档是紧密集成的 JavaScript 代码使用 上面的例子是在浏览器中打开该 Web 页时显示的一个消息框 alert 消息框在 VBScript 和 JavaScript 中都是相同的 将上面的脚本修改成下面的结果 2 对 象 模 型 VBScript 和 JavaScript 一个最重要的相同点是使用的对象模型的层次结构是相同的 只是在不同的版本中有小的差别 对 Web 应用程序开发人员来讲 在不同的情况下 可 能需要使用这两种不同的语言 VBScript 和 JavaScript 只是在语法上有一些差别 虽然 VBScript 和 JavaScript 的编程方法不同 但如果要将一个 JavaScript 脚本转换为 VBScript 我们可以直接一句一句地进行转换 而不需要在程序结构上做任何调整 它们不仅仅在对象模型上相同 VBScript 和 JavaScript 在 HTML 对象的使用上也是相 同的 我们知道 JavaScript 脚本是通过 HTML 对象的事件来驱动执行的 VBScript 也是 如此 下面先是一个 JavaScript 的例子 该例的脚本将用户在文本区中输入的字符串转换为 大写 程序清单 1.2 JavaScript 例程 JAVA 实例

如果使用 VBScript 来完成相同的功能 则可使用程序清单 1.3 所示程序 程序清单 1.3 VBScript 例程 script 实例

从两个程序清单可以看出 VBScript 和 JavaScript 在事件驱动执行和对象模型上是完全相 同的 两个 Web 页的实际效果如图 1-5 所示 3 复杂的数据类型 VBScript 和 JavaScript 一样属于弱类型的语言 从表面上看 VBScript 只有一种数据类 型 variant 但实际上 VBScript 比 JavaScript 具有更强的数据处理能力 我们可以将 Variant 称之为变体数据类型 该类型的变量可以用于处理各种不同类型的数据 下面例子中的 myvar 是一个 variant 类型的变量 我们先为 myvar 赋一个字符串 myvar="VBScript" 在某些情况下 我们可以为 myvar 再赋一个不同类型的值 如 myvar=123 这样 myvar 的值从最先的字符串类型变为数值类型 字符串类型和数值类型实际上是作为 variant 类型的子类型在使用 在表 1-2 中列出 了 variant 的所有子数据类型 表1-2 variant 的子数据类型 子类型 描述 String 字符串类型 最大长度 20 亿个字符 Byte 字节类型 有效值为 0~255 Integer 整数类型 有效值为-32,768~+32,767 Long 长整型 有效值为-2,147,483,648~+2,147,483,647 Single 单精度 有效值为 负数 -3.402823E38~-1.401289E-45 正数 1.401289E-45~3.402823E38 Double 双精度 有效值为 负数 -1.79769313486232E308~-4.94065645841247E-324 正数 4.94065645841247E-324~1.79769313486232E308 Data 日期类型 有效值为 1/1/100~12/31/9999 Boolean 布尔类型 有效值为 ture 或 false 图1-5 VBScript 和 JavaScript 脚本在运 行结果上完全相同 子类型 描述 Empty 空数据 表示未初始化的变量 数值型变量空值为 0 字符 串变量空值为空字符串“” Null 表示没有有效数据的变量 与 Empty 不同 Object 对象 表示 ActiveX 对象 Error 错误 表示 VBScript 的错误编号 4 不同的过程类型 在 VBScript 中有两种不同的过程类型 子程序和函数 子程序使用 Sub End Sub 进行定义 子程序和函数最大的特点是没有返回值 函数使用 Function End Function 进行定义 函数通过函数名返回一个值 下面的脚本定义了一个子程序 converttext converttext 被调用时 会将文本 框中显示的内容修改为 学习使用 VBScript 下面是 VBScript 的函数的例子 例子先定义了一个函数 gettext() 该函数通过函数名 返回用户在浏览器文本框中输入的内容 然后在 show()子程序中显示函数的返回值 和 VBScript 不同 JavaScript 中只使用函数 实际上任何一种子程序可以完成的功能 完全可以使用子程序来实现 1.5.3 一个 VBScript 脚本 为了让你进一步了解如何使用 VBScript 编写脚本程序 下面介绍一个简单的 Web 页 在该页中通过使用 VBScript 脚本显示用户在文本框中输入的两个数的乘积 程序清单 1.4 使用 VBScript 编写脚本 VBScript 实例

使用 VBScript 在客户端完成数据处理


第一个数

第二个数

为了和 VBScript 进行比较 程序清单 1.5 列出的脚本可以完成和程序清单 1.4 中脚本 相同的功能 程序清单 1.5 使用 JavaScript 编写脚本 JavaScript 实例

使用 JavaScript 在客户端完成数据处理


第一个数

第二个数

主要内容 本 章 导 读 第第22章章 JJJJJJJJaaaaaaaavvvvvvvvaaaaaaaaSSSSSSSSccccccccrrrrrrrriiiiiiiipppppppptttttttt 与与与与与与与与 HHHHHHHHTTTTTTTTMMMMMMMMLLLLLLLL ¡ HTML 基 础 ¡ 将 JavaScript 脚本嵌入 HTML 文档 ¡ 编写自己的 JavaScript 脚本 š HTML 在众多的 Web 技术中恐怕是最显得微不足道的了 但 HTML 的的确确是精彩的 Web 世界必不可少的基石 使用 HTML 可 以创建静态的 内容丰富的 有趣的 Web 页 这在 Internet 世界的 初期可说是一个创举 使用 JavaScript 可以为 HTML 文档增加交互 性 增强对用户操作的反应能力 使 Web 页更加具有吸引力 换一个角度 可以将 JavaScript 看做是 CGI 程序的一个发展的新阶段 CGI 是基于服 务器端的应用程序 而 JavaScript 则是基于客户端的 通过使用 JavaScript Web 开发人 员可以编写脚本 然后将脚本嵌入到 HTML 文档中来创建动态的 Web 页 JavaScript 将 原来需要使用 CGI 程序在服务器端完成的处理操作放在客户端来完成 这样大大减少对 用户操作的响应时间 使用户可以在更短的时间内完成更多的事 我们知道 JavaScript 是嵌入到 HTML 文档中的 JavaScript 代码的运行在很多时候也 需要通过 HTML 对象的事件进行驱动 所以无论对于 Web 开发人员还是阅读 HTML 文档 了解 HTML 的基本知识还是很重要的 2.6 HTML 基 础 开发简单的 HTML 文档 标签和表单是件非常容易的事 在 HTML 中的大多数标签 都有一些复杂的属性 使用复杂的标签和属性可以创建更复杂 可用性更强的 Web 页 HTML 标准始终在不断地变化 当前的 HTML 版本为 4.01 HTML 的一个新的版本 名称将是 XHTML 不过这还需要得到 Word Wide Web W3C 的同意 Web 开发人员 可以随时从 W3C 的 Web 站点 http://www.w3.org 中查看有关 HTML 的各种信息 如图 2-1 所示 图2-6 W3C 上的 HTML 信息 HTML 的标准和浏览器都是在不断发展 当我们在使用 HTML 标签 特别是一些新 的标签时 必须要确保浏览器能够支持它 另外 在不同的浏览器中 也会出现一些非标 准的标签 如标签只能在 Internet Explorer 中使用 Navigator 是不支持的 而 Navigator 中的同样也不能在 Internet Explorer 中使用 所以 当我们在编写 HTML 文档时 应充分考虑多浏览器的因素 能让多种不同浏 览器都能阅读是衡量 HTML 文档好坏的一个标准 2.6.2 HTML 基本知识 在客户端的 JavaScript 脚本和 HTML 文档的关系是非常密切的 所以在我们编写脚本 之前 必须先熟悉 HTML 文档的结构和 HTML 标签 当对 HTML 掌握后 编写 Web 页 将是非常简单的事 通常 一个 Web 页是由文本 标签和一些注释组成的 Web 页中的文本是最简单 最容易理解的 输入到 Web 页中的文本是我们需要向用 户展示的内容 标签则是 Web 页中最重要 需要花时间学习的东西 一个 HTML 标签通 常是由 < 开头 由 > 结尾的标志 标签的作用就是告诉浏览器该如何显示我们书 写的文本 HTML 标签有单独标签和成对标签 单独标签如

它们都是单独使用的
的作用是显示一条水平直线
是用于进行换行 单独标签通常又称之为空标签 空标签只能单独使用 不能用于格式化文本 成对标签又称之为容器 它使用一个开始标签和一个结束标签来标识文本 结束标签 是在一个标签的名称前加一个 / 如下面使用的 标签 <title>学习 JavaScript之间的是容器标识的文本 学习 JavaScript 被标记为一个 HTML 文档的标题 一些复杂的标签还可以通过设置属性来控制标签的显示效果 如
定义了一条长 200 个像素 颜色为红色的水平线 很多 HTML 标签都具有自己 的属性 还有一些特殊的标签 它们必须放在其它的容器之中才能够使用 比如必须 放在
标签内
  • 必须放在
      标签内 所有的其它 HTML 标签都放在和 之间 在 HTML 文档中 如果需要 有时会加入适当的注释对文档进行说明 注释的内容 不会显示在浏览器中 在 HTML 文档中加入注释使用 例如 2.6.3 HTML 文档结构 HTML 文档的结构是非常重要的 标签在文档中放置的位置的不同 会有不同的显示 效果 最简单的 HTML 文档结构如下 在和之间放置了 HTML 文档的所有内容 在和 之间放置的是实际要显示的文本内容和其它用于控制文本显示方式的标签 下面是一个简单的 HTML 文档 一个简单的 HTML 文档

      简单的 HTML 文档

      1. Java
      2. JavaScript
      3. Visual Basic
      4. VBScript
      表格
      One Two Three
      Four Five Six

      这是一个简单的 HTML 文件 该 HTML 文档在 Microsoft Internet Explorer 中的实际效果如图 2-2 所示 图2-7 一个简单的 HTML 文档 2.6.4 公 共 属 性 在前面我们已经提到 HTML 的许多标签都具有属性 属性用于控制标签怎样操作和 如何显示 并不是所有的标签都具有属性 有一些标签具有公共的属性 这些属性的名称 和作用都完全相同 在表 2-1 中列出了 HTML 标签的共同属性和作用 表2-3 属性 作用 class 指明 HTML 标签所属的类 class id 定义一个惟一的标识 在整个文档中标识该标签 name 为标签命名 该名称可以在 JavaScript 或 CGI 脚本中引用 style 指明标签使用的样式 style 2.7 在 HTML 文档中嵌入 JavaScript JavaScript 代码使用集成到 HTML 文档中 在一个 HTML 文档中 可以有多对来嵌入多段 JavaScript 代码 每个 JavaScript 代码中可以包 含一条或多条 JavaScript 语句 language language 属性在最近的 HTML 和 XHTML 中已经不再使用 但为了使以前的 Web 也 仍能够不加修改就可以在浏览器中正确地显示 所以现在的 Src 将 JavaScript 代码嵌入 HTML 文档有两种方式 一是直接将代码书写在 HTML 文档 中 另一种方式是使用 在该 HTML 文档中没有任何将在浏览器中显示的信息 但通过引用另一个文件中的 JavaScript 代码 在浏览器窗口中输出了一段信息 被引用的 testscript.js 文件内容如下 document.write 这里引用了其它文件中的 JavaScript 代码 使用 src 属性的一个好处是可以在不打开 HTML 文件的情况下修改 JavaScript 代码 但它的一个缺陷是代码的修改可能影响到 HTML 文档 比如当修改了.js 文件中的函数名 之后 就必须修改 HTML 文档中用到的函数名 否则 HTML 文档将会出错 使用 src 属性的另一个好处是可以保护您不想让别人看到的 JavaScript 代码 type language 是最初的属性 它不仅用于说明使用的语言 如 JavaScript 或 VBScript 同 时也可以说明语言的版本 如 JavaScript 1.1 或 JavaScript 1.5 在最近的 HTML 和 XHTML 中已不再使用 Language 属性 取而代之的是 type 属性 type 属性的使用格式如下 标签 标签从理论上讲 可以插入到 HTML 文档中的任何位置 比如在 和 之间或是 和 之间 按许多人的习惯 常将 标签放在和之间 如下所示 这是插入了标签的 HTML 文档 这个文档具有一定的使用 价值 您可以将它作为模板保存起来 在以后的学习中使用 3 书写脚本 加入脚本之后的 HTML 文档如下所示 4 保存 HTML 文档 因为记事本保存文件的默认类型 为.txt 文件 所以在保存编写的 HTML 文 档时 应先将文件类型选择为 所有文 件 再将文件保存为.htm 或.html 文件 5 浏览效果 将编写的文件保存好后 在浏览器中 打开该文件 查看实际效果 在前面编写 的 HTML 在 Internet Explorer 中的实际效 果如图 2-3 所示 2.8.3 脚本在什么时候执行 根据 JavaScript 脚本编写的方式 脚本的执行有多种情况 当浏览器打开一个 HTML 文档时 它将从头开始解释整个文档 像在上例中使用 document.write 方法在遇到它 的时候执行 而有一些脚本 如函数 function 则会在它们被调用的时候运行 脚本 函数的调用往往都是通过事件来进行驱动的 如在一个 HTML 文档被装载 onLoad 的 时候可以执行脚本函数 1 在打开页面时执行脚本 当浏览器打开一个 HTML 文档时 它会从头开始解释整个文档 包括 HTML 标签和 脚本 如果脚本中有可以直接执行的语句 则会在遇到的时候马上解释执行 下面的脚本 中的 alert 语句会在页面打开时立即执行 显示一个消息框 在用户关闭了对话框之 后才会显示其它的页面内容 立即执行 浏览器在解释 HTML 文档时执行了 JavaScript 脚本 该 HTML 文档在浏览器中打开时的实际效果如图 2-4 所示 图2-9 浏览器在显示页面内容前执行了脚本 2 利用 onLoad 事件执行脚本 onLoad 事件是一个页面在浏览器中打开时发生的 该方法常用于在打开一个页面的 同时向用户显示一些消息 在下面的例子中 脚本定义了一个 opennews 函数 该函 数如果不被调用 它将不会被执行 我们可在标签的 onLoad 事件中调用该函数 如下所示 利用 onload 执行脚本 利用 onLoad 事件执行脚本 该 HTML 文档在浏览器中打开时的实际效果如图 2-5 所示 图2-10 浏览器在显示页面内容的同时显示消息框 3 通过用户事件执行脚本 用户在浏览器中阅读 Web 页时经常会使用鼠标和键盘 比如移动鼠标 点击链接 单击按钮等行为 这些行为都会产生相应的事件 我们可以通过对这些事件编写脚本来进 行特殊的处理 在下面的例子中 在脚本中定义了一个函数 shownews 函数被调用时显示一个 消息框 然后在 HTML 的表单中定义了一个按钮 当单击该按钮时 shownews 将被 调用 通过用户事件执行脚本 通过用户事件执行脚本
      该 HTML 文档在浏览器中打开时的实际效果如图 2-6 所示 图2-11 单击按钮后才会执行脚本显示消息框 主要内容 本 章 导 读 第第33章章 JJJJJJJJaaaaaaaavvvvvvvvaaaaaaaaSSSSSSSSccccccccrrrrrrrriiiiiiiipppppppptttttttt 基基基基基基基基本本本本本本本本语语语语语语语语法法法法法法法法 ¡ JavaScript 数据类型 ¡ JavaScript 运算符和表达式 ¡ JavaScript 控制结构和循环 š 本章主要介绍 JavaScript 的基本语法 由于 JavaScript 是由 C 语言演变而来的 所以对于学过 Java C C++的读者可以跳过 本章去继续学习后面的章节 本章除了对 JavaScript 的数据类型 运算符和表达式做了简要的介绍外 着重介绍了条件语句 循环语 句等重要内容 并配以详细实例来演绎 3.9 JavaScript 基本数据结构 JavaScript 语言同其它语言一样 有它自身的基本数据类型 表达式和算术运算符以 及程序的基本框架结构 JavaScript 在很大程度上借用了 Java 的语法 而 Java 又是由 C 和 C++演生而来的 所以 JavaScript 和 C 有许多相似的语法特点 并且抛弃了 C 语言中 有关指针等容易产生错误的内容 对于已经具备 C++或 C 语言基础或有 C 语言编程经验 的人来说 学习 JavaScript 语言是非常轻松容易的 3.9.1 基本数据类型 在 JavaScript 中有四种基本的数据类型 数数数数字型字型字型字型 整数和实数 字符串型字符串型字符串型字符串型 用 号或 括起来的字符或数值 逻辑型逻辑型逻辑型逻辑型 用 True 或 False 表示 空值空值空值空值 表示什么也没有 在 JavaScript 的基本类型中的数据可以是常量 也可以变量 由于 JavaScript 采用弱 类型的形式 因而一个数据的变量或常量不必首先作声明 而是在使用或赋值时确定其数 据的类型 当然也可以先声明该数据的类型 它是通过在赋值时自动说明其数据类型的 3.9.2 常 量 在程序运行过程中 其值不能被改变的量称为常量 常量可根据不同类型分为整型常 量 实型常量 字符型常量等 1 整型和实型常量 整型常量由整数表示 如 123 -2000 也可以使用十六进制 八进制表示其值 实 型常量是由整数部分加小数部分表示 如 123.45 -3.1415 也可以使用科学或标准方法 表示 如 3e6 4E-10 2 字符型常量 使用双引号 或单引号 括起来的一个字符或字符串 如 JavaScript 1234.5 sadfsdf_1412412 sdkfsdkf 等 3 逻 辑 常 量 逻辑常量只有 True 真 或 False 假 两种值 它往往用做程序的判断条件 4 空 值 JavaScript 还提供一个空值 null 表示什么也没有 5 特 殊 字 符 JavaScript 提供一些同样以反斜杠 \ 开头的不可显示的特殊字符 通常称为控制字 符 例如 \n 表示换行 \b 表示退格 \r 表示回车 \f 表示换页等 与 C 语言很相似 3.9.3 变 量 在程序运行过程中 其值可以改变的量称为变量 一个变量由变量名和变量值构成 对于变量必须明确变量的命名 变量的声明 变量的类型以及变量的作用域 1 变量的命名 JavaScript 中的变量名必须以字母 a~z 或 A~Z 开头 其后可以跟数字和下划线等 但不能有空格 等运算符或标点符号作为变量名 另外 对于 JavaScript 中的关键字不能作为变量名 如 Var int double false true 等都不能作 为变量的名称  在对变量命名时 应尽量使变量名有意义 从而增加程序可读性 减少错误发生 2 变量的声明 一般在使用一个变量前 应该事先对变量进行声明 在 JavaScript 中 变量可以用命 令 Var 作声明 例如声明一个名为 number1 的变量 其声明格式如下 在变量声明时可以同时给该变量赋初值 例如让变量 number1 的初值为 100 具体如 下 另外 在同一行中可以声明多个变量 变量与变量之间用逗号隔开 例如在同一行中 声明变量 number1 number2 number3 具体如下 在 JavaScript 中 变量也可以不作声明 而在使用时再根据数据的类型来确其变量的 类型 3 变量的类型 JavaScript 是一种弱类型的语言 变量的类型不像其它语言那样规定得比较死 对于 同一变量可以赋不同类型的变量值 例如 其中 变量 number1 先被赋初值为 100 此时 number1 的类型是整型 接下来又让 number1 等于一个字符串 number1 as string 此时 number1 的类型又变成了字符型 这些在 JavaScript 语言中都是允许的 所以一般可以不用关心变量是什么类型 4 变量的作用域 变量的作用域是指变量在什么范围内才有效 在 JavaScript 中同样有全局变量和局部 变量 全局变量是定义在所有函数体之外 其作用范围是整个函数 而局部变量是在函数 体内定义的 只在该函数范围内有效 而对其它函数则是无效 3.10 JavaScript 运算符和表达式 JavaScript 中运算符有很多 例如有算术运算符 如 * /等 有比较运算符 如!= = =等 有逻辑运算符如! ||等 这些运算符的用法与 C 语言很相似 3.10.1 算术运算符和表达式 通常可以用一组常量 变量 运算符构成一个表达式 通过表达式可以返回一个单一 的结果值 这个值可以是数值 字符串 逻辑值等 例如表达式 5+6 其返回值为 11 1 基本算术运算符 JavaScript 中基本算术运算符有 加法运算符 或正值运算符 如 3 5 6 减法运算符 或负值运算符 如 9-3 -7 * 乘法运算符 如 4*6 / 除法运算符 如 8/4 % 求模运算符 如 5%2 2 递增运算符 递增运算符的作用是把操作数的值加 1 后传回 有两种使用格式 具体如下 var + + 和和和和 + + var 如果使用 var + +格式 则操作数的值将被加 1 传回 而该表达式的返回值不变 例 如下面的表达式 y = x + + 如果 x 的初值为 5 则执行后的结果是 x 为 6 而 y 为 5 如果使用 + + var 格式 则操作数的值将被加 1 传回 而该表达式的返回值也将加 1 例如下面的表达式 y = + + x 如果 x 的初值为 5 则执行后的结果是 x 为 6 而 y 为 6 3 递减运算符 -- 递减运算符的作用是把操作数的值减 1 后传回 有两种使用格式 具体如下 var -- 和和和和 -- var 如果使用 var --格式 则操作数的值将被减 1 传回 而该表达式的返回值不变 例如 下面的表达式 y = x-- 如果 x 的初值为 5 则执行后的结果是 x 为 而 y 为 5 如果使用 --var 格式 则操作数的值将被减 1 传回 而该表达式的返回值也将减 1 例如下面的表达式 y = --x 如果 x 的初值为 5 则执行后的结果是 x 为 而 y 为 3.10.2 比较运算符 比较运算符的作用是比较两边操作数 并将比较结果返回成逻辑值 true 或 False 具体如下 > 当左边操作数大于右边操作数时返回 true 否则返回 False < 当左边操作数小于右边操作数时返回 true 否则返回 False >= 当左边操作数大于等于右边操作数时返回 true 否则返回 False <= 当左边操作数小于等于右边操作数时返回 true 否则返回 False = = 当左边操作数等于右边操作数时返回 true 否则返回 False ! = 当左边操作数不等于右边操作数时返回 true 否则返回 False 例如 表达式 4<5 返回 true 表达式 4>5 返回 False 3.10.3 逻辑运算符 逻辑运算符采用逻辑值 true 或 False 作为操作数 其返回值也是逻辑值 具体如 下 && 逻辑与 当左右两边操作数都为 true 时返回值为 true 否则返回 False | | 逻辑或 当左右两边操作数都为 False 时返回值为 False 否则返回 true 逻辑非 当操作数为 true 时返回值为 False 否则返回 true ? 三目操作符使用的主要格式如下 操作数 结果 1 结果 2 若操作数的结果为真 则表述式的结果为结果 1 否则为结果 2 3.10.4 按位操作运算符 按位操作运算符包括按位逻辑运算符和按位移动运算符 按位逻辑运算符按位逻辑运算符按位逻辑运算符按位逻辑运算符 & 按位与 | 按位或 按位异或 按位移动运算符按位移动运算符按位移动运算符按位移动运算符 << 左移 >> 右移 >>> 右移 零填充 3.10.5 赋值运算符 赋值运算符的作用是将一个值赋给一个变量 最常用的赋值运算符是 = 并由 = 赋值运算符和其它一些运算符复合产生一些新的赋值运算符 如+= *=等 将变量与所赋的值相加后再赋给该变量 例如 a 5 等价于 a a 5 将变量与所赋的值相减后再赋给该变量 例如 a 5 等价于 a a 5 * 将变量与所赋的值相乘后再赋给该变量 例如 a 5 等价于 a a 5 将变量与所赋的值相除后再赋给该变量 例如 a 5 等价于 a a 5 将变量与所赋的值求模后再赋给该变量 例如 a 5 等价于 a a 5 另外 还有一些与位运算有关的运算符 << 将变量各位左移若干位后再赋给该变量 例如 a<< 2 等价于 a a<<2 表示将变量 a 的各位左移 2 位 再赋给该变量 a >> 将变量各位右移若干位后再赋给该变量 & 将变量与所赋的值按位与后再赋给该变量 将变量与所赋的值按位异或后再赋给该变量 将变量与所赋的值按位或后再赋给该变量 3.11 JavaScript 控制结构和循环 在任何一种语言中 程序控制流是必须的 它能使得整个程序减小混乱 使之顺利按 其一定的方式执行 JavaScript 常用的程序控制流结构及语句包括 条件语句 循环语句 以及其它一些语句 3.11.1 条 件 语 句 1 If 语 句 if 语句是使用最为普遍的条件语句 每一种编程语言都有一种或多种形式的该类语 句 并在编程中总是避免不了要用到它 if 语句基本格式如下 if (conditional) { [Statements] } 其中 conditional 表示条件 它可以是任何一种逻辑表达式 如果条件的返回结果为 true 则先执行条件后面的 Statements Statements 表示语句组 然后再执行后面的程序 反之 Java 程序则直接跳过条件后面的 Statements 去执行后面的程序 下面是一个 if 语句使用的例子 本例的执行结果如图 3-1 所示 图3-12 在编程过程中 大括号 {} 的使用是非常有用的 它有助于增强程序的逻辑性和条 理性 尤其在嵌套使用 if 语句时 下面是一个嵌套使用 if 语句的例子 JavaScript Unleashed 嵌套使用 if 语句时 程序首先对第一个 if 语句进行条件判断 如果条件为真 则执 行下面的语句并对嵌套的 if 语句再进行判断 如果第一个 if 语句条件为假 则直接跳过 该条件的所有语句 去执行后面的语句 也就是说 只要 if 语句条件为假 它后面的 if 语 句的真假已没有关系 本例的执行结果如图 3-2 所示 您还可以通过重新设置变量 needsInfo 和 needsMoreInfo 的值来得到 3 种不同的结果 图3-13 2 if..else 语句 有时 仅仅使用 if 语句还不够 在条件表达式的值为假的情况下 您可以保留一系 列可执行的语句 您只需按如下所示在 if 语句块后面添加 else 语句块就行了 这种语句 的格式如下 if conditional { Statements } else{ Statements } 另外 如果您不想直接进入 else 默认块 您还可以用另外的 if 语句来合并 else 部分 用这种方法 您可以在执行适当操作之前估计几种不同的可接受的情况 这种语句的格式 如下 if conditional { Statements } else if (conditional) { Statements } else { Statements } 下面的程序仅用几行语句就可以使一个网页具有很强的交互性 JavaScript Unleashed 本例说明的是根据顾客购买商品的多少 售货员的两种不同态度 其执行结果如图 3-3 所示 图3-14 3.11.2 循 环 语 句 在程序中使用循环有多种用途 一种非常简单但又非常普遍的用途就是用它来计数 例如 编写一个显示 0 到 9 的程序是非常容易的事情 您只需写 10 条命令来显示每一个 数字 document.writeln("0 "); document.writeln("1 "); … document.writeln("9 "); 它的工作就是从 0 数到 9 但是 如果需要您数到 1000 又该怎么办呢 虽然您可以 用同样的方法来实现 但是书写这些语句将花费您很多的时间 诸如此类的问题 JavaScript 都提供解决办法 即多种循环语句的使用 1 For 语句 For 语句基本使用格式如下 for [initializing_expr] [condition_expr] [loop_expr] { Statements } 其中 [initializing_expr]表示初始化表达式 [condition_expr]表示条件表达式 [loop_expr] 表示循环增量 For 语句通常用初始化表达式声明一个变量作为循环计数器及初始值 接 着只有条件表达式返回 true 才可能执行{}中的语句 每循环一次 循环计数器的值将以 循环增量为步长进行增减 下面的例子是用 For 语句将 0~99 中的每一个数字都显示在一个标准的页上 其中每 显示 10 个数提行 JavaScript Unleashed 从本例中可以看到 初始表达式首先声明变量 i 并赋值为 0 然后根据条件表达式判 断 i是否小于 100 此时 i = 0 小于 100 条件表达式返回值为 true 于是{}中的语句就被 执行 并计算++i 的值使 i 的值加 1 这样就完成一次循环 接下来只要 i 小于 100 循环就 将继续 直至 i=100 条件表达式返回值 false 循环终止 本例的执行结果如图 3-4 所示 当然 如果条件表达式返回值 false {}中的所有语句都不会执行 和 if 语句一样 For 语句也可嵌套使用 下面的例子是用 For 语句的嵌套来产生一个 10 10 的网格坐标 下面的例子是用 For 语句的嵌套来产生一个 10 图3-15 JavaScript Unleashed 本例的执行结果如图 3-5 所示 在 For 语句的嵌套使用过程中 并不是只允许使用两层循环嵌套 您完全可以使用多 重循环嵌套结构 图3-16 2 For..in 语 句 要使用 For..in 循环语句 您需要先对 JavaScript 的对象有一个基本的了解 建议读者 先了解后面有关 JavaScript 对象的内容 再回来学习以下 For..in 循环语句 利用 For..in 语句 可以根据对象的每一种不同的属性执行一系列语句 for..in 循环语 句适用于 JavaScript 任何对象 不管这种对象有没有属性 由于每一种属性执行一次循环 因此如果该对象没有任何属性 则不进行任何循环 for..in 还可用于处理自定义对象 自 定义 JavaScript 对象的变量被认为是它的一个属性 因此每一个自定义对象都要执行一次 循环 For..in 语句的语法格式如下 for property in object { Statements } 其中 property 表示对象的属性 object 表示对象 对于每一次循环 属性被赋以对 象的下一个属性名一直到所有的属性名都使用了为止 下面的例子把 Doucment 对象的每 一个属性名和它的属性值一起显示 JavaScript Unleashed 本例的执行结果如图 3-6 所示 图3-17  for.in 循环要在 JavaScript 1.1 以上版本才能使用 它在 Microsoft Internet Explorer 3.0 Jscript 1.0 下无法正常运行 3 while 语 句 While 语句的功能与 for 语句极为相似 只是它不能直接在其声明中初始化变量以及 使变量增值 必须预先声明变量 并在语句块 Statements 中使其增量或减量 While 语句的语法结构如下所示 While condition_expr { Statements } 当条件表达式 condition_expr 的返回值为真 则执行{}中的语句组 Statements 直到检测到条件表达式的返回值为假时 循环终止 下面的例子是列出从 0 到 10 所有整数的和 JavaScript Unleashed 本例说明了如何应用逻辑变量作为判断循环是否继续进行的标志 这种状态变量要提 前声明并使它的值为真 一旦 i 的值等于 10 状态变量值就被设置为假 使得循环终止 其执行结果如图 3-7 所示 图3-18 4 Do..while 语 句 Do..while 结构从 JavaScript 1.2 版后开始提供 它的功能和 while 语句差不多 只不 过它是在执行完第一次循环之后才检测条件表达式的值 这意味着包含在大括号中的程序 段至少要被执行一次 下面给出了一个例子 在一个标准页中显示从 1 到 10 的数字 JavaScript Unleashed 本例的执行结果如图 3-8 所示 图3-19 5 Break 和 Continue 语句 在使用循环语句时 我们要注意在默认情况下 循环将无休止地进行 除非循环条件 表达式的值为假 有时 您可能想提前中断或跳过循环 要实现这一点 您只需在循环语 句块中添加 Break 或 continue 语句就可以了 Break 语句中断所有循环 而 continue 语句则跳过本次循环的剩余语句 然后开始下 一次循环 您可以从下面的程序中看出二者的区别 该程序用最基本的方法来求一个数 n 的近似平方根 JavaScript Unleashed 由本例可以看出 程序一开始使 i 的值为 0 并在 for 循环开始时显示 i 的值 接着 程序检测确认 n 为非负数 如果 n 为负数 就终止 Break 循环 程序将跳出该 for 循 环 去续执行大括号后面的语句 如果 n 为正数 则 i 与自身相乘 并将结果与 n 比较 如果 i 小于或等于 n 则将此时 i 的值保存到变量 highestNum 中 接下来的 Continue 语 句就跳过本次 for 循环的剩余语句 然后循环又从头开始 当 i 的平方值大于 n 程序就 跳过 Continue 语句达到 Break 语句 该语句完全终止循环 该程序的执行结果如图 3-9 所 示 图3-20 3.11.3 标 签 语 句 随着 JavaScript 1.2 版本的出台 该语言提供了一种使使用 Continue 和 Break 语句更 为有效的办法 标签语句可以放置在任何控制结构之前 这些控制结构能够嵌套其它语句 它可以使您跳出条件语句或循环语句 而转到您程序中的其它具体位置 在下面的程序中 您可以看到该语句的用法 JavaScript Unleashed 在本例中 for 循环被贴上了用户自定义 loopX 标签 不管程序如何嵌套 它都能跳 出或继续 for 循环 如果没有标签语句 Break 语句就只终止产生 y 值的循环 图 3-10 分别显示了 x 和 y 的值达到 4 和 9 时的结果 图3-21 3.11.4 With 语 句 有了 With 语句 在存取对象属性和方法时就不用重复指定参考对象 在 With 语句块 中 凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关 With 语句的语法 格式如下所示 With Object { Statements } 对象指明了当语句组中对象缺省时的参考对象 这里我们用较为熟悉的 Document 对 象对 With 语句举例 例如 当使用与 Document 对象有关的 write( )或 writeln( )方法时 往往使用如下形式 document.writeln( Hello! ) 如果需要显示大量数据时 就会多次使用同样的 document.writeln 语句 这时就 可以像下面的程序那样 把所有以 Document 对象为参考对象的语句放到 With 语句块中 从而达到减少语句量的目的 下面是一个 With 语句使用的例子 JavaScript Unleashed 这样 您在使用 document 的方法和属性时就可以去掉 Document 前缀 请注意程序中的title 和 URL均是Document 对象的属性 一般情况下应写作document. title 和 document.URL 使用 With 语句 您只需指定一次参考对象 这同把每一行都用 document.writeln 打印下来的结果一样 这个例子的执行结果如图 3-10 所示  由于浏览器的不同 在本例中您可能看到 URL 的一种编码格式 图3-22 3.11.5 Switch 语 句 Switch 语句用于将一个值同许多其它值比较 并按比较结果选择下面该执行哪些语 句 Switch 语句的使用格式如下 Switch( value ){ Case value1: Statements Break; Case value2: Statements Break; … Default: Statements Break; } 它表明如果 Switch 语句中的变量 value 与 Case 语句中哪一个值 value1 value2 … 相等 就执行那个 Case 语句后的语句块 直到遇到 break 语句为止 如果没有一个 Case 语句中的值与 Switch 语句中的变量 value 值相等 则将执行 Default 语句后面的语句块 Break 语句用来制止进一步执行 Switch 语句中剩下的其它任何语句 如果没用 Break 语句 不管 request 与那种情况是否匹配 每一种情况后面剩下的语句都将被执行 您可能认为这只需要使用多个 if 语句就可以实现 但过多地使用 if 语句会降低程序 的可读性 程序容易混乱 这时使用 Switch 语句是一种很好的途径 Switch 语句不仅可 读性更强 还允许您为找不到匹配时指定默认的一系列语句 下面就是一个 Switch 语句 使用的典型例子 JavaScript Unleashed 在本例中 request 变量是可变的 这取决于用户的需要 如果 request 被赋值为 Names 用该值同每种情况比较 第二种情况与 request 相等 则执行它后面的语句 本例执行的 结果如图 3-12 所示 图3-23  只有 JavaScript 1.2 以上版本才有 Switch 语句 主要内容 本 章 导 读 第第44章章 WWWWWWWWiiiiiiiinnnnnnnnddddddddoooooooowwwwwwww 窗窗窗窗窗窗窗窗口口口口口口口口 对对对对对对对对象象象象象象象象 ¡ 窗口对象的属性 ¡ 窗口对象的方法 ¡ 窗口对象的事件 ¡ 创建和关闭窗口 š 在浏览器中 Window 窗口 对象是所有对象的 Parent 根 在本章中我们将分别介绍 Window 窗口 对象的属性 方法 事件 4.12 Window 窗口 对象的属性 在浏览器中的 Window 窗口 对象主要有如下的属性 Name Length Parent Self Top Status Default Status Opener Closed 在下面我们将主要介绍 Window 窗口 对象中最常用的属性 首先让我们来看看 Default Status 和 Status 属性 Default Status 和 Status 属性是在窗口中的最下面的状态条上按照事件发生的顺序显示 状态信息 当然我们不能将 Status 和 Default Status 弄混淆了 Default Status 是在状态条 上显示缺省值的信息 Status 是用户自定义状态显示信息 在下面的实例中 我们能更充分了解 Default Status 和 Status 属性是在窗口中使用的 首先在状态栏中显示缺省信息 当从下拉菜单中选择一项时 则状态栏中的信息发生相应 地改变 从实例中我们可以很清楚地了解到怎样改变状态栏的显示信息 状态信息

       

       

      http://www.ly.scit.edu.cn

      Go...





      从下拉菜单中选择相应的选项 则状态栏信息发生改变

      下面的代码是改变状态栏信息的函数 ChangeDefaultStatus() function changeDefaultStatus() { window.defaultStatus = window.document.statusForm.messageList. options[window.document.statusForm.messageList. selectedIndex].text } 由代码 onClick="changeDefaultStatus()"调用函数来改变状态栏的信息 在浏览器中预览实例的效果如图 4-1 所示 图4-24 4.13 Window 窗口 对象的方法 在浏览器中的 Window 窗口 对象主要有如下的方法 Item alert blur close confirm open focus 在下面我们将主要介绍 Window 窗口 对象中最常用的方法 在下面将介绍 open 方法 4.13.1 Open 方 法 使用 Window 窗口 对象的 Open 方法来打开一个新的浏览器窗口 打开新窗 口的参数是通过 URL 传递给 Open 的 在下面的实例中充分利用了 Window 的 Open 方法 该实例将在新打开窗口的同 时 定义新打开窗口的大小 并且在新打开的窗口中加入状态行和其它选项 下面是实例 程序的代码清单 Openwindow.htm 新建窗口实例

      打开一个新的窗口实例……



      NewWindow.htm 新建窗口

      新打开的窗口

      下面的代码是调用 Window open 方法来打开一个新的浏览器窗口 并且设置打开 新建窗口的窗体属性 下面的代码是调用 Window.close 方法来关闭新打开的浏览器窗口 在浏览器中预览的效果如图 4-2 所示 图4-25 当单击 新建窗口 按钮时 打开一个新的浏览器窗口 并且新建的窗口都是按照我 们设置的属性参数显示出来 如图 4-3 所示 并且新建的窗口都是按照我 们设置的属性参数显示出来 图4-26 4.13.2 alert 方 法 使用 Window 窗口 对象的 alert 方法 可以在屏幕中显示一个警告框 这些警 告框是用来显示一条简短的信息 向用户表明某个情况的发生 单击 OK 按钮来关闭 警告框 在下面的实例中我们将在页面中创建一个按钮 当用鼠标单击按钮时 将弹出一个警 告框来显示某些警告信息 然后 当用户单击警告框中的按钮时 警告框将自动消失 下 面是实例程序的代码清单 Alert.htm 警告框实例

      单击按钮



      下面的代码是当用户单击按钮后 利用 Window.alert()方法来显示一个警告框 在打开页面并且单击按钮后得到的页面显示效果如图 4-4 所示 图4-27 4.13.3 Confirm 方 法 使用 Window 窗口 对象的 confirm 方法来显示一个可以接收用户输入的确认 框 也就是当用户单击 OK 或 Cancel 按钮时 我们可以检测到哪一个动作发生了 在下面的实例中我们将利用 Window 窗口 对象的 confirm 方法打开一个带有 信息的确认框 当用户单击 OK 或 Cancel 按钮时 关闭确认框 并且在窗体中显 示一条信息来确认用户是单击的 OK 按钮还是 Cancel 按钮 下面是实例的代码清 单 Confimwin.htm 确认对话框实例

      单击按钮




      下面的代码是当用户单击按钮时 利用 Window.confirm()方法来显示一个确认框 如 果用户单击确认框中的 OK 按钮 则该方法返回是真 否则返回假 在程序中通过判 断返回的值 然后在文本框中显示某个按钮 在浏览器中打开页面并且单击按钮得到的效果如图 4-5 所示 图4-28 当用户单击确认框中的 确认 按钮后得到的效果如图 4-6 所示 图4-29 4.13.4 Show Modal Dialog 方 法 使用 Window 窗口 对象的 Show Modal Dialog 方法来创建对话框 这种方法是 通过 dialog 对象来创建一个新的窗口 在 Internet Explorer 中的 dialog 对象的属性中有 width height dialogargs 和 return Value 但它只有一个方法 close 方法 下面的实例就是利用 Internet Explorer 的 Dialog 对象来显示如何使用对话框 在页面 中显示一个按钮和一个文本框 当用户单击按钮时 将显示一个带有 7 个单选按钮 它们 分别代表 7 种颜色的对话框 要求用户在 7 个单选按钮中选择一个单选按钮 然后单击 确 认 按钮 在关闭对话框后同时在主页面窗口中显示用户作出的选择结果 下面是该实例的代码程序清单 Color.htm 对话框实例

      单击按钮 选择您喜欢的颜色





      dlgwin.htm


      选择您喜欢的颜色


      绿

      下面的代码是利用 window 窗口 对象的 ShowModalDialog 方法来创建一个对 话框 并且同时在创建的对话框中载入新的文档 dlgwin.htm 在创建的对话框中显示 7 个单选按钮 要求用户作出选择 下面的代码是 7 个单选按钮的响应函数 当用户单击某个单选按钮时 就将选择的对 应按钮代表的颜色值传递给变量 seceledcolor
      下面的代码程序是使用 JavaScript 来创建一个新的窗体 在新的窗体中创建了两个按 钮 分别用来切换窗体和返回上一个窗体 分别使用 self.opener 来指向新窗口的引用 而使用 self.blur 方法来指向子窗口本身 在浏览器中预览窗体得到的效果如图 4-10 所示 下面是单击按钮后打开一个新的窗体 如图 4-11 所示 图 4-10 图 4-11 4.14 创建和关闭窗口 我们在前面已经介绍了窗口对象的属性 方法 事件 在下面我们将使用 JavaScript 来打开和关闭一个浏览器窗口 作为一个开发者可以通过调入一个文档来创建一个窗口 在创建窗口时 还可以定义窗口的一些特性 例如 定义窗口的尺寸 位置等信息 4.14.1 创 建 窗 口 使用 JavaScript 来创建一个窗口的 HTML 语法如下 windowVar=window.open(URL,windowName,[,windowFeature]) 使用 window 对象的 open 方法的参数如下 URL URL 是指向的一个目标窗口 也就是在某个浏览器窗口中创建这个新的窗 口 如果 URL 这个参数为空 那么浏览器将创建一个空白的窗口 在创建窗口 时也可以使用 write 方法来创建动态的 HTML 语句以便创建新窗口 Window Name 是创建的窗口对象的名字 赋予窗口对象一个名字是为了以后 通过调用该名字来访问该窗口对象 当然对这个参数并非是一定需要的 也可以 不赋予窗口名字 如果使用 window 对象的 open 方法创建窗口成功的话 那么将返回一个窗口对象 的句柄 如果没有创建成功将返回一个空值 4.14.2 定 义 窗 口 在 JavaScript 应用程序中可使用单个或多个框架结构 此时可能需要某些方法去定义 窗口 在 JavaScript 中提供了 4 种方法来定义窗口 其实每种方法都是通过定义窗口的属性来完成的 如果需要了解更多的信息 可以参 考窗口对象的属性以及框架对象的相关内容 4.14.3 关 闭 窗 口 可以使用 window 对象的 close 方法来关闭一个窗口 假如关闭的是当前的窗口 那么我们只需简单地调用 window.close 方法来关闭窗口即可 如果关闭的不是当前窗 口对象 如 alert setTime 等窗口对象时 使用 window.close 方法就必须有 一个目标对象的参考 如果调用它自身的 close 方法就比调用其它对象的方法来关闭 更可靠 因为这些对象本身都有自己的 close 方法 使用一个函数或者事件的方法来关闭窗口对象 都需要如下的语法来定义
      在关闭一个窗口对象时 一个比较好的方法是在窗口对象中提供一个按钮或者是一个 连接来关闭窗口对象 特别是对于新用户来说 他们可以比较清楚地了解到什么时候可以 将窗口关闭 而不影响其它工作 在下面的实例中将根据用户选择的某些属性来创建一个窗口 当用户做出选择后 单 击 open window 按钮将打开一个新窗口 下面是实例程序的代码清单 Window Open

      Window Open Example

      请先选择一些窗口属性然后单击"新建窗口"按钮.

      你将创建什么样式的窗口

      已经存在的网页

      动态网页


      窗口属性:

      Toolbar    Menubar    Scrollbars   Resizable
      Status     Location   Directories    Copy History
      Custom Size
      Width:     Height:                    

      实例在浏览器中预览的效果如图 4-12 所示 图 4-12 主要内容 本 章 导 读 第第55章章 ddddddddooooooooccccccccuuuuuuuummmmmmmmeeeeeeeennnnnnnntttttttt 对对对对对对对对 象象象象象象象象 ¡ document 对象的属性 ¡ document 对象的方法 š 在浏览器中 与用户进行数据交换都是通过客户端的 Java- Script 代码来实现的 而完成这些交互工作大多数是 document 对象 及其部件进行的 因此 document 对象是一个比较重要的对象 我们 将在本章中详细介绍 document 对象 5.15 document 对象的属性 document 对象主要有如下的属性 alinkcolor bgcolor cookie domain embeds fgcolor o,ages layers linkcolor location title url vlinkcolor 在下面我们将介绍如何使用 document 对象的一些常用属性来设置 Web 页面的某些特 性 比如可以设置文本的颜色 背景色 链接颜色 标题颜色等信息 5.15.1 BgColor 属 性 下面的代码实例就是通过改变 document 的属性 bgcolor 背景颜色 来改变页面的背 景色 实例程序代码的清单如下 bgcolor.htm 设置背景色实例

      利用 document's bgColor 属性

      来改变页面的背景色......




      下面的代码就是随机改变的页面背景色 在浏览器中预览的页面效果如图 5-1 所示 当用户单击页面中的按钮时 页面的背景 色将随机改变 图5-31 5.15.2 Anchors 属 性 document.anchors 属性是以复数的形式提交一个关于文档中 anchor 对象的索引数组 通过数组可以精确地找到指定的 anchor 对象 并取回任何需要的 anchor 对象属性 对 anchor 对象的引用是通过 document.anchors[i]来定位的 而且还可以通过检查 document.anchors.length 属性来确定数组中有多少个元素 下面的实例就是利用 document.anchors 的属性来取得文档中的 anchors 的数目 页面 动态地写出在文档中找到的 anchor 数目 并且根据找到的 anchor 对象 单击相应的按钮 可以返回到相应的位置 实例程序的代码清单如下 document.anchors 属性实例

      Top


      选择第一部分


      选择第二部分


      选择第三部分


      在浏览器中预览页面得到的效果如图 5-2 所示 当用户单击页面中的按钮时页面将发 生改变 图5-32 5.15.3 Cookie 属 性 一段信息字符串值 它是由浏览器保存在客户端的 cookies.txt 文件中的 Cookie 是一 个特殊的属性 它包含了客户机的状态信息 这些信息都可以被服务器访问 1 获 取 cookie 通过 JavaScript 程序获取的 cookie 数据存放在一个字符串中 包括整个名字 值对 下面我们将创建一个函数来获取 cookie 的值 下面就是函数的代码清单 function GetCookie (name) { var result = null; var myCookie = " " + document.cookie + ";"; var searchName = " " + name + "="; var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { startOfCookie += searchName.length; // skip past cookie name endOfCookie = myCookie.indexOf(";", startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } 2 设 置 cookie 可以利用 document.cookie 属性进行一个简单的 JavaScript 赋值操作 来将 cookie 数 据写入到 cookie 文件中 但在写 cookie 值时一定要注意数据的格式是否正确 这是能够 正确写入数据的关键所在 下面创建的是一个设置 cookie 的函数 函数的代码清单如下 function SetCookie (name, value, expires, path, domain, secure) { var expString = ((expires == null) ? "" : ("; expires=" + expires.toGMTString())); var pathString = ((path == null) ? "" : ("; path=" + path)); var domainString = ((domain == null) ? "" : ("; domain=" + domain)); var secureString = ((secure == true) ? "; secure" : ""); document.cookie = name + "=" + escape (value) +expString + pathString + domainString + secureString; } 5.15.4 Images 属 性 现在一种较为流行的用户界面技巧是 在用户把鼠标移动到代表可以单击的按钮的图 像时 可以改变图像的外观 或者是用户在按下鼠标和松开鼠标按钮时更新图像 下面就 利用 document.images 属性来实现这种方式 下面的实例就是当鼠标在图像上滑动 按下 释放或移出时 改变相应的按钮图像 下面是实例的代码清单 图像的交换 请在图像按钮上操作鼠标:

        
      在上面的实例中我们同时使用了鼠标的事件 就是在鼠标的各个事件中我们调用了不 同的图像来显示图片 这些图片都是在浏览器加载网页时预加载到浏览器缓存中的 这样 当图像被调用时就可以立即得到响应 5.15.5 forms 属 性 我们使用 document.forms 属性来定位表单对象或者元素 可以使用 document.forms[i] 来定位一个具体的表单元素 例如 为获取文档中的第三个表单的名称为 testphone 的 输入文本域中的值 可以使用如下的语句来完成 myphone=document.forms[2].testphone.value 在 document.forms 属性中还有一个比较重要的特性 JavaScript 中所有表示嵌入对象 的数组都有一个 length 属性来返回文档中表单的元素个数 因此可以使用 docu- ment.forms.length 属性的返回值 下面的实例是在文档中通过检查 blush 复选框的状态 将显示一个重复导向一个 特殊音乐站点的警告对话框 在这里用户的输入分成两个表 一个表单是复选框 另外一 个表单是导航按钮 下面就是实例的代码清单 document.forms 运用实例
      单击这里转到联谊无限.

      欢迎光临世纪联谊 精彩无限

      下面的代码就是利用 document.forms 来确定 bluish 单选按钮是否被选择 如果选择就 弹出一个 正在转到联谊无限 对话框 否则弹出另外一个 正在转到世纪星空 对话框 在浏览器中预览的页面效果如图 5-3 所示 图5-33 5.16 document 对象的方法 5.16.1 Write 和 Writeln 方法 这两种方法都是将文本送到其窗口内的文档中显示 这两种方法的惟一区别在于 document.writeln 方法在传送到文档中的字符串末时附加一个回车符 在下面的例子中我们将利用 document.write 方法创建一个 Web 页面 它利用系统 时间的改变来修改页面的内容 在这个例子中我们将创建一个课程表 按照上午 下午和 晚上分为三张 根据系统时间的变换 浏览器将自动改变 Web 页面中的内容 当检测到 当前的系统时间在 0:00—12:00 之间 浏览器将显示上午的课程表 在 12:00—18:00 之间 浏览器将显示下午的课程表 在 18:00—24:00 之间 浏览器将显示晚上的课程表 在创建该实例时 我们利用 date 对象的一些方法 getDate getDay getHours getMinutes getMonth getSeconds getTime getyear 等 下面是实例的代码清单 在上面的实例中利用 document.write()方法来创建 Web 页面的 HTML 语句 而下面代码是利用 date 对象的 toLocalSting()方法来显示当前的系统日期和时间 请选中页面中的一些文本

      这些都是用来测试的文本 您可以用鼠标来选中 然后试一试选择文本后产生的结果



      下面的代码是用来清除文本区域对象中的文本 并且赋予另外一文本信息 实例在浏览器中预览效果如图 6-3 所示 图6-38 主要内容 本 章 导 读 第第77章章 按按按按按按按按 钮钮钮钮钮钮钮钮 对对对对对对对对 象象象象象象象象 ¡ 按 钮 对 象 ¡ 复选框对象 ¡ Radio 对 象 š 本章主要通过具体的实例来介绍在 Web 页面中常用的三种按 钮对象 普通按钮 提交按钮 复位按钮对象 以及复选框对象和 Radio 对象在 Web 页面中的运用 7.21 button submit reset 对 象 在 HTML 表单中定义了三种类型的按钮 按钮 button 提交 submit 和复位 reset 对象 使用 HTML 语法定义按钮如下 三种类型的按钮看起来非常相似 但是它们的使用目的却不一样 它们的使用目的定 义如下 提交提交提交提交 submit 按钮按钮按钮按钮 提交按钮对象是用来提交数据信息给服务器的处理程序 JavaScript 代码不干涉该按钮的活动 且这些都是按钮本身属性完成的 复位复位复位复位 reset 按钮按钮按钮按钮 复位按钮对象是用来清除表单对象中各个文本域的文本信息 并且将各个缺省的值赋予文本对象域 同理 JavaScript 代码也是不干涉该按钮 的活动 且这些都是按钮本身属性完成的 按钮按钮按钮按钮 button 这是一个普通的按钮对象 为了使用该按钮完成某项工作 需 要增加一个 onClick 处理事件来驱动该按钮 在下面的实例中我们将使用三种类型按钮 使用提交按钮来提交信息 使用复位按钮 来清除表单中的文本域中信息 使用按钮来显示一个帮助用户填充注册信息的窗口 下面 是实例程序的代码清单 Online Registration

      Online Registration

      Please provide the following product information:

              Product name              Model       Version number   Operating system         Serial number   

      下面的代码是在用户单击帮助按钮后产生的 Web 页面 实例程序在浏览器中预览的效果如图 7-1 所示 图7-39 7.22 复选框对象 复选框是图像界面下一个特殊的标识 它是表单上的标志 指出的数据信息是真或者 是假 当某个复选框没有被标记或者为空 则这个数据信息标记就是假或者不被包括 如 果两个以上的复选框被聚成组 它们一般是互不影响 每个复选框都是一个独立的设置 这 与我们后面介绍的 radio 对象是有区别的 使用 HTML 定义一个复选框的语法如下 复选框主要具有以下的属性 checked defaultChecked name Value 等 下面我们 将介绍与其它对象不同的属性 Checked 属性是复选框最简单 最有用的属性 它给出用户设置或者是我们在设计程 序时赋予复选框的设置 一个复选框是被选还是没有被选 对于被选的其值是真 对于没 有被选的其值是假的 如果要由 JavaScript 语言来选中一个复选框 只要赋予该复选框的 checked 属性一个真值即可 例如 Document.forms[0].boxName.checked=true 用这样一条 JavaScript 语句来设置复选框的 checked 属性 实质上是触发了复选框的 单击事件 在下面我们将举一个实例来讲述怎样利用复选框的 checked 属性 并且可以将复选框 的 checked 的属性值作为 if…else 条件语句来判断测试的结果 下面是实例的程序清单 复选框的实例
      请单击按钮
      在浏览器中浏览该实例 得到的效果如图 7-2 所示 图7-40 7.23 Radio 对 象 使用单选按钮对象是让用户在一组选项中选择一个单一的选项 假如选择一个选项 那么其它选项就不能再被选择 使用 HTML 语法定义 Radio 对象的格式如下 单选按钮对象主要具有如下的属性 checked defaultChecked length name type value 等 我们将在下面通过实例来介绍单选按钮对象的最常见和最有用的属性 在实例中我们将在 Web 页面中创建三个单选按钮对象 并且创建一个普通按钮 当 用户单击普通按钮时 将弹出一个对话窗口显示在 Web 页面中的 Radio 对象中的某个单 选按钮被选择 下面是实例的代码清单
      星期一
      星期二
      星期三
      星期四
      星期五
      星期六
      星期日
      下面的代码是利用 Script 语言来处理单选按钮对象的过程 在浏览器中预览的效果如图 7-3 所示 图7-41 主要内容 本 章 导 读 第第88章章 选选选选选选选选择择择择择择择择和和和和和和和和隐隐隐隐隐隐隐隐藏藏藏藏藏藏藏藏对对对对对对对对象象象象象象象象 ¡ 选 择 对 象 ¡ 隐 藏 对 象 š 本章主要通过两个具体的实例介绍了选择对象和隐藏对象运 用在 Web 中用户作出的选择结果处理方式 图1-1 8.24 select 对 象 Select 对象是提交表单对象中最有用和最具有吸引力的对象之一 它们可以在一个表 单中以弹出列表方式出现在 Web 页面中 也可以以滚动列表框的方式出现在 Web 页面中 其中弹出列表的方式是设计 Web 页面中最常见的方式 它只把用户选择的项显示在 Web 页面中 其它的选项则隐藏在列表框中 以免一些复杂的信息引起 Web 页面的混乱 当定义一个表单内的 Select 对象时 使用的 HTML 语法如下 在定义 Select 对象时 其中 SIZE 属性确 定了 Select 对象是作为弹出列表方式显示还是 以列表方式显示 如果我们在设计时忘记设置 这个属性 那么浏览器将自动地将 SIZE 的属 性赋予 1 为缺省值 这样就使得 Select 对象是 以弹出列表的方式出现在 Web 页面中的 如 图 8-1 所示是我们在设置 SIZE 属性的值为 4 和为 1 时的效果 在下面的实例中我们将利用 JavaScript 语 言来选择 Select 对象中的选项 实现该功能是 通过利用 select 对象的 options 数组特性 该 实例程序的代码清单如下
      请在下面选择您喜欢的城市

      下面的代码是利用 select 对象的 option 数组特性来显示用户所做出的选择 它通过数 组的边界作为循环的变量上限 然后由 select 对象的 selected 属性的逻辑布尔值作为循环 条件 进一步判断用户的选择 代码程序在浏览器中预览的效果如图 8-2 所示 图 8-2 8.25 隐 含 对 象 隐含对象是表单对象中一个简单的字符串占用者 该对象对用户的 Web 页面是不可 见的 隐含对象没有任何方法和事件处理程序 只是作为字符串的传送工具 起到一个中 间变量的作用 恰好这些字符串是 Script 语言需要引用的值或者是其它链接的数据 当定义一个表单内的隐含对象时 使用的 HTML 语法如下 例如下面的一行就是定义一个隐含的对象代码 在下面的实例中 我们首先在 Web 页面中创建了几个单选按钮对象 要求用户做出 选择 如果用户做了多次选择 那么用户单击恢复按钮 可以将用户上次的选择恢复 这 实际就是使用的隐含对象来作为中间变量 即以用户上次的选择结果 当需要恢复时就将 保存在隐含对象中的值传递给所需的变量 实例程序的代码清单如下 Hidden Test

      选择您喜欢的国家


      中国
      美国
      日本
      德国
      法国
      瑞士
      丹麦
      韩国
      下面的代码是提交用户的选择信息给隐含对象 function postData(value) { document.form1.holder2.value = document.form1.holder.value document.form1.holder.value = value } 下面的代码是从隐含对象中恢复数据信息 function resetValue() { var len = document.form1.ctyList.length for (var i=0; i location.hash 属性

      顶端


      第一部分


      第二部分


      第三部分

      下面的代码是其在响应按钮时 将文档中的 anchor 传递给浏览器 并指向一个新的 URL 实例在浏览器中预览的效果如图 9-1 所示 图9-42 9.27 Href 属 性 在所有 location 对象属性中 href 超文本引用 是在编写 Script 过程中最常被调用 的一个属性 location.href 属性提供了一个指定窗口对象的整个 URL 的字符串 在赋值语 句的左边使用该属性是在窗口中显示打开的 URL 的 JavaScript 方法 任何一条语句都可 以在一个单框架浏览器窗口中加载 Web 站点的索引网页 window.location=”http://www.yahoo.com” window.location.href=”http://www.yahoo.com” 在不同的浏览器中 location.href 属性的值可能会被非字母和数字的 ASCII 码等来编 码 这些 ASCII 编码中包括%符号和 ASCII 数字值 如果需要获取一个 URL 并且在创 建的文档中将显示为一个字符串 最安全的方法是通过 JavaScript 内部的 unescape()函数 来传递所有这种编码的字符串 在下面的实例中 我们将使用 JavaScript 内部的 unescape()函数来处理捕获的 URL 然后在警告对话框中显示经过 ASCII 编码的路径名 实例的代码清单如下 显示路径

      下面的代码是用来取得 URL 的路径和显示 URL 的路径 9.28 pathname 属 性 location.pathname 属性的 URL 的路径名称部分是由服务器的 Root 根 相关的目录 结构组成 也就是说根 在一个 http 连接的服务器名 不是路径名的一部分 如果 URL 的路径是通向根目录的一个文件 那么 location.pathname 属性是一个反斜杠 / 任何 其它路径名是以反斜杠 / 开始来指明一个嵌套在根内的目录 在前面我们已经讲解了关于运用 location.pathname 属性的实例 在这里我们不再讲 述 9.29 Protocol 属 性 任何 URL 的第一个组成部分是用于特定通信类型的协议 下面的列表是目前使用最 多的各种通信协议 Web http: File file: FTP ftp: MailTo mailto: Usenet news: Gopher gopher: JavaScript javascript: Navigator about: 对于最常用的 World Wide Web 网页来说 Hypertext Transfer Protocol http 超文 本传输 协议是标准协议 在 location.protocol 属性中不仅包括协议名 还包括紧跟着的 冒号分界符 这样对于一个典型的 Web 网页 URL 的 location.protocol 属性是 http:  通常在 URL 中协议后的斜杠符不是 location.protocol 属性的一部分 在所有的 location 对 象属性中 只有完整的 URL location.href 显示协议和其它部分间的斜杠分界符 在下面的实例中我们将运用 location.protocol 属性来创建一个 Web 页面 下面是实例 程序的代码清单 location.protocol Example

      protocol//hostname:port pathname

      Protocol:    Hostname:    Pathname:      
      实例程序在浏览器中预览的效果如图 9-2 所示 图9-43 主要内容 本 章 导 读 第第1100章章 hhhhhhhhiiiiiiiissssssssttttttttoooooooorrrrrrrryyyyyyyy 对对对对对对对对 象象象象象象象象 ¡ history 对象的属性 方法 š 本章主要通过两个具体的实例来介绍历史对象的 current length next previous 属性以及 Back Forward Go 方 法的运用 当我们在 Internet 上进行网上冲浪时 浏览器会自动维护一个用户最近访问的 URL 列表 这个列表是由 history 对象在 JavaScript 中完成的 一般来说在该列表中的 URL 是 不能通过 Script 秘密获取的 对于 history 对象及其它内部的 back 或 go 方法运用 HTML 文档中提供的 Back 按钮的替代功能 这个按钮触发了一个 Script 检查历史记录表中的所有元素 然后返回 一个网页 您的文档不必知道任何关于用户是从哪里登录到您的 Web 页面的 URL 中的 History 对象的主要属性如下 current length next previous 等 主要方法如下 Back Forward Go 等 我们这里主要介绍 history 对象的 length 属性 用 history 对象的 length 属性来计算历 史记录列表中的元素 但是这个有价值的信息在编写与当前位置相关的导航脚本中并不是 十分有用 因为在脚本中不能从历史记录队列中当前文档所在处得到任何东西 但是如果 当前文档在列表的顶端 那么我们可以计算文档的相对位置 在下面的实例中我们将使用简单的函数来显示基于浏览器的历史记录中元素的个数和 两个警告信息之一 下面是实例程序的代码清单 HISTORY 对象
      在下面的实例中我们将利用 history 对象的常用属性 方法来创建一个 Web 页面 下 面是实例的代码清单 History 对象

      Ways to navigate

      • 使用 location 对象.

      • 使用 history 对象的 back() and forward() 方法.

      • 使用 history 对象的 go() 方法:

      By Count

      By Name

      History 列表:

      下面的代码是 Web 页面中的几个按钮的响应函数 它们分别使用了 history 对象的属 性和方法 实例程序在浏览器中预览的效果如图 10-1 所示 图10-44 主要内容 本 章 导 读 第第1111章章 llllllllaaaaaaaayyyyyyyyeeeeeeeerrrrrrrr 对对对对对对对对 象象象象象象象象 ¡ layer 对象的属性 ¡ layer 对象的方法 ¡ JavaScript 操作层 š 在浏览器中 窗口中加载的主文档之上 每一层都有一些属 于本层的几类 HTML 内容 临时更改或贴换单独一层的内容不会影 响到其他层 且整个一层可以在 JavaScript 的控制下重定位 重设 大小或隐藏属性 11.30 layer 属 性 layer 对象主要具有如下的属性 above background below bgcolor clip document left name pagex parentlayer siblingBelow src top visibility zlndex 等 在下面我们将分别介绍 layer 对象的一些常用的属性 11.30.1 Above below siblingAbove siblingBelow 每一层在它自己的物理层中都约定用传统的 x 和 y 变量代表宽和高 第三个尺度 层 相对于层的堆叠的位置 叫做 z-order 层的顺序是根据加载的次序自动赋值的 最高的 数目是顶层 在页面中我们知道哪层在另一层的前面对我们编写 script 是很重要的 尤其是当您的 script 需要根据用户的动作重定位层的顺序时 Layer 对象提供了上面的四个属性来确定 与某层相邻 对于 layer.above 和 layer.below 两个属性 是全局地考虑页中定义的所有层 忽略一 层内嵌套的层 如果一层位于某层的上面 那么就有属性指向该层的引用 如果在哪个方 向没有层 则对该层引用的值就是空 例如在一个三层的文档中 第一层定义为最底层 它的上面有一层 则 layer.above 就有一个对上层的引用 但是没有下层 则 layer.below 的值就为空 我们在 Script 时就不能对 layer.below 属性引用 否则将导致运行时 script 出 错 提示您的对象必须是有属性的 同理第三层就只具有下层 那么 layer.below 就有对 下层的引用 而没有对上层的引用 对于 layer.siblingAbove 和 layer.siblingBelow 两个属性是将它们自己限定在一个父层 所包含的层组中 而实际就是在一个父层组内两个子层之间的引用 11.30.2 background 在一个层中可以赋予一个背景图 初始图像一般都是由 标记符的 BACKGROUND 属性设置的 但是在任何时候都可以通过 layer.background 属性赋予另外 一幅新图像 层的背景图就像整个网页中的图像 它们与页面中的内容不一样 同时它们也可以是 一些内容 我们可以根据自己的需要选择适合自己的图像 Layer.background 属性是一个图像对象 如果要在运行中改变图像 则必须将 layer.background.src 属性设置为期望的图像的 URL 如果调用的图像尺寸比层的区域小 则背景图像将自动复制来填充整个层区域的大小 而不是图像的缩放 当然我们也可以通 过设置 layer.background.src 属性为空去掉层的背景图像 下面我们将举一个简单的实例 在页面中定义了一层 该层主要有五个按钮来改变第 二层的背景 同时将五个按钮放在一个层中是为了确定按钮和背景层的区域在所有的平台 都是按上边对齐 当第二层加载时 只赋予一个灰色的背景色 写出一些反显的文本 这些图像都是由 几幅风景图像所组成的 下面是实例程序的清单 Layer Background





      which may or may not read well with the various backgrounds.click the button 11.30.3 Clip 属 性 Layer.clip 属性自身就是一个对象 它使用六个位置属性定义层中用户可见的矩形区 域的位置和大小 这六个属性是 Clip.top Clip.left Clip.bottom Clip.right Clip.width Clip.height 这些属性的度量单位是像素 值是相对于层对象的左上角的 剪裁区域的大小可以小于或等于层对象 如果在标记符中没有定义 Clip 属 性 那么剪裁区域就与层同样大小 这样 clip.left 和 clip.top 值自动为零 因为剪裁区域 从层的矩形区域的最左上角开始 再设置一个 clip 属性不移动层或层的内容 而只是移动层的可见区域 每一次调整对 可见区域的外观移动有独特地影响 例如 如果 clip.left 值从原来的 10 增加到 30 则整 个矩形区域的左边就向右边移动 30 个像素 其他边保持不变 更改 clip.width 属性只移 动右边 而改变 clip.height 属性只影响底边 不过 每次只能更改一边的属性 在下面的实例中 我们将在页面中设计六个文本域来调整剪裁区域的大小 下面是实 例程序的代码清单 layer clip 属性
      请输入 clip 各个边的属性值

      layer.clip.left
      layer.clip.top
      layer.clip.right
      layer.clip.bottom
      layer.clip.width
      layer.clip.height

      看变换

      请注意这里的变换效果

      实例是利用 JavaScript 编制的函数来缩放剪裁区域 剪裁区域的变换是通过四个边都 设置到层的宽和高的中点来缩放 为了使得两个轴上的缩放都均匀 在两个方向都成比例 地缩放 从而使剪裁区域的变换形成一幅动画的效果 11.30.4 left top 属 性 layer.left 和 layer.top 属性与标记符中的 LEFT 和 TOP 属性都相对应 这些 值决定了层的左上角相对于浏览器窗口 框架或它所在的父层的水平和垂直的坐标 调整这些属性都会重新定位层但不会改变其大小 剪裁区域的值不会因为这些属性的 变换而改变 因此如果您要创建一个跟着在 X 和 Y 轴直线上拖动鼠标指针移动的可拖动 的层对象 调整这些属性中的某个会比使用 layer.moveTo 方法更方便 11.30.5 Name 属 性 Layer.name 属性反应了标记符中的 NAME 属性或赋予给类似的 CSS-P 对象 名字 该属性是只读的 如果在创建层时不赋予它一个名字 那么浏览器将自动产生一个 名字形式的编号 但页面每次加载时将产生不同的编号 因此我们在设计程序时不能引用 由浏览器自动产生编号 否则将发生错误 11.30.6 src 属 性 层的内容可以从定义它的文档中来 也可以从外部资源中读取 如一个 HTML 或一 个图像文件 如果属性定义由外部的文档来读取 则外部的文件由 SRC 属性指 出 Layer.src 所反应的就是这个属性 这个属性的值是一串外部文件的 URL 如果标记符中没有指定 SRC 属性 则返回空 不要将此属性设置为空来替代清除内容为 document.write 的层或替代加载 一个空页面 否则空字符串将被当成一个 URL 并加载到当前客户的浏览器中 如果通过向层中加载一个新的源文件来改变层的内容 简单地将一个新的 URL 赋予 layer.src 属性即可 当然如果在层中嵌套有层 那么这些嵌套的层将被加载到正在改变 src 属性的层中的内容所替代 新文件是一个定义了自己的嵌套层的 HTML 文件 11.31 layer 对象的方法 11.31.1 Load url newLayerWidth 方法 加载后改变层内容的一种方法是使用 layer.load 方法 这个方法有利于设置 layer.src 属性 因为它的第二个参数就是新层内容的宽度 如果不指定第二个参数 将被一个小的 缺省值替代 如果您认为新文档对于存在的层的高度太高 就需要在加载新文档前用 layer.resizeTo 方法或设置独立的 layer.clip 属性 这使得层的可见区域保持合适的大 小 在下面的实例中我们将在页面中创建一个按钮来让用户在层中加入长短不同的文档 实例程序的代码清单如下 loading new documents
      Loading new documents:


      Text loaded in original document.

      11.31.2 MoveAbove(layerObject) moveBelw(layerObject)方法 除了 layer.zIndex 属性外 层对象无法调整影响层的全局堆栈顺序的属性 Layer.moveAbove 和 Layer.moveBelow 方法可以调整与另外一层对象有关的层 这两个层必须是兄弟关系 也就是说他们必须包括在同层内 我们不能将已经存在的层从 一个层中移动到另一个层中 而必须从源层中删除 然后在目的层中创建一个新层 这些 方法都不会影响可见区域的大小和层的坐标系定位 在方法中的参数是一个层对象的引用 即捕获的物理引用指针 例如 在下面的一段 代码中 document.fred.moveAbove(document.ginger) 指令是将 Fred 对象层移动到 ginger 对象层上面 Fred 层与 ginger 层的堆栈关系是任 意的 但是它们必须嵌套在同一层中 11.32 JavaScript 操作层 首先需要定义访问层的 JavaScript 的语法 因为对于不同的浏览器而有一些不同 例 如 Navigator 和 Internet Explorer 他们将使用不同的方法来访问层 在 Navigator 浏览器中是通过层数组来访问的 因为他们在层中定义了自己 name 属 性 直接调用他们的 name 属性就可以访问层 而在 Internet Explorer 浏览器中是使用整 个数组来访问的 在 name 属性中没有定义访问这个层的 name 属性 但是他们定义了一 个叫 ID 的属性来访问层 在下面的实例中我们将在页面中创建两个按钮和一个层 然后由这两个按钮来控制这 个层的显示和隐藏 实例程序的代码清单如下
      DIV 1
      实例在浏览器中预览的效果如图 11-1 所示 图11-45 主要内容 本 章 导 读 第第1122章章 字字字字字字字字符符符符符符符符串串串串串串串串对对对对对对对对象象象象象象象象 ¡ 转 义 字 符 ¡ 字符串对象的属性 ¡ 字符串对象的方法 š 该对象是为一系列用双引号或单引号定义的字符 例如 string= 这是一个字符串对象 在设置字符串对象的时候一定要注 意引号的匹配 12.33 转 义 字 符 在 JavaScript 中 有一些特殊的字符串对象 主要是引号 回车符号 空格键等等 下面列出这些字符的实现方法 双引号 \ 单引号 \ 反斜杠 \\ 退格 \b Tab \t 换行 \n 回车 \r 进格 \f 例如下面的语句就可实现以上的特殊字符 在编写 JavaScript 程序中 通过反斜杠加 上特殊的字符就实现了特殊字符在页面中表现的方法 请看下面的示例 示例效果如图 12-1 所示 图12-46 原代码如下

      转义字符的引用

      其中 yuju="大哥说大哥说大哥说大哥说\"我错了我错了我错了我错了\"" 该语句设置一个字符串对象 alert(yuju) 调用 window 的 alert 方法 在文档窗口显示一个提示框 在提示框 中显示设置 大哥说"我错了" 这样的字符 通过该例的设置 我们对字符串对象有了一个大致的了解 下面我们来看看该对象的 属性 方法以及具体的设置方法 12.34 字符串对象的属性 length 属性用来测量字符串对象的长度 在实际的程序设计中 一般用它来获得用户 输入数据的长度 在以后的数据校验以及数据的判断中 都要利用到该属性 该属性的引用格式一般为 string.length 看下面的例子 我们来设置该属性 C \My Documents\zhuanyi.htm

      转义字符的引用

      在 IE 中浏览的效果如图 12-2 所示 图12-47 其中 wo="hello world" 定义一个字符串对象 js=wo.length 设置变量 获得字符串对象的长度值 document.write("
      "+js) 在文档中写出变量的值 该值就是设置的字符串 对象的 length 属性值 12.35 字符串对象的方法 12.35.1 + 加 法 该方法将两个字符串连接起来 在实际的应用中常涉及到 请看下边的例子 C \My Documents\zhuanyi.htm 图 12-3

      转义字符的引用

      在浏览器中 该页面如图 12- 3 所示 可以看出 前后两个字符串对象被连起来了 12.35.2 charAt 该方法从字符串中返回一个字符 这个方法在应用的时候 通常会设置一个起始位置 的参数 然后传回位于该字符串对象位置的字符值 在使用的时候 系统认为字符串起始 的位置为 0 该方法的调用方式如下 string.charat index 其中 index 就是用户设置的参数 用来获得字符的位置 请看下面的例子 My Document

      转义字符的引用

      图 12-4 其中 yuju="大哥说错了大哥说错了大哥说错了大哥说错了 " 设置字符串对象 cd=yuju.charAt(2) 在该语句中 调用字 符串对象的 charAt 方 法 获得该字符串对 象的第三个位置的 值 即 说 然后 将该字符赋给设置的 变量 cd document.write(cd) 在文档中写出设置 的变量值 在浏览器中 该页面显示的效果如图 12-4 所示 12.35.3 indexOf 该方法从一个特定的位置开始查找设置的字符 返回一个字符或是字符串上起始位置 值 如果在特定的位置找不到用户设置的字符串对象 则返回一个-1 利用这样的特性 在利用 JavaScript 设置查找数据的格式化过程中非常有用 在后面的综合部分中 系统常 利用该方法来设置检索和数据检验方面的工作 这里只简单地介绍一下其用法 该方法的调用格式如下 string.indexOf(string index) 其中 括号中括号中括号中括号中 string 指的是要查找的字符串 index 指的是起始位置 看下面的示例 C \My Documents\zhuanyi.htm

      转义字符的引用

      其中 yuju="字符串对象字符串对象字符串对象字符串对象 " 设置字符串对象 cd="对象对象对象对象" 设置查找的字符 re=yuju.indexOf(cd) 该语句用来在设置的字符串对象 yuju 中查找 对象 二 字 如果查找到了 就将该字符位于字符串对象的起始位置赋给设置的变量 re 这里通过分析 可以得出 re 的值为 3 document.writeln(re) 在文档中写出变量的值 ls=yuju.indexOf(cd 5) 设置查询的起始位置为第五个字符处 该字符的长度 为 5 所以该对象返回的值为-1 即 ls 的值为-1 在浏览器中 该页面的显示如图 12-5 所示 图 12-5 12.35.4 lastIndexOf 该方法的使用与上面的 indexOf 的使用方法一样 只是该方法从字符串对象的尾部开 始搜索 我们将上面的例子稍加改动 看看这两个方法的不同处 C \My Documents\zhuanyi.htm

      转义字符的引用

      在浏览器中 该页面显示的值为 3 如图 12-6 所示 图 12-6 12.35.5 substring 该方法为字符串截取方法 在设置的时候 一般会设置两个参数来指定截取的位置 然后将两个参数间的字符串返回给设置的变量 当两个参数相等的时候就返回一个空字符 串 在设计的运行中 一般可以不管参数的大小和前后的位置 它截取的顺序都是从最小 的参数开始 截取到最大参数位置 如果没有指定最后的参数 系统默认截取到字符串对 象的末尾 该方法的调用格式如下 string.substring(index1 index2) 其中 Index1 和 index2 中较小的一个为截取的起始位置 请看下边的设置示例 C \My Documents\zhuanyi.htm

      转义字符的引用

      其中 yuju="字符串对象字符串对象字符串对象字符串对象 " 设置字符串对象 re=yuju.substring(3 5) 调用 substring()方法 从字符串对象的第三个位置截 取到第五个位置 然后将截取的对象赋给设置的变量 re 这里 re 的值为 对象 document.writeln(re) 在文档中写出变量的值 在浏览器中 该脚本的情况如图 12-7 所示 图 12-7 12.35.6 toLowerCase 该方法将字符串对象中的所有字符转换为小写的字符 在利用该方法后 成批次地将 用户设置的字符串对象转换为小写字符 在转换的过程中 文本字符串对象不会发生质的 转变 该方法的调用格式如下 string.toLowerCase() 其中 string 指的是用户设置的字符串对象 请看下面的例子 xiaoxie

      转义字符的引用

      其中 yuju="THIS IS A BIG DOG" 设置字符串对象 由于在设置的过程中 举例设 置转换大写字符为小写字符 所以这里设置的是大写的字符串对象 document.writeln("大写大写大写大写 ") 该语句将设置的字符串对象在文档中写出来 并 冠以大写的提示 re=yuju.toLowerCase() 调用设置的方法 将设置的字符串转换为小写字符 document.writeln("
      小写小写小写小写 "+re) 在文档中将转换而来的小写字符串对象 写出来 该脚本在浏览器中的显示情况如图 12-8 所示 图 12-8 12.35.7 toUpperCase 该方法同上 只是将字符串对象中的小写字符转换为大写字符 该方法的调用格式同 上 这两种方法将字符串对象转换为用户指定的格式 在实际的脚本设计中主要是利用该 方法来校验用户的输入 比如确定用户输入的密码 指定用户名称等等 请看下面的例子 daxie

      转义字符的引用

      该例子在上面例子的基础上 设置了将转换而来的小写字符串对象转换为大写字符 串 其中 result=re.toUpperCase() 这里 re 就是利用 toLowerCase 转换而来的小写字符 串对象 该语句利用设置的方法将字符串对象全部转换为大写的字符串对象 document.writeln(result) 该语句在文档中显示用户设置的字符串对象 在浏览器中 该页面的显示情况如图 12-9 所示 图 12-9 12.35.8 anchor 利用该方法在页面中创建和显示一个 HTML 超文本目标 在利用该方法的时候 必 须在文档中建立一个锚点 然后调用 write 方法在文档中写出该连接锚点 达到在页面中 快速定位的目的 该方法的调用格式如下 string.anchor(anchorname) 其中 string 指的是要设置锚点的字符串对象 anchorname 系统设置的锚点 下面的实例讲解该方法的利用 daxie

      字符的引用

      其中 zifu="this ia anchor" 设置字符串对象 anc=zifu.anchor("anc") 设置 anchor 名称 document.write(anc) 在文档中设置该锚点 字符的字符的字符的字符的引用引用引用引用 设置在页面中应用该锚点 在用户的利用中 只要点击该连接 就会跳到设置的锚点位置 该脚本在浏览器中的显示情况如图 12-10 所示 图 12-10 12.35.9 big 该方法将设置的字体转换为大字体格式 在功能的实现上 跟 HTML 语言的一 样 在页面中显示时 会将设置的字符串对象大号显示 该方法的应用格式如下 daxie

      字符的引用

      其中 zifu=" 您好您好您好您好" 设置字符串对象 anc=zifu.big() 调用系统设置的方法将字体放大显示 document.write(anc) 在文档中显示用户的设置 在 IE 中浏览该页面的情况如图 12-11 所示 图 12-11  与上面方法功能设置相似的还有 string.small() 12.35.10 bold 该方法将设置的文本粗体显示 在功能的实现中与 HTML 标记中的相似 这些方 法实质上是 JavaScript 格式的控制语言 该方法的应用格式如下 string.bold() 其中 string 设置字符串对象 该方法在实际的页面设计中的应用情况如下 daxie

      字符的引用

      其中 zifu="字符的引用字符的引用字符的引用字符的引用 " 用户定义的字符串对象 anc=zifu.bold() 调用系统设置的方法 将字符串对象转换为粗体的格式 document.write(anc) 在文档中将设置的格式显示出来 在浏览器中 该脚本的表现情况如图 12-12 所示 该方法与功能相似的地方如下 string.blink() 设置字体的闪烁 string.itaics() 设置文本的斜体显示 string.strike() 设置文本下划线 string.sub 设置下标 string.sup 设置上标 string.fontsize 设置字体的大小 string.fontcolor 设置字体的颜色 图 12-12 在如下的例子中 系统地看看这些格式的设置情况 daxie

      字符的引用

      在该脚本的设置中 设置了一个字符串对象 然后调用设置的字符串对象方法 用户 设置的字符串对象转换为相应的格式 其中 anc5=zifu.fontsize(7) 设置字体的大小 后设置的参数数字一般为 1-7 anc6=zifu.fontcolor("red") 设置字体的颜色 这里可以直接是用户设置的色彩 值 在浏览器中 页面的显示情况如图 12-13 所示 图 12-13 主要内容 本 章 导 读 第第1133章章 日日日日日日日日期期期期期期期期对对对对对对对对象象象象象象象象 ¡ 时间对象的属性 ¡ 时间对象的方法 š 本章主要通过具体的实例来介绍时间对象的设置以及该对象 的 setYear setTime getTime getDay getDate getMonth getYear 等方法的运用 13.36 时间对象的属性 在 JavaScript 中 提供了一些处理日期的对象和方法 通过 JavaScript 日期对象的帮 助 您可以提取系统内部的时间 设置新的时间 通常 我们会在一些页面上看到用户设 置的时钟 它给人一种非常专业的感觉 当您在页面中设置了一些分时的问候 中文的星 期格式或者是动态的时钟的格式的时候 您一定会对页面设计有更深入的理解 一定对 JavaScript 脚本编程有了理性的认识 这样也深入 JavaScript 程序设计了 在 JavaScript 中 将 date 作为一个对象来理解时 用户还需在使用的时候加以定义 先定义一个日期对象实体 一般就将 Date 认为一个时间关键字 在用户定义了用户的时 间对象之后 就可以设置系统的时间 调用系统预定义的方法 设置用户想要设置的时间 效果 开发有关时间的系统了 日期对象属于 JavaScript 的内建对象 该对象没有任何属性 但系统设置了一些方法 来实现时间的设置 修改 在系统中 虽然我们看到的是实际时间的显示 但是系统存储的时间却是 1970 年 1 月 1 日午夜算起的毫秒数 所以在日期对象中禁止使用 1970 年 1 月 1 日前的时间 下面 我们来看看时间对象的设置 时间对象方法的操作 13.37 时间对象的设置 13.37.1 NEW 在 JavaScript 中 日期对象的设置要利用到一个关键字 new 这个 new 关键字的运用 在 JavaScript 中相当有用 对于新对象的创建都要利用到该关键字 对于日期对象的创建 的格式如下 thisday=new Date . 其中 thisday 是我们新创建的日期对象 对于新创建的日期对象 我们就可以在脚本设计中直接应用了 如果要日期对象跟上 相应的参数 那么其格式如下 thisday=new Date(month day,year hours:minutes:seconds) 其中 month 设置新日期的月份 day 设置新日期对象的日子 year 设置新日期对象的年份 hours 设置新日期对象的小时数 minutes 设置新日期对象的分钟数 seconds 设置新日期对象的秒数 对于新设置的时间数 系统认为该设置是可以选择设置的 也就是说 该日期的时间 可以设置也可以不设置 请看下边的实例

      在本例中 设计了设置日期对象的实例 在脚本的设计中 一共设置了三个时间对象 来处理日期对象设置的三个方面 一个是取得用户当前系统的时间 另两个是取得用户设 置的时间 一个设置没有跟时间 只有日期 一个设置了时间 最后调用文档对象的 write 方法将用户设置的日期对象显示出来 通过该实例的设置 用户可以熟悉日期对象设 置的各种情况 在该实例中 thisday=new Date() 设置一个日期对象 在该设置中 没有跟任何的参数 这样的设 置 系统默认为取得用户当前日期 document.write(thisday) 该语句调用文档对象的 write()方法 将用户设置的日期在文 档中显示出来 thisday2=new Date("08/09/1999") 设置另一个日期对象 设置的日期为 1999 年 8 月 9 日 这样的设置系统默认的时间为 0 点 0 分 0 秒 document.write("
      "+thisday2) 在文档中显示设置的日期变量 2 thisday3=new Date("08/09/1999 20:15:15") 设置一个日期对象 该对象的设置中加入 了系统设置的时间 20 点 15 分 15 秒 用户可以比较它和上一个日期对象的不同 在系统 显示的时候 就会显示用户设置的时间而不是系统指定的时间 0 点 0 分 0 秒 在浏览器中 脚本的执行情况如图 13-1 所示 下面来看看 日期对象方法的 应用 13.37.2 get Year 该方法获得 用户设置的日期对象值与 1900 的差值 尽管用户在设置日期对象的时候是向日期对象传 递了一个四位的年份值 但是利用该方法获得的年份值却为一个两位数 在页面设计中 可以将设置的值用语句返回一个四位的数字 该方法的应用格式如下 dateobj.getYear() 其中 dateobj 是用户设置的日期对象 在脚本设计中 该格式的引用如下

      在该脚本中 设置日期对象的年份为 1999 年 8 月 9 日而没有设置时间值 然后利用 getYear 方法获得用户设置的年份值 然后将获得年份值赋给设置的变量 thisyear 然而该 值为一个与 1900 相比较带来的两位数 然后在设置与 1900 相加 将年份值转换为四位的 下面来看看 日期对象方法的 应用 图13-48 格式 其中 thisday=new Date("08/09/1999") 设置日期对象 thisyear=thisday.getYear() 取得用户设置的日期对象的年份值 thisyear1=thisyear+1900 设置年份为四位数的格式 document.write("
      "+thisyear) 显示两位格式 document.write("
      设置的日期年份为设置的日期年份为设置的日期年份为设置的日期年份为 "+thisyear1+"年年年年") 显示四位格式 的设置 在浏览器中 脚本运行的情况如图 13-2 所示 图13-49 13.37.3 getMonth 该方法获得设置日期对象中的月份值 如果月份为 1 月 则返回一个零值 如果为 12 月则返回一个 11 所以该方法返回的值为 0-11 在具体的设计中 还可在返回值的基础 上加上 1 才能获得系统设置的月份 该方法的调用格式同上 请看下边的实例

      该脚本的设计获得系统当前日期的月份 在该设置的过程中 设计了一个转换过程 由于系统当前的月份与利用该方法获得值相差一个 1 所以在具体的设置过程中 要在获 得值中加上 1 其中 thisday=new Date() 设置日期对象 由于没有跟任何的参数 所以系统默认是 取得系统当前的日期 thismonth=thisday.getMonth() 调用设置的方法 获得系统的月份值 该值与 系统当前的月份相差 1 thismoth=thismonth+1 设置转换 将获得的值加上 1 document.write("
      系统当前的月份为系统当前的月份为系统当前的月份为系统当前的月份为 "+thismoth+"月月月月") 在文档中写入系 统当前的月份 在浏览器中 该脚本的执行情况如图 13-3 所示 图13-50 13.37.4 getDate 该方法返回一个月份中的日期值 这个方法直接返回一个 1 到 31 之间的日期值 它 和其它的设计有了较大的区别 所以在实际的设置中 可以直接应用该方法获得值 该方法的调用格式如下 dateobj.getDate() 在页面设置中 应用的格式如下

      其中 thisday=new Date() 设置系统当前的日期 thismonth=thisday.getMonth() 取得用户设置的日期对象的月份值 thismoth=thismonth+1 月份值的转换 document.write("
      系统当前的月份为系统当前的月份为系统当前的月份为系统当前的月份为 "+thismoth+"月") 显示系统设置的 月份 thisdate=thisday.getDate() 取得当前日期位于该月的天数 document.write("
      系统当前的日期为系统当前的日期为系统当前的日期为系统当前的日期为 "+thisdate+"号号号号") 在文档中显示该 日期值 在浏览器中 该页面的执行情况如图 13-4 所示 图13-51 13.37.5 getDay 该方法取得用户设置的日期的星期数 系统利用该方法获得值为 0 到 6 其中 0 表示 星期天 而 6 表示星期六 所以在设置的过程中 除了 0 不符和国人的习惯外 其它的都 可以直接引用 该方法的调用格式如下 dateobj.getDay() 在如下的实例中 设置了中文星期的显示 其源代码如下

      该脚本为一个范例 用户在设计页面脚本的过程中 可以直接调用 该脚本的设计就 那么几句话 即可实现日期的中文显示 其中 thisday=new Date() 设置日期对象 该对象为系统当前的时间 week=thisday.getDay() 设置当前日期的星期数 document.write("
      系统当前的星期数为系统当前的星期数为系统当前的星期数为系统当前的星期数为 "+week) 显示系统当前的星期数 由于该日期为一个数字 所以在如下的语句中设置了一系列 if 语句 获得系统星 期数的中文格式 并在文档中显示系统当前的星期数 if(week==0) document.write("
      今天星期天") if(week==1) document.write("
      今天星期一") if(week==2) document.write("
      今天星期二") if(week==3) document.write("
      今天星期三") if(week==4) document.write("
      今天星期四") if(week==5) document.write("
      今天星期五") if(week==6) document.write("
      今天星期六") 在浏览器中 该脚本执行后 就会显示系统当前的星期数并显示中文星期的格式 如 图 13-5 所示 图13-52 13.37.6 getTime 该方法返回一个代表当前日期的整数值 这个整数值为从 1970 年 1 月 1 日 0 时算起 的毫秒数 在页面的设计或是脚本设计的过程中 常利用该方法来比较两个日期对象值的 大小 该方法的调用格式如下 dateobj.getTime() 请看下边的实例

      在页面中调用该脚本就会返回一个很大的数值 972203415810 大家算一下是不是和 1970 年起的毫秒数相符合 如图 13-6 所示 图13-53 对于获取系统设置的日期对象的时间 JavaScript 中还设置了如下的几个方法 分别 表示为 getHours 该方法获得日期对象的小时数 getMinutes 该方法获得日期对象的分钟数 getSeconds 该方法获得日期对象的秒数 在以上的设置中 系统返回的都是以 0 为起始的数字 其中在设置小时数的过程中 设置的小时数为 24 小时制的格式 这些方法的调用格式同上面格式的应用是一样的 在下面的实例中我们来看看其具体 的设置情况

      在浏览器中浏览该页面的时候 就会显示系统日期的时间数 用户在调用的过程中 不妨和系统的时间比较一下 如图 13-7 所示 图13-54 13.37.7 setTime 根据编程的经验 带有 set 的函数一般是用来设置函数值的 事实上在 date 对象中 系统设置了许多的 set 函数 以便来设置系统的日期 该 setTime 函数用来设置系统的时 间值 在该方法的应用中 它返回一个自 1970 年 1 月 1 日零时的毫秒数 该方法的应用格式如下 dateobj.setTime(arg) 其中 dateobj 设置的时间对象 arg 设置的参数 在页面设计中 该实例的应用如下 New Page 1

      在该脚本中 先设置一个时间对象 该对象的值为 1999 年 8 月 19 日 然后再利用 getTime 方法取得该时间与系统起始时间的毫秒数的比较值 将该值赋给设置的变量 然 后再设置一个时间变量 然后调用 window 对象的 alert()方法 显示该时间数 其中 setdy=new Date("08/19/1999") 设置一个时间对象 res=setdy.getTime() 调用时间对象的 gettime 方法 设置毫秒数 然后将该数 字赋给设置的变量 res day=new Date() 设置系统当前的时间 rs=day.setTime(res) 设置毫秒数 alert("设置时间设置时间设置时间设置时间 "+rs+"毫秒毫秒毫秒毫秒") 调用 window 的对象的 alert()方法 在文档上显 示用户的设置 该页面显示情况如图 13-8 所示 图13-55 13.37.8 setYear 该方法用来设置指定的年份 在该方法的应用中 需要设置一个两位数的年份来表示 与 1900 年的差值 该方法的应用格式与 setTime 方法一样 请看下边的实例 New Page 1

      该脚本是在上面脚本的基础上改编而成的 在该实例中 先设置一个时间对象 然后 取得该时间对象的年份值 再将该时间对象值赋给设置的变量 然后在利用本例的函数 setYear 方法 在文档中显示用户设置的年份 在显示的过程中 设置一个对话框 如果 用户确认输入的数据就在文档中显示用户的设置 其中 setdy=new Date("08/19/1999") 设置时间对象 res=setdy.getYear() 取得时间对象的年份值 day=new Date() 设置系统当前时间 设置时间对象 rs=day.setYear(res) 设置年份 if(confirm("设置时间年份为设置时间年份为设置时间年份为设置时间年份为 "+res+"年")) 设置一个确认对话框 并设置了一 个判断对象 如果用户按下确定对话框 则执行下边的语句 document.write("用户设置的年份为用户设置的年份为用户设置的年份为用户设置的年份为 "+(1900+res)+"年年年年") 在文档中显示用户 设置的年份 在浏览器中 该脚本的执行情况如图 13-9 所示 当用户按下 确定 按钮后 在窗 口中显示的信息如图 13-10 所示 图13-56 图13-57 与该方法一样 在 JavaScript 中 与其功能一样的方法还有 setMonth() 设置日期对象的月份 setDate() 设置日期 setDay() 设置星期 setHours() 设置小时数 setMinutes() 设置分钟数 setSeconds() 设置秒数 这些方法的调用格式都是一样的 格式如下 dateobj.method(arg). 读者可以试着将上面的例子改一下 看看程序运行的效果 13.37.9 getTimezoneOffset 该方法以格林尼治时间为标准 返回一个分钟为单位的差值 一般来说该值为一个负 数 该方法的调用格式如下 dateobj.getTimezoneOffset() 在页面中 其效果表现如图 13-11 所示 图13-58 源代码如下 New Page 1

      13.37.10 toGMTString 将一个日期对象转换为一个字符串 这是按照 internet 格式设置的对象字符串的值 在时间的对象转换上 也许随着系统操作平台的不同而有所变换 但一般的字符串格式为 星期 月 日 年 时 分 秒 该方法的使用格式如下 dateobj.toGMTString() 应用示例如下 New Page 1

      在浏览器中 该脚本显示如图 13-12 所示 图13-59 13.37.11 toLocaletring 该方法将日期对象转换为本地的日期格式 恰好与上面的方法相对 显示的格式依赖 于系统的平台 该方法的利用格式如下 dateobj.toLocaletring() 将上面的例子改一下 显示的效果如图 13-13 所示 图13-60 源代码为 New Page 1

      在后续章节的例子中 将讲述时间对象的格式化问题 感兴趣的读者可以先去看看相 应的章节 主要内容 本 章 导 读 第第1144章章 数数数数数数数数 学学学学学学学学 对对对对对对对对 象象象象象象象象 ¡ 数学对象的属性 ¡ 数学对象的方法 š 数学是一切学科的基础学科 所以对于所有的程序设计语言 来说都规定了一些关于数学运算的语句 JavaScript 也不例外 在 JavaScript 中 math 对象就提供了一些数学函数和常数代码 和 string 对象一样 该对象属于 JavaScript 的内建对象 这里引入的 内建对象指的是标准的数据定义语言 受大多数浏览器支持 受不 同版本的语言支持 用户可以直接引用 而无需考虑对象的情况 在 math 对象中 JavaScript 仍然将它们分为属性和方法来讲解 下 面来看看这些属性和方法 14.38 math 对象的属性 math 对象的属性就是一些常用数学常数 只是这里将它作为属性来讲解罢了 14.38.1 E 该属性为欧拉常数 是自然对数的底数 常用在数学运算中 这个数的值一般为 2.71828 该函数的引用格式如下 math.E 在页面设计过程中 该属性的应用情况如下

      其中 a=Math.E 设置一个变量 取得用户设置的 math 对象的值 alert("math.E="+a) 调用 window 对象的 alert 方法 将用户设置的值显示在 页面上 这样就设置了该属性的值 在浏览器中 该页面的表现情况如图 14-1 所示 图14-61 14.38.2 其 它 属 性 在 JavaScript 中 math 对象还有其他的属性 下面分别列出 并加以简短地说明 事 实上 它的应用同上面的一样 设置的方法也是一样的 LN2 2 的自然对数 LN10 10 的自然对数 LOG2E 底数为 2 真数为 E 的对数 LOG10E 底数为 10 真数为 E 的对数 PI 圆周率的值 SQRT1_2 0.5 的平方根 SQRT2 2 的平方根 在页面的设置情况如下 C:\Apache\htdocs\MATH.E.htm

      其中 a=Math.LN2 设置数学 对象的 LN2 属性 并将该 值赋给设置的变量 a document.write("
      mat h.LN2="+a) 在文档中显 示设置的值 b=Math.LN10 设置数学 对象的 LN10 属性 并将 该值赋给设置的变量 b 图14-62 c=Math.LOG2E 设置数学对象的 Log2E 属性 并将该值赋给设置的变量 c d=Math.LOG10E 设置数学对象的 LOG10E 属性 并将该值赋给设置的变量 d f=Math.PI 设置数学对象的 PI 属性 并将该值赋给设置的变量 f g=Math.SQRT1_2 设置数学对象的 SQRT1-2 属性 并将该值赋给设置的变量 g h=Math.SQRT2 设置数学对象的 SQRT2 属性 并将该值赋给设置的变量 h 在浏览器中 该页面的显示情况如图 14-2 所示 14.39 math 对象的方法 数学对象的方法是常用的函数库 在设置页面的过程中可以直接引用系统设置的函数 属性对象的方法 14.39.1 abs 该方法求用户设置数的绝对值 在利用该方法的时候 如果用户设置的数为一个负数 那么就可以利用该方法将该数值转换为相应的正数形式 该方法的调用方式如下 Math.abs(arg) 其中 Math 是 JavaScript 内建的对象 该值为一个关键字 在使用的过程中 必须跟 在方法的前面 Arg 设置的参数 在页面的设置过程中 调用的情况如下

      a=-5

      其中

      a=-5

      在页面中设置一个数 a=-5 设置参数 b=Math.abs(a) 调用数学对象的 abs 方法 处理用户设置的参数 然后将取得值 赋给设置的变量 b document.write("a 的绝对值为的绝对值为的绝对值为的绝对值为 "+b) 在页面中显示设置的变量值 在浏览器中 该页面的表现情况如图 14-3 所示 图14-63 14.39.2 acos 该方法求用户给定值的反余弦函数的值 在使用该函数的时候要注意 在给定的变量 中 变量的有效范围应该是 -1 1 如果超出这个范围 那么在脚本的调试中 就会 返回一个 0 或 Nan 值 用户利用该方法时一定要注意 该方法的应用格式如下 Math....acos arg 其中 arg 指用户设置的参数 1- arg 1 在页面设计的格式如下 math

      其中 a=1 定义一个变量 变量的值为 1 b=Math.acos(a) 设置变量 b 该变量的值就是用户对变量 a 求的余弦值 confirm("acos(1)="+b) 调用 window 对象的 confirm()方法 让用户确认求得的 值 document.write(b=Math.acos(c)) 这里设置变量 c 的值为 2 就是看看当变量的 值超过系统设置的范围时 函数返回的值 该语句将该值在文档中显示出来 在浏览器中 脚本执行的情况如图 14-4 所示 图14-64 对于上面的函数 我们称之为三角函数 在 JavaScript 中 一共提供了 7 个三角函数 除了上面讲的 acos 而外 还有如下几个 cos() 计算变量的余弦值 sin() 计算变量的正弦值 tan() 计算变量的正切值 asin() 计算变量的反正弦函数值 atan() 计算变量的反正切值 atan2 计算变量的反余切值 下面来看看在脚本设计中函数的执行情况 <math/title> </head> <body> <p> script language="JavaScript"> <!-- a=1 with(Math){ b=cos(a) c=sin(a) d=tan(a) e=asin(a) f=atan(a) g=atan2(a) } document.write("当 a=1 时<br>") document.write("<br>cos(a)="+b) document.write("<br>sin(a)="+c) document.write("<br>tan(a)="+d) document.write("<br>atan(a)="+f) document.write("<br>atan2(a,0)="+g) document.write("<br>asin(a)="+e) // --> </script> </p> </body> </html> 在该脚本的设置中 我们先设置变量 a=1 然后再利用 with 语句 设置脚本对象为 math 对象 然后分别设置三角函数的值 最后调用文档对象的 write 方法在文档窗口中将 求的结果在文档中显示出来 在浏览器中 该页面的显示情况如图 14-5 所示 图14-65 14.39.3 max 该方法为一个大小比较函数 在设计脚本的过程中 设置两个参数 然后通过该方法 的设置 就会返回两个函数中较大的数 该方法的调用格式如下 math.max(arg1,arg2) 其中 arg 表示用户设置的参数 该方法在页面脚本中设计的应用格式如下 <html> <head> <title> 其中 arg 系统设置的参数 a=Math.max(12,13) 设置变量 将用户比较所得到的值赋给设置的变量 该语句 获得两个数并比较获得的最大值 document.write("12 与与与与 13 中较大的为中较大的为中较大的为中较大的为 "+a) 在文档中显示用户比较得到的值 在浏览器中 脚本运行的情况如图 14-6 所示 与 max 方法相对 求最小值函数的方法为 min() 该方法的使用与设置方法同 max 一 样 同样设置两个变量 通过该方法的设置 获得其中最小的一个值 该方法的调用格式 如下 Math.min(arg1,arg2) 对于以上的两个函数 一般称之为比较函数 其中 min 方法获得用户设置的最小值 而 max 方法获得用户设置的最大值 可以利用这两个函数来进行排序的操作 图14-66 14.39.4 round 该方法将一个数值 特别是浮点数舍入成它最近的一个整数 在设置的过程中 一般 给定一个浮点数参数变量 然后再利用该方法将变量求值 然后再进行四舍五入的操作 即如果小数部分的值大于 0.5 整数部分加 1 否则 就舍掉小数部分的数值 该方法的应用格式如下 Math.round(arg1) 其中 arg1 为一个浮点数的变量 如果该数已经为一个整数 利用该方法就失去意义 了 在页面设置中 该方法的利用格式如下 在该脚本的设置中 我们设置两三个变量 然后进行两两相除的运算 再调用 round() 方法 将求的值四舍五入 最后在页面中显示出来 在浏览器中浏览该页面 页面的显示 情况如图 14-7 所示 图14-67 一般的 我们将上面的 round 函数称之为舍入函数 同该函数相对的函数还有如 下的两个 分别为 floor 该方法与 round 相反 求的是小于或等于变量的值 ceil 该方法求的是大于或等于变量的值 这些方法与 round 方法归属于一类 其方法的设置和调用是一致的 请看下边的实例 其中 arg1=16 设置变量 1 arg2=10 设置变量 2 a=arg1/arg2 设置变量 a 的值为两个变量相除的值 b=Math.round(a) 设置 round 方法 c=Math.floor(a) 设置 floor 方法 d=Math.ceil(a) 设置 ceil 方法 document.write(a) 在文档中将设置的变量的值显示出来 在页面中 其显示情况如图 14-8 所示 图14-68 14.39.5 random 该方法产生一个位于 0 和 1 之间的随机数 该方法在一些测验设置中是相当有效的 系统可以调用该函数方法 随机地产生试题 然后让用户作答 也可以设置随机的效果 显示页面的欢迎词等等信息 该方法的调用格式如下 Math.random() 在页面设计中 脚本的调用情况如下 其中 b=Math.random() 设置随机效果 该语句产生一个为 0 到 1 之间的随机数 并 将该数值赋给设置的变量 b document.write("
      "+b) 在文档中写出该结果 在浏览器中 该页面的表现情况如图 14-9 所示 图14-69 在 math 对象中 还存在一些三角函数方法 在下面的例子中 给出了相应的具体设 置方法 其中 a=2 设置变量 a b=3 设置变量 b with(Math) 设置 math 对象捷径 d=exp(a) 该方法返回一个指数函数值 c=log(a) 该方法返回一个以 e 为底的对数值 e=pow(a,b) 求幂方法 f=sqrt(b) 求平方根函数 document.write("
      "+c) 在文档中写入函数值 对于以上的函数 系统将他们归类为三角函数 通过这些方法的设置 可以完成一些 常用的数学计算 在页面中 该脚本的执行情况如图 14-10 所示 图14-70 主要内容 本 章 导 读 第第1155章章 数数数数数数数数 组组组组组组组组 对对对对对对对对 象象象象象象象象 ¡ 数组对象的属性 ¡ 数组对象的方法 š JavaScript 中 数组对象是提供给用户进行存储与处理有序 数据集合的数据结构 事实上 在前面的对象中 我们已经接触了 大部分数组的对象 像表单集 帧组等等 在后续的章节中 设置 的有关用户的查询 cookie 数组的实现 都要使用到本章讲到的数 组对象 细心的用户或是接触过 c 语言的用户都有这样的感觉 JavaScript 中语言的设置和 c 语言中设置函数的方法差不多 在数组的设置中 两者都有异曲同工之妙 在 JavaScript 脚本语言中 将数组设置为一个新的对象 对数组对象的操作就是操作 用户定义的新对象 在如下的章节中 我们将学习数组对象的设置和操作 15.40 数组对象的创建 数组对象创建的格式如下 function students(name,age) {this.name=name; this.age=age; } 好了 我们创建了一个数组对象 下面利用一个 new 关键字来引用该变量 建立一 个实例 stu1=new students("黎明",28) 这里建立的实例中 设置的新对象中的属性为 name 与 age 两项 在建立的实例中 设置的一个对象为 stu1 其中 name 属性值为 黎明 age 属性值为 28 在实例的 引用中 格式如下 stu1.name stu1.age 这样我们就完成了一个实例的定义 在页面中显示设置的对象属性值的源代码如下 New Page 1

      其中 document.write(stu1.age) 在页面中显示设置对象的属性值 这里为对象 stu1 年 龄值 在浏览器中 该页面显示的效果如图 15-1 所示 图15-71 15.41 数组对象的扩充 在上面的例子中 数组对象还可以进一步地扩充 我们可以引入另一个数组对象的属 性 从而构成数组对象间的引用 我们可以进一步定义一个数组对象 设置上面对象的源为一所学校 该对象为源对象 的子类 如 function school(sname,stu) {this.sname=sname; this.stu=stu; } 定义了一个新的数组对象之后 再来引用它 建立一个实例 过程如下 sstu=new school("四川大学",stu1) 通过这样的引用 stu1 的各种属性值就被 sstu 所应用 在调用 stu1 设置的属性格式 如下 sstu.stu.name 调用设置的 name 属性 sstu.stu1age 调用设置的 age 属性 综合以上的设置 在页面中 该脚本源代码如下 New Page 1

      在浏览器中 该页面的显示情况如图 15-2 所示 图15-72 15.42 对象类数组 以上讲述了数组对象的设置和数组对象属性的引用问题 下面来看看对象类数组对象 的设置 在对象类数组对象的设置过程中 JavaScript 中设置了关键字 new Array 来实现 例 如 假设现在设置学生姓名数据 定义一个长度为 5 的数组 该定义的格式如下 stu= new Array(5)z 在实际的输入实例中 应用的格式如下 stu[0]="黎明" stu[1]="立志" stu[2]="红鱼" stu[3]="赵站" stu[4]="张云" 从上例可以看出 数组对象的定义都是从关键字的定义开始的 然后利用数组对象输 入相应的值 在数组对象的下标中 都是从 0 开始记数的 对象的调用格式同上面介绍的一样 比如在页面显示设置的变量 则格式如下 document.write(stu[0]) 将上面的语句组织成脚本的源代码如下 New Page 1

      在浏览器中 显示的情况如图 15-3 所示 图15-73 下面来看看数组对象的属性 在 JavaScript 中 常使用到的属性为 length 该属性用 来获得数组对象的长度 该属性的调用格式如下 array.length 其中 array 设置的数组对象 请看下边的实例 New Page 1

      在该脚本的设置中 设置了一个数组 该数组的长度未知 然后设置了五个实例 最 后利用数组对象的 length 属性获得数组对象的实例值 并在页面中显示数组对象的长度 在浏览器中 该页面的显示情况如图 15-4 所示 图15-74 主要内容 本 章 导 读 第第1166章章 样样样样样样样样式式式式式式式式单单单单单单单单实实实实实实实实例例例例例例例例 ¡ 样式单入门 ¡ 样式单的定义 š 利用样式单可以设置布局统一的页面 对于商业站点 可以提高企业页面的风格和企业文化的内涵 对于个人网页 有助 于个性化页面的实现 本章主要通过具体的实例 介绍了样式单的 设置以及利用样式单来控制页面的显示 16.43 样式单的实用 在 html3.2 语言中 指定了格式语言的显示和排版规定 这样 我们可以定义格式页 面的设置 以便于方便和快速地维护文档页面 这样定义的格式样式单 我们称之为级联 样式单 样式单提供了对控制标题 段落 清单 HTML 元素布局和显示的功能 这样 web 网页设计人员可以不断设计出自己想要的格式 有了样式单 可以指定各级标题的颜色 字体的大小 可以精确地设置背景的色彩 背景图案所在的区域 重叠方式 可以指定边 框的大小 外观等等 同时 可以方便地利用外界的样式模式 可以改变文本的样式 总 之 利用样式单可以设置布局统一的页面 对于商业站点 可以提高企业页面的风格和企 业文化的内涵 对于个人网页 有助于个性化页面的实现 下面 将以一个实例说明样式单的作用 实例的源代码如下

      Green, italic, and a point size of 12

      Yellow, italic, and a point size of 12

      Point size of 24

      Here is some capitalized text.

      其中 结束样式单的定义结束样式单的定义结束样式单的定义结束样式单的定义

      Yellow, italic, and a point size of 12

      类利用类利用类利用类利用 的标识的标识的标识的标识 capitalized 设置段落的设置段落的设置段落的设置段落的 id 属性属性属性属性 该页面在浏览器中显示的格式如图 16-1 所示 通过以上的实例 可以看出样式单的定义可以精确地控制页面信息的显示 16.44 样式单的定义 从上面的实例可以看到样式单的定义是从一个标志语句

      Welcome to my page!

      Here is some text.

      在该实例中 设置了一个控制字体显示的样式单 设置字体的大小为 24 点 字体的 外观显示为斜体 在浏览器中 页面的显示情况如图 16-2 所示 其中 定义的样式单格式如下 在样式单的定义中 以结束样式单的定义 除此之外 还可 以有如下定义的格式 应用外部文档的样式单定义应用外部文档的样式单定义应用外部文档的样式单定义应用外部文档的样式单定义 段落样式单的定义段落样式单的定义段落样式单的定义段落样式单的定义 16.45 样式单的使用 16.3.1 ids 属性与 id 属性 ids 属性用于设置 html 语言标志的属性 用户可以创建一个 id 设置 html 元素的显示 该语句的设置如下 ids.id.property=value 该属性的应用实例如下

      Here is some text that has global styles applied, but here is some smaller text in the middle of this paragraph.

      在该页面中 设置的 ids 属性 格式如下 #smaller{ font-size: 12pt; } 在该格式中 设置字体的显示 的大小为 12 点大小 在 ids 属性的设置中 以 #smalle{ 来设置格式的标头 然后在文档的使用中 为设置的 ids 属性指定一个 id 标识 该页面控制的显示效果如图 16-3 所示 16.3.2 设置类 class 属性 class 控制文档元素类别显示格式 在应用中的格式与 ids 属性相同 在设置的过程中 是以 . 开头来设置的 请看下边的实例

      Green

      Yellow and point size 12

      Yellow and italic

      This will be default text

      在该格式的定义中 设置了一个名为 newheader 的类属性 控制文本字体的显示 色彩 .newheader{ color: yellow; } 在类的使用中 一般在文档元素中以关键字 class 指明类的应用 利用 class 关键字来 规定文档应用到设置中的格式

      该页面的显示情况如图 16-4 所示 16.3.3 tag 属 性 该属性用来设置文档 html 标记的样式单属性 一般用来指定一级标题的显示 文档 主体的字体格式 段落的显示外观等等 该格式在应用时 只要定义了 html 标记的属性 在文档中就自动使用设置的格式 无需用户再来设置 请看下边的实例

      Here is some text that has global styles applied, but here is some smaller text in the middle of this paragraph.

      该格式定义对段落 p 的显示外观的控制 并设置了段落字体显示为斜体 大小为 24 点 在文档显示时将自动执行设置的格式 在浏览器中显示的情况如图 16-5 所示 图16-5 主要内容 本 章 导 读 第第1177章章 实实实实实实实实用用用用用用用用小小小小小小小小程程程程程程程程序序序序序序序序 ¡ 动态页面的概念 ¡ 动态页面的实例 š 本章主要通过具体的实例 介绍了如何在页面中设置可以利 用的插入件和 Activex 以及利用 JavaScript 与插件和 ActiveX 通信 17.46 导 言 到目前为止 我们已经深入地学习了 JavaScript 动态页面设计的知识 通过以上示例 的学习 相信用户已经初步地掌握了 JavaScript 高级编程的知识 这一章 将介绍一些实 用的例子 巩固前面学过的内容 这一章我们将介绍如下的例子 状态栏滚动信息 计算用户来访次数 散布在页面中的星星 永在顶端的图片 在本章的学习中 将列出示例的特性和源代码 并进行简单的分析 更具体的设置要 由用户自己去分析 17.47 状态栏滚动信息 在该示例中 设置了一个状态栏信息冒泡的效果 在静态的页面中 设置一个动态的 状态栏信息 就会使页面更加吸引人 这里利用 JavaScript 语言在状态栏模拟打字的效果 其脚本如下 请看状态栏的变化

      请看状态 栏的变化

      其中 var msg= "欢迎你欢迎你欢迎你欢迎你 我的朋友我的朋友我的朋友我的朋友 让我们在让我们在让我们在让我们在 JavaScript 的世界中自由翱翔吧的世界中自由翱翔吧的世界中自由翱翔吧的世界中自由翱翔吧 " 设 置要在状态栏显示的用户信息 函数函数函数函数 scrollstr() 调用函数本身 每隔一秒 字符偏移一个位置 这样就构成了 一个动态的打字效果 window.status = msg.substring(0, seq+1) 设置状态栏的信息 window.setTimeout("scrollstr();", interval ) 调用 window 对象的 settimeout() 方法 调用设置的函数 Interva 设置 settimeout 超时的时间 该脚本在 IE 中的表现如图 17-1 所示 图17-80 17.48 计算用户来访次数 在该示例中 设置了一个脚本 用来处理用户来访次数 并最终将用户的数据显示在 页面中 在 IE 中 页面的表现情况如图 17-2 所示 图17-81 实现如上页面的脚本源代码如下 New Page 5

      其中 var caution = false 设置一个逻辑变量 function setCookie(name, value, expires, path, domain, secure) 设置函数 setcookie() 该函数的设置与前面 cookie 文件设置一样 基础内容请看相关的章 节 function getCookie(name) 设置函数 getcookie,检索用户设置的 name 值 var cookieStartIndex = document.cookie.indexOf(prefix) 在检索函数中 调用字符串对象的 indexof()函数 看看设置的对象是否存在 return null 如果用户设置的对象不存在 就返回一个 null 值 function deleteCookie(name, path, domain) 设置 deletecookie 函数 该 函数处理文档 cookie 的过期时间 function fixDate(date) 利用该函数来设置新文档 cookie 过期的时间 并在新 文档中写入用户访问该页面的次数 17.49 散布页面的星星 该示例说明动态页面中层的设置 用户在使用的过程中 可以看到一个跟随鼠标行进 的星星 该示例侧重于利用 JavaScript 设置 jcss 即利用 JavaScrpt 语言设置页面的级联样 式单 并控制页面格式的显示 该页面在 IE 中的表现如图 17-3 所示 图17-82 实现如上页面的源代码如下 New Page 4



      星光灿烂

      从这段源代码可以看出 这段程序大部分都是格式的控制 其中 showtip2()函数函数函数函数 该函数显示用户设置的滚动图标 事实上 该函数显示控制用 户设置的 layer 的位置 hidetip2()函数函数函数函数 该脚本隐藏系统设置的层 scrolltip()函数函数函数函数 该函数设置层的相对位置 YY_Layerfx()函数函数函数函数 该函数设置层随鼠标的相对位置 YY_Mousetrace() 设置鼠标事件 捕获用户的鼠标运动过程 PopWin() 该函数在页面中开启一个新窗口 设置鼠标和星星的运动