📄 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 mevar phone_book = newArray();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";functiondisplayNumber(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 = newArray();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<optionvalue="sneezy">Sneezy<option value="sleazy">Sleazy<optionvalue="sneary">Sneery<option value="bleary">Bleary<optionvalue="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="宋体">functiondisplayNumber(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 + -