?? 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 + -