第 六 章 JAVASCRIPT 在 网 页 中 的 应 用 [ 教 学 目 的 与 要 求 ] 使 学 生 了 解 什 么 是 JavaScript;JavaScript 基 本 语 法 ;JavaScript 对 象 基 础 ;DOM 基 础 ; 事 件 处 理 [ 重 点 与 难 点 ] [ 教 学 时 数 ] JavaScript 语 句 函 数 的 使 用 对 象 的 使 用 事 件 与 事 件 处 理 程 序 4 学 时 [ 教 学 方 法 与 手 段 ] 采 用 启 发 式 参 与 式 精 讲 多 练 等 教 学 方 法, 教 学 手 段 采 用 多 媒 体 教 学 [ 主 要 内 容 ] 第 一 节 JavaScript 简 介 一 JavaScript 的 特 点 JavaScript 的 特 点 : 是 一 种 脚 本 语 言 基 于 对 象 的 语 言 JavaScript 是 一 种 基 于 对 象 的 语 言, 同 时 以 可 以 看 作 一 种 面 向 对 象 的 简 单 性 安 全 性 动 态 性 跨 平 台 性 二 JavaScript 加 入 网 页 JavaScript 加 入 网 页 的 两 种 方 法 JavaScript 加 入 网 页 的 实 例 三 JavaScript 和 Java 的 区 别 虽 然 JavaScript 与 Java 有 紧 密 的 联 系, 但 却 是 两 个 公 司 开 发 的 不 同 的 两 个 产 品 JavaScript 和 Java 的 区 别 : 基 于 对 象 和 面 向 对 象 解 释 和 编 译 强 变 量 和 弱 变 量 代 码 格 式 不 一 样 嵌 入 方 式 不 一 样 静 态 联 编 和 动 态 联 编 四 与 用 户 交 互 的 基 本 方 法 显 示 信 息 对 话 框 的 alert() 方 法 显 示 确 认 选 择 对 话 框 的 Confirm() 方 法 显 示 提 示 对 话 框 的 Prompt() 方 法 第 二 节 JavaScript 的 数 据 类 型 变 量 和 运 算 符 一 基 本 数 据 类 型 JavaScript 提 供 了 五 种 基 本 的 数 据 类 型 : 数 值 ( 整 数 和 实 数 ) 字 符 串 型 ( 用 号 或 括 起 来 的 字 符 或 数 值 ) 布 尔 型 ( 用 True 或 False 表 示 ) 空 值 和 未 定 义 各 种 数 据 类 型 的 用 途 和 用 法 二 变 量
变 量 的 主 要 作 用 是 存 取 数 据 提 供 存 放 信 息 的 容 器 对 于 变 量 必 须 明 确 变 量 的 命 名 变 量 的 类 型 变 量 的 声 明 及 其 变 量 的 作 用 域 JavaScript 是 一 种 弱 类 型 语 言, 也 就 是 说, 在 声 明 变 量 时 不 需 要 指 定 变 量 的 类 型, 变 量 的 类 型 由 赋 值 给 变 量 的 值 确 定 变 量 的 使 用 方 法 变 量 的 作 用 域 三 表 达 式 和 运 算 符 表 达 式 : 在 定 义 完 变 量 后, 就 可 以 对 它 们 进 行 赋 值 改 变 计 算 等 一 系 列 操 作, 这 一 过 程 通 常 由 表 达 式 来 完 成, 可 以 说 它 是 变 量 常 量 布 尔 及 运 算 符 的 集 合, 因 此 表 达 式 可 以 分 为 算 术 表 述 式 字 串 表 达 式 赋 值 表 达 式 以 及 布 尔 表 达 式 等 运 算 符 : 运 算 符 是 完 成 操 作 的 一 系 列 符 号, 它 们 使 数 据 按 照 某 种 规 则 进 行 运 算, 并 产 生 一 个 操 作 结 果 在 JavaScript 中 有 算 术 运 算 符, 如 + - * / 等 ; 有 比 较 运 算 符, 如!= == 等 ; 有 逻 辑 布 尔 运 算 符, 如!( 取 反 ) ; 有 字 串 运 算, 如 + += 等 根 据 操 作 数 的 个 数, 运 算 符 又 可 以 分 为 三 类 : 一 元 运 算 符 二 元 运 算 符 和 三 元 运 算 符 一 元 运 算 符 只 有 一 个 操 作 数, 比 如 -8 中 的 负 号 ; 二 元 运 算 符 有 两 个 操 作 数, 比 如 加 法 运 算 符 减 法 运 算 符 等 ; 三 元 运 算 符 有 三 个 操 作 数 第 三 节 JavaScript 语 句 一 条 件 语 句 条 件 语 句 也 称 作 选 择 语 句, 它 根 据 一 定 的 条 件 决 定 进 一 步 执 行 哪 些 语 句 JavaScript 提 供 了 两 种 类 型 的 条 件 语 句 :if 语 句 和 switch 语 句 一 般 来 说,if 语 句 用 于 从 两 条 执 行 路 线 中 选 择 其 一 执 行 ; 而 switch 语 句 用 于 从 多 条 执 行 路 线 中 选 择 其 一 执 行 二 循 环 语 句 循 环 语 句 用 于 执 行 重 复 的 代 码 JavaScript 提 供 了 三 种 格 式 的 循 环 语 句 1.while 2.do while 3.for 第 四 节 函 数 的 使 用 一 函 数 的 定 义 函 数 的 定 义 是 : 函 数 是 完 成 一 项 任 务 并 返 回 一 个 值 的 一 组 代 码 在 被 调 用 之 前 函 数 并 不 执 行, 它 独 立 于 程 序 函 数 能 够 在 一 个 或 多 个 HTML 页 面 中 多 次 调 用, 也 能 够 在 多 个 人 开 发 的 不 同 网 页 中 应 用 如 前 面 的 document.write() 本 质 上 就 是 一 个 函 数
二 定 义 函 数 和 使 用 函 数 在 使 用 函 数 之 前, 必 须 首 先 定 义 函 数 一 般 来 说, 在 HTML 文 档 的 <head> 标 记 中 定 义 函 数 ( 要 使 用 <script> 标 记 ), 在 <script> 标 记 内 部, 函 数 可 以 出 现 在 任 何 位 置 此 外, 函 数 也 可 以 在 单 独 的 脚 本 文 件 中 定 义, 并 保 存 在 外 部 文 件 中 定 义 函 数 的 语 法 格 式 使 用 函 数 实 例 三 函 数 的 参 数 传 递 当 定 义 函 数 时 声 明 了 形 式 参 数 后, 调 用 函 数 时 就 应 该 为 这 些 参 数 提 供 实 际 的 参 数 值 函 数 参 数 放 在 函 数 名 称 后 面 的 小 括 号 中, 并 使 用 逗 号 分 开 调 用 函 数 的 参 数 应 该 与 定 义 函 数 时 的 形 式 参 数 相 对 应 JavaScript 的 函 数 调 用 采 用 了 传 值 调 用 方 式, 即 函 数 内 对 数 值 的 修 改 并 不 影 响 作 为 参 数 使 用 的 变 量 原 来 的 值 另 外, 如 果 在 调 用 函 数 时 传 递 了 过 多 参 数, 那 么 多 余 的 参 数 被 忽 略 ; 如 果 传 递 了 过 少 的 参 数, 那 么 没 有 实 际 参 数 对 应 的 形 式 参 数 的 值 为 undefined 四 函 数 中 变 量 的 作 用 域 变 量 的 作 用 域 说 明 变 量 在 程 序 中 的 什 么 位 置 可 以 使 用 在 函 数 外 声 明 的 变 量, 其 作 用 域 为 全 局 作 用 域, 称 作 全 局 变 量, 即 这 样 的 变 量 在 HTML 文 档 中 声 明 该 变 量 后 的 任 何 程 序 段 中 都 可 以 使 用 利 用 这 样 的 变 量, 可 以 实 现 不 同 程 序 段 间 数 据 值 的 传 递 如 果 在 函 数 内 部 使 用 var 关 键 字 声 明 变 量, 那 么 这 样 的 变 量 的 作 用 域 是 局 部 作 用 域, 称 作 局 部 变 量, 它 只 能 在 定 义 它 的 函 数 内 部 使 用, 在 该 函 数 外 部, 该 变 量 就 没 有 意 义 五 函 数 的 返 回 值 可 以 使 用 return 语 句 让 函 数 返 回 一 个 值 函 数 中 可 以 使 用 return 语 句, 也 可 以 不 使 用 return 语 句, 但 return 语 句 只 能 出 现 在 函 数 中 程 序 在 执 行 函 数 过 程 中, 遇 到 return 语 句 时, 就 不 再 执 行 该 语 句 后 面 的 语 句, 而 将 控 制 权 交 给 调 用 函 数 的 程 序 第 五 节 对 象 的 使 用 一 创 建 对 象 在 JavaScript 中 有 几 种 创 建 对 象 的 途 径, 其 中 之 一 是 使 用 构 造 函 数 构 造 函 数 是 一 种 用 于 创 建 对 象 实 例 的 特 殊 方 法 JavaScript 提 供 了 几 个 内 置 的 构 造 函 数 将 关 键 字 new 放 在 构 造 函 数 前 面 就 能 创 建 该 构 造 函 数 对 应 的 对 象 二 对 象 的 属 性 和 方 法 对 象 的 属 性 描 述 对 象 的 特 征, 它 实 际 上 是 对 象 的 成 员 变 量 使 用 点 运 算 符 (.) 将 属 性
与 所 属 对 象 关 联 起 来 定 义 属 性 的 方 法 是 在 对 象 名 后 面 写 上 点 运 算 符, 然 后 写 上 对 象 的 属 性 名 三 通 过 函 数 定 义 对 象 在 编 写 JavaScript 程 序 时, 可 以 根 据 需 要 使 用 自 定 义 对 象 除 了 使 用 Object( ) 构 造 函 数 创 建 自 定 义 对 象 外, 还 可 以 通 过 函 数 来 创 建 对 象 此 时 函 数 称 为 对 象 的 模 板, 它 起 到 了 其 它 编 程 语 言 中 类 的 作 用 定 义 函 数 之 后, 可 以 使 用 new 关 键 字 和 函 数 名 称 一 起 创 建 新 的 对 象, 并 把 它 赋 值 给 变 量, 此 时 定 义 的 函 数 实 际 上 就 是 一 个 构 造 函 数 在 定 义 函 数 时, 使 用 this 关 键 字 代 表 函 数 将 来 所 创 建 的 对 象 四 使 用 with 关 键 字 访 问 对 象 成 员 使 用 点 运 算 符 (.) 可 以 访 问 对 象 的 成 员 属 性 或 方 法, 但 在 一 段 程 序 中 连 续 访 问 一 个 对 象 的 多 个 属 性 或 方 法 时, 每 一 处 都 使 用 点 运 算 符 显 得 冗 余, 此 时, 可 以 使 用 JavaScript 提 供 的 with 关 键 字, 简 化 程 序 的 书 写 with 关 键 字 的 一 般 使 用 格 式 五 For in 循 环 操 作 对 象 For in 循 环 操 作 对 象 的 格 式 For in 的 功 能 六 对 象 属 性 的 引 用 对 象 属 性 的 引 用 可 由 下 列 三 种 方 式 : 使 用 点 (.) 运 算 符 通 过 对 象 的 下 标 实 现 引 用 通 过 字 符 串 的 形 式 实 现 七 对 象 的 方 法 和 引 用 对 象 的 方 法 和 引 用 的 方 法 第 六 节 JavaScript 的 内 置 对 象 一 数 组 对 象 数 组 是 一 种 具 有 相 同 类 型 值 的 集 合, 它 的 每 一 个 值 称 作 数 组 的 一 个 元 素 数 组 用 于 内 存 中 存 储 大 量 相 同 类 型 的 数 据, 可 以 通 过 数 组 的 名 称 和 下 标 直 接 访 问 数 组 的 元 素 数 组 的 下 标 也 称 作 索 引 值, 有 两 种 类 型 的 索 引 值 : 非 负 整 数 索 引 值 和 字 符 串 索 引 值 使 用 字 符 串 索 引 的 数 组 又 称 作 关 联 数 组 声 明 数 组 的 格 式 数 组 的 属 性 与 方 法 二 Math 对 象
Math 对 象 的 属 性 提 供 了 常 用 数 学 常 数 值, 当 程 序 需 要 这 些 常 数 时, 可 以 直 接 使 用 这 些 常 数 三 Date 对 象 JavaScript 提 供 了 Date 对 象 来 操 作 日 期 和 时 间 Date 对 象 的 值 用 一 个 整 数 来 表 示, 它 是 自 1970 年 1 月 1 日 0 时 到 所 表 达 时 间 之 间 的 毫 秒 数 (1 秒 =1000 毫 秒 ) 正 值 表 示 该 日 期 之 后 的 时 间, 负 值 表 示 该 日 期 之 前 的 时 间 由 于 客 户 端 的 JavaScript 程 序 在 浏 览 器 中 运 行,Date 对 象 返 回 客 户 端 计 算 机 上 的 时 间, 而 不 是 服 务 器 端 计 算 机 上 的 时 间 Date 对 象 有 6 种 创 建 方 式 四 基 本 数 据 类 型 的 对 象 表 示 JavaScript 提 供 了 三 种 基 本 数 据 类 型 : 数 值 字 符 串 和 布 尔 类 型 JavaScript 还 提 供 了 这 三 种 基 本 类 型 的 另 一 种 表 示 方 式 对 象 表 示, 分 别 为 number 对 象 String 对 象 和 Boolean 对 象 这 些 对 象 各 自 提 供 了 一 组 属 性 和 方 法 第 七 节 浏 览 器 对 象 模 型 一 window 对 象 窗 口 是 JavaScript 浏 览 器 对 象 模 型 中 的 顶 层 对 象, 称 作 window 对 象, 它 代 表 了 打 开 的 浏 览 器 窗 口, 这 是 一 个 全 局 对 象 在 浏 览 器 中 看 到 的 每 一 个 页 面 都 是 一 个 文 档 窗 口 对 象 是 所 有 其 它 对 象 的 基 础, 它 也 有 一 组 属 性 和 方 法, 用 于 控 制 窗 口 的 特 征 和 行 为 二 navigator 对 象 通 过 navigator 对 象, 能 够 知 道 现 在 使 用 什 么 浏 览 器 浏 览 器 的 版 本 号 是 否 支 持 Java 当 前 浏 览 器 都 有 哪 些 插 件 (Plug-ins) 可 用 等 信 息, 从 而 程 序 能 针 对 特 殊 的 浏 览 器 做 出 相 应 的 处 理 三 location 对 象 locateon 对 象 是 window 对 象 的 一 个 属 性, 它 用 于 访 问 当 前 加 载 在 窗 口 中 的 文 档 的 URL 作 为 对 象 location 对 象 的 属 性 和 方 法 四 document 对 象 使 用 文 档 对 象 模 型 (DOM,Document Object Model) 文 档 对 象 模 型 是 能 够 以 编 程 方 式 访 问 和 操 作 Web 页 面 ( 也 称 为 文 档 ) 内 容 的 接 口, 它 提 供 了 文 档 中 独 立 元 素 的 结 构 化 面 向 对 象 的 表 示 方 法, 并 允 许 通 过 对 象 的 属 性 和 方 法 访 问 这 些 对 象 另 外, 文 档 对 象 模 型 还 提 供 了 添 加 和 删 除 文 档 对 象 的 方 法, 这 样 能 够 创 建 动 态 的 文 档 内 容 DOM 也 提 供 了 处 理 事 件
的 接 口, 它 允 许 捕 捉 和 响 应 用 户 以 及 浏 览 器 的 动 作 利 用 文 档 对 象 模 型, 使 用 JavaScript 操 作 页 面 内 容 的 过 程 通 常 称 作 动 态 HTML, 也 称 作 DHTML document 对 象 表 示 浏 览 器 中 显 示 的 HTML 文 档, 它 是 客 户 端 JavaScript 编 程 中 最 重 要 的 对 象 之 一 document 对 象 是 window 对 象 的 一 个 属 性, 主 要 对 应 于 文 档 的 主 体 部 分 <body></body> 标 记 之 间 的 内 容, 对 于 <head> 到 </head> 标 记 之 间 的 内 容,document 对 象 只 提 供 了 有 限 的 支 持 通 过 操 作 document 对 象,JavaScript 程 序 让 静 态 的 文 档 页 面 变 成 了 一 种 有 声 有 色 的 活 动 页 面 五 history 对 象 history 对 象 是 window 对 象 的 一 个 属 性, 它 包 含 了 最 近 访 问 过 的 网 址 列 表 在 代 码 中, history 对 象 最 常 用 的 方 法 是 前 进 和 回 退 页 面, 其 功 能 类 似 于 浏 览 器 中 的 前 进 和 后 退 按 钮 history 对 象 只 有 一 个 属 性 length, 它 返 回 当 前 history 保 存 的 URL 个 数, 也 就 是 最 近 访 问 过 的 页 面 个 数 history 对 象 有 3 个 方 法 六 screen 对 象 screen 对 象 也 是 window 对 象 的 一 个 属 性 当 加 载 Web 页 面 时 自 动 创 建 screen 对 象 它 给 出 了 用 户 计 算 机 中 的 各 种 显 示 特 性, 包 括 屏 幕 宽 度 高 度 颜 色 深 度 可 用 屏 幕 区 域 大 小 等 screen 对 象 没 有 方 法 第 八 节 事 件 与 事 件 处 理 程 序 一 事 件 与 事 件 处 理 程 序 简 介 事 件 是 某 些 动 作 发 生 时 产 生 的 信 号 事 件 处 理 程 序 是 发 生 事 件 时 执 行 的 程 序 二 使 用 代 码 触 发 事 件 除 了 用 户 操 作 可 以 触 发 事 件 外,JavaScript 还 提 供 了 通 过 函 数 触 发 事 件 的 手 段, 这 些 函 数 都 是 对 象 的 方 法, 称 作 事 件 方 法 当 在 代 码 中 调 用 事 件 方 法 时, 就 像 这 些 对 象 上 发 生 了 这 些 事 件 一 样 事 件 方 法 的 访 问 过 程 与 访 问 对 象 的 其 它 方 法 的 过 程 相 同, 也 使 用 点 运 算 符 [ 实 验 实 践 教 学 环 节 ] 实 验 6 JavaScript 在 网 页 中 的 应 用 3 学 时 1. 创 建 JavaScript 浏 览 器 应 用 程 序 ; 2. 熟 悉 JavaScript 基 本 语 法 ; 3. JavaScript 中 函 数 的 使 用 4. JavaScript 中 内 置 类 型 的 使 用
[ 参 考 书 目 ] [1] Nicholas C. Zakas 编 著 : JavaScript 高 级 程 序 设 计, 人 民 邮 电 出 版 社,2006. [2] 内 格 里 诺 著, 陈 剑 瓯 译 : JavaScript 基 础 教 程, 人 民 邮 电 出 版 社,2009. [ 课 堂 训 练 作 业 思 考 题 ] P200 习 题