?? tutorial5_page4.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="923">
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3"><font FACE="宋體" LANG="ZH-CN" SIZE="4"
COLOR="#ff0000"></font><b><font FACE="System,黑體" LANG="ZH-CN" SIZE="4" COLOR="#ff0000">第</font><font
FACE="宋體" LANG="ZH-CN" SIZE="4" COLOR="#ff0000">4</font><font FACE="System,黑體"
LANG="ZH-CN" SIZE="4" COLOR="#ff0000">頁：文字域事件</font></b><font
FACE="System,黑體" 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="75%" VALIGN="MIDDLE" COLSPAN="3" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN">文字域可以鏈接</font><tt>onBlur</tt><font FACE="System,黑體"
LANG="ZH-CN">、</font><tt>onFocus</tt><font FACE="System,黑體" LANG="ZH-CN">、和</font><tt>onChange</tt><font
FACE="System,黑體" LANG="ZH-CN">事件。<tt>當有<br>
人點擊文字域的里邊時則發生</font>onFocus</tt><font FACE="System,黑體"
LANG="ZH-CN">事件。而如果點擊文<br>
字域的外面或按了</font><font FACE="宋體" LANG="ZH-CN">tab</font><font
FACE="System,黑體" LANG="ZH-CN">鍵時則發生</font><font FACE="宋體" LANG="ZH-CN">onblur</font><font
FACE="System,黑體" LANG="ZH-CN">事件。如果有人改<br>
變了文字域內的內容然后轉到文字域外部的區域時則發生<br>
</font><tt>onChange</tt><font FACE="System,黑體" LANG="ZH-CN">事件。</font><font
FACE="宋體" LANG="ZH-CN"> </font><font FACE="System,黑體" LANG="ZH-CN"><p>試著做這些事情看下面的文字域會發生什么情況。</p>
<form>
</font><font FACE="宋體" LANG="ZH-CN"><p><input TYPE="text" NAME="first_text" size="20">
</p>
<p><textarea ROWS="10" COLS="60" NAME="the_textarea"></textarea> </font></p>
</form>
<font FACE="System,黑體" LANG="ZH-CN"><p>以下是編制方法：文字域的編碼：</font></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="TOP" COLSPAN="3" BGCOLOR="#ffffff"><dir>
<pre><big>
<input type="text" name="first_text"
onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN">每一個事件處理器調用函數</font><tt>writeIt()</tt><font
FACE="System,黑體" LANG="ZH-CN">，該函數在<br>
首部中已作了定義。首部中的編碼如下：</font><font FACE="宋體"
LANG="ZH-CN"> </font></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="TOP" COLSPAN="3" BGCOLOR="#ffffff"><pre>
<head>
<title>Text Field Events</title>
<script language="JavaScript">
<!-- hide me
function writeIt(the_word)
{
var word_with_return = the_word + "\n";
window.document.first_form.the_textarea.value +=
word_with_return;
}
// show me -->
</script>
</head>
</pre>
</td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN"></font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">前幾行是典型的</font><font
FACE="宋體" LANG="ZH-CN" SIZE="2">JavaScript</font><font FACE="System,黑體"
LANG="ZH-CN" SIZE="2">預定義。主體中的第</font><font FACE="宋體" LANG="ZH-CN"
SIZE="2">1<br>
</font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">行</font></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="TOP" COLSPAN="3" BGCOLOR="#ffffff"><pre>
var word_with_return = the_word + "\n";
</pre>
</td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN"></font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">將一個變量</font><tt>word_with_return</tt><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">進行初始化為函數處<br>
理后的字符串并加上換行符</font><tt>"\n"</tt><font FACE="宋體"
LANG="ZH-CN" SIZE="2">.</font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">。注意</font><tt>"\n"</tt><font
FACE="宋體" LANG="ZH-CN" SIZE="2"> </font><font FACE="System,黑體" LANG="ZH-CN"
SIZE="2">是標<br>
準的計算機指令。</font><font FACE="宋體" LANG="ZH-CN" SIZE="2"> </font><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2"><p>下一行</font></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="TOP" COLSPAN="3" BGCOLOR="#ffffff"><pre>
window.document.first_form.the_textarea.value += word_with_return;
</pre>
</td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN"></font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">將文字區域的值設置為其原值加新變量。其作用相<br>
當于</font><font FACE="宋體" LANG="ZH-CN" SIZE="2"> </font></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="TOP" COLSPAN="3" BGCOLOR="#ffffff"><pre>
window.document.first_form.the_textarea.value =
window.document.first_form.the_textarea.value + word_with_return;
</pre>
</td>
</tr>
<tr>
<td WIDTH="45%" VALIGN="MIDDLE" COLSPAN="2" BGCOLOR="#ffffff"><font FACE="System,黑體"
LANG="ZH-CN"></font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">目前我們已經學習了文字域和文字區域（值）的屬性，接下<br>
來我們學習文字域和文字區域處理所用的方法：</font><tt>blur()</tt><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">、<br>
</font><tt>focus()</tt><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">、和</font><tt>select()<font
FACE="System,黑體" LANG="ZH-CN">。</font></tt><font FACE="System,黑體" LANG="ZH-CN"
SIZE="2"><p>下面的鏈接顯示了</font><tt>focus()</tt><font FACE="宋體"
LANG="ZH-CN" SIZE="2"> </font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2">和</font><tt>()</tt><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">如何工作。注意他們工作一<br>
次后可能會終止功能。</font></td>
<td WIDTH="30%" VALIGN="MIDDLE" BGCOLOR="#ffffff"></td>
</tr>
<tr>
<td WIDTH="45%" VALIGN="MIDDLE" COLSPAN="2" BGCOLOR="#ffffff"><form>
<font FACE="宋體" LANG="ZH-CN" SIZE="2"><p><input TYPE="text" NAME="method_text"
VALUE="Hey, hey, we're the monkeys" size="20"> </font></p>
</form>
</td>
<td WIDTH="30%" VALIGN="MIDDLE" ROWSPAN="2" BGCOLOR="#ffffff"></td>
</tr>
<tr>
<td WIDTH="22%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN"></font><font
FACE="宋體" LANG="ZH-CN" SIZE="2"><a HREF="#"><b>錯誤！超級鏈接引用無效。</b></a>
</font></td>
<td WIDTH="23%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN"></font><font
FACE="宋體" LANG="ZH-CN" SIZE="2"><a HREF="#"><b>錯誤！超級鏈接引用無效。</b></a>
</font></td>
</tr>
<tr>
<td WIDTH="22%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
<form name="method_form">
<input type="text" name="method_text" size=40 value=
"Hey, hey, we're the monkeys">
</form>
<a href="#" onMouseOver=
"window.document.method_form.method_text.focus();">
Mouseover to focus</a>
<a href="#" onMouseOver=
"window.document.method_form.method_text.select();">
Mouseover to select</a>
</pre>
</td>
<td WIDTH="23%" VALIGN="TOP" BGCOLOR="#ffffff"></td>
<td WIDTH="30%" VALIGN="TOP" ROWSPAN="3" BGCOLOR="#ffffff"></td>
</tr>
<tr>
<td WIDTH="22%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN"></font><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">其使用方法和調用任何對象方法的做法是一樣的：<br>
</font><tt>object_name.method()</tt><font FACE="宋體" LANG="ZH-CN" SIZE="2">. </font><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">該文字域的名稱是</font><font
FACE="宋體" LANG="ZH-CN" SIZE="2"> </font><font FACE="System,黑體" LANG="ZH-CN"
SIZE="2"><br>
</font><tt>window.document.form_name.text_field_name</tt><font FACE="System,黑體"
LANG="ZH-CN" SIZE="2">，</font><font FACE="宋體" LANG="ZH-CN" SIZE="2"> </font><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2"><br>
所以用下列語句就可調用文字域的</font><tt>focus()</tt><font
FACE="System,黑體" LANG="ZH-CN" SIZE="2">方法。</font><font FACE="宋體"
LANG="ZH-CN" SIZE="2"> </font></td>
<td WIDTH="23%" VALIGN="TOP" BGCOLOR="#ffffff"></td>
</tr>
<tr>
<td WIDTH="22%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
window.document.method_form.method_text.focus();
</pre>
<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><br>
</p>
</font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> 以下為表單和鏈接的編碼：</font><font FACE="宋體" LANG="ZH-CN" SIZE="2"> </font></td>
<td WIDTH="23%" VALIGN="TOP" BGCOLOR="#ffffff"></td>
</tr>
<tr>
<td WIDTH="75%" VALIGN="MIDDLE" COLSPAN="3"></td>
</tr>
</table>
<font FACE="System,黑體" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -