?? tutorial5_page7.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="959">
<tr>
<td WIDTH="79%" VALIGN="MIDDLE"><font FACE="宋體" LANG="ZH-CN" SIZE="4" COLOR="#ff0000"></font><b><font
FACE="System,黑體" LANG="ZH-CN" SIZE="5" COLOR="#ff0000">第</font><font FACE="宋體"
LANG="ZH-CN" SIZE="5" COLOR="#ff0000">7</font><font FACE="System,黑體" LANG="ZH-CN"
SIZE="5" 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="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN">文字域和文字區域是表單的兩種元素。其它的還有<br>
復選框、單選框及下拉菜單。首先我們學習復選<br>
框。<p>復選框的主要屬性就是：被選中（</font><font FACE="宋體"
LANG="ZH-CN">checked</font><font FACE="System,黑體" LANG="ZH-CN">）。</font> </p>
<form>
<font FACE="System,黑體" LANG="ZH-CN"><p><input TYPE="checkbox" CHECKED NAME="foo"
VALUE="ON"> </font><font FACE="宋體" LANG="ZH-CN">This checkbox is checked<br>
<input TYPE="checkbox" NAME="bar" VALUE="ON"> This checkbox is not checked</font></p>
</form>
<font FACE="System,黑體" LANG="ZH-CN"><p>如果有一個名為</font><font FACE="宋體"
LANG="ZH-CN">the_form</font><font FACE="System,黑體" LANG="ZH-CN">的表單，其中一個復選框<br>
的名稱為</font><tt>the_checkbox</tt><font FACE="System,黑體" LANG="ZH-CN">，你可一看到如果點擊該復<br>
選框會發生什么情況：</p>
</font><font FACE="System,黑體" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<big><p>var is_checked = window.document.the_form.the_checkbox.checked; if (is_checked ==
true) { alert("Yup, it's checked!"); } else { alert("Nope, it's not
checked."); } </big></p>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN">如果復選框被選中，則復選框的屬性為真</font><tt>(true</tt><font
FACE="System,黑體" LANG="ZH-CN">）。真（</font><tt>true</tt><font
FACE="System,黑體" LANG="ZH-CN">）是</font><font FACE="宋體" LANG="ZH-CN">JavaScript</font><font
FACE="System,黑體" LANG="ZH-CN">內置的數據類型，所以你不必對</font><font
FACE="宋體" LANG="ZH-CN">true</font><font FACE="System,黑體" LANG="ZH-CN">添加引號。如果復選框未被選中，則其屬性為假（</font><font
FACE="宋體" LANG="ZH-CN">false</font><font FACE="System,黑體" LANG="ZH-CN">），這也是一只內置數據類型。</font>
<font FACE="System,黑體" LANG="ZH-CN"><p>你還可以設定復選框的屬性。以下是設置復選框屬性的一個例子：</p>
<form>
<p><input TYPE="checkbox" NAME="check_1" VALUE="ON"> </font><font FACE="宋體"
LANG="ZH-CN">Checkbox 1</font></p>
</form>
<font FACE="System,黑體" LANG="ZH-CN"><p></font><font FACE="宋體" LANG="ZH-CN"><a
HREF="#"><b>錯誤！超級鏈接引用無效。</b></a> <br>
<a HREF="#"><b>錯誤！超級鏈接引用無效。</b></a> <br>
<a HREF="#"><b>錯誤！超級鏈接引用無效。</b></a> </p>
</font><font FACE="System,黑體" LANG="ZH-CN"><p>以下為代碼：</font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#" </big>
<big>onClick=</big>
<big>"window.document.form_1.check_1.checked=true; </big>
<big>return false;"></big>
<big>Click to check Checkbox 1</a>
<a href="#" </big>
<big>onClick=</big>
<big>"window.document.form_1.check_1.checked=false; </big>
<big>return false;"></big>
<big>Click to uncheck Checkbox 1</a>
<a href="#" </big>
<big>onClick="alert(window.document.form_1.check_1.checked); return false;"></big>
<big>Click to see the value of Checkbox 1</a>
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN">注意我在鏈接中始終加入了</font><tt>return
false</tt><font FACE="System,黑體" LANG="ZH-CN">，以防止瀏覽器刷新頁面又回到原來的內容。</font>
<font FACE="System,黑體" LANG="ZH-CN"><p>復選框的事件處理器是</font><tt>onClick</tt><font
FACE="System,黑體" LANG="ZH-CN">。當某人點擊復選框時，</font><tt>onClick</tt><font
FACE="System,黑體" LANG="ZH-CN">事件處理器即發揮作用。以下為其使用實例。</p>
<form>
</font><font FACE="System,黑體" LANG="ZH-CN" COLOR="#ff0000"><p><input TYPE="checkbox"
CHECKED NAME="check_1" VALUE="ON"> </font><font FACE="宋體" LANG="ZH-CN" COLOR="#ff0000">The
Light Switch </font></p>
</form>
<font FACE="System,黑體" LANG="ZH-CN"><p>該例子中，表單應用了</font><tt>onClick</tt><font
FACE="System,黑體" LANG="ZH-CN">復選框處理器：</font> </td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>
<form name="form_2">
<input type="checkbox" name ="check_1" </big>
<big>onClick="switchLight();">The Light Switch
</form>
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑體" LANG="ZH-CN">當某人點擊復選框時，</font><tt>onClick</tt><font
FACE="System,黑體" LANG="ZH-CN">處理器被激活并執行函數</font><tt>switchLight()</tt><font
FACE="System,黑體" LANG="ZH-CN">，以下為函數</font><tt>switchLight()</tt><font
FACE="宋體" LANG="ZH-CN"> </font><font FACE="System,黑體" LANG="ZH-CN">的編碼（它置于網頁首部中</font><font
FACE="宋體" LANG="ZH-CN">): </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
function switchLight()
{
var the_box = window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
document.bgColor='black';
} else {
alert("Thanks!");
document.bgColor='white';
}
}
</pre>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" 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"> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
var the_box = window.document.form_2.check_1;
</pre>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" 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"> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><!-- PAGE X LINKS --><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></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE"></td>
</tr>
</table>
<font FACE="System,黑體" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -