Web 程序設(shè)計(jì)

1、Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5普通高等教育普通高等教育“十一五十一五”國家級規(guī)劃教材國家級規(guī)劃教材計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用計(jì)算機(jī)網(wǎng)絡(luò)原理、技術(shù)及應(yīng)用Web Web 程程 序序 設(shè)設(shè) 計(jì)計(jì)Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5 第第 1 章章 Web基礎(chǔ)基礎(chǔ) 第第 2 章章 Web服務(wù)器的架設(shè)和管理服務(wù)器的架設(shè)和管理 第第 3 章章 HTML和和XML基礎(chǔ)基礎(chǔ)

2、第第 4 章章 網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作 第第 5 章章 客戶端開發(fā)客戶端開發(fā) 第第 6 章章 服務(wù)端開發(fā)服務(wù)端開發(fā)目 錄Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5第 5 章 客戶端開發(fā)n瀏覽器與客戶端腳本程序?yàn)g覽器與客戶端腳本程序nJavaScript程序設(shè)計(jì)基礎(chǔ)程序設(shè)計(jì)基礎(chǔ)n事件驅(qū)動及事件處理事件驅(qū)動及事件處理n對象及其操作對象及其操作n常用內(nèi)部對象及函數(shù)常用內(nèi)部對象及函數(shù)nJavaScript瀏覽器對象模型瀏覽器對象模型BOMnHTML文檔對象模型文檔對象模型DOMnWeb交

3、互交互n使用使用AJAX技術(shù)技術(shù) n綜合舉例綜合舉例Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5JavaScriptJavaScript瀏覽器對象模型瀏覽器對象模型BOMBOMn腳本程序設(shè)計(jì)語言腳本程序設(shè)計(jì)語言lECMAScript規(guī)范規(guī)范l瀏覽器對象模型（瀏覽器對象模型（Browser Object Model，BOM）l文檔對象模型（文檔對象模型（Document Object Model，DOM） n瀏覽器對象模型瀏覽器對象模型BOMl就是指當(dāng)用戶打開瀏覽器時，瀏覽器中的就是指當(dāng)用

4、戶打開瀏覽器時，瀏覽器中的JavaScript runtime engine將在內(nèi)存中將在內(nèi)存中自動創(chuàng)建一組對象，用于對瀏覽器及自動創(chuàng)建一組對象，用于對瀏覽器及HTML文檔對象模型中數(shù)據(jù)的訪問和操作。文檔對象模型中數(shù)據(jù)的訪問和操作。 window對象 frames對象 document對象 location對象 history對象 navigator對象 screen對象 event對象 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5windowwindow對象對象nwindow對象對象l

5、即客戶的瀏覽器窗口，即客戶的瀏覽器窗口，window對象用于描述窗口的特征，它是對象用于描述窗口的特征，它是document、location、history等對象的父對象函數(shù)等對象的父對象函數(shù)isNaN()用于判用于判斷一個字符串是否為數(shù)字（斷一個字符串是否為數(shù)字（Not a Number）nwindow對象的常用屬性對象的常用屬性lwindow，self，parent和和top lopener屬性屬性 lscreenLeft和和screenTop屬性屬性 ldefaultStatus和和status屬性屬性l成員對象成員對象unavigator對象、對象、 document對象、對象、fr

6、ames對象、對象、history對象、對象、location對象、對象、screen對象等對象等 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5windowwindow對象（對象（Cont1.Cont1.）nwindow對象常用方法對象常用方法lopen()方法方法uopen(URL,WindowName,Window Features);u例如：例如：if （userrole=）window.open( other.htm , _self );lclose()方法方法unewWin.c

7、lose()；u例如：例如：關(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()方法方法 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5windoww

8、indow對象應(yīng)用舉例對象應(yīng)用舉例 n定義四個按鈕定義四個按鈕“打開新窗口打開新窗口”、“關(guān)閉關(guān)閉新窗口新窗口”、“查看源碼查看源碼”和和“測試測試window對象屬性及方法對象屬性及方法”。l點(diǎn)擊點(diǎn)擊“打開新窗口打開新窗口”按鈕，則打按鈕，則打開一個新窗口，開一個新窗口，l點(diǎn)擊點(diǎn)擊“查看源碼查看源碼”窗口則顯示當(dāng)窗口則顯示當(dāng)前前Web頁的頁的html源代碼。假設(shè)窗源代碼。假設(shè)窗口的特征是沒有工具欄、菜單、口的特征是沒有工具欄、菜單、狀態(tài)欄、定位欄，高狀態(tài)欄、定位欄，高200個像素，個像素，寬寬200個像素。個像素。l按鈕按鈕“測試測試window對象屬性及對象屬性及方法方法”對應(yīng)一個對應(yīng)一個

9、test函數(shù)，通過函數(shù)，通過修改該函數(shù)內(nèi)容，可以分別測試修改該函數(shù)內(nèi)容，可以分別測試window對象的其他屬性和方法。對象的其他屬性和方法。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5HTMLHTML代碼代碼testwin.htmnnnnfunction newone(url)nn newWin=open(url,subWindow, width=200,height=200,toolbar=0,status=0,location=0,menubar=0);n return newWi

10、n;nnfunction closeone(xWin)n n / 若窗口存在，并且沒有被關(guān)閉若窗口存在，并且沒有被關(guān)閉n if (xWin != & ! xWin.closed)n xWin.close();nn/ 可以修改該函數(shù)代碼，測試可以修改該函數(shù)代碼，測試window對象的其他方法對象的其他方法nfunction test() nn window.moveTo(0,0);nnnnn   n n n nn Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5新窗口

11、對應(yīng)的html文件bookIndex.htmnnnnbook IndexnnnIndex for The bookn nnnWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5網(wǎng)頁中時鐘的實(shí)現(xiàn)示例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 docu

12、ment.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 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5framesframes對象對象n在在window屬性中，屬性

13、中，frames是一個是一個array型成型成員對象員對象n如果窗口分禎的話，每個如果窗口分禎的話，每個frame相當(dāng)于一個單相當(dāng)于一個單獨(dú)的獨(dú)的window對象。對象。n對幀的訪問可以通過數(shù)組下標(biāo)對幀的訪問可以通過數(shù)組下標(biāo)0,1,，或者通，或者通過幀名。過幀名。l 例如，例如，window.frames0代表第一個幀窗口。代表第一個幀窗口。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5framesframes對象舉例對象舉例n建立一個包含左右兩個幀的頁面，在左面幀頁中，設(shè)建立一個包含左

14、右兩個幀的頁面，在左面幀頁中，設(shè)置一個置一個button按鈕，單擊該按鈕，改變右側(cè)幀窗口的按鈕，單擊該按鈕，改變右側(cè)幀窗口的背景色。背景色。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5framesframes對象舉例對象舉例HTMLHTML代碼代碼nnnnnn nnn左側(cè)幀窗口（左側(cè)幀窗口（left）代碼清單（）代碼清單（myleft.htm）如下：）如下：nnnnnleftnn/ 將幀窗口將幀窗口fname的背景色設(shè)置為的背景色設(shè)置為colorn/ fname的取值可以是數(shù)字的取值可

15、以是數(shù)字0,1,，也可以為幀的名稱，也可以為幀的名稱nfunction test(fname,color)nn window.parent.framesfname.document.bgColor = color; nnnnnnnnnWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5locationlocation對象對象nlocation對象用來存儲當(dāng)前窗口的對象用來存儲當(dāng)前窗口的url值。它儲存了一個完整的值。它儲存了一個完整的url，并且可，并且可能通過對能通過對location對象的賦

16、值來改變當(dāng)前窗口的對象的賦值來改變當(dāng)前窗口的url，從而改變當(dāng)前網(wǎng)頁的內(nèi)，從而改變當(dāng)前網(wǎng)頁的內(nèi)容容n屬性屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5historyhistory對象對象n一般把一般把history對象稱做歷史清單對象，它保存窗口或框架在某時間段內(nèi)的對象稱做歷史清單對象，它保存窗口或框架在某時間段內(nèi)的url。出。出于安全方面的原因，于安全方面的原因，history對象并不向腳本提供列表的真正內(nèi)容，例如一個完整的對象并不向腳本提供列表的真正內(nèi)容，例如一個完整的url名稱。

17、名稱。 n屬性屬性nWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5screenscreen對象對象nwindow對象的對象的screen成員對象包含有關(guān)客戶機(jī)顯示成員對象包含有關(guān)客戶機(jī)顯示屏幕的信息。屏幕的信息。n屬性屬性n常用的屬性是：常用的屬性是：lavailHeight（顯示屏幕的高度）（顯示屏幕的高度）lavailWidth（顯示屏幕的寬度），（顯示屏幕的寬度），lheight（顯示屏幕的高度）（顯示屏幕的高度）lwidth（顯示器屏幕的寬度）（顯示器屏幕的寬度）Web技術(shù)導(dǎo)論技術(shù)

18、導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5screenscreen對象舉例對象舉例n利用利用screen對象，在一個窗口中打開一個窗口，讓對象，在一個窗口中打開一個窗口，讓窗口在屏幕上平滑的移動，遇到屏幕邊界，將自動彈窗口在屏幕上平滑的移動，遇到屏幕邊界，將自動彈回，改變移動方向回，改變移動方向Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5bouncewin.htmbouncewin.htmnnnn

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

20、Height - h) | (y+dy 0)n dy = -dy;n /更新窗口的位置更新窗口的位置n x += dx;n y += dy;n win.moveTo(x,y);nnnWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5bouncewin.htmbouncewin.htm（Cont1.Cont1.）nnn/打開一個子窗口打開一個子窗口nvar win = window.open(javascript:hello, bounce, width= + w + ,height= + h)

21、;n/ 窗口的初始位置窗口的初始位置nwin.moveTo(x,y);n/ 使用使用setInterval() 每隔每隔100毫秒調(diào)用毫秒調(diào)用 bounce() nvar winID = window.setInterval(bounce(), 100);nnnnnn Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5eventevent對象對象n在事件創(chuàng)立時產(chǎn)生，如：點(diǎn)擊一個可點(diǎn)擊的對象，移動鼠標(biāo)，或獲得輸入焦點(diǎn)等，在事件創(chuàng)立時產(chǎn)生，如：點(diǎn)擊一個可點(diǎn)擊的對象，移動鼠標(biāo)，或獲得輸入焦點(diǎn)等，此時

22、，此時，Event對象被創(chuàng)建，用于存儲按鍵值、當(dāng)前的（對象被創(chuàng)建，用于存儲按鍵值、當(dāng)前的（x,y）坐標(biāo)等。）坐標(biāo)等。nevent對象的屬性對象的屬性n可能的事件可能的事件lonDblClick，鼠標(biāo)雙擊，鼠標(biāo)雙擊lonKeyDown，鍵被按下，鍵被按下lonKeyPress，鍵被按下然后被釋放，鍵被按下然后被釋放lonKeyUp，鍵被釋放，鍵被釋放lonMouseDown，鼠標(biāo)被按下，鼠標(biāo)被按下lonMouseMove，鼠標(biāo)移動，鼠標(biāo)移動lonMouseUp，鼠標(biāo)被釋放，鼠標(biāo)被釋放lonResize，窗口被調(diào)整大小，窗口被調(diào)整大小Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版

23、），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5HTMLHTML文檔對象模型文檔對象模型DOMDOMn概念概念l當(dāng)瀏覽器打開一個網(wǎng)頁時，不管是當(dāng)瀏覽器打開一個網(wǎng)頁時，不管是HTML還是還是XML文檔，對于網(wǎng)頁中的文檔，對于網(wǎng)頁中的每一個標(biāo)記，都在內(nèi)存中創(chuàng)建一個相應(yīng)的內(nèi)存對象。這些對象按照樹型每一個標(biāo)記，都在內(nèi)存中創(chuàng)建一個相應(yīng)的內(nèi)存對象。這些對象按照樹型結(jié)構(gòu)組織，這就是文檔對象模型結(jié)構(gòu)組織，這就是文檔對象模型DOM。 lDOM理解為網(wǎng)頁的理解為網(wǎng)頁的API，它將網(wǎng)頁中的元素看作一個個對象，這些對象，它將網(wǎng)頁中的元素看作一個個對象，這些對象通過標(biāo)記的通過標(biāo)記

24、的name屬性來命名，通過對這些可訪問的內(nèi)存對象進(jìn)行編程，屬性來命名，通過對這些可訪問的內(nèi)存對象進(jìn)行編程，來實(shí)現(xiàn)對網(wǎng)頁中元素及其屬性的修改，以便動態(tài)的修改網(wǎng)頁。來實(shí)現(xiàn)對網(wǎng)頁中元素及其屬性的修改，以便動態(tài)的修改網(wǎng)頁。l文檔對象模型（文檔對象模型（Document Object Model，DOM）是一種與瀏覽器、平）是一種與瀏覽器、平臺、語言無關(guān)的接口。臺、語言無關(guān)的接口。nDOM 被分為被分為3個不同的部分個不同的部分l核心核心DOMlXML DOMlHTML DOM Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-

25、7-302-19371-5HTML DOMHTML DOM對象對象n在在HTML文檔中，當(dāng)瀏覽器打開一個網(wǎng)頁時，為每一個標(biāo)記在內(nèi)存中建立一文檔中，當(dāng)瀏覽器打開一個網(wǎng)頁時，為每一個標(biāo)記在內(nèi)存中建立一個內(nèi)存對象，即個內(nèi)存對象，即HTML DOM對象對象Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5HTML DOMHTML DOM對象的層次關(guān)系對象的層次關(guān)系n所有的所有的HTML DOM對象中，他們之間為層次結(jié)構(gòu)關(guān)系，這種關(guān)系和對象中，他們之間為層次結(jié)構(gòu)關(guān)系，這種關(guān)系和HTML規(guī)規(guī)范中標(biāo)記之間的

26、層次關(guān)系一致。范中標(biāo)記之間的層次關(guān)系一致。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5documentdocument對象對象ndocument 對象對象l在在HTML DOM中，中，document 對象代表整個對象代表整個HTML文檔，文檔，可用來訪問頁面中的所有元素，包括文檔頭可用來訪問頁面中的所有元素，包括文檔頭部分部分和文檔體和文檔體部分部分ldocument 對象是瀏覽器對象模型對象是瀏覽器對象模型BOM中的中的window 對對象的一個部分，可通過象的一個部分，可通過 w

27、indow.document屬性來訪問。屬性來訪問。 n對象屬性對象屬性n對象方法對象方法Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5documentdocument對象屬性對象屬性n對象屬性對象屬性l在在FrontPage中的代碼視圖，輸入中的代碼視圖，輸入window.document.可打開可打開IntelliSense窗口，顯示其所包含的屬性和方法。窗口，顯示其所包含的屬性和方法。 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009

28、.04，ISBN: 978-7-302-19371-5documentdocument對象方法對象方法n對象方法對象方法Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5bodybody對象對象nhtml文檔有一個文檔有一個標(biāo)記，瀏覽器在內(nèi)存中創(chuàng)建一個標(biāo)記，瀏覽器在內(nèi)存中創(chuàng)建一個body對象，對象，body對象封裝了對象封裝了html文檔中文檔中標(biāo)記的所有屬性及所有的文檔體元素。標(biāo)記的所有屬性及所有的文檔體元素。n從從html結(jié)構(gòu)看，結(jié)構(gòu)看，body對象是對象是document 對象的成員對象

29、對象的成員對象 nBody對象屬性對象屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5bodybody對象舉例對象舉例n設(shè)置設(shè)置 元素的元素的 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.getElementB

30、yId(myid).id);ndocument.write(Body title: + x.title);nnnWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5imagesimages數(shù)組成員屬性數(shù)組成員屬性nimages數(shù)組的每個元素都是數(shù)組的每個元素都是image對象，對象，image對象的成對象的成員屬性員屬性 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5舉例舉例-動畫顯示nnn

31、nvar ImageNum=1;nfunction 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 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-

32、5links鏈接數(shù)組n鏈接數(shù)組是另一種常用的鏈接數(shù)組是另一種常用的document對象中的數(shù)組成員，對象中的數(shù)組成員，links數(shù)組的每一個元素都是一個數(shù)組的每一個元素都是一個link對象，或者是對象，或者是area對象，對應(yīng)對象，對應(yīng)html文檔中的一個超鏈接標(biāo)記文檔中的一個超鏈接標(biāo)記，用來存儲，用來存儲url的信息，通過的信息，通過links數(shù)組可以對文檔中的超鏈接進(jìn)行操作。數(shù)組可以對文檔中的超鏈接進(jìn)行操作。 n一個完整的一個完整的url可以分成幾個組成部分可以分成幾個組成部分http:/:8080/javascript/index.html#startl協(xié)議協(xié)議l端口端口l路徑路徑l文件

33、名文件名l定位文檔中的定位文檔中的anchorWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5舉例-改變URL示例nnnn n n nn下一步下一步nnWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5WebWeb交互交互n使用使用form實(shí)現(xiàn)實(shí)現(xiàn)Web頁面的信息交互頁面的信息交互lform對象的屬性對象的屬性lform對象的方法對象的方法l訪問訪問form對象對象l訪問訪問form中的元素

34、中的元素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)頁之間的數(shù)據(jù)操作網(wǎng)頁之間的數(shù)據(jù)操作Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5formform對象對象nHTML中的中的標(biāo)記標(biāo)記l 使用使用frame實(shí)現(xiàn)更實(shí)現(xiàn)更復(fù)雜的交互復(fù)雜的交互Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-

35、302-19371-5formform對象屬性對象屬性n在在HTML中，表單是由若干控件（屬性域）組成的，中，表單是由若干控件（屬性域）組成的，因此，一個因此，一個form對象即是一個容器對象。對象即是一個容器對象。nelementslelements為元素數(shù)組，存儲表單中的所有控件對象為元素數(shù)組，存儲表單中的所有控件對象l對表單中的屬性域，可以通過對表單中的屬性域，可以通過“表單名表單名.elements下下標(biāo)標(biāo)”來訪問，也可以通過來訪問，也可以通過“表單名表單名.控件名控件名”來訪問，來訪問，例如例如myform.elements0、myform.account nname，action，

36、target，encoding，method l反映了反映了標(biāo)記中的相應(yīng)屬性標(biāo)記中的相應(yīng)屬性Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5formform對象方法對象方法nform對象的方法對象的方法l form對象的方法只有一個，即對象的方法只有一個，即submit()方法方法l document.mytest.submit();Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5訪問訪問

37、formform對象對象n通過通過form名稱訪問名稱訪問l在在標(biāo)記中，包含一個標(biāo)記中，包含一個name屬性，它對應(yīng)了屬性，它對應(yīng)了from對象的對象名，對象的對象名，Javascript程序可以通過表單名程序可以通過表單名來訪問表單，例如：來訪問表單，例如：document.myForm() n通過數(shù)組來訪問通過數(shù)組來訪問forml通過通過document對象的對象的forms對象數(shù)組來訪問對象數(shù)組來訪問form對象，對象，因此可通過下列格式實(shí)現(xiàn)因此可通過下列格式實(shí)現(xiàn)form對象的訪問。對象的訪問。document.forms0、document.forms1、document.forms2

38、等等 Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5訪問訪問formform中的元素中的元素n一個表單是由若干的表單控件組成的，這些控件包括：一個表單是由若干的表單控件組成的，這些控件包括：文本框（文本框（text）、單選鈕（）、單選鈕（radio）、復(fù)選框）、復(fù)選框（checkbox）、按鈕（）、按鈕（button）等。每一個控件，在）等。每一個控件，在內(nèi)存中都創(chuàng)建相應(yīng)的內(nèi)存對象。內(nèi)存中都創(chuàng)建相應(yīng)的內(nèi)存對象。n在在JavaScript中要訪問這些基本元素，必須通過對應(yīng)中要訪問這些基本元素

39、，必須通過對應(yīng)特定的特定的form元素的數(shù)組下標(biāo)或元素的數(shù)組下標(biāo)或form元素名來實(shí)現(xiàn)。元素名來實(shí)現(xiàn)。lformNpertyName | methodNamelformName.elementNpertyName | methodNameWeb技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5舉例舉例- -獲取表單中的輸入數(shù)據(jù)獲取表單中的輸入數(shù)據(jù)n一個表單一個表單Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2

40、009.04，ISBN: 978-7-302-19371-5舉例舉例- -獲取表單中的輸入數(shù)據(jù)獲取表單中的輸入數(shù)據(jù)HTMLHTML代碼代碼nHTML代碼代碼nexa5-14.htm Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5舉例舉例- -下拉式菜單與圖層的綜合應(yīng)用下拉式菜單與圖層的綜合應(yīng)用n下拉式菜單與圖層的綜合應(yīng)用下拉式菜單與圖層的綜合應(yīng)用Web技術(shù)導(dǎo)論技術(shù)導(dǎo)論（第二版），北京：清華大學(xué)出版社，（第二版），北京：清華大學(xué)出版社，2009.04，ISBN: 978-7-302-19371-5舉例舉例- -下拉式菜單與圖層的綜合應(yīng)用下拉式菜單與圖層的綜合應(yīng)用HTMLHTML代碼代碼n