?? javascript8.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>網(wǎng)頁教程－JavaScript技術(shù)講座:第八講 WEB頁面信息的交互</title>
</head>
<body>
<p><span class="text">您現(xiàn)在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主頁</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">網(wǎng)絡(luò)教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主頁工廠</a>－JavaScript技術(shù)講座:第八講
WEB頁面信息的交互</span></p>
<p align="center"><small><a href="JavaScript7.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript7.htm">上一頁</a>
<a href="JavaScript9.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript9.htm">下一頁</a></small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技術(shù)講座<br>
第八講 WEB頁面信息的交互</span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="justify"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 要實現(xiàn)動態(tài)交互，必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>一、窗體基礎(chǔ)知識</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗體對象可以使設(shè)計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實現(xiàn)動態(tài)改變Web文檔的行為。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１、什么是窗體對象</b></font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">窗體（Form）:它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。</font></span></p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form
Name=Form1></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><INPUT
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Input
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Inpup
byne=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><form
Name=Form2></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><INPUT
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Input
type=text...></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Form</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Name
="表的名稱"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Target
="指定信息的提交窗口"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">action
="接收窗體程序?qū)?yīng)的URL"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Method
=信息數(shù)據(jù)傳送方式(get/post)</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">enctype
="窗體編碼方式"</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">[onsubmit
="JavaScript代碼"]></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></Form></font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>２、窗體對象的方法</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式：</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.mytest.submit()</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>３、窗體對象的屬性</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 窗體對象中的屬性主要包括以下：elements
name action target encoding method.</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 除Elements外，其它幾個均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài)，這通常是單個窗體標(biāo)識；而elements常常是多個窗體元素值的數(shù)組，例：
</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">elements[0].Mytable.elements[1]</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>４、訪問窗體對象</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">在JavaScript中訪問窗體對象可由兩種方法實現(xiàn)：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（１）通過訪問窗體</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標(biāo)識訪問窗體如：document.Mytable()。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">（２）通過數(shù)組來訪問窗體</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。所以可通過下列格式實現(xiàn)窗體對象的訪問：</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[0]</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[1]</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.forms[2]...</font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>５、引用窗體的先決條件</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"> 在JavaScript中要對窗體引用的條件是：必須先在頁面中用標(biāo)識創(chuàng)建窗體，并將定義窗體部分放在引用之前。</font></span></p>
<p align="justify"> </p>
<p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>二、窗體中的基本元素</b></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。<br>
在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:</font></span></p>
<dir>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">formName.elements[].methadName
(窗體名.元素名或數(shù)組.方法)</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)</font></span></p>
<p align="justify"> </p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">下面分別介紹：</font></span></p>
<p align="justify"> </p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１、Text單行單列輸入元素</b></font></span></p>
<dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字節(jié))"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 功能：對Text標(biāo)識中的元素實施有效的控制。</font></span></p>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字節(jié))"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 基本屬性：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Name：設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">defaultvalue：包括Text元素的默認(rèn)值</font></span></p>
</dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字節(jié))"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 基本方法：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">blur()：將當(dāng)前焦點移到后臺。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">select()：加亮文字。</font></span></p>
</dir>
<p align="justify"><img src="javascript/Bullet1.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet1.gif" width="13" height="13"
alt="Bullet1.gif (122 字節(jié))"><span style="color: rgb(125,125,125)" class="text"><font
lang="ZH-CN"> 主要事件：</font></span></p>
<dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">onFocus：當(dāng)Text獲得焦點時，產(chǎn)生該事件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">OnBlur：從元素失去焦點時，產(chǎn)生該事件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">onchange：當(dāng)Text元素值改變時，產(chǎn)生該文件。</font></span></p>
</dir>
</dir>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">例：...</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><Form
name="test"></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><input
type="text" name="test" value="this is a javascript" ></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"></form></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">...</font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><script
language ="Javascirpt"></font></span></p>
<p align="justify"><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.mytest.value="that
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -