PowerPoint Presentation

Transcription

1 1 1 JavaScript 语 言 概 述 32 JavaScript 语 法 基 础 3 JavaScript 程 序 结 构 4 JavaScript 中 的 JSON

2 12.1 JavaScript 语 言 概 述 2 什 么 是 JavaScript 简 单 地 说,JavaScript 是 一 种 可 以 嵌 入 HTML 文 档 的 脚 本 语 言 JavaScript 最 初 是 为 了 在 HTML 页 面 中 增 加 交 互 功 能 而 设 计 的 JavaScript 是 一 种 脚 本 语 言 ( 脚 本 语 言 是 一 种 轻 型 编 程 语 言 ) JavaScript 脚 本 通 常 都 直 接 嵌 入 在 HTML 页 面 里, 也 有 时 是 写 在 单 独 的 文 件 里 JavaScript 是 一 种 解 释 型 语 言 ( 脚 本 执 行 时 不 需 要 预 编 译 ) 任 何 人 都 可 以 使 用 JavaScript, 无 需 许 可

3 12.1 JavaScript 语 言 概 述 3 JavaScript 的 作 用 在 于 : JavaScript 为 HTML 设 计 者 提 供 了 一 个 简 单 的 编 程 工 具 JavaScript 是 一 种 语 法 非 常 简 单 的 脚 本 语 言, 几 乎 任 何 人 都 可 以 很 容 易 地 在 他 们 的 HTML 页 面 中 插 入 一 段 段 小 段 代 码 JavaScript 可 以 对 事 件 进 行 反 应 例 如 当 一 个 页 面 完 成 加 载 时, 或 者 当 用 户 点 击 某 个 HTML 控 件 时 执 行 JavaScript 可 以 读 写 HTML 元 素 JavaScript 可 以 读 取 并 改 写 一 个 HTML 的 内 容 JavaScript 可 以 被 用 来 验 证 数 据 这 样 可 以 避 免 服 务 器 进 行 额 外 的 处 理 运 算 JavaScript 可 以 用 来 监 测 访 问 者 的 浏 览 器, 并 根 据 用 户 浏 览 器 的 不 同 加 载 专 门 针 对 该 浏 览 器 设 计 的 特 殊 页 面 JavaScript 是 一 种 基 于 对 象 和 事 件 驱 动 (Event Driven) 的 脚 本 语 言 使 用 它 的 目 的 是 与 HTML 超 文 本 标 记 语 言 Java 脚 本 语 言 (Java 小 程 序 ) 一 起 实 现 在 一 个 Web 页 面 中 实 现 与 Web 客 户 交 互 作 用 它 是 通 过 嵌 入 在 标 准 的 HTML 语 言 中 实 现 的, 它 的 出 现 弥 补 了 HTML 语 言 的 缺 陷

4 12.1 JavaScript 语 言 概 述 4 JavaScript 的 发 展 历 程 与 特 征 JavaScript 的 发 展 历 程 JavaScript 是 最 具 个 性 的 一 门 语 言, 这 与 它 的 成 长 环 境 和 发 展 历 程 有 着 密 切 关 系 1995 年,Netscape 公 司 的 Brendan Eich 开 发 了 一 个 名 叫 LiveScript 的 脚 本 语 言, 嵌 入 到 当 年 准 备 发 布 的 Netscape Navigator 浏 览 器 中 随 后 Netscape 公 司 与 Sun 公 司 联 手 完 善 了 LiveScript 语 言 设 计, 更 名 为 JavaScript, 并 嵌 入 到 Netscape Navigator 2.0 版 本 浏 览 器 中, 以 允 许 在 Web 页 中 处 理 动 态 内 容 随 后 Netscape 在 Netscape Navigator 3.0 版 本 中 把 JavaScript 升 级 为 1.1 微 软 公 司 觉 察 到 JavaScript 脚 本 语 言 的 威 力, 于 是 开 发 了 一 个 名 叫 JScript 的 脚 本 语 言,JScript 语 言 采 用 了 JavaScript 语 言 类 似 的 设 计 思 想 和 方 法, 并 嵌 入 到 当 时 发 布 的 IE 3.0 版 本 浏 览 器 中 于 是, 市 场 上 就 存 在 2 个 不 同 版 本 的 JavaScript: Microsoft 的 JScript, 嵌 入 到 IE 浏 览 器 中 Netscape 的 JavaScript, 嵌 入 到 Netscape Navigator 浏 览 器 中

5 12.1 JavaScript 语 言 概 述 年 Netscape 公 司 把 自 己 的 JavaScript 1.1 版 本 脚 本 语 言 提 交 到 ECMA ( 欧 洲 计 算 机 制 造 商 协 会 ), 希 望 借 助 该 组 织 来 实 现 对 JavaScript 脚 本 语 言 的 标 准 化 ECMA 组 织 最 终 确 立 了 以 ECMA 组 织 名 称 为 前 缀 的 ECMAScript 脚 本 语 言, 确 定 了 JavaScript 语 言 的 标 准 ECMAScript 标 准 比 较 接 近 Netscape 公 司 的 JavaScript, 同 时 吸 取 了 JScript 等 其 他 脚 本 语 言 的 精 华 后 来,ISO( 国 际 标 准 化 组 织 ) 和 IEC( 国 际 电 工 委 员 会 ) 也 相 继 接 纳 了 ECMAScript 脚 本 语 言 作 为 标 准 (ISO/IEC-16262), 从 此 JavaScript 就 踏 入 了 标 准 时 代 JavaScript 可 以 被 应 用 为 一 种 客 户 端 或 者 服 务 器 端 技 术 当 应 用 在 客 户 端 时,JavaScript 被 嵌 入 到 发 送 给 Web 浏 览 器 的 HTML 中, 并 且 直 接 被 浏 览 器 解 释 JavaScript 也 可 以 被 应 用 为 一 种 服 务 器 端 技 术,Web 服 务 器 在 创 建 动 态 内 容 时 使 用 该 技 术

6 12.1 JavaScript 语 言 概 述 6 JavaScript 的 特 点 脚 本 编 写 语 言 JavaScript 是 一 种 脚 本 语 言, 它 的 基 本 结 构 形 式 与 C C++ VB Delphi 十 分 类 似 不 需 要 先 编 译, 而 是 在 程 序 运 行 过 程 中 由 浏 览 器 逐 行 地 解 释 它 与 HTML 标 识 结 合 在 一 起, 从 而 方 便 用 户 的 使 用 操 作 基 于 对 象 的 语 言 JavaScript 是 一 种 基 于 对 象 的 语 言, 同 时 以 可 以 看 作 一 种 面 向 对 象 的 它 能 运 用 自 己 已 经 创 建 的 对 象 简 单 性 JavaScript 的 简 单 性 主 要 体 现 在 : 首 先 它 是 一 种 基 于 基 本 语 句 和 控 制 流 之 上 的 简 单 而 紧 凑 的 设 计 其 次 它 的 变 量 类 型 是 采 用 弱 类 型, 并 未 使 用 严 格 的 数 据 类 型 动 态 性 JavaScript 是 动 态 的, 它 可 以 直 接 对 用 户 或 客 户 输 入 做 出 响 应, 无 须 经 过 Web 服 务 程 序 它 对 用 户 的 响 应 是 采 用 以 事 件 驱 动 的 方 式 进 行 的 跨 平 台 性 JavaScript 是 依 赖 于 浏 览 器 本 身, 与 操 作 环 境 无 关, 只 要 能 运 行 支 持 JavaScript 的 浏 览 器 就 可 正 确 执 行 实 际 上 JavaScript 最 杰 出 之 处 在 于 可 以 用 很 小 的 程 序 做 大 量 的 事

7 JavaScriptt 和 Java 的 区 别 7 从 名 称 上 看,JavaScript 和 Java 似 乎 有 一 定 联 系, 也 容 易 引 起 一 些 混 乱, 以 为 JavaScript 是 Java 的 一 个 子 集 实 际 上,JavaScript 和 Java 完 全 不 相 干 Java 是 一 种 比 JavaScript 复 杂 的 程 序 设 计 语 言, 而 JavaScript 则 是 相 当 容 易 的 脚 本 语 言 JavaScript 与 Java 是 两 个 公 司 开 发 的 不 同 的 产 品 Java 是 Sun 公 司 推 出 的 新 一 代 面 向 对 象 的 程 序 设 计 语 言, 特 别 适 合 于 Internet 应 用 程 序 开 发 ; 而 JavaScript 是 Netscape 公 司 的 产 品, 是 为 了 扩 展 浏 览 器 (Netscape Navigator) 的 功 能 而 开 发 的 一 种 可 以 嵌 入 Web 页 面 中 的 基 于 对 象 和 事 件 驱 动 的 解 释 性 语 言, 它 的 前 身 是 LiveScript; 而 Java 的 前 身 是 Oak 语 言

8 JavaScriptt 和 Java 的 区 别 8 下 面 对 两 种 语 言 间 的 异 同 作 如 下 比 较 : 基 于 对 象 和 面 向 对 象 Java 是 一 种 真 正 的 面 向 对 象 的 语 言, 即 使 是 开 发 简 单 的 程 序, 也 必 须 设 计 对 象 JavaScript 是 一 种 脚 本 语 言,JavaScript 也 可 以 创 建 对 象 和 设 计 功 能 强 大 的 程 序 解 释 和 编 译 Java 的 源 代 码 在 传 递 到 客 户 端 执 行 之 前, 必 须 经 过 编 译 JavaScript 是 一 种 解 释 性 编 程 语 言, 其 源 代 码 在 发 往 客 户 端 执 行 之 前 不 需 经 过 编 译, 而 是 将 文 本 格 式 的 字 符 代 码 发 送 给 客 户 端 由 浏 览 器 解 释 执 行 强 变 量 和 弱 变 量 两 种 语 言 所 采 取 的 变 量 是 不 一 样 的 Java 采 用 强 类 型 变 量 检 查, 即 所 有 变 量 在 编 译 之 前 必 须 作 声 明 JavaScript 中 变 量 声 明 采 用 弱 类 型 即 变 量 在 使 用 前 不 需 作 声 明, 而 是 解 释 器 在 运 行 时 检 查 其 数 据 类 型

9 JavaScriptt 和 Java 的 区 别 9 代 码 格 式 不 一 样 Java 是 一 种 与 HTML 无 关 的 格 式, 必 须 通 过 向 HTML 中 引 用 外 媒 体 进 行 装 载, 其 代 码 以 字 节 代 码 的 形 式 保 存 在 独 立 的 文 件 中 JavaScript 代 码 可 以 直 接 嵌 入 HTML 文 档 中, 并 且 可 动 态 装 载 嵌 入 方 式 不 一 样 在 HTML 文 档 中, 两 种 语 言 的 标 识 不 同,JavaScript 使 用 <Script> </Script> 来 标 识, 而 Java 使 用 <applet> </applet> 来 标 识 静 态 联 编 和 动 态 联 编 Java 采 用 静 态 联 编, 即 Java 的 对 象 引 用 必 须 在 编 译 时 进 行, 以 使 编 译 器 能 够 实 现 强 类 型 检 查 JavaScript 采 用 动 态 联 编, 即 JavaScript 的 对 象 引 用 在 运 行 时 进 行 检 查, 如 不 经 编 译 就 无 法 实 现 对 象 引 用 的 检 查

10 第 一 个 JavaScript 程 序 10 下 面 编 写 第 一 个 JavaScript 程 序 通 过 它 可 说 明 JavaScript 的 脚 本 是 怎 样 被 嵌 入 到 HTML 文 档 中 的 程 序 :JS01.htm <html> <body> <script type="text/javascript"> document.write(" 欢 迎 来 到 JavaScript 世 界!"); document.write("<br><p>"); document.write(" 这 是 我 的 第 一 个 JavaScript 程 序 "); </script> </body> </html> 用 浏 览 器 打 开 这 个 JS01.htm 文 件 显 示 以 下 输 出 : 欢 迎 来 到 JavaScript 世 界! 这 是 我 的 第 一 个 JavaScript 程 序 编 程 语 言, 如 C++ C# 和 Java, 每 一 条 语 句 都 需 要 以 分 号 结 束 许 多 程 序 员 在 写 JavaScript 的 时 候 仍 保 持 了 这 一 习 惯 实 际 上 在 JavaScript 中 分 号 并 不 是 必 需 的 但 是 如 果 把 多 条 JavaScript 语 句 写 在 同 一 行 中 则 需 要 以 分 号 分 隔

11 页 面 中 嵌 入 JavaScript 11 HTML 页 面 中 嵌 入 JavaScript 的 一 般 格 式 为 : <html> <head> </head> <body> <script type="text/javascript"> </script> </body> </html> // 这 里 写 你 的 脚 本 代 码 使 用 标 记 符 <script> 来 将 JavaScript 脚 本 嵌 入 HTML 页 面 中, 并 使 用 类 型 属 性 来 定 义 脚 本 语 言 的 类 型 为 JavaScript 因 此,<script type="text/ JavaScript"> 和 </script> 定 义 了 JavaScript 开 始 和 结 束 的 位 置 可 以 将 <Script>...</Script> 标 识 放 入 <Head>.. </Head> 或 <Body>...</Body> 之 间 将 JavaScript 标 识 放 置 <Head>...</Head> 在 头 部 之 间, 使 之 在 主 页 和 其 余 部 分 代 码 之 前 装 载 ; 也 可 以 将 JavaScript 标 识 放 置 在 <Body>...</Body> 主 体 之 间 以 实 现 某 些 部 分 动 态 地 创 建 文 档

12 页 面 中 嵌 入 JavaScript 12 起 初, 并 非 所 有 的 浏 览 器 都 支 持 JavaScript, 它 们 会 把 JavaScript 脚 本 显 示 为 页 面 内 容 为 避 免 这 种 情 况 发 生, 在 JavaScript 刚 开 始 出 现 的 时 候, 通 常 使 用 HTML 的 注 释 标 识 符 将 JavaScript 脚 本 包 起 来, 这 对 不 支 持 Javascript 语 言 的 浏 览 器 来 说 是 很 有 用 的 若 不 支 持 JavaScript 代 码 的 浏 览 器, 则 所 有 在 其 中 的 标 识 均 被 忽 略 ; 若 支 持, 则 执 行 其 结 果 例 如 : <script type= text/javascript > <! document.write( 你 好! ) // > </script> 注 释 结 束 行 前 面 的 双 斜 线 (//) 是 JavaScript 的 注 释 符 这 样 写 可 以 防 止 JavaScript 编 译 器 把 这 一 行 当 做 JavaScript 脚 本 进 行 编 译 现 在 已 经 不 建 议 这 样 使 用 因 为, 几 乎 所 有 的 浏 览 器 现 在 都 支 持 JavaScript; 并 且, 在 XHTML 中, 被 HTML 注 释 包 围 的 JavaScript 代 码 会 真 的 被 当 做 注 释 处 理, 不 再 起 作 用

13 页 面 中 嵌 入 JavaScript 13 一 些 浏 览 器 还 支 持 JavaScript 伪 协 议, 可 以 在 浏 览 器 的 地 址 栏 中 通 过 JavaScript 的 形 式 来 直 接 执 行 JavaScript 代 码 这 种 执 行 方 式 为 JavaScript 带 来 了 一 种 便 捷 的 测 试 方 法, 能 够 以 类 似 命 令 行 的 方 式 来 测 试 JavaScript 语 句, 而 不 必 写 一 大 堆 文 本 和 HTML 标 签 例 如, 在 IE 浏 览 器 的 地 址 栏 中 输 入 : JavaScript: 12*24; 浏 览 器 中 会 显 示 其 执 行 结 果 : 288 如 果 你 的 安 装 了 百 度 搜 霸 之 类 的 软 件, 此 功 能 会 失 效

14 调 用 JS 文 件 14 既 可 以 将 JavaScript 脚 本 直 接 嵌 入 在 HTML 页 面 中, 也 可 以 将 JavaScript 脚 本 写 在 单 独 的 文 件 中, 并 使 用 <Script> 标 签 的 src 属 性 来 指 定 要 调 用 的 JavaScript 文 件 (.js 文 件 ) 下 面 的 例 子 将 JavaScript 脚 本 独 立 写 入 一 个 JS02.js 文 件, 然 后 在 JS02.htm 中 调 用 程 序 :JS02.htm <HTML> JS02.js document.write("<p>javascript 使 Web 网 站 演 变 为 Web 应 用!"); document.close (); <Head> <Title> 将 JavaScript 脚 本 加 入 Web 文 档 中 的 例 子 </Title> <Script type = "text/javascript" src="js02.js"></script> </Head> </HTML>

15 调 用 JS 文 件 ( 续 ) 15 上 面 的 运 行 结 果 与 JS03.htm 是 一 样 的 程 序 :JS03.htm <HTML> <Head> <Title> 将 JavaScript 脚 本 加 入 Web 文 档 中 的 例 子 </Title> <Script type = "text/javascript"> document. write("javascript 使 得 Web 网 站 演 变 为 Web 应 用!"); document. close(); </Script> </Head> </HTML> 特 别 需 要 注 意 的 是 :JavaScript 的 函 数 名 对 大 小 写 是 敏 感 的, 如 果 将 上 面 例 子 程 序 中 的 document.write 写 作 Document.Write, 程 序 将 出 错, 无 法 显 示 其 内 容

16 JavaScript 内 置 对 象 16 JavaScript 是 内 置 了 很 多 对 象 和 函 数, 使 用 其 内 建 的 JavaScript 类 来 完 成 一 些 特 定 的 运 算, 例 如 字 符 串 运 算 期 等 非 常 方 便 灵 活 下 面 的 例 子 是 用 JavaScript 的 数 组 对 象 来 显 示 中 文 期 和 星 期 的 例 子 程 序 :JS04.htm <html> <head><title> 显 示 中 文 期 和 星 期 </title></head> <body> <script language="javascript"> cname = new Array(" 星 期 "," 星 期 一 "," 星 期 二 "," 星 期 三 "," 星 期 四 "," 星 期 五 "," 星 期 六 "); d = new Date(); document.write(d.getyear()," 年 "); document.write(d.getmonth()+1," 月 "); document.write(d.getdate()," "); document.write(" ",cname[d.getday()]); </script> </body> </html>

17 12.2 JavaScript 语 法 基 础 17 JavaScript 数 据 类 型 与 变 量 同 其 它 语 言 一 样,JavaScript 脚 本 语 言 也 有 它 自 身 的 数 据 类 型 表 达 式 和 算 术 运 算 符 以 及 程 序 的 基 本 框 架 结 构 JavaScript 的 数 据 类 型 有 基 本 数 据 类 型 (boolean number string null undefined) 组 合 数 据 类 型 ( 对 象 类 型 (Object) 和 Function 类 型 ) 两 种 基 本 数 据 类 型 JavaScript 基 本 数 据 类 型 除 了 数 字 型 布 尔 型 和 字 符 串 型 外, 还 有 特 殊 数 据 类 型 null 和 undefined 数 字 型 用 来 表 示 整 数 或 实 数 字 符 串 型 是 用 号 或 括 起 来 的 字 符 JavaScript 没 有 表 示 单 一 字 符 的 char 类 型, 只 能 使 用 单 一 字 符 的 字 符 串, 例 如 "S" 'h' 布 尔 数 据 类 型 只 有 两 个 值 true 和 false, 主 要 用 在 条 件 和 循 环 控 制 的 判 断 null 数 据 类 型 只 有 一 个 null 值, 如 果 变 量 值 为 null, 表 示 变 量 没 有 值 undifined 数 据 类 型 指 的 是 一 个 变 量 有 声 明, 但 是 不 曾 指 定 变 量 值 或 者 一 个 对 象 属 性 根 本 不 存 在

18 12.2 JavaScript 语 法 基 础 18 常 量 JavaScript 的 常 量 是 不 能 改 变 的 数 据 整 型 常 量, 其 整 型 常 量 可 以 使 用 十 六 进 制 八 进 制 和 十 进 制 表 示 其 值 以 0 开 头 的 数 字 且 每 个 位 数 的 值 为 0~7 的 整 数 是 八 进 制 ; 以 0x 开 头, 位 数 值 为 0~9 和 A~F 的 数 字 是 十 六 进 制 实 型 常 量, 实 型 常 量 是 由 整 数 部 分 加 小 数 部 分 表 示, 如 可 以 使 用 科 学 或 标 准 方 法 表 示 :5E7 4e5 等 布 尔 值, 布 尔 常 量 只 有 两 种 状 态 :True 或 False 它 主 要 用 来 说 明 或 代 表 一 种 状 态 或 标 志 JavaScript 只 能 用 True 或 False 表 示 其 状 态, 而 不 能 用 1 或 0 表 示 状 态 字 符 型 常 量, 使 用 单 引 号 ( ) 或 双 引 号 ( ) 括 起 来 的 一 个 或 几 个 字 符 如 JavaScript 脚 本 语 言 8755 hust1234 等 空 值,JavaScript 中 有 一 个 空 值 null, 如 引 用 没 有 定 义 的 变 量, 则 返 回 一 个 Null 值 特 殊 字 符, 同 C 语 言 一 样,JavaScript 中 同 样 有 些 以 反 斜 杠 (/) 开 头 的 不 可 显 示 的 特 殊 字 符 通 常 称 为 控 制 字 符 如 表 12.1 所 示

19 12.2 JavaScript 语 法 基 础 19 变 量 变 量 的 主 要 作 用 是 存 取 数 据 对 于 变 量 必 须 明 确 变 量 的 命 名 变 量 的 类 型 变 量 的 声 明 及 其 变 量 的 作 用 域 1. 变 量 的 命 名 JavaScript 中 的 变 量 命 名 同 其 计 算 机 语 言 非 常 相 似, 这 里 要 注 意 以 下 几 点 : 变 量 名 必 须 以 字 母 或 下 画 线 开 头, 中 间 可 以 出 现 数 字, 变 量 名 不 能 有 空 格 变 量 名 称 区 分 大 小 写 不 能 使 用 JavaScript 中 的 关 键 字 作 为 变 量 如 Var int double true 不 能 作 为 变 量 的 名 称

20 12.2 JavaScript 语 法 基 础 变 量 的 声 明 JavaScript 变 量 可 以 在 使 用 前 先 作 声 明, 并 给 变 量 赋 初 值 JavaScript 的 变 量 统 一 用 命 令 Var 作 声 明 和 赋 值, 其 格 式 如 下 : var 变 量 名 称 [= 初 始 值 ] 例 如 : var computer = 32 // computer 是 一 个 变 量, 且 有 初 值 为 32 Var cname = 计 算 机 技 术 // 定 义 了 一 个 cname 变 量, 同 时 赋 予 了 一 个 字 符 串 值 JavaScript 中 的 变 量 是 弱 类 型 的, 在 声 明 变 量 时 可 以 不 指 定 其 数 据 类 型 在 使 用 时 根 据 给 定 的 值 自 动 确 定 其 类 型 x=100;y="125" ;xy= true ;price=11.20 等 其 中 x 整 数,y 为 字 符 串,xy 为 布 尔 型,price 为 实 型

21 12.2 JavaScript 语 法 基 础 变 量 的 作 用 域 在 JavaScript 中 同 样 有 全 局 变 量 和 局 部 变 量 全 局 变 量 是 定 义 在 所 有 函 数 体 之 外, 其 作 用 范 围 是 当 前 文 件 (.js 文 件 ) 中 的 所 有 函 数 ; 而 局 部 变 量 是 定 义 在 函 数 体 之 内, 只 对 当 前 函 数 是 可 见 的, 而 对 其 它 函 数 则 是 不 可 见 的 4. 变 量 的 类 型 及 其 转 换 要 判 断 一 个 变 量 ( 基 本 变 量 或 对 象 ) 的 类 型, 可 以 用 下 面 的 语 句 typeof(something); 其 可 能 返 回 的 数 据 为 number,string,boolean,object,function 或 者 undefined

22 12.2 JavaScript 语 法 基 础 数 据 类 型 转 换 基 本 数 据 类 型 转 换 的 三 种 方 法 : 转 换 为 字 符 型 :String(); 例 :String(123) 的 结 果 为 "123" 转 换 为 数 值 型 :Number(); 例 :Number("123") 的 结 果 为 123 转 换 为 布 尔 型 :Boolean(); 例 :Boolean("abc") 的 结 果 为 true 从 一 个 值 中 提 取 另 一 种 类 型 的 值 的 方 法 : 提 取 字 符 串 中 的 整 数 :parseint(); 如 :parseint("123abc") 的 结 果 为 123 提 取 字 符 串 中 的 浮 点 数 :parsefloat(); 如 :parsefloat("0.55abc") 的 结 果 为 0.55 调 用 JavaScript 的 eval() 函 数, 计 算 表 达 式 的 值 如 :c=eval("62+82") 的 结 果 c=144

23 12.2 JavaScript 语 法 基 础 23 JavaScript 表 达 式 和 运 算 符 表 达 式 表 达 式 是 变 量 常 量 及 运 算 符 的 集 合 表 达 式 可 以 分 为 算 术 表 述 式 字 串 表 达 式 赋 值 表 达 式 以 及 布 尔 表 达 式 等 运 算 符 运 算 符 是 完 成 操 作 的 一 系 列 符 号, 正 如 其 他 的 语 言 一 样, 在 JavaScript 中 有 算 术 运 算 符, 如 + - * / 等 ; 比 较 运 算 符 如!= == > < 等 ; 逻 辑 布 尔 运 算 符 如 & 和!; 字 符 串 运 算 如 + += 等

24 12.2 JavaScript 语 法 基 础 24 根 据 操 作 数 的 个 数, 运 算 符 可 分 为 单 目 运 算 符, 双 目 运 算 符 和 三 目 运 算 符 在 JavaScript 中, 双 目 运 算 符 由 下 列 方 式 构 成 : 操 作 数 1 运 算 符 操 作 数 2 如 JavaScript + 语 言 等 单 目 运 算 符 只 需 一 个 操 作 数, 其 运 算 符 可 在 前 或 后 如 x++ JavaScript 也 支 持 三 目 运 算, 主 要 格 式 如 下 : 条 件? 语 句 1: 语 句 2 若 条 件 表 达 式 的 值 为 真 (true), 则 执 行 语 句 1, 其 结 果 作 为 整 个 表 述 式 的 结 果 ; 否 则 执 行 语 句 2, 其 结 果 作 为 整 个 表 述 式 的 结 果 例 如 : var now = new Date(); var greeting = ((now.gethours () <= 12)?:" 上 午 好!": " 下 午 好.");? 运 算 符 是 if...else 语 句 的 简 洁 方 式

25 12.3 JavaScript 程 序 结 构 25 与 其 他 语 言 一 样,JavaScript 脚 本 语 言 的 基 本 结 构 是 由 控 制 语 句 函 数 对 象 方 法 属 性 等 来 实 现 的 下 面 简 要 介 绍 JavaScript 程 序 的 基 本 结 构 和 函 数 的 定 义 方 式 关 于 对 象 属 性 与 方 法 将 在 下 一 章 中 专 门 讨 论 程 序 控 制 流 程 在 任 何 语 言 中, 程 序 控 制 流 程 是 必 需 的, 它 能 使 得 整 个 程 序 减 少 混 乱, 使 之 按 其 一 定 的 方 式 执 行 下 面 是 JavaScript 常 用 的 程 序 控 制 流 程 结 构 及 语 句 条 件 和 分 支 语 句 :if else, switch 循 环 语 句 :for for...in while break continue 关 于 程 序 的 流 程 控 制 语 句, 在 前 面 的 C# 语 言 中, 已 经 介 绍 很 多, 这 里 不 再 做 详 细 介 绍 下 面 重 点 介 绍 一 下 for in 结 构 和 递 归 运 算

26 12.3 JavaScript 程 序 结 构 26 for in 循 环 控 制 语 句 for...in 语 句 与 for 语 句 类 似, 只 是 其 循 环 的 范 围 是 一 个 对 象 所 有 的 属 性 或 是 一 个 数 组 的 所 有 元 素 for...in 语 句 的 语 法 如 下 : for ( 变 量 in 对 象 或 数 组 ) { 执 行 语 句... } 其 中, 变 量 是 对 象 的 属 性 或 数 组 的 名 称 在 处 理 对 象 和 数 据 时, for in 语 句 要 比 for 循 环 方 便 简 洁

27 12.3 JavaScript 程 序 结 构 27 程 序 12.8 是 for in 循 环 的 一 个 应 用 实 例 该 例 子 先 定 义 了 一 个 数 据 用 于 存 放 星 期, 然 后 通 过 一 个 for in 循 环 依 次 取 出 数 组 的 值, 并 显 示 在 页 面 上 程 序 12.8:JS08.htm <html> <body> <script type="text/javascript"> var cname = new Array(" 星 期 "," 星 期 一 "," 星 期 二 "," 星 期 三 "," 星 期 四 "," 星 期 五 "," 星 期 六 "); for (x in cname){ document.write(cname[x] + "<br />") } </script> </body> </html> 请 同 学 用 for 循 环 实 现 程 序 12.8 的 功 能

28 12.3 JavaScript 程 序 结 构 28 JavaScript 中 的 递 归 运 算 JavaScript 也 支 持 递 归 运 算, 下 面 是 用 递 归 生 成 一 个 斐 波 那 契 数 列 的 例 子 程 序 12.10:JS10.htm <html> <body> <script language="javascript"> function fibonacci(n){ } return n < 2? n: fibonacci(n - 1) + fibonacci(n - 2); document.write(fibonacci(10)); </script> </body> </html> 如 果 递 归 调 用 的 层 次 过 多, 每 一 次 的 递 归 调 用 都 会 占 用 更 多 的 内 存, 从 而 减 慢 浏 览 器 的 运 行, 甚 至 导 致 浏 览 器 处 于 停 止 响 应 的 状 态 避 免 使 用 递 归 的 方 案 之 一 就 是 使 用 memoization 技 术, memoization 是 一 种 将 函 数 返 回 值 缓 存 起 来 的 方 法, 可 以 获 取 上 一 次 调 用 的 执 行 结 果 关 于 memoization 技 术 可 以 查 阅 相 关 的 资 料

29 12.3 JavaScript 程 序 结 构 函 数 与 事 件 29 函 数 是 具 有 独 立 功 能 的 应 用 单 元, 也 是 进 行 模 块 化 程 序 设 计 的 基 础 从 某 种 意 义 上 说, 应 用 程 序 就 是 函 数 的 集 合, 任 何 语 言 都 离 不 开 函 数 的 定 义 与 使 用, JavaScript 语 言 也 不 例 外 JavaScript 函 数 是 封 装 在 程 序 中 可 以 反 复 使 用 的 程 序 模 块 在 进 行 复 杂 的 程 序 设 计 时, 通 常 是 根 据 所 要 完 成 的 功 能, 将 程 序 划 分 为 一 些 相 对 独 立 的 部 分, 每 部 分 编 写 一 个 函 数, 从 而 使 各 部 分 充 分 独 立 程 序 清 晰 易 于 维 护 将 HTML 中 的 脚 本 编 写 为 函 数, 就 可 以 避 免 页 面 载 入 时 执 行 该 脚 本, 只 在 函 数 被 调 用 时 才 会 执 行 可 以 在 页 面 中 的 任 何 位 置 调 用 脚 本, 但 函 数 的 定 义 应 该 放 在 页 面 起 始 位 置, 即 <head></head> 标 签 中

30 12.3 JavaScript 程 序 结 构 函 数 与 事 件 30 HTML 中 是 通 过 事 件 激 活 来 调 用 函 数, 下 面 来 看 一 个 简 单 的 例 子 程 序 :JS11.htm <html> <head> <script type="text/javascript"> function display (){ } alert("hello World!") </script> </head> <body> <form> <input type="button" value=" 显 示 " onclick="display ()" > </form> </body> </html> 假 如 上 面 的 例 子 中 的 alert( Hello world!! ) 没 有 被 写 入 函 数, 那 么 当 页 面 被 载 入 时 它 就 会 执 行 现 在, 当 用 户 击 中 按 钮 时, 脚 本 才 会 执 行 我 们 给 按 钮 添 加 了 onclick 事 件, 这 样 按 钮 被 点 击 时 函 数 才 会 执 行

31 12.3 JavaScript 程 序 结 构 函 数 与 事 件 31 JavaScript 函 数 定 义 JavaScript 函 数 定 义 如 下 : { fnction 函 数 名 ( 参 数 列 表 ) t=x*y; { 函 数 体 return t; return 表 达 式 ; //return 语 句 指 明 将 返 } 回 的 值 } var Time = Times(2,3), 其 返 回 值 是 6 函 数 由 关 键 字 function 定 义,{ } 花 括 号 规 定 了 函 数 定 义 的 开 始 和 结 束 无 参 数 的 函 数 也 必 须 在 其 函 数 名 后 加 括 号 即 : 下 面 的 例 子 定 义 了 一 个 最 简 单 的 函 数 function Times(x,y) function 函 数 名 () { 函 数 体 return 表 达 式 ; } 需 要 注 意 的 是 :JavaScript 函 数 名 对 大 小 写 是 敏 感 的 "function" 这 个 词 必 须 是 小 写 的, 否 则 JavaScript 就 会 出 错 另 外, 必 须 使 用 大 小 写 完 全 相 同 的 函 数 名 来 调 用 函 数

32 12.3 JavaScript 程 序 结 构 函 数 与 事 件 32 函 数 中 的 形 式 参 数 在 函 数 的 定 义 中, 我 们 看 到 函 数 名 后 有 参 数 列 表, 这 些 参 数 变 量 可 能 是 一 个 或 几 个 那 么 怎 样 才 能 确 定 参 数 变 量 的 个 数 呢? 在 JavaScript 中 可 通 过 arguments.length 来 检 查 参 数 的 个 数 例 如 : 程 序 12.12:JS12.htm <html><head> <script type="text/javascript"> function write(x, y, m, n){ for (i=0; i=arguments.length; i++) { document.write(arguments[i] + "<br/>"); } } </script> </head> <body> <input type="button" value=" 显 示 " onclick="write('hello','world','hello','china')"> </body><html> 在 程 序 中, 在 函 数 write() 中 定 义 了 4 个 参 数 x y m n, 然 后 通 过 arguments.length 属 性 来 获 得 参 数 的 个 数, 再 用 arguments[i] 属 性 来 获 取 每 个 参 数 的 值 当 用 户 单 击 显 示 按 钮 时, 在 页 面 上 显 示 参 数 的 值

33 12.3 JavaScript 程 序 结 构 函 数 与 事 件 33 Javascript 的 事 件 JavaScript 函 数 可 作 为 事 件 驱 动 的 结 果 来 调 用, 从 而 实 现 把 函 数 与 事 件 关 联 JavaScript 事 件 是 交 互 性 页 面 的 基 础 通 常 鼠 标 或 热 键 的 动 作 称 为 事 件 ; 由 事 件 引 发 的 程 序 的 操 作 称 为 事 件 驱 动 ; 对 事 件 进 行 处 理 的 程 序 称 为 事 件 处 理 程 序 在 JavaScript 中 对 事 件 的 处 理 通 常 由 函 数 担 任, 即 当 事 件 发 生 时 函 数 才 会 执 行 所 有 的 函 数 都 可 作 为 事 件 处 理 程 序 格 式 如 下 : function 事 件 处 理 名 ( 参 数 表 ) { 事 件 处 理 语 句 ; 事 件 发 生 的 对 象 } 事 件 与 其 处 理 函 数 的 关 联 语 句 是 : 事 件 名 称 事 件 处 理 程 序 <input type = button id= btn1 value = 提 示 " onclick=doclick()>

34 12.3 JavaScript 程 序 结 构 函 数 与 事 件 34 程 序 :JS13.htm <html> <head> <Script type = "text/javascript"> function DoClick() { } alert( 调 用 DoClick 函 数 '); </script> </head> <body> <input type ="button" id='btn1' value =" 调 用 事 件 处 理 函 数 " onclick=doclick()> </body> </html> 在 onclick= 后, 可 以 使 用 自 己 编 写 的 函 数 作 为 事 件 处 理 程 序, 也 可 以 使 用 JavaScript 的 内 置 函 数, 还 可 以 直 接 使 用 JavaScript 的 代 码 等 例 如 : < input type ="button" id='btn1' value =" 显 示 " onclick= alert(" 进 行 事 件 处 理 ")>

35 12.3 JavaScript 程 序 结 构 函 数 与 事 件 35 上 面 例 子 虽 然 很 简 单, 但 它 演 示 了 一 个 典 型 JavaScript 事 件 处 理 过 程 JavaScript 的 所 有 事 件 处 理 与 此 类 似, 只 是 其 对 象 的 事 件 和 触 发 的 条 件 不 同 可 见,JavaScript 的 事 件 处 理 与 函 数 调 用 其 实 很 简 单 JavaScript 中 最 常 用 的 事 情 主 要 有 :onclick onchange onselect onfocus onblur onload 和 onunload 等 事 件 下 面 简 要 说 明 这 些 事 件 所 使 用 的 对 象 及 触 发 的 条 件 单 击 事 件 onclick 当 用 户 单 击 鼠 标 按 钮 时 产 生 onclick 事 件 同 时 onclick 指 定 的 事 件 处 理 程 序 或 代 码 将 被 调 用 执 行 通 常 在 下 列 基 本 对 象 中 产 生 : button( 按 钮 对 象 ) checkbox( 复 选 框 ) 或 ( 检 查 列 表 框 ) radio ( 单 选 钮 ) reset buttons( 重 置 按 钮 ) submit buttons( 提 交 按 钮 )

36 12.3 JavaScript 程 序 结 构 函 数 与 事 件 36 onchange 改 变 事 件 当 利 用 text 或 texturea 元 素 输 入 字 符 使 其 值 改 变 时 发 该 事 件, 同 时 当 在 select 表 格 项 中 一 个 选 项 状 态 改 变 后 也 会 引 发 该 事 件 例 : <Input type="text" name="test" value="test" oncharge="check(this.test)"> 选 中 事 件 onselect 当 Text 或 Textarea 对 象 中 的 文 字 被 选 中 后 引 发 该 事 件 获 得 焦 点 事 件 onfocus 当 用 户 单 击 Text 或 textarea 以 及 select 对 象 时 产 生 该 事 件 失 去 焦 点 onblur 当 text 对 象 或 textarea 对 象 以 及 select 对 象 不 再 拥 有 焦 点 时 引 发 该 文 件, 他 与 onfocas 事 件 是 一 个 对 应 的 关 系 JavaScript 的 事 件 很 多, 常 用 的 JavaScript 事 件 如 表 12.2 所 示

37 12.3 JavaScript 程 序 结 构 函 数 与 事 件 37 JS14.htm 是 一 个 页 面 装 载 和 关 闭 时 自 动 调 用 函 数 的 例 子 程 序 :JS14.htm <html> <head> <script Language="JavaScript"> function loadform() { alert(" 这 是 一 个 自 动 装 载 例 子!"); } function unloadform() { alert(" 这 是 一 个 卸 载 例 子!"); } </Script> </head> <body OnLoad="loadform()" OnUnload="unloadform()"> <a href="test.htm"> 调 用 </a> </body> </html>

38 12.3 JavaScript 程 序 结 构 函 数 与 事 件 38 事 件 onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onreset onselect onsubmit onunload 描 述 使 用 在 表 单 元 素 中, 当 元 素 失 去 焦 点 的 时 候 执 行 使 用 在 表 单 元 素 中, 当 某 些 东 西 改 变 是 执 行 鼠 标 点 击 一 个 元 素 时 执 行 鼠 标 双 击 一 个 元 素 时 执 行 使 用 在 表 单 元 素 中, 当 元 素 获 得 焦 点 时 执 行 按 下 某 个 按 键 时 执 行 按 下 和 释 放 某 个 按 键 时 执 行 释 放 某 个 按 键 时 执 行 在 body 标 签 中 使 用, 载 入 页 面 的 时 候 执 行 按 下 鼠 标 按 键 时 执 行 鼠 标 光 标 在 元 素 上 移 动 时 执 行 鼠 标 光 标 移 开 元 素 时 执 行 鼠 标 光 标 移 到 元 素 上 时 执 行 当 释 放 鼠 标 按 键 时 执 行 用 在 表 单 元 素 中, 当 表 单 重 置 时 执 行 用 在 表 单 元 素 中, 当 元 素 被 选 择 时 执 行 用 在 表 单 元 素 中, 当 表 单 提 交 时 执 行 用 在 body 标 签 中, 当 关 闭 页 面 时 执 行 JavaScript 常 用 事 件

39 12.4 JavaScript 中 的 JSON 39 近 年 来,JSON 是 Web 应 用 领 域 最 热 门 的 技 术 和 话 题 之 一, 大 有 取 代 XML 的 架 势 那 么 什 么 是 JSON 呢? 它 有 什 么 作 用 和 优 势 呢? 本 节 将 回 答 这 些 问 题, 并 简 要 介 绍 JSON 的 对 象 描 述 方 法 和 JSON 的 解 析 方 法 主 要 内 容 如 下 : JSON 及 其 描 述 方 法 Json 与 XML 的 比 较 Json 对 象 与 字 符 方 式 转 变

40 JSON 及 其 描 述 方 法 40 JSON(JavaScript Object Notation JavaScript 对 象 表 示 法 ) 是 一 种 优 美 的 JavaScript 对 象 创 建 方 法, 也 是 一 种 轻 量 级 的 数 据 交 换 格 式 JSON 非 常 易 于 阅 读 与 编 写, 同 时 利 于 机 器 解 析 与 生 成 JSON 采 用 完 全 独 立 于 语 言 的 文 本 格 式 它 是 由 JavaScript 发 展 而 来 的 一 种 简 单 数 据 交 换 协 议, 它 的 数 据 格 式 就 是 一 个 合 法 的 JavaScript 对 象, 这 意 味 着 在 JavaScript 中 处 理 JSON 数 据 不 需 要 任 何 特 殊 的 API 或 工 具 包 21 世 纪 初,Douglas Crockford(JavaScript 社 区 知 名 权 威,Yahoo 的 JavaScript 架 构 师,JSON 之 父 ) 希 望 寻 找 一 种 简 便 的 数 据 交 换 格 式, 以 便 于 在 服 务 器 之 间 交 换 数 据 当 时 通 用 的 数 据 交 换 语 言 是 XML, 但 是 Douglas Crockford 觉 得 XML 的 生 成 和 解 析 都 太 麻 烦, 所 以 他 提 出 了 一 种 简 化 格 式, 也 就 是 JSON

41 JSON 及 其 描 述 方 法 41 JSON 为 创 建 对 象 提 供 了 非 常 简 单 的 方 法 例 如 : 创 建 一 个 没 有 任 何 属 性 的 对 象 : var myobject = {}; 创 建 一 个 对 象 并 设 置 属 性 及 初 始 值 : var Student = {name: Sunny, age: 18, married: false}; 创 建 一 个 对 象 并 设 置 属 性 和 方 法 : var Student={name: Sunny,show:function(){alter( Hello: +this.name)}}; 创 建 一 个 稍 微 复 杂 的 对 象, 嵌 套 其 他 对 象 和 对 象 数 组 等 : var company = { name: Microsoft, product: softwares, chairman:{name: Bill Gates, age: 53}, employees:[{name: Angel, age: 26},{name: Hanson, age: 32}], readme:function(){document.write(this.name+ product +this.product);} };

42 JSON 及 其 描 述 方 法 42 从 上 面 的 代 码 可 以 看 出,JSON 的 描 述 形 式 就 是 用 大 括 号 {} 括 起 来 的 项 目 列 表, 每 一 个 项 目 间 用 逗 号, 分 隔, 项 目 的 属 性 名 和 属 性 值 用 冒 号 : 分 隔 这 是 典 型 的 字 典 表 示 形 式, 也 再 次 表 明 了 JavaScript 中 的 对 象 就 是 字 典 结 构 不 管 多 么 复 杂 的 对 象, 都 可 以 用 JSON 形 式 的 代 码 来 创 建 并 赋 值 JSON 中 对 象 ( 数 据 ) 描 述 的 基 本 规 则 是 : (1) 并 列 的 数 据 之 间 用 逗 号, 分 隔 (2) 映 射 用 冒 号 : 表 示 (3) 并 列 数 据 的 集 合 ( 数 组 ) 用 方 括 号 [ ] 表 示 (4) 映 射 的 集 合 ( 对 象 ) 用 花 括 号 { } 表 示

43 JSON 及 其 描 述 方 法 43 比 如, 有 两 个 学 生 的 信 息 如 下 : 学 生 夏 雨, 男,22 岁, 计 算 机 专 业 ; 学 生 冬 雪, 女,20 岁, 信 息 管 理 专 业 用 JSON 格 式 可 表 示 为 : [ {" 姓 名 " : " 夏 雨 ", " 性 别 " : 男, 年 龄 : 22, 专 业 " : 计 算 机 }, {" 姓 名 " : " 冬 雪 ", " 性 别 " : 女, 年 龄 : 20, 专 业 " : 信 息 管 理 } ] 如 果 事 先 知 道 数 据 的 结 构, 上 面 的 写 法 还 可 以 简 化 为 : [ {" 夏 雨 ", 男, 22, 计 算 机 }, {" 冬 雪 ", 女, 20, 信 息 管 理 } ]

44 JSON 及 其 描 述 方 法 44 在 JSON 中, 有 两 种 结 构 : 对 象 和 数 组 对 象 是 一 个 无 序 的 名 称 / 值 对 集 合 一 个 对 象 以 花 括 号 { } 表 示 开 始 和 结 束 名 称 与 值 之 间 用 冒 号 : 分 隔, 名 称 / 值 对 之 间 使 用 逗 号, 分 隔 例 如 : var city = { 名 称 : 武 汉, 面 积 : 8460, 人 口 : 800} 又 如 : var circle = { x :16, y :8, r :25 }; 对 象 circle 定 义 了 一 个 圆 点 x 坐 标 为 16 y 坐 标 为 8 半 径 为 25 的 圆 数 组 是 值 的 有 序 列 表 一 个 数 组 以 方 括 号 [ ] 表 示 开 始 和 结 束, 值 之 间 用 逗 号, 分 隔 值 可 以 是 双 引 号 括 起 来 的 字 符 串 数 值 或 数 组 例 如 : var tennis = [ 费 德 勒, 罗 迪 克, 达 维 登 科, 萨 芬, 加 斯 奎 特 ]

45 JSON 及 其 描 述 方 法 45 下 面 我 们 用 一 个 实 例 来 说 明 JavaScript 中 JSON 的 描 述 和 实 现 这 里 假 设 我 们 需 要 创 建 一 个 Student 对 象, 并 具 有 以 下 属 性 : 姓 名 (Name) 性 别 (Sex) 年 龄 (Age) 电 子 邮 件 ( ) 我 们 可 以 使 用 以 下 JSON 形 式 来 表 示 Student 对 象 : var Student = {"Name":"Sunny","Sex":" 男 ", "Age":24," " :"Sunny@htomail.com" } 上 面 就 是 一 个 典 型 的 JSON 表 示 的 JavaScript 对 象, 对 象 的 名 称 为 Student, 每 个 名 称 与 值 使 用 冒 号 : 分 割, 例 如 名 称 Name 对 应 值 Sunny, 名 称 Age 对 应 值 24 注 意 : 对 象 中 的 名 称 和 字 符 串 的 值 必 须 用 引 号 ( ) 括 起 来

46 JSON 及 其 描 述 方 法 46 如 果 把 这 一 字 符 串 赋 予 一 个 JavaScript 变 量, 那 么 就 可 以 直 接 使 用 对 象 的 任 一 属 性 了 来 访 问 这 个 变 量 ( 对 象 ) 代 码 如 下 : 程 序 :JS15.htm <script type = "text/javascript"> var Student={"Name":"Sunny","Sex":" 男 ", "Age":24, " ":"Sunny@htomail.com"} 运 行 该 程 序 显 示 如 下 : document.write(student.name + "<br/>"); Sunny document.write(student.sex + "<br/>"); 男 document.write(student.age + "<br/>"); 24 document.write(student. + "<br/>"); Sunny@htomail.com </script>

47 JSON 及 其 描 述 方 法 47 在 实 际 使 用 中, 我 们 遇 到 的 情 况 要 比 这 复 杂 比 如, 某 学 生 的 电 子 邮 件 地 址 可 能 不 止 一 个, 那 么 这 种 情 况 如 何 表 示 呢?JSON 已 经 为 我 们 考 虑 了 这 些, 利 用 对 象 或 数 组 的 嵌 套 结 构 可 以 方 便 地 解 决 这 个 问 题 上 面 的 例 子 可 以 修 改 为 : 程 序 :JS16.htm <script type = "text/javascript"> var Student={"Name":"Sunny","Sex":" 男 ","Age":24," ": {"hotmail":"sunny@hotmail.com","yahoo":"sunny@yahoo.com"}} document.write(student.name + "<br/>"); document.write(student.sex + "<br/>"); document.write(student.age + "<br/>"); document.write(student. .hotmail +"; "+ Student. .yahoo); </script> 该 例 子 程 序 的 显 示 结 构 如 下 : Sunny 男 24 Sunny@hotmail.com; Sunny@yahoo.com

48 JSON 及 其 描 述 方 法 48 下 面 代 码 演 示 了 使 用 JSON 形 式 定 义 这 个 学 生 列 表 : var Student = [ {"Name":" 夏 雨 ","Sex":" 男 ","Age":24," ": {"hotmail":"sunny@hotmail.com","yahoo":"sunny@yahoo.com"}}, {"Name":" 冬 雪 ","Sex":" 女 ","Age":20," ": {"hotmail":"apple@hotmail.com","yahoo":"appley@yahoo.com"}} ] 上 面 的 例 子 中 的 Student 对 象 中 还 包 含 了 2 个 子 对 象, 每 个 子 对 象 表 示 一 个 学 生, 可 见 JSON 表 示 法 是 可 以 嵌 套 的

49 JSON 及 其 描 述 方 法 49 由 于 数 组 中 包 含 多 个 学 生 对 象, 因 此 在 获 取 学 生 信 息 时 需 要 用 一 个 循 环 来 依 次 读 取 数 组 中 的 各 个 对 象 程 序 代 码 如 下 : 程 序 :JS17.htm 运 行 上 面 的 程 序 显 示 如 下 : <script type = "text/javascript"> 夏 雨 var Student=[ {"Name":" 夏 雨 ","Sex":" 男 ","Age":24," ": 男 {"hotmail":"sunny@hotmail.com","yahoo":"sunny@yahoo.com"}}, 24 {"Name":" 冬 雪 ","Sex":" 女 ","Age":20," ": {"hotmail":"apple@hotmail.com","yahoo":"appley@yahoo.com"}} Sunny@hotmail.com; ]; Appley@yahoo.com for (i in Student){ 冬 雪 document.write(student[i].name + "<br/>"); 女 document.write(student[i].sex + "<br/>"); document.write(student[i].age + "<br/>"); 20 document.write(student[i]. .hotmail+";"+student[1]. .yahoo); Apple@hotmail.com; document.write("<br/><br/><br/>"); Appley@yahoo.com } </script>

50 JSON 与 XML 的 比 较 50 JSON 和 XML 都 使 用 结 构 化 方 法 描 述 数 据 我 们 对 JSON 与 XML 进 行 简 单 比 较 XML 用 于 数 据 传 输 与 交 换 格 式 的 优 点 是 : 格 式 统 一, 符 合 标 准, 容 易 与 其 他 系 统 进 行 远 程 交 互, 数 据 共 享 方 便 但 XML 格 式 的 不 足 之 处 在 于 : XML 文 件 格 式 文 件 庞 大, 格 式 复 杂, 传 输 占 用 带 宽 服 务 器 端 和 客 户 端 需 要 花 费 复 杂 的 代 码 和 专 用 接 口 来 解 析, 不 易 维 护 不 同 浏 览 器 之 间 解 析 XML 的 方 式 不 一 致, 需 要 重 复 编 写 很 多 代 码 JSON 的 优 势 主 要 表 现 在 : 数 据 格 式 简 单, 易 于 读 写, 数 据 代 码 量 小, 易 于 传 输 且 占 用 网 络 资 源 少 易 于 解 析, 客 户 端 可 以 用 JavaScript 简 单 的 进 行 JSON 数 据 的 读 取 支 持 多 种 语 言, 包 括 C,C#,Java,Perl,PHP,Python 等 语 言 服 务 器 端 语 言, 便 于 服 务 器 端 的 解 析 JSON 格 式 能 够 直 接 为 服 务 器 端 代 码 使 用, 大 大 简 化 了 服 务 器 端 和 客 户 端 的 代 码 开 发 量, 且 易 于 维 护

51 JSON 与 XML 的 比 较 51 下 面 用 一 个 实 例 来 说 明 XML 和 JSON 格 式 的 差 异 假 如 要 表 示 中 国 的 各 个 省 份 和 各 省 的 城 市 用 XML 格 式 表 示 的 数 据 如 下 :JS18.xml 用 JSON 格 式 表 示 的 数 据 如 下 : {name:" 中 国 ", province:[ {name:" 湖 北 ",citys:{city:[" 武 汉 "," 宜 昌 "," 黄 石 "," 黄 冈 "," 鄂 州 "]}}, {name:" 辽 宁 ",citys:{city:[" 沈 阳 "," 大 连 "," 鞍 山 "," 锦 州 "]}}, {name:" 广 东 ",citys:{city:[" 广 州 "," 深 圳 "," 珠 海 "]}}, {name:" 台 湾 ",citys:{city:[" 台 北 "," 高 雄 "]}} ] }

52 JSON 与 XML 的 比 较 52 从 上 面 的 代 码 可 以 看 出 : JSON 不 仅 表 示 的 形 式 简 单 数 据 直 观 可 读 性 好 代 码 量 少, 更 重 要 的 是 可 以 丢 弃 让 人 晕 头 转 向 的 xml 解 析 因 为 只 要 符 合 JavaScript 的 声 明 规 范,JavaScript 会 自 动 帮 你 解 析 ( 程 序 :JS18.htm) 显 示 结 果 为 : 中 国 湖 北 ( 武 汉, 宜 昌, 黄 石, 黄 冈, 鄂 州 ) 辽 宁 ( 沈 阳, 大 连, 鞍 山, 锦 州 ) 广 东 ( 广 州, 深 圳, 珠 海 ) 台 湾 ( 台 北, 高 雄 )

53 JSON 对 象 与 字 符 方 式 转 换 53 在 数 据 传 输 过 程 中,JSON 是 以 文 本, 即 字 符 串 的 形 式 传 递 的, 而 JavaScript 操 作 的 是 JSON 对 象, 所 以,JSON 对 象 和 JSON 字 符 串 之 间 的 相 互 转 换 是 关 键 例 如 : JSON 字 符 串 : var st = '{name: "Sunny", sex: " 男 ", "Sunny@hotmail.com"}'; JSON 对 象 : var st = {"name":"sunny","sex":" 男 "," ":"sunny@hotmail.com"};

54 JSON 对 象 与 字 符 方 式 转 换 54 JSON 字 符 串 转 换 为 JSON 对 象 要 使 用 上 面 的 字 符 串, 必 须 使 用 JavaScript 的 eval() 方 法 将 其 转 化 为 JSON 对 象 eval() 函 数 的 使 用 格 式 为 : var JSONobj = eval('(' + JSONtext + ')'); 因 此, 要 将 上 面 的 字 符 串 st 转 换 为 对 象, 可 以 使 用 下 面 的 语 句 : var sto=eval('(' + st +')'); 或 者 var sto = parsejson(st);

55 JSON 对 象 与 字 符 方 式 转 换 55 转 换 为 JavaScript JSON 对 象 后, 可 直 接 获 取 对 象 的 属 性, 并 在 页 面 上 显 示 完 整 的 代 码 如 下 : 程 序 :JS19.htm <html> <head></head> <body> <script type="text/javascript"> 运 行 上 述 程 序 页 面 上 显 示 : Sunny 男 Sunny@hotmail.com var st = '{name: "Sunny", sex: " 男 ", "Sunny@hotmail.com"}'; var sto=eval('(' + st +')') document.write(sto.name + "<br/>" + sto.sex + "<br/>" + sto. + "<br/>" ) //var sto = parsejson(st); //document.write(sto.name+"<br/>" + sto.sex + "<br/>" + sto. + "<br/>" ) </script> </body> </html>

56 JSON 对 象 与 字 符 方 式 转 换 56 将 JSON 对 象 转 化 为 JSON 字 符 串 可 以 使 用 tojsonstring() 或 者 全 局 方 法 JSON.stringify() 将 JSON 对 象 转 化 为 JSON 字 符 串 例 如 : var last=obj.tojsonstring(); 或 者 完 整 的 转 换 例 子 如 下 : var last=json.stringify(obj); 程 序 :JS20.htm 需 要 说 明 的 是 : 上 面 的 几 个 方 法 中, 除 了 eval() <html><head><script type="text/javascript"> 函 数 是 JavaScript 自 带 的 之 外, 其 他 的 几 个 方 法 </head> ( parsejson(st), obj.tojsonstring(), <body> JSON.stringify(obj)) 都 来 自 json.js 包 在 本 <script type="text/javascript"> 书 编 写 的 时 候, 还 未 下 载 到 相 应 的 json.js 包, var obj = {"name":"sunny","sex":" 所 以 使 男 用 "," ":"sunny@hotmail.com"}; JavaScript 编 写 的 相 应 的 函 数 var last = tojsonstring(obj) document.write(last + "<br/>") </script> </body> </html> 运 行 后 页 面 上 显 示 转 换 后 的 字 符 串 如 下 : {name:"sunny",sex:" 男 ", "sunny@hotmail.com"}