第 1 集
JavaScript 是什麽？
JavaScript 是一种新的描述语言，此一语言可以被箝入 HTML 的文件之中。
透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路
来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)
处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。你也可
以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在
Internet 上你可以连过去看看，以下有一些计算器的例子，在 Nescape 上。
JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂
许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者
可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。
如需相关的更多资讯，可以去读读 Netscape 的有关 Netscape JavaScript 之介绍。
如何执行 JaveScript？ 范例 1：
JavaScript 如何执行呢？
Netscape 2.0 beta 3 版以上，就可以执行 JavaScript 的功能了，我们测试过至少
beta 3 版以上可以，其他种类的 WWW 浏览器如:Internet Expore 3.0也有此一功能。
以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中，并且体会
一下新语言的特性，我们从第一个例子开始：如何用 JavaScript 印出一串文字至
HTML 文件中：
<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="LiveScript">
document.write("这是以 JavaScript 印出的!")
</script>
<br>
Back in HTML again.
</body>
</html>
如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话，那你就可以
看到相关的结果，而如果你的浏览器并非是可以支援 JavaScript 的话，那看起
来就会有一些怪怪的了，以上范例的结果如下：
This is a normal HTML document.
<script language="LiveScript" type="text/javascript">
</script> 这是以 JavaScript 印出的!
Back in HTML again. 此一范例并没有太大的用处，它只是要告诉你如何使用<script>的标签，并
如何将它置於 HTML 的文件之中而已，这个新的标签你可以特它放在文件
中的任何地方。
接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心，函数并
非很难懂的东西，但它却相当有用。函数通常是在 HTML 文件中 <body ＞的
部份被呼叫，而理所当然地，它最好事先被宣告并放在 HTML 文件中 <body＞
的部份。好让在 <body＞ 部分中使用到函数时，它已确定被读取住来。另外，
<script＞ 标签的有关描述语法剖份，你可以用注解的符号将它括起来，以免旧
版或无法读取 JavaScript 的浏览器读到，而误会了意思！
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("嗨! 你好");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" οnclick="pushbutton()">
</form>
</body>
</html>
如果你是使用
Netscape 2.0 beta 3 以上的浏览器，那以上 JavaScript 语法部份
的结果如下，你可以试着按按钮看看有何结果产生！
在范例 2 中，将会产生一个按钮，当你用滑鼠去按它的时候，应该会出现
一个视窗上面有“嗨! 你好”的字串，如何？不错吧！这个结果是如何产生
的呢？首先，在 <head＞内的函数会被载入并存於内存中，接着一个新
的 <form＞标签 <input type ="button".....＞将产生一个接钮。然後，你可以
在後面看到 'onClick' 的指令，这就是告诉浏览器，当该按钮被按时，应会执行
onClick 後的函数 'pushbutton()'，而这个函数在刚刚程式被载入时就已安放在
记忆体中了！请注意，在这个函数中我们用到了个新东西－ alert 的 method，
是 JavaScript 事先定义好的，它会以对话视窗产生内涵的讯息，并有一"确定"
(OK)的按钮。 JavaScript 定义了许多的 method，你可以连至 Netscape 公司去
获取较完整的讯息。我想这些 method 在不久的将来会有长长的一串可以够你
学的，不过目前的 method 也已经可以做出相当多东西了！
接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，
事实上，这也是加入个函数就可以达成的。
<html>
<head>
<script language="LiveScript">
<!-- hide script from old browsers
function getname(str) {
alert("哈罗! "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
现在你可以试试结果如何：
请输入你的名字：
(<!- ... -＞) 此部分即我们之前所提到的它可以避免旧版本或是不支援 JavaScript
的 WWW 浏览器因为不认识这些函数而产生错误。它的顺序应 该为 <script＞
先，接着为注解的开头 <!-，然後是内容，注解尾 -＞， 最後是 </script＞。
另外要注意的一点是，语解尾那一行的开头双斜线 "//" ，不可以省略，它代表了
JavaScript 的注解，若省略了的话， -＞之前的字会被误认为是 JavaScript 的指令。
这个例子可以让使用者输入一段文字，然後再输入完毕後经由 <input＞标签中的
"onBlur" 事件函数侦知，於是呼叫 Getname(Str)这个函数来加以取得输入字串，
并将它显示在对话视窗上！函数 Getname(this.value) 中的 "this.value" 是你在文
字输入格式中所输入的值。
这个范例更是帅了！我们在 HTML 文件档完成了以後，常会加上一行文件
最後修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以
很简单的写一个如下的描述语法程式，就可以自动的为你每次产生最後修
改的日期了：
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成 documeut.lastmodified 的，然而，之後的版本就改为 document.lastModified，
所以注意一下 ；JavaScript 本身是会区分大小写的， lastmodified 与 lastModified
在它看来是不同的结果。
最後，在这一部分结束之前，要提醒你一点，像范例 4 ，的用法并非每一部
机器都是一样的，例如：PC 上跑得很正确的，在工作站上不一定会有相同的
结果，所以，或许你仍得测一测不同机器的结果才会有所定论。当然，这一切
是因为 JavaScript 还正在发展的原因，最新的讯息还是得去拜访一下Netscape
公司才知道。也许你也不用奇怪，当你隔周再来访时，JavaScript 可能又作了
相当大的改变了呢！
在 这 一 部 分 首 先 要 为 你 展 示 的 JavaScript 特 性 是 将 你 的 滑 鼠 移 到 这 个 不 同 颜 色
的连 结上 面， 此 时 看 看 浏 览 器 下 的 状 态 列 有 何 结 果。 然 後 这 样 的 功 能 我 们 可 以
与 JavaScript 的 功 能 相 结 合。 好， 现 在 再 将 你 的 滑 鼠 移 到 本 处 不 同 颜 色 的连 结上
面， 你 应 该 会 发 现 有 一 个 视 窗 出 现， 是 吧？！ 如 何！ 怎 麽 做 到 的 呢？ 以 下 就 是
这 一 个 连 结 的 作 法：
<a href="tpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">
在 这 儿 你 只 要 在 传 统 <a> 的 标 签 中 加 入 onMouseOver 的 method， 就 可 达 成 你 要 的
效 果 了。 这 里 的 window.status 是 用 来 让 你 可 以 在 WWW 浏 览 器 的 状 态 列 上 显 示
一 些 讯 息 用 的。 在 语 法 中， 你 可 以 看 到 讯 息 部 分 是 用 ' 括 起 来 的 部 分， 而 非 以 " 括
起 来， 在 讯 息 部 分 结 束 之 後， 必 须 加 上 ; return true。
好 了， 利 用 以 上 的 特 性 可 以 很 简 单 的 完 成 第 二 个 连 结 的 例 子！ 相 当 简 单， 以
onMouseOver 的 method 然 後 配 合 事 件 发 生 时 去 呼 叫 函 数 hello() 就 行 了， 不 再
多 加 解 释 了， 作 法 如 下：
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈 罗!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
接 下 来 我 们 要 告 诉 你 一 个 使 用 日 期 和 时 间 的 例 子。 在 第 一 部 分 中， 你 已 看 过 了
lastModified 的 用 法 和 作 法。 现 在 要 告 诉 你 的 并 非 是 印 出 网 路 上 伺 服 器 或 文 件
修 改 日 期， 而 是 你 个 人 客 户 端 机 器 的 日 期 和 时 间。 以 下 就 是 执 行 结 果：
<script language="LiveScript" type="text/javascript">
</script> 现 在 时 间 是： 16:44
今 天 日 期 为： 6/8/2006
做 法 如 下：
<script language="LiveScript">
<!-- Hiding
today = new Date()
document.write("现 在 时 间 是： ",today.getHours(),":",today.getMinutes())
document.write("<br>今 天 日 期 为： ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>
在 本 例 中， 我 们 必 需 首 先 建 立 一 个 日 期 变 数， 这 可 以 由 today= new Date()来 完 成。
如 果 没 有 特 别 指 定 时 间 与 日 期 的 话， 浏 览 器 将 会 采 用 本 地 客 户 端 机 器 的 时 间， 若 将
它 放 入 变 数 today 中。 这 儿 要 注 意 的 是： 我 们 并 没 有 宣 告 today 这 个 变 数 的 型 态，
这 和 Java 或 其 他 的 程 式 语 言 在 用 到 变 数 之 前 必 需 先 加 以 宣 告 的 方 式 有 相 当 大 的 不
同。 在 完 成 today 的 日 期 变 数 後， 我 们 等 於 建 立 了 一 个 具 有 本 地 时 间 与 日 期 的 物 件
(object)。 接 着 就 可 以 使 用 get... 的 method 以 取 得 today 这 个 物 件 的 时 间 和 日 期。
请 注 意 getMonth 这 个 method 所 取 得 的 月 份 范 围 是 由 0~11， 所 以 必 须 加 1 以 代
表 真 正 的 1 月 至 12 月。 看 完 以 上 的 例 子 後， 想 想 你 可 以 使 你 的 文 件 变 得 有 点
智 慧， 例 如： 某 个 文 件 有 时 效 限 制 的 话， 你 可 以 利 用 我 们 在 上 一 部 份 的范 例 4
中 所 提 到 的 功 能 和 这 一 个 范 例 中 所 学 习 到 的 功 能， 设 计 一 个 让 你 的 文 件 在 第10天
以 後 读 到 的 话 就 会 告 诉 读 者："喂！ 这 篇 已 过 时 了！"的 程 式， 试 试 看， 并 不 难！
除 以 上 功 能 外， 在 建 立 日 期 物 件 时 你 也 可 以 事 先 设 定 日 期 如 下：
首 先 是 年（西 元）， 接 着 是 月（但 记 得 减 1）， 再 接 着 是 日。 同 样 的 方 法 也 可 以
加 上 时 间 的 设 定， 如 下：
前 三 个 是 日 期 的 年、 月、 日， 接 着 是 时、 分、 秒。 最 後， 我 们 必 须 提 醒 你，
JavaScript 并 没 有 实 际 的 日 期 型 态， 但 是 它 却 能 毫 不 费 力 地 显 示 出 日 期 和 时 间，
原 因 是 它 是 从 1 / 1 / 1970 0：0h 开 始 以 ms(milli seconds) 来 计 算 目 前 的 时 间 的，
这 听 起 来 似 有 些 复 杂， 但 你 倒 不 用 担 心， 它 有 标 准 的 共 用 函 数 可 以 计 算，
你 只 要 知 道 如 何 用 就 可 以 了！
接 下 来 我 们 要 为 你 介 绍 一 个 可 以 产 生 乱 数 的 函 数， 也 是 以 JavaScript 所 写 的。
这 个 函 数 只 是 利 用 了 一 点 小 技 巧 而 已， 而 这 种 技 巧 在 大 部 分 的 编 译 器(compiler)中，
大 都 是 如 此（或 类 似） 计 算 出 乱 数 来 的。 我 相 信 JavaScript 最 後 应 也 会 以 相 似 的 方
法 来 产 生 这 样 的 method ， 如 果 它 会 提 供 这 样 功 能 的 话。 以 下 是 此 函 数 的 结 果：
这 是 一 个 计 算 产 生 的 乱 数： <script language="LiveScript" type="text/javascript"> </script> 0.37723601770451265
以 下 是 这 个 作 法 的 写 法：
<html>
<head>
<script language="LiveScript">
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="LiveScript">
<!--
document.write("This is a random number:", RandomNumber());
// -->
</script>
</body>
</html>
我 们 的 做 法 是 以 上 一 个 范 例 中 的 时 间 函 数； 它 会 出 现 一 个 很 大 的 数，
利 用 这 个 数 再 加 以 运 算 即 可！ 例 如： 将 它 拿 来 做 正 弦 函 数（sin） 的 运
算， 得 到 的 数 再 做 绝 对 值 的 运 算， 结 果 可 以 得 到 一 个 介 於 0 与 1 间 的
实 数。 因 为 时 间 的 改 变 是 ms 为 单 位， 而 且 你 绝 不 会 获 得 相 同 的 数 字。
不 过 这 个 做 法 并 不 适 合 拿 来 快 速 的 连 续 产 生 一 系 列 的 乱 数， 但 如 果 你
是 不 定 时， 久 久 的 用 一 次， 那 效 果 就 不 错 了！
JavaScript 的 一 个 重 要 特 点 是 它 可 以 制 作 视 窗。 你 可 以 产 生 一 个 的 视 窗， 并 且
在 此 视 窗 中 载 入 HTML 文 件， 完 全 以 JavaScript 来 航 游 网 际 网 路（Internet ）。
接 下 来 的 范 例 就 是 告 诉 你 如 何 开 启 一 个 视 窗 并 且 写 点 东 西 进 去， 你 可 先 试 试
按 一 下 范 中 之 接 钮 看 看！
原 始 程 式 如 下：
<html>
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>哈 罗!</TITLE></HEAD>");
msg.document.write("<CENTER><H1>酷 毙 了!</H1><h2>这 是<B>JavaScript</B>所 开 的 视 窗!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" οnclick="WinOpen()">
</form>
</body>
</html>
这 儿 你 又 看 到 用 按 钮 来 启 动 函 数。 这 次 的 函 数 WinOpen()是 藉 着 一 个 open
的 method 来 产 生 一 个 新 的 视 窗。 第 一 对 双 引 号("")是 用 来 描 述 欲 载 入 至 视 窗
中 的 文 件 URL 位 置。 如 果 留 者 空 白 的 话， 那 就 会 呈 现 一 个 空 白 视 窗， 并 可 以
透 过 JavaScript 写 入 东 西！ 下 一 对 双 引 号 内 的 内 容 是 这 个 新 开 启 视 窗 的 名 字，
你 可 以 喜 欢 给 它 任 意 一 个 名 字， 但 不 可 加 入 空 白， 如 用 Display Window 的 话 便
会 出 现 错 误 讯 息， 请 注 意。 接 下 来 的 一 连 串 双 引 号 内 所 指 定 的 是 该 视 窗
的 相 关 性 质(properties)， 这 些 蛮 有 趣 的， 你 可 以 指 定 要 不 要 有 工 具 棒(toolbar) 、
卷 轴(scrollbar)， 等 等， 例 如： 如 果 你 写 toolbar = yes， 那 就 会 在 你 所 产 生 出
来 的 视 窗 中 出 现 一 排 工 具 列。 以 下 有 许 多 你 可 以 改 变 的 视 窗 特 性， 请 注 意 它 们
字 中 间 不 可 以 有 空 白：
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
以 上 的 pixels 部 分， 你 可 以 填 入 点 数 的 数 值， 这 数 值 是 告 诉 浏 览 器 这 个 视 窗 的
大 小。 在 开 启 视 窗， 并 且 将 它 称 为 msg 以 後， 就 可 以 开 始 写 些 东 西 到 视 窗 中 了。
你 可 以 写 入 一 般 正 规 的 HTML 语 法 文 字。 哇！ 这 可 不 得 了 了， 也 就 是 说， 你 可 以
利 用 先 前 使 用 者 在 form 表 格 中 输 入 给 你 的 文 章 直 接 将 它 回 应 至 浏 览 器 上 来 了！ 这 些
功 能 在 几 个 月 前 大 概 还 只 能 用 CGI 才 能 达 到 喔！ 现 在 你 不 用 CGI 也 可 以 做 了！
第 三 集
| 曾 有 许 多 网 友 问 我 有 关JavaScript与 框 架(为 求 方 便， 以 下 均 用frame表 示)合 用 的 问 题。 事 实 上，若 您 同 时 想 用frames和JavaScript的 功 能， 首 先 您 必 需 拥 有Netscape Navigator 2.0 (或 以 上)浏 览 器( 至 少 目 前 是 如 此)。 当 然 也 有 某 些 浏 览 器 支 援frames的 功 能--如:Oracle开 发 的PowerBrowser， 但 此浏 览 器 还 只 是Beta版， 目 前 尚 不 支 援JavaScript。 首 先， 我 稍 微 解 释 一 下frames的 功 用。 因 为frames功 能 才 开 发 不 久， 仍 有 许 多HTML文 件 中 未 使用 这 项 新 功 能。Frames最 主 要 功 用 是"分 割"您 的 视 窗， 使 每 个"小 视 窗"(frame)能 显 示 不 同 的HTM L文 件(译 按:这 有 点 类 似 电 视 的 子 母 画 面)。 更 妙 的 是， 不 同frame之 间 可 以 互 动(interact)， 也 就 是说 不 同frame之 间 可 以 交 换 讯 息 与 资 料(information)。 例 如:假 设 您 开 了 两 个frames， 第 一 个frame可显 示 普 通HTML文 件， 第 二 个frame可 显 示 工 具 列(toolbar)。 此 工 具 列 中 可 包 含 浏 览 您homepage所需 的 各 种 按 钮。 如 此 一 来， 即 使 第 一 个frame载 入 了 另 一 个HTML文 件， 您 仍 可 在 第 二 个frame中看 到 工 具 列。 现 在 我 先 将 上 述 特 性 展 示 给 您 瞧 瞧。 请 按 一 下 下 面 的 按 钮， 看 一 看frames的 长 相。(如 果 您 是 线上 观 看 此 文 件， 您 可 能 需 稍 候 一 下 才 看 得 到 结 果， 因 为scripts必 需 由server中 载 入 到 您 的 机 器)。
以 下 是 此frame的 写 法:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
首 先 您 必 须 告 诉 浏 览 器 您 要 开 几 个frame?这 是 由 <frameset...> 这 个 标 签(tag)来 宣 告。rows这 项叁 数 是 告 诉 浏 览 器 您 想 将 视 窗 分 割 成 几 列?而 cols这 项 叁 数 是 告 诉 浏 览 器 您 想 将 视 窗 分 割 成 几行?您 也 可 以 用 很 多 组 的 <frameset...> tags 将 视 窗 分 割 得 更 复 杂。 以 下 是 Netsacpe所 提 到 的 一 个范 例:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
上 面 这 个 例 子 产 生 了 两 行， 而 且 第 二 行 又 分 割 成 三 列 大 小 相 等 的 空 间。 在 第 一 个 <frameset> tag 中 的 50%，50% 两 项 叁 数 是 用 来 表 是frame的 大 小。 我 想 您 已 了 解frames的 基 本 用 法， 接 下 来 我 们 再 看 一 个 有 趣 的 范 例:
上 面 的 按 钮 将 显 示 : 按 某 个frame中 的 按 钮 後， 会 在 另 一frame中 写 入 文 字。 在 产 生frames效 果 之 前， 您 需 先 制 作 下 列 原 始 码 (frames.html):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.html" name="fr1" noresize>
<FRAME SRC="frame2.html" name="fr2">
</FRAMESET>
</HTML>
以 下 是 frame1.html 的 原 始 码:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("嗨!<br>");
}
function yo() {
document.write(" !<br>");
}
function bla() {
document.write("啦 啦 啦<br>");
}
// -->
</script>
</HEAD>
<BODY>
这 是 第 一 个 frame!
</BODY>
</HTML>
以 下 是 frame2.html 的 原 始 码:
<HTML>
<body>
这 是 第 二 个 frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="嗨" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE=" " onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="啦" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
哇!这 些 语 法 越 来 越 长 了!上 述 的 语 法 是 如 何 运 作 的 呢?当 使 用 者 载 入 第 一 个 档 案 (frames.html)後， 将 会 产 生 两 个frame， 并 且 在 第 一 个frame(命 名 为 'fr1')中 载 入frame1.html， 而 在 第 二 个frame ( 命 名 为 'fr2')中 载 入frame2.html。 到 目 前 为 止 都 只 是 普 通 的 HTML 语 法。 或 许 您 已 发 现 在 frame1.html中 包 含 了JavaScript语 法， 但 此JavaScript并 没 有 马 上 被 执 行。 难 到 这 些 函 式(functions) 是 不 必 要 的?亦 或 是 我 得 删 除 这 些 不 必 要 的 函 式?虽 然 我 是 散 惯 的 人， 但 这 些 函 式 确 实 是 必须 的。 它 们 是 被 位 於frame2.html中 之JavaScript语 法 所 呼 叫 而 执 行 的。 我 在frame2.html中 利 用Java Script语 法 制 作 了 三 个 按 钮， 制 作 按 钮 来 呼 叫 函 式 的 方 法 我 已 在 第 一 章 提 过， 相 信 您 对onClick的用 法 已 相 当 熟 悉。 但 是...... parent.fr1 是 干 嘛 用 的? 若 您 对 物 件 观 念 已 相 当 了 解， 相 信 它 对 您 不 是 甚 麽 新 鲜 事。 您 可 以 看 到frames.html同 时 呼 叫 frame1.html 与 frame2.html两 个 档 案， 所 以frames.html称 为frame1.html与frame2.html的 parent (请恕 我 直 接 用 英 文)。 同 理， 这 两 个 新 的frame就 称 为frames.html的 child- frames。 您 可 将 这 种 复 杂的 关 系 想 像 成 阶 层 式 架 构(hierarchy)。 以 下 我 借 助 一 个 小 '图' 来 厘 清 这 种 关 系:
frames.html parent
/ /
/ /
/ /
fr1(frame1.html) fr2(frame2.html) children
当 然 您 可 依 此 类 推， 产 生 一 些 'grandchildren' frames。 (当 然， 这 并 不 是 正 式 的 名 称):
frames.html parent
/ /
/ /
/ /
fr1(frame1.html) fr2(frame2.html) children
/ /
/ /
/ /
gchild1 gchild2 'grandchildren'
若 您 想 由frame2.html呼 叫parent- frame中 的 任 何 函 数， 您 只 要 将 parent 放 在 您 欲 呼 叫 函 数 名 称 之前 即 可。 同 理， 若 由parent- frame呼 叫 位 於frame1.html中 的 函 数， 您 只 需 将 fr1 放 在 被 呼 叫 函 数名 称 之 前。 为 什 麽 用 fr1 呢?原 因 是 我 们 在frames.html中 开 了 两 个frame， 而 且 将 它 们 分 别 命 名 为 fr1和 fr2。 所 以 我 用 fr1 代 表 第 一 个frame (frame1.html)。 接 下 来 的 步 骤 就 相 当 容 易 了。 当 我 们 欲由frame2.html ( 命 名 为 fr2)呼 叫 第 一 个frame中 的 函 式 时 该 怎 麽 做?由 上 面 的"小 图"您 可 以 发 现， frame1.html 和frame2.html之 间 并 无 直 接 关 连 (connection)， 因 此 您 不 可 以"直 接"由frame2.html呼叫 位 於 frame1.html中 的 函 式。 您 必 须 透 过parent- frame来 呼 叫 它， 所 以 正 确 指 标(index)应 为 parent.fr1。 例 如 若 您 想 由frame2.html呼 叫 hi()， 您 必 须 写 成 parent.fr1.hi()。 这 也 就 是 为 什 麽 frame2.html中 的 onClick要 写 成 那 种 样 子 的 原 因 了。 对 了!附 带 提 一 点 小 东 西。 您 或 许 已 发 现 本 章 中 都 用<script language="JavaScript">代 替 前 两 章 用的<script language="LiveScript">。 其 实 此 二 者 间 并 没 什 麽 差 别。 但 起 初JavaScript被 植 入Netscape 浏 览 器 时， 您 只 能 用LiveScript语 法。(这 是 一 种 由Netscape发 展 的 旧 语 法， 和JavaScript极 为 类 似 )。 我 想 既 然 我 们 讨 论 的 是JavaScript函 式， 就 应 使 用JavaScript语 法。 (这 只 是 我 的 一 己 之 见， 在 'JavaScript- society'中 有 许 多 关 於LiveScript的 讨 论， 目 前 也 是 众 说 纷 纭....)
在 此 我 要 花 一 点 时 间 讨 论 一 个 很 多 人 关 心 的 问 题。 当 您 观 赏 一 个 拥 有 数 个frame的 网 页 时， 若 您想link至internet其 它 网 页， 这 些frame并 不 会 消 失 而 且 会 带 来 视 觉 上 的 干 扰。 这 些 讨 厌 的frame应该 如 何 消 除 呢? 您 只 要 在 您 的<a href...> tag中 加 入TARGET="_top" 就 可 解 决 这 个 困 扰。 方 法 如 下: <a href="goaway.html" TARGET="_top">如 果 您 不 想 观 赏 我 的 网 页 了</a> 当 然， 您 必 须 在 您 想 要 获 得 此 效 果 的link中 都 加 入TARGET="_top" 。 若 想 要 整 个 网 页 中 的link 都 有 此 效 果， 您 可 在 此 网 页 的head中 加 入<base target="_top">较 方 便。 如 此 一 来 每 个link被 按 下後 都 可 将frame消 除。 |
第四集
| 这章我将告诉您如何在状态列 (statusbar) (也就是您浏览器最下方显示 URLs 的那一行) 显示文字，并且将教您 '跑马灯' (以下简称 scroller ) 的工作原理。虽然以 JavaScript 完成的 scroller 目前仍有些问题 (稍後会提到问题在哪儿?)，但我还是告诉您它是如何写成的。 首先，如何将文字填入 statusbar 呢?下述语法将告诉您如何做到这项功能: (按下按钮後请注视 statusbar 的变化) 很新奇吧! 请看看原始码 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" οnclick="statbar('嗨 ! 这就是状态
列 (statusbar) !');">
<input type="button" name="erase" value="清除文字" οnclick="statbar('');">
</form>
</body>
</html>
我制作了两个都会呼叫 statbar(txt) 函式 (function) 的按钮。当此函式被呼叫後，字串经由括弧中的变数 txt 传给 statbar(txt)。 (不一定要用 txt，用别的变数名也可以)。当电脑执行到 <form> tag 时， 一旦按下按钮就会呼叫 statbar(txt)。但是电脑并没有马上将 txt 的内容写在 statusbar，只是将欲显示的字串存入 txt。换句话说，藉由呼叫函式，只是让变数 txt 得到一个值。因此当您按下 '写入文字' 这个按钮後，会呼叫 statbar(txt) 而且 '嗨 ! 这就是状态列 (statusbar) !' 这个字串会存入 txt 中。咻 ! 讲了这麽多只是想告诉您这种写法可预留一些弹性。什麽弹性呢?就是您可重复使用 txt 这个变数。您看看第二个按钮，它也是呼叫相同的函式。若您不利用一个变数来传递字串的话，就必须写两个不同的函式了。 由此份简介文件第二章您已学过 onMouseOver 的特性了 : 试试将 mouse 移到此 link 上看看 statusbar 的变化，但请不要按它。 怎麽样?很棒吧!看看下面的原始码您就知到这东西很简单。
<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.html" onMouseOver="moveover('瞬间即逝 !');return true;">
link</a>
</body>
</html>
这 script 的许多部份相信您已了解。 moveover(txt) 其实和先前的 statbar(txt) 差不多。erase()也和先前所讨论的相同。在 HTML 网页中的 <body> tag 里我们加入一个具有 onMouseOver 功能之 link。当 mouse 指标移至 "link" 上就会呼叫 moveover(txt)，并且利用 txt 变数传递字串 '瞬间即逝 !'。接下来的步骤就和 statbar(txt) 一样， window.status 收到 txt 的值後将之显示在 statusbar 上。而 setTimeout(...)这项新函式是用来作为一个 "定时器"。setTimeout(...)能作些什麽事呢?它的主要特性是当某段设定的时间 "跑" 完了之後，便执行某函式。在这个例子中，於 1000 毫秒後 (也就是 1 秒後) 就会执行 erase()。换句话说，当 1 秒结束後 moveover(txt) 的功能就会因 erase()的自动执行而停止。
您已学到了 setTimeout 的功能和如何在 statusbar 中显示文字，接下我将教您如何制作一个在 statusbar 显示的 "跑马灯" (scroller)。 请按下方的按钮看看我做的 scroller。由於 script 需由 server 载入到您的电脑中，因此这要花一点时间，请耐心等一下。
以下是原始码 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors
to your page will "+
"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>
上面 script 用的语法相信大部份您已经懂了。 setTimeout(...) "告诉" 计时器当时间到了就呼叫 scroll()。 如此一来 scroller便会向前移动一步。在 script 的开头有许多计算式，那是用来决定文字开始显示的位置，了不了解并不重要。一旦决定了文字的启始位置，就必需加些空格 (space) 以使文字能显示在正确位置。 在此章一开始我曾提到，此种 scroller 并不是很受欢迎。即使是，也不会持续很久。为什麽呢? 下面我列出几个主要原因: 在网路上有许多这方面的应用，您可以试着找找。我曾经看过有人将 scroller 放在 Homepage 中，这应该不会太难。(译按 : 有兴趣的人可叁考目录中本人所制做的 scroller) |
第 五 集
阵 列(arrays)的 运 用 是 程 式 设 计 中 一 项 种 要 的 技 术。 每 一 种 程 式 语 言 均 以 某 种 特 定 方 式 来 表 示 阵列。 或 许 您 已 了 解 阵 列 在 程 式 设 计 中 的 好 处， 但 翻 遍Netscape所 提 供 的 文 件， 并 没 有 提 及 如 何 使用 阵 列。 这 是 因 为JavaScript并 不 支 援 阵 列。 但 是 现 在 我 将 教 您 如 何 在JavaScript中 使 用 阵 列。
首 先， 阵 列 是 干 用 的?您 可 以 把 它 看 成 一 长 串 的 变 数(variables)。 假 设 您 现 在 需 要 宣 告10个 变 数， 您 可 以 一 个 个 将10个 变 数 宣 告 为 a, b, c ...， 但 当 您 需 要100个 或 更 多 的 变 数 时， 这 种 方 法 将 会变 得 很 麻 烦。 若 您 使 用 一 个 拥 有10个 元 素(elements)的 阵 列(暂 且 命 名 为 'MyArray')来 表 示 这10个变 数， 则 可 以 用 MyArray[1]， MyArray[2]， MyArray[3]...分 别 代 表 第 一,二,三....个 变 数(很 多 程式 语 言 是 从0开 始 当 作 第 一 个 元 素， 但 在JavaScript语 法 中 是 从1开 始)。 因 此 若 您 想 将 第 一 个 元 素 (或 称 变 数)的 值 指 定 为17， 您 只 要 写 成 MyArray[1]=17即 可。 由 此 可 看 出 阵 列 的 功 用 和 一 般 变数 是 相 同 的。 不 光 如 此， 若 您 想 将 所 有 元 素 的 值 均 指 定 为17， 您 只 要 写 一 个 简 单 的 圈(loop)即可:
for (var i=1;i<11;i++) MyArray[i]=17
for- 这 个 指 令 是 告 诉 电 脑 其 後 的 指 令 总 共 要 执 行 几 次。for- 圈 是 从1开 使， 也 就 是 电 脑 会 先 执行MyArray[1]=17。 然 後 i 会 增 加1并 接 着 执 行MyArray[2]=17。 i 每 次 递 增1直 到 i=10为 止。
接 下 来 教 您 如 何 做 阵 列 的 初 始 化(initialization)。 这 个 问 题 曾 在 JavaScript Mailing list中 讨 论 过。 (如 果 您 想 订 阅 mailing list， 您 只 要 在e-mail中 填 入 subscribe javascript-digest 并 寄 到 majordomo @obscure.org 即 可。 接 着 您 每 天 就 会 收 到 一 到 二 个 约20-30kB的 大 档 案， 这 些 档 案 包 括 所 有 来 自 JavaScript- list的 信 件)。
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
您 不 需 要 了 解 这 个 函 式(function)的 意 义， 您 只 要 知 道 怎 麽 用 就 好。 如 果 您 要 宣 告 一 个 拥 有 三 个 元素 的 阵 列， 且 其 值 分 别 指 定 为 17,18,19， 您 只 要 写 成 :
var MyArray= new initArray(17,18,19)。 您也 可 以 用 字 串(strings)当 作 元 素 的 值 :
var heyho= new initArray("This","is","酷")。 因 此 您 不 必 管 元素 值 的 型 式(type)， 即 使 混 着 用 也 行 :
var Mixedup= new initArray(17,"yo",103)。
下 面 我 将 对 一 个 阵 列 'Mixedup' 作 初 始 化， 并 显 示 阵 列 的 内 容 :
<script language="JavaScript" type="text/javascript">
</script> Element No. 1: 17
Element No. 2: yo
Element No. 3: 103
其 原 始 码 如 下:
<script language="JavaScript">
<!-- Hide
var Mixedup= new initArray(17,"yo",103);
document.write("Element No. 1: "+Mixedup[1]+"<br>");
document.write("Element No. 2: "+Mixedup[2]+"<br>");
document.write("Element No. 3: "+Mixedup[3]+"<br>");
// -->
</script>
当 我 昨 天 写 一 个 小 游 戏 时， 我 遇 到 一 个 您 也 可 能 会 碰 到 的 问 题。 当 您 想 清 除 视 窗 或frame中 的 内容 时，Netscape文 件 中 提 到 了 一 个 函 式 可 用-- 'document.clear()'。 但 当 您 将 此 函 式 写 入 网 页 中，它 并 不 会 如 预 期 的 清 除 视 窗 或frame中 的 内 容。 而 且 document.clear()在 各 种 平 台(platform)上 似 都 无 效。Gordon McComb告 诉 我 一 个 清 除 视 窗 或frame中 内 容 的 好 方 法， 您 可 以 试 试 :
document.close();
document.open();
document.write("<P>");
您 不 一 定 要 写 最 後 一 行 document.write("<P>");， 只 有 当 您 想 在 视 窗 中 写 入 某 些 东 西 时 才 需 要 加入 此 行。 上 述 方 法 对frame亦 有 效。
接 下 来 我 们 谈 一 个 可 以 让 您 在 不 同 文 件 之 间 穿 梭 的 语 法-- back() 和 forward() 两 个 函 式。 通 常我 们 在 网 页 中 加 的 back- link和 Netscape- Navigator中 的 "Back键" 功 能 上 并 不 相 同。Netscape- Navigator中 的 "Back键" 是 回 到 您history list中 的 上 一 页。 您 现 在 也 可 利 用JavaScript做 到 相 同 的功 能。 只 要按 下 此 link ， 您 可 以 再 度 回 到 此 页。JavaScript语 法 的 原 始 码如 下 :
<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>
您 也 可 以 用
history.go(-1) 和
history.go(1) 代 替.
第 六 集
第 七 集
输 入 表 单 (form) 对 某 些 Internet 上 的 网 页 而 言 是 很 重 要 的。 通 常 form 的 输 入 内 容 会 被 送 回 server 中 做 处 理。 JavaScript 具 有 确 认 输 入 值 的 功 能， 可 以 事 先 确 保 这 些 值 是 属 於 "合 法 的"，进 而 避 免 将 错 误 的 输 入 值 送 回 server。 首 先 我 将 告 诉 您 如 何 对 form 的 输 入 做 确 认 的 工 作， 再 来我 将 会 提 到 用 JavaScript 将 资 料 送 回 server 的 可 能 性。
咱 们 开 始 吧 ! 我 先 写 一 个 简 单 的 语 法。 在 下 面 我 加 了 两 个 text- 元 件 (element)， 请 将 您 的 大 名 写入 第 一 个 空 格， 并 将 您 的 e-mail address 写 入 第 二 个 空 格。 您 可 在 这 两 个 空 格 中 任 意 输 入 并 按 下按 钮。 您 也 可 以 不 输 入 任 何 东 西 就 按 下 按 钮 试 试 !
对 第 一 个 空 格 而 言， 若 您 没 有 键 入 任 何 东 西， 电 脑 便 会 出 现 一 个 错 误 讯 息， 并 请 您 再 输 入 一 次。当 然， 此 空 格 会 把 任 何 输 入 的 字 串 都 视 为 "合 法 的" 输 入， 它 无 法 辨 认 出 您 输 入 的 名 字 是 正 确 的或 是 胡 的。 即 始 您 输 入 的 是 数 字， 它 也 会 把 此 数 字 当 成 您 的 大 名。 例 如 您 输 入 '17'， 它 将 会显 示 '嗨 ! 17'。
第 二 个 空 格 就 设 计 得 稍 微 复 杂 一 点 了。 您 可 试 着 输 入 一 个 简 单 的 字 串 - 例 如 您 的 大 名， 它 将 会显 示 错 误 讯 息， 并 请 您 再 输 入 一 次 (除 非 您 输 入 的 字 串 含 有 @ ...)。 这 个 空 格 的 确 认 标 准 是 检 视您 输 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 输 入 一 个 @， 它 也 会 被 视 为 合 法 的 输 入 --- 虽 然 这 也 不 是正 确 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ ， 因 此 对 e-mail address 输 入 值做 此 种 确 认 工 作 是 很 适 合 的。
请 输 入 您 的 e-mail address :
接 下 来 看 看 上 述 功 能 的 原 始 码 吧 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
</body>
先 看 看 body- 之 後 的 HTML 语 法。 我 们 嵌 入 了 两 个 text 元 件 和 两 个 按 钮。 第 一 个 按 钮 呼 叫 test1(...)， 第 二 个 按 钮 呼 叫 test2(...)。 this.form这 个 变 数 会 将 此 form 的 名 字 (在 此 例 中 就 是 first) 传 给 函 式 (function)， 以 便 能 正 确 将 元 件 "定 址" (address)。
test1(form) 的 功 用 在 於 检 查 您 是 否 输 入 字 串 (亦 即 检 查 是 否 为 "空 字 串") ? 此 项 工 作 是 由 if(form.text1.value == "")... 所 执 行。 'form' 这 个 变 数 将 会 接 收 由 'this.form' 所 传 来 的 值。 但 我 们如 何 在 test1(...) 中 抓 取 我 们 所 输 入 的 字 串 呢?您 可 利 用 'value' 这 个 变 数 再 加 上 'form.text1' 来 抓 所输 入 的 字 串。 然 後 将 它 和 " " 比 较， 检 查 是 否 为 "空 字 串"。 若 是 "空 字 串" 则 表 示 并 无 输 入 任 何东 西， 那 麽 Netscape 将 会 出 现 警 告 并 要 求 您 再 输 入 一 次。 若 test1(...) 检 查 结 果 并 非 "空 字 串"，则 会 出 现 "您 已 输 入 完 成 !" 的 讯 息。 请 注 意， 即 使 只 输 入 一 个 空 白 (space)， test1(...)也 会 将 之视 为 合 法 输 入。 当 然， 您 也 可 以 略 施 小 技 来 排 除 上 述 可 能 性， 我 相 信 这 很 容 易。
现 在 请 看 test2(form)。 在 此 函 式 中 我 们 利 用 相 同 的 方 法 来 检 测 输 入 值 是 否 为 空 字 串， 但 是 我 在 if- 指 令 中 加 入 了 额 外 的 检 测 功 能。 || 这 个 符 号 代 表 OR 运 算 子 (operator)， 您 可 在 第 六 章 中 学 习它 的 用 法。
if- 指 令 用 来 检 测 第 一 与 第 二 个 比 较 式 是 否 其 中 之 一 为 "真"?若 有 其 中 之 一 为 "真"， 则 整 个 if- 指令 即 为 "真"， 如 此 便 会 执 行 其 後 的 指 令。 换 句 话 说， 若 您 没 有 输 入 任 何 字 串 或 您 输 入 的 字 串 中没 有 包 含 '@'， 均 会 被 视 为 "不 合 法" 输 入。
您 知 到 有 几 种 方 法 可 用 来 送 出 form 的 内 容 吗?最 简 单 的 方 法 就 是 利 用 e-mail 来 送 出 form 的 内容。 我 下 面 介 绍 的 方 法 就 是 属 於 这 一 种。 若 您 不 想 利 用 e-mail 来 送 出 form 的 内 容 且 想 让 server 能 自 动 处 理 form 的 输 入 值， 此 时 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 个 类 似 Yahoo 可 以 让使 用 者 迅 速 得 到 结 果 的 搜 寻 引 擎 (search engine)， 您 就 必 须 使 用 CGI。 如 此 一 来 使 用 者 才 不 需 等待 系 统 管 理 者 处 理 form 的 输 入 值， 而 可 由 server 自 动 处 理 并 迅 速 将 处 理 结 果 报 告 给 使 用 者。目 前 JavaScript 无 法 达 到 此 种 功 能。 即 使 您 想 制 做 一 个 "访 客 签 名 簿" (guestbook)， 也 不 可 能 利用 JavaScript 来 叫 server 自 动 将 资 料 加 入 网 页 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一个 利 用 e-mail 传 送 使 用 者 资 料 的 guestbook， 只 是 您 需 以 手 动 (manual) 方 式 来 处 理 使 用 者 所 传 来的 资 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 来 的 资 料 的 话， 这 也 未 尝 不 可。
以 下 语 法 只 使 用 到 普 通 的 HTML 语 法， 并 不 需 用 到 JavaScript ! 只 有 当 您 想 在 资 料 送 出 前 做 一些 确 认 工 作 的 话， 才 需 用 到 JavaScript。 虽 然 目 前 有 些 浏 览 器 无 法 使 用 mailto- 这 项 指 令， 我 相信 较 新 版 的 浏 览 器 都 会 支 援 这 个 指 令。
<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 欢 我 的 网 页 吗 ?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 点 也 不 喜 欢。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简 直 浪 费 我 的 时 间。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">这 简 直 是 Net 上 最 烂 的 站 台。<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
上 述 语 法 可 藉 由 e-mail 收 到 使 用 者 对 您 网 页 的 观 感。 唯 一 的 困 扰 是 您 可 能 会 收 到 内 容 类 似 密 语 (cryptic) 的 mail。 mail 内 容 的 空 格 (space) 有 时 会 以 '+' 代 替， 有 时 会 以 '%20' 代 替。 看+起+来+ 就+像+这+样。 我 相 信 网 路 上 应 有 某 种 程 式 可 将 收 到 的 mail 转 换 成 "可 读" 的 语 句。
另 外 有 一 种 不 错 的 应 用 可 使 您 的 表 单 输 入 更 具 "亲 和 性" (user-friendly)。 您 可 以 指 定 一 开 始 先"定焦" (focus)於 哪 个 元 件 (element， 简 单 的 说 就 是 输 入 项)。 或 是 您 可 让 浏 览 器 "定 焦" 於 使 用 者 输入 错 误 的 表 单。 换 句 话 说， 浏 览 器 将 会 把 mouse 的 游 标 放 在 您 "定 焦" 的 元 件 上， 如 此 一 来 使 用者 便 不 需 在 输 入 字 串 之 前 按 一 下 mouse。 请 看 这 项 功 能 的 原 始 码 :
function setfocus() {
document.first.text1.focus();
return;
}
这 项 语 法 是 将 "定 焦" 放 在 第 一 个 text- 元 件 上 (以 本 章 为 例， 就 是 在 "请 输 入 您 的 大 名" 的 空 格 中有 游 标 在 闪 烁)。 您 必 需 在 语 法 中 指 定 您 想 "定 焦" 的 表 单 名 字 (以 本 章 为 例， 就 是 first) 和 元 件的 名 字 (以 本 章 为 例， 就 是 text1)。 若 您 在 一 开 始 载 入 网 页 时 就 想 "定 焦" 於 某 个 元 件 上， 只 要在 <body>- tag 中 利 用 onLoad- 即 可 :
<body onLoad="setfocus()">
第 五 集
阵 列(arrays)的 运 用 是 程 式 设 计 中 一 项 种 要 的 技 术。 每 一 种 程 式 语 言 均 以 某 种 特 定 方 式 来 表 示 阵列。 或 许 您 已 了 解 阵 列 在 程 式 设 计 中 的 好 处， 但 翻 遍Netscape所 提 供 的 文 件， 并 没 有 提 及 如 何 使用 阵 列。 这 是 因 为JavaScript并 不 支 援 阵 列。 但 是 现 在 我 将 教 您 如 何 在JavaScript中 使 用 阵 列。
首 先， 阵 列 是 干 用 的?您 可 以 把 它 看 成 一 长 串 的 变 数(variables)。 假 设 您 现 在 需 要 宣 告10个 变 数， 您 可 以 一 个 个 将10个 变 数 宣 告 为 a, b, c ...， 但 当 您 需 要100个 或 更 多 的 变 数 时， 这 种 方 法 将 会变 得 很 麻 烦。 若 您 使 用 一 个 拥 有10个 元 素(elements)的 阵 列(暂 且 命 名 为 'MyArray')来 表 示 这10个变 数， 则 可 以 用 MyArray[1]， MyArray[2]， MyArray[3]...分 别 代 表 第 一,二,三....个 变 数(很 多 程式 语 言 是 从0开 始 当 作 第 一 个 元 素， 但 在JavaScript语 法 中 是 从1开 始)。 因 此 若 您 想 将 第 一 个 元 素 (或 称 变 数)的 值 指 定 为17， 您 只 要 写 成 MyArray[1]=17即 可。 由 此 可 看 出 阵 列 的 功 用 和 一 般 变数 是 相 同 的。 不 光 如 此， 若 您 想 将 所 有 元 素 的 值 均 指 定 为17， 您 只 要 写 一 个 简 单 的 圈(loop)即可:
for (var i=1;i<11;i++) MyArray[i]=17
for- 这 个 指 令 是 告 诉 电 脑 其 後 的 指 令 总 共 要 执 行 几 次。for- 圈 是 从1开 使， 也 就 是 电 脑 会 先 执行MyArray[1]=17。 然 後 i 会 增 加1并 接 着 执 行MyArray[2]=17。 i 每 次 递 增1直 到 i=10为 止。
接 下 来 教 您 如 何 做 阵 列 的 初 始 化(initialization)。 这 个 问 题 曾 在 JavaScript Mailing list中 讨 论 过。 (如 果 您 想 订 阅 mailing list， 您 只 要 在e-mail中 填 入 subscribe javascript-digest 并 寄 到 majordomo @obscure.org 即 可。 接 着 您 每 天 就 会 收 到 一 到 二 个 约20-30kB的 大 档 案， 这 些 档 案 包 括 所 有 来 自 JavaScript- list的 信 件)。
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
您 不 需 要 了 解 这 个 函 式(function)的 意 义， 您 只 要 知 道 怎 麽 用 就 好。 如 果 您 要 宣 告 一 个 拥 有 三 个 元素 的 阵 列， 且 其 值 分 别 指 定 为 17,18,19， 您 只 要 写 成 :
var MyArray= new initArray(17,18,19)。 您也 可 以 用 字 串(strings)当 作 元 素 的 值 :
var heyho= new initArray("This","is","酷")。 因 此 您 不 必 管 元素 值 的 型 式(type)， 即 使 混 着 用 也 行 :
var Mixedup= new initArray(17,"yo",103)。
下 面 我 将 对 一 个 阵 列 'Mixedup' 作 初 始 化， 并 显 示 阵 列 的 内 容 :
<script language="JavaScript" type="text/javascript">
</script> Element No. 1: 17
Element No. 2: yo
Element No. 3: 103
其 原 始 码 如 下:
<script language="JavaScript">
<!-- Hide
var Mixedup= new initArray(17,"yo",103);
document.write("Element No. 1: "+Mixedup[1]+"<br>");
document.write("Element No. 2: "+Mixedup[2]+"<br>");
document.write("Element No. 3: "+Mixedup[3]+"<br>");
// -->
</script>
当 我 昨 天 写 一 个 小 游 戏 时， 我 遇 到 一 个 您 也 可 能 会 碰 到 的 问 题。 当 您 想 清 除 视 窗 或frame中 的 内容 时，Netscape文 件 中 提 到 了 一 个 函 式 可 用-- 'document.clear()'。 但 当 您 将 此 函 式 写 入 网 页 中，它 并 不 会 如 预 期 的 清 除 视 窗 或frame中 的 内 容。 而 且 document.clear()在 各 种 平 台(platform)上 似 都 无 效。Gordon McComb告 诉 我 一 个 清 除 视 窗 或frame中 内 容 的 好 方 法， 您 可 以 试 试 :
document.close();
document.open();
document.write("<P>");
您 不 一 定 要 写 最 後 一 行 document.write("<P>");， 只 有 当 您 想 在 视 窗 中 写 入 某 些 东 西 时 才 需 要 加入 此 行。 上 述 方 法 对frame亦 有 效。
接 下 来 我 们 谈 一 个 可 以 让 您 在 不 同 文 件 之 间 穿 梭 的 语 法-- back() 和 forward() 两 个 函 式。 通 常我 们 在 网 页 中 加 的 back- link和 Netscape- Navigator中 的 "Back键" 功 能 上 并 不 相 同。Netscape- Navigator中 的 "Back键" 是 回 到 您history list中 的 上 一 页。 您 现 在 也 可 利 用JavaScript做 到 相 同 的功 能。 只 要按 下 此 link ， 您 可 以 再 度 回 到 此 页。JavaScript语 法 的 原 始 码如 下 :
<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>
您 也 可 以 用
history.go(-1) 和
history.go(1) 代 替.
第 六 集
第 七 集
输 入 表 单 (form) 对 某 些 Internet 上 的 网 页 而 言 是 很 重 要 的。 通 常 form 的 输 入 内 容 会 被 送 回 server 中 做 处 理。 JavaScript 具 有 确 认 输 入 值 的 功 能， 可 以 事 先 确 保 这 些 值 是 属 於 "合 法 的"，进 而 避 免 将 错 误 的 输 入 值 送 回 server。 首 先 我 将 告 诉 您 如 何 对 form 的 输 入 做 确 认 的 工 作， 再 来我 将 会 提 到 用 JavaScript 将 资 料 送 回 server 的 可 能 性。
咱 们 开 始 吧 ! 我 先 写 一 个 简 单 的 语 法。 在 下 面 我 加 了 两 个 text- 元 件 (element)， 请 将 您 的 大 名 写入 第 一 个 空 格， 并 将 您 的 e-mail address 写 入 第 二 个 空 格。 您 可 在 这 两 个 空 格 中 任 意 输 入 并 按 下按 钮。 您 也 可 以 不 输 入 任 何 东 西 就 按 下 按 钮 试 试 !
对 第 一 个 空 格 而 言， 若 您 没 有 键 入 任 何 东 西， 电 脑 便 会 出 现 一 个 错 误 讯 息， 并 请 您 再 输 入 一 次。当 然， 此 空 格 会 把 任 何 输 入 的 字 串 都 视 为 "合 法 的" 输 入， 它 无 法 辨 认 出 您 输 入 的 名 字 是 正 确 的或 是 胡 的。 即 始 您 输 入 的 是 数 字， 它 也 会 把 此 数 字 当 成 您 的 大 名。 例 如 您 输 入 '17'， 它 将 会显 示 '嗨 ! 17'。
第 二 个 空 格 就 设 计 得 稍 微 复 杂 一 点 了。 您 可 试 着 输 入 一 个 简 单 的 字 串 - 例 如 您 的 大 名， 它 将 会显 示 错 误 讯 息， 并 请 您 再 输 入 一 次 (除 非 您 输 入 的 字 串 含 有 @ ...)。 这 个 空 格 的 确 认 标 准 是 检 视您 输 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 输 入 一 个 @， 它 也 会 被 视 为 合 法 的 输 入 --- 虽 然 这 也 不 是正 确 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ ， 因 此 对 e-mail address 输 入 值做 此 种 确 认 工 作 是 很 适 合 的。
请 输 入 您 的 e-mail address :
接 下 来 看 看 上 述 功 能 的 原 始 码 吧 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
</body>
先 看 看 body- 之 後 的 HTML 语 法。 我 们 嵌 入 了 两 个 text 元 件 和 两 个 按 钮。 第 一 个 按 钮 呼 叫 test1(...)， 第 二 个 按 钮 呼 叫 test2(...)。 this.form这 个 变 数 会 将 此 form 的 名 字 (在 此 例 中 就 是 first) 传 给 函 式 (function)， 以 便 能 正 确 将 元 件 "定 址" (address)。
test1(form) 的 功 用 在 於 检 查 您 是 否 输 入 字 串 (亦 即 检 查 是 否 为 "空 字 串") ? 此 项 工 作 是 由 if(form.text1.value == "")... 所 执 行。 'form' 这 个 变 数 将 会 接 收 由 'this.form' 所 传 来 的 值。 但 我 们如 何 在 test1(...) 中 抓 取 我 们 所 输 入 的 字 串 呢?您 可 利 用 'value' 这 个 变 数 再 加 上 'form.text1' 来 抓 所输 入 的 字 串。 然 後 将 它 和 " " 比 较， 检 查 是 否 为 "空 字 串"。 若 是 "空 字 串" 则 表 示 并 无 输 入 任 何东 西， 那 麽 Netscape 将 会 出 现 警 告 并 要 求 您 再 输 入 一 次。 若 test1(...) 检 查 结 果 并 非 "空 字 串"，则 会 出 现 "您 已 输 入 完 成 !" 的 讯 息。 请 注 意， 即 使 只 输 入 一 个 空 白 (space)， test1(...)也 会 将 之视 为 合 法 输 入。 当 然， 您 也 可 以 略 施 小 技 来 排 除 上 述 可 能 性， 我 相 信 这 很 容 易。
现 在 请 看 test2(form)。 在 此 函 式 中 我 们 利 用 相 同 的 方 法 来 检 测 输 入 值 是 否 为 空 字 串， 但 是 我 在 if- 指 令 中 加 入 了 额 外 的 检 测 功 能。 || 这 个 符 号 代 表 OR 运 算 子 (operator)， 您 可 在 第 六 章 中 学 习它 的 用 法。
if- 指 令 用 来 检 测 第 一 与 第 二 个 比 较 式 是 否 其 中 之 一 为 "真"?若 有 其 中 之 一 为 "真"， 则 整 个 if- 指令 即 为 "真"， 如 此 便 会 执 行 其 後 的 指 令。 换 句 话 说， 若 您 没 有 输 入 任 何 字 串 或 您 输 入 的 字 串 中没 有 包 含 '@'， 均 会 被 视 为 "不 合 法" 输 入。
您 知 到 有 几 种 方 法 可 用 来 送 出 form 的 内 容 吗?最 简 单 的 方 法 就 是 利 用 e-mail 来 送 出 form 的 内容。 我 下 面 介 绍 的 方 法 就 是 属 於 这 一 种。 若 您 不 想 利 用 e-mail 来 送 出 form 的 内 容 且 想 让 server 能 自 动 处 理 form 的 输 入 值， 此 时 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 个 类 似 Yahoo 可 以 让使 用 者 迅 速 得 到 结 果 的 搜 寻 引 擎 (search engine)， 您 就 必 须 使 用 CGI。 如 此 一 来 使 用 者 才 不 需 等待 系 统 管 理 者 处 理 form 的 输 入 值， 而 可 由 server 自 动 处 理 并 迅 速 将 处 理 结 果 报 告 给 使 用 者。目 前 JavaScript 无 法 达 到 此 种 功 能。 即 使 您 想 制 做 一 个 "访 客 签 名 簿" (guestbook)， 也 不 可 能 利用 JavaScript 来 叫 server 自 动 将 资 料 加 入 网 页 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一个 利 用 e-mail 传 送 使 用 者 资 料 的 guestbook， 只 是 您 需 以 手 动 (manual) 方 式 来 处 理 使 用 者 所 传 来的 资 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 来 的 资 料 的 话， 这 也 未 尝 不 可。
以 下 语 法 只 使 用 到 普 通 的 HTML 语 法， 并 不 需 用 到 JavaScript ! 只 有 当 您 想 在 资 料 送 出 前 做 一些 确 认 工 作 的 话， 才 需 用 到 JavaScript。 虽 然 目 前 有 些 浏 览 器 无 法 使 用 mailto- 这 项 指 令， 我 相信 较 新 版 的 浏 览 器 都 会 支 援 这 个 指 令。
<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 欢 我 的 网 页 吗 ?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 点 也 不 喜 欢。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简 直 浪 费 我 的 时 间。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">这 简 直 是 Net 上 最 烂 的 站 台。<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
上 述 语 法 可 藉 由 e-mail 收 到 使 用 者 对 您 网 页 的 观 感。 唯 一 的 困 扰 是 您 可 能 会 收 到 内 容 类 似 密 语 (cryptic) 的 mail。 mail 内 容 的 空 格 (space) 有 时 会 以 '+' 代 替， 有 时 会 以 '%20' 代 替。 看+起+来+ 就+像+这+样。 我 相 信 网 路 上 应 有 某 种 程 式 可 将 收 到 的 mail 转 换 成 "可 读" 的 语 句。
另 外 有 一 种 不 错 的 应 用 可 使 您 的 表 单 输 入 更 具 "亲 和 性" (user-friendly)。 您 可 以 指 定 一 开 始 先"定焦" (focus)於 哪 个 元 件 (element， 简 单 的 说 就 是 输 入 项)。 或 是 您 可 让 浏 览 器 "定 焦" 於 使 用 者 输入 错 误 的 表 单。 换 句 话 说， 浏 览 器 将 会 把 mouse 的 游 标 放 在 您 "定 焦" 的 元 件 上， 如 此 一 来 使 用者 便 不 需 在 输 入 字 串 之 前 按 一 下 mouse。 请 看 这 项 功 能 的 原 始 码 :
function setfocus() {
document.first.text1.focus();
return;
}
这 项 语 法 是 将 "定 焦" 放 在 第 一 个 text- 元 件 上 (以 本 章 为 例， 就 是 在 "请 输 入 您 的 大 名" 的 空 格 中有 游 标 在 闪 烁)。 您 必 需 在 语 法 中 指 定 您 想 "定 焦" 的 表 单 名 字 (以 本 章 为 例， 就 是 first) 和 元 件的 名 字 (以 本 章 为 例， 就 是 text1)。 若 您 在 一 开 始 载 入 网 页 时 就 想 "定 焦" 於 某 个 元 件 上， 只 要在 <body>- tag 中 利 用 onLoad- 即 可 :
<body onLoad="setfocus()">
第 七 集
输 入 表 单 (form) 对 某 些 Internet 上 的 网 页 而 言 是 很 重 要 的。 通 常 form 的 输 入 内 容 会 被 送 回 server 中 做 处 理。 JavaScript 具 有 确 认 输 入 值 的 功 能， 可 以 事 先 确 保 这 些 值 是 属 於 "合 法 的"，进 而 避 免 将 错 误 的 输 入 值 送 回 server。 首 先 我 将 告 诉 您 如 何 对 form 的 输 入 做 确 认 的 工 作， 再 来我 将 会 提 到 用 JavaScript 将 资 料 送 回 server 的 可 能 性。
咱 们 开 始 吧 ! 我 先 写 一 个 简 单 的 语 法。 在 下 面 我 加 了 两 个 text- 元 件 (element)， 请 将 您 的 大 名 写入 第 一 个 空 格， 并 将 您 的 e-mail address 写 入 第 二 个 空 格。 您 可 在 这 两 个 空 格 中 任 意 输 入 并 按 下按 钮。 您 也 可 以 不 输 入 任 何 东 西 就 按 下 按 钮 试 试 !
对 第 一 个 空 格 而 言， 若 您 没 有 键 入 任 何 东 西， 电 脑 便 会 出 现 一 个 错 误 讯 息， 并 请 您 再 输 入 一 次。当 然， 此 空 格 会 把 任 何 输 入 的 字 串 都 视 为 "合 法 的" 输 入， 它 无 法 辨 认 出 您 输 入 的 名 字 是 正 确 的或 是 胡 的。 即 始 您 输 入 的 是 数 字， 它 也 会 把 此 数 字 当 成 您 的 大 名。 例 如 您 输 入 '17'， 它 将 会显 示 '嗨 ! 17'。
第 二 个 空 格 就 设 计 得 稍 微 复 杂 一 点 了。 您 可 试 着 输 入 一 个 简 单 的 字 串 - 例 如 您 的 大 名， 它 将 会显 示 错 误 讯 息， 并 请 您 再 输 入 一 次 (除 非 您 输 入 的 字 串 含 有 @ ...)。 这 个 空 格 的 确 认 标 准 是 检 视您 输 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 输 入 一 个 @， 它 也 会 被 视 为 合 法 的 输 入 --- 虽 然 这 也 不 是正 确 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ ， 因 此 对 e-mail address 输 入 值做 此 种 确 认 工 作 是 很 适 合 的。
请 输 入 您 的 e-mail address :
接 下 来 看 看 上 述 功 能 的 原 始 码 吧 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
</body>
先 看 看 body- 之 後 的 HTML 语 法。 我 们 嵌 入 了 两 个 text 元 件 和 两 个 按 钮。 第 一 个 按 钮 呼 叫 test1(...)， 第 二 个 按 钮 呼 叫 test2(...)。 this.form这 个 变 数 会 将 此 form 的 名 字 (在 此 例 中 就 是 first) 传 给 函 式 (function)， 以 便 能 正 确 将 元 件 "定 址" (address)。
test1(form) 的 功 用 在 於 检 查 您 是 否 输 入 字 串 (亦 即 检 查 是 否 为 "空 字 串") ? 此 项 工 作 是 由 if(form.text1.value == "")... 所 执 行。 'form' 这 个 变 数 将 会 接 收 由 'this.form' 所 传 来 的 值。 但 我 们如 何 在 test1(...) 中 抓 取 我 们 所 输 入 的 字 串 呢?您 可 利 用 'value' 这 个 变 数 再 加 上 'form.text1' 来 抓 所输 入 的 字 串。 然 後 将 它 和 " " 比 较， 检 查 是 否 为 "空 字 串"。 若 是 "空 字 串" 则 表 示 并 无 输 入 任 何东 西， 那 麽 Netscape 将 会 出 现 警 告 并 要 求 您 再 输 入 一 次。 若 test1(...) 检 查 结 果 并 非 "空 字 串"，则 会 出 现 "您 已 输 入 完 成 !" 的 讯 息。 请 注 意， 即 使 只 输 入 一 个 空 白 (space)， test1(...)也 会 将 之视 为 合 法 输 入。 当 然， 您 也 可 以 略 施 小 技 来 排 除 上 述 可 能 性， 我 相 信 这 很 容 易。
现 在 请 看 test2(form)。 在 此 函 式 中 我 们 利 用 相 同 的 方 法 来 检 测 输 入 值 是 否 为 空 字 串， 但 是 我 在 if- 指 令 中 加 入 了 额 外 的 检 测 功 能。 || 这 个 符 号 代 表 OR 运 算 子 (operator)， 您 可 在 第 六 章 中 学 习它 的 用 法。
if- 指 令 用 来 检 测 第 一 与 第 二 个 比 较 式 是 否 其 中 之 一 为 "真"?若 有 其 中 之 一 为 "真"， 则 整 个 if- 指令 即 为 "真"， 如 此 便 会 执 行 其 後 的 指 令。 换 句 话 说， 若 您 没 有 输 入 任 何 字 串 或 您 输 入 的 字 串 中没 有 包 含 '@'， 均 会 被 视 为 "不 合 法" 输 入。
您 知 到 有 几 种 方 法 可 用 来 送 出 form 的 内 容 吗?最 简 单 的 方 法 就 是 利 用 e-mail 来 送 出 form 的 内容。 我 下 面 介 绍 的 方 法 就 是 属 於 这 一 种。 若 您 不 想 利 用 e-mail 来 送 出 form 的 内 容 且 想 让 server 能 自 动 处 理 form 的 输 入 值， 此 时 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 个 类 似 Yahoo 可 以 让使 用 者 迅 速 得 到 结 果 的 搜 寻 引 擎 (search engine)， 您 就 必 须 使 用 CGI。 如 此 一 来 使 用 者 才 不 需 等待 系 统 管 理 者 处 理 form 的 输 入 值， 而 可 由 server 自 动 处 理 并 迅 速 将 处 理 结 果 报 告 给 使 用 者。目 前 JavaScript 无 法 达 到 此 种 功 能。 即 使 您 想 制 做 一 个 "访 客 签 名 簿" (guestbook)， 也 不 可 能 利用 JavaScript 来 叫 server 自 动 将 资 料 加 入 网 页 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一个 利 用 e-mail 传 送 使 用 者 资 料 的 guestbook， 只 是 您 需 以 手 动 (manual) 方 式 来 处 理 使 用 者 所 传 来的 资 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 来 的 资 料 的 话， 这 也 未 尝 不 可。
以 下 语 法 只 使 用 到 普 通 的 HTML 语 法， 并 不 需 用 到 JavaScript ! 只 有 当 您 想 在 资 料 送 出 前 做 一些 确 认 工 作 的 话， 才 需 用 到 JavaScript。 虽 然 目 前 有 些 浏 览 器 无 法 使 用 mailto- 这 项 指 令， 我 相信 较 新 版 的 浏 览 器 都 会 支 援 这 个 指 令。
<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 欢 我 的 网 页 吗 ?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 点 也 不 喜 欢。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简 直 浪 费 我 的 时 间。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">这 简 直 是 Net 上 最 烂 的 站 台。<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
上 述 语 法 可 藉 由 e-mail 收 到 使 用 者 对 您 网 页 的 观 感。 唯 一 的 困 扰 是 您 可 能 会 收 到 内 容 类 似 密 语 (cryptic) 的 mail。 mail 内 容 的 空 格 (space) 有 时 会 以 '+' 代 替， 有 时 会 以 '%20' 代 替。 看+起+来+ 就+像+这+样。 我 相 信 网 路 上 应 有 某 种 程 式 可 将 收 到 的 mail 转 换 成 "可 读" 的 语 句。
另 外 有 一 种 不 错 的 应 用 可 使 您 的 表 单 输 入 更 具 "亲 和 性" (user-friendly)。 您 可 以 指 定 一 开 始 先"定焦" (focus)於 哪 个 元 件 (element， 简 单 的 说 就 是 输 入 项)。 或 是 您 可 让 浏 览 器 "定 焦" 於 使 用 者 输入 错 误 的 表 单。 换 句 话 说， 浏 览 器 将 会 把 mouse 的 游 标 放 在 您 "定 焦" 的 元 件 上， 如 此 一 来 使 用者 便 不 需 在 输 入 字 串 之 前 按 一 下 mouse。 请 看 这 项 功 能 的 原 始 码 :
function setfocus() {
document.first.text1.focus();
return;
}
这 项 语 法 是 将 "定 焦" 放 在 第 一 个 text- 元 件 上 (以 本 章 为 例， 就 是 在 "请 输 入 您 的 大 名" 的 空 格 中有 游 标 在 闪 烁)。 您 必 需 在 语 法 中 指 定 您 想 "定 焦" 的 表 单 名 字 (以 本 章 为 例， 就 是 first) 和 元 件的 名 字 (以 本 章 为 例， 就 是 text1)。 若 您 在 一 开 始 载 入 网 页 时 就 想 "定 焦" 於 某 个 元 件 上， 只 要在 <body>- tag 中 利 用 onLoad- 即 可 :
<body onLoad="setfocus()">
第 七 集
输 入 表 单 (form) 对 某 些 Internet 上 的 网 页 而 言 是 很 重 要 的。 通 常 form 的 输 入 内 容 会 被 送 回 server 中 做 处 理。 JavaScript 具 有 确 认 输 入 值 的 功 能， 可 以 事 先 确 保 这 些 值 是 属 於 "合 法 的"，进 而 避 免 将 错 误 的 输 入 值 送 回 server。 首 先 我 将 告 诉 您 如 何 对 form 的 输 入 做 确 认 的 工 作， 再 来我 将 会 提 到 用 JavaScript 将 资 料 送 回 server 的 可 能 性。
咱 们 开 始 吧 ! 我 先 写 一 个 简 单 的 语 法。 在 下 面 我 加 了 两 个 text- 元 件 (element)， 请 将 您 的 大 名 写入 第 一 个 空 格， 并 将 您 的 e-mail address 写 入 第 二 个 空 格。 您 可 在 这 两 个 空 格 中 任 意 输 入 并 按 下按 钮。 您 也 可 以 不 输 入 任 何 东 西 就 按 下 按 钮 试 试 !
对 第 一 个 空 格 而 言， 若 您 没 有 键 入 任 何 东 西， 电 脑 便 会 出 现 一 个 错 误 讯 息， 并 请 您 再 输 入 一 次。当 然， 此 空 格 会 把 任 何 输 入 的 字 串 都 视 为 "合 法 的" 输 入， 它 无 法 辨 认 出 您 输 入 的 名 字 是 正 确 的或 是 胡 的。 即 始 您 输 入 的 是 数 字， 它 也 会 把 此 数 字 当 成 您 的 大 名。 例 如 您 输 入 '17'， 它 将 会显 示 '嗨 ! 17'。第 二 个 空 格 就 设 计 得 稍 微 复 杂 一 点 了。 您 可 试 着 输 入 一 个 简 单 的 字 串 - 例 如 您 的 大 名， 它 将 会显 示 错 误 讯 息， 并 请 您 再 输 入 一 次 (除 非 您 输 入 的 字 串 含 有 @ ...)。 这 个 空 格 的 确 认 标 准 是 检 视您 输 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 输 入 一 个 @， 它 也 会 被 视 为 合 法 的 输 入 --- 虽 然 这 也 不 是正 确 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ ， 因 此 对 e-mail address 输 入 值做 此 种 确 认 工 作 是 很 适 合 的。
请 输 入 您 的 e-mail address :
接 下 来 看 看 上 述 功 能 的 原 始 码 吧 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
</body>
先 看 看 body- 之 後 的 HTML 语 法。 我 们 嵌 入 了 两 个 text 元 件 和 两 个 按 钮。 第 一 个 按 钮 呼 叫 test1(...)， 第 二 个 按 钮 呼 叫 test2(...)。 this.form这 个 变 数 会 将 此 form 的 名 字 (在 此 例 中 就 是 first) 传 给 函 式 (function)， 以 便 能 正 确 将 元 件 "定 址" (address)。
test1(form) 的 功 用 在 於 检 查 您 是 否 输 入 字 串 (亦 即 检 查 是 否 为 "空 字 串") ? 此 项 工 作 是 由 if(form.text1.value == "")... 所 执 行。 'form' 这 个 变 数 将 会 接 收 由 'this.form' 所 传 来 的 值。 但 我 们如 何 在 test1(...) 中 抓 取 我 们 所 输 入 的 字 串 呢?您 可 利 用 'value' 这 个 变 数 再 加 上 'form.text1' 来 抓 所输 入 的 字 串。 然 後 将 它 和 " " 比 较， 检 查 是 否 为 "空 字 串"。 若 是 "空 字 串" 则 表 示 并 无 输 入 任 何东 西， 那 麽 Netscape 将 会 出 现 警 告 并 要 求 您 再 输 入 一 次。 若 test1(...) 检 查 结 果 并 非 "空 字 串"，则 会 出 现 "您 已 输 入 完 成 !" 的 讯 息。 请 注 意， 即 使 只 输 入 一 个 空 白 (space)， test1(...)也 会 将 之视 为 合 法 输 入。 当 然， 您 也 可 以 略 施 小 技 来 排 除 上 述 可 能 性， 我 相 信 这 很 容 易。
现 在 请 看 test2(form)。 在 此 函 式 中 我 们 利 用 相 同 的 方 法 来 检 测 输 入 值 是 否 为 空 字 串， 但 是 我 在 if- 指 令 中 加 入 了 额 外 的 检 测 功 能。 || 这 个 符 号 代 表 OR 运 算 子 (operator)， 您 可 在 第 六 章 中 学 习它 的 用 法。
if- 指 令 用 来 检 测 第 一 与 第 二 个 比 较 式 是 否 其 中 之 一 为 "真"?若 有 其 中 之 一 为 "真"， 则 整 个 if- 指令 即 为 "真"， 如 此 便 会 执 行 其 後 的 指 令。 换 句 话 说， 若 您 没 有 输 入 任 何 字 串 或 您 输 入 的 字 串 中没 有 包 含 '@'， 均 会 被 视 为 "不 合 法" 输 入。
您 知 到 有 几 种 方 法 可 用 来 送 出 form 的 内 容 吗?最 简 单 的 方 法 就 是 利 用 e-mail 来 送 出 form 的 内容。 我 下 面 介 绍 的 方 法 就 是 属 於 这 一 种。 若 您 不 想 利 用 e-mail 来 送 出 form 的 内 容 且 想 让 server 能 自 动 处 理 form 的 输 入 值， 此 时 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 个 类 似 Yahoo 可 以 让使 用 者 迅 速 得 到 结 果 的 搜 寻 引 擎 (search engine)， 您 就 必 须 使 用 CGI。 如 此 一 来 使 用 者 才 不 需 等待 系 统 管 理 者 处 理 form 的 输 入 值， 而 可 由 server 自 动 处 理 并 迅 速 将 处 理 结 果 报 告 给 使 用 者。目 前 JavaScript 无 法 达 到 此 种 功 能。 即 使 您 想 制 做 一 个 "访 客 签 名 簿" (guestbook)， 也 不 可 能 利用 JavaScript 来 叫 server 自 动 将 资 料 加 入 网 页 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一个 利 用 e-mail 传 送 使 用 者 资 料 的 guestbook， 只 是 您 需 以 手 动 (manual) 方 式 来 处 理 使 用 者 所 传 来的 资 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 来 的 资 料 的 话， 这 也 未 尝 不 可。
以 下 语 法 只 使 用 到 普 通 的 HTML 语 法， 并 不 需 用 到 JavaScript ! 只 有 当 您 想 在 资 料 送 出 前 做 一些 确 认 工 作 的 话， 才 需 用 到 JavaScript。 虽 然 目 前 有 些 浏 览 器 无 法 使 用 mailto- 这 项 指 令， 我 相信 较 新 版 的 浏 览 器 都 会 支 援 这 个 指 令。
<FORM METHOD=POST ACTION="mailto:your_email@goes.here"> <H3>您 喜 欢 我 的 网 页 吗 ?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 点 也 不 喜 欢。<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简 直 浪 费 我 的 时 间。<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">这 简 直 是 Net 上 最 烂 的 站 台。<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send"> </FORM>上 述 语 法 可 藉 由 e-mail 收 到 使 用 者 对 您 网 页 的 观 感。 唯 一 的 困 扰 是 您 可 能 会 收 到 内 容 类 似 密 语 (cryptic) 的 mail。 mail 内 容 的 空 格 (space) 有 时 会 以 '+' 代 替， 有 时 会 以 '%20' 代 替。 看+起+来+ 就+像+这+样。 我 相 信 网 路 上 应 有 某 种 程 式 可 将 收 到 的 mail 转 换 成 "可 读" 的 语 句。
另 外 有 一 种 不 错 的 应 用 可 使 您 的 表 单 输 入 更 具 "亲 和 性" (user-friendly)。 您 可 以 指 定 一 开 始 先"定焦" (focus)於 哪 个 元 件 (element， 简 单 的 说 就 是 输 入 项)。 或 是 您 可 让 浏 览 器 "定 焦" 於 使 用 者 输入 错 误 的 表 单。 换 句 话 说， 浏 览 器 将 会 把 mouse 的 游 标 放 在 您 "定 焦" 的 元 件 上， 如 此 一 来 使 用者 便 不 需 在 输 入 字 串 之 前 按 一 下 mouse。 请 看 这 项 功 能 的 原 始 码 :
function setfocus() {
document.first.text1.focus();
return;
}
这 项 语 法 是 将 "定 焦" 放 在 第 一 个 text- 元 件 上 (以 本 章 为 例， 就 是 在 "请 输 入 您 的 大 名" 的 空 格 中有 游 标 在 闪 烁)。 您 必 需 在 语 法 中 指 定 您 想 "定 焦" 的 表 单 名 字 (以 本 章 为 例， 就 是 first) 和 元 件的 名 字 (以 本 章 为 例， 就 是 text1)。 若 您 在 一 开 始 载 入 网 页 时 就 想 "定 焦" 於 某 个 元 件 上， 只 要在 <body>- tag 中 利 用 onLoad- 即 可 :
<body onLoad="setfocus()">
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
