JavaScript編程-電子課件_第1頁
JavaScript編程-電子課件_第2頁
JavaScript編程-電子課件_第3頁
JavaScript編程-電子課件_第4頁
JavaScript編程-電子課件_第5頁
已閱讀5頁，還剩97頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計與制作課程開發組制作主講人：闞寶朋管曙亮本章要點單元5JavaScript編程任務1下拉菜單的設計任務2表格美化的設計任務3表單驗證的設計引例描述

學習方案：第一步：學習JavaScript根底，綜合HTML與CSS技術完成下拉菜單的設計。第二步：系統學習DOM對象樹與相關事件，實現表格美化的設計。第三步；綜合運用JavaScript技術，實現表單驗證的設計。任務1下拉菜單的設計【任務陳述】

本任務將綜合HTML、CSS、JavaScript技術設計水平方向排列的一級菜單、垂直方向上下拉的二級菜單，鼠標移入或移出事件控制二級菜單顯示或隱藏。實例任務1下拉菜單的設計【知識準備】

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

JavaScriptJavaScript的編輯與運行

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

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

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

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

varmyname="張三";

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

functionmyfun(){

varmyname;

myname="李四";

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

}

myfun();

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

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

函數體語句塊}JavaScript中的函數可以有返回值，也可以沒有返回值.返回值是通過return關鍵字加表達式實現的。//函數的定義functionLevel(level){return(level==1?"優":

level==2?"良":

level==3?"中":}任務1下拉菜單的設計5.6函數的定義與引用二、函數的調用函數必須使用函數名并提供相應的實際參數列表完成調用。在沒有提供相應的實際參數列表時，缺省參數按未定義(undefined常量)處理。

//函數的定義

functionLevel(level){

vars=

(level==1?"優":

level==2?"良":

level==3?"中":

level==4?"及":

"差");

returns;

}//函數的調用;

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

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

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

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

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

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

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

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

if(sex)return"男";//設置返回值，增強函數的靈活性

elsereturn"女";}任務1下拉菜單的設計5.6函數的定義與引用函數的定義及優化由性別邏輯值輸出性別對應的漢字//函數的調用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>");任務1下拉菜單的設計5.6函數的定義與引用數組作函數參數//數組的遍歷functionArray_Traversal(array){vars="<ul>";

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

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

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

第一步、HTML設計提供頁面元素任務2表格美化的設計任務實施

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

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

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

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

第三步、事件處理文件的建立調用global.js中addClass函數，編寫：條紋表格行樣式設置的函數移入或移出行的樣式設置函數任務2表格美化的設計任務實施

第三步、事件處理文件的建立與調用建立條紋表格行樣式設置的函數建立移入或移出行的樣式設置函數調用樣式設置函數任務2表格美化的設計任務實施

第三步、事件處理文件的建立與調用建立條紋表格行樣式設置的函數建立移入或移出行的樣式設置函數調用樣式設置函數任務2表格美化的設計任務實施

第三步、事件處理文件的建立與調用建立條紋表格行樣式設置的函數建立移入或移出行的樣式設置函數調用樣式設置函數任務2表格美化的設計任務實施

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

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

一、用戶自定義對象〔3〕自定義對象應用實例任務3表單驗證的設計【任務簡介】本任務完成用戶注冊表單設計，運行界面如下圖實例任務3表單驗證的設計5.15DOM對象中屬性節點的操作屬性節點與子元素節點的比較屬性節點<studentname=”張山”age=”23”></student>子元素節點<student><name>張山</name><age>23</age></student>DOM對象中的屬性節點是元素節點的附屬節點，不能獨立存在，屬性節點必須依賴于元素節點，為元素節點添加附加屬性的描述。屬性節點也可以替換成子元素節點及其子文本節點，但沒有使用屬性節點簡捷。任務3表單驗證的設計5.15DOM對象中屬性節點的操作一、屬性節點的創立與添加【實例】使用JavaScript建立從ul開始的DOM節點樹。<ulid="nav"><li><ahref="javascript:fun('首頁')"title="翻開網站首頁"style="color:#0d0;"onmouseover="a_mouseover();"onmouseout="a_mouseout();"mydata="我是一個屬性節點">首頁</a></li></ul><pid="info"></p>任務3表單驗證的設計5.14DOM節點對象的事件處理二、DOM對象事件的引發DOM對象的事件引發其實就是一個方法的調用，調用某個方法〔事件方法〕就會觸發對應的事件，這種代碼觸發事件的編程方式方便了網頁中互動程序的編寫。任務3表單驗證的設計5.14DOM節點對象的事件處理【實例】常用事件方法使用<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>任務3表單驗證的設計5.16表單驗證的意義與實現一、表單驗證的意義表單及其元素是用戶用來輸入數據，提交并保存到效勞端。表單驗證，就是提交數據時對數據進行驗證是否符合要求規那么。一個用戶注冊表單的數據提交后使用Web效勞端的動態代碼，將數據最終保存到數據庫中，對用戶輸入數據的驗證可以發生在客戶端、Web效勞端和數據庫效勞端；究其時效性來說，在客戶端驗證是最明智的選擇，因為將一個不合規那么的數據經網絡徒勞的傳輸到效勞端，既占據了網絡資源，又耽誤了珍貴時間，甚至造成程序運行時的異常反之，將表單數據在客戶端經過全面仔細的檢查，確保效勞端的操作一舉成功，減少不必要的周折。使用了表單驗證，使用戶在表單數據不合規那么時，給予提示，也能表達頁面的友好型。任務3表單驗證的設計5.16表單驗證的意義與實現二、表單驗證的類型及其實現用戶注冊是許多應用軟件必備的根底模塊。本任務界面中需要用戶提供必填驗證、郵箱驗證、數據文本長度的驗證等等，下面向大家介紹表單客戶端常見的驗證。〔1〕長度驗證要求表單元素中的數據文本長度在一段范圍內。【實例】長度驗證

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

</form>任務3表單驗證的設計5.16表單驗證的意義與實現二、表單驗證的類型及其實現〔1〕長度驗證—改進版任務3表單驗證的設計5.16表單驗證的意義與實現二、表單驗證的類型及其實現

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

〔2〕必填驗證表單元素中不能沒有文本或只有空格文本。【實例】必填驗證1〕定義必填驗證的函數

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論