📄 tutorial5_page10.htm
字号:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
<title>Webmonkey: javascript: Thau's JavaScript Tutorial: Day 1</title>
<meta NAME="keywords"
CONTENT="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder, pag">
<meta NAME="description"
CONTENT="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta NAME="Template" CONTENT="E:\LIZEJUN\OFFICE\html.dot">
</head>
<body TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff">
<table CELLSPACING="0" BORDER="0" CELLPADDING="3" WIDTH="702">
<tr>
<td WIDTH="77%" VALIGN="MIDDLE"><font FACE="宋体" LANG="ZH-CN" SIZE="4" COLOR="#ff0000"></font><b><font
FACE="System,黑体" LANG="ZH-CN" SIZE="5" COLOR="#ff0000">第</font><font FACE="宋体"
LANG="ZH-CN" SIZE="5" COLOR="#ff0000">10</font><font FACE="System,黑体" LANG="ZH-CN"
SIZE="5" COLOR="#ff0000">页：在表单元素中应用onchange</font></b><font
FACE="宋体" LANG="ZH-CN"><br>
<!-- BYLINE --> </font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2">作者：</font><a
HREF="mailto:thau@wired.com"><font FACE="宋体" LANG="ZH-CN" SIZE="2">Thau!</font></a><font
FACE="宋体" LANG="ZH-CN"> <!-- SEE ALSO LINKS --></font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">尝试这个例子并阅读下面的注释：</font>
<h2>My favorite animal is ...</h2>
<form>
<font FACE="宋体" LANG="ZH-CN"><p><select NAME="choose_category" size="1">
<option SELECTED>dogs </option>
<option>fish </option>
<option>birds </option>
</select> <select MULTIPLE NAME="the_examples" SIZE="1">
<option>poodle </option>
<option>puli </option>
<option>greyhound . </option>
</select> </font></p>
</form>
<font FACE="System,黑体" LANG="ZH-CN"><p>注释一个比较复杂的</font><font
FACE="宋体" LANG="ZH-CN">JavaScript</font><font FACE="System,黑体" LANG="ZH-CN">程序。首先，我们<br>
看看表单本身：</font> </td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"><pre>
</font><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>
</pre>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">该表单有两个元素：一个下拉选单和一个列表选<br>
单。下列选单的处理器调用函数</font><tt>swapOptions()</tt><font
FACE="System,黑体" LANG="ZH-CN">。<br>
该函数在首部已经作了定义，其参数为</font><font FACE="宋体" LANG="ZH-CN">-
</font><font FACE="System,黑体" LANG="ZH-CN">被选的动<br>
物种类。<p>首部中我首先定义的几个数组：</font> </td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"><pre>
</font>var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");
</pre>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">注意这些数组的命名和下拉选单中的命名一致。很<br>
快你就会明白为什么。现在我们看看当下拉选单被<br>
改变时被调用的函数：</font> </td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"><pre>
</font>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);
}
</pre>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">该函数的定义包括一个参数：</font><tt>the_array_name</tt><font
FACE="System,黑体" LANG="ZH-CN">。如<br>
果打开下拉选单并选择</font><font FACE="宋体" LANG="ZH-CN">"Fish" </font><tt><font
FACE="System,黑体" LANG="ZH-CN">，则</font><font FACE="宋体" LANG="ZH-CN">the_array_name</font></tt><font
FACE="System,黑体" LANG="ZH-CN"> <br>
就等同于字符串</font><font FACE="宋体" LANG="ZH-CN">"Fish"</font><font
FACE="System,黑体" LANG="ZH-CN">。<p>函数主体中第</font><font FACE="宋体"
LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">行包括一个变量用于引用第</font><font
FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">个表单<br>
元素：列表选单。</p>
<p>第</font><font FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体"
LANG="ZH-CN">行引入一个新概念：</font><tt>eval()</tt><font FACE="System,黑体"
LANG="ZH-CN">。</font><tt>eval()</tt><font FACE="System,黑体" LANG="ZH-CN">比较奇<br>
特，我们留在以后的课程中讲解。第</font><font FACE="宋体" LANG="ZH-CN">2</font><font
FACE="System,黑体" LANG="ZH-CN">行命令的这<br>
些结果是变量</font><tt>the_array</tt><font FACE="System,黑体" LANG="ZH-CN">将等同于前面所定义的数<br>
组之一。如果</font><tt>the_array_name</tt><font FACE="System,黑体" LANG="ZH-CN">是</font><font
FACE="宋体" LANG="ZH-CN">"Fish" </font><tt><font FACE="System,黑体"
LANG="ZH-CN">，<br>
</font><font FACE="宋体" LANG="ZH-CN">the_array</font></tt><font FACE="System,黑体"
LANG="ZH-CN">则等同于</font><font FACE="宋体" LANG="ZH-CN">Fish</font><font
FACE="System,黑体" LANG="ZH-CN">数组。如果你想了解这是<br>
怎么作的，请学习</font><a HREF="tppmsgs/msgs1.htm#101"><font FACE="宋体"
LANG="ZH-CN">eval</font></a><font FACE="System,黑体" LANG="ZH-CN">。</font> </p>
<font FACE="System,黑体" LANG="ZH-CN"><p>第</font><font FACE="宋体" LANG="ZH-CN">3</font><font
FACE="System,黑体" LANG="ZH-CN">行定义另一个函数</font><tt>setOptionText()</tt><font
FACE="System,黑体" LANG="ZH-CN">。</font> <br>
<tt>setOptionText()</tt><font FACE="宋体" LANG="ZH-CN"> </font><font
FACE="System,黑体" LANG="ZH-CN">用于将</font><tt>the_array</tt><font
FACE="System,黑体" LANG="ZH-CN">赋值给列表选单。以下为该函数内容：</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
</pre>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">该函数有两个参数：对选单元素的引用和一个数<br>
组。第</font><font FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体"
LANG="ZH-CN">行设立一个</font><font FACE="宋体" LANG="ZH-CN">for</font><font
FACE="System,黑体" LANG="ZH-CN">循环，由于循环所有的选单<br>
元素。注意选单元素的选项属性是该选单所有选项<br>
组成的数组。因为它是一个数组，你可以用长度<br>
（</font><font FACE="宋体" LANG="ZH-CN">length</font><font FACE="System,黑体"
LANG="ZH-CN">）属性发现数组的元素数目。</font><font FACE="宋体"
LANG="ZH-CN"> </font><font FACE="System,黑体" LANG="ZH-CN"><p>第</font><font
FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">次循环时，循环变量值是</font><font
FACE="宋体" LANG="ZH-CN">0</font><font FACE="System,黑体" LANG="ZH-CN">。循环的主体值为：<br>
<br>
</font><font FACE="宋体" LANG="ZH-CN">the_select.options[0].text = the_array[0];<br>
<br>
</font><font FACE="System,黑体" LANG="ZH-CN">如果你在下拉选单中选择了</font><font
FACE="宋体" LANG="ZH-CN">"Fish"</font><font FACE="System,黑体" LANG="ZH-CN">，则</font><tt>the_array<br>
[0]</tt><font FACE="System,黑体" LANG="ZH-CN">就是</font><font FACE="宋体"
LANG="ZH-CN">"trout"</font><font FACE="System,黑体" LANG="ZH-CN">，所以该行命令将列表选单中的第<br>
</font><font FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">个选项改成</font><font
FACE="宋体" LANG="ZH-CN">"trout" </font><font FACE="System,黑体"
LANG="ZH-CN">。下一次循环时，循环等于<br>
</font><font FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">，并且列表选单中第</font><font
FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">个选项则是</font><font
FACE="宋体" LANG="ZH-CN"> "mackerel" </font><font FACE="System,黑体"
LANG="ZH-CN">。</p>
<p>注意，当你改变一个选项的文字时，并不能改变选<br>
单的尺寸，所以如果你所改变后的文字很长的话，<br>
其后面的部分可能会被切去。</font><font FACE="宋体" LANG="ZH-CN"> </p>
</font><font FACE="System,黑体" LANG="ZH-CN"><p>变通方法是扩展选单的长度：<br>
<br>
</font><font FACE="宋体" LANG="ZH-CN"><option>greyhound </font><font
FACE="System,黑体" LANG="ZH-CN">。<br>
</p>
<p>注意：我用了一个句号来扩展选单框的长度。这个<br>
办法很管用。</p>
<p>如果你理解了该例子，你对</font><font FACE="宋体" LANG="ZH-CN">JavaScript</font><font
FACE="System,黑体" LANG="ZH-CN">的了解就比<br>
较深了。</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><!-- PAGE X LINKS --><!-- this stuff checks if there are more pages in this story. if so, we'll
suck out the titles of those pages and build links. Right now, the maximum is
15 pages. --><!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> <font FACE="System,黑体" LANG="ZH-CN"><p>第</font><font
FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page1.htm">第</font><font FACE="宋体" LANG="ZH-CN">5</font><font
FACE="System,黑体" LANG="ZH-CN">日课程介绍</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page2.htm">介绍反馈表单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">3</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page3.htm">控制文字域的值</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">4</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page4.htm">文字域事件</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">5</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page5.htm">反馈表单处理器</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">6</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page6.htm">文字域的练习</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">7</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page7.htm">复选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">8</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page8.htm">单选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">9</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page9.htm">选单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">10</font><font FACE="System,黑体"
LANG="ZH-CN">页：<a HREF="tutorial5_page10.htm">在选单中应用</font><font
FACE="宋体" LANG="ZH-CN">onchange</font><font FACE="System,黑体" LANG="ZH-CN">命令</a><br>
</p>
<p> </p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="4"><p><br>
</p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> </font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE"></td>
</tr>
</table>
<font FACE="System,黑体" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -