版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第5章客戶端腳本編程關(guān)于客戶端腳本在網(wǎng)頁(yè)中嵌入的腳本有兩種類型：一種是在服務(wù)器端執(zhí)行的，由服務(wù)器將腳本執(zhí)行的結(jié)果傳遞給瀏覽器，稱為服務(wù)器端腳本。例如，要讀取服務(wù)器上某個(gè)數(shù)據(jù)庫(kù)中的一部分內(nèi)容，這樣的程序代碼需要在服務(wù)器上執(zhí)行。另外一種是在客戶端瀏覽器上執(zhí)行的，它是由服務(wù)器將腳本的內(nèi)容傳送給瀏覽器，再由瀏覽器執(zhí)行，稱為客戶端腳本。例如，讓一幅圖片窗口中不斷移動(dòng)。不同腳本處理方式示意html文檔服務(wù)器端腳本客戶端腳本html文檔服務(wù)器端瀏覽器端客戶端腳本傳送執(zhí)行結(jié)果傳送源代碼本章內(nèi)容
瀏覽器支持的對(duì)象模型
窗口對(duì)象的使用
文檔對(duì)象的使用
常用事件的處理
表單元素的使用本章目錄5.3控制瀏覽器窗口5.2瀏覽器對(duì)象模型5.3.1與用戶交互
5.3.2查閱當(dāng)前URL
5.3.3使用定時(shí)器
5.4控制Web頁(yè)
5.5常見(jiàn)事件處理
5.3.5打開(kāi)一個(gè)新窗口
5.3.4使用窗口的History列表
5.3.6窗口的事件控制
5.1客戶端腳本
5.6表單處理
5.7應(yīng)用舉例
本章小結(jié)
習(xí)題5.1客戶端腳本
由于客戶端提供的都是以對(duì)象的形式出現(xiàn)的，所以在這里先介紹以下幾個(gè)概念。1．對(duì)象2．事件3．事件過(guò)程1．對(duì)象
瀏覽器上顯示的每個(gè)文檔都可以看作一個(gè)對(duì)象，顯示該文檔的窗口也可以看作一個(gè)對(duì)象，組成每一個(gè)網(wǎng)頁(yè)的各種元素也可以看成是一個(gè)對(duì)象。1．對(duì)象
每個(gè)對(duì)象都有一些屬性、事件和方法。對(duì)象的屬性用于體現(xiàn)對(duì)象的表現(xiàn)形式和操作特性。在瀏覽器所支持的對(duì)象模型中，各種對(duì)象中往往包含一些子對(duì)象，對(duì)于子對(duì)象的使用是通過(guò)對(duì)它的相應(yīng)屬性的操作來(lái)實(shí)現(xiàn)。每個(gè)對(duì)象可以接受一些事件，如鼠標(biāo)的單擊、聚焦等。每個(gè)對(duì)象也有一些方法，用于操作該對(duì)象或其中的子對(duì)象。2．事件
對(duì)于網(wǎng)頁(yè)中的各種對(duì)象，能響應(yīng)一些事件，編寫網(wǎng)頁(yè)時(shí)通過(guò)編寫事件過(guò)程就可以控制用戶的操作。如當(dāng)用戶單擊表單中的按鈕時(shí)，引發(fā)該按鈕的單擊事件。3．事件過(guò)程當(dāng)某一事件發(fā)送時(shí)，系統(tǒng)能自動(dòng)執(zhí)行事先編寫好的程序過(guò)程，這樣的程序過(guò)程稱為事件過(guò)程可以使用以下三種方式來(lái)為某個(gè)對(duì)象指出當(dāng)某一事件發(fā)生時(shí)該執(zhí)行的程序指定名稱的事件過(guò)程
在對(duì)象標(biāo)簽中直接嵌入執(zhí)行代碼
指定腳本所對(duì)應(yīng)的事件過(guò)程
指定名稱的事件過(guò)程
即定義一個(gè)具有特殊名稱的過(guò)程，它與對(duì)象相聯(lián)系，形式為：對(duì)象名稱_事件名稱例如：
B1_onClick表示對(duì)于對(duì)象B1，當(dāng)單擊事件（Click）發(fā)生時(shí)執(zhí)行該過(guò)程。指定名稱的事件過(guò)程
網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript"><!--SubB1_onClick
MsgBox"你單擊了這個(gè)按鈕。"
EndSub--></script><form><inputname="B1"type="button"value="單擊這里"></form></html>顯示按鈕指定名稱的事件過(guò)程
瀏覽結(jié)果雙擊網(wǎng)頁(yè)文件時(shí)首先顯示如左圖單擊其中按鈕時(shí)，顯示如右圖提示單擊這里測(cè)試一下在對(duì)象標(biāo)簽中直接嵌入執(zhí)行代碼
當(dāng)執(zhí)行的代碼較短時(shí)，可以不定義單獨(dú)的過(guò)程，而直接把要執(zhí)行的語(yǔ)句嵌入作為事件名稱的屬性。網(wǎng)頁(yè)改為如下形式：<html><form><inputname="B1"type="button"value="單擊這里"onclick='MsgBox"你單擊了這個(gè)按鈕。"'language="VBScript"></form></html>
單擊這里測(cè)試一下指定腳本所對(duì)應(yīng)的事件過(guò)程指使用<script>標(biāo)簽的for屬性指出腳本所面向的對(duì)象，而用event屬性指出引用腳本的事件。網(wǎng)頁(yè)形式如下：<html><scriptlanguage="VBScript“
for="B1"event="onclick">
MsgBox"你單擊了這個(gè)按鈕。"</script><form><inputname="B1"type="button"value="單擊這里"></form></html>
單擊這里測(cè)試一下返回本章目錄5.2瀏覽器對(duì)象模型VBScript和其它腳本語(yǔ)言一樣，可以方便地訪問(wèn)瀏覽器所支持的對(duì)象模型中的各種對(duì)象。窗口（WINDOW）超鏈接（LINK）框架（FRAME）歷史（HISTORY）文檔（DOCUMENT腳本（script）導(dǎo)航器（NAVIGATOR位置（LOCATION）表單（form）元素（ELEMENT頁(yè)內(nèi)鏈接(ANCHOR)5.2瀏覽器對(duì)象模型瀏覽器所支持的對(duì)象包括：1．窗口
2．框架
3．歷史
4．文檔
5．事件（Event）
6．導(dǎo)航器
7．位置對(duì)象
1．窗口
窗口對(duì)象（WINDOW）是最外層的對(duì)象，可以看到在窗口對(duì)象中有一個(gè)文檔對(duì)象（DOCUMENT），文檔中又有一些表單（form），表單中又有一些表單元素（ELEMENT）等等。窗口對(duì)象包含有許多屬性、方法和事件。2．框架
窗口可以包含一個(gè)或多個(gè)框架（Frame），這取決于你是否在Web頁(yè)中使用了<Frameset>標(biāo)簽。在Frames數(shù)組中包含了一個(gè)你所定義的框架元素（從0開(kāi)始編號(hào)）。例如，下面的語(yǔ)句獲取窗口中每個(gè)框架的名字。ForintI=0toframes.length-1
Strname=frames(intI).nameNext由于以上語(yǔ)句總是用在某個(gè)框架中，實(shí)際使用時(shí)在frames前加“parent.”，請(qǐng)看例子。單擊這里測(cè)試一下3．歷史
每個(gè)窗口都有一個(gè)歷史對(duì)象（History），它包含著在這個(gè)窗口中顯示過(guò)的每個(gè)Web頁(yè)的列表。
4．文檔
模型中的另一個(gè)主要對(duì)象是文檔，它代表了在實(shí)際窗口所看到的Web頁(yè)，包括在該頁(yè)上所看到的文本、鏈接、表單等等。一個(gè)文檔對(duì)象包含大量的屬性和方法。對(duì)此將在第4小節(jié)中作一討論。
5．事件（Event）
一個(gè)Event對(duì)象會(huì)在每次事件發(fā)生時(shí)自動(dòng)產(chǎn)生，它提供了關(guān)于事件的有價(jià)值的信息，并且可以作為window對(duì)象的一個(gè)屬性進(jìn)行訪問(wèn)。
6．導(dǎo)航器
每個(gè)窗口都有一個(gè)導(dǎo)航器（Navigator）對(duì)象，它包含了Web瀏覽器的信息。包括瀏覽器程序名稱（AppName），瀏覽器版本號(hào)（AppVersion），所有用戶信息(userAgent)等屬性。7．位置對(duì)象
每個(gè)窗口都有一個(gè)位置對(duì)象，定義了它所包含Web頁(yè)的URL（網(wǎng)頁(yè)地址）。當(dāng)使用框架將一個(gè)窗口分成幾個(gè)部分時(shí)，每一個(gè)部分可以看成是一個(gè)窗口對(duì)象。因?yàn)?，在每個(gè)部分中可以裝入一個(gè)網(wǎng)頁(yè)文件。返回本章目錄5.3控制瀏覽器窗口在腳本語(yǔ)言中，使用瀏覽器所支持的各種對(duì)象的有關(guān)屬性、事件和方法，可以實(shí)現(xiàn)許多實(shí)際的應(yīng)用，本節(jié)主要討論WINDOW對(duì)象中除文檔對(duì)象外的其它對(duì)象的使用。文檔對(duì)象的使用將在下一節(jié)中討論。一個(gè)窗口對(duì)象包含有許多屬性、方法和事件，通過(guò)使用窗口對(duì)象的屬性、方法和事件，可以實(shí)現(xiàn)各種實(shí)際的應(yīng)用。窗口對(duì)象的屬性、方法和事件屬性：Nameparentselftoplocationdefaultstatusstatusframeshistorynavigatordocumentscreen方法：AlertconfirmpromptopenclosesetTimeout
clearTimeoutnavigator事件OnLoad
onUnload
onbeforeunload
onblur
onerror
onfocus
onhelp
onresize
onscroll
5.3控制瀏覽器窗口以下分別討論5.3.1與用戶交互
5.3.2查閱當(dāng)前URL
5.3.3使用定時(shí)器
5.3.4使用窗口的History列表
5.3.5打開(kāi)一個(gè)新窗口
5.3.6窗口的事件控制
5.3.1與用戶交互
可以用窗口對(duì)象的alert和confirm方法來(lái)代替MsgBox函數(shù)，或者用窗口對(duì)象的prompt方法代替InputBox函數(shù)，來(lái)實(shí)現(xiàn)和用戶的直接交互。1．Alert方法
2．Confirm方法
3．Prompt方法1．Alert方法
窗口對(duì)象的alert方法用于向用戶顯示一個(gè)消息框，其使用格式如下：
alert提示字符串例：<html><scriptlanguage="VBScript"><!--alert"這是可以代替MsgBox函數(shù)的提示框"--></script></html>單擊這里測(cè)試一下2．Confirm方法
窗口對(duì)象的Confirm方法用于向用戶提出一個(gè)回答為“是”或“否”的問(wèn)題。其使用形式為：
Result=confirm提示字符串當(dāng)執(zhí)行到這一行時(shí)，如果用戶選擇確定，返回TRUE，如果用戶選擇取消，則返回FALSE。Confirm方法舉例
網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript">ifconfirm("你希望繼續(xù)嗎?")thenalert"你選擇了繼續(xù)"
elsealert"你選擇了結(jié)束"
endif</script></html>
Confirm方法舉例瀏覽結(jié)果本例瀏覽時(shí)將首先顯示如左圖所示的提示框。當(dāng)單擊確定時(shí)，顯示如右圖所示的提示框。
單擊這里測(cè)試一下3．Prompt方法
窗口對(duì)象的prompt方法允許用戶輸入一個(gè)字符串。使用格式如下：
result=prompt提示字符串，初始值用result存放用戶輸入的字符串，當(dāng)用戶單擊取消時(shí)返回空。
Prompt方法舉例
網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript"><!--
strname=prompt("輸入你的姓名：","張三")
ifisnull(strname)then'若輸入框中沒(méi)有任何符號(hào)，則strName=empty為truealert"你選擇了取消輸入"
elsealert"嗨,"&strNameendif--></script></html>Prompt方法舉例
瀏覽結(jié)果本例瀏覽時(shí)首先顯示如左圖所示的輸入框，若此時(shí)單擊取消，則顯示如右圖所示的提示框。單擊這里測(cè)試一下5.3.2查閱當(dāng)前URL
窗口對(duì)象中l(wèi)ocation對(duì)象包含許多屬性，通過(guò)這些屬性，可以獲得有關(guān)當(dāng)前窗口的URL（統(tǒng)一資源定位器）信息。如下例所示。
5.3.2查閱當(dāng)前URL
網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript">
strOutput="location:"&location&vbCrLf
stroutput=stroutput&"協(xié)議："&tocol&vbCrLf
stroutput=stroutput&"主機(jī)地址："&location.host&vbCrLf
stroutput=stroutput&"主機(jī)名稱："&location.hostname&vbCrLf
stroutput=stroutput&"端口號(hào)："&location.port&vbCrLf
stroutput=stroutput&"路徑名："&location.pathname
MsgBox
stroutput</script></html>協(xié)議名5.3.2查閱當(dāng)前URL
瀏覽結(jié)果其中：protocol表示協(xié)議，hostname表示主機(jī)名，port表示端口，pathname表示路徑名。左圖是雙擊網(wǎng)頁(yè)文件時(shí)的顯示，右圖是瀏覽器中輸入地址后的顯示。
單擊這里測(cè)試一下5.3.3使用定時(shí)器
通過(guò)窗口對(duì)象的setTimeOut和ClearTimeout方法，可以使用定時(shí)器來(lái)控制某些對(duì)象的動(dòng)作。如讓狀態(tài)行上顯示當(dāng)前時(shí)間、顯示滾動(dòng)的文字，讓某一圖片按一定的速度移動(dòng)等等。5.3.3使用定時(shí)器
SetTimeOut的使用格式如下：創(chuàng)建的時(shí)鐘標(biāo)識(shí)=settimeout(“過(guò)程名”,間隔時(shí)間,“腳本語(yǔ)言名稱”)其中，間隔時(shí)間以毫秒為單位，即1000毫秒為1秒。作用是當(dāng)指定的時(shí)間間隔到來(lái)時(shí)，自動(dòng)調(diào)用指定的過(guò)程。5.3.3使用定時(shí)器
ClearTimeout的作用是清除設(shè)置的時(shí)鐘，其使用格式為：
ClearTimeout
時(shí)鐘標(biāo)識(shí)使用定時(shí)器舉例
網(wǎng)頁(yè)內(nèi)容<scriptlanguage="VBScript">dimTimerIDsubupdatestatus
cleartimeout
TimerIDstatus=time
TimerID=settimeout("updatestatus",100,”VBScript”)endsub
TimerID=settimeout("updatestatus",100,”VBScript”)</script>
設(shè)置時(shí)鐘清除時(shí)鐘狀態(tài)行顯示時(shí)鐘等待時(shí)間到使用定時(shí)器舉例
瀏覽結(jié)果本例中采用每100毫秒更新一次狀態(tài)行的內(nèi)容，即將新的時(shí)間值顯示在狀態(tài)行上。瀏覽結(jié)果如圖。
單擊這里測(cè)試一下5.3.4使用窗口的History列表
窗口對(duì)象中的History對(duì)象有forward、back和go等三個(gè)方法，分別可以在歷史的列表中進(jìn)行向前，向后和定位到某一頁(yè)?？梢酝ㄟ^(guò)length求得歷史列表的長(zhǎng)度。當(dāng)使用框架時(shí)，使用History對(duì)象非常有效。
5.3.5打開(kāi)一個(gè)新窗口
窗口對(duì)象的open方法用以打開(kāi)一個(gè)新的窗口，并同時(shí)裝入一個(gè)Web頁(yè)，使用形式如下：
open網(wǎng)頁(yè)地址，新窗口名稱，窗口參數(shù)窗口參數(shù)用于指出新打開(kāi)的窗口具有的特性，包括：是否有工具條（toolbar）
，是否有地址欄(location)，是否有目錄（directories），是否有狀態(tài)行(status)，是否有菜單行（menubar），是否有滾動(dòng)條(scrollbars)，及窗口是否可以改變大小（resizeable）窗口寬度和高度（width,height）等。
5.3.5打開(kāi)一個(gè)新窗口
例如：window.open"L5_8.html","MyWindow","toolbar=no,status=yes,width=250,height=100"將打開(kāi)一個(gè)沒(méi)有工具條和地址欄的新窗口，顯示網(wǎng)頁(yè)L5_8.html。5.3.5打開(kāi)一個(gè)新窗口
打開(kāi)的新窗口如圖所示。它沒(méi)有工具條也沒(méi)有地址欄。
5.3.6窗口的事件控制
使用窗口的事件，可以實(shí)現(xiàn)一些功能。以下代碼實(shí)現(xiàn)當(dāng)用戶關(guān)閉窗口或從本網(wǎng)頁(yè)轉(zhuǎn)到另一網(wǎng)頁(yè)時(shí)顯示再見(jiàn)信息：<scriptlanguage="VBScript">subwindow_onbeforeunload()alert("再見(jiàn)！")endsub</script>返回本章目錄單擊這里測(cè)試一下5.4控制Web頁(yè)
文檔對(duì)象有許多屬性和方法，通過(guò)這些屬性和方法的使用，可以控制Web頁(yè)的顯示。文檔對(duì)象的主要屬性有：LinkColor
aLinkColor
vLinkColor
bgColor
fgColoranchorslinksformslocationlastModifiedtitlecookiereferrer
5.4控制Web頁(yè)
文檔對(duì)象的主要事件有：Onafterupdate
onbeforeupdate
onclick
ondblclickondragstart
onerrorupdateerror
onhelp
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseup
onreadystatechange
onrowenter
onrowexit
onselectstart
5.4控制Web頁(yè)
文檔對(duì)象的主要方法有：Writewritelncloseclearopen以下通過(guò)一些例子來(lái)說(shuō)明這些屬性和方法的使用。1．顯示頁(yè)內(nèi)鏈接目標(biāo)的名稱網(wǎng)頁(yè)內(nèi)容<html><aname="喜">第一個(gè)Anchor</A>第一章內(nèi)容<BR><aname="怒">第二個(gè)anchor</A>第二章內(nèi)容<BR><aname="哀">第三個(gè)anchor</a>第三章內(nèi)容<BR><scriptlanguage="VBScript"><!--forintindex=0todocument.anchors.length-1alertdocument.anchors(intindex).namenext--></script></html>定義了三個(gè)頁(yè)內(nèi)鏈接目標(biāo)逐個(gè)顯示三個(gè)頁(yè)內(nèi)鏈接目標(biāo)的名稱1．顯示頁(yè)內(nèi)鏈接目標(biāo)的名稱瀏覽結(jié)果單擊這里測(cè)試一下1．顯示頁(yè)內(nèi)鏈接目標(biāo)的名稱用類似的方法可以獲得網(wǎng)頁(yè)中定義的各超鏈接的有關(guān)信息。如第一個(gè)鏈接的地址可寫成如下形式：
document.links(0).href其中：href
為地址，其它的還有protocol、hostname、Port和Pathname，分別表示協(xié)議、主機(jī)名、端口和路徑名等。2．改變文檔的背景色
網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript"for="B1"event="onclick">
document.bgcolor=document.abc.text.value</script><formname="abc"><inputtype="text"name="text"><inputname="B1"type="button"value="改變顏色"></form></html>2．改變文檔的背景色
瀏覽結(jié)果瀏覽時(shí)窗口中將出現(xiàn)一個(gè)文本框和命令按鈕，當(dāng)輸入表示顏色的值“00ff00”，并單擊“改變顏色”按鈕后，顯示如圖所示，其中背景為綠色。單擊這里測(cè)試一下2．改變文檔的背景色
瀏覽結(jié)果如在文本框中輸入“YELLOW”，并單擊“改變顏色”按鈕后，顯示如圖所示，其中背景為黃色。用類似的方法可以改
變文件的fgColor、
linkColor、aLinkColor、
vLinkColor等顏色。3．文檔的事件控制
使用文檔對(duì)象的事件，可以實(shí)現(xiàn)許多功能。以下是實(shí)現(xiàn)了讓用戶不能選取網(wǎng)頁(yè)中的文字的代碼。<html><scriptlanguage="VBScript">functionDocument_onselectstart()alert("不能選擇其中的文字！")
window.event.returnvalue=falseendfunction</script><body>這是不能被選中的文字！</body></html>單擊這里測(cè)試一下4．表單的遞交
在表單遞交前進(jìn)行必要的數(shù)據(jù)檢查，可以減少不必要的網(wǎng)絡(luò)傳輸。如圖在顯示表單后，若用戶沒(méi)有輸入姓名時(shí)就直接單擊提交按鈕，這時(shí)應(yīng)讓系統(tǒng)顯示如右圖提示框，而不直接提交。具體地有三種方式可以實(shí)現(xiàn)（1）指定表單的遞交處理代碼
網(wǎng)頁(yè)內(nèi)容<html><formname="form1"action="http://localhost/L7_1.asp"language="javascript"onsubmit="returnisformvalid()">
請(qǐng)輸入你的姓名：<inputname="T1"type="text"size=10><inputname="btnsubmit"type="submit"value="提交">
調(diào)用函數(shù)在后面定義（1）指定表單的遞交處理代碼
網(wǎng)頁(yè)內(nèi)容（續(xù)）<scriptlanguage="VBScript">functionisformvalidifform1.T1.value<>emptythen
isformvalid=Trueelsealert"你沒(méi)有在文本框中輸入姓名。"
isformvalid=Falseendifendfunction</script></form></html>
4．表單的遞交
本例瀏覽時(shí)，首先顯示窗口如左圖所示，當(dāng)用戶沒(méi)有在文本框中輸入內(nèi)容時(shí)直接按提交，這時(shí)將顯示如右圖所示的提示框，并取消提交操作。單擊這里測(cè)試一下（2）改寫遞交事件過(guò)程
網(wǎng)頁(yè)內(nèi)容<html><body><scriptlanguage="VBScript">functionform1_onSubmit()settheform=Document.form1iftheform.txt1.value=""then
Msgbox"你沒(méi)有在文本框中輸入姓名。"
form1_onSubmit=Falseendifendfunction</script><formname="form1">
請(qǐng)輸入你的姓名：<inputtype="text"NAME="txt1"><inputtype="submit"value="提交"></form></body></html>單擊這里測(cè)試一下（3）用按鈕控制表單的遞交
網(wǎng)頁(yè)內(nèi)容<html><formname="form1"action="http://localhost/L7_1.asp">
請(qǐng)輸入你的姓名：<inputname="T1"type="text"size=10><inputname="B1"type="button"value="提交"><scriptlanguage="VBScript"for="B1"event="onClick">ifform1.T1.value<>emptythenform1.submitelsealert"你沒(méi)有在文本框中輸入姓名。"
endif</script></form></html>
單擊這里測(cè)試一下三種方式比較對(duì)于本例中的代碼，盡管單擊按鈕時(shí)將進(jìn)行數(shù)據(jù)檢查，合法后提交，不合法顯示對(duì)話框。但是，當(dāng)在文本框中直接按回車時(shí)，會(huì)跳過(guò)這一處理而直接提交。返回本章目錄5.5常見(jiàn)事件處理
各種對(duì)象有不同的事件集合，以下通過(guò)舉例來(lái)說(shuō)明以下常用的幾個(gè)事件的使用。
1．處理onFocus事件2．處理onmouseover事件3．處理onkeypress事件4．處理onChange事件5．處理onselect事件
1．處理onFocus事件
對(duì)象獲得焦點(diǎn)時(shí)將發(fā)生onFocus事件。如單擊文本框準(zhǔn)備輸入時(shí)將發(fā)生該事件。請(qǐng)看下例：<html><scriptlanguage="VBScript">subT1_onFocusstatus="請(qǐng)輸入姓名"
endsub</script><formname="form1"><inputtype=textvalue="張三"name="T1"><inputtype=buttonvalue="顯示"name="B1"onclick="alert'喂'&T1.value"></form></html>鼠標(biāo)在T1中時(shí)狀態(tài)行顯示“請(qǐng)輸入姓名”1．處理onFocus事件
瀏覽時(shí)顯示如圖：?jiǎn)螕暨@里測(cè)試一下2．處理onmouseover事件
當(dāng)鼠標(biāo)移過(guò)某一對(duì)象時(shí)，就會(huì)發(fā)生這一事件。
<html><scriptlanguage="VBscript">dimi</script><scriptlanguage="VBScript"for="B1"event="onmouseover">
i=i+1alert"鼠標(biāo)第"&i&"次移過(guò)了B1按鈕."</script><formname="form1">
試試把鼠標(biāo)移過(guò)該
<inputname="B1"type="button"value="按鈕"></form></html>
2．處理onmouseover事件
本例中，當(dāng)鼠標(biāo)第1次移過(guò)按鈕時(shí)，顯示“鼠標(biāo)第1次移過(guò)B1按鈕”，再次移過(guò)時(shí)顯示如圖：類似的事件有onmousedown、onmouseup、onmouseout、onmousemove
等分別表示鼠標(biāo)按下、鼠標(biāo)釋放、鼠標(biāo)移出和鼠標(biāo)移動(dòng)。
單擊這里測(cè)試一下3．處理onkeypress事件
當(dāng)從鍵盤上按下鍵時(shí)，就會(huì)發(fā)生此事件。通過(guò)它可以實(shí)現(xiàn)字符的屏蔽。如下例：<html><body><formname="form1"onsubmit="null">
一個(gè)不能輸入引號(hào)的文本框：<br><inputtype="text"NAME="T1"language="VBScript"
onKeypress="ifwindow.event.keycode=34thenwindow.event.returnvalue=false"></form></body></html>單擊這里測(cè)試一下輸入雙引號(hào)時(shí)3．處理onkeypress事件
本例中當(dāng)在文本框中輸入引號(hào)時(shí)，通過(guò)腳本來(lái)控制取消該符號(hào)。同樣，可以編寫出只允許輸入數(shù)字的文本框，只允許輸入字母的文本框等。類似的事件有onkeydown和onkeyup，分別表示鍵盤按下和鍵盤釋放。4．處理onChange事件當(dāng)文本框中內(nèi)容改變后，若焦點(diǎn)移出文本框，則發(fā)生該事件。
<html><scriptlanguage="VBScript">subT1_onChangealert"你改變了文本框的內(nèi)容"
endsub</script><formname="form1"><inputtype=textvalue="張三"name="T1"><inputtype=buttonvalue="顯示內(nèi)容"name="B1"onclick="alert'喂'&T1.value"></form></html>
4．處理onChange事件本例中顯示一個(gè)文本框，當(dāng)改變文本框并將焦點(diǎn)移向其它位置時(shí)，顯示一對(duì)話框。本事件只有當(dāng)焦點(diǎn)移出文本框?qū)ο髸r(shí)才發(fā)生。驗(yàn)證本例中代碼時(shí)，先在文本框中修改原有內(nèi)容，然后在窗體的其它位置單擊即可。單擊這里測(cè)試一下5．處理onselect事件當(dāng)在文本框中選取文字時(shí)，發(fā)生該事件。<html><body><formname="form1"onsubmit="null">
供選擇用的文本框：<br><inputtype="text"NAME="T1"language="VBScript"
onselect='alert"你準(zhǔn)備選擇其中的內(nèi)容"'></form></body></html>5．處理onselect事件本例瀏覽時(shí)，可以先在文本框中輸入一些內(nèi)容，再通過(guò)鍵盤或鼠標(biāo)選取其中的內(nèi)容，這時(shí)，將顯示結(jié)果如圖所示。單擊這里測(cè)試一下返回本章目錄5.6表單處理
表單處理的主要內(nèi)容是獲取某一表單域的內(nèi)容或?qū)⒛骋粌?nèi)容放入表單域。這里，關(guān)鍵是要知道各種類型的表單域分別有哪些屬性，及可以使用哪些方法。以下列出了各種類型表單元素所具有的常用屬性、事件和方法。命令按鈕元素類型：Button屬性：formnamevalueenabled方法：Clickfocus事件：onclick
onFocus
復(fù)選框元素類型：Check屬性：formnamevaluecheckeddefaultcheckenabled方法：Clickfocus事件：onclick
onFocus
單選按鈕元素類型：Radio屬性：formnamevaluecheckedenabled方法：Clickfocus事件：onclick
onFocus
密碼輸入框元素類型：Password屬性：formnamevaluedefaultValueenabled方法：Focusblurselect事件：onclick
onFocus
單行文本輸入框元素類型：Text屬性：formnamevaluedefaultValueenabled方法：Focusblurselect事件：OnFocus
onBlur
onChange
onSelect
文本區(qū)域元素類型：Textarea
屬性：formnamevaluedefaultValueenabled方法：Focusblurselect事件：OnFocus
onBlur
onChange
onSelect
下拉列表框元素類型：Select屬性：Namelengthoptionsselectindex方法：Focusblur事件：Onfocus
onblur
onchange
onselect
onclick
隱藏對(duì)象元素類型：Hidden屬性：Namevalue方法：事件：獲取表單域的內(nèi)容要獲取表單域的內(nèi)容的一般形式如下：
Dperty其中：myform為表單名稱，myfield為表單域名稱，property為屬性名稱。如想得到表單“abc”中的名稱為“T1”的文本框的值?？墒褂萌缦滦问剑?/p>
Document.abc.T1.value獲取同名對(duì)象的值當(dāng)表單中有相同名稱的對(duì)象時(shí)，各對(duì)象的引用可使用數(shù)組形式。如一組單選按鈕，它們的名稱一定是相同的，為了測(cè)試是哪一個(gè)被選中，可使用循環(huán)逐個(gè)判斷它的checked屬性，循環(huán)的次數(shù)可以用對(duì)象的length屬性來(lái)控制，如例所示。獲得一個(gè)單選按鈕選擇網(wǎng)頁(yè)內(nèi)容<html><scriptlanguage="VBScript">subrrfori=0toform1.R1.length-1ifform1.R1(i).checkedthenalert"你選擇了"&form1.R1(i).valueendifnextendsub</script>對(duì)表單中的各單選按鈕R1(i)進(jìn)行逐個(gè)判斷，若其checked屬性為真，表示它是被選中的，則輸出其值。獲得一個(gè)單選按鈕選擇網(wǎng)頁(yè)內(nèi)容<formname="form1">
你的愛(ài)好是：<inputname="R1"type="radio"value="cats"onclick="rr()">養(yǎng)貓<inputname="R1"type="radio"value="dogs"onclick="rr()">養(yǎng)狗<inputname="R1"type="radio"value="birds"onclick="rr()">養(yǎng)鳥(niǎo)<inputname="R1"type="radio"value="fish"onclick="rr()">養(yǎng)魚</form></html>
定義了四個(gè)單選按鈕獲得一個(gè)單選按鈕選擇為每一個(gè)單選按鈕設(shè)置了onclick事件所要執(zhí)行的代碼，即調(diào)用名稱為rr的子過(guò)程。在子過(guò)程中對(duì)表單中的各單選按鈕R1(I)進(jìn)行逐個(gè)判斷，若其checked屬性為真，表示它是被選中的，此時(shí)輸出其對(duì)應(yīng)的值。單擊這里測(cè)試一下獲得一個(gè)單選按鈕選擇在判斷各個(gè)元素時(shí)，也可以使用foreach循環(huán)來(lái)實(shí)現(xiàn)。即把函數(shù)rr改寫成如下形式。subrrforeachiinform1.R1ifi.checkedthenalert"你選擇了"&i.valueendifnextendsub獲得一個(gè)單選按鈕選擇另一種方式是把單選按鈕作為參數(shù)傳遞給函數(shù)，這樣在函數(shù)中只需直接輸出其值了。即把函數(shù)改為：subrr(ra)alert"你選擇了"&ra.valueendsub各單選按鈕的定義形式改為：<inputname=“R1”type=“radio”value=“cats”onclick=“rr(me)”>養(yǎng)貓其中的me表示對(duì)象自身。單擊這里測(cè)試一下獲得一個(gè)列表框的選擇對(duì)于列表框來(lái)說(shuō)，當(dāng)用戶進(jìn)行選擇時(shí)，將發(fā)生onchange（改變）事件，通過(guò)這一事件，可以輸出實(shí)際選擇的內(nèi)容。<html><scriptlanguage="VBScript">sublst_onchangealert"你的愛(ài)好是："&form1.lst.valueendsub</script><formname="form1">
你的愛(ài)好是：
獲得一個(gè)列表框的選擇<formname="form1">
你的愛(ài)好是：<Selectname="lst"><optionvalue="cats">養(yǎng)貓
<optionvalue="dogs">養(yǎng)狗<optionvalue="birds">養(yǎng)鳥(niǎo)<optionvalue="fish">養(yǎng)魚</select></form></html>獲得一個(gè)列表框的選擇本例瀏覽時(shí)首先顯示如右圖所示的下拉列表框，當(dāng)選擇“養(yǎng)鳥(niǎo)”時(shí)將顯示如右圖所示信息框。單擊這里測(cè)試一下返回本章目錄5.7應(yīng)用舉例
客戶端腳本編程的實(shí)際例子非常多，但作為一個(gè)實(shí)用的例子，往往除了實(shí)現(xiàn)功能本身之外，還要加上許多防止用戶操作產(chǎn)生錯(cuò)誤的控制代碼，因此，往往篇幅較大，不適合于作為教材中使用，本節(jié)只介紹幾個(gè)小的例子，更進(jìn)一步的討論請(qǐng)參見(jiàn)有關(guān)的書籍。例1：購(gòu)物總價(jià)計(jì)算網(wǎng)頁(yè)內(nèi)容<html><head><scriptlanguage="VBScript">subtotal()t=0fori=0todocument.forms(0).c1.length-1ifdocument.forms(0).c1(i).checkedthenifisnull(document.forms(0).t1(I).value)thenalert“你沒(méi)有正確輸入所選商品的價(jià)格！”
elset=t+document.forms(0).t1(i).valueendifendifnextdocument.forms(0).t2.value=tendsub</script></head>計(jì)算總價(jià)的函數(shù)例1：購(gòu)物總價(jià)計(jì)算網(wǎng)頁(yè)內(nèi)容<body>商品選構(gòu)<hr><formmethod="POST"><p><inputtype="checkbox"name="C1"value="ON">書 價(jià)格<inputtype="text"name="T1"size="8"><br><inputtype="checkbox"name="C1"value="ON">鞋 價(jià)格<inputtype="text"name="T1"size="8"><br><inputtype="checkbox"name="C1"value="ON">食品 價(jià)格<inputtype="text"name="T1"size="8"><br><inputtype="button"value="總價(jià)"onclick="total()"><inputtype="text"name="t2"size="10"><br><inputtype="submit"value="提交"name="B1"><inputtype="reset"value="重選"name="B2"></p></form></body></html>
定義表單計(jì)算總價(jià)的按鈕例1：購(gòu)物總價(jià)計(jì)算本例設(shè)置了一組復(fù)選按鈕讓用戶選擇相應(yīng)的商品，為每一商品設(shè)置了一個(gè)文本框，用于讓用戶輸入對(duì)應(yīng)的價(jià)格，提交前單擊“總價(jià)”按鈕，可以計(jì)算出所選商品的總價(jià)。瀏覽結(jié)果如圖所示。單擊這里測(cè)試一下例2：菜單的動(dòng)態(tài)改變本例試圖通過(guò)把用戶輸入的文本作為列表框中的選項(xiàng)，實(shí)現(xiàn)動(dòng)態(tài)地改變列表框的內(nèi)容。當(dāng)列表框中的項(xiàng)目個(gè)數(shù)超過(guò)5時(shí)，例中將第1項(xiàng)刪除。例2：菜單的動(dòng)態(tài)改變網(wǎng)頁(yè)內(nèi)容<html><formname="form1“>
動(dòng)態(tài)改變的菜單項(xiàng)<selectname="abc"><optionvalue="a">第一個(gè)菜單項(xiàng)</option></select><inputname="T1"type="text"size=40><inputname="B1"type="button"value="添加"><scriptlanguage="VBScript"for="B1"event="onClick">菜單列表框文本框按鈕以下是單擊按鈕的處理函數(shù)例2：菜單的動(dòng)態(tài)改變網(wǎng)頁(yè)內(nèi)容ifform1.T1.value<>emptythensete=document.createElement("option")document.form1.abc.addee.text=form1.T1.valuee.value=form1.T1.valueifdocument.form1.abc.length>5thendocument.form1.abc.remove0endifelsealert"文本框中不能為空。"
endif</script></form></html>建立對(duì)象添加對(duì)象設(shè)置新對(duì)象屬性刪除列表中第一項(xiàng)例2：菜單的動(dòng)態(tài)改變本例中使用了文檔對(duì)象的CreateElement方法，通過(guò)它可以動(dòng)態(tài)地建立列表框中的表項(xiàng)對(duì)象“option”，形式為：
sete=document.createElement(“option”)例中接著使用列表框?qū)ο蟮腶dd方法，把表項(xiàng)對(duì)象添加到列表框中，形式為：
document.form1.abc.adde其中：form1為表單名稱，abc為列表框名稱，e為動(dòng)態(tài)建立的表項(xiàng)對(duì)象的名稱。例2：菜單的動(dòng)態(tài)改變表項(xiàng)對(duì)象有兩個(gè)屬性，即value(值)和text(文本)，對(duì)應(yīng)如下形式：<optionvalue=“值”>文本</option>例中對(duì)兩個(gè)屬性分別進(jìn)行賦值。最后再通過(guò)列表框的length屬性求列表框中列出的項(xiàng)目個(gè)數(shù)，若其值大于5，則使用列表框的remove方法刪除最前面的一個(gè)元素。形式如下：
document.form1.abc.remove0其中form1為表單名，abc為列表框名。例2：菜單的動(dòng)態(tài)改變?yōu)g覽時(shí)可在文本框中逐一輸入要添加的選項(xiàng)名稱，單擊“添加”后，再選擇下拉列表框，可得到如圖所示的結(jié)果。單擊這里測(cè)試一下例3：動(dòng)態(tài)設(shè)置命令按鈕的標(biāo)題網(wǎng)頁(yè)內(nèi)容<html><head><title>課程表輸入</title><scriptlanguage="VBScript">subsetb(vv)foreachiindocument.abc.R1ifi.checked=truethenvv.value=i.valueendifnextendsub</script></head>定義子程序?qū)⑦x中按鈕的值作為參數(shù)對(duì)象的值例3：動(dòng)態(tài)設(shè)置命令按鈕的標(biāo)題網(wǎng)頁(yè)內(nèi)容<bodybgcolor="#FFFFFF"><formmethod="POST"name="abc"><tablealign="center"border="1"width="92%"><tralign="center"><tdwidth="18%"colspan="2">
</td><thwidth="17%">星期一</th><thw
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年影視作品攝制合同協(xié)議書(含分成模式)
- 專業(yè)律師轉(zhuǎn)租合同
- 2024年度智能物流系統(tǒng)設(shè)計(jì)與實(shí)施合同
- 2024施工合同司法解釋
- 2024辦公樓零星維修項(xiàng)目建設(shè)項(xiàng)目施工合同
- 農(nóng)村合作信用社貸款合同
- 2024沒(méi)有借條、合同的借貸關(guān)系案例
- 工程承包合同模板簡(jiǎn)化版
- 校園學(xué)生安全保障協(xié)議書樣本
- 超值供貨合同模板匯編
- 二年級(jí)排球教案
- 天津市和平區(qū)2024-2025學(xué)年九年級(jí)上學(xué)期期中考試英語(yǔ)試題
- 2024二十屆三中全會(huì)知識(shí)競(jìng)賽題庫(kù)及答案
- 預(yù)防接種工作規(guī)范(2023年版)解讀課件
- 醫(yī)院檢驗(yàn)外包服務(wù)項(xiàng)目招標(biāo)文件
- 檔案整理及數(shù)字化服務(wù)方案
- 正高級(jí)會(huì)計(jì)師答辯面試資料
- 道路橋涵工程施工方案（完整版）
- 園林綠化工程施工及驗(yàn)收規(guī)范（完整版）
- 光伏冬季施工方案(1)（完整版）
- 60萬(wàn)噸MTO裝置中交發(fā)言稿
評(píng)論
0/150
提交評(píng)論