JavaScript程序設(shè)計(jì)提高篇.ppt

JavaScript程序設(shè)計(jì),提高篇,CompanyLogo,JavaScript概述,JavaScript是一種客戶端語言，主要應(yīng)用于Web瀏覽器。其主要的功能是做客戶端的數(shù)據(jù)有效性驗(yàn)證，以及與服務(wù)器、其他瀏覽器窗口進(jìn)行交互。同時(shí)，可以使頁面動(dòng)態(tài)化。,CompanyLogo,JavaScript概述,JavaScript組成核心ECMAScript（語法和基本對(duì)象）描述了：語法、類型、語句、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象文檔對(duì)象模型DOM（處理頁面內(nèi)容的方法和接口）即標(biāo)準(zhǔn)HTML語言，以節(jié)點(diǎn)為主要思想，用于規(guī)劃頁面結(jié)構(gòu)，如：SamplePage瀏覽器對(duì)象模型BOM（與瀏覽器進(jìn)行交互的方法和接口）通常指對(duì)瀏覽器特定的JavaScript擴(kuò)展，包括Ajax、彈出新的窗口、移動(dòng)和關(guān)閉瀏覽器窗口、對(duì)cookie的支持等等,CompanyLogo,課程安排,CompanyLogo,Ajax簡(jiǎn)要介紹,Ajax含義Ajax不是一種技術(shù)，而是一種方法，其結(jié)合了JavaScript、XML、CSS等技術(shù)，可以讓開發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用。簡(jiǎn)單說就是開發(fā)人員的一種創(chuàng)新的程序設(shè)計(jì)思路。使用Ajax可以實(shí)現(xiàn)異步通訊。使用AJAX的異步模式，瀏覽器就不必等用戶請(qǐng)求操作，也不必更新整個(gè)窗口就可以顯示新獲取的數(shù)據(jù)Ajax可以傳輸兩種信息，一種是字符串、一種是XML格式的文本數(shù)據(jù),CompanyLogo,Ajax簡(jiǎn)要介紹,Ajax實(shí)例JS前臺(tái)代碼：functioncommit(url,param)if(window.XMLHttpRequest)req=newXMLHttpRequest();elseif(window.ActiveXObject)req=newActiveXObject(Microsoft.XMLHTTP);if(req)req.open(post,url,true);req.onreadystatechange=completed;req.send(param);,url：與后臺(tái)交互的請(qǐng)求路徑param：傳給后臺(tái)的參數(shù),CompanyLogo,Ajax簡(jiǎn)要介紹,Ajax實(shí)例JS前臺(tái)代碼：functioncompleted()if(req.readyState=4)if(req.status=200)vartextString=unescape(req.responseText);functionelsealert(系統(tǒng)異常！);return;,req.responseText：獲取返回的文本，固定格式,CompanyLogo,Ajax簡(jiǎn)要介紹,Ajax實(shí)例Java后臺(tái)代碼publicStringgetCookiePwd()throwsExceptiongetResponse().setContentType(text/xml;charset=UTF-8);getResponse().setHeader(Cache-Control,no-cache);Stringname=getRequest().getParameter(uName);PrintWriterout=getResponse().getWriter();out.write(“success”);out.close();returnnull;,CompanyLogo,Ajax簡(jiǎn)要介紹,Ajax注意事項(xiàng)由于ajax是異步調(diào)用的故其函數(shù)實(shí)現(xiàn)的功能是獨(dú)立的，不能在一個(gè)函數(shù)中實(shí)現(xiàn)ajax和此外的一些功能。如：functionexample()commit(url,param);alert();該例子中，即使commit方法沒有運(yùn)行完畢，一樣會(huì)往下運(yùn)行alert方法，因此，我們只能將其放在ajax返回函數(shù)中進(jìn)行調(diào)用alert使用實(shí)例請(qǐng)參考commonObject.js,CompanyLogo,課程安排,CompanyLogo,JavaScript對(duì)象編程法,面向?qū)ο蟮木幊棠Ｊ胶蚸ava一樣，JavaScript也是面向?qū)ο蟮木幊陶Z言，在編寫公共js方法時(shí)，對(duì)于實(shí)現(xiàn)某一模塊的代碼、或?qū)δ骋活悩?biāo)簽的各種通用使用方法，我們都可以用對(duì)象的方式進(jìn)行獨(dú)立的管理，從而使代碼得以簡(jiǎn)化，提高可讀性和可維護(hù)性。編程模式：工廠方式、構(gòu)造函數(shù)方式、原型方式、混合的構(gòu)造函數(shù)/原型方式、動(dòng)態(tài)原型方式、混合工廠方式,CompanyLogo,JavaScript對(duì)象編程法,工廠方式functioncreateChar(col,doors)varobj=newObject();obj.color=col;obj.doors=doors;obj.showColor=function()alert(this.color);returnobj;調(diào)用方式varoCar=newcreateChar(“red”,4);oCar.showColor();-red,CompanyLogo,JavaScript對(duì)象編程法,工廠方式的局限性每調(diào)用一次createChar()函數(shù)時(shí)，都會(huì)創(chuàng)建一個(gè)對(duì)象，并創(chuàng)建對(duì)象自己的showColor方法，而實(shí)際上該方法是所有對(duì)象都共享的一個(gè)函數(shù)。針對(duì)這種現(xiàn)象，我們可以采取在外部創(chuàng)建一個(gè)函數(shù)的方式進(jìn)行解決，如functioncreateChar(col,doors)varobj=newObject();obj.showColor=showColor;returnobj;functionshowColor()alert(this.color);但這樣就不像是對(duì)象的方法了，而成了直接的對(duì)外部函數(shù)的引用。,CompanyLogo,JavaScript對(duì)象編程法,構(gòu)造函數(shù)方式functioncreateChar(col,doors)this.color=col;this.doors=doors;this.showColor=function()alert(this.color);returnobj;調(diào)用方式varoCar=newcreateChar(“red”,4);oCar.showColor();-red和工廠方式的差別在于函數(shù)使用了this，不需要?jiǎng)?chuàng)建一個(gè)Object對(duì)象，但局限性和工廠方式一樣,CompanyLogo,JavaScript對(duì)象編程法,原型方式functionCar()Ctotype.color=“red”;Ctotype.doors=4;Ctotype.dirver=newArray(1,2)Ctotype.showColor=function()alert(this.color);調(diào)用方式varoCar=newCar();oCar.showColor();-red,CompanyLogo,JavaScript對(duì)象編程法,原型方式的局限性首先，該構(gòu)造函數(shù)沒有參數(shù)，不能通過給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值，但可以通過調(diào)用對(duì)象下的一個(gè)函數(shù)進(jìn)行帶參數(shù)，并初始化，如totype.init=function(col,doors)this.color=col;this.doors=doors;調(diào)用方式varoCar=newCar();oCar.init(“yellow”,5)oCar.showColor();-yellow,CompanyLogo,JavaScript對(duì)象編程法,原型方式的局限性其次，可以正確實(shí)現(xiàn)函數(shù)共享，但對(duì)象是不應(yīng)該被共享，在次模式下也被共享了，如（還是前面的例子）當(dāng)我們進(jìn)行以下調(diào)用時(shí)：varoCar1=newCar();varoCar2=newCar();oCar1.driver.push(3);alert(oCar1);-1,2,3alert(oCar2);-1,2,3只是在oCar1中進(jìn)行的對(duì)數(shù)組driver添加數(shù)據(jù)3的操作，但在對(duì)象oCar2中也看到了一樣的結(jié)果，原因是driver屬性是一個(gè)引用，而非函數(shù)或值,CompanyLogo,JavaScript對(duì)象編程法,混合的構(gòu)造函數(shù)/原型方式鑒于構(gòu)造函數(shù)和原型方式的局限性，我們可以混合使用此兩種方式，從而各取所長(zhǎng)，如functioncar(col,doors)this.color=col;this.doors=doors;this.driver=newArray(1,2);totype.showColor=function()returnthis.color;,CompanyLogo,JavaScript對(duì)象編程法,變量編程模式以上的幾種面向?qū)ο蟮姆绞蕉加幸粋€(gè)共同點(diǎn)，就是每個(gè)對(duì)象都是一個(gè)構(gòu)造函數(shù)。個(gè)人總結(jié)后，還有一種變量方式，即把變量作為一個(gè)對(duì)象，在該對(duì)象里定義自己的屬性和方法。varAjax=method:null,commit:function(url,param,onsuccess)this.mothod=onsuccess;,completed:function()調(diào)用方式：Amit(“url”,”param”,”onsuccess”),CompanyLogo,JavaScript對(duì)象編程法,將函數(shù)作為變量進(jìn)行調(diào)用一般情況下，變量的值都是字符串、數(shù)字等具體類型的數(shù)值，但有時(shí)候我們希望變量中內(nèi)容是具體實(shí)現(xiàn)功能的函數(shù)的調(diào)用，對(duì)此我們需要用到一個(gè)函數(shù)：eval(funStr)，如functionexample(color)alert(color);functionexec()varcolor=“red”;eval(“example(color)”);functionexec()varcolor=“red”;example(color);,CompanyLogo,課程安排,CompanyLogo,HTML自定義標(biāo)簽,什么是HTML自定義標(biāo)簽自定義標(biāo)簽是可重用的組件代碼，并且允許開發(fā)人員為復(fù)雜的操作提供邏輯名稱。簡(jiǎn)單的說，就是開發(fā)人員利用標(biāo)準(zhǔn)標(biāo)簽通過一定的語法規(guī)則封裝而成的組件。自定義標(biāo)簽的最終形式還是標(biāo)準(zhǔn)的HTML標(biāo)簽，只不過由開發(fā)人員分離出一個(gè)中間層，該層用于解析自定義標(biāo)簽組件。自定義標(biāo)簽封裝好后，開發(fā)人員只要編寫上一層的簡(jiǎn)單的代碼，即可得到下一層編譯過后的復(fù)雜的代碼。該過程就像是計(jì)算機(jī)不能直接運(yùn)行C語言，而需要將其轉(zhuǎn)換成機(jī)器語言才能被運(yùn)行一樣，我們編寫的C語言的代碼，而解析后的是機(jī)器碼。,CompanyLogo,HTML自定義標(biāo)簽,HTML自定義標(biāo)簽的要素標(biāo)簽（Tag）標(biāo)簽是一種XML元素，通過標(biāo)簽可以使JSP網(wǎng)頁變得簡(jiǎn)潔并且易于維護(hù)，還可以方便地實(shí)現(xiàn)同一個(gè)JSP文件支持多種語言版本，其大小寫敏感。在使用自定義標(biāo)簽時(shí)，需要在jsp頁面進(jìn)行以下聲明：其中：uri包含了一個(gè)字符串，容器用它來定位TLD文件。在TLD文件中可以找到標(biāo)簽庫(kù)中所有標(biāo)簽處理類的名稱。Prefix定義了該標(biāo)簽的引用名稱，如標(biāo)準(zhǔn)的標(biāo)簽為，而自定義標(biāo)簽我們要寫成,CompanyLogo,HTML自定義標(biāo)簽,HTML自定義標(biāo)簽的要素標(biāo)簽庫(kù)（TagLibrary）由一系列功能相似、邏輯上互相聯(lián)系的標(biāo)簽構(gòu)成的集合稱為標(biāo)簽庫(kù)，就是標(biāo)簽對(duì)應(yīng)的TLD文件。該文件我們一般放在/WebRoot/WEB-INF/tld目錄下，當(dāng)然也可以另外存放，但需要在web.xml文件中指向?qū)τ诘哪夸浖纯?.01.1ltcmmainmenu,CompanyLogo,HTML自定義標(biāo)簽,HTML自定義標(biāo)簽的要素標(biāo)簽庫(kù)（TagLibrary）com.taglib.MainMenuTagjspdatalisttrue.,CompanyLogo,HTML自定義標(biāo)簽,HTML自定義標(biāo)簽的要素標(biāo)簽庫(kù)描述文件(TagLibraryDescriptor)標(biāo)簽庫(kù)描述文件是一個(gè)XML文件，這個(gè)文件提供了標(biāo)簽庫(kù)中類和JSP中對(duì)標(biāo)簽引用的映射關(guān)系。它是一個(gè)配置文件，和web.xml是類似的。實(shí)際上，我們都習(xí)慣于寫在web.xml文件中，如,CompanyLogo,HTML自定義標(biāo)簽,HTML自定義標(biāo)簽的要素標(biāo)簽處理類(TagHandleClass)標(biāo)簽處理類是一個(gè)Java類，這個(gè)類繼承了TagSupport或者擴(kuò)展了SimpleTag接口，通過這個(gè)類可以實(shí)現(xiàn)自定義JSP標(biāo)簽的具體功能，即我們前面所說的解析自定義標(biāo)簽的功能自定義標(biāo)簽的處理流程jsp頁面編寫后臺(tái)class類解析目標(biāo)碼寫入jsp頁面頁面加載該過程實(shí)現(xiàn)了對(duì)于循環(huán)處理時(shí)，只需要解析一次代碼的優(yōu)化功能；在語法上，即使是被注釋的自定義標(biāo)簽，也要保證代碼的正確性，否則頁面一樣會(huì)報(bào)錯(cuò),CompanyLogo,課程安排,CompanyLogo,學(xué)習(xí)與總結(jié),學(xué)習(xí)資料要培養(yǎng)作為設(shè)計(jì)者的能力，任何代碼都是最基礎(chǔ)的層次，但我們可以進(jìn)行個(gè)性化的利用，從而簡(jiǎn)化我們的編碼以及維護(hù)工作關(guān)于Ajax、Javascript、CSS的學(xué)習(xí)可參考資料里對(duì)應(yīng)的目錄前臺(tái)框架項(xiàng)目frameWeb里對(duì)應(yīng)的js目錄下有js的各種實(shí)例，css目錄可用于css設(shè)計(jì)的一些實(shí)例,CompanyLogo,學(xué)習(xí)與總結(jié),問題總結(jié)標(biāo)簽特別說明該標(biāo)簽在html中存在一個(gè)bug，即在頁面上的顯示始終位于最頂層，其他的標(biāo)簽無法將其覆蓋（除了或標(biāo)簽）。因此設(shè)計(jì)彈出的界面為非窗口界面時(shí)，解決方法有：1.在彈出框中內(nèi)嵌或標(biāo)簽2.js處理將彈出窗口下的標(biāo)簽進(jìn)行隱藏關(guān)于標(biāo)簽隱藏的兩個(gè)屬性display：隱藏標(biāo)簽后，釋放標(biāo)簽所占的頁面空間visibility：隱藏標(biāo)簽后，不釋放所占的頁面空間關(guān)于標(biāo)簽的內(nèi)容標(biāo)簽.innerHTML：輸出的是含標(biāo)簽在內(nèi)的所有內(nèi)容，如abc，那么Object.innerHTML=abc標(biāo)簽.innerText：輸出的是標(biāo)簽內(nèi)的文本內(nèi)容，如abc，那么Object.innerText=abc,CompanyL