国华软件 eTextWizard.com

About eTextWizard
| 首页 | 产品 | 下载 | 帮助 | | | 注册

更新信息

产品信息

软件下载

帮助文件

常见问题

我要注册

意见反馈

国华软件 Guohua Soft

电子文档处理器（eTextWizard）：
中文名称： | 电子文档处理器
英文名称： | eTextWizard
软件授权： | 共享软件（未注册版有功能限制）
注册费用： | 标准版 （一次注册，终生免费升级）
 | 中国大陆用户： 人民币 35 元
 | 其他国家或地区用户： 美元 US$ 25 元
应用类别： | chm帮助文件制作，help帮助文件制作，文件处理，文档格式转换，内码转换，电子书制作（ebookmaker）
使用平台： | WIN95/WIN98，WIN2000，Win XP
发布公司： | 国华软件（Guohua Soft）
语言支持 | 程序支持多国语言，内置中文简体、中文繁体、英文
软件作者： | 冯国华
作者信箱： | webmaster@etextwizard.com
作者主页： | http://www.eTextWizard.com
软件简介： | “电子文档处理器”是一个文档批量处理、批量格式转换工具集；help和chm帮助文件快速制作软件；电子书批量制作工具；批量chm反编译工具；内码转换、索引生成、批量改名软件。支持子目录及光盘直接操作，自动化程度高。“北极星书库”所有help和chm格式电子书均由“电子文档处理器”格式化后批量生成。欢迎使用“电子文档处理器”这一简单快捷的chm制作软件、help制作软件，“易上手”的特点让你自己动手轻松制作chm文件和help文件。 主要产品功能： 1、文本文件批量转换为帮助文件（txt2chm:chm帮助文件制作软件，txt2help：help帮助文件制作工具），用户无须学习任何指令就可以快速地制作自己的电子书或chm帮助文件或具有复杂目录导航系统的CHM帮助文件； 2、网页文件转为文本文件（htm2txt）； 3、纯文本文件转换为微软网页帮助文件（htm2chm：chm帮助文件制作工具）； 4、VB源文件转为网页文件（vb2html）； 5、文件索引生成器（index maker）； 6、繁简体互相转换（gb2big，big52gb），支持剪贴板操作； 7、纯文本文件批量转换为网页文件，且自动生成上下文链接及目录（txt2html），支持用户自定义模版操作； 8、批量反编译CHM：迅速得到CHM电子书的全部源文件； 9、文件快速改名工具，大量方便的体贴用户的选项； 这里查看 软件的 详细功能列表>>
开发目的： | 相信各位在上网一段时间后，硬盘里一定积攒了大量的电子文本，如：技巧集锦、教程、技术文章、编程指南、小说、散文、传记等等，这些精彩文件平时大量占用你的硬盘空间而且难以管理，一到用的时候，怎麽也找不到；读起来也很费力，一部《三国》你至少要打开一百二十个文本文件；而且第二天也找不到昨天读到那里了，你说急人不急人！ 终於有一天想把他们作成帮助文件或电子书，但是，面对某个目录下的几千个文本文件，才发现所谓的“所见即所得”的帮助文件制作软件竟然要一个又一个地“手工重复劳作”........ 我曾经用某个软件手工作了一个包含两千多条Delphi技巧的帮助文件，历时两三周终於完成，可是...手抽筋，眼发晕，食欲不振....... 有时，真的希望有人把我想要的文本全处理好再放到网上，可是，面对网上成兆亿的文本难道只有依赖他人、依赖手工处理吗？ 由此，萌发了我的软件开发方向：电子文档处理。 “电子文档处理器”同时也是一个强大的HELP和CHM格式电子书批量制作工具。“北极星书库”所有电子书均由“电子文档处理器”批量制作而成。 软件的一个重要功能就是让用户“从重复乏味的手工劳动中解放出来”；“减少人工干预，更多的自动化!”；同时“要关心体贴用户”，这也是“国华软件”编写软件的宗旨！ 欢迎您下载试用“国华软件”的任一款软件。也请大家多多支持“国华软件”的发展，谢谢！


JavaScript教程

JavaScript教程 - 第一课
Thau

第一页：JavaScript教程 - 第一课

交互性！多数网站声称交互性即当你点击一个链接时到达一个
新的页面，但严格道来甚至当网页中具有CGI语言时也并不意味
它真正具有交互性。填好表格，按提交钮，等待......这就像往海
中扔一个瓶子等候它自己飘回来一样。

幸运的是，现在我们有了Javascript, 于是网页可真正如你希
望的那样交互作用。当鼠标移动到哪里，图片交换，表格元素
在传递过程中即相互影响，无须等待CGI回复结果计算即可进
行。没有任何提交 - 等待过程 - 任何事只是在你使用它时
发生。

Javascript最杰出之处在于你可以用很小的程序做大量的事。
你无须有高性能电脑，软件仅需一个字处理软件及一个浏览
器，无须WEB服务器通道，在你自己的电脑上即可作所有的事情。

尽管工作起来很方便，但Javascript是一完整的编程语言，因
而当你学完更复杂的Javascript, 你已学了一些电脑编程的基
础了。

如果你想继续学其他编程语言如Perl,C,C++或Java,Javasript
是一个极好的引荐。

>>

JavaScript教程
第一页：Javascript教程
第二页： 课程简介
第三页： 实际应用
第四页： 隐藏JavaScript
第五页： 第一天复习

[第1课][第2课][第3课][第4课][第5课]

本文由《CHD的网络教室》根据《网猴》相关文章改编，版权归《网猴》所有


JavaScript教程

JavaScript教程 - 第一课
Thau

第二页：课程简介

本周，我们将开始五天教程的第一个三部曲，它将立即帮你写
一些有用的Javascript. 不象其他似是而非的Javascript教
程，本教程将教你怎样建造你梦中的浏览器。当你走过本教程
所有的例子，你建造的浏览器将越来越精彩。

这里是你每天学习的简要大纲，及将要学习的一些例子。

第一天：介绍，一些例子，及你的第一个Javascript(例子)

第二天：变量，if-then语段，链接事件，图片交换。

第三天：窗口，架构，及文件目标模块

第四天：循环，序列及功能

第五天：表格，表格及更多的表格。

开始之前，有些重要的事情首先要注意：

首先，Javasript并非Java。

第二，Javascript也不是Javascript！这是指不同的浏览器处
理Javascript的方式不同。有时同一浏览器的不同版本处
理Javascript的方式也不同。本教程以网景导航者3.0作为标
准。若有不兼容其他浏览器之处我们会指出。若无网景3.0，请
立即下载。

第三，本教程并非好的参考书的替代物。Javascript资源丰
富，好！不罗嗦了，让我们开始写一些Javascript。

>>

JavaScript教程
第一页： Javascript 教程
第二页：课程简介
第三页： 实际应用
第四页： 隐藏JavaScript
第五页： 第一天复习


JavaScript教程

JavaScript教程 - 第一课
Thau

第三页：实际应用

你已经观摩了一个例子，若你看了源码，你会理解怎么作的。

这里是应注意的关键事情：

JavaScript通常出现在 </title>标签及</head>标签间。

如同HTML，JavaScript是一些可用字处理软件浏览
的文本，它在描述页面的HTML相关区域出现。（尽
管我们仅看了JavaScript出现在HTML页的头区，它
在主体中也可存在。下一课的例子中将可看到。

JavaScript以<script language="JavaScript">开始。

现在你并非真的非写入language="JavaScript"，因
为JavaScript是所有浏览器的缺省选项。但有时也有例
外。若不嫌麻烦的话加上不妨。

在//间的是可被忽略的注释。

注释！注释！！注释！！！这是一个好的编程习惯，它使其他
人可以读懂你的语言，他可是你的朋友，你的同事，或是三个
月前的你。要使三个月前的你仍读懂你的语言，请在大段文本
前在/* */间加注释，就象这样：
  • /* this is
    a huge block
    of text that I've
    commented out */
alert("better, stronger, faster") - 唤起一简单的对
话框，其中出现"better, stronger,faster" 字样。

这是你的第一个Javascript：“唤起”方式。

下一课中你将了解更多。到现在为止，你只需要知道须用
一半括号结束，并将"alert"文本放在引号之间

JavaScripts 以 </script> 标签结束。
看！这就跟HTML一样简单。

简单？是的。 对了 ... 实际上, 有一个 复杂之处。

>>

JavaScript教程
第一页： Javascript 教程
第二页： 课程简介
第三页：实际应用
第四页： 隐藏JavaScript
第五页： 第一天复习


JavaScript教程

JavaScript教程 - 第一课
Thau

第四页：隐藏JavaScript

在上一个例子中我们碰到一个问题即有些旧的浏览器不理
解<script>标签。这些浏览器将象对付HTML一样对待你
的JavaScript，于是乎该页面看起来是这样的：

  • //put up an alert box, to show how they work alert("Soon, I will overthrow my browser!");

    Congratulations

这多糟糕！ 幸运的是, 在HTML注释中有一个解决之法：

  • <html>
    <head>
    <title> blah blah blah </title>

    <script language="JavaScript">

    <!-- hide this stuff from other browsers

    这里写入你的语言

    // end the hiding comment -->

    </script>

    </head>
    <body>
    等等......

该方法的工作原理困惑了我好长一段时间，但你无须理解也能
用它。若你非想知道，这里为你介绍。

好了，无论你相不相信，你将准备你的第一个JavaScript练习.

你已精疲力尽了吧？ 在你挂机之前, 花一分钟阅读一下我们的
第一天回顾。

>>

JavaScript教程
第一页： Javascript 教程
第二页： 课程简介
第三页： 实际应用
第四页：隐藏JavaScript
第五页： 第一天复习


JavaScript教程

JavaScript教程 - 第一课
Thau

第五页：第一天复习

好了！你已开始理解JavaScript了。这是一个今天你所学的快
速回顾。如果你错过了以下清单中的任一条，赶快返回看一下
我是否忘看了。

今天涉及的主题:

  • JavaScript 过人之处
  • 浏览器兼容问题
  • 学习JavaScript的其他方法
  • JavaScript出现在页面的什么位置
  • 怎样注释(随时随地！)
  • 在不支持JavaScript的浏览器中隐藏
    JavaScript
  • '唤起'对话框如何工作？

今天主要是向你作个介绍，使你感到JavaScript是如何工作
的。下一讲我们开始认真的讲述。

下一讲主题:

  • JavaScript能理解何种信息
  • JavaScript怎样存储这些信息
  • JavaScript怎样决定作什么
  • 怎样作那些时髦的图片交替

下一讲见！

JavaScript教程
第一页： Javascript 教程
第二页： 课程简介
第三页： 实际应用
第四页： 隐藏JavaScript
第五页：第一天复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第一页：第二天课程简介

上一讲我们学了JavaScript出现在何处，看起来象什么。现在
我们开始学习这种语言。本课我们将学习JavaScript如何存储
信息，如何根据信息作决定，如何根据用户交互要求交替图片

准备好了吗? 现在开始学习电脑编程基础。 第一讲, 变量。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第二页：变量介绍

如果你学过代数，你一定见过变量。如果没学过也不要紧。变
量是JavaScript存储信息的简单方式。例如，当你写：

"x=2," "x"是一个变量，它存储值为2。如果而后你又说"y=x+3,"
"y"将具有值“5”

这里是一个使用变量的JavaScript例子。

在本例中我们一步一步浏览源码 你将看到:

<script language="JavaScript">

<!-- hide me

开始的这两行我们已经见过。这是任何JavaScript程序都必须
的序曲。

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365;

第一行是一个注释。含义很明确。

下几行是变量申明，有几样事情需注意：

当首次用一变量时，应以“var”申明。

尽管以var 作为变量申明严格说并不必要，但这是一个好
习惯。当我们讨论接下来的两课时，我们将知道为什么。

变量必须以字母或强调性字符起始。

第一个字符后，变量须有数字。因此monkey_23即是合法的
变量名。

变量名多数是大小写敏感的，但对不同版本的JavaScript也不
尽然。

这意味着变量Loop和loop在有些浏览器中是不同的。一般
情况下，建议坚持使用一种命名习惯并保持不变。我本人
习惯使用变量间加下划线。其他人有喜欢变量间首字大
写的，如secsPerMin。

变量应描述其目的。

象 x, y, 或hack_hack_hack对想要了解你的语言的人来
说没有什么用。别使变量名太长以致敲起来费劲，但要长
到有一定的描述力。

在定义变量时就可赋于其一个值，也可今后在给出。

在该例中每个变量开始定义时就被赋于了值。不一定非
如此，今后的例子中我们将看到即使我们不知道其值，我
们也可很好的定义它。

语句以半括弧结束。
语句是JavaScript的表达句，半括弧是结束标志。空格和
空行是可被JavaScript编译器忽略的，他们仅是为人们读
起来方便，该例可被写成长长的一行，但即使加上注释，
看起来也会极其吃力。

结束前我要提一下有时半括弧是不必须的，你可能也注意
到有的人编的语句没有半括弧作为结束。但加上它是个好
习惯，这不仅是由于你的程序的可读性会好的多，这也可
减少空行，这些空行会塞满你的程序Webmonkey的习惯是
在每一语句后加上半括弧作为结束。

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

这里我们看到了一些基本的算术。每当JavaScript执行了该
语句，变量secs_per_year将是无论得到的什么数乘以60, 60,
24, 和 365。以后，无论何时遇到变量secs_per_year，它
将以这些巨大的数字替代。

// end hiding -->

</script>

这里没什么新鲜的，是一个JavaScript片的结束。

这是该例中头文件中JavaScript的全部，当JavaScript执行这
些代码时，上述变量将被定义。但此时这些变量尚未做任何
事，这是在该例主体中要完成的事。>>

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第三页：首个变量例子的程序主体

现在我们已经定义了变量，让我们用它来做一些事。

<script language="JavaScript">

<!-- hide me

这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

这里是关于这三行的兴趣点：

document.writeln() 对于网页写入插入词。
在document.writeln()中可作大量细节之事，但到此为止
你只需记住你是在<script>和</script>标签之间，必须
用document.writeln("blah!")在网页中写HTML

引号中的字符显现出来；引号外的字符被认为是变量。

注意在第一和第三行中，引号中的是我们想要显现的，
而secs_per_year无引号。因此JavaScript认为它是变量
并交换成变量值。幸好，在头文件中我们定义
了secs_per_year是一大数，因此可被显现，否
则JavaScript将报错。

引号中的任何字都被称为字符串，JavaScript不编译它。
本例中使用的是双引号(")，也可使用单引号(')，二者可
互换。若第二行中的是
document.writeln("secs_per_year")，JavaScript
将直接将secs_per_year显现，而不是31,536,000.

本例和字符的区别很重要，因此在我们继续下去之前，保
证你已读懂了这段。

你可以用document.writeln() 写HTML语言。
注意第一和第三行的<b> 和 </b> 标签。

这即是该例的概要。我们常见的一个问题是：“通常什么出现
在头文件中，什么出现在主体文件中？”

一般这关系不大。好的习惯是把大多数JavaScript放在页面的
头上。这是因为比主体要先读到，所以出现在主体中的变量
(如secs_per_min)都在头中定义了。当secs_per_min
在JavaScript试图执行document.writeln(secs_per_min)命令
后定义则JavaScript会报错。

好，现在我们准备作一个关于变量的练习，但首先再注意一下
字符串。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第四页：字符串的魔力

如前一节所提，引号间的字符都称为字符串，无论单双引号。
就如变量可为数字一样，它也可为字符串。因此可说：

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

申报变量时即给变量赋值，使它等于这些字符串，于是当你想
写这些字符串时，你可写：

document.writeln(nice_monkey);

这里是可用字符串做事的例子。

仔细看一看源码，你将常会发现一些新鲜，有趣的事。

看以下新鲜之处:

var monkey = prompt("What's the monkey's name?", "The monkey");

这里我们称为用户反馈提示方式，当它被调用时，启动一个对
话框请求用户输入信息。用户完成后敲OK返回信息。在上行中
返回信息放入其变量中。

注意该提示方式有两个变量，且都是字符串。第一个在对话框
输入区上面显示，本例中它是：“What's the monkey's
name?”。本例中第二个参数"The monkey"，放置输入框的缺
省值。如果你不想要缺省值，则在第二个参数加上引号，就象
这样：

var monkey = prompt("What's the monkey's name?", "");

下一行是直接变量分配，就象此前我们看到的：

var techy_monkey = monkey + demanding + tech;

该行介绍了一个字符串操作器：累加标记。当两个字符串间出
现累加标记时，则这两个变量出现在同一字符串中，这称为
“连锁”。于是上行创造了一个新的变量称为techy_monkey
含有包含上述三个变量的字符串。换一句话说，其结果即是
"The monkey" + "demands, no, insists upon receiving" +
"a computer that won't crash, and a homemade browser!"

var techy_monkey = monkey + demanding + tech;

于是也可说：

var techy_monkey = "The monkey demands, no, insists upon
receiving a computer

that won't crash, and a homemade browser!";

下面一段显示更多的使用字符串的诀窍。其工作原理是相同
的，我们只看三行：

var italic_hippy = hippy_monkey.italics();

var shouting_hippy= hippy_monkey.toUpperCase();

var red_bold_tech = bold_tech.fontcolor('red');

第一行是说：“使该字符串包含变量以斜体显示”，这实际上
即是：

var italic_hippy = "<i>" + hippy_monkey + "</i>";

但看起来要好的多！今后在JavaScript写document.writeln
(italic_hippy)时，你得到的是斜体显示的字符。

下一行讲述的技巧是在HTML中实现不了的，它使得hippy_monkey
中所有字符以大写显示

第三行显示改变字符串属性的例子。。所有的字符具有颜色，
你可用string.fontcolor('new color');命令改变其颜色。也
可这样作：

var red_bold_tech = "<font color='red'>" + bold_tech + "</font>";

但它阅读起来不如这样容易：

var red_bold_tech = bold_tech.fontcolor('red');

本例中除本行外你还可看到其他的应用：

document.writeln(bold_tech + "<br>");

它除替代显示一字符串外，还连接两个字符串然后显示结果。
也可写成两行，象这样：

var broken_bold = bold_tech + "<br>";

document.writeln(broken_bold);

但这要创建另一个变量，并不必要的写另一行。

现在我们已学习了所有的关于变量和字符串知识，请做一个练习

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第五页：变量练习

请不要用HTML在<body> and </body>标签间写一个mad-lib。

当你完成该工作后，该开始if-then子句练习了。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第六页：if-then子句

"if-then"子句的应用可以使得程序根据用户输入的值作出不同
的反应。例如你可以写一段程序使得它对你与对其他人反应
不同。这里是它的基本格式：

if (some condition is true)

{

    do something;

    do something;

    do something;

}

本结构的重要部分:

  • 以单词 "if"开始 (if 必须小写).
  • 圆括弧中是条件：非真即伪。
  • 如果条件为真的话执行花括弧中的语句。

记住：空格是唯一保持程序可读性的东西。当然你可以将整
个if-then语句写在一行中，但它读起来就费劲了。

这里是一个if-then子句的例子。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第七页：if-then语句的例子

如果你在即时对话框中键入yes，你将在看到本页其他部分前收
到一个亲切的问候。若敲入别的则没有。

这里是该语句的核心：

var monkey_love = prompt("你喜欢网猴吗？","敲入是
或否。");

if (monkey_love == "是")

{

alert("谢谢！很高兴您能来这儿！请往下读吧！");

}

第一行你见过。它唤起一个对话框并将用户的反馈调入变
量monkey_love中。但第二行就有些不同：它有个条件，即如果
变量monkey_love等于值"是" ，则运行花括号中的语句。若它
等于其他值，则不运行。

注意该条件中的两个等于标记，这是人们容易搞混的地方之
一。如果你只用一个标记，实际上是告诉JavaScript测试是
否monkey_love等于 "是"。幸运的是，多数浏览器在你运行这
些语句时会识别这些错误并警告你。但最好现在开始就注意别
犯这种错误。

其他重要的条件是：

(variable_1 > variable_2) is true if variable_1 is greater than variable_2

(variable_1 < variable_2) is true if variable_1 is less than variable_2

(variable_2 <= variable_2) is true if variable_1 is less than or equal to variable_2

(variable_1 != variable_2) is true if variable_1 does not equal variable_2

有两个方法可使你的条件更合理：

在运行花括号中的语句前如果你想要两件事为“是”，可这
样做：

if ((variable_1 > 18) && (variable_1 < 21))

{

document.writeln("variable_1 can vote, but can't drink.");

}

注意这里的两个“&&”在JavaScript中这是“与”的意思。也
注意整个子句有两个部分，&&须在圆括号中。

若想两件事之一为真，这样做：

if ((variable_1 == "bananas") || (variable_1 == "JavaScript"))

{

document.writeln("The monkey is happy because it has " + variable_1);

}

回到if-then 练习中来!

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第八页：if-then练习

如果这些都没问题后, 那么开始作链结事件。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第九页：链结事件

一旦用户点击一个链结，或将鼠标移到其上，JavaScript发送
一个链结事件。一种链结事件叫做onClick, 当用户点击它时才
发送。另一种叫onMouseOver，用户将鼠标移到上面时即发送。

你可用这些事件来影响用户所见。这里是一个如何使用链结事
件的例子，试一试，再瞧瞧源码，然后我们来一行一行的复习。

第一个有趣的事情是没有<script> 标签。这是因为出现在
onClick 和 onMouseOver引号中的任何事度是可为JavaScripts
编译的。事实上句末前的半括号内允许你将JavaScripts写成
一行，你可将整个JavaScripts程序放在一个onClick的引号
内，但看上去会很难看。

请看第一行：

<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>

这就象一个正式的定位标签，但它具有神奇的onClick=""这即
说“当某人点击该链结时运行该引号中的JavaScripts”注意
在alert后有一有一中止性的半括号。

也请注意在href=""的引号中没有东西，这表明虽然有链结，但
当你点击时那儿也去不了。

下一行是：

<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>

这就象第一行，只是用onMouseOver代替onClick。

现在我们学完了链结事件，请进入奇妙的图片交替！

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第十页：图片交换

JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动
切换功能。不幸的是，微软的IE3.0不支持这种应用。用户最好
立即更新到IE4.0或改用Netscape 3.0。

这里是一个快捷的基本的图片交换例子。

让我们一步布的剖析这个例子，

第一行是：

<img src="button_r.gif" name="the_image">

这就象一个标准的 <img src= > 标签，只是它被给了一个名
字：the_image， 名字是任意取的：my_image, a_box......
但不许有任何空格在里面。

下一行是：

<a href="#"
    onMouseOver="document.the_image.
src='button_d.gif';">change</a>

这是图片交换发生的地方。就象你以前见到的onMouseOver。
出现在onMouseOver的引号中JavaScript主要之处是：

document.the_image.src='button_d.gif';

该句是说：“找到叫'the_image'的图片并将其src 变为
button_d.gif." 注意整个语句使用双引号，而'button_d.gif'
使用单引号。尽管二者可互换，但注意如果一组引号存在于另
一组引号之中，别搞混了。你可写成" 'something' "
或' "something" ' ，但不可写成：" 'something" ' or "
"something" ".明白了吗？

正如我没告诉你许多document.writeln() 工作细节一样，本
例我也没有告诉图片交换的工作原理。你将在下一讲关于“目
标导向编程”及“文件目标模块”中详述。

请注意！要交换的图片须和原图片尺寸一样！否则，它变形。

现在，该作今天的家庭作业了。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第十一页：练习2

欢迎你！

移动鼠标到下图，等到一个你喜欢的图，点击它。

你的家庭作业是写一个象这样的程序。这需要一些技巧，多花
些时间没关系。完成后，看一下本例的源码对比一下，然后到
第二讲的复习。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第二课
Thau

第十二页：复习

现在来复习一下今天所学到的。

变量
变量值可为数字或字符串。命名变量时它有一些限制和规
律需记住。

语句
语句以半圆括号结束。
字符串
字符串是引号标记中的做法序列，引号可是单引号，也可
是双引号。可用字符串作许多奇妙之事。你可用”＋“来
连接两个字符串。
document.writeln()
可用document.writeln() 来写文本和网页中的HTML。
prompt
你可用prompt来得到用户的输入反馈。
if-then-else
可用if-then-else子句使你的JavaScript依不同的用户反
应给予不同的表现。
链接事件
在一个href中的onClick和onMouseOver可基于用户反应运
行JavaScript。
图片变换
图片命名后，可用JavaScript改变所显示的图片。

如果你感到你已经全部掌握了上面我们所讲的，那么祝贺你！
还有许多东西要学。下一次，我们要切入JavaScript的心脏:
文件目标模块，我们也将学到如何打开并操作窗口和frames ,
并开始建造我们自己的新的浏览器。

JavaScript教程
第一页：第二天课程简介
第二页：变量介绍
第三页：首个变量例子的程序主体
第四页：字符串的魔力
第五页：变量练习
第六页：if-then子句
第七页：if-then语句的例子
第八页：if-then练习
第九页：链结事件
第十页：图片交换
第十一页：练习2
第十二页：复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第一页：第三天课程简介

在前面的课程中，我们学习了:

  • 如何把JavaScript 加到你的 HTML页中。
  • 如何用对话框和变量来存储并利用用户输入。
  • 如何用 JavaScript 写HTML
  • JavaScript如何用 if-then 语句作出选择。
    •
  • 如何使用链接事件制作依据用户行动而反应的网页。
  • 怎样制作基本的图片交换。

至今我们已经了解了许多,但我们尚未解释其工作原理。例如上
一课中我演示的 window.document.monkey_image.src =
"happy_monkey.gif"将把名为happy_monkey.gif的图片替换为
名为monkey_image的图片。但是window.document是什么? .src
是从哪里来的? 同样, 你看到了document.writeln("monkey")。
但为什么是 document.writeln 而非 writeln?

上述答案可在文件目标模块(JavaScript Document Object
Model，简写为DOM)中解答。DOM是JavaScript网页的方式，它
是所有JavaScript编程的核心. 本讲我们主要讨论DOM，下一讲
中我们将教你电脑编程基础的剩余部分。下两课结束后你将了
解JavaScript所有主要思路和语法。剩下所需要学习的是一些
细节、技巧，以及如何避免混乱。

现在我们开始踏上DOM之路, 先学一下如何用JavaScript 打开并
操作新的浏览器窗口。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第二页：窗口操作介绍

在学习如何在JavaScript中打开窗口前，你应已经知道如何
在HTML中打开它了。多数当前流行的浏览器中, 你可用一个href
语句打开一个新窗口，例如，点击本连接即可打开另一个窗口。

HTML 是这样作的:

clicking on <a
href="yer_new_window.html" target="yer_new_window">this
link</a> will open another window.

重要的是要了解目标链接打开的窗口是上面名为
"yer_new_window" 相伴的窗口。一旦你已经有了一个以
"yer_new_window"作为目标的herf,那么，请先关闭它。无论你
在URL中置入何种链接，都将打开原来的窗口。想了解外的意
思吗？点击这里，然后打开另一个HTML 页

本课的目的是调用目标名，本例中即窗口名yer_new_window。

既然我们已经简单的重温了一下href目标, 那么该开始学习在
JavaScript中打开窗口 .

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第三页：Javascript中的窗口操作

在HTML中打开窗口应用极为普遍，但也有一些缺陷；用户浏览
器决定窗口看起来是什么样的，你左右不了其窗口的大小及
式样。幸运的是，JavaScript给了你这种控制权。

看一看其原由:

window.open("URL","name","features");

本语句以你调用时采用的第一个参数URL来打开一个窗口。这里
是以URL，实际中可写成
"http: //www.hotwired.com/webmonkey/" 或其他类似的东西。

第二个参数是窗口的名字。这就象上页中我们看到的名字，如
果你打开窗口时已有一个同名窗口打开，那么URL将把open语句
送到原先已打开的窗口。

第三个参数，features，是一个窗口所具有的不同特征。这是
个可选参数，我们先做关于头两个参数的练习。

这里是一些用JavaScript打开窗口的例子。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第四页：JavaScript 中的窗口操作举例

试一下点击如下三个链接看看将发生什么。注意在三个链接都
打开前别先关闭其中任何一个。

这是名为 javascript_1的窗口.

名为javascript_2的窗口.

这里是另一个将进入javascript_1的HTML页.

语句的首行：

<a href="#"

onClick="window.open('javascript_window_1.html','javascript_1');">Here's
a window named javascript_1</a>.

当你点击该链接时一个名为javascript_1 的窗口打开，其中出
现javascript_window_1.html的网页。由于参数features是可
选的，我们先不理会它。

注意这里我是用onClick来调用打开窗口的。你大棵不必
将window.open()放在onClick中调用窗口，这很容易办到。一
会你将看到在<script>标签中的windows.open()例子。

第二个例子与第一个几乎一样的，它只是以不同的名字打开一
个窗口及调用到不同的HTML页中。

<a href="#"

onClick="window.open('javascript_window_2.html','javascript_2');">Here's
a window named javascript_2</a>.

第三个链接将一个新的HTML 页放到第一个窗口中。这是由于你
要打开的窗口和第一个链接重名：都叫javascript_1.

<a href="#"

onClick="window.open('javascript_window_3.html','javascript_1');">Here's
another HTML page going into javascript_1</a>.

妙事即将开始。我们加入第三个参数features，看看会发生
什么。

OK 让我们加入windows features再试试!

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第五页：Windows 特性

window.open()中的第三个参数是你想要你的窗口表现的一组
特性。如果你不完全确定你的参数，则以用户浏览器的缺省值
替代。

然而，如果你指定了一些特性参数，则窗口将以参数设定值规
定的出现。特性参数是以一组逗号分隔的序列出现的。

例如，如果你是这么写的：

window.open("some_url","window_name","location,menubar");

你将得到一个规定了URL，窗口名及菜单条（文件，编辑条等等）
的窗口。注意别在字符串中加入任何空格，这将使得有些浏览
器出错。

看一下另一个例子：

window.open("some_url","window_name","location,height=100,width=100");

这将打开一个高宽各为100像素的窗口。再次请注意别在字符串
中加空格。

这里是一组可以在字符串中引用的特性参数：

menubar （菜单条）
这是个在大多数软件应用中都引用的函数行。一般包括有
文件，编辑及其他一些条目。
status（状态条）
这是位于你的窗口下部的信息条。当你的鼠标移到一个链
接上时，链接的URL就在这个状态条上出现。你可以将状
态条上显示的内容搬到一个滚动的marquee 中去。我不打
算为你做这个示例，如果你想知道怎样做，自己设法解决！
scrollbars （滚动条）
当需要时允许滚动条出现。
resizable （重调）
当重调参数被列出，窗口将可被重调。注意它的拼法，我
就经常搞错。
width （宽度）
以像素点表达的窗口宽。
height（高度）
以像素点表达的窗口高。
toolbar （工具条）
Home button, among others.
浏览器工具条，包括后退，前进钮，停止钮，以及HOME钮等等。
location （定位区）
你可以键入URL 的浏览器文本区。
directories （指示区）
如Netscape浏览器中所在的"What's new," "What's cool,"等等。

这里是一些不同类型窗口的示例。

一旦你搞懂了这些例子，你就可以在你的一些窗口中实现它了。
现在开始学窗口的具体内容

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第六页：JavaScript 文件目标模块

既然你已经知道如何按你自己的意愿打开窗口，那么现在开始
学习怎样在窗口中操作一些事。在此之前你要学习一下
JavaScript的文件目标模块（DOM），首先，让我们学一点“目
标导向编程”。

概述目标导向编程

目标导向编程 - 特别是JavaScript版本的 - 是比较容易理
解的。其主旨是信息依据目标组织。JavaScript其优越处之一
在于其带有一内建式目标库。例如，一个窗口即一个对象。无
论何时我提到一个缺省的JavaScript库对象，我将使用大
写（Window）。特定的情况（特定的窗口）将用小写。

对象都有用以描述它们的属性。窗口对象的其中一些属性是它
的名字，（即状态条上的字），窗口文件的URL，及窗口文件
本身。（其中包括单字，图形及窗口中的超文本链接。）

在JavaScript 中缺省的窗口对象为 window.这里你可了解你将
如何获取缺省窗口的属性。

var the_status = window.status;

这是说：找到称为window 的status属性，将之调用到变量
the_status中。窗口的status特性包含了状态条上出现的词
句。你也可事先设置它，像这样：

window.status = "I'm monkeying around!";

这是一个使用状态条的例子。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第七页：状态条的操作

将你的鼠标放在下面两个链接上，睁大你的眼睛看看窗口下的
状态条上发生了什么？

Who do we love?
Why do we love them?

这里是首行的源码：

<a href="#" onMouseOver="window.status='Monkeys!';">Who
do we love?</a>

这是说：“当鼠标移动到这个链接上时，改变状态条。”

目标的方式

除了属性之外，对象还具有“方式”。“方式”是对象所知的
如何运作的进程。例如，窗口知道如何打开另一些窗口：
window.open("URL,""name,""features")。它告诉Javascript
用窗口的open方式来打开一个新窗口。

因而，就象上例中，一个对象的“方式”也被称为其获取一个
特性的方式：对象名，周期，而后是方式。主要的不同在于方
式总在其后跟随一对含有方式参数的圆括弧。甚至当方式不调
用参数时，圆括弧也必须有的。还记得这个吗？

var italic_hippy = hippy_monkey.italics();

对啦！字符串实际上就是对象， italics()即是字符对象的
参数。

你已经看了一些窗口方式的例子但还没有了解它。对话框调用
alert及prompt实际上也是窗口对象的方式。如果你调用：

window.alert("Viva la primate!");

你将看到对话框并读到“Viva la primate!”我们直接能试试
这个闪烁的窗口.

看起来好象有点傻，更好的效果可以参看调用其它窗口。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第八页：窗口间的交流

尽管将一个窗口模糊或聚焦并没有多大意义，但有时候你确实
需要将另一个窗口移到前台。为了使用javascript实现窗口之
间的交流，你需要对该窗口最一个引用。

获取和使用一个窗口引用

首先，我打开一个窗口，为其赋予一个引用：

var new_window = window.open("hello.html","html_name","width=200,height=200");

该语句打开一个小窗口并将其赋值给变量new_window作为对该
窗口的引用。变量可以包含数字和字符串，也可以包含对对象
的引用，在本例中，对象是一个窗口。现在变量new_window就
可以象当前窗口那样使用。你可以象对窗口调用方法那样对
new_window调用方法。

下面的语句是一个对new_window调用方法的例子:

new_window.blur();

它实现的作用和上篇中的window.blur()一样。

现在我们看看将新窗口移到前台或移到后台的两个链接：

<a href="#" onMouseOver="new_window.focus();">Bring
it forward</a>

<a href="#" onMouseOver="new_window.blur();">Put it
backward</a>

 >>

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第九页：再谈 JavaScript DOM

现在我们已经了解了：JavaScript包括缺省对象，例如窗口，
对象具有用于描述对象的属性，方法用于描述对象采取行动
的方法。

对象的属性页可以是对象。举例来说：窗口有一个属性叫做
document，它用于引用到窗口中实际的HTML文件。该document
属性本身就是一个对象。在谈到图象掉换（image swap)的时
候，我们见到过这样的例子。你可以用下列语句作图象掉换:

<a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>

上述语句的意思是说：找到window的document属性，找到
the_image的src属性并将其设置为图象button_d.gif。这样写
是因为窗口（windows）是对象，窗口内的文件（documents）
是对象，而文件（document）内的图象（images）页是对象。

看起来似乎很复杂，但它的结构很清楚。JavaScript的文件对
象模块（Document Object Model）描述了对象之间的等级关系。

在该教程中，我们只看到该等级关系的一部分。使你的网页具有
精彩动感的大多数技巧都涉及到文件对象。文件对象内容非常丰
富，实际上应该专门开一门教程将这个问题。在本课程中，我们
将集中谈谈窗口的其它属性。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第十页：窗口的其它特性

其它窗口属性主要和分割窗口有关。如果你不知道如何使用分
割窗口，请先阅读文章"Frames Are a Picnic." 。

在JavaScript中，对分割窗口的处理方法和摧窗口是一样的。
你只需利用javascript在一个出口里面修改另一个窗口外观，
你可以改变各个分割窗口的样子。但你要记住，在一个窗口内
的各个分割窗口实际上被当作另外的几个窗口来对待，因为分
割窗口可以再包含更小的分割窗口。也就是说，你有一个最高
层的窗口，其中包含这第一级分割窗口，个分割窗口实际上又
是新的小窗口，小的窗口中又可以包含更小的分割窗口。但一
般并不需将其搞得这么复杂。

下面是一个用javascript制作的分割窗口的例子。

首先，是分割窗口的窗框：

<frameset rows="25%,*">
<frame src="frames_example_controls.html" name="control_frame">
<frame src="blank.html" name="target_frame">
</frameset>

这和普通的分割窗口窗框是一样的。你要记住给窗框内的各个
分割窗口命名。第一个分割窗口的名字是control_frame, 其
中包含这加入了javascript的HTML网页。第二个分割窗口的
src="#",其中什么都不包含。

接下来，我们看看control_frame窗口内的内容。以下只是其
中关键的一行：

<a href="#"
onClick="top.target_frame.document.writeln('Monkey
do!<br>');">Monkey see</a>

执行该语句时，JavaScript从窗口等级的最高层开始，该层中
包含着分割窗口的窗框，从中发现名叫target_frame的分割
窗口，由于该分割窗口是也一个窗口，所它具有窗口的文件
（document）属性。JavaScript找到其document属性，并调
用writeln()方法。其执行结果是在文件中写出"Monkey
do!" 。writeln()是文件（document）对象的方法，所以我们
必须写document.writeln()，而不只是 writeln()。>>

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第十一页：再谈Window及Frame树杈结构

在上个；例子中，我们用到了内置变量top，该变量永远指分割
窗口最高层次的浏览器窗口。如果你计划从分割窗口的最高层
次开始执行命令，你就可以用top变量。

另一个内置变量是parent， 指的是包含当前分割窗口的母窗
口。如果在一个窗口内有分割窗口，而在其中的一个分割窗口
中又包含着分割窗口，则第2层的分割窗口可以用parent变量引
用包含它的母分割窗口。稍有点复杂, 以下是用javascript编
写的在一个分割窗口中套更小的分割窗口的例子。>>

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第十二页：自己动手操作

在给你布置的作业中，你需要利用第2课的作业构建你的浏览
器。document对象有一个属性叫做bgcolor，你可以想在HTML
的body标签中设置背景色那样设置document对象的背景色，你
可以用名称，如 "red," 或16进制值如"#FF0000"。

接下来用分割窗口和必要的JavaScript编写家庭作业3。>>

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第三课
Thau

第十三页：第三天复习

今天的课程中我们将了以下内容：窗口、分割窗口、文件对象
模块（Document Object Model）和面向对象的编程。

其中学习了如何打开按自己的方式窗口；用JavaScript在一个
窗口中影响另一个窗口；在分割窗口之间的交流；对象的属性
和方法；域对象模块（Domain Object Model)。

浏览器窗口就是包含着其它对象的对象。了解了DOM中对
象的等级关系之后，你就可以控制HTML页中的各个特
性。

JavaScript教程
第一页 第三天课程简介
第二页 窗口操作介绍
第三页 Javascript中的窗口操作
第四页 JavaScript中的窗口操作举例
第五页 Windows特性
第六页 JavaScript文件目标模块
第七页 状态条的操作
第八页 窗口间的交流
第九页 再谈 JavaScript DOM
第十页 窗口的其它特性
第十一页 再谈Window及Frame树杈结构
第十二页 自己动手操作
第十三页 第三天复习


JavaScript教程

JavaScript教程 - 第四课
Thau

第一页：第四课介绍

对于Java script来说有两个主要部分：该语言本身及其目
标库。在第2课介绍的语法中，我们已经研究了变量，语句
和if-then子句，这些是所有程序设计语言的组成部分。现在来
学习Java script语法的其余部分。

对于Java script语法来说，我们仅剩下三个问题需要学习：
循环、数组和函数。

让我们从循环开始。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第二页：循环介绍

有时你想反复做同一件事。你想向某些人询问一个口令，你不
断地问，直到得到正确的口令。如果你只想给他们两次尝试的
机会，你可以这么做：

      var the_password = "pass the wrench";

var answer = prompt("What's the woyd?","");

if (answer != the_password) {

    answer = prompt("What's the woyd?","");

    if (password != the_password) {

        document.write("You lose!<p>");

    } else {

        document.write("That's right!<p>");

    }

} else {

    document.write("That's right!<p>");

}

不幸的是如果你想不住地问直到得到正确答案，上述做法是不
起作用的。假使你是想询问四次而不是两次，那这已经是很讨
厌的事了。你将使用四个层次的if-then 子句，这决不是件好事。

反复做相似的事情的最好方法是使用一个循环(loop)。在这种
情况下，你可以用一个循环来不断的要求口令直到这个人说出
为止。这里有一个while循环工作的例子，口令是：pass the
wrench。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第三页：循环的密码

那就是密码！

让我们逐行地来研究这个例子，如果你想看整个答案，可以查看源码。

在这个典型的Java script序言之后，我们从双变量申报开始：

var password="pass
      the wrench";

var answer;

这里我们定义该密码作为一个字符串，我们申报一个称为
answer的变量。你将理解为什么我们不得不立即申报一
个answer。下面几行是非常重要的：

while (answer != password)

{

answer = prompt("What's the woyd?","");

}

这是一个while循环。while 循环的一般格式为：

while (some test is true)

{

do the stuff inside the curly braces

}

上述几行表明：“当answer不等价于Password时，执行提示
命令。”这一循环将持续地执行波形括号内的语句直至测试
失败。在使用者输入的单词与密码一致(即Pass the wrench)的
情况下，测试必将失败。

由于在对一个未申报的变量执行一个如(answer!=password)的
测试时，在某些浏览器上会产生错误，所以我们必须申
报answer。由于在while循环中将通过提示方案对answer赋值，
在我们第一次进行循环中，answer将没有数值。提前定义它并
设定其处始值为“”。

由于不定义循环经常地使用，循环经常用来执行一组语句某一
特定的次数。这里用另一个循环来演示如何作这项工作。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第四页：再谈WHILE循环

我们已见到了很多所请求的X`S，现在复习一下：

第一步：请求X`S的数目

var width = prompt("How many x's would you like? (1-10 is
good)","5");

下一步，申报一些变量：

var a_line="";

var loop = 0;

现在，关键之处：

while (loop < width)

{

    a_line = a_line + "x";

    loop=loop+1;

}

即说：“当变量循环小于所请求的X`S行宽时，在该行加入另一
X然后在循环值上加1。”该循环将继续加一X到该行并在循环值
上加1直到循环不在小于请求的行宽。请看下列源码分析：

第一次
  • a_line = "" (because we initialized it to be "")
  • loop=0 (because we initialized it to be 0)
  • width=2 (because that's what the user asked for)
  • 0 is less than 2 so
  • a_line = a_line + "x", so now a_line = "x"
  • loop=loop+1, so now loop = 1
返回循环：第二次
  • loop=1
  • width=2
  • a_line = "x"
  • 1 is less than 2 so
  • a_line = a_line + "x", so now a_line = "xx"
  • loop=loop+1, so now loop = 2
返回循环：第3次
  • loop=2
  • width=2
  • a_line = "xx"
  • 2 is NOT less than 2 so
  • fall out of the loop and do what follows

随后是：

alert(a_line);

    启动一个警告对话框。

    这种循环运用的如此普遍以至于程序员们开发了一些简便
    方式，条件循环可写成这样：

while (loop < width)

{

    a_line += "x";  //this was a_line = a_line + "x";

    loop++;         //this was loop=loop+1;

}

首行，“x”，表示“本身加x”。若已有a_number=5，那么可
写成，a_number+=3，即是说：a_number=a_number+3。程序员
就是这么偷懒的。

下行，loop++，意味着“自身加1”。于是loop++即为：
loop=loop=1。它也可写成loop+=1。这样偷懒行为非常有效。

就象不止一种方式在一个数上加1一样，也有不止一种方法来写
一个循环。While循环不是唯一的循环模式，另一流行的循环
是for循环。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第五页：For循环

上例中while循环可以写成如下形式：

var a_line="";

var loop = 0;

while (loop < width)

{

    a_line = a_line + "x";

    loop=loop+1;

}

也可用For Loop写成：

var a_line="";

for (loop=0; loop < width; loop++)

{

    a_line = a_line + "x";

}

for循环的格式为：

for (initial value; test; increment)

{

    do this stuff;

}

这样，上述for loop设置loop=0并持续加1直到loop<width，这
和上例中while loop相同，仅是少了数行而已。都表示
“在a_line上加width次x”。

在我们练习使用循环之前应明白一件事：循环可以嵌套。这里
有一个关于嵌套循环的例子。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第六页：嵌套循环

这是程序：

var height = prompt("How high do you
want the grid? (1-10 is good)","10");

var width= prompt("How wide do you want
the grid? (1-10 is good)","10");

var a_line;

var new_window =
window.open("/webmonkey/98/04/files1a
/grid.html","looper","width=400,height=400");

new_window.document.writeln("<h1>A Grid</h1>");

for (height_loop = 0; height_loop
< height; height_loop++)

{

a_line = "";

for (width_loop = 0;
width_loop < width; width_loop++)

{

a_line+="x";

}

new_window.document.writeln
(a_line + "<br>");

}

在请求高及宽后，打开一新窗口，并为它写一个头，进入for
循环。第一个for循环设a_line=“”。试一下不用该行做一下
本例，看看会发生什么。在初始化a_line后，程序进入下一个
for循环，当宽达到所需值后，建立X`S行并将它显现在新窗
口中。这些将发生height次。

好，现在你的任务：看一下这个循环练习并亲自试着在看源码
前写一个。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第七页：循环练习

循环练习程序要求一些字然后反向显示。试着自己写一下程
序，再看源码了解其原理。问题不大了吧，现在开始学习数组。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第八页：数组

我们已了解变量可是数字、字符串及对象参数。还有一个
Javascript的重要部分：数组。

数组是一种列表。各种列表比如名单、URL以颜色列表都可以存
储在数组中。

这里我们生成颜色的数组：

var colors = new Array("red","blue","green");

现在你就有了一个数组，你能对它做什么呢？数组的优点在于
数组中的各个元素可以通过数字调用。第一个元素的数字是0，
可以用以下方式调用：

var the_element = colors[0];

执行这一行JavaScript指令时，变量the_element所被赋予的值
是字符串"red" 。通过写出数组的名称并将数组中元素的顺序号
放在方括号内就可调用数组中的该元素。数组中第2个元素的顺
序号是1。

一旦生成数组后，你可以添加和修改数组值。如果你打算将颜
色数组的第1个元素有红色该为紫色，你可以这样做：

colors[0] = "purple";

数组经常用于循环。下文将讲数组和循环的应用。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第九页：数组和循环

数组是一项非常有用的东西，因为你可以循环调用数组中的各
个元素执行某项功能。以下是循环显示一个URL数组中的各个元素
的例子。

首先，要使该例子发挥作用，我们需要声明一些变量：

var url_names = new Array("hits.org","awaken.org","bianca.com");

var a_url;

接下来，我们循环调用数组中的各个元素，打开每
个URL并对待用户点击alert框的OK按钮：

for (loop = 0; loop <url_names.length; loop++)

{

// make the name of a url, for example http://www.hits.org/

a_url = "http://www." + url_names[loop] + "/";

// open a window

var new_window=open(a_url,"new_window","width=300,height=300");

// wait for the click

alert("hit ok for the next site");

}

首先，你会注意到循环从0一直到url_names.length这个变量。
将.length放在数组名的后面由于告诉你数组中有多少个元素。
但是，注意数组元素的数目同数组最后一个元素的索引号（顺
序号）不同。如果数组中有3个元素，则数组的长度为3，但是
数组中最后一个元素的索引号却是array[2].。这是因为数组中
第1个元素的索引号是array[0].。如果你执行数组调用时得到
诸如"object not found" 的错误信息，而你的代码中有一个
数组，则有可能是因为你将数组元素的索引号同数组中元素的
数目混淆了。

不也许还会注意到将.length放在数组的结尾处很有点想给一个
对象附加一些属性。这是因为数组本身就是对象，而length就
是数组的一项属性。

数组术语对象的另一个表现是：你需要用新指令才能生成新的
数组。在上例中，url_names = new Array(......) 实际可以
解释为：生成一个新数组，用url_names对其做一个引用。你可
以注意到单词"new" 以这种方式被应用时，就生成了一个新的
对象。

循环中的第1行生成一个变量。其赋值为一个字符串。

a_url = "http://www." + url_names[loop] + "/";

循环开始时，变量循环的初始值为0。url_names数组的第1个元
素是字符串"hits.org".，所以在第一次循环中，变量a_url等
值于字符串"http://www.hits.org/".。

循环的下一行用该URL打开一个窗口

var new_window=open(a_url,"new_window","width=300,height=300");

由于每次打开窗口时我们给窗口起的名称都一样，所以在转到
新的URL时，不会打开许多窗口。如果我们在上例中去掉窗口
名称"new_window"，则每次循环时就会打开一个新窗口。

循环的第3行只是打开一个alert框，并对待用户点击OK 按钮。

数组还可以由于其它元素，而不只是字符串。数组可以应用
于JavaScript文件对象模块（Document Object Model）的各个
方面。>>

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第十页：文件目标模块中的数组

下面是onClick=""链接中的代码：

var change=prompt('Change which image (0 or 1)?','');

window.document.images[change].src='three.jpg';

本例打算用图片交换来演示数组如何介入DOM的。如果你用的
是IE3.0或Netscape2.0，赶紧升级。试一下本例，看一下源码。

document.image_name.src = 'some_image.gif';

为了做这事，每个图片都需命名到。若你不知要交换的图片
名，但却知道其在HTML页中的顺序。可以用它的DOM数来指定该
图片。

一个HTML文件中的第一个图片是document.images[0]，第二个
是document.images[1]，如此类推。若你想知道一个文件中有
多少个图片，你可检查图片数组长度知道：
document.imageslength。例如，你想改变你的网页中所有图形
为一个Spacer GLF图片，你可以这样做：

for (loop = 0; loop < document.images.length; loop++)

{

    document.images[loop].src = 'spacer.gif';

}

清楚了吧？

好。下面我们准备三步是函数。函数学习中，我们要做一些
练习，并有一些作业。

进入函数学习课程。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第十一页：函数

函数是编程需学的最后一个基本组成。所有的程序语言都是
函数。函数是一些角次可调用的、无须重写的东西。

如果你想教会自己快速阅读并且用一个一旦点击可告诉你当前
时间的长文本链接。

例如…时间!

看源码：

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>

在这里这段JavaScript的工作细节并不重要；一会我们再回来
复习一下。

重要的是它太长了。若这些时间链接再有10个，你须每次剪贴
这段程序。这使你的HTML既长且难看。另外，若你想改变这段
程序，就必须在10个不同地方改变。

你可以写一个函数来执行而不用作10次拷贝程序。这里的函数
使用变的即容易编辑又容易阅读。

请看如何写一段计时函数。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第十二页：无参数函数

该HTML页含有一个叫做announceTime的函数。从一个链接调用
annoumnceTime：

<a href="#" onClick="announceTime();">time!</a>

就象这样：

下行看起来就象第二课：

<a href="#" onClick="alert('Hello!');">Hello!</a>

这称为从一个链接调用警告对话框。函数就象一种方法，唯一不
同的是，方法依附于一个对象。在这个警告的例子中，这个对象
是一个窗口对象。

让我们回到函数本身。如果你看看源码，你将看到函数位于HTML
文件的头部中。

<html>

<head>

<title>Function with No Parameters</title>

<script langauge="JavaScript">

<!-- hide me

function announceTime()

{

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

//put together the string and alert with it

var the_time = the_hour + ":" + the_minute
+ ":" + the_second;

alert("The time is now: " + the_time);

}

// show me -->

</script>

</head>

<body>

...

</body>

</html>

好，让我们逐行复习这个函数。首先，所有函数来自于该种格式：

function functionName(parameter list)

{

statements ...

}

函数的命名规则于变量差不多。第一个字符必须是字母或一标准符
号。其余字符可为数字或一横线。但必须保证函数不于已定义的变
量同名。否则将出现很糟糕的结果。我是用内部大写的方式命名函
数以保证它们不与字符碰巧重名。

函数名后是一组参数。本例是无参数的函数，下一例中我们再举例
描述。

参数后是函数的主体。这是一组当函数调用后是想运行的语句。在
下面几个例子中，我打算利用这个报时器，所以让我描述一下它是
怎样工作的。

第一行：

var the_date = new Date();

取得一个新的日期对象。就象你在用数组时取得一个新的数组一
样，在你要找出即时是什么时间时你需要先取得一个日期对象。
当找到了一个新的日期对象，它自动重置到当前的日期和时间。
为了在对象以外得到这个信息，你必须使用这种对象方法：

这些方法从日期对象上取得了合适的数字。

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

你可能疑惑：我怎样能假定日期对象知道何种方式？甚或我如何
知道有这样一件事可作为日期对象？这些缘由应从Javascript
库中获取，我将尽我所能解释内置Javascript对象，但不一定能
彻底的使你清楚。

函数的其他部分就很清楚了。它以这种方式调用返回数字，把它
们变成字符串，并且调用警告方式以弹出一个字符串对话框。注
意你可以在函数内部调用一个方式和函数。我们将详尽讨论。

现在如果你也玩透了时间链接，你可能注意到了有些什么不对的
事。你每次可能会得到这样的反馈：“12:12:04”，这是
getSecond()将返回值为“4”。那么当你合成为时间时，你看到
的就是the_minute+“:”+the_second得到14:4而非是我们想要
的。解决它是个容易的事，需要个新的函数来修补分、秒合成值。

请看参数及返回值 。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第十三页：参数及返回值

尽管无参数的函数在减少写源码工作量，HTML源码可读性上很
有用，但有参数的函数会更为有用。

上一例中，当返回的分、秒值小于10时会有问题发生。我们想
要看到的秒值是04而非4。我们可以这样做：

var the_minute = the_date.getMinutes();

if (the_minute < 10)

{

the_minute = "0" + the_minute;

}

var the_second = the_date.getSeconds();

if (the_second < 10)

{

the_second = "0" + the_second;

}

它会非常有效。但是注意，同样的源码你写了两次：若某件
东西小于10，则前面加“0”。所以要考虑当用同一代码要多
次重写时，用函数来做。本例中我写了一个叫fixNumber的函数：

function fixNumber(the_number)

{

if (the_number < 10)

{

the_number = "0" + the_number;

}

return the_number;

}

fixNumber的参数是the_number。一个参数也是一个变量，当该
函数被调用时，其参数值也被设置。在本例中，我们这样调用
函数：

var fixed_variable = fixNumber(4);

参数the_number在函数中设置为4。到现在你应该对fixNumber
的主体有了一定的了解。它的意思是：如果变量the_number小
于10，则在它的前面加一个0。这里面新的内容是return指令：
返回the_number的值。在下面的情况中就会用到return指令：

var some_variable = someFunction();

变量some_variable的值是函数someFunction() 的返回值。
在fixNumber中，我加入: return the_number，则退出函数并
将返回the_number的值返回给任何一个等待被设置的变量。
所以，我这样书写代码：

var fixed_variable = fixNumber(4);

the_number的初始值将通过函数调用被设置为4，然后由于4小
于10，所以the_number将被改为"04"。然后the_number值被
返回，而且变量fixed_variable将被设置为"04" 。

为了将fixNumber包括在原始函数announceTime()中，我添加了
如下内容：

function announceTime()

{

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var fixed_minute = fixNumber(the_minute);

var the_second = the_date.getSeconds();

var fixed_second = fixNumber(the_second);

//put together the string and alert with it

var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;

alert("The time is now: " +the_time);

}

假定时间链接被点击时，时间为12:04:05。用new
    Date()获得
日期，用getHours()获得小时，用前面所属方法获得分钟，分
钟在本例中应该是4, 然后调用fixNumber，其参数为the_minute:

var fixed_minute = fixNumber(the_minute);

当fixNumber()被调用时，参数the_number被设置为the_minute。
在本例中由于the_minute是4，所以the_number将被设置为4。
设置完参数后，我们进入函数主体。由于4小于10，the_number
被改变为"04"，然后the_number值用return指令返回。当"04"
被fixNumber返回后，本例fixed_minute就等于"04"。

我们一步一步来研究该过程。假定时间为12:04:05。

    我们从函数announceTime()开始

  1. the_minute = the_date.getMinutes();则the_minute = 4
  2. fixed_minute = fixNumber(the_minute);等于函
    数fixNumber()    并将其值返回给fixed_minute

    现在进入函数fixNumber()

  3. 函数fixNumber(the_number)fixNumber()用the_minute的
    值调用，the_minute值是4，所以现在the_number = 4
  4. 如果(the_number < 10) {the_number = "0" +
    the_number;}    由于4小于10，所以the_number现在等于"04"
  5. 返回the_number值，退出该函数并返回值"04"

    现在已经退出函数fixTime()，所以现在我们回
    到announceTime()

  6. 该函数返回值为"04"，所以fixed_minute 现在等于"04"

    该例用了一个只有一个参数的函数。实际上你可以为函数
    设置多个参数。例如该函数输入两个数组并返回一个元素
    列表    。

    7.

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第四课
Thau

第十四页：多于一个参数的函数

这是我定义的一个数组：

var monkeys = new Array("mattmarg","wendy",
"kristin","tim","aaron", "luke");

var kittyphile = new Array("wendy", "ruby",
"roscoe", "tim");

var discophile = new Array("mattmarg",
"john travolta", "wendy");

var happy = new Array("tim", "wendy",
"stimpy", "aaron");

var cranky = new Array("ren", "mattmarg","luke");

随着这些数组的定义，arrayIntersect函数给出，我们可轻
而易举的发现那些网猴酷爱迪斯科：爱跳舞的网猴

注意到尽管John Travolta喜爱迪斯科，但他不在monkeys请
单中，则他就不是只爱跳舞的网猴为调用该函数值，可这么来：

<a href="#" onClick="arrayIntersect('dancing
monkeys',monkeys,discophile);">dancing monkeys</a>

这是个具有3个参数的函数：一个代表交叉的姓名，第一个数组，
及第二个数组。这也很容易发现爱猫的网猴名爱猫的网猴。

看一下源码：

<a href="#" onClick="arrayIntersect('monkeys who love
 cats',monkeys,kittyphile);">cat-loving monkeys</a>

让我们看看arrayIntersect函数本身：

function arrayIntersect(intersect_name, array_1, array_2)

{

    var the_list = "";

    for (loop_1 = 0; loop_1 < array_1.length; loop_1++)

    {

        for (loop_2 = 0; loop_2 < array_2.length; loop_2++)

        {

            if (array_1[loop_1] == array_2[loop_2])

            {

                the_list = the_list + array_1[loop_1] + " ";

            }

        }

    }

    alert("the " + intersect_name + " are: "+ the_list);

}

看看你是否已经弄懂本例中的循环。关键是函数第一行：

function arrayIntersect(intersect_name, array_1, array_2)

这里定义了一个叫arrayIntersect的函数，它有3个参数。就象上
例，每个参数就象一个变量，当函数调用时赋值。因此，当函数被调
用时：

arrayIntersect('dancing monkeys',monkeys,discophile);

下列分配：

  • intersect_name = 'dancing monkeys'
  • array_1 = monkeys
  • array_2 = discophile

唯一需注意的是，你必须以正确的参数数目来调用函数。如果你一旦
象这样调用arrayIntersect：

arrayIntersect(monkeys,discophile);

将会出错。试一下看会发生什么错误。

在任一标准的Javascript程序中，函数都是基本的部件。因此理解其
工作原理极其重要。这里是一个测试你对这项工作理解多少的练习。
再综合地做一下本课中其它练习，再在你自己的浏览器中应用。

JavaScript教程
第一页 第四课介绍
第二页 循环介绍
第三页 循环的密码
第四页 再谈WHILE循环
第五页 For循环
第六页 嵌套循环
第七页 循环练习
第八页 数组
第九页 数组和循环
第十页 文件目标模块中的数组
第十一页 函数
第十二页 无参数函数
第十三页 参数及返回值
第十四页 多于一个参数的函数


JavaScript教程

JavaScript教程 - 第五课
Thau

第一页：第五课课程介绍

现在你已经了解了计算机编程的基本知识。我们接下来继续研
究一下文件对象模块（Document Object Model－DOM）。DOM的
点击关系起始于窗口对象在每个窗口对象中是一个文件对象
（Document object）。我们将重点谈谈文件对象，看看如何利
用它从你的用户获得各项信息，并且动态显示新的信息。

我们已经看国文件对象的一个属性－图象数组（Images
array）。在第3课中，文件中第1个图象可以通过改变其src属
性被修改。

例：

    window.document.images[0].src='some_new_picture.gif';

该命令将把文件中的第1个图象该到一个名为
some_new_picture.gif的新图象。在DOM中，图象数组中的每个
图象也是对象。所以images[0].src指令象对对象那样发挥作用，
它的意思就是：从Image数组中调用Image的中的对象image[0]，
并设定其src属性。将其翻译过来即：从该窗口中调用文件
（document）属性，从该文件的图象数组中调用第1幅图象，并
将其src属性该为图象some_new_picture.gif。

Image对象还有其它很多有趣的属性，例如，你可以让JavaScript
在作其它事之前检查一幅图象是否已经完全载入。但是，我们
只能在以后的课程中谈到这些属性。今天，我们将谈谈反馈表单
及如何在JavaScript中应用反馈表单。

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第二页：介绍反馈表单

反馈表单是HTML 1.0规范的一部分。许多人对其并不很了解。
很多人只以为它只能由于用户端CGI编程。其实，即使你不是
CGI程序员，反馈表单也会为你提供许多功能。而JavaScript
可被用来为反馈表单添加各种功能。而且无须用户端CGI的辅助。

如果你不了解反馈表单如何工作，请学习HTML入门中的有关课
程。然后在开始学习本课。

首先，在javascript中，反馈表单也被存储在一个对象数组中。
你可以通过window.document.images[0]调用图象数组中的第一
幅图象，你也可以用window.document.forms[0]调用反馈表单
数组中的第1项表单。你可以为图象命名，页可以以类似的方式
为反馈表单命名。例如，如果该反馈表单

的编程如下：

<form name="first_form">

<input type="text" name="first_text" size="40"
value="Power to the primates!">

</form>

你可以用以下两种方式之一引用该表单：

    var the_form = window.document.forms[0];

var the_same_form = window.document.first_form;

更多的时候，你需要引用到表单内的元素，例如上例中的文字域。>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第三页：控制文字域的值

将鼠标滑过该链接看看会发式什么事情。
Yes, and I know it. No!

通过改变文字域的值就可实现这种奇妙的变换。

<form name="first_form">

<input type="text" name="first_text"
value="Are you happy?">

</form>

改变文字域的链接为：

<a href="#"
onMouseOver="window.document.first_form.first_text.value='Clap clap!';">
Yes, and I know it.</a>

<a href="#"
onMouseOver="window.document.first_form.first_text.value='Sour puss!';">
No!</a>

意思是说，表单调用第1个表单，并将其值设为 'Clap clap!'第
2行作用相似。这同改变图象的src非常相似。只不过文字域改变
的是值。

对textareas也可以采用类似的方法改变值:
Part 1 Part 2

表单编码：

    <form name="form_two">

<textarea name="the_textarea" rows=10 cols=60>

Mouse over below to see the first verse of

The Webmonkey song, adapted from

"I Wanna Be Like You" (The Monkey Song)

from Walt Disney's The Jungle Book

written by Richard M. Sherman and Robert B. Sherman

</textarea>

</form>

注意该表单有一个名字：form_two,，并且文字区也有一个名字：
the_textarea。

其链接和文字域的设定方法基本相同：

    <a href="#"
onMouseOver="window.document.form_two.the_textarea.value=first_part;">
Part 1</a>

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=second_part;">
Part 2</a>

唯一的不同之处在于将一个变量赋值给textareas，而不
是将字符串赋值给它。该变量在HTML首部已经做了定义。
以下是变量的字符串赋值：

var first_part = "Now I'm the king of the swingers\nOh,
the jungle VIP\nI've reached the top and had to stop\nAnd
that's what botherin' me";

注意"\n"是换行符。如果你在一个<pre> 并且或在一个
textarea中写字，"\n" 换行符非常方便。

除了改变表单元素的值，JavaScript还可以让你检测在表
单中进行的事件。

    <a href="#"
onMouseOver="window.document.form_two.the_textarea.value=first_part;">
Part 1</a>

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=second_part;">
Part 2</a>

唯一的不同之处在于将一个变量赋值给textareas，
而不是将字符串赋值给它。该变量在HTML首部已经做
了定义。以下是变量的字符串赋值：

    var first_part = "Now I'm the king of the swingers\nOh,
the jungle VIP\nI've reached the top and had to stop\nAnd
that's what botherin' me";

注意"\n"是换行符。如果你在一个<pre> 并且或在一个
textarea中写字，"\n" 换行符非常方便。

除了改变表单元素的值，JavaScript还可以让你检测在
表单中进行的事件。>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第四页：文字域事件

文字域可以链接onBlur、onFocus、和onChange事件。当有
人点击文字域的里边时则发生onFocus事件。而如果点击文
字域的外面或按了tab键时则发生onblur事件。如果有人改
变了文字域内的内容然后转到文字域外部的区域时则发生
onChange事件。

试着做这些事情看下面的文字域会发生什么情况。

以下是编制方法：文字域的编码：

<input type="text" name="first_text"

    onFocus="writeIt('focus');"

    onBlur="writeIt('blur');"

    onChange="writeIt('change');">
每一个事件处理器调用函数writeIt()，该函数在
首部中已作了定义。首部中的编码如下：

<head>

<title>Text Field Events</title>

<script language="JavaScript">

<!-- hide me

function writeIt(the_word)

{

    var word_with_return = the_word + "\n";

    window.document.first_form.the_textarea.value +=

        word_with_return;

}

// show me -->

</script>

</head>
前几行是典型的JavaScript预定义。主体中的第1
行

var word_with_return = the_word + "\n";
将一个变量word_with_return进行初始化为函数处
理后的字符串并加上换行符"\n".。注意"\n" 是标
准的计算机指令。

下一行

window.document.first_form.the_textarea.value += word_with_return;
将文字区域的值设置为其原值加新变量。其作用相
当于

window.document.first_form.the_textarea.value =

window.document.first_form.the_textarea.value + word_with_return;
目前我们已经学习了文字域和文字区域（值）的属性，接下
来我们学习文字域和文字区域处理所用的方法：blur()、
focus()、和select()。

下面的链接显示了focus() 和()如何工作。注意他们工作一
次后可能会终止功能。
Mouseover to focus Mouseover to select

以下为表单和链接的编码：

<form name="method_form">

<input type="text" name="method_text" size=40 value=
"Hey, hey, we're the monkeys">

</form>

<a href="#" onMouseOver=
"window.document.method_form.method_text.focus();">
Mouseover to focus</a>

<a href="#" onMouseOver=
"window.document.method_form.method_text.select();">
Mouseover to select</a>
其使用方法和调用任何对象方法的做法是一样的：
object_name.method(). 该文字域的名称是
window.document.form_name.text_field_name，
所以用下列语句就可调用文字域的focus()方法。

window.document.method_form.method_text.focus();

>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第五页：反馈表单处理器

  • 表单也是对象；他们有自己的方法、属性、及事件
    处理器。其中有一项就是onSubmit。

    onSubmit的调用有以下两种情形：如果用户点击递
    交（Submit）按钮，或用户在文字域内按了回车
    键 。试着点击下面的Submit按钮看会发生什么情
    况。

    在Netscape中，点击一个没有结果事件处理的
    Submit按钮通常会导致刷新原有的页面。为了避免
    这种情况，你可以这样做：

<form onSubmit="return false;">

<input type="submit" value="Submit">

</form>
    试着点击下面的按钮:

    Javascript用return false阻止浏览器刷新页面。
    另一个例子是阻止一个href转向赋值的URL 。例
    如：链接

<a href="http://www.mattmarg.com/"
onClick="return false;">mattmarg!</a>
    不会转向任何URL，因为你给onClick赋值为return
    false    。

    以下是一个从用户获取信息的表单。在文字域中输入一些
    内容然后点击Return:

    Who does the monkey love:

    以下是表单的编码：

      <form name="text_entry_form"
onSubmit="monkeyLove(); return false;">

<b>Who does the monkey love: </b>

<input type="text" name="monkey_love" size="40">

</form>
    当你点击文字域中的Return时，onSubmit处理器被
    调用执行函数monkeyLove()，该函数将改变文字域
    内的值。

    如果onsubmit处理器中没有return false语句的
    话，执行函数monkeyLove()会改变文字域内容，但
    由于同时网页内容会被刷新，从而又会将文字域的
    内容返回到原有的内容。为了阻止这种现象，就必
    须在onSubmit中加入return false.

    以下是monkeyLove() 函数的内容：

      function monkeyLove()

{

    var who_it_is =
window.document.text_entry_form.monkey_love.value;

    who_it_is =
'The monkey loves ' + who_it_is;

    window.document.text_entry_form.monkey_love.value =
 who_it_is;

}
    下面这个例子中没有加入return false，你将看到会发生
    什么情况：

    Who does the monkey love:

>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第六页：文字域的练习

该练习扩展了我们在第4课中所学的东西。它使文字区域的功能就
象是浏览器的地址框（Location box）。如果你在其中输入http:
//www.mattmarg.com/ 或www.mattmarg.com，它将打开一个窗口显
示Mattmarg.com网站：

试着自己编写代码实现该功能。>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第七页：复选框

文字域和文字区域是表单的两种元素。其它的还有复选
框、单选框及下拉菜单。首先我们学习复选框。

复选框的主要属性就是：被选中（checked）。

This checkbox is checked
This checkbox is not checked

如果有一个名为the_form的表单，其中一个复选框的名称
为the_checkbox，你可一看到如果点击该复选框会发生什
么情况：

    var is_checked =
window.document.the_form.the_checkbox.checked;

if (is_checked == true)

{

        alert("Yup, it's checked!");

} else {

        alert("Nope, it's not checked.");

}
如果复选框被选中，则复选框的属性为真(true）。
真（true）是JavaScript内置的数据类型，所以你不必
对true添加引号。如果复选框未被选中，则其属性为
假（false），这也是一只内置数据类型。

你还可以设定复选框的属性。以下是设置复选框属性的一
个例子：

Checkbox 1

Click to check Checkbox 1
Click to uncheck Checkbox 1
Click to see the value of Checkbox 1

以下为代码：

<form name="form_1">

<input type="checkbox" name="check_1">Checkbox 1

</form>

<a href="#"
onClick=
"window.document.form_1.check_1.checked=true;
return false;">
Click to check Checkbox 1</a>

<a href="#"
onClick=
"window.document.form_1.check_1.checked=false;
return false;">
Click to uncheck Checkbox 1</a>

<a href="#"
onClick="alert(window.document.form_1.check_1.checked); return false;">
Click to see the value of Checkbox 1</a>
注意我在链接中始终加入了return false，以防止浏览器
刷新页面又回到原来的内容。

复选框的事件处理器是onClick。当某人点击复选框
时，onClick事件处理器即发挥作用。以下为其使用实例。

The Light Switch

该例子中，表单应用了onClick复选框处理器：

<form name="form_2">

<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch

</form>
当某人点击复选框时，onClick处理器被激活并执行函
数switchLight()，以下为函数switchLight() 的编码（它
置于网页首部中):

function switchLight()

{

        var the_box = window.document.form_2.check_1;

        var the_switch = "";

        if (the_box.checked == false) {

                alert("Hey! Turn that back on!");

                document.bgColor='black';

        } else {

                alert("Thanks!");

                document.bgColor='white';

        }

}
第一行：

var the_box = window.document.form_2.check_1;
将复选框对象赋值给一个变量。这样可以缩小编程长度，
还可以将对象作为参数传递给函数。

>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第八页：单选框

在JavaScript中单选框的用法和复选框是否相似。不同之处
在于HTML中的应用。复选框是一种开关。如果一个复选框被
选中，你可以再点击后取消选取. 但如果单选框被选中，则
只能通过选取另外一个单选框才能取消对该单选框的选取。例：

Larry
Moe
Curly

在该例中，如果你打算取消对对一个单选框的选取，你必须
集电极另一个单选框。用这种概念我们可以用两个单选框的
设为代替一个复写纸的试着发式：

Light off
Light on

表单编码如下：

    <form name="form_1">

<input type="radio" name ="radio_1"
onClick="offButton();">Light off

<input type="radio" name ="radio_2"
onClick="onButton();" checked>Light on

</form>
当第一个单选框被选中时，函数offButton() 被调用。函数
如下：
    function offButton()

{

var the_box =
window.document.form_1.radio_1;

if (the_box.checked == true)
{
window.document.form_1.radio_2.checked = false;

document.bgColor='black';

alert("Hey! Turn that back on!");

}

}
这个例子很象前面的复选框例子，主要的区别在于该行：
    window.document.form_1.radio_2.checked = false;
该行指令指示JavaScript在该按钮被点击时关闭另外一个
按钮。由于另外一个按钮的函数同这个很相似：
    function onButton()

{

var the_box = window.document.form_1.radio_2;

if (the_box.checked == true)
 {

window.document.form_1.radio_1.checked = false;

document.bgColor='white';

alert("Thanks!");

}

}

>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第九页：选单

选单是我们所学的表单选项中最奇特的一种。有两种基本的
格式：下列选单和列表选单。以下为例子：

下列选单:

列表选单:

它的奇特之处在于这个选单有名称，但其中的各个选项没有
名称。例如，在HTML中，第1个选单如下：

<select name="pulldown_1" size=1>

<option>probiscus

<option>spider

<option>lemur

<option>chimp

<option>gorilla

<option>orangutan

</select>
注意这个选单的名称是pulldown_1，但各个选项没有名称。
所以要调用其中的各个选项则有点困难。

幸好数组可以帮助我们调用其中的选项。如果你想改变该下
列选单中的第2个选项，你可以这样做：

window.document.form_1.pulldown_1.options[1].text = 'new_text';
这是因为选单的元素有一个选项属性，而该属性是选单所
有选项的集合而成的数组。点击change the select然后从
下拉选单从下列选单中查看其选项是否已经被改变。现在
第2个选项应该是*thau*。

除了选项属性，选单还有一项属性叫做selectedIndex。大
笔一个选项被选择后，selectedIndex属性将变成被选项的
数组索引号（序列号）。选择第2个列表选单中的一个选项，
然后检查索引号。记住数组中的第1个选项的索引号是0。

    <a href="#" onClick="alert('index is: ' +
window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>
表单的名称是form_1，列表选单的名称是list_1。
selectedIndex属性值为
window.document.form_1.list_1.selectedIndex。你还可
以将selectedIndex设置如下：
    window.document.form_1.list_1.selectedIndex = 1;
并高亮度显示第2个选项。

一旦你得到被选项的索引号，你就可以发现其内容：

var the_select =
window.document.form_1.list_1;

var the_index =
the_select.selectedIndex;

var the_selected =
the_select.options[the_index].text;
selectedIndex属性很有用，但如果有多个选项同时被选中，
会如何呢？有关这方面的内容请阅读multiple selects。

选单元素的处理器为onChange()。当选单发生变化时，则
该处理器被激活。

>>

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令


JavaScript教程

JavaScript教程 - 第五课
Thau

第十页：在选单中应用onchange命令

尝试这个例子并阅读下面的注释：

My favorite animal is ...

注释一个比较复杂的JavaScript程序。首先，我们看看表单
本身：

<form name="the_form">

<select name="choose_category"

onChange=
"swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);">

<option selected>Dogs

<option>Fish

<option>Birds

</select>

<select name="the_examples" multiple>

<option>poodle

<option>puli

<option>greyhound      .

</select>

>/form>
该表单有两个元素：一个下拉选单和一个列表选单。下列
选单的处理器调用函数swapOptions()。该函数在首部已经
作了定义，其参数为- 被选的动物种类。

首部中我首先定义的几个数组：

var dogs = new Array("poodle","puli","greyhound");

var fish = new Array("trout", "mackerel", "bass");

var birds = new Array("robin", "hummingbird", "crow");
注意这些数组的命名和下拉选单中的命名一致。很快你就会
明白为什么。现在我们看看当下拉选单被改变时被调用的
函数：

function swapOptions(the_array_name)

{

    var numbers_select = window.document.the_form.the_examples;

    var the_array = eval(the_array_name);

    setOptionText(window.document.the_form.the_examples, the_array);

}
该函数的定义包括一个参数：the_array_name。如果打开下
拉选单并选择"Fish" ，则the_array_name就等同于字符串
"Fish"。

函数主体中第1行包括一个变量用于引用第2个表单元素：列
表选单。

第2行引入一个新概念：eval()。eval()比较奇特，我们留
在以后的课程中讲解。第2行命令的这些结果是变量the_array
将等同于前面所定义的数组之一。如果the_array_name是
"Fish"，the_array则等同于Fish数组。如果你想了解这是
怎么作的，请学习eval。

第3行定义另一个函数setOptionText()。setOptionText()
用于将the_array赋值给列表选单。以下为该函数内容：

function setOptionText(the_select, the_array)

{

    for (loop=0; loop < the_select.options.length; loop++)

    {

        the_select.options[loop].text = the_array[loop];

    }

}
该函数有两个参数：对选单元素的引用和一个数组。第1行
设立一个for循环，由于循环所有的选单元素。注意选单元
素的选项属性是该选单所有选项组成的数组。因为它是一个
数组，你可以用长度（length）属性发现数组的元素数目。

第1次循环时，循环变量值是0。循环的主体值为：

the_select.options[0].text = the_array[0];

如果你在下拉选单中选择了"Fish"，则the_array[0]就是
"trout"，所以该行命令将列表选单中的第1个选项改成
"trout" 。下一次循环时，循环等于1，并且列表选单中第2
个选项则是 "mackerel" 。

注意，当你改变一个选项的文字时，并不能改变选单的尺寸，
所以如果你所改变后的文字很长的话，其后面的部分可能会
被切去。

变通方法是扩展选单的长度：

<option>greyhound 。

注意：我用了一个句号来扩展选单框的长度。这个办法很
管用。

如果你理解了该例子，你对JavaScript的了解就比较深了。

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令