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