第 二 部 分: HTML 页
JavaScript 结 构
JavaScript 把 所 有 的 元 素 安 排 在 一 个 web 页 结 构 中。 每 一 个 元 素 都 是 一 个 对 象。 每 一 个 对 象 都 可 以 有 特 定 的 方 法 和 特 性。 利 用 JavaScript 你 可 以 很 容 易 的 操 作 对 象。 因 此 理 解 HTML 的 对 象 就 变 的 非 常 重 要。 下 面 的 例 子 可 以 使 你 很 快 的 理 解 它。 下 面 的 代 码 展 现 的 是 一 个 简 单 的 HTML 页。
<html>
<head>
<title>My homepage
</head>
<body bgcolor=#ffffff>
<center>
<img src="home.gif" name="pic1" width=200 height=100>
</center>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email"
value=""><br><br>
<input type="button" value="Push me" name="myButton"
onClick="alert('Yo')">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<p>
<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>
</center>
</body>
</html>
我 们 有 两 个 图， 一 个 连 接 和 一 个 有 两 个 文 本 输 入
框， 一 个 按 钮 的 表。 如 果 从 JavaScript 的 观 点 来 看 这 个 浏
览 器 窗 口， 那 它 是 一 个 窗 口 对 象。 这 个 窗 口 对 象 包 含
了 一 些 特 定 的 元 素， 象 状 态 条。 在 这 样 一 个 窗 口 中 我
们 能 加 载 HTML 文 本 ( 或 者 其 它 格 式 的 文 件 - 在 这 儿 我 们
只 讨 论 HTML 文 本 )。 这 一 页 是 一 个 文 本 对 象。 在 这 儿 这
个 文 本 对 象 表 现 了 它 加 载 的 HTML 文 本。 在 JavaScript 中， 文
本 对 象 是 一 个 非 常 重 要 的 对 象， 你 会 在 以 后 经 常 用 到
它。 举 例 来 说， 背 景 色 是 文 本 对 象 的 一 种 特 性。 但 更
重 要 的 是， 所 有 的 HTML 对 象 都 是 文 本 对 象 的 特 性。 一 个
HTML 对 象 是 一 个 连 接， 一 张 表， 或 这 一 类 的 东 西。
我 们 想 要 知 道 关 于 不 同 对 象 及 如 何 操 作 它 们 的
话， 首 先 要 知 道 如 何 存 取 它 们。 你 能 从 上 面 这 个 结 构
图 中 看 到 对 象 的 名 字。 如 果 你 想 知 道 如 何 在 这 个 HTML
页 中 使 用 第 一 个 图 的 话， 你 必 须 先 看 看 这 个 结 构 图。
你 必 须 从 顶 层 开 始。 第 一 个 对 象 是 文 本。 这 页 上 第 一
个 图 是 通 过images[0] 来 表 现 的。这 意 味 着 我 们 能 通 过
JavaScript 对 象 document.images[0] 来 使 用 它。
如 果 你 想 知 道 用 户 在 第 一 个 文 本 输 入 框 输 入 了 什 么
的 话， 你 首 先 要 知 道 如 何 使 用 这 个 对 象。 我 们 再 次 从
结 构 图 的 顶 层 开 始。 顺 着 路 径 到 那 个 叫 elements[0] 的 对
象， 把 你 经 过 的 所 有 对 象 的 名 字 放 在 一 起。 这 意 味 着
你 能 通 过 document.forms[0].elements[0] 来 使 用 第 一 个 文 本 元 素。
不 过 目 前 我 们 如 何 知 道 用 户 输 入 的 是 什 么 呢？ 为 了 知
道 一 个 对 象 的 特 性 和 方 法 你 必 须 阅 读 专 门 的 JavaScript 索
引 ( 比 如 是 Netscape 的 文 档 )。 从 那 儿 你 能 了 解 到 文 本 元
素 的 性 质 值。 这 就 是 用 户 输 入 到 文 本 元 素 中 东 西。 我
们 能 通 过 下 面 的 代 码 来 取 得 它 的 值:
name= document.forms[0].elements[0].value;
字 符 串 被 储 存 在 变 量 name 中。 现 在 我 们 能 操 作 这 个
变 量。 比 如 我 们 能 生 成 通 过alert("Hi " + name)一 个 弹 出
窗 口。 如 果 输 入 的 是 'Stefan'， 那 么 命 令alert("Hi " +
name) 会 生 成 一 个 内 容 是 'Hi Stefan' 的 弹 出 窗 口。
如 果 你 有 一 个 大 型 的 页， 那 么 只 通 过 不 同 的 数 字 编 号
辨 认 不 同 的 对 象 会 很 困 难， 就 象 document.forms[3].elements[17] 或
者 用 document.forms[2].elements[18]? 为 了 避 免 这 个 问 题， 你 可 以 给
不 同 的 对 象 赋 以 不 同 的 名 字。 你 能 从 下 面 的 例 子 中 看
到 我 们 是 怎 么 作 的：
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
...
这 就 是 说 forms[0] 也 能 叫 作 myForm。 你 能 通 过 使 用 name 来 代 替 elements[0] ( 在 <input 标 记 中 指 定)。 所 以 可 以 用
name= document.myForm.name.value;
来 代 替
name= document.forms[0].elements[0].value;
这 会 使 你 编 写 大 型 的 web 页 更 容 易。 ( 请 记 住， 大 小
写 是 不 同 的， 这 就 是 说 你 不 能 用 myform 来 代 替 myForm)
你 并 不 是 只 能 对 JavaScript 对 象 进 行“ 读 ” 的 操 作 的。 你
还 能 给 它 指 定 新 的 值。 举 例 来 说 你 能 在 文 本 输 入 框 中
输 入 一 个 新 的 值。 先 来 看 看 这 个 例 子：
这 儿 是 这 个 例 子 的 源 代 码， 有 趣 的 部 分 是 在 第 二 个 <input tag 后 的 onClick 属 性 定 义 中:
<form name="myForm">
<input type="text" name="input" value="bla bla bla">
<input type="button" value="Write"
onClick="document.myForm.input.value= 'Yo!'; ">
在 这 儿 我 不 能 讲 的 很 清 楚， 如 果 你 能 查 阅 专 门 的
JavaScript 索 引 的 话， 那 儿 的 描 述 是 非 常 清 晰 的。 我 写 了
一 个 小 例 子， 在 这 个 例 子 中 你 能 看 到 不 同 对 象 的 应
用。 试 试 通 过 Netscape 的 文 档 的 帮 助 来 弄 懂 它
先 来 看 看 这 个 例 子 究 竟 是 怎 么 回 事：
这 儿 是 源 代 码:
<html>
<head>
<title>Objects</title>
<script language="JavaScript">
<!-- hide
function first() {
// creates a popup window with the
// text which was entered into the text element
alert("The value of the textelement is: " +
document.myForm.myText.value);
}
function second() {
// this function checks the state of the checkbox
var myString= "The checkbox is ";
// is checkbox checked or not?
if (document.myForm.myCheckbox.checked) myString+= "checked"
else myString+= "not checked";
// output string
alert(myString);
}
// -->
</script>
</head>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="bla bla bla">
<input type="button" name="button1" value="Button 1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Button 2"
onClick="second()">
</form>
<p><br><br>
<script language="JavaScript">
<!-- hide
document.write("The background color is: ");
document.write(document.bgColor + "<br>");
document.write("The text on the second button is: ");
document.write(document.myForm.button2.value);
// -->
</script>
</body>
</html>
位 置 对 象
除 了 窗 口 对 象 和 文 本 对 象 以 外 还 有 一 个 很 重 要 的
对 象， 那 就 是 位 置 对 象。 这 个 对 象 是 用 来 定 位 一 个 可
载 入 的 HTML 文 本 的。 所 以 如 果 你 要 载 入 一 个 页
http://www.xyz.com/page.html 那 么 location.href 就 是 用 来 定 位 它 的 位 置
对 象。
更 重 要 的 是 你 能 给 location.href 指 定 新 的 值。 这 个 按 钮 载
入 了 一 个 新 的 页：