?? tutorial5_page10.htm
字號(hào):
<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">頁：在表單元素中應(yīng)用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">嘗試這個(gè)例子并閱讀下面的注釋：</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>注釋一個(gè)比較復(fù)雜的</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">該表單有兩個(gè)元素：一個(gè)下拉選單和一個(gè)列表選<br>
單。下列選單的處理器調(diào)用函數(shù)</font><tt>swapOptions()</tt><font
FACE="System,黑體" LANG="ZH-CN">。<br>
該函數(shù)在首部已經(jīng)作了定義，其參數(shù)為</font><font FACE="宋體" LANG="ZH-CN">-
</font><font FACE="System,黑體" LANG="ZH-CN">被選的動(dòng)<br>
物種類。<p>首部中我首先定義的幾個(gè)數(shù)組：</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">注意這些數(shù)組的命名和下拉選單中的命名一致。很<br>
快你就會(huì)明白為什么。現(xiàn)在我們看看當(dāng)下拉選單被<br>
改變時(shí)被調(diào)用的函數(shù)：</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">該函數(shù)的定義包括一個(gè)參數(shù)：</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>函數(shù)主體中第</font><font FACE="宋體"
LANG="ZH-CN">1</font><font FACE="System,黑體" LANG="ZH-CN">行包括一個(gè)變量用于引用第</font><font
FACE="宋體" LANG="ZH-CN">2</font><font FACE="System,黑體" LANG="ZH-CN">個(gè)表單<br>
元素：列表選單。</p>
<p>第</font><font FACE="宋體" LANG="ZH-CN">2</font><font FACE="System,黑體"
LANG="ZH-CN">行引入一個(gè)新概念：</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>
些結(jié)果是變量</font><tt>the_array</tt><font FACE="System,黑體" LANG="ZH-CN">將等同于前面所定義的數(shù)<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">數(shù)組。如果你想了解這是<br>
怎么作的，請學(xué)習(xí)</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">行定義另一個(gè)函數(shù)</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">賦值給列表選單。以下為該函數(shù)內(nèi)容：</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">該函數(shù)有兩個(gè)參數(shù)：對選單元素的引用和一個(gè)數(shù)<br>
組。第</font><font FACE="宋體" LANG="ZH-CN">1</font><font FACE="System,黑體"
LANG="ZH-CN">行設(shè)立一個(gè)</font><font FACE="宋體" LANG="ZH-CN">for</font><font
FACE="System,黑體" LANG="ZH-CN">循環(huán)，由于循環(huán)所有的選單<br>
元素。注意選單元素的選項(xiàng)屬性是該選單所有選項(xiàng)<br>
組成的數(shù)組。因?yàn)樗且粋€(gè)數(shù)組，你可以用長度<br>
（</font><font FACE="宋體" LANG="ZH-CN">length</font><font FACE="System,黑體"
LANG="ZH-CN">）屬性發(fā)現(xiàn)數(shù)組的元素?cái)?shù)目。</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">次循環(huán)時(shí)，循環(huán)變量值是</font><font
FACE="宋體" LANG="ZH-CN">0</font><font FACE="System,黑體" LANG="ZH-CN">。循環(huán)的主體值為：<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">個(gè)選項(xiàng)改成</font><font
FACE="宋體" LANG="ZH-CN">"trout" </font><font FACE="System,黑體"
LANG="ZH-CN">。下一次循環(huán)時(shí)，循環(huán)等于<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">個(gè)選項(xiàng)則是</font><font
FACE="宋體" LANG="ZH-CN"> "mackerel" </font><font FACE="System,黑體"
LANG="ZH-CN">。</p>
<p>注意，當(dāng)你改變一個(gè)選項(xiàng)的文字時(shí)，并不能改變選<br>
單的尺寸，所以如果你所改變后的文字很長的話，<br>
其后面的部分可能會(huì)被切去。</font><font FACE="宋體" LANG="ZH-CN"> </p>
</font><font FACE="System,黑體" LANG="ZH-CN"><p>變通方法是擴(kuò)展選單的長度：<br>
<br>
</font><font FACE="宋體" LANG="ZH-CN"><option>greyhound </font><font
FACE="System,黑體" LANG="ZH-CN">。<br>
</p>
<p>注意：我用了一個(gè)句號(hào)來擴(kuò)展選單框的長度。這個(gè)<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">文字域的練習(xí)</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">7</font><font FACE="System,黑體" LANG="ZH-CN">頁：<a
HREF="tutorial5_page7.htm">復(fù)選框</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">在選單中應(yīng)用</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>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -