第五课

---《网猴》

现在你已经了解了计算机编程的基本知识。我们接下来继续研
究一下文件对象模块（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中应用反馈表单。

介绍反馈表单
　

反馈表单是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;

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

控制文字域的值
将鼠标滑过该链接看看会发式什么事情。


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还可以让你检测在
表单中进行的事件。>>

文字域事件
　

文字域可以链接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">



</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();

反馈表单处理器
　

表单也是对象；他们有自己的方法、属性、及事件
处理器。其中有一项就是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: