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

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