📄 day2_6.html
字号:
<td colspan="2"><a href="../../1-backend/cgi_perl/perl_beginner/index.html">-Perl</a>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-teach/other/index.htm">其它</a> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#666699">
<div align="center"><font color="#FFFFFF">更多教程</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="17"><a href="../../1hdml/index.html">-HDML</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">-ping</font></a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">-模板</a></td>
</tr>
<tr bgcolor="#666699">
<td colspan="2" align="center"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<!-- #EndLibraryItem --> </td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip高级教程</title>
<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" name="select">
<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>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -