JavaScript教程

keaide · 发表于 2006-5-28 22:01

第四页：文字域事件
　

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

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

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

onFocus="writeIt('focus');"

onBlur="writeIt('blur');"

onChange="writeIt('change');">

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

keaide · 发表于 2006-5-28 22:01

<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

keaide · 发表于 2006-5-28 22:01

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

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

>>

keaide · 发表于 2006-5-28 22:02

第五页：反馈表单处理器
　

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

keaide · 发表于 2006-5-28 22:02

第六页：文字域的练习
　

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

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

keaide · 发表于 2006-5-28 22:02

第七页：复选框
　

文字域和文字区域是表单的两种元素。其它的还有复选
框、单选框及下拉菜单。首先我们学习复选框。
复选框的主要属性就是：被选中（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

以下为代码：

keaide · 发表于 2006-5-28 22:02

<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() 的编码（它
置于网页首部中):

keaide · 发表于 2006-5-28 22:02

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;

将复选框对象赋值给一个变量。这样可以缩小编程长度，
还可以将对象作为参数传递给函数。

>>

keaide · 发表于 2006-5-28 22:03

第八页：单选框
　

在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!"

;

}

}

>>

keaide · 发表于 2006-5-28 22:03

第九页：选单
　

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

列表选单:
probiscus spider lemur chimp gorilla orangutan

它的奇特之处在于这个选单有名称，但其中的各个选项没有
名称。例如，在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';

JavaScript教程

浏览过的版块