JavaScript編程-電子課件_第1頁(yè)
JavaScript編程-電子課件_第2頁(yè)
JavaScript編程-電子課件_第3頁(yè)
JavaScript編程-電子課件_第4頁(yè)
JavaScript編程-電子課件_第5頁(yè)
已閱讀5頁(yè)，還剩97頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作課程開發(fā)組制作主講人：闞寶朋管曙亮本章要點(diǎn)單元5JavaScript編程任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)2表格美化的設(shè)計(jì)任務(wù)3表單驗(yàn)證的設(shè)計(jì)引例描述

學(xué)習(xí)方案：第一步：學(xué)習(xí)JavaScript根底，綜合HTML與CSS技術(shù)完成下拉菜單的設(shè)計(jì)。第二步：系統(tǒng)學(xué)習(xí)DOM對(duì)象樹與相關(guān)事件，實(shí)現(xiàn)表格美化的設(shè)計(jì)。第三步；綜合運(yùn)用JavaScript技術(shù)，實(shí)現(xiàn)表單驗(yàn)證的設(shè)計(jì)。任務(wù)1下拉菜單的設(shè)計(jì)【任務(wù)陳述】

本任務(wù)將綜合HTML、CSS、JavaScript技術(shù)設(shè)計(jì)水平方向排列的一級(jí)菜單、垂直方向上下拉的二級(jí)菜單，鼠標(biāo)移入或移出事件控制二級(jí)菜單顯示或隱藏。實(shí)例任務(wù)1下拉菜單的設(shè)計(jì)【知識(shí)準(zhǔn)備】

5.1DHTML簡(jiǎn)介使用JavaScript、VBScript、DocumentObjectModle〔DOM〕、layers或者CSS等技術(shù)。運(yùn)用JavaScript腳本，實(shí)現(xiàn)根據(jù)用戶的動(dòng)作對(duì)html頁(yè)面作出的響應(yīng)。根據(jù)DOM對(duì)象事件驅(qū)動(dòng)機(jī)制，實(shí)現(xiàn)頁(yè)面元素的鼠標(biāo)事件、鍵盤事件。CSS是DOM中的一局部，使用腳本語(yǔ)言能夠改變CSS中的一些屬性，從而，使頁(yè)面能產(chǎn)生許多顯示效果任務(wù)1下拉菜單的設(shè)計(jì)【知識(shí)儲(chǔ)藏】5.2JavaScript簡(jiǎn)介Javascript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有平安性能的腳本語(yǔ)言，使用它的目的是與HTML超文本標(biāo)記語(yǔ)言一起實(shí)現(xiàn)在Web客戶端與Web效勞端進(jìn)行交互。Javascript是一種比較簡(jiǎn)單的編程語(yǔ)言，向Web頁(yè)面的HTML文件增加一段腳本，不需要單獨(dú)編譯，當(dāng)一個(gè)支持Javascript瀏覽器翻開這個(gè)頁(yè)面時(shí)，它會(huì)讀出這個(gè)腳本并執(zhí)行其指令。通過(guò)編寫Javascript腳本實(shí)現(xiàn)Web客戶端頁(yè)面菜單設(shè)計(jì)、幻燈片設(shè)計(jì)、表格的美化、表單的驗(yàn)證等等，讓用戶有及時(shí)操作體驗(yàn)和賞心悅目的視覺享受。任務(wù)1下拉菜單的設(shè)計(jì)5.2JavaScript簡(jiǎn)介

JavaScriptJavaScript的編輯與運(yùn)行

<html><head><title>HelloJavaScript!</title></head><body><scriptlanguage="javascript">document.write("Hello");document.write("JavaScript！<br>/*注釋*/");/*注釋*/

document.write("JavaScript很精彩！");

window.alert("HelloJavaScript！");//可簡(jiǎn)寫為alert("HelloJavaScript！");

</script></body></html>任務(wù)1下拉菜單的設(shè)計(jì)5.3JavaScript特點(diǎn)JavaScript是一種解釋性的腳本編寫語(yǔ)言。Javascript是基于對(duì)象的語(yǔ)言。簡(jiǎn)單性〔語(yǔ)句結(jié)構(gòu)與數(shù)據(jù)類型〕平安性〔不允許直接訪問(wèn)客戶端和效勞端文件〕動(dòng)態(tài)性〔實(shí)現(xiàn)對(duì)客戶端事件的響應(yīng)〕跨平臺(tái)性〔與瀏覽器有關(guān)、與操作系統(tǒng)無(wú)關(guān)〕任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式一、數(shù)據(jù)類型與常量JavaScript中有四種根本的數(shù)據(jù)類型：數(shù)值型，包括整型和實(shí)型如：120，35.23;字符串型，用引號(hào)包圍的文本如："我是字符串1",'我是字符串2'布爾型，只有兩者取值如：true、false?？罩担硎緩奈促x值的值，只有一種取值如：null。任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式二、變量的定義變量定義作用：明確指出變量的名稱、變量的類型及其變量的作用域。變量的命名規(guī)那么：〔1〕變量名必須以字母或下劃線開頭，中間可以出現(xiàn)數(shù)字、字母或下劃線。變量名稱中不能有空格、(+)、(-)、(,)或其它符號(hào)以免引起誤解。其它〔如函數(shù)、屬性等〕需要命名的也與此相似?！?〕不能使用JavaScript中的關(guān)鍵字作為變量。〔3〕注意變量名字能代表其存儲(chǔ)數(shù)據(jù)的意義，見名知義，增強(qiáng)可讀性，以節(jié)省程序調(diào)試與開發(fā)的時(shí)間。任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式三、變量的作用域JavaScript中變量的作用域有全局變量和局部變量之分。全局變量定義在所有函數(shù)體之外，其作用范圍是所有的函數(shù)；局部變量定義在函數(shù)體之內(nèi)，只在該函數(shù)內(nèi)可見，其它函數(shù)那么不能訪問(wèn)它。全局變量與局部變量同名同名局部變量所在函數(shù)內(nèi)會(huì)屏蔽全局變量，而優(yōu)先使用局部變量。任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式變量作用域的演示<scriptlanguage="javascript"> document.write("全局變量與局部變量的演示:<br/>");

varmyname="張三";

document.write("函數(shù)外：myname="+myname+"<br/>");

functionmyfun(){

varmyname;

myname="李四";

document.write("函數(shù)內(nèi)：myname="+myname+"<br/>");

}

myfun();

document.write("函數(shù)外：myname="+myname+"<br/>");</script>任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式四、數(shù)組數(shù)組是用來(lái)存儲(chǔ)和操作一批具有相同類型數(shù)據(jù)的數(shù)據(jù)類型，數(shù)組是對(duì)象類型的，有多種預(yù)定義的方法以方便程序員使用。數(shù)組的定義與初始化1〕單純創(chuàng)立數(shù)組varmenus=newArray();2〕創(chuàng)立數(shù)組的同時(shí)規(guī)定數(shù)組大小varmenus=newArray(4);3〕直接初始化直接初始化的方法如下：varmenus=newArray("首頁(yè)","專業(yè)建設(shè)","師資隊(duì)伍","教學(xué)條件","改革建設(shè)");這里就直接初始化了數(shù)組，也可以采用如下方法初始化。varmenus=["首頁(yè)","專業(yè)建設(shè)","師資隊(duì)伍","教學(xué)條件","改革建設(shè)"];任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式二維數(shù)組二維數(shù)組的定義是在一維數(shù)組根底上定義的，即當(dāng)一維數(shù)組的元素又都是一維數(shù)組時(shí)，就形成了二維數(shù)組。二維數(shù)組的初始化varsubmenus=newArray(newArray(),newArray("建設(shè)目標(biāo)","建設(shè)建設(shè)","培養(yǎng)隊(duì)伍"),newArray("負(fù)責(zé)人","隊(duì)伍結(jié)構(gòu)","任課教師","教學(xué)管理","合作辦學(xué)"));以上的代碼也可以表示以下等價(jià)代碼：varsubmenus=newArray();submenus[0]=[];submenus[1]=["建設(shè)目標(biāo)","建設(shè)建設(shè)","培養(yǎng)隊(duì)伍"];submenus[2]=[“負(fù)責(zé)人”,“隊(duì)伍結(jié)構(gòu)”,“任課教師”,“教學(xué)管理”,“合作辦學(xué)”];以上代碼還可以這樣寫：varsubmenus=[[],["建設(shè)目標(biāo)","建設(shè)建設(shè)","培養(yǎng)隊(duì)伍"],["負(fù)責(zé)人","隊(duì)伍結(jié)構(gòu)","任課教師","教學(xué)管理","合作辦學(xué)"]];任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式數(shù)組元素的訪問(wèn)通過(guò)數(shù)組名和下標(biāo)訪問(wèn)數(shù)組元素。一維數(shù)組的元素使用數(shù)組名和下標(biāo)來(lái)訪問(wèn)。格式為：一維數(shù)組名[下標(biāo)]二維數(shù)組的元素必須使用數(shù)組名和兩個(gè)下標(biāo)來(lái)訪問(wèn)，第一個(gè)為行下標(biāo)，第二個(gè)為列下標(biāo)。格式為：二維數(shù)組名[行下標(biāo)][列下標(biāo)]數(shù)組元素的下標(biāo)不能出界，否那么會(huì)顯示“undefined”〔空值〕。任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式數(shù)組的屬性與方法數(shù)組的屬性只有一個(gè)，就是length屬性。數(shù)組的方法數(shù)組常用方法任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式數(shù)組方法的使用例如varmenus=newArray("首頁(yè)","專業(yè)建設(shè)","師資隊(duì)伍");//toString()：把數(shù)組轉(zhuǎn)換成一個(gè)字符串，返回該串document.write(menus.toString());document.write("<br>");//join()：把數(shù)組轉(zhuǎn)換成一個(gè)用符號(hào)連接的字符串，返回該串document.write(menus.join(“©"));document.write("<br>");//shift()：將數(shù)組頭部的一個(gè)元素移出，返回移除元素document.write(menus.shift());document.write("<br>");document.write(menus.toString());document.write("<br>");任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式五、運(yùn)算符與表達(dá)式運(yùn)算符的作用用于操作數(shù)據(jù)特定符號(hào)的集合叫運(yùn)算符，運(yùn)算符操作的數(shù)據(jù)叫操作數(shù)，運(yùn)算符與操作數(shù)連接后的式子叫表達(dá)式，運(yùn)算符也可以連接表達(dá)式構(gòu)成更長(zhǎng)的表達(dá)式。任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式五、運(yùn)算符與表達(dá)式〔1〕算術(shù)運(yùn)算符任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式五、運(yùn)算符與表達(dá)式〔2〕關(guān)系運(yùn)算符任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式五、運(yùn)算符與表達(dá)式〔3〕邏輯運(yùn)算符任務(wù)1下拉菜單的設(shè)計(jì)5.4JavaScript常量、變量、數(shù)組、運(yùn)算符和表達(dá)式〔4〕逗號(hào)運(yùn)算符逗號(hào)運(yùn)算符可以連接幾個(gè)表達(dá)式，表達(dá)式的值為最右邊表達(dá)式的值。逗號(hào)運(yùn)算符的運(yùn)算優(yōu)先級(jí)最低。〔5〕賦值運(yùn)算符賦值運(yùn)算符不僅實(shí)現(xiàn)了賦值功能，由它構(gòu)成的表達(dá)式也有一個(gè)值，值就是賦值運(yùn)算符右邊的表達(dá)式的值，賦值運(yùn)算符的優(yōu)先級(jí)很低，僅次于逗號(hào)運(yùn)算符?！?〕條件運(yùn)算符條件運(yùn)算符是三元運(yùn)算符，使用該運(yùn)算符可以方便地由條件邏輯表達(dá)式的真假值得到各自對(duì)應(yīng)的取值。或由一個(gè)值轉(zhuǎn)換成另外兩個(gè)值，使用條件運(yùn)算符嵌套多個(gè)值。任務(wù)1下拉菜單的設(shè)計(jì)5.5程序控制結(jié)構(gòu)結(jié)構(gòu)化程序有三種根本結(jié)構(gòu)，它們是：順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。順序結(jié)構(gòu)：從前到后順序執(zhí)行語(yǔ)句或語(yǔ)句塊。分支結(jié)構(gòu)：有選擇的執(zhí)行語(yǔ)句或語(yǔ)句塊。循環(huán)結(jié)構(gòu)：屢次執(zhí)行語(yǔ)句或語(yǔ)句塊一、分支結(jié)構(gòu)二、循環(huán)結(jié)構(gòu)三、continue語(yǔ)句四、break語(yǔ)句任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用函數(shù)的作用函數(shù)為程序設(shè)計(jì)人員提供了方便，在進(jìn)行復(fù)雜的程序設(shè)計(jì)時(shí)，通常是根據(jù)所要完成的功能，將程序劃分為一些相對(duì)獨(dú)立的局部，每局部編寫一個(gè)函數(shù)，從而使各局部充分獨(dú)立，任務(wù)單一，可重復(fù)使用，程序清晰、易懂、易讀、易維護(hù)。

函數(shù)是擁有名字的一系列JavaScript語(yǔ)句的有效組合。只要這個(gè)函數(shù)被調(diào)用，就意味著這一系列JavaScript語(yǔ)句按順序被解釋執(zhí)行。為了使函數(shù)具有通用性，給函數(shù)添加形式參數(shù)列表，以接受外部提供的實(shí)際參數(shù)列表，并在函數(shù)中使用這些參數(shù)。任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用一、函數(shù)的定義函數(shù)的定義是使用function關(guān)鍵字實(shí)現(xiàn)的,格式如下：function函數(shù)名(形式參數(shù)列表){

函數(shù)體語(yǔ)句塊}JavaScript中的函數(shù)可以有返回值，也可以沒(méi)有返回值.返回值是通過(guò)return關(guān)鍵字加表達(dá)式實(shí)現(xiàn)的。//函數(shù)的定義functionLevel(level){return(level==1?"優(yōu)":

level==2?"良":

level==3?"中":}任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用二、函數(shù)的調(diào)用函數(shù)必須使用函數(shù)名并提供相應(yīng)的實(shí)際參數(shù)列表完成調(diào)用。在沒(méi)有提供相應(yīng)的實(shí)際參數(shù)列表時(shí)，缺省參數(shù)按未定義(undefined常量)處理。

//函數(shù)的定義

functionLevel(level){

vars=

(level==1?"優(yōu)":

level==2?"良":

level==3?"中":

level==4?"及":

"差");

returns;

}//函數(shù)的調(diào)用;

document.writeln(Level(),"<br/>");

document.writeln(Level("2"),"<br/>");

document.writeln(Level(2),"<br/>");任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用函數(shù)的定義及優(yōu)化由性別邏輯值輸出性別對(duì)應(yīng)的漢字varsex=false;//函數(shù)的定義functionSex_1(){varsex=false;//定義局部變量，不接受外界傳入的數(shù)據(jù)

if(sex)document.write("男","<br>");

elsedocument.write("女","<br>");}functionSex_2(){if(sex)//使用全局變量，接受外界傳入的數(shù)據(jù)

document.write("男","<br>");elsedocument.write("女","<br>");}functionSex_3(sex){//使用形式參數(shù)，接受外界傳入的數(shù)據(jù)

if(sex)document.write("男","<br>");

elsedocument.write("女","<br>");}functionSex_4(sex){//使用形式參數(shù)，接受外界傳入的數(shù)據(jù)

if(sex)return"男";//設(shè)置返回值，增強(qiáng)函數(shù)的靈活性

elsereturn"女";}任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用函數(shù)的定義及優(yōu)化由性別邏輯值輸出性別對(duì)應(yīng)的漢字//函數(shù)的調(diào)用document.write("全局變量sex=",sex,"<br>");Sex_1();Sex_2();Sex_3(false);Sex_3();Sex_3("false");document.write(Sex_4(sex),Sex_4(),Sex_4(undefined),Sex_4(null),Sex_4("false"),Sex_4(0),"<br>");sex=true;//修改了全局變量document.write("全局變量sex=",sex,"<br>");Sex_1();Sex_2();Sex_3();Sex_3(true);document.write(Sex_4(sex),Sex_4(),Sex_4(undefined),Sex_4(null),Sex_4("true"),Sex_4(1),"<br>");document.write(Sex_3(true),"<br>");任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用數(shù)組作函數(shù)參數(shù)//數(shù)組的遍歷functionArray_Traversal(array){vars="<ul>";

for(iinmenus){s+="<li>"+array[i]+"</li>"}s+="</ul>";returns;}varmenus=newArray("首頁(yè)","專業(yè)建設(shè)","師資隊(duì)伍");document.write(Array_Traversal(menus));document.write("==========================","<br>");menus[menus.length]="教學(xué)條件";menus.push("改革建設(shè)");document.write(Array_Traversal(menus));任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用三、用戶類的定義JavaScript是基于對(duì)象的腳本語(yǔ)言類是對(duì)象的模版類的根本成員有兩種：靜態(tài)數(shù)據(jù)〔屬性〕動(dòng)態(tài)行為〔方法〕。使用JavaScript可以定義用戶新的類使用的關(guān)鍵字是function。任務(wù)1下拉菜單的設(shè)計(jì)5.6函數(shù)的定義與引用Table類的定義與引用Table類中數(shù)據(jù)有：表數(shù)據(jù)Rows前景色ForeColor背景色BackColor線條色LineColor表寬Width;行為有：得到表標(biāo)簽getTable。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用瀏覽器內(nèi)置對(duì)象概述要對(duì)網(wǎng)頁(yè)進(jìn)行編程，必須了解瀏覽器、瀏覽器中顯示的窗口和窗口中顯示的HTML文檔等信息。JavaScript在網(wǎng)頁(yè)編程中經(jīng)常操作的HTML文檔被稱為文檔對(duì)象〔DocumentObject〕，它是瀏覽器對(duì)象的一局部。瀏覽器對(duì)象模型是分層組織的。window對(duì)象是最頂層的對(duì)象，包含了瀏覽器文檔窗口的信息；navigate對(duì)象包含了瀏覽器的相關(guān)信息；frames[]數(shù)組對(duì)象，包含了一組窗口對(duì)象；location對(duì)象存儲(chǔ)了頁(yè)面的URL；document對(duì)象模型中最重要的對(duì)象，前面已經(jīng)在使用；history對(duì)象存儲(chǔ)了本此會(huì)話中訪問(wèn)過(guò)的歷史頁(yè)面；screen對(duì)象存儲(chǔ)了瀏覽者系統(tǒng)的顯示屬性。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用一、瀏覽器信息〔navigator〕對(duì)象任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用二、窗口〔window〕對(duì)象窗口對(duì)象包括許多使用的屬性、方法和事件驅(qū)動(dòng)程序，編程人員可以利用這些對(duì)象控制瀏覽器窗口顯示的各方面屬性，如對(duì)話框、框架等。常用Window對(duì)象的方法：open〔URL、windowName、parameterList〕：open方法創(chuàng)立一個(gè)新的瀏覽器窗口，并在新窗口中載入一個(gè)指定的URL地址。close()：關(guān)閉一個(gè)瀏覽器窗口。alert()：彈出一個(gè)消息框。confirm()：彈出一個(gè)確認(rèn)框。prompt()：彈出一個(gè)提示框。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用二、窗口〔window〕對(duì)象〔1〕open()：創(chuàng)立或翻開瀏覽器窗口，并在窗口中載入一個(gè)指定的URL地址，返回創(chuàng)立的窗口對(duì)象的引用。該方法的原型是：window.open〔URL，windowName，parameterList〕；〔2〕close()：關(guān)閉一個(gè)瀏覽器窗口。該方法的原型是：window.close〔〕；window對(duì)象的open方法與close方法使用例如任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用二、窗口〔window〕對(duì)象window.open對(duì)新建窗口的樣式可以有更多的控制，例如：窗口大小、是否顯示菜單欄、是否顯示滾動(dòng)條、是否顯示地址欄等等。其完整的調(diào)用語(yǔ)法如下：window.open(url,windowName,"name1=value1[,name2=value2,[…]]");其中：url是要翻開的頁(yè)面地址；windowName表示新建窗口的名字，根據(jù)name參數(shù)是否使用過(guò)決定創(chuàng)立新窗口或在已有窗口翻開url指定的頁(yè)面；最后是一個(gè)用字符串表示的參數(shù)列表。每一個(gè)參數(shù)都是名稱和值對(duì)應(yīng)的形式，用逗號(hào)隔開，表示新window的屬性值的設(shè)置。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用二、窗口〔window〕對(duì)象window.open例如任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用二、窗口〔window〕對(duì)象任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用三、網(wǎng)址〔location〕對(duì)象location對(duì)象是當(dāng)前網(wǎng)頁(yè)的URL地址，可以使用Location對(duì)象讓瀏覽器翻開某網(wǎng)頁(yè)。window.location.href='://baidu';四、屏幕〔screen〕對(duì)象screen對(duì)象在加載HTML文檔時(shí)自動(dòng)創(chuàng)立，用于存儲(chǔ)瀏覽者系統(tǒng)的顯示信息。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用五、歷史記錄〔history〕對(duì)象history對(duì)象含有以前訪問(wèn)過(guò)的網(wǎng)頁(yè)的URL地址。下面兩條語(yǔ)句實(shí)現(xiàn)了頁(yè)面前進(jìn)和頁(yè)面后退。history.go(1);//頁(yè)面前進(jìn)history.go(-1);//和頁(yè)面后退六、文檔〔document〕對(duì)象每一個(gè)window對(duì)象都有document屬性，用于引用表示HTML文檔的對(duì)象。前面已經(jīng)大量使用過(guò)document對(duì)象的write方法。除此之外，document對(duì)象還有很多的屬性和方法用于訪問(wèn)并操控頁(yè)面內(nèi)的<html></html>內(nèi)的HTML對(duì)象。HTML文檔中標(biāo)簽的嵌套使用形成了HTML文檔的樹形結(jié)構(gòu)，文檔對(duì)象也具有樹形結(jié)構(gòu)，理解文檔對(duì)象模型〔DocumentObjectModel，簡(jiǎn)稱DOM〕結(jié)構(gòu)，會(huì)有利于編程者操控整個(gè)HTML文檔。任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用六、文檔〔document〕對(duì)象用document對(duì)象統(tǒng)計(jì)表單及其元素的數(shù)目任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用六、文檔〔document〕對(duì)象document的常用屬性任務(wù)1下拉菜單的設(shè)計(jì)5.7瀏覽器內(nèi)置對(duì)象的使用六、文檔〔document〕對(duì)象文檔對(duì)象的屬性的讀寫任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置一、頁(yè)面標(biāo)簽對(duì)象的引用〔1〕getElementById方法getElementById方法可以根據(jù)標(biāo)簽對(duì)象的ID屬性值得到唯一的標(biāo)簽對(duì)象，如果頁(yè)面上含有多個(gè)相同id的節(jié)點(diǎn)，那么只返回第一個(gè)節(jié)點(diǎn)。在頁(yè)面里標(biāo)簽對(duì)象的Id盡可能是唯一的。使用document.getElementById方法實(shí)現(xiàn)加法器任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置一、頁(yè)面標(biāo)簽對(duì)象的引用〔2〕getElegetElementsByName方法可以根據(jù)標(biāo)簽對(duì)象的name屬性值得到名稱相同的一組標(biāo)簽對(duì)象，這里要求標(biāo)簽對(duì)象的name是可以相同的，該方法得到的是標(biāo)簽對(duì)象數(shù)組，訪問(wèn)其中某個(gè)標(biāo)簽對(duì)象要根據(jù)標(biāo)簽對(duì)象在HTML文檔中的相對(duì)次序決定其下標(biāo)，第一個(gè)標(biāo)簽對(duì)象的下標(biāo)為0。mentsByName方法使用document.getElementsByName方法實(shí)現(xiàn)加法器任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置一、頁(yè)面標(biāo)簽對(duì)象的引用〔2〕getElementsByName方法getElementsByName方法可以根據(jù)標(biāo)簽對(duì)象的name屬性值得到名稱相同的一組標(biāo)簽對(duì)象，這里要求標(biāo)簽對(duì)象的name是可以相同的，該方法得到的是標(biāo)簽對(duì)象數(shù)組，訪問(wèn)其中某個(gè)標(biāo)簽對(duì)象要根據(jù)標(biāo)簽對(duì)象在HTML文檔中的相對(duì)次序決定其下標(biāo)，第一個(gè)標(biāo)簽對(duì)象的下標(biāo)為0。使用document.getElementsByName方法實(shí)現(xiàn)加法器〔3〕getElementsByTagName方法可以根據(jù)標(biāo)簽對(duì)象的標(biāo)簽名得到同類標(biāo)簽的集合對(duì)象，它的涉及范圍最大。用數(shù)組加下標(biāo)訪問(wèn)其中的標(biāo)簽對(duì)象。vartext=document.getElementsByName("text");替換為vartext=document.getElementsByTagName("input");也能到達(dá)相同的結(jié)果。任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置二、讀寫HTML對(duì)象的屬性〔1〕讀HTML對(duì)象屬性讀HTML對(duì)象屬性主要有以下兩種格式：1〕HTML對(duì)象.屬性名例如：document.getElementById("div1").innerHTML;2〕HTML對(duì)象.getAttribute(屬性名)例如：document.getElementById("div1").getAttribute("innerHTML");〔2〕寫HTML對(duì)象屬性寫HTML對(duì)象屬性也有相應(yīng)的兩種格式：1〕HTML對(duì)象.屬性名="新屬性值“2〕HTML對(duì)象.setAttribute("屬性名","新屬性值")任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置三、表單及其控件的訪問(wèn)〔1〕表單的訪問(wèn)表單的訪問(wèn)有以下兩種格式：1〕document.forms[索引]2〕document.表單名稱通過(guò)表單對(duì)象訪問(wèn)表單屬性和方法，格式如下：document.forms[索引].屬性document.forms[索引].方法〔參數(shù)〕document.表單名稱.屬性document.表單名稱.方法〔參數(shù)〕〔2〕表單內(nèi)控件的訪問(wèn)表單內(nèi)控件的訪問(wèn)格式為：表單對(duì)象.elements[下標(biāo)]。任務(wù)1下拉菜單的設(shè)計(jì)5.8頁(yè)面中標(biāo)簽的訪問(wèn)與屬性的設(shè)置三、表單及其控件的訪問(wèn)〔3〕表單元素的值屬性只有表單元素，才有name屬性，表單元素也只有設(shè)置了name屬性值才能在效勞端用請(qǐng)求集合加name屬性值獲得提交的數(shù)據(jù)。表單元素用于提交的這個(gè)數(shù)據(jù)，在客戶端是用什么屬性讀寫的，這個(gè)屬性應(yīng)該是該表單元素最重要的屬性。下面通過(guò)例如展示各種表單元素的最重要的屬性。一、事件的指派JavaScript是基于對(duì)象和事件驅(qū)動(dòng)的編程語(yǔ)言。在上個(gè)實(shí)例中表單元素值的顯示是在頁(yè)面剛顯示是就彈出了對(duì)話框，用戶沒(méi)有時(shí)機(jī)設(shè)置，如果在按鈕被點(diǎn)擊后顯示，這樣就可以得到表單元素的動(dòng)態(tài)設(shè)置的值。這里按鈕點(diǎn)擊就是驅(qū)動(dòng)事件，按鈕點(diǎn)擊的事件是什么？如何進(jìn)行事件的處理？下面就以按鈕點(diǎn)擊事件及其處理來(lái)答復(fù)這些問(wèn)題。按鈕點(diǎn)擊事件也叫按鈕單擊事件，按鈕有一個(gè)名為onclick屬性，設(shè)置這個(gè)屬性，就可以使得按鈕在單擊后完成某個(gè)任務(wù)了。按鈕單擊事件的指派任務(wù)1下拉菜單的設(shè)計(jì)5.9事件的指派與處理函數(shù)的編寫二、常用事件的類型JavaScript編程是基于事件驅(qū)動(dòng)的編程，在編寫可交互的客戶端程序是必須對(duì)事件的類型有所了解。任務(wù)1下拉菜單的設(shè)計(jì)5.9事件的指派與處理函數(shù)的編寫二、常用事件的類型event對(duì)象的常用屬性不少事件有自己的事件對(duì)象，以傳遞事件發(fā)生時(shí)的相關(guān)信息，如鼠標(biāo)移動(dòng)時(shí)的位置，鍵盤按下是的鍵值等。任務(wù)1下拉菜單的設(shè)計(jì)5.9事件的指派與處理函數(shù)的編寫任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施一、任務(wù)需求二、任務(wù)完成的步驟本任務(wù)的實(shí)現(xiàn)分為三個(gè)局部：1〕使用HTML標(biāo)簽構(gòu)建下拉菜單所需的樹型結(jié)構(gòu)數(shù)據(jù)。2〕從上到下，分步定義不同層次HTML標(biāo)簽CSS的樣式實(shí)現(xiàn)HTML標(biāo)簽的布局與美化。3〕編寫JavaScript腳本，動(dòng)態(tài)設(shè)置HTML標(biāo)簽CSS的樣式。任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施三、下拉菜單的HTML結(jié)構(gòu)下拉菜單是由具有樹形結(jié)構(gòu)的數(shù)據(jù)構(gòu)成，本任務(wù)使用兩個(gè)不同級(jí)別的列表標(biāo)簽實(shí)現(xiàn)下拉菜單的數(shù)據(jù)存儲(chǔ)，列表項(xiàng)的內(nèi)容〔innerHTML屬性〕是超級(jí)鏈接。使用HTML對(duì)象ui、li的嵌套來(lái)組織菜單數(shù)據(jù)。任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施四、樣式設(shè)計(jì)〔1〕設(shè)置總體樣式,改變字體及行間距〔2〕設(shè)置頂層ui與li的樣式〔3〕設(shè)置超鏈接樣式〔4〕設(shè)置第二層ul樣式〔5〕設(shè)置第一層li:hover及其下屬的ul、li樣式〔6〕設(shè)置第二層的超鏈接樣式任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)實(shí)施五、編寫JavaScript腳本任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)拓展設(shè)置最近被單擊過(guò)的超鏈接外觀屬性記憶上次被單擊過(guò)的超鏈接為深紅色粗體樣式。為此先定義一個(gè)樣式類如下：編寫JavaScript腳本使得clicked類樣式只用于剛剛單擊過(guò)的超鏈接。任務(wù)1下拉菜單的設(shè)計(jì)任務(wù)拓展設(shè)置最近被單擊過(guò)的超鏈接外觀屬性—改進(jìn)版上面這段代碼將所有的超鏈接對(duì)象遍歷了一遍，效率不高，可以使用一個(gè)全局變量保存上次點(diǎn)擊過(guò)的超鏈接對(duì)象，防止遍歷過(guò)程，提高執(zhí)行效率。改進(jìn)代碼如下：任務(wù)2表格美化的設(shè)計(jì)【任務(wù)陳述】本任務(wù)對(duì)由table對(duì)象及其下屬對(duì)象進(jìn)行樣式設(shè)置，使表頭行與表體行有別，表體行的奇數(shù)行、偶數(shù)行和鼠標(biāo)移入行的背景色有區(qū)別。

實(shí)例任務(wù)2表格美化的設(shè)計(jì)5.10DOM對(duì)象意義與結(jié)構(gòu)DOM是文檔對(duì)象模型〔DocumentObjectModel〕的縮寫。DOM對(duì)象模型的出現(xiàn)，使得HTML元素成為對(duì)象，借助JavaScript腳本就能操作HTML元素。HTML元素允許相互嵌套，頁(yè)面文檔局部是由body為根節(jié)點(diǎn)的HTML節(jié)點(diǎn)樹組成的，DOM的結(jié)構(gòu)就是一個(gè)樹形結(jié)構(gòu)。在JavaScript程序使用DOM對(duì)象中可以動(dòng)態(tài)添加、刪除、查詢節(jié)點(diǎn)，設(shè)置節(jié)點(diǎn)的屬性，程序員使用豐富的DOM對(duì)象庫(kù)可以方便地操控HTML元素?！局R(shí)準(zhǔn)備】任務(wù)2表格美化的設(shè)計(jì)5.11DOM對(duì)象節(jié)點(diǎn)類型任務(wù)2表格美化的設(shè)計(jì)5.12DOM對(duì)象節(jié)點(diǎn)及其屬性的訪問(wèn)DOM對(duì)象的訪問(wèn)是操作DOM節(jié)點(diǎn)的先決條件。使用前面介紹的getElementById、getElementsByName、getElementsByTagyName可以定位DOM節(jié)點(diǎn)絕對(duì)位置，getElementsByName、getElementsByTagyName得到的是DOM節(jié)點(diǎn)的集合，訪問(wèn)其中某個(gè)節(jié)點(diǎn)必須借助于下標(biāo)。DOM還為訪問(wèn)DOM節(jié)點(diǎn)的相對(duì)位置提供了豐富的方法。這些方法有：一、訪問(wèn)父節(jié)點(diǎn)二、訪問(wèn)子節(jié)點(diǎn)三、訪問(wèn)兄弟節(jié)點(diǎn)任務(wù)2表格美化的設(shè)計(jì)5.13DOM對(duì)象節(jié)點(diǎn)的創(chuàng)立與修改DOM樹形結(jié)構(gòu)的建立與調(diào)整，都可以用JavaScript代碼對(duì)節(jié)點(diǎn)的創(chuàng)立與刪除進(jìn)行修改，以取代前面的字符串方式拼接的HTML文本，用訪問(wèn)DOM節(jié)點(diǎn)樹中節(jié)點(diǎn)對(duì)象方式局部替代HTML元素對(duì)象，更容易實(shí)現(xiàn)用JavaScript編程操作頁(yè)面中各個(gè)DOM對(duì)象。操作DOM節(jié)點(diǎn)對(duì)象方法主要有創(chuàng)立節(jié)點(diǎn)、添加節(jié)點(diǎn)、刪除節(jié)點(diǎn)、替換節(jié)點(diǎn)、復(fù)制節(jié)點(diǎn)等。一、創(chuàng)立節(jié)點(diǎn)二、添加節(jié)點(diǎn)三、刪除節(jié)點(diǎn)四、替換節(jié)點(diǎn)五、復(fù)制節(jié)點(diǎn)任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

表格美化的設(shè)計(jì)需要完成表格數(shù)據(jù)結(jié)構(gòu)結(jié)構(gòu)級(jí)數(shù)據(jù)的建立、樣式表文件的建立和javascript事件處理文件的建立。本任務(wù)從靜態(tài)頁(yè)面設(shè)計(jì)三個(gè)方面進(jìn)行設(shè)計(jì)，設(shè)計(jì)步驟分別如下：第一步、HTML設(shè)計(jì)提供頁(yè)面元素；第二步、CSS設(shè)計(jì)布局與美化頁(yè)面元素；第三步、JavaScript設(shè)計(jì)處理頁(yè)面元素的事件。當(dāng)然，前面的兩步也可以用JavaScript完成，從效勞端接受的數(shù)據(jù)，用JavaScript腳本構(gòu)造DOM對(duì)象子樹，設(shè)置DOM對(duì)象的style及其下屬屬性，最后將DOM對(duì)象子樹添加到DOM容器父對(duì)象中。任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第一步、HTML設(shè)計(jì)提供頁(yè)面元素任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第二步、樣式文件的建立為了提高樣式表的可維護(hù)性，本任務(wù)中對(duì)樣式的設(shè)置采用了多個(gè)樣式文件，每個(gè)樣式文件負(fù)責(zé)某個(gè)方面樣式如：顏色類〔color.css〕布局類〔layout.css〕排版類〔typography.css〕再以“@importurl(樣式文件);”將多個(gè)樣式文件導(dǎo)入一個(gè)樣式文件basic.css中。basic.css文件的內(nèi)容如下：@importurl(color.css);@importurl(layout.css);@importurl(typography.css);任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第二步、樣式文件的建立顏色類〔color.css〕布局類〔layout.css〕排版類〔typography.css〕任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第二步、樣式文件的建立顏色類〔color.css〕布局類〔layout.css〕排版類〔typography.css〕任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第二步、樣式文件的建立顏色類〔color.css〕布局類〔layout.css〕排版類〔typography.css〕任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第三步、事件處理文件的建立調(diào)用global.js中addClass函數(shù)，編寫：條紋表格行樣式設(shè)置的函數(shù)移入或移出行的樣式設(shè)置函數(shù)任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第三步、事件處理文件的建立與調(diào)用建立條紋表格行樣式設(shè)置的函數(shù)建立移入或移出行的樣式設(shè)置函數(shù)調(diào)用樣式設(shè)置函數(shù)任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第三步、事件處理文件的建立與調(diào)用建立條紋表格行樣式設(shè)置的函數(shù)建立移入或移出行的樣式設(shè)置函數(shù)調(diào)用樣式設(shè)置函數(shù)任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

第三步、事件處理文件的建立與調(diào)用建立條紋表格行樣式設(shè)置的函數(shù)建立移入或移出行的樣式設(shè)置函數(shù)調(diào)用樣式設(shè)置函數(shù)任務(wù)2表格美化的設(shè)計(jì)任務(wù)實(shí)施

在靜態(tài)頁(yè)面中加載CSS與JavaScript在<head>標(biāo)簽中導(dǎo)入外部樣式表〔styles/basic.css〕<linkhref="styles/basic.css"rel="stylesheet"type="text/css"/>外部腳本文件〔script/global.js〕<scriptsrc="script/global.js"></script>在<table></table>標(biāo)簽之后參加“條紋表格行的樣式設(shè)置函數(shù)stripeTables”和“移入或移出行的樣式設(shè)置函數(shù)highlightRows”的調(diào)用：<script>stripeTables();highlightRows();</script>任務(wù)2表格美化的設(shè)計(jì)任務(wù)拓展

一、用戶自定義對(duì)象〔1〕自定義對(duì)象的定義：〔2〕自定義對(duì)象及其成員的訪問(wèn)：訪問(wèn)data中header用data.header訪問(wèn)"姓名“用data.header[0]訪問(wèn)data中body用data.body訪問(wèn)"李斯“用data.body[1][0]訪問(wèn)"傳媒與藝術(shù)系“用data.body[1][2]任務(wù)2表格美化的設(shè)計(jì)任務(wù)拓展

一、用戶自定義對(duì)象〔3〕自定義對(duì)象應(yīng)用實(shí)例任務(wù)3表單驗(yàn)證的設(shè)計(jì)【任務(wù)簡(jiǎn)介】本任務(wù)完成用戶注冊(cè)表單設(shè)計(jì)，運(yùn)行界面如下圖實(shí)例任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.15DOM對(duì)象中屬性節(jié)點(diǎn)的操作屬性節(jié)點(diǎn)與子元素節(jié)點(diǎn)的比較屬性節(jié)點(diǎn)<studentname=”張山”age=”23”></student>子元素節(jié)點(diǎn)<student><name>張山</name><age>23</age></student>DOM對(duì)象中的屬性節(jié)點(diǎn)是元素節(jié)點(diǎn)的附屬節(jié)點(diǎn)，不能獨(dú)立存在，屬性節(jié)點(diǎn)必須依賴于元素節(jié)點(diǎn)，為元素節(jié)點(diǎn)添加附加屬性的描述。屬性節(jié)點(diǎn)也可以替換成子元素節(jié)點(diǎn)及其子文本節(jié)點(diǎn)，但沒(méi)有使用屬性節(jié)點(diǎn)簡(jiǎn)捷。任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.15DOM對(duì)象中屬性節(jié)點(diǎn)的操作一、屬性節(jié)點(diǎn)的創(chuàng)立與添加【實(shí)例】使用JavaScript建立從ul開始的DOM節(jié)點(diǎn)樹。<ulid="nav"><li><ahref="javascript:fun('首頁(yè)')"title="翻開網(wǎng)站首頁(yè)"style="color:#0d0;"onmouseover="a_mouseover();"onmouseout="a_mouseout();"mydata="我是一個(gè)屬性節(jié)點(diǎn)">首頁(yè)</a></li></ul><pid="info"></p>任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.14DOM節(jié)點(diǎn)對(duì)象的事件處理二、DOM對(duì)象事件的引發(fā)DOM對(duì)象的事件引發(fā)其實(shí)就是一個(gè)方法的調(diào)用，調(diào)用某個(gè)方法〔事件方法〕就會(huì)觸發(fā)對(duì)應(yīng)的事件，這種代碼觸發(fā)事件的編程方式方便了網(wǎng)頁(yè)中互動(dòng)程序的編寫。任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.14DOM節(jié)點(diǎn)對(duì)象的事件處理【實(shí)例】常用事件方法使用<body><formid="form1"onreset="document.getElementById('info').innerHTML+='onreset<br/>';"

onsubmit="alert('onsubmit');">Text1:<inputid="Text1"type="text"

onblur="document.getElementById('info').innerHTML+='onblur<br/>';"onchange="document.getElementById('info').innerHTML+='onchange<br/>';"onfocus="document.getElementById('info').innerHTML+='onfocus<br/>';"/><br/>Text2:<inputid="Text2"type="text"/><br/><inputtype="button"value="Text2select"onclick="document.getElementById('Text2').select();"/><inputtype="button"value="Text1blur"onclick="document.getElementById('Text1').blur();"/><inputtype="button"value="Text1focus"onclick="document.getElementById('Text1').focus();"/><inputtype="button"value="Text1focus"onclick="document.getElementById('Text1').focus();"/><br><inputtype="button"value="Callreset()"onclick="reset();"/><inputtype="button"value="Callsubmit()"onclick="submit();"/><inputtype="submit"value="submit"/><inputtype="reset"value="reset"/>

</form><divid="info"></div></body>任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)一、表單驗(yàn)證的意義表單及其元素是用戶用來(lái)輸入數(shù)據(jù)，提交并保存到效勞端。表單驗(yàn)證，就是提交數(shù)據(jù)時(shí)對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證是否符合要求規(guī)那么。一個(gè)用戶注冊(cè)表單的數(shù)據(jù)提交后使用Web效勞端的動(dòng)態(tài)代碼，將數(shù)據(jù)最終保存到數(shù)據(jù)庫(kù)中，對(duì)用戶輸入數(shù)據(jù)的驗(yàn)證可以發(fā)生在客戶端、Web效勞端和數(shù)據(jù)庫(kù)效勞端；究其時(shí)效性來(lái)說(shuō)，在客戶端驗(yàn)證是最明智的選擇，因?yàn)閷⒁粋€(gè)不合規(guī)那么的數(shù)據(jù)經(jīng)網(wǎng)絡(luò)徒勞的傳輸?shù)叫诙?，既占?jù)了網(wǎng)絡(luò)資源，又耽誤了珍貴時(shí)間，甚至造成程序運(yùn)行時(shí)的異常反之，將表單數(shù)據(jù)在客戶端經(jīng)過(guò)全面仔細(xì)的檢查，確保效勞端的操作一舉成功，減少不必要的周折。使用了表單驗(yàn)證，使用戶在表單數(shù)據(jù)不合規(guī)那么時(shí)，給予提示，也能表達(dá)頁(yè)面的友好型。任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)二、表單驗(yàn)證的類型及其實(shí)現(xiàn)用戶注冊(cè)是許多應(yīng)用軟件必備的根底模塊。本任務(wù)界面中需要用戶提供必填驗(yàn)證、郵箱驗(yàn)證、數(shù)據(jù)文本長(zhǎng)度的驗(yàn)證等等，下面向大家介紹表單客戶端常見的驗(yàn)證?！?〕長(zhǎng)度驗(yàn)證要求表單元素中的數(shù)據(jù)文本長(zhǎng)度在一段范圍內(nèi)?！緦?shí)例】長(zhǎng)度驗(yàn)證

<formname="a"onsubmit="returnlength_valid()"><textareaname="b"cols="40"rows="6"></textarea><br><inputtype="submit"name=“Submit"value="驗(yàn)證"/>

</form>任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)二、表單驗(yàn)證的類型及其實(shí)現(xiàn)〔1〕長(zhǎng)度驗(yàn)證—改進(jìn)版任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)二、表單驗(yàn)證的類型及其實(shí)現(xiàn)

【實(shí)例】對(duì)多個(gè)表單元素做長(zhǎng)度驗(yàn)證要做到這點(diǎn)就要對(duì)表單元素設(shè)置驗(yàn)證方式，這里為這兩個(gè)input表單元素添加屬性比方length_valid設(shè)置屬性值為“[3,8]”。<inputname=”t1”type="text"length_valid="[3,8]"/><inputname=”t2”type="text"length_valid="[3,8]"/>對(duì)表單中每個(gè)元素遍歷，如果元素length_valid屬性的值不為空，那么解析"[3,8]"成為數(shù)組，取它們的元素，調(diào)用length_valid函數(shù)。任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)二、表單驗(yàn)證的類型及其實(shí)現(xiàn)〔2〕必填驗(yàn)證表單元素中不能沒(méi)有文本或只有空格文本?！緦?shí)例】必填驗(yàn)證1〕定義必填驗(yàn)證的函數(shù)isFilled，對(duì)形參表單元素element實(shí)現(xiàn)必填驗(yàn)證。2〕為需驗(yàn)證的表單元素設(shè)置表示必填驗(yàn)證屬性。3〕在表單驗(yàn)證函數(shù)validateForm的for語(yǔ)句中添加isFilled調(diào)用代碼。任務(wù)3表單驗(yàn)證的設(shè)計(jì)5.16表單驗(yàn)證的意義與實(shí)現(xiàn)二、表單驗(yàn)證的類型及其實(shí)現(xiàn)

〔2〕必填驗(yàn)證表單元素中不能沒(méi)有文本或只有空格文本。【實(shí)例】必填驗(yàn)證1〕定義必填驗(yàn)證的函數(shù)

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論