WebCh06B(HaoXW)客戶端編程

1、高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎 第第 1 章章 Web技術基礎技術基礎 第第 2 章章 標記語言與網頁制作標記語言與網頁制作 第第 3 章章 圖像處理技術圖像處理技術 第第 4 章章 音頻與視頻處理音頻與視頻處理 第第 5 章章 Flash動畫設計動畫設計 第第 6 章章 客戶端編程客戶端編程 第第 7 章章 服務端編程服務端編程目 錄高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎第 6 章 客戶端編程n瀏覽

2、器與客戶端腳本程序瀏覽器與客戶端腳本程序nJavaScript程序設計基礎程序設計基礎n事件驅動及事件處理事件驅動及事件處理n對象及其操作對象及其操作n常用內部對象及函數常用內部對象及函數nJavaScript瀏覽器對象模型瀏覽器對象模型BOMnHTML文檔對象模型文檔對象模型DOMnWeb交互交互n使用使用AJAX技術技術 n綜合舉例綜合舉例高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎JavaScriptJavaScript瀏覽器對象模型瀏覽器對象模型BOMBOMn腳本程序設計語言腳本程序設計語言lECMAScript規(guī)范規(guī)范l瀏覽器對象模型（瀏覽

3、器對象模型（Browser Object Model，BOM）l文檔對象模型（文檔對象模型（Document Object Model，DOM） n瀏覽器對象模型瀏覽器對象模型BOMl就是指當用戶打開瀏覽器時，瀏覽器中的就是指當用戶打開瀏覽器時，瀏覽器中的JavaScript runtime engine將在內存中將在內存中自動創(chuàng)建一組對象，用于對瀏覽器及自動創(chuàng)建一組對象，用于對瀏覽器及HTML文檔對象模型中數據的訪問和操作。文檔對象模型中數據的訪問和操作。 window對象 frames對象 document對象 location對象 history對象 navigator對象 screen

4、對象 event對象 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎windowwindow對象對象nwindow對象對象l即客戶的瀏覽器窗口，即客戶的瀏覽器窗口，window對象用于描述窗口的特征，它是對象用于描述窗口的特征，它是document、location、history等對象的父對象函數等對象的父對象函數isNaN()用于判用于判斷一個字符串是否為數字（斷一個字符串是否為數字（Not a Number）nwindow對象的常用屬性對象的常用屬性lwindow，self，parent和和top lopener屬性屬性 lscreenLeft和

5、和screenTop屬性屬性 ldefaultStatus和和status屬性屬性l成員對象成員對象unavigator對象、對象、 document對象、對象、frames對象、對象、history對象、對象、location對象、對象、screen對象等對象等 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎windowwindow對象（對象（Cont1.Cont1.）nwindow對象常用方法對象常用方法lopen()方法方法uopen(URL,WindowName,Window Features);u例如：例如：if （userrole=）win

6、dow.open( other.htm , _self );lclose()方法方法unewWin.close()；u例如：例如：關閉窗口關閉窗口 lmoveBy（x,y）方法）方法lresizeBy(x,y)方法方法lscroll(x,y)方法方法lfocus()和和blur()方法方法l系統(tǒng)提示相關方法系統(tǒng)提示相關方法ualert(字符串字符串) 方法方法uconfirm(字符串字符串) 方法方法 uprompt(message,initial input);lsetTimeout()和和clearTimeout()方法方法 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家

7、級規(guī)劃教材計算機技術基礎windowwindow對象應用舉例對象應用舉例 n定義四個按鈕定義四個按鈕“打開新窗口打開新窗口”、“關閉關閉新窗口新窗口”、“查看源碼查看源碼”和和“測試測試window對象屬性及方法對象屬性及方法”。l點擊點擊“打開新窗口打開新窗口”按鈕，則打按鈕，則打開一個新窗口，開一個新窗口，l點擊點擊“查看源碼查看源碼”窗口則顯示當窗口則顯示當前前Web頁的頁的html源代碼。假設窗源代碼。假設窗口的特征是沒有工具欄、菜單、口的特征是沒有工具欄、菜單、狀態(tài)欄、定位欄，高狀態(tài)欄、定位欄，高200個像素，個像素，寬寬200個像素。個像素。l按鈕按鈕“測試測試window對象屬性

8、及對象屬性及方法方法”對應一個對應一個test函數，通過函數，通過修改該函數內容，可以分別測試修改該函數內容，可以分別測試window對象的其他屬性和方法。對象的其他屬性和方法。 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎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

9、closeone(xWin)n n / 若窗口存在，并且沒有被關閉若窗口存在，并且沒有被關閉n if (xWin != & ! xWin.closed)n xWin.close();nn/ 可以修改該函數代碼，測試可以修改該函數代碼，測試window對象的其他方法對象的其他方法nfunction test() nn window.moveTo(0,0);nnnnn   n n n nn 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎新窗口對應的html文件bookIndex.htmnnnnbook IndexnnnIndex

10、for The bookn nnn高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎網頁中時鐘的實現示例nnnn var timeID;n var Running=false;n function StartTime()n n running=true;n ChangeTime();n n function ChangeTime()n n var currentTime=new Date();n document.myClock.show.value=currentTime.toLocaleString();n /遞歸調用遞歸調用n timeID=setT

11、imeout(ChangeTime(),1000);n n function StopTime()n n if (Running)n clearTimeout(timeID);n Running=false;n nnnnn nnn 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎framesframes對象對象n在在window屬性中，屬性中，frames是一個是一個array型成型成員對象員對象n如果窗口分禎的話，每個如果窗口分禎的話，每個frame相當于一個單相當于一個單獨的獨的window對象。對象。n對幀的訪問可以通過數組下標對幀的訪問可以通過數

12、組下標0,1,，或者通，或者通過幀名。過幀名。l 例如，例如，window.frames0代表第一個幀窗口。代表第一個幀窗口。 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎framesframes對象舉例對象舉例n建立一個包含左右兩個幀的頁面，在左面幀頁中，設建立一個包含左右兩個幀的頁面，在左面幀頁中，設置一個置一個button按鈕，單擊該按鈕，改變右側幀窗口的按鈕，單擊該按鈕，改變右側幀窗口的背景色。背景色。 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎framesframes對象舉例對象舉例HTMLHT

13、ML代碼代碼nnnnnn nnn左側幀窗口（左側幀窗口（left）代碼清單（）代碼清單（myleft.htm）如下：）如下：nnnnnleftnn/ 將幀窗口將幀窗口fname的背景色設置為的背景色設置為colorn/ fname的取值可以是數字的取值可以是數字0,1,，也可以為幀的名稱，也可以為幀的名稱nfunction test(fname,color)nn window.parent.framesfname.document.bgColor = color; nnnnnnnnn高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎locationloca

14、tion對象對象nlocation對象用來存儲當前窗口的對象用來存儲當前窗口的url值。它儲存了一個完整的值。它儲存了一個完整的url，并且可，并且可能通過對能通過對location對象的賦值來改變當前窗口的對象的賦值來改變當前窗口的url，從而改變當前網頁的內，從而改變當前網頁的內容容n屬性屬性高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎historyhistory對象對象n一般把一般把history對象稱做歷史清單對象，它保存窗口或框架在某時間段內的對象稱做歷史清單對象，它保存窗口或框架在某時間段內的url。出。出于安全方面的原因，于安全方面的原

15、因，history對象并不向腳本提供列表的真正內容，例如一個完整的對象并不向腳本提供列表的真正內容，例如一個完整的url名稱。名稱。 n屬性屬性n高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎screenscreen對象對象nwindow對象的對象的screen成員對象包含有關客戶機顯示成員對象包含有關客戶機顯示屏幕的信息。屏幕的信息。n屬性屬性n常用的屬性是：常用的屬性是：lavailHeight（顯示屏幕的高度）（顯示屏幕的高度）lavailWidth（顯示屏幕的寬度），（顯示屏幕的寬度），lheight（顯示屏幕的高度）（顯示屏幕的高度）lwid

16、th（顯示器屏幕的寬度）（顯示器屏幕的寬度）高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎screenscreen對象舉例對象舉例n利用利用screen對象，在一個窗口中打開一個窗口，讓對象，在一個窗口中打開一個窗口，讓窗口在屏幕上平滑的移動，遇到屏幕邊界，將自動彈窗口在屏幕上平滑的移動，遇到屏幕邊界，將自動彈回，改變移動方向回，改變移動方向高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎bouncewin.htmbouncewin.htmnnnn/ 初始化動畫的變量初始化動畫的變量nvar x = 0, y =

17、 0, w=100, h=100; / 窗口的位置和大小窗口的位置和大小nvar dx = 5, dy = 5; / 窗口在窗口在x,y方向每次移動的距離方向每次移動的距離n/窗口移動函數，將窗口移動到窗口移動函數，將窗口移動到(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)n dy = -dy;

18、n /更新窗口的位置更新窗口的位置n x += dx;n y += dy;n win.moveTo(x,y);nnn高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎bouncewin.htmbouncewin.htm（Cont1.Cont1.）nnn/打開一個子窗口打開一個子窗口nvar win = window.open(javascript:hello, bounce, width= + w + ,height= + h);n/ 窗口的初始位置窗口的初始位置nwin.moveTo(x,y);n/ 使用使用setInterval() 每隔每隔100毫秒

19、調用毫秒調用 bounce() nvar winID = window.setInterval(bounce(), 100);nnnnnn 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎eventevent對象對象n在事件創(chuàng)立時產生，如：點擊一個可點擊的對象，移動鼠標，或獲得輸入焦點等，在事件創(chuàng)立時產生，如：點擊一個可點擊的對象，移動鼠標，或獲得輸入焦點等，此時，此時，Event對象被創(chuàng)建，用于存儲按鍵值、當前的（對象被創(chuàng)建，用于存儲按鍵值、當前的（x,y）坐標等。）坐標等。nevent對象的屬性對象的屬性n可能的事件可能的事件lonDblClick，

20、鼠標雙擊，鼠標雙擊lonKeyDown，鍵被按下，鍵被按下lonKeyPress，鍵被按下然后被釋放，鍵被按下然后被釋放lonKeyUp，鍵被釋放，鍵被釋放lonMouseDown，鼠標被按下，鼠標被按下lonMouseMove，鼠標移動，鼠標移動lonMouseUp，鼠標被釋放，鼠標被釋放lonResize，窗口被調整大小，窗口被調整大小高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎HTMLHTML文檔對象模型文檔對象模型DOMDOMn概念概念l當瀏覽器打開一個網頁時，不管是當瀏覽器打開一個網頁時，不管是HTML還是還是XML文檔，對于網頁中的文檔，

21、對于網頁中的每一個標記，都在內存中創(chuàng)建一個相應的內存對象。這些對象按照樹型每一個標記，都在內存中創(chuàng)建一個相應的內存對象。這些對象按照樹型結構組織，這就是文檔對象模型結構組織，這就是文檔對象模型DOM。 lDOM理解為網頁的理解為網頁的API，它將網頁中的元素看作一個個對象，這些對象，它將網頁中的元素看作一個個對象，這些對象通過標記的通過標記的name屬性來命名，通過對這些可訪問的內存對象進行編程，屬性來命名，通過對這些可訪問的內存對象進行編程，來實現對網頁中元素及其屬性的修改，以便動態(tài)的修改網頁。來實現對網頁中元素及其屬性的修改，以便動態(tài)的修改網頁。l文檔對象模型（文檔對象模型（Documen

22、t Object Model，DOM）是一種與瀏覽器、平）是一種與瀏覽器、平臺、語言無關的接口。臺、語言無關的接口。nDOM 被分為被分為3個不同的部分個不同的部分l核心核心DOMlXML DOMlHTML DOM 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎HTML DOMHTML DOM對象對象n在在HTML文檔中，當瀏覽器打開一個網頁時，為每一個標記在內存中建立一文檔中，當瀏覽器打開一個網頁時，為每一個標記在內存中建立一個內存對象，即個內存對象，即HTML DOM對象對象高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材

23、計算機技術基礎HTML DOMHTML DOM對象的層次關系對象的層次關系n所有的所有的HTML DOM對象中，他們之間為層次結構關系，這種關系和對象中，他們之間為層次結構關系，這種關系和HTML規(guī)規(guī)范中標記之間的層次關系一致。范中標記之間的層次關系一致。 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎documentdocument對象對象ndocument 對象對象l在在HTML DOM中，中，document 對象代表整個對象代表整個HTML文檔，文檔，可用來訪問頁面中的所有元素，包括文檔頭可用來訪問頁面中的所有元素，包括文檔頭部分部分和文檔體和

24、文檔體部分部分ldocument 對象是瀏覽器對象模型對象是瀏覽器對象模型BOM中的中的window 對對象的一個部分，可通過象的一個部分，可通過 window.document屬性來訪問。屬性來訪問。 n對象屬性對象屬性n對象方法對象方法高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎documentdocument對象屬性對象屬性n對象屬性對象屬性l在在FrontPage中的代碼視圖，輸入中的代碼視圖，輸入window.document.可打開可打開IntelliSense窗口，顯示其所包含的屬性和方法。窗口，顯示其所包含的屬性和方法。 高等教育高等

25、教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎documentdocument對象方法對象方法n對象方法對象方法高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎bodybody對象對象nhtml文檔有一個文檔有一個標記，瀏覽器在內存中創(chuàng)建一個標記，瀏覽器在內存中創(chuàng)建一個body對象，對象，body對象封裝了對象封裝了html文檔中文檔中標記的所有屬性及所有的文檔體元素。標記的所有屬性及所有的文檔體元素。n從從html結構看，結構看，body對象是對象是document 對象的成員對象對象的成員對象 nBody對象屬性對象屬性

26、高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎bodybody對象舉例對象舉例n設置設置 元素的元素的 id nnnn x=document.getElementsByTagName(body)0;n document.write(Body id: + x.id);n document.write();n document.write(An alternate way: );n document.write(document.getElementById(myid).id);ndocument.write(Body title: + x.title);

27、nnn高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎imagesimages數組成員屬性數組成員屬性nimages數組的每個元素都是數組的每個元素都是image對象，對象，image對象的成對象的成員屬性員屬性 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例舉例-動畫顯示nnnnvar ImageNum=1;nfunction Begin()nndocument.MyImage.src=ImageArrayImageNum.src;nImageNum+;nif (ImageNum3)nImageNum=1;

28、nnnnnnnvar ImageArray=new Array();nfor (i=1;i=3;i+)nnImageArrayi=new image();nImageArrayi.src=tu+i+.gifnnnn 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎links鏈接數組n鏈接數組是另一種常用的鏈接數組是另一種常用的document對象中的數組成員，對象中的數組成員，links數組的每一個元素都是一個數組的每一個元素都是一個link對象，或者是對象，或者是area對象，對應對象，對應html文檔中的一個超鏈接標記文檔中的一個超鏈接標記，用來存儲

29、，用來存儲url的信息，通過的信息，通過links數組可以對文檔中的超鏈接進行操作。數組可以對文檔中的超鏈接進行操作。 n一個完整的一個完整的url可以分成幾個組成部分可以分成幾個組成部分http:/:8080/javascript/index.html#startl協(xié)議協(xié)議l端口端口l路徑路徑l文件名文件名l定位文檔中的定位文檔中的anchor高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例-改變URL示例nnnn n n nn下一步下一步nn高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎WebWeb交互交

30、互n使用使用form實現實現Web頁面的信息交互頁面的信息交互lform對象的屬性對象的屬性lform對象的方法對象的方法l訪問訪問form對象對象l訪問訪問form中的元素中的元素l舉例舉例u獲取表單中的輸入數據獲取表單中的輸入數據u下拉式菜單與圖層的綜合應用下拉式菜單與圖層的綜合應用n使用使用frame實現更復雜的交互實現更復雜的交互l舉例舉例u網頁之間的數據操作網頁之間的數據操作高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎formform對象對象nHTML中的中的標記標記l 使用使用frame實現更實現更復雜的交互復雜的交互高等教育高等教育“十

31、一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎formform對象屬性對象屬性n在在HTML中，表單是由若干控件（屬性域）組成的，中，表單是由若干控件（屬性域）組成的，因此，一個因此，一個form對象即是一個容器對象。對象即是一個容器對象。nelementslelements為元素數組，存儲表單中的所有控件對象為元素數組，存儲表單中的所有控件對象l對表單中的屬性域，可以通過對表單中的屬性域，可以通過“表單名表單名.elements下下標標”來訪問，也可以通過來訪問，也可以通過“表單名表單名.控件名控件名”來訪問，來訪問，例如例如myform.elements0、myfor

32、m.account nname，action，target，encoding，method l反映了反映了標記中的相應屬性標記中的相應屬性高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎formform對象方法對象方法nform對象的方法對象的方法l form對象的方法只有一個，即對象的方法只有一個，即submit()方法方法l document.mytest.submit();高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎訪問訪問formform對象對象n通過通過form名稱訪問名稱訪問l在在標記中，包含一個標

33、記中，包含一個name屬性，它對應了屬性，它對應了from對象的對象名，對象的對象名，Javascript程序可以通過表單名程序可以通過表單名來訪問表單，例如：來訪問表單，例如：document.myForm() n通過數組來訪問通過數組來訪問forml通過通過document對象的對象的forms對象數組來訪問對象數組來訪問form對象，對象，因此可通過下列格式實現因此可通過下列格式實現form對象的訪問。對象的訪問。document.forms0、document.forms1、document.forms2等等 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計

34、算機技術基礎訪問訪問formform中的元素中的元素n一個表單是由若干的表單控件組成的，這些控件包括：一個表單是由若干的表單控件組成的，這些控件包括：文本框（文本框（text）、單選鈕（）、單選鈕（radio）、復選框）、復選框（checkbox）、按鈕（）、按鈕（button）等。每一個控件，在）等。每一個控件，在內存中都創(chuàng)建相應的內存對象。內存中都創(chuàng)建相應的內存對象。n在在JavaScript中要訪問這些基本元素，必須通過對應中要訪問這些基本元素，必須通過對應特定的特定的form元素的數組下標或元素的數組下標或form元素名來實現。元素名來實現。lformN

35、pertyName | methodNamelformName.elementNpertyName | methodName高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例舉例- -獲取表單中的輸入數據獲取表單中的輸入數據n一個表單一個表單高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例舉例- -獲取表單中的輸入數據獲取表單中的輸入數據HTMLHTML代碼代碼nHTML代碼代碼nexa5-14.htm 高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例舉例- -下拉式菜單與圖層的綜合應用下拉式菜單與圖層的綜合應用n下拉式菜單與圖層的綜合應用下拉式菜單與圖層的綜合應用高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎舉例舉例- -下拉式菜單與圖層的綜合應用下拉式菜單與圖層的綜合應用HTMLHTML代碼代碼n下拉式菜單與圖層的綜合應用下拉式菜單與圖層的綜合應用nExa5-15Menu+Div高等教育高等教育“十一五十一五”國家級規(guī)劃教材計算機技術基礎國家級規(guī)劃教材計算機技術基礎使用使用framefra