第 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 是 一 种 基 于 对 象 和 事 件 驱 动 并 具 有 相 对 安 全 性 的 客 户 端 脚 本 语 言, 主 要 用 于 创 建 具 有 交 互 性 较 强 的 动 态 页 面 主 要 具 有 如 下 特 点 : 基 于 对 象 :JavaScript 是 基 于 对 象 的 脚 本 编 程 语 言, 能 通 过 DOM( 文 档 结 构 模 型 ) 及 自 身 提 供 的 对 象 及 操 作 方 法 来 实 现 所 需 的 功 能 事 件 驱 动 :JavaScript 采 用 事 件 驱 动 方 式, 能 响 应 键 盘 事 件 鼠 标 事 件 及 浏 览 器 窗 口 事 件 等, 并 执 行 指 定 的 操 作 解 释 性 语 言 :JavaScript 是 一 种 解 释 性 脚 本 语 言, 无 需 专 门 编 译 器 编 译, 而 是 在 嵌 入 JavaScript 脚 本 的 HTML 文 档 载 入 时 被 浏 览 器 逐 行 地 解 释, 大 量 节 省 客 户 端 与 服 务 器 端 进 行 数 据 交 互 的 时 间 实 时 性 :JavaScript 事 件 处 理 是 实 时 的, 无 须 经 服 务 器 就 可 以 直 接 对 客 户 端 的 事 件 做 出 响 应, 并 用 处 理 结 果 实 时 更 新 目 标 页 面 动 态 性 :JavaScript 提 供 简 单 高 效 的 语 言 流 程, 灵 活 处 理 对 象 的 各 种 方 法 和 属 性, 同 时 及 时 响 应 文 档 页 面 事 件, 实 现 页 面 的 交 互 性 和 动 态 性 跨 平 台 :JavaScript 脚 本 的 正 确 运 行 依 赖 于 浏 览 器, 而 与 具 体 的 操 作 系 统 无 关 只 要 客 户 端 装 有 支 持 JavaScript 脚 本 的 浏 览 器,JavaScript 脚 本 运 行 结 果 就 能 正 确 反 映 在 客 户 端 浏 览 器 平 台 上 开 发 使 用 简 单 :JavaScript 基 本 结 构 类 似 C 语 言, 采 用 小 程 序 段 的 方 式 编 程, 并 提 供 了 简 易 的 开 发 平 台 和 便 捷 的 开 发 流 程, 就 可 以 嵌 入 到 HTML 文 档 中 供 浏 览 器 解 释 执 行 同 时 JavaScript 的 变 量 类 型 是 弱 类 型, 使 用 不 严 格
相 对 安 全 性 :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 的 有 效 支 持 : 在 ECMAScript 中 定 义 了 XML 的 语 法 和 语 义, 同 时 将 XML 的 数 据 类 型 添 加 进 ECMAScript 类 型 库 中 ; 专 门 为 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title>sample Page!</title> </head> <body> <br> <center> <script language="javascript 1.2" type="text/javascript"> document.write("hello World!"); </script> </center> </body> </html> 将 上 述 代 码 保 存 为.html( 或.html) 文 件 并 双 击 打 开, 系 统 调 用 默 认 浏 览 器 解 释 执 行, 结 果 如 图 1.6 所 示 图 1.6 JavaScript 编 写 的 Hello World! 程 序 JavaScript 脚 本 编 程 一 般 分 为 如 下 步 骤 : 选 择 JavaScript 语 言 编 辑 器 编 辑 脚 本 代 码 ; 嵌 入 该 JavaScript 脚 本 代 码 到 HTML 文 档 中 ; 选 择 支 持 JavaScript 的 浏 览 器 浏 览 该 HTML 文 档 ; 如 果 错 误 则 检 查 并 修 正 源 代 码, 重 新 浏 览, 此 过 程 重 复 直 至 代 码 正 确 为 止 ; 处 理 不 支 持 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 纯 脚 本 代 码 文 件 的 保 存 格 式, 该 格 式 在 通 过 <script> 标 记 的 src 属 性 引 入 JavaScript 脚 本 代 码 的 方 式 中 使 用, 用 于 嵌 入 外 部 脚 本 文 件 *.js 1.2.3 引 入 JavaScript 脚 本 代 码 到 HTML 文 档 中 将 JavaScript 脚 本 嵌 入 到 HTML 文 档 中 有 4 种 标 准 方 法 : 代 码 包 含 于 <script> 和 </script> 标 记 对, 然 后 嵌 入 到 HTML 文 档 中 ; 通 过 <script> 标 记 的 src 属 性 链 接 外 部 的 JavaScript 脚 本 文 件 ; 通 过 JavaScript 伪 URL 地 址 引 入 ; 通 过 HTML 文 档 事 件 处 理 程 序 引 入 下 面 分 别 介 绍 JavaScript 脚 本 的 几 种 标 准 引 入 方 法 : 1. 通 过 <script> 与 </script> 标 记 对 引 入 在 源 程 序 1.1 的 代 码 中 除 了 <script> 与 </script> 标 记 对 之 间 的 内 容 外, 都 是 最 基 本 的 HTML 代 码, 可 见 <script> 和 </script> 标 记 对 将 JavaScript 脚 本 代 码 封 装 并 嵌 入 到 HTML 文 档 中 : document.write("hello World!"); 浏 览 器 载 入 嵌 有 JavaScript 脚 本 的 HTML 文 档 时, 能 自 动 识 别 JavaScript 脚 本 代 码 起 始 标 记 <script> 和 结 束 标 记 </script>, 并 将 其 间 的 代 码 按 照 解 释 JavaScript 脚 本 代 码 的 方 法 加 以 解 释, 然 后 将 解 释 结 果 返 回 HTML 文 档 并 在 浏 览 器 窗 口 显 示 注 意 : 所 谓 标 记 对, 就 是 必 须 成 对 出 现 的 标 记, 否 则 其 间 的 脚 本 代 码 不 能 被 浏 览 器 解 释 执 行 来 看 看 下 面 的 代 码 : <script language="javascript 1.2" type="text/javascript"> document.write("hello World!"); </script> 首 先,<script> 和 </script> 标 记 对 将 JavaScript 脚 本 代 码 封 装, 同 时 告 诉 浏 览 器 其 间 的 代 码 为 JavaScript 脚 本 代 码, 然 后 调 用 document 文 档 对 象 的 write( ) 方 法 写 字 符 串 到 HTML 文 档 中 下 面 重 点 介 绍 <script> 标 记 的 几 个 属 性 : language 属 性 : 用 于 指 定 封 装 代 码 的 脚 本 语 言 及 版 本, 有 的 浏 览 器 还 支 持 perl VBScript 等, 所 有 脚 本 浏 览 器 都 支 持 JavaScript( 当 然, 非 常 老 的 版 本 除 外 ), 同 时 language 属 性 默 认 值 也 为 JavaScript; type 属 性 : 指 定 <script> 和 </script> 标 记 对 之 间 插 入 的 脚 本 代 码 类 型 ; src 属 性 : 用 于 将 外 部 的 脚 本 文 件 内 容 嵌 入 到 当 前 文 档 中, 一 般 在 较 新 版 本 的 浏 览 器 中 使 用, 使 用 JavaScript 脚 本 编 写 的 外 部 脚 本 文 件 必 须 使 用.js 为 扩 展 名, 同 时 在 <script> 和 </script> 标 记 对 中 不 包 含 任 何 内 容, 如 下 : <script language="javascript 1.2" type="text/javascript" src="sample.js"> </script> 注 意 :W3C HTML 标 准 中 不 推 荐 使 用 language 语 法, 要 标 记 所 使 用 的 脚 本 类 型, 应 设 置 <script> 的 type
属 性 为 对 应 脚 本 的 MIME 类 型 (JavaScript 的 MIME 类 型 为 text/javascript ) 但 在 该 属 性 中 可 设 定 所 使 用 脚 本 的 版 本, 有 利 于 根 据 浏 览 器 支 持 的 脚 本 版 本 来 编 写 有 针 对 性 的 脚 本 代 码 下 面 讨 论 <script> 标 记 的 src 属 性 如 何 引 入 JavaScript 脚 本 代 码 2. 通 过 <script> 标 记 的 src 属 性 引 入 改 写 源 程 序 1.1 的 代 码 并 保 存 为 test.html: // 源 程 序 1.2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title>sample Page!</title> </head> <body> <script language="javascript 1.2" type="text/javascript" src="1.js"> </script> </body> </html> 同 时 在 文 本 编 辑 器 中 编 辑 如 下 代 码 并 将 其 保 存 为 1.js: document.write("hello World!"); 将 test.html 和 1.js 文 件 放 置 于 同 一 目 录, 双 击 运 行 test.html, 结 果 如 图 1.6 所 示 可 见 通 过 外 部 引 入 JavaScript 脚 本 文 件 的 方 式, 能 实 现 同 样 的 功 能 同 时 具 有 如 下 优 点 : 将 脚 本 程 序 同 现 有 页 面 的 逻 辑 结 构 及 浏 览 器 结 果 分 离 通 过 外 部 脚 本, 可 以 轻 易 实 现 多 个 页 面 共 用 完 成 同 一 功 能 的 脚 本 文 件, 以 便 通 过 更 新 一 个 脚 本 文 件 内 容 达 到 批 量 更 新 的 目 的 ; 浏 览 器 可 以 实 现 对 目 标 脚 本 文 件 的 高 速 缓 存, 避 免 额 外 的 由 于 引 用 同 样 功 能 的 脚 本 代 码 而 导 致 下 载 时 间 的 增 加 与 C 语 言 使 用 外 部 头 文 件 (.h 文 件 等 ) 相 似, 引 入 JavaScript 脚 本 代 码 时 使 用 外 部 脚 本 文 件 的 方 式 符 合 结 构 化 编 程 思 想, 但 也 有 不 利 的 一 面, 主 要 表 现 在 如 下 几 点 : 不 是 所 有 支 持 JavaScript 脚 本 的 浏 览 器 都 支 持 外 部 脚 本, 如 Netscape 2 和 Internet Explorer 3 及 以 下 版 本 都 不 支 持 外 部 脚 本 外 部 脚 本 文 件 功 能 过 于 复 杂 或 其 他 原 因 导 致 的 加 载 时 间 过 长 有 可 能 导 致 页 面 事 件 得 不 到 处 理 或 者 得 不 到 正 确 的 处 理, 程 序 员 必 须 谨 慎 使 用 并 确 保 脚 本 加 载 完 成 后 其 中 的 函 数 才 被 页 面 事 件 调 用, 否 则 浏 览 器 报 错 综 上 所 述, 引 入 外 部 JavaScript 脚 本 文 件 的 方 法 是 效 果 与 风 险 并 存, 开 发 者 应 权 衡 优 缺 点 以 决 定 是 将 脚 本 代 码 嵌 入 到 目 标 HTML 文 档 中 还 是 通 过 引 用 外 部 脚 本 文 件 的 方 式 来 实 现 相 同 的 功 能 注 意 : 一 般 来 讲, 将 实 现 通 用 功 能 的 JavaScript 脚 本 代 码 作 为 外 部 脚 本 文 件 引 用, 而 实 现 特 有 功 能 的 JavaScript 代 码 则 直 接 嵌 入 到 HTML 文 档 中 的 <head> 与 </head> 标 记 对 之 间 提 前 载 入 以 及 时 正 确 响 应 页 面 事 件 下 面 介 绍 一 种 短 小 高 效 的 脚 本 代 码 嵌 入 方 式 : 伪 URL 引 入 3. 通 过 JavaScript 伪 URL 引 入 在 多 数 支 持 JavaScript 脚 本 的 浏 览 器 中, 可 以 通 过 JavaScript 伪 URL 地 址 调 用 语 句 来 引 入 JavaScript 脚 本 代 码 伪 URL 地 址 的 一 般 格 式 如 下 : JavaScript:alert("Hello World!")
一 般 以 javascript: 开 始, 后 面 紧 跟 要 执 行 的 操 作 下 面 的 代 码 演 示 如 何 使 用 伪 URL 地 址 来 引 入 JavaScript 代 码 : // 源 程 序 1.3 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title>sample Page!</title> </head> <body> <br> <center> <p> 伪 URL 地 址 引 入 JavaScript 脚 本 代 码 实 例 :</p> <form name="myform"> <input type=text name="mytext" value=" 鼠 标 点 击 " onclick="javascript:alert(' 鼠 标 已 点 击 文 本 框!')"> </form> </center> </body> </html> 鼠 标 点 击 文 本 框, 弹 出 警 示 框 如 图 1.7 所 示 图 1.7 伪 URL 地 址 引 入 JavaScript 脚 本 代 码 实 例 伪 URL 地 址 可 用 于 文 档 中 任 何 地 方, 并 触 发 任 意 数 量 的 JavaScript 函 数 或 对 象 固 有 的 方 法 由 于 这 种 方 式 代 码 短 小 精 悍, 同 时 效 果 颇 佳, 在 表 单 数 据 合 法 性 验 证 譬 如 某 个 字 段 是 否 符 合 日 期 格 式 等 方 面 应 用 非 常 广 泛 4. 通 过 HTML 文 档 事 件 处 理 程 序 引 入 在 开 发 Web 应 用 程 序 的 过 程 中, 开 发 者 可 以 给 HTML 文 档 中 设 定 不 同 的 事 件 处 理 器, 通 常 是 设 置 某 HTML 元 素 的 属 性 来 引 用 一 个 脚 本 ( 可 以 是 一 个 简 单 的 动 作 或 者 函 数 ), 属 性 一 般 以 on 开 头, 如 鼠 标 移 动 onmousemove( ) 等 下 面 的 程 序 演 示 如 何 使 用 JavaScript 脚 本 对 按 钮 单 击 事 件 进 行 响 应 : // 源 程 序 1.4 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd">
<html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> function ClickMe() alert(" 鼠 标 已 单 击 按 钮 "); </script> </head> <body> <br> <center> <p> 通 过 文 档 事 件 处 理 程 序 引 入 JavaScript 脚 本 代 码 实 例 :</p> <form name="myform"> <input type=button name="mybutton" value=" 鼠 标 单 击 " onclick="clickme()"> </form> </center> </body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 鼠 标 单 击 按 钮, 出 现 如 图 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 文 档 任 何 需 要 的 位 置 一 般 来 说, 可 以 在 <head> 与 </head> 标 记 对 <body> 与 </body> 标 记 对 之 间 按 需 要 放 置 JavaScript 脚 本 代 码
1.<head> 与 </head> 标 记 对 之 间 放 置 放 置 在 <head> 与 </head> 标 记 对 之 间 的 JavaScript 脚 本 代 码 一 般 用 于 提 前 载 入 以 响 应 用 户 的 动 作, 一 般 不 影 响 HTML 文 档 的 浏 览 器 显 示 内 容 如 下 是 其 基 本 文 档 结 构 : // 源 程 序 1.5 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title> 文 档 标 题 </title> <script language="javascript" type="text/javascript"> // 脚 本 语 句 </script> </head> <body> </body> </html> 2.<body> 与 </body> 标 记 对 之 间 放 置 如 果 需 要 在 页 面 载 入 时 运 行 JavaScript 脚 本 生 成 网 页 内 容, 应 将 脚 本 代 码 放 置 在 <body> 与 </body> 标 记 对 之 间, 可 根 据 需 要 编 写 多 个 独 立 的 脚 本 代 码 段 并 与 HTML 代 码 结 合 在 一 起 如 下 是 其 基 本 文 档 结 构 : // 源 程 序 1.6 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title> 文 档 标 题 </title> </head> <body> <script language="javascript" type="text/javascript"> // 脚 本 语 句 </script> //HTML 语 句 <script language="javascript" type="text/javascript"> // 脚 本 语 句 </script> </body> </html> 3. 在 两 个 标 记 对 之 间 混 合 放 置 如 果 既 需 要 提 前 载 入 脚 本 代 码 以 响 应 用 户 的 事 件, 又 需 要 在 页 面 载 入 时 使 用 脚 本 生 成 页 面 内 容, 可 以 综 合 以 上 两 种 方 式 如 下 是 其 基 本 文 档 结 构 : // 源 程 序 1.7 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title> 文 档 标 题 </title> <script language="javascript" type="text/javascript">
// 脚 本 语 句 </script> </head> <body> <script language="javascript" type="text/javascript"> // 脚 本 语 句 </script> </body> </html> 在 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> function PrintVersion() var msg="";
msg+=" 浏 览 器 名 称 :"+navigator.appname+"\n"; msg+=" 浏 览 器 版 本 :"+navigator.appversion+"\n"; msg+=" 浏 览 器 代 码 :"+navigator.appcodename+"\n"; alert(msg); </script> </head> <body> <br> <center> <p> 鼠 标 单 击 按 钮 显 示 当 前 浏 览 器 的 版 本 信 息 </p> <form name="myform"> <input type=button name="mybutton" value=" 鼠 标 单 击 " onclick="printversion()"> </form> </center> </body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 鼠 标 单 击 按 钮, 弹 出 警 告 框 如 图 1.9 所 示 图 1.9 获 取 当 前 浏 览 器 的 版 本 信 息 在 确 定 浏 览 器 的 版 本 信 息 后, 可 以 根 据 浏 览 器 类 型 编 写 有 针 对 性 的 脚 本, 同 时 可 在 其 源 程 序 中 加 入 针 对 不 同 浏 览 器 版 本 的 脚 本 代 码, 根 据 浏 览 器 的 类 型 返 回 相 应 结 果 给 浏 览 器, 从 而 克 服 客 户 端 浏 览 器 对 JavaScript 脚 本 支 持 程 度 不 同 的 问 题 1.2.6 处 理 不 支 持 JavaScript 脚 本 的 情 况 客 户 端 浏 览 器 不 支 持 当 前 JavaScript 脚 本 存 在 如 下 三 种 可 能 : 客 户 端 浏 览 器 不 支 持 任 何 JavaScript 脚 本 ; 客 户 端 浏 览 器 支 持 的 JavaScript 脚 本 版 本 与 该 脚 本 代 码 使 用 的 版 本 所 支 持 的 对 象 属 性 或 方 法 不 同 ; 客 户 端 为 了 安 全 起 见, 已 经 将 浏 览 器 对 JavaScript 脚 本 的 支 持 设 置 为 禁 止 以 上 三 种 情 况 总 结 起 来, 就 是 浏 览 器 对 当 前 脚 本 不 能 解 释 出 正 确 的 结 果, 在 编 写 脚 本 代 码 时 如 不 进 行 相 关 处 理, 用 户 使 用 该 浏 览 器 浏 览 带 有 该 脚 本 的 文 档 时 将 出 现 警 告 框 可 以 通 过 以 下 两 种 方 法 解 决 :
1. 使 用 <!-- 和 --> 标 记 对 直 接 屏 蔽 法 该 方 法 使 用 <!-- 和 --> 标 记 对 将 JavaScript 代 码 进 行 封 装, 告 诉 浏 览 器 如 果 它 不 支 持 该 脚 本 就 直 接 跳 过, 如 果 支 持 脚 本 代 码 则 自 动 跳 过 该 标 记 对, 达 到 如 果 浏 览 器 不 支 持 脚 本 代 码 则 将 其 隐 藏 的 目 的 如 下 代 码 结 构 : <script language="javascript" type="text/javascript"> <!-- // 此 处 添 加 脚 本 代 码 --> </script> 注 意 : 上 述 方 法 并 没 有 实 现 JavaScript 脚 本 代 码 的 真 正 隐 藏, 因 为 浏 览 器 同 样 下 载 了 该 脚 本, 并 将 其 作 为 源 代 码 使 用, 只 是 在 解 释 的 时 候 忽 略 <!-- 和 --> 标 记 对 之 间 的 代 码 2. 使 用 <noscript> 和 </noscript> 标 记 对 给 出 提 示 信 息 该 方 法 在 浏 览 器 不 支 持 该 脚 本 代 码 或 者 浏 览 器 对 JavaScript 脚 本 的 支 持 已 设 置 为 禁 止 的 情 况 下, 忽 略 <script> 和 </script> 标 记 对 之 间 脚 本 代 码, 返 回 <noscript> 和 </noscript> 标 记 对 中 预 设 的 页 面 提 示 信 息 ; 如 果 支 持 该 脚 本 代 码 则 解 释 执 行 <script> 和 </script> 标 记 对 之 间 脚 本 代 码, 而 忽 略 <noscript> 和 </noscript> 标 记 对 之 间 预 设 的 页 面 提 示 信 息 这 种 方 法 较 之 第 一 种 方 法 更 人 性 化 如 下 代 码 结 构 : <script language="javascript" type="text/javascript"> // 脚 本 代 码 </script> <noscript> // 提 示 信 息 </noscript> 目 前, 客 户 端 浏 览 器 版 本 很 少 有 不 支 持 JavaScript 脚 本 的 情 况, 但 其 禁 用 JavaScript 脚 本 的 情 况 很 常 见, 在 编 写 代 码 的 应 充 分 考 虑 不 支 持 JavaScript 脚 本 的 情 况 并 采 取 相 应 的 代 码 编 写 策 略 1.3 JavaScript 的 实 现 基 础 前 面 已 经 描 述 过,ECMAScript 是 JavaScript 脚 本 的 基 石, 但 并 不 是 使 用 JavaScript 脚 本 开 发 过 程 中 应 唯 一 特 别 值 得 关 注 的 部 分 实 际 上, 一 个 完 整 的 JavaScript 脚 本 实 现 应 包 含 如 下 三 部 分 : ECMAScript 核 心 : 为 不 同 的 宿 主 环 境 提 供 核 心 的 脚 本 能 力 ; DOM( 文 档 对 象 模 型 ): 规 定 了 访 问 HTML 和 XML 的 应 用 程 序 接 口 ; BOM( 浏 览 器 对 象 模 型 ): 提 供 了 独 立 于 内 容 而 在 浏 览 器 窗 口 之 间 进 行 交 互 的 对 象 和 方 法 下 面 分 别 介 绍 这 三 个 部 分 : 1.3.1 ECMAScript ECMAScript 规 定 了 能 适 应 于 各 种 宿 主 环 境 的 脚 本 核 心 语 法 规 则, 关 于 ECMAScript 语 言,ECMA-262 标 准 描 述 如 下 : ECMAScript 可 以 为 不 同 种 类 的 宿 主 环 境 提 供 核 心 的 脚 本 编 程 能 力, 因 此 核 心 的 脚 本
语 言 是 与 任 何 特 定 的 宿 主 环 境 分 开 进 行 规 定 的 ECMAScript 并 不 附 属 于 任 何 浏 览 器, 事 实 上,Web 浏 览 器 只 是 其 中 一 种 宿 主 环 境, 但 并 不 唯 一 在 其 发 展 史 上 有 很 多 宿 主 环 境, 如 Microsoft 的 WSH Micromedia 的 ActionScript Nombas 的 ScriptBase 和 Yahool! 的 Widget 引 擎 等 都 可 以 容 纳 ECMAScript 实 现 ECMAScript 仅 仅 是 个 描 述, 定 义 了 脚 本 语 言 所 有 的 对 象 属 性 和 方 法, 其 主 要 描 述 了 如 下 内 容 : 语 法 数 据 类 型 关 键 字 保 留 字 运 算 符 对 象 语 句 支 持 ECMA 标 准 的 浏 览 器 都 提 供 自 己 的 ECMAScript 脚 本 接 口, 并 按 照 需 要 扩 展 其 内 容 如 对 象 属 性 和 方 法 等 ECMAScript 标 准 定 义 了 JavaScript 脚 本 中 最 为 核 心 的 内 容, 是 JavaScript 脚 本 的 骨 架, 有 了 骨 架, 就 可 以 在 其 上 进 行 扩 展, 典 型 的 扩 展 如 DOM( 文 档 对 象 模 型 ) 和 BOM( 浏 览 器 对 象 模 型 ) 等 1.3.2 DOM DOM 定 义 了 JavaScript 可 以 进 行 操 作 的 文 档 的 各 个 功 能 部 件 的 接 口, 提 供 访 问 文 档 各 个 功 能 部 件 ( 如 document form textarea 等 ) 的 途 径 以 及 操 作 方 法 在 浏 览 器 载 入 文 档 (HTML 或 XML) 时, 根 据 其 支 持 的 DOM 规 范 级 别 将 整 个 文 档 规 划 成 由 节 点 层 级 构 成 的 节 点 树, 文 档 中 每 个 部 分 都 是 一 个 节 点, 然 后 依 据 节 点 树 层 级 同 时 根 据 目 标 节 点 的 某 个 属 性 搜 索 到 目 标 节 点 后, 调 用 节 点 的 相 关 处 理 方 法 进 行 处 理, 完 成 定 位 到 处 理 的 整 个 过 程 先 看 下 面 简 单 的 HTML 代 码 : // 源 程 序 1.9 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv=content-type content="text/html; charset=gb2312"> <title> First Page!</title> </head> <body> <h1>test!</h1> <!--NOTE!--> <p>welcome to<em> DOM </em>world! </p> <ul> <li>newer</li> </ul> </body> </html> 浏 览 器 载 入 该 文 档 后, 根 据 DOM 中 定 义 的 结 构, 将 其 以 图 1.10 所 示 的 节 点 树 形 式 表 示 出 来 ( 灰 色 表 示 本 本 节 点 )
图 1.10 DOM 载 入 实 例 中 文 档 后 形 成 的 节 点 树 层 级 关 于 DOM 的 具 体 内 容 在 本 书 文 档 对 象 模 型 (DOM) 一 章 将 作 详 细 的 介 绍 1.3.3 BOM BOM 定 义 了 JavaScript 可 以 进 行 操 作 的 浏 览 器 的 各 个 功 能 部 件 的 接 口, 提 供 访 问 文 档 各 个 功 能 部 件 ( 如 窗 口 本 身 屏 幕 功 能 部 件 浏 览 历 史 记 录 等 ) 的 途 径 以 及 操 作 方 法 遗 憾 的 是,BOM 只 是 JavaScript 脚 本 实 现 的 一 部 分, 没 有 任 何 相 关 的 标 准, 每 种 浏 览 器 都 有 自 己 的 BOM 实 现, 这 可 以 说 是 BOM 的 软 肋 所 在 通 常 情 况 下 浏 览 器 特 定 的 JavaScript 扩 展 都 被 看 作 BOM 的 一 部 分, 主 要 包 括 : 关 闭 移 动 浏 览 器 及 调 整 浏 览 器 窗 口 大 小 ; 弹 出 新 的 浏 览 器 窗 口 ; 提 供 浏 览 器 详 细 信 息 的 定 位 对 象 ; 提 供 载 入 到 浏 览 器 窗 口 的 文 档 详 细 信 息 的 定 位 对 象 ; 提 供 用 户 屏 幕 分 辨 率 详 细 信 息 的 屏 幕 对 象 ; 提 供 对 cookie 的 支 持 ; 加 入 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 客 户 端 脚 本 与 服 务 器 端 脚 本 的 区 别 脚 本 类 型 运 行 环 境 优 缺 点 主 要 语 言 客 户 端 客 户 端 脚 本 浏 览 器 服 务 器 端 脚 本 Web 服 务 器 当 用 户 通 过 客 户 端 浏 览 器 发 送 HTTP 请 求 时,Web 服 务 器 将 HTML 文 档 部 分 和 脚 本 部 分 返 回 客 户 端 浏 览 器, 在 客 户 端 浏 览 器 中 解 释 执 行 并 及 时 更 新 页 面, 脚 本 处 理 工 作 全 部 在 客 户 端 浏 览 器 完 成, 减 轻 服 务 器 负 荷, 同 时 增 加 页 面 的 反 应 速 度, 但 浏 览 器 差 异 性 导 致 的 页 面 差 异 问 题 不 容 忽 视 当 用 户 通 过 客 户 端 浏 览 器 发 送 HTTP 请 求 时,Web 服 务 器 运 行 脚 本, 并 将 运 行 结 果 与 Web 页 面 的 HTML 部 分 结 合 返 回 至 客 户 端 浏 览 器, 脚 本 处 理 工 作 全 部 在 服 务 器 端 完 成, 增 加 了 服 务 器 的 负 荷, 同 时 客 户 端 反 应 速 度 慢, 但 减 少 了 由 于 浏 览 器 差 异 带 来 的 运 行 结 果 差 异, 提 高 页 面 的 稳 定 性 注 意 : 有 关 HTTP 请 求 TCP\IP 协 议 Web 服 务 器 CGI 技 术 等 请 参 阅 相 关 文 档 JavaScript JScript VBScript 等 PHP JSP ASP Perl LiveWire 等 客 户 端 脚 本 与 服 务 器 端 脚 本 各 有 其 优 缺 点, 在 不 同 需 求 层 次 上 得 到 了 广 泛 的 应 用 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 服 务 器 中 间 件 嵌 入 式 设 备 以 及 其 他 众 多 环 境 其 主 要 区 别 如 下 : 开 发 公 司 不 同 :JavaScript 是 Netscape 公 司 的 产 品, 其 目 的 是 为 了 扩 展 Netscape Navigator 功 能, 而 开 发 的 一 种 可 以 嵌 入 Web 页 面 中 的 基 于 对 象 和 事 件 驱 动 的 解 释 性 语 言 ;Java 是 Sun 公 司 推 出 的 新 一 代 面 向 对 象 的 程 序 设 计 语 言, 特 别 适 合 于 Internet 应 用 程 序 开 发 语 言 类 型 不 同 :JavaScript 是 基 于 对 象 和 事 件 驱 动 的 脚 本 编 程 语 言, 本 身 提 供 了 非 常 丰 富 的 内 部 对 象 供 设 计 人 员 使 用 ;Java 是 面 向 对 象 的 编 程 语 言, 即 使 是 开 发 简 单 的 程 序, 也 必 须 设 计 对 象 执 行 方 式 不 同 :JavaScript 是 一 种 解 释 性 编 程 语 言, 其 源 代 码 在 发 往 客 户 端 执 行 之 前 不 需 经 过 编 译, 而 是 将 文 本 格 式 的 字 符 代 码 发 送 给 客 户, 由 浏 览 器 解 释 执 行 ;Java 的 源 代 码 在 传 递 到 客 户 端 执 行 之 前, 必 须 经 过 编 译, 因 而 客 户 端 上 必 须 具 有 相 应 平 台 上 的 仿 真 器 或 解 释 器, 它 可 以 通 过 编 译 器 或 解 释 器 实 现 独 立 于 某 个 特 定 的 平 台 编 译 代 码 的 束 缚 代 码 格 式 不 同 :JavaScript 的 代 码 是 一 种 文 本 字 符 格 式, 可 以 直 接 嵌 入 HTML 文 档 中, 并 且 可 动 态 装 载 ;Java 是 一 种 与 HTML 无 关 的 格 式, 必 须 将 其 通 过 专 门 编 译 器 编 译 为 Java applet, 其 代 码 以 字 节 代 码 的 形 式 保 存 在 独 立 的 文 档 中, 然 后 在 HTML 中 通 过 引 用 外 部 插 件 的 方 式 进 行 装 载, 变 量 类 型 不 同 :JavaScript 采 用 弱 类 型 变 量, 即 变 量 在 使 用 前 不 需 作 特 别 声 明, 而 是 在 浏 览 器 解 释 运 行 时 该 代 码 时 才 检 查 其 数 据 类 型 ;Java 采 用 强 类 型 变 量, 即 所 有
变 量 在 通 过 编 译 器 编 译 之 前 必 须 作 专 门 声 明, 否 则 报 错 嵌 入 方 式 不 同 :JavaScript 使 用 <script> 和 </script> 标 记 对 来 标 识 其 脚 本 代 码 并 将 其 嵌 入 到 HTML 文 档 中 ;Java 程 序 通 过 专 门 编 译 器 编 译 后 保 存 为 单 独 的 Java applet 文 件, 并 通 过 使 用 <applet>... </applet> 标 记 对 来 标 识 该 插 件 联 编 方 式 不 同 :JavaScript 采 用 动 态 联 编, 即 其 对 象 引 用 在 浏 览 器 解 释 运 行 时 进 行 检 查, 如 不 经 编 译 则 就 无 法 实 现 对 象 引 用 的 检 查 ;Java 采 用 静 态 联 编, 即 Java 的 对 象 引 用 必 须 在 编 译 时 进 行, 以 使 编 译 器 能 够 实 现 强 类 型 检 查 经 过 以 上 几 个 方 面 的 比 较, 读 者 应 该 能 清 醒 认 识 JavaScript 和 Java 是 没 有 任 何 联 系 的 两 门 语 言 下 面 讨 论 Java applet Java applet 是 用 Java 语 言 编 写 的 有 特 定 用 途 的 应 用 程 序, 其 直 接 嵌 入 到 HTML 页 面 中, 由 支 持 Java 的 浏 览 器 解 释 执 行 并 发 挥 其 特 定 功 能, 大 大 提 高 Web 页 面 的 交 互 和 动 态 执 行 能 力, 包 含 applet 应 用 程 序 的 页 面 被 称 为 Java-powered 页 当 用 户 访 问 这 样 的 网 页 时, 如 果 客 户 端 浏 览 器 支 持 Java 且 没 有 将 Java 支 持 选 项 设 置 为 禁 止, 则 applet 被 下 载 到 用 户 的 计 算 机 上 执 行, 且 执 行 速 度 不 受 网 络 带 宽 的 限 制, 用 户 可 以 更 好 地 欣 赏 网 页 上 applet 产 生 的 各 种 效 果 与 其 他 应 用 程 序 不 同,applet 应 用 程 序 必 须 通 过 <applet> 和 </applet> 标 记 对 将 自 己 内 嵌 到 HTML 页 面 中, 当 支 持 Java 的 客 户 端 浏 览 器 遇 到 该 标 记 对 时, 立 即 下 载 该 applet 并 在 本 地 计 算 机 上 执 行 执 行 的 过 程 中 它 可 从 目 标 页 面 中 获 得 相 应 的 参 数, 并 产 生 相 应 的 功 能, 与 Web 页 面 进 行 交 互, 实 现 页 面 的 动 态 效 果 在 HTML 页 面 中 嵌 入 applet, 至 少 需 获 得 该 applet 的 以 下 信 息 : 字 节 码 文 件 名 : 编 译 后 的 Java 文 件, 以.class 为 后 缀 ; 字 节 码 文 件 的 地 址 : 相 对 地 址 和 绝 对 地 址 均 可 ; 显 示 参 数 设 定 : 一 些 需 要 设 定 的 参 数 如 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 脚 本 解 释 器 将 按 照 程 序 代 码 出 现 的 顺 序 来 解 释 程 序 语 句, 因 此 可 以 将 函 数 定 义 和 变 量 声 明 放 在 <head> 和 </head> 之 间, 此 时 与 函 数 体 相 关 的 操 作 不 会 被 立 即 执 行
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 变 量 作 用 域 要 讨 论 变 量 的 作 用 域, 首 先 要 清 楚 全 局 变 量 和 局 部 变 量 的 联 系 和 区 别 : 全 局 变 量 : 可 以 在 脚 本 中 的 任 何 位 置 被 调 用, 全 局 变 量 的 作 用 域 是 当 前 文 档 中 整 个 脚 本 区 域 局 部 变 量 : 只 能 在 此 变 量 声 明 语 句 所 属 的 函 数 内 部 使 用, 局 部 变 量 的 作 用 域 仅 为 该 函 数 体 声 明 变 量 时, 要 根 据 编 程 的 目 的 决 定 将 变 量 声 明 为 全 局 变 量 还 是 局 部 变 量 一 般 而 言, 保 存 全 局 信 息 ( 如 表 格 的 原 始 大 小 下 拉 框 包 含 选 项 对 应 的 字 符 串 数 组 等 ) 的 变 量 需 声 明 为 全 局 变 量, 而 保 存 临 时 信 息 ( 如 待 输 出 的 格 式 字 符 串 数 学 运 算 中 间 变 量 等 ) 的 变 量 则 声 明 为 局 部 变 量 考 察 如 下 代 码 : // 源 程 序 2.1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- var total=100; function add(num) var total=2*num; alert("\n 局 部 变 量 : \n\ntotal ="+total+"\n"); return true; --> </script> </head> <body onload="add(total)"> <center> <form> <input type=button value=" 局 部 和 全 局 变 量 测 试 " onclick="javascript:alert('\n 全 局 变 量 : \n\ntotal ='+total+'\n');"> </form> </center> </body> </html> 浏 览 器 载 入 上 述 代 码 后, 弹 出 警 告 框 显 示 局 部 变 量 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- // 弱 类 型 测 试 函 数 function Test() var msg="\n 弱 类 型 语 言 测 试 : \n\n"; msg+="''600''*5 = "+('600'*6)+"\n"; msg+="''600''-5 = "+('600'-5)+"\n"; msg+="''600''/5 = "+('600'/5)+"\n"; msg+="''600''+5 = "+('600'+5)+"\n"; alert(msg); --> </script> </head> <body> <center> <form> <input type=button value=" 弱 类 型 测 试 " onclick="test()"> </form> </center>
</body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 弱 类 型 测 试 按 钮, 弹 出 警 告 框 如 图 2.3 所 示 图 2.3 弱 类 型 语 言 测 试 由 上 图 中 前 三 个 表 达 式 运 算 结 果 可 知,JavaScript 脚 本 在 解 释 执 行 时 自 动 将 字 符 型 数 据 转 换 为 数 值 型 数 据, 而 最 后 一 个 结 果 由 于 加 号 + 的 特 殊 性 导 致 运 算 结 果 不 同, 是 将 数 值 型 数 据 转 换 为 字 符 型 数 据 运 算 符 + 有 两 个 作 用 : 作 为 数 学 运 算 的 加 和 运 算 符 作 为 字 符 型 数 据 的 连 接 符 由 于 加 号 + 作 为 后 者 使 用 时 优 先 级 较 高, 故 实 例 中 表 达 式 '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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- var msg="\n 数 组 的 length 属 性 : \n\n"; var myarray=new Array("Tom","Jerry","Lily","Hanks"); // 响 应 按 钮 的 onclick 事 件 处 理 程 序 function Test() GetInfo(myArray); msg+="\n 操 作 语 句 :\nmyarray.length=3\n\n"; myarray.length=3; GetInfo(myArray); alert(msg);
// 输 出 数 组 内 容 function GetInfo(tempArray) var mylength=temparray.length; msg+=" 数 组 长 度 : \n"+mylength+"\n"; msg+=" 数 组 内 容 : \n"; for(var i=0;i<mylength;i++) msg+="myarray[ "+i+" ] ="+temparray[i]+"\n"; --> </script> </head> <body> <center> <form> <input type=button value=" 数 组 测 试 " onclick="test()"> </form> </center> </body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 数 组 测 试 按 钮, 弹 出 警 告 框 如 图 2.4 所 示 图 2.4 数 组 的 length 属 性 值 得 注 意 的 是, 数 组 的 length 属 性 为 可 读 可 写 属 性, 作 为 可 写 属 性 时, 若 新 的 属 性 值 小 于 原 始 值 时, 将 调 整 数 组 的 长 度 为 新 的 属 性 值, 数 组 中 其 余 元 素 将 删 除 2.6.2 Object 型 对 象 为 可 包 含 基 本 和 组 合 数 据 的 组 合 类 型, 且 对 象 的 成 员 作 为 对 象 的 属 性, 对 象 的 成 员 函 数 作 为 对 象 的 方 法 在 JavaScript 脚 本 语 言 中, 可 通 过 在 对 象 后 面 加 句 点. 并 加 上 对 象 属 性 ( 或 方 法 ) 的 名 称 来 访 问 对 象 的 属 性 ( 或 方 法 ), 例 如 : document.bgcolor document.write( Welcome to JavaScript World! ); 考 察 如 下 的 测 试 代 码 :
// 源 程 序 2.4 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- function Test() // 响 应 按 钮 的 onclick 事 件 处 理 程 序 var msg="\n 对 象 属 性 和 方 法 的 引 用 : \n\n"; msg+=" 引 用 语 句 :\nvar mycolor=document.bgcolor\n"; msg+=" 返 回 结 果 :\n"+document.bgcolor+"\n"; msg+=" 引 用 语 句 :\nwindow.close()\n"; msg+=" 返 回 结 果 :\nclose The Window!\n"; alert(msg); window.close(); --> </script> </head> <body bgcolor="green"> <center> <form> <input type=button value=" 数 组 测 试 " onclick="test()"> </form> </center> </body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 数 组 测 试 按 钮, 弹 出 警 告 框 如 图 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- var lvalue=48; // 设 定 初 始 值 var rvalue=3; function Test() // 响 应 按 钮 的 onclick 事 件 处 理 程 序 var msg="\n 赋 值 运 算 符 操 作 : \n\n"; msg+=" 原 始 数 值 :\nlvalue="+lvalue+"rvalue="+rvalue+"\n\n"; msg+=" 操 作 语 句 及 返 回 结 果 :\n\n"; lvalue=rvalue; msg+=" 语 句 : lvalue=rvalue 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n";
lvalue+=rvalue; msg+=" 语 句 : lvalue+=rvalue lvalue-=rvalue; msg+=" 语 句 : lvalue-=rvalue lvalue*=rvalue; msg+=" 语 句 : lvalue*=rvalue lvalue/=rvalue; msg+=" 语 句 : lvalue/=rvalue lvalue%=rvalue; msg+=" 语 句 : lvalue%=rvalue lvalue=13; lvalue&=rvalue; msg+=" 语 句 : lvalue&=rvalue lvalue^=rvalue; msg+=" 语 句 : lvalue^=rvalue lvalue<<=rvalue; msg+=" 语 句 : lvalue<<=rvalue lvalue>>=rvalue; msg+=" 语 句 : lvalue>>=rvalue 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+" rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; 结 果 : lvalue="+lvalue+" rvalue="+rvalue+"\n"; lvalue>>>=rvalue; msg+=" 语 句 : lvalue>>>=rvalue 结 果 : lvalue="+lvalue+"rvalue="+rvalue+"\n"; alert(msg); --> </script> </head> <body> <hr> <form> <input type=button value=" 运 算 符 测 试 " onclick="test()"> </form> </body> </html> 程 序 运 行 后, 在 原 始 页 面 单 击 运 算 符 测 试 按 钮, 弹 出 警 告 框 如 图 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>sample Page!</title> <script language="javascript" type="text/javascript"> <!-- var lvalue=25; // 设 定 初 始 值 var rvalue=4; function Test() // 响 应 按 钮 的 onclick 事 件 处 理 程 序 var tempdata=0; var msg="\n 基 本 数 学 运 算 符 : \n\n"; msg+=" 原 始 数 值 :\n\ntempdata="+tempdata+"lvalue="+lvalue+" rvalue="+rvalue+"\n\n"; msg+=" 操 作 语 句 及 返 回 结 果 :\n\n"; tempdata=lvalue+rvalue; msg+=" 语 句 : tempdata=lvalue+rvalue tempdata=lvalue-rvalue; msg+=" 语 句 : tempdata=lvalue-rvalue tempdata=lvalue*rvalue; msg+=" 语 句 : tempdata=lvalue*rvalue tempdata=lvalue/rvalue; msg+=" 语 句 : tempdata=lvalue/rvalue tempdata=lvalue%rvalue; msg+=" 语 句 : tempdata=lvalue%rvalue alert(msg); --> </script> </head> <body bgcolor="green"> <center> <form> <input type=button value=" 运 算 符 测 试 " onclick="test()"> </form> </center> 结 果 : tempdata="+tempdata+"\n"; 结 果 : tempdata="+tempdata+"\n"; 结 果 : tempdata="+tempdata+"\n"; 结 果 : tempdata="+tempdata+"\n"; 结 果 : tempdata="+tempdata+"\n";