?? day2_6.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高級教程</title>
<script language="JavaScript">
<!-- hide me
var phone_book = new
Array();
phone_book["happy"] = "(203) 555-1234";
phone_book["sleepy"] = "(203) 555-2345";
phone_book["sneezy"] = "(203) 555-4321";
phone_book["sleazy"] = "(203) 555-3245";
phone_book["sneery"] = "(203) 555-3213";
phone_book["bleary"] = "(203) 555-2365";
phone_book["tweaked"] = "(203) 555-1664";
function
displayNumber(phone_book, entry)
{
var the_number = phone_book[entry];
window.document.the_form.number_box.value =
the_number;
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高級教程 - 第二課</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第六頁：相關數組的一個例子</strong><b>
<p>電話號碼本</p>
</b>
<form name="the_form">
<p><b>Name:</b>
<select onchange="displayNumber(phone_book, this.options[selectedIndex].value);" size="1">
<option value="happy">Happy </option>
<option value="sleepy">Sleepy </option>
<option selected value="sneezy">Sneezy </option>
<option value="sleazy">Sleazy </option>
<option value="sneery">Sneery </option>
<option value="bleary">Bleary </option>
<option value="tweaked">Tweaked</option>
</select>
</p>
<p><b>Number:</b>
<input name="number_box" size="20">
</p>
</form>
<p> </p>
<p>這個例子比較復雜，我們來慢慢研究它．首先我們看一看電話<br>
號碼簿本身．它在文件頭中定義為phone_book，有７條輸入項：
<ul>
<pre><font face="宋體">
var phone_book = new
Array();
phone_book["happy"] = "(203) 555-1234";
phone_book["sleepy"] =
"(203) 555-2345";
phone_book["sneezy"] = "(203)
555-4321";
phone_book["sleazy"] = "(203) 555-3245";
phone_book["sneery"]
= "(203) 555-3213";
phone_book["bleary"] = "(203)
555-2365";
phone_book["tweaked"] = "(203)
555-1664";
</font></pre>
</ul>
<p>每條記錄的關鍵字是小矮人的名字，而每條記錄的值就是該小<br>
矮人的電話號碼．假設我們需要找到某個小矮人的電話號碼，<br>
例如Sneezy的電話號碼，我們這樣寫：
<ul>
<pre><font face="宋體">
var the_number = phone_book["sneezy"];
</font></pre>
</ul>
<p>現在我們看看這個表單：
<ul>
<pre><font face="宋體"><form name="the_form">
<b>Name:</b>
<select onChange = "displayNumber(phone_book,
this.options[selectedIndex].value);">
<option value="happy">Happy
<option value="sleepy">Sleepy
<option
value="sneezy">Sneezy
<option value="sleazy">Sleazy
<option
value="sneary">Sneery
<option value="bleary">Bleary
<option
value="tweaked">Tweaked
</select>
<p>
<b>Number:</b>
<input type="text" name="number_box"
value="">
</form>
</font></pre>
</ul>
<p>注意表單和表單內的元素都有名稱，這樣以來便于我們讀取和<br>
寫入表單元素．</p>
<p>注意select標簽中的onChange處理器的用法：當所選擇的選項<br>
變化時，它就調用函數displayNumber，該函數在文件頭中已做<br>
了定義．如果我在下拉選單中選擇了sneezy，則表達式<br>
this.options [selectedIndex].value 返回"sneezy"，如果你<br>
對該部分的內容不熟悉，請先閱讀上次的<a href="../course/day5_1.html">javascript教程－第5日</a><br>
的內容．</p>
<p>確定了用戶所選擇的選項之后，我們進入函數displayNumber：
<ul>
<pre><font face="宋體">
function
displayNumber(phone_book, entry)
{
var the_number = phone_book[entry];
window.document.the_form.number_box.value =
the_number;
}
</font></pre>
</ul>
<p>它使用了兩個參數－一個電話號碼簿和一個名稱，在函數第1<br>
行中，
<ul>
<pre><font face="宋體">
var the_number =
phone_book[entry];
</font></pre>
</ul>
<p>觀察一下電話號碼簿上的名字，然后進入下一行，
<ul>
<pre><font face="宋體">
window.document.the_form.number_box.value
= the_number;
</font></pre>
</ul>
<p>填入表單元素的數字命名為number_box．</p>
<p>你可以看到相關數組是將一個字符串連接到另一個字符串的好<br>
辦法．你可以利用相關數組將名字連接到電話號碼，密碼，生<br>
日以及其他各種資料．在之后的課程中我將向你們介紹利用相<br>
關數組可以做的各種有用的技巧．<a href="day2_7.html">>></a></p>
<p><font face="宋體" size="3" color="#000000"><strong>JavaScript高級教程</strong></font><font color="#FF0000" face="宋體" size="3"><br>
</font><font color="#FF0000">第一頁</font> <a href="day2_1.html">Javascript高級教程-第2日</a><br>
<font color="#FF0000">第二頁</font> <a href="day2_2.html">神奇的字符串處理</a><br>
<font color="#FF0000">第三頁</font> <a href="day2_3.html">子字符串</a><br>
<font color="#FF0000">第四頁</font> <a href="day2_4.html">分割方法(splitting
method)</a><br>
<font color="#FF0000">第五頁</font> <a href="day2_5.html">相關數組</a><br>
<font color="#FF0000">第六頁</font> 相關數組的一個例子<br>
<font color="#FF0000">第七頁</font> <a href="day2_7.html">介紹cookie</a><br>
<font color="#FF0000">第八頁</font> <a href="day2_8.html">深入了解cookies</a><br>
<font color="#FF0000">第九頁</font> <a href="day2_9.html">讀取cookies</a><br>
<font color="#FF0000">第十頁</font> <a href="day2_10.html">復雜的cookies讀取</a><br>
<font color="#FF0000">第十一頁</font> <a href="day2_11.html">讀取和編寫多重cookies</a><br>
<font color="#FF0000">第十二頁</font> <a href="day2_12.html">再次深入了解cookies</a><br>
<font color="#FF0000">第十三頁</font> <a href="day2_13.html">cookie路徑和域</a></p>
<p><font size="3">[<a href="day1_1.html">第1課</a>][第2課][<a href="day3_1.html">第3課</a>][<a href="day4_1.html">第4課</a>][<a href="day5_1.html">第5課</a>]</font></p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根據
網猴 相關文章改編，版權歸原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -