WebCh06B(HaoXW)客戶端編程分析

1、高等教育高等教育“十一五十一五”國(guó)家級(jí)規(guī)劃教材計(jì)算機(jī)技術(shù)基礎(chǔ)國(guó)家級(jí)規(guī)劃教材計(jì)算機(jī)技術(shù)基礎(chǔ)計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用 第第 1 章章 Web技術(shù)基礎(chǔ)技術(shù)基礎(chǔ) 第第 2 章章 標(biāo)記語(yǔ)言與網(wǎng)頁(yè)制作標(biāo)記語(yǔ)言與網(wǎng)頁(yè)制作 第第 3 章章 圖像處理技術(shù)圖像處理技術(shù) 第第 4 章章 音頻與視頻處理音頻與視頻處理 第第 5 章章 Flash動(dòng)畫(huà)設(shè)計(jì)動(dòng)畫(huà)設(shè)計(jì) 第第 6 章章 客戶端編程客戶端編程 第第 7 章章 服務(wù)端編程服務(wù)端編程目 錄計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用第 6 章 客戶端編程n瀏覽器與客戶端腳本程序?yàn)g

2、覽器與客戶端腳本程序nJavaScript程序設(shè)計(jì)基礎(chǔ)程序設(shè)計(jì)基礎(chǔ)n事件驅(qū)動(dòng)及事件處理事件驅(qū)動(dòng)及事件處理n對(duì)象及其操作對(duì)象及其操作n常用內(nèi)部對(duì)象及函數(shù)常用內(nèi)部對(duì)象及函數(shù)nJavaScript瀏覽器對(duì)象模型瀏覽器對(duì)象模型BOMnHTML文檔對(duì)象模型文檔對(duì)象模型DOMnWeb交互交互n使用使用AJAX技術(shù)技術(shù) n綜合舉例綜合舉例計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用JavaScriptJavaScript瀏覽器對(duì)象模型瀏覽器對(duì)象模型BOMBOMn腳本程序設(shè)計(jì)語(yǔ)言腳本程序設(shè)計(jì)語(yǔ)言lECMAScript規(guī)范規(guī)范l瀏覽器對(duì)象模型（瀏覽器對(duì)象模型（Browser Object Model，B

3、OM）l文檔對(duì)象模型（文檔對(duì)象模型（Document Object Model，DOM） n瀏覽器對(duì)象模型瀏覽器對(duì)象模型BOMl就是指當(dāng)用戶打開(kāi)瀏覽器時(shí)，瀏覽器中的就是指當(dāng)用戶打開(kāi)瀏覽器時(shí)，瀏覽器中的JavaScript runtime engine將在內(nèi)存中將在內(nèi)存中自動(dòng)創(chuàng)建一組對(duì)象，用于對(duì)瀏覽器及自動(dòng)創(chuàng)建一組對(duì)象，用于對(duì)瀏覽器及HTML文檔對(duì)象模型中數(shù)據(jù)的訪問(wèn)和操作。文檔對(duì)象模型中數(shù)據(jù)的訪問(wèn)和操作。 window對(duì)象 frames對(duì)象 document對(duì)象 location對(duì)象 history對(duì)象 navigator對(duì)象 screen對(duì)象 event對(duì)象 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)

4、絡(luò)原理、技術(shù)及應(yīng)用windowwindow對(duì)象對(duì)象nwindow對(duì)象對(duì)象l即客戶的瀏覽器窗口，即客戶的瀏覽器窗口，window對(duì)象用于描述窗口的特征，它是對(duì)象用于描述窗口的特征，它是document、location、history等對(duì)象的父對(duì)象函數(shù)等對(duì)象的父對(duì)象函數(shù)isNaN()用于判用于判斷一個(gè)字符串是否為數(shù)字（斷一個(gè)字符串是否為數(shù)字（Not a Number）nwindow對(duì)象的常用屬性對(duì)象的常用屬性lwindow，self，parent和和top lopener屬性屬性 lscreenLeft和和screenTop屬性屬性 ldefaultStatus和和status屬性屬性l成員對(duì)象

5、成員對(duì)象unavigator對(duì)象、對(duì)象、 document對(duì)象、對(duì)象、frames對(duì)象、對(duì)象、history對(duì)象、對(duì)象、location對(duì)象、對(duì)象、screen對(duì)象等對(duì)象等 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用windowwindow對(duì)象（對(duì)象（Cont1.Cont1.）nwindow對(duì)象常用方法對(duì)象常用方法lopen()方法方法uopen(URL,WindowName,Window Features);u例如：例如：if （userrole=）window.open( other.htm , _self );lclose()方法方法unewWin.close()；u例如：例如

6、：關(guān)閉窗口關(guān)閉窗口 lmoveBy（x,y）方法）方法lresizeBy(x,y)方法方法lscroll(x,y)方法方法lfocus()和和blur()方法方法l系統(tǒng)提示相關(guān)方法系統(tǒng)提示相關(guān)方法ualert(字符串字符串) 方法方法uconfirm(字符串字符串) 方法方法 uprompt(message,initial input);lsetTimeout()和和clearTimeout()方法方法 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用windowwindow對(duì)象應(yīng)用舉例對(duì)象應(yīng)用舉例 n定義四個(gè)按鈕定義四個(gè)按鈕“打開(kāi)新窗口打開(kāi)新窗口”、“關(guān)閉關(guān)閉新窗口新窗口”、“查看源碼查

7、看源碼”和和“測(cè)試測(cè)試window對(duì)象屬性及方法對(duì)象屬性及方法”。l點(diǎn)擊點(diǎn)擊“打開(kāi)新窗口打開(kāi)新窗口”按鈕，則打按鈕，則打開(kāi)一個(gè)新窗口，開(kāi)一個(gè)新窗口，l點(diǎn)擊點(diǎn)擊“查看源碼查看源碼”窗口則顯示當(dāng)窗口則顯示當(dāng)前前Web頁(yè)的頁(yè)的html源代碼。假設(shè)窗源代碼。假設(shè)窗口的特征是沒(méi)有工具欄、菜單、口的特征是沒(méi)有工具欄、菜單、狀態(tài)欄、定位欄，高狀態(tài)欄、定位欄，高200個(gè)像素，個(gè)像素，寬寬200個(gè)像素。個(gè)像素。l按鈕按鈕“測(cè)試測(cè)試window對(duì)象屬性及對(duì)象屬性及方法方法”對(duì)應(yīng)一個(gè)對(duì)應(yīng)一個(gè)test函數(shù)，通過(guò)函數(shù)，通過(guò)修改該函數(shù)內(nèi)容，可以分別測(cè)試修改該函數(shù)內(nèi)容，可以分別測(cè)試window對(duì)象的其他屬性和方法。對(duì)象的其

8、他屬性和方法。 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用HTMLHTML代碼代碼testwin.htmnnnnfunction newone(url)nn newWin=open(url,subWindow, width=200,height=200,toolbar=0,status=0,location=0,menubar=0);n return newWin;nnfunction closeone(xWin)n n / 若窗口存在，并且沒(méi)有被關(guān)閉若窗口存在，并且沒(méi)有被關(guān)閉n if (xWin != & ! xWin.closed)n xWin.close();nn/ 可以修改該

9、函數(shù)代碼，測(cè)試可以修改該函數(shù)代碼，測(cè)試window對(duì)象的其他方法對(duì)象的其他方法nfunction test() nn window.moveTo(0,0);nnnnn   n n n nn 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用新窗口對(duì)應(yīng)的html文件bookIndex.htmnnnnbook IndexnnnIndex for The bookn nnn計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用網(wǎng)頁(yè)中時(shí)鐘的實(shí)現(xiàn)示例nnnn var timeID;n var Running=false;n function StartTime()n n running=tru

10、e;n ChangeTime();n n function ChangeTime()n n var currentTime=new Date();n document.myClock.show.value=currentTime.toLocaleString();n /遞歸調(diào)用遞歸調(diào)用n timeID=setTimeout(ChangeTime(),1000);n n function StopTime()n n if (Running)n clearTimeout(timeID);n Running=false;n nnnnn nnn 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用fr

11、amesframes對(duì)象對(duì)象n在在window屬性中，屬性中，frames是一個(gè)是一個(gè)array型成型成員對(duì)象員對(duì)象n如果窗口分禎的話，每個(gè)如果窗口分禎的話，每個(gè)frame相當(dāng)于一個(gè)單相當(dāng)于一個(gè)單獨(dú)的獨(dú)的window對(duì)象。對(duì)象。n對(duì)幀的訪問(wèn)可以通過(guò)數(shù)組下標(biāo)對(duì)幀的訪問(wèn)可以通過(guò)數(shù)組下標(biāo)0,1,，或者通，或者通過(guò)幀名。過(guò)幀名。l 例如，例如，window.frames0代表第一個(gè)幀窗口。代表第一個(gè)幀窗口。 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用framesframes對(duì)象舉例對(duì)象舉例n建立一個(gè)包含左右兩個(gè)幀的頁(yè)面，在左面幀頁(yè)中，設(shè)建立一個(gè)包含左右兩個(gè)幀的頁(yè)面，在左面幀頁(yè)中，設(shè)置一個(gè)置一

12、個(gè)button按鈕，單擊該按鈕，改變右側(cè)幀窗口的按鈕，單擊該按鈕，改變右側(cè)幀窗口的背景色。背景色。 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用framesframes對(duì)象舉例對(duì)象舉例HTMLHTML代碼代碼nnnnnn nnn左側(cè)幀窗口（左側(cè)幀窗口（left）代碼清單（）代碼清單（myleft.htm）如下：）如下：nnnnnleftnn/ 將幀窗口將幀窗口fname的背景色設(shè)置為的背景色設(shè)置為colorn/ fname的取值可以是數(shù)字的取值可以是數(shù)字0,1,，也可以為幀的名稱，也可以為幀的名稱nfunction test(fname,color)nn window.parent.f

13、ramesfname.document.bgColor = color; nnnnnnnnn計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用locationlocation對(duì)象對(duì)象nlocation對(duì)象用來(lái)存儲(chǔ)當(dāng)前窗口的對(duì)象用來(lái)存儲(chǔ)當(dāng)前窗口的url值。它儲(chǔ)存了一個(gè)完整的值。它儲(chǔ)存了一個(gè)完整的url，并且可，并且可能通過(guò)對(duì)能通過(guò)對(duì)location對(duì)象的賦值來(lái)改變當(dāng)前窗口的對(duì)象的賦值來(lái)改變當(dāng)前窗口的url，從而改變當(dāng)前網(wǎng)頁(yè)的內(nèi)，從而改變當(dāng)前網(wǎng)頁(yè)的內(nèi)容容n屬性屬性計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用historyhistory對(duì)象對(duì)象n一般把一般把history對(duì)象稱做歷史清單對(duì)

14、象，它保存窗口或框架在某時(shí)間段內(nèi)的對(duì)象稱做歷史清單對(duì)象，它保存窗口或框架在某時(shí)間段內(nèi)的url。出。出于安全方面的原因，于安全方面的原因，history對(duì)象并不向腳本提供列表的真正內(nèi)容，例如一個(gè)完整的對(duì)象并不向腳本提供列表的真正內(nèi)容，例如一個(gè)完整的url名稱。名稱。 n屬性屬性n計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用screenscreen對(duì)象對(duì)象nwindow對(duì)象的對(duì)象的screen成員對(duì)象包含有關(guān)客戶機(jī)顯示成員對(duì)象包含有關(guān)客戶機(jī)顯示屏幕的信息。屏幕的信息。n屬性屬性n常用的屬性是：常用的屬性是：lavailHeight（顯示屏幕的高度）（顯示屏幕的高度）lavailWidth（

15、顯示屏幕的寬度），（顯示屏幕的寬度），lheight（顯示屏幕的高度）（顯示屏幕的高度）lwidth（顯示器屏幕的寬度）（顯示器屏幕的寬度）計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用screenscreen對(duì)象舉例對(duì)象舉例n利用利用screen對(duì)象，在一個(gè)窗口中打開(kāi)一個(gè)窗口，讓對(duì)象，在一個(gè)窗口中打開(kāi)一個(gè)窗口，讓窗口在屏幕上平滑的移動(dòng)，遇到屏幕邊界，將自動(dòng)彈窗口在屏幕上平滑的移動(dòng)，遇到屏幕邊界，將自動(dòng)彈回，改變移動(dòng)方向回，改變移動(dòng)方向計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用bouncewin.htmbouncewin.htmnnnn/ 初始化動(dòng)畫(huà)的變量初始化動(dòng)畫(huà)的變量nva

16、r x = 0, y = 0, w=100, h=100; / 窗口的位置和大小窗口的位置和大小nvar dx = 5, dy = 5; / 窗口在窗口在x,y方向每次移動(dòng)的距離方向每次移動(dòng)的距離n/窗口移動(dòng)函數(shù)，將窗口移動(dòng)到窗口移動(dòng)函數(shù)，將窗口移動(dòng)到(x+dx, y+dy)位置位置nfunction bounce() nn if (win.closed) n n window.clearInterval(winID);n return;n n if (x+dx (screen.availWidth - w) | (x+dx (screen.availHeight - h) | (y+dy 0

17、)n dy = -dy;n /更新窗口的位置更新窗口的位置n x += dx;n y += dy;n win.moveTo(x,y);nnn計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用bouncewin.htmbouncewin.htm（Cont1.Cont1.）nnn/打開(kāi)一個(gè)子窗口打開(kāi)一個(gè)子窗口nvar win = window.open(javascript:hello, bounce, width= + w + ,height= + h);n/ 窗口的初始位置窗口的初始位置nwin.moveTo(x,y);n/ 使用使用setInterval() 每隔每隔100毫秒調(diào)用毫秒調(diào)用

18、 bounce() nvar winID = window.setInterval(bounce(), 100);nnnnnn 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用eventevent對(duì)象對(duì)象n在事件創(chuàng)立時(shí)產(chǎn)生，如：點(diǎn)擊一個(gè)可點(diǎn)擊的對(duì)象，移動(dòng)鼠標(biāo)，或獲得輸入焦點(diǎn)等，在事件創(chuàng)立時(shí)產(chǎn)生，如：點(diǎn)擊一個(gè)可點(diǎn)擊的對(duì)象，移動(dòng)鼠標(biāo)，或獲得輸入焦點(diǎn)等，此時(shí)，此時(shí)，Event對(duì)象被創(chuàng)建，用于存儲(chǔ)按鍵值、當(dāng)前的（對(duì)象被創(chuàng)建，用于存儲(chǔ)按鍵值、當(dāng)前的（x,y）坐標(biāo)等。）坐標(biāo)等。nevent對(duì)象的屬性對(duì)象的屬性n可能的事件可能的事件lonDblClick，鼠標(biāo)雙擊，鼠標(biāo)雙擊lonKeyDown，鍵被按下

19、，鍵被按下lonKeyPress，鍵被按下然后被釋放，鍵被按下然后被釋放lonKeyUp，鍵被釋放，鍵被釋放lonMouseDown，鼠標(biāo)被按下，鼠標(biāo)被按下lonMouseMove，鼠標(biāo)移動(dòng)，鼠標(biāo)移動(dòng)lonMouseUp，鼠標(biāo)被釋放，鼠標(biāo)被釋放lonResize，窗口被調(diào)整大小，窗口被調(diào)整大小計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用HTMLHTML文檔對(duì)象模型文檔對(duì)象模型DOMDOMn概念概念l當(dāng)瀏覽器打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，不管是當(dāng)瀏覽器打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，不管是HTML還是還是XML文檔，對(duì)于網(wǎng)頁(yè)中的文檔，對(duì)于網(wǎng)頁(yè)中的每一個(gè)標(biāo)記，都在內(nèi)存中創(chuàng)建一個(gè)相應(yīng)的內(nèi)存對(duì)象。這些對(duì)象按照樹(shù)型每一個(gè)標(biāo)記

20、，都在內(nèi)存中創(chuàng)建一個(gè)相應(yīng)的內(nèi)存對(duì)象。這些對(duì)象按照樹(shù)型結(jié)構(gòu)組織，這就是文檔對(duì)象模型結(jié)構(gòu)組織，這就是文檔對(duì)象模型DOM。 lDOM理解為網(wǎng)頁(yè)的理解為網(wǎng)頁(yè)的API，它將網(wǎng)頁(yè)中的元素看作一個(gè)個(gè)對(duì)象，這些對(duì)象，它將網(wǎng)頁(yè)中的元素看作一個(gè)個(gè)對(duì)象，這些對(duì)象通過(guò)標(biāo)記的通過(guò)標(biāo)記的name屬性來(lái)命名，通過(guò)對(duì)這些可訪問(wèn)的內(nèi)存對(duì)象進(jìn)行編程，屬性來(lái)命名，通過(guò)對(duì)這些可訪問(wèn)的內(nèi)存對(duì)象進(jìn)行編程，來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中元素及其屬性的修改，以便動(dòng)態(tài)的修改網(wǎng)頁(yè)。來(lái)實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中元素及其屬性的修改，以便動(dòng)態(tài)的修改網(wǎng)頁(yè)。l文檔對(duì)象模型（文檔對(duì)象模型（Document Object Model，DOM）是一種與瀏覽器、平）是一種與瀏覽器、平臺(tái)、語(yǔ)言

21、無(wú)關(guān)的接口。臺(tái)、語(yǔ)言無(wú)關(guān)的接口。nDOM 被分為被分為3個(gè)不同的部分個(gè)不同的部分l核心核心DOMlXML DOMlHTML DOM 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用HTML DOMHTML DOM對(duì)象對(duì)象n在在HTML文檔中，當(dāng)瀏覽器打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，為每一個(gè)標(biāo)記在內(nèi)存中建立一文檔中，當(dāng)瀏覽器打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，為每一個(gè)標(biāo)記在內(nèi)存中建立一個(gè)內(nèi)存對(duì)象，即個(gè)內(nèi)存對(duì)象，即HTML DOM對(duì)象對(duì)象計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用HTML DOMHTML DOM對(duì)象的層次關(guān)系對(duì)象的層次關(guān)系n所有的所有的HTML DOM對(duì)象中，他們之間為層次結(jié)構(gòu)關(guān)系，這種關(guān)系和對(duì)象中，他

22、們之間為層次結(jié)構(gòu)關(guān)系，這種關(guān)系和HTML規(guī)規(guī)范中標(biāo)記之間的層次關(guān)系一致。范中標(biāo)記之間的層次關(guān)系一致。 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用documentdocument對(duì)象對(duì)象ndocument 對(duì)象對(duì)象l在在HTML DOM中，中，document 對(duì)象代表整個(gè)對(duì)象代表整個(gè)HTML文檔，文檔，可用來(lái)訪問(wèn)頁(yè)面中的所有元素，包括文檔頭可用來(lái)訪問(wèn)頁(yè)面中的所有元素，包括文檔頭部分部分和文檔體和文檔體部分部分ldocument 對(duì)象是瀏覽器對(duì)象模型對(duì)象是瀏覽器對(duì)象模型BOM中的中的window 對(duì)對(duì)象的一個(gè)部分，可通過(guò)象的一個(gè)部分，可通過(guò) window.document屬性來(lái)訪問(wèn)。屬

23、性來(lái)訪問(wèn)。 n對(duì)象屬性對(duì)象屬性n對(duì)象方法對(duì)象方法計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用documentdocument對(duì)象屬性對(duì)象屬性n對(duì)象屬性對(duì)象屬性l在在FrontPage中的代碼視圖，輸入中的代碼視圖，輸入window.document.可打開(kāi)可打開(kāi)IntelliSense窗口，顯示其所包含的屬性和方法。窗口，顯示其所包含的屬性和方法。 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用documentdocument對(duì)象方法對(duì)象方法n對(duì)象方法對(duì)象方法計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用bodybody對(duì)象對(duì)象nhtml文檔有一個(gè)文檔有一個(gè)標(biāo)記，瀏覽器在內(nèi)

24、存中創(chuàng)建一個(gè)標(biāo)記，瀏覽器在內(nèi)存中創(chuàng)建一個(gè)body對(duì)象，對(duì)象，body對(duì)象封裝了對(duì)象封裝了html文檔中文檔中標(biāo)記的所有屬性及所有的文檔體元素。標(biāo)記的所有屬性及所有的文檔體元素。n從從html結(jié)構(gòu)看，結(jié)構(gòu)看，body對(duì)象是對(duì)象是document 對(duì)象的成員對(duì)象對(duì)象的成員對(duì)象 nBody對(duì)象屬性對(duì)象屬性計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用bodybody對(duì)象舉例對(duì)象舉例n設(shè)置設(shè)置 元素的元素的 id nnnn x=document.getElementsByTagName(body)0;n document.write(Body id: + x.id);n document.wri

25、te();n document.write(An alternate way: );n document.write(document.getElementById(myid).id);ndocument.write(Body title: + x.title);nnn計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用imagesimages數(shù)組成員屬性數(shù)組成員屬性nimages數(shù)組的每個(gè)元素都是數(shù)組的每個(gè)元素都是image對(duì)象，對(duì)象，image對(duì)象的成對(duì)象的成員屬性員屬性 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用舉例舉例-動(dòng)畫(huà)顯示nnnnvar ImageNum=1;nfunc

26、tion Begin()nndocument.MyImage.src=ImageArrayImageNum.src;nImageNum+;nif (ImageNum3)nImageNum=1;nnnnnnnvar ImageArray=new Array();nfor (i=1;i=3;i+)nnImageArrayi=new image();nImageArrayi.src=tu+i+.gifnnnn 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用links鏈接數(shù)組n鏈接數(shù)組是另一種常用的鏈接數(shù)組是另一種常用的document對(duì)象中的數(shù)組成員，對(duì)象中的數(shù)組成員，links數(shù)組的每一個(gè)元

27、素都是一個(gè)數(shù)組的每一個(gè)元素都是一個(gè)link對(duì)象，或者是對(duì)象，或者是area對(duì)象，對(duì)應(yīng)對(duì)象，對(duì)應(yīng)html文檔中的一個(gè)超鏈接標(biāo)記文檔中的一個(gè)超鏈接標(biāo)記，用來(lái)存儲(chǔ)，用來(lái)存儲(chǔ)url的信息，通過(guò)的信息，通過(guò)links數(shù)組可以對(duì)文檔中的超鏈接進(jìn)行操作。數(shù)組可以對(duì)文檔中的超鏈接進(jìn)行操作。 n一個(gè)完整的一個(gè)完整的url可以分成幾個(gè)組成部分可以分成幾個(gè)組成部分http:/:8080/javascript/index.html#startl協(xié)議協(xié)議l端口端口l路徑路徑l文件名文件名l定位文檔中的定位文檔中的anchor計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用舉例-改變URL示例nnnn n n nn下

28、一步下一步nn計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用WebWeb交互交互n使用使用form實(shí)現(xiàn)實(shí)現(xiàn)Web頁(yè)面的信息交互頁(yè)面的信息交互lform對(duì)象的屬性對(duì)象的屬性lform對(duì)象的方法對(duì)象的方法l訪問(wèn)訪問(wèn)form對(duì)象對(duì)象l訪問(wèn)訪問(wèn)form中的元素中的元素l舉例舉例u獲取表單中的輸入數(shù)據(jù)獲取表單中的輸入數(shù)據(jù)u下拉式菜單與圖層的綜合應(yīng)用下拉式菜單與圖層的綜合應(yīng)用n使用使用frame實(shí)現(xiàn)更復(fù)雜的交互實(shí)現(xiàn)更復(fù)雜的交互l舉例舉例u網(wǎng)頁(yè)之間的數(shù)據(jù)操作網(wǎng)頁(yè)之間的數(shù)據(jù)操作計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用formform對(duì)象對(duì)象nHTML中的中的標(biāo)記標(biāo)記l 使用使用frame實(shí)現(xiàn)

29、更實(shí)現(xiàn)更復(fù)雜的交互復(fù)雜的交互計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用formform對(duì)象屬性對(duì)象屬性n在在HTML中，表單是由若干控件（屬性域）組成的，中，表單是由若干控件（屬性域）組成的，因此，一個(gè)因此，一個(gè)form對(duì)象即是一個(gè)容器對(duì)象。對(duì)象即是一個(gè)容器對(duì)象。nelementslelements為元素?cái)?shù)組，存儲(chǔ)表單中的所有控件對(duì)象為元素?cái)?shù)組，存儲(chǔ)表單中的所有控件對(duì)象l對(duì)表單中的屬性域，可以通過(guò)對(duì)表單中的屬性域，可以通過(guò)“表單名表單名.elements下下標(biāo)標(biāo)”來(lái)訪問(wèn)，也可以通過(guò)來(lái)訪問(wèn)，也可以通過(guò)“表單名表單名.控件名控件名”來(lái)訪問(wèn)，來(lái)訪問(wèn)，例如例如myform.elements0

30、、myform.account nname，action，target，encoding，method l反映了反映了標(biāo)記中的相應(yīng)屬性標(biāo)記中的相應(yīng)屬性計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用formform對(duì)象方法對(duì)象方法nform對(duì)象的方法對(duì)象的方法l form對(duì)象的方法只有一個(gè)，即對(duì)象的方法只有一個(gè)，即submit()方法方法l document.mytest.submit();計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用訪問(wèn)訪問(wèn)formform對(duì)象對(duì)象n通過(guò)通過(guò)form名稱訪問(wèn)名稱訪問(wèn)l在在標(biāo)記中，包含一個(gè)標(biāo)記中，包含一個(gè)name屬性，它對(duì)應(yīng)了屬性，它對(duì)應(yīng)了from對(duì)

31、象的對(duì)象名，對(duì)象的對(duì)象名，Javascript程序可以通過(guò)表單名程序可以通過(guò)表單名來(lái)訪問(wèn)表單，例如：來(lái)訪問(wèn)表單，例如：document.myForm() n通過(guò)數(shù)組來(lái)訪問(wèn)通過(guò)數(shù)組來(lái)訪問(wèn)forml通過(guò)通過(guò)document對(duì)象的對(duì)象的forms對(duì)象數(shù)組來(lái)訪問(wèn)對(duì)象數(shù)組來(lái)訪問(wèn)form對(duì)象，對(duì)象，因此可通過(guò)下列格式實(shí)現(xiàn)因此可通過(guò)下列格式實(shí)現(xiàn)form對(duì)象的訪問(wèn)。對(duì)象的訪問(wèn)。document.forms0、document.forms1、document.forms2等等 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用訪問(wèn)訪問(wèn)formform中的元素中的元素n一個(gè)表單是由若干的表單控件組成的，這些控件

32、包括：一個(gè)表單是由若干的表單控件組成的，這些控件包括：文本框（文本框（text）、單選鈕（）、單選鈕（radio）、復(fù)選框）、復(fù)選框（checkbox）、按鈕（）、按鈕（button）等。每一個(gè)控件，在）等。每一個(gè)控件，在內(nèi)存中都創(chuàng)建相應(yīng)的內(nèi)存對(duì)象。內(nèi)存中都創(chuàng)建相應(yīng)的內(nèi)存對(duì)象。n在在JavaScript中要訪問(wèn)這些基本元素，必須通過(guò)對(duì)應(yīng)中要訪問(wèn)這些基本元素，必須通過(guò)對(duì)應(yīng)特定的特定的form元素的數(shù)組下標(biāo)或元素的數(shù)組下標(biāo)或form元素名來(lái)實(shí)現(xiàn)。元素名來(lái)實(shí)現(xiàn)。lformNpertyName | methodNamelformName.elementNpertyName | methodName計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用舉例舉例- -獲取表單中的輸入數(shù)據(jù)獲取表單中的輸入數(shù)據(jù)n一個(gè)表單一個(gè)表單計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用舉例舉例- -獲取表單中的輸入數(shù)據(jù)獲取表單中的輸入數(shù)據(jù)HTMLHTML代碼代碼nHTML代碼代碼nexa5-14.htm 計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)