⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 tutorial5_page4.htm

📁 java学习
💻 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>

&lt;input type=&quot;text&quot; name=&quot;first_text&quot; 

	onFocus=&quot;writeIt('focus');&quot; 

	onBlur=&quot;writeIt('blur');&quot; 

	onChange=&quot;writeIt('change');&quot;&gt;

</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>

&lt;head&gt;

&lt;title&gt;Text Field Events&lt;/title&gt;

&lt;script language=&quot;JavaScript&quot;&gt;

&lt;!-- hide me

function writeIt(the_word)

{

	var word_with_return = the_word + &quot;\n&quot;;

	window.document.first_form.the_textarea.value += 

		word_with_return;

}

// show me --&gt;

&lt;/script&gt;

&lt;/head&gt;
</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 + &quot;\n&quot;;
</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>&quot;\n&quot;</tt><font FACE="宋体"
    LANG="ZH-CN" SIZE="2">.</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2">。注意</font><tt>&quot;\n&quot;</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>

&lt;form name=&quot;method_form&quot;&gt;

&lt;input type=&quot;text&quot; name=&quot;method_text&quot; size=40 value=
&quot;Hey, hey, we're the monkeys&quot;&gt;

&lt;/form&gt;



&lt;a href=&quot;#&quot; onMouseOver=
&quot;window.document.method_form.method_text.focus();&quot;&gt;
Mouseover to focus&lt;/a&gt;

&lt;a href=&quot;#&quot; onMouseOver=
&quot;window.document.method_form.method_text.select();&quot;&gt;
Mouseover to select&lt;/a&gt;
</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 + -