動態(tài)網(wǎng)頁設計剖析_第1頁
動態(tài)網(wǎng)頁設計剖析_第2頁
動態(tài)網(wǎng)頁設計剖析_第3頁
動態(tài)網(wǎng)頁設計剖析_第4頁
動態(tài)網(wǎng)頁設計剖析_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

動態(tài)網(wǎng)頁設計剖析第一頁，共29頁。第三講動態(tài)網(wǎng)頁設計動態(tài)網(wǎng)頁技術(shù)是相對靜態(tài)網(wǎng)頁而言的，凡是能夠接受用戶操作并做出相應的響應的網(wǎng)頁實現(xiàn)技術(shù)都稱為動態(tài)網(wǎng)頁技術(shù)。腳本語言是一種計算機語言,它是介于HTML與高級語言之間的中間語言,通過使用它,使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實現(xiàn)了一種實時的、動態(tài)的、可交互的表達能力。彌補了HTML的缺陷。根據(jù)處理用戶操作位置的不同，主要分為兩大類：服務器端技術(shù)CGI技術(shù)ASP技術(shù)PHP技術(shù)JSP技術(shù)客戶端技術(shù)JavaScript腳本語言VBScript腳本語言Java語言（JavaApplet）第二頁，共29頁。3.1Javascript腳本語言JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的客戶端腳本語言，有了JavaScript，可使網(wǎng)頁變得生動。使用它的目的是與HTML超文本標識語言、Java腳本語言一起實現(xiàn)在一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡客戶交互作用，從而可以開發(fā)客戶端的應用程序。它是通過嵌入或調(diào)入在標準的HTML語言中實現(xiàn)的。JavaScript在語法上參考了C語法類語言。JavaScript遵循ECMAScript標準，目前使用的ECMAScript版本為ECMAScript-262（ISO/IEC16262）。第三頁，共29頁。3.1.1JavaScript腳本嵌入HTML的方法直接在<script>標簽對中嵌入JavaScript語句：示例<scriptlanguage=“JavaScript”><!--JavaScript代碼

//--></script>將JavaScript程序以擴展名“.js”單獨存放，再利用帶src屬性的<script>標簽嵌入：示例 <scriptsrc=指定路徑的JavaScript文件名>使不支持Javascript代碼的程序忽略這對標記單的內(nèi)容第四頁，共29頁。3.1.2JavaScript實現(xiàn)動態(tài)性的基本方法變量定義語句：如：varx;運算符與表達式：如：x=10;控制語句：如：for語句或while語句（循環(huán)語句）if語句（條件語句）、switch多分支語句等函數(shù)調(diào)用（或方法）如：sum();類：具有屬性和方法的對象對象：類的實例事件：實現(xiàn)某個活動的一個或多個操作。

第五頁，共29頁。3.1.3JavaScript對象ECMA-262將對象（object）定義為“屬性的無序集合，每個屬性存放一個原始值、對象或函數(shù)”。JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中，實現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設計者的意圖而被執(zhí)行，從而與特定的函數(shù)相關(guān)聯(lián)。JavaScript語言是基于對象的（Object-Based），而不是面向?qū)ο蟮模╫bject-oriented）。之所以說它是一門基于對象的語言，主要是因為它沒有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的復雜對象統(tǒng)一起來，從而形成一個非常強大的對象系統(tǒng)。因而它不是對象驅(qū)動的，而是事件驅(qū)動的。第六頁，共29頁。JavaScript使用的對象JavaScript內(nèi)部對象（build-inobjects）。瀏覽器對象自定義對象：創(chuàng)建新對象第七頁，共29頁。JavaScript內(nèi)部對象Array(數(shù)組對象)：動態(tài)對象。示例代碼

、運行Boolean（布爾對象）：靜態(tài)對象。String（字符串對象）：靜態(tài)對象。示例代碼Math(數(shù)學函數(shù)對象)：靜態(tài)對象。Date(日期對象)：動態(tài)對象。示例代碼、運行Number對象：靜態(tài)對象?！瓌討B(tài)對象必須使用new關(guān)鍵字創(chuàng)建對象實例，靜態(tài)對象則可以隱含聲明和創(chuàng)建。第八頁，共29頁。瀏覽器對象：COM層與DOM層第九頁，共29頁。自定義對象functionObject（屬性參數(shù)表）{p1=prop1//定義對象p2=prop2...this.meth=FunctionName1;this.meth=FunctionName2;}...functionFunctionName1(參數(shù)表)//定義對象方法functionFunctionName2(參數(shù)表)varnewObject=Object（屬性實參表）//創(chuàng)建對象實例定義對象方法的另一種形式This.meth=function(){}第十頁，共29頁。自定義對象應用實例<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</title></head><body><scriptlanguage="JavaScript"type="text/javascript">functionUniversity(name,city,url){//創(chuàng)建對象=name//定義屬性this.city=citythis.url=urlthis.myPrint=showinfo//定義方法functionshowinfo(){return+""+this.city+""+this.url+"";}}//創(chuàng)建對象實例varmyUniversity=newUniversity("廣東商學院","廣州","http://");

//調(diào)用方法按要求顯示內(nèi)容document.write("<h3>"+myUniversity.myPrint()+"</h3>");</script></body></html>運行第十一頁，共29頁。JavaScript對象屬性與方法引用1.對象屬性的引用方式使用句點運算符“.”university.Name=“云南省”university.city=“昆明市”university.Date="1999“下標引用university[0]=“云南”university[1]=“昆明市”university[2]="1999“屬性名字符串引用university["Name"]=“云南”university["City"]=“昆明市”university["Date"]="1999"2.對象方法引用方式使用句點運算符“.”O(jiān)bjectName.methods(參數(shù)表)例：document.write(university.showmy())3.結(jié)合with操作符使用限定變量引用的作用域例：with(math)document.write(cos(35));document.write(cos(80));若不使用with則引用時相對要復雜些：document.write(Math.cos(35))document.write(math.sin(80))第十二頁，共29頁。3.1.4JavaScript事件基于對象的基本特征就是采用事件驅(qū)動（EventDriven）.通常鼠標、鍵盤或熱鍵的動作稱為事件，而由鼠標或熱鍵引發(fā)的連續(xù)動作稱為事件驅(qū)動。對事件進行處理的程序或函數(shù)稱為事件句柄（EventHandler），即事件的觸發(fā)機制。第十三頁，共29頁。JavaScript的事件列表（事件句柄-發(fā)生條件）：onabort-一個圖片的加載被終止(只用于<img>)onblur-當一個元素失去焦點（光標移開）onchange-用戶改變了一個域的值（用于<inputtype=”text”/”password”>,<select>,<textarea>）onclick-鼠標單擊對象ondblclick-鼠標雙擊對象onerror-文件或圖片加載出錯（<img>,<object>,<style>）onfocus-一個元素得到焦點onkeydown-鍵盤上任一鍵被按下onkeypress-鍵盤上任一鍵被按下或保持按下onkeyup-當被按下的鍵被釋放時onload-當頁面或圖片完成加載onmousedown-當一個鼠標鍵被按下onmousemove-鼠標移動onmouseout-鼠標被從一個元素上移開onmouseover-鼠標移至某元素上onmouseup-鼠標鍵被釋放onreset-重置按鈕被點擊onresize-窗口或框架大小被改變onselect-文本被選擇onsubmit-提交按鈕被點擊onunload-用戶關(guān)閉頁面第十四頁，共29頁。函數(shù)定義與函數(shù)調(diào)用定義:function函數(shù)名(參數(shù)表){}調(diào)用:函數(shù)名(參數(shù)表)第十五頁，共29頁。3.1.5應用實例分析例1

利用google實現(xiàn)站內(nèi)搜索

運行<!--Google站內(nèi)搜索開始--><scripttype="text/javascript">functiongooglesearch(){varwq=document.getElementsByName(“wq”)[0].value;//獲取用戶在表單中輸入的關(guān)鍵詞varlink=“http://=&sitesearch=&q=”+wq;//調(diào)用google搜索本站window.open(link);}</script><inputtype="text"name="wq"value="請輸入關(guān)鍵詞"/><inputtype=“submit”onclick=“javascript:googlesearch()”value=“站內(nèi)搜索”/>//指定inptut的類型、值和處理函數(shù)<!--Google站內(nèi)搜索結(jié)束-->第十六頁，共29頁。自實現(xiàn)站內(nèi)搜索示例

運行首先，要編寫一個搜索表單，將用戶要搜索的數(shù)據(jù)提交給javascript函數(shù)。其次，要對站點的數(shù)據(jù)初始化。這是搜索時要用到的數(shù)據(jù)庫，站點更新只要更改這些數(shù)據(jù)就行了。對于這個數(shù)據(jù)庫，一般單獨存為一個js或html文件。初始化用戶輸入的搜索字符串，并調(diào)用搜索函數(shù)，列出結(jié)果。編寫搜索函數(shù)。第十七頁，共29頁。表單驗證合法性檢驗、一致性檢驗例2兩次密碼是否相同

<formmethod=postaction=""><inputtype=“password”id="input1"><inputtype=”password“id="input2">inputtype=“button”value=“test”onclick=“check()”>/form><script>functioncheck(){with(document.all){if(input1.value!=input2.value){alert("兩次密碼輸入不相同！")input1.value=“”input2.value=“”;}elsedocument.forms[0].submit();}}

第十八頁，共29頁。例3郵箱地址驗證functionchkemail(a)

{vari=a.length;

vartemp=a.indexOf(‘@’);

vartempd=a.indexOf(‘.’);

if(temp>1){

if((i-temp)>3){

if((i-tempd)>0){

return1;

}

第十九頁，共29頁。例4滾動文本運行

<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><SCRIPTLANGUAGE="JavaScript"><!--BeginfunctionselectScroller(n){optlist=document.scrollform.scroller;optlist[optlist.length]=newOption(optlist[0].text,"",false,false);optlist[0]=null;optlist.selectedIndex=-1;n=(n+1)%optlist.length;setTimeout("selectScroller("+n+")",1000);}</script><title>無標題文檔</title></head><bodyOnLoad="selectScroller()"><formname="scrollform"><selectname="scroller"size=8><option>輕輕的我走了，<option>正如我輕輕的來；<option>我輕輕的招手，<option>作別西天的云彩。<option><option>那河畔的金柳，……<option>悄悄的我走了，<option>正如我悄悄的來；<option>我揮一揮衣袖，<option>不帶走一片云彩。</select></form></body></html>第二十頁，共29頁。<BODY><divid="marquees"><ahref="#">我的鏈接1</a><br><ahref="#">我的鏈接2</a><br><ahref="#">我的鏈接3</a><br><ahref="#">我的鏈接4</a></div><scriptlanguage="javascript"><!--marqueesHeight=60;//內(nèi)容區(qū)高度stopscroll=false;//這個變量控制是否停止?jié)L動with(marquees){noWrap=true;//這句表內(nèi)容區(qū)不自動換行style.width=0;//我們可以將它的寬度設為0，因為它會被撐大style.height=marqueesHeight;style.overflowY="hidden";//滾動條不可見onmouseover=newFunction("stopscroll=true");//鼠標經(jīng)過，停止?jié)L動onmouseout=newFunction("stopscroll=false");//鼠標離開，開始滾動}//輸出一個不可見層“templayer”，容納滾動內(nèi)容document.write('<divid="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');functioninit(){//初始化滾動內(nèi)容//復制內(nèi)容到"templayer"，直到高度大于內(nèi)容區(qū)高度：while(templayer.offsetHeight<marqueesHeight){templayer.innerHTML+=marquees.innerHTML;}//把"templayer"的內(nèi)容的“兩倍”復制回原內(nèi)容區(qū)：marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;//設置連續(xù)超時，調(diào)用"scrollUp()"函數(shù)驅(qū)動滾動條：setInterval("scrollUp()",50);}document.body.onload=init;preTop=0;//這個變量用于判斷滾動條是否已經(jīng)到了盡頭functionscrollUp(){//滾動條的驅(qū)動函數(shù)if(stopscroll==true)return;//如果變量"stopscroll"為真，則停止?jié)L動preTop=marquees.scrollTop;//記錄滾動前的滾動條位置marquees.scrollTop+=1;//滾動條向下移動一個像素//如果滾動條不動了，則向上滾動到和當前畫面一樣的位置//當然不僅如此，同樣還要向下滾動一個像素(+1)：if(preTop==marquees.scrollTop){marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;}}--></script></BODY>例5滾動文本2運行第二十一頁，共29頁。<bodybgcolor="#000000"onLoad="glowtext()"><scriptlanguage=javaScript><!--//varthissize=20vartextfont="隸書"vartextcolor=newArray()/*New語句的語法對象實例=new對象類型*/textcolor[0]="000000"textcolor[1]="000000"textcolor[2]="000000"textcolor[3]="111111"textcolor[4]="222222"textcolor[5]="333333"textcolor[6]="444444"textcolor[7]="555555"textcolor[8]="666666"textcolor[9]="777777"textcolor[10]="888888"textcolor[11]="999999"textcolor[12]="aaaaaa"textcolor[13]="bbbbbb"textcolor[14]="cccccc"textcolor[15]="dddddd"textcolor[16]="eeeeee"textcolor[17]="ffffff"textcolor[18]="ffffff"varmessage=newArray()message[0]=""message[1]="HappyDrips工作室"message[2]="謝謝您使用"message[3]="javascript源碼大全"i_message=0vari_strength=0vari_message=0vartimerfunctionglowtext(){if(document.all){第二十二頁，共29頁。if(i_strength<=17){glowdiv.innerText=message[i_message]document.all.glowdiv.style.filter="glow(color="+textcolor[i_strength]+",strength=4)"i_strength++timer=setTimeout("glowtext()",100)}else{clearTimeout(timer)setTimeout("deglowtext()",1500)}}}functiondeglowtext(){if(document.all){if(i_strength>=0){glowdiv.innerText=message[i_message]document.all.glowdiv.style.filter="glow(color="+textcolor[i_strength]+",strength=4)"i_strength--timer=setTimeout("deglowtext()",100)}else{clearTimeout(timer)i_message++if(i_message>=message.length){i_message=0}i_strength=0intermezzo()}}}functionintermezzo(){glowdiv.innerText=""setTimeout("glowtext()",1500)}//--></script>

<divid="glowdiv"style="position:absolute;visibility:visible;width:600px;text-align:center;top:150px;left:50px;font-family:隸書;font-size:30pt;color:000000"></div></body>返回第二十三頁，共29頁。直接嵌入示例<scripttype="tex

溫馨提示

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

評論

0/150

提交評論