《基于新信息技術(shù)的JavaScript程序設(shè)計(jì)基礎(chǔ)》課件-第4章

項(xiàng)目4Window對(duì)象任務(wù)1先導(dǎo)知識(shí)：DOM、Window對(duì)象的屬性和方法、其他內(nèi)置對(duì)象任務(wù)2打開(kāi)注冊(cè)頁(yè)面程序

任務(wù)1先導(dǎo)知識(shí)：DOM、Window

對(duì)象的屬性和方法、其他內(nèi)置對(duì)象4.1.1文檔對(duì)象模型(DOM)概述DOM的全稱(chēng)為DocumentObjectModel，意思即為文檔對(duì)象模型。當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)按照HTML文檔的結(jié)構(gòu)，將網(wǎng)頁(yè)中的元素逐一讀取，構(gòu)建成HTML對(duì)象。HTML中的所有元素構(gòu)建成的對(duì)象組成整個(gè)HTML文檔的文檔對(duì)象模型(DOM)。

HTMLDOM被構(gòu)建成與HTML文檔結(jié)構(gòu)一致的對(duì)象樹(shù)，如圖4.1所示。圖4.1對(duì)象樹(shù)

節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系，如圖4.2所示。圖4.2節(jié)點(diǎn)層級(jí)關(guān)系

4.1.2JavaScript的Window對(duì)象

Window對(duì)象為瀏覽器窗口對(duì)象，為文檔提供一個(gè)顯示的容器。當(dāng)瀏覽器載入目標(biāo)文檔時(shí)，打開(kāi)瀏覽器窗口的同時(shí)，創(chuàng)建Window對(duì)象的實(shí)例，Web應(yīng)用程序開(kāi)發(fā)者可通過(guò)JavaScript引用該實(shí)例，從而進(jìn)行諸如獲取窗口信息、設(shè)置瀏覽器窗口狀態(tài)或新建瀏覽器窗口等操作。同時(shí)，Window對(duì)象提供一些方法產(chǎn)生圖形用戶(hù)界面中用于客戶(hù)與頁(yè)面進(jìn)行交互的對(duì)話(huà)框，并能通過(guò)腳本獲取其返回值然后決定瀏覽器后續(xù)行為。

由于Window對(duì)象是頂級(jí)對(duì)象模型中的最高級(jí)對(duì)象，對(duì)當(dāng)前瀏覽器的屬性和方法，以及當(dāng)前文檔中任何元素的操作都默認(rèn)以Window對(duì)象為起始點(diǎn)，并按照對(duì)象的繼承順序進(jìn)行訪(fǎng)問(wèn)和相關(guān)操作，所以在訪(fǎng)問(wèn)這些目標(biāo)時(shí)，可將引用Window對(duì)象的代碼省略掉。如在需要給客戶(hù)以警告信息的場(chǎng)合調(diào)用Window對(duì)象的alert()方法產(chǎn)生警告框，可以直接使用alert(targetStr)語(yǔ)句，而不需要使用window.alert(targetStr)。但在框架集或者父子窗口通信時(shí)，須明確指明要發(fā)送消息的窗口名稱(chēng)。

Window對(duì)象有很多的屬性和方法供我們調(diào)用，表4.1、表4.2列舉了Window對(duì)象常用的屬性和方法。

4.1.3其他對(duì)象概述

1.?Screen對(duì)象

在Web應(yīng)用程序中，為某種特殊目的，如固定文檔窗口相對(duì)于屏幕尺寸的比例、根據(jù)顯示器的顏色位數(shù)選擇需要加載的目標(biāo)圖片等都需要先獲得屏幕的相關(guān)信息。Screen對(duì)象提供了height和width屬性用于獲取客戶(hù)屏幕的高度和寬度信息，如分辨率為1024?×?768的顯示器，調(diào)用這兩個(gè)屬性后分別返回1024和768至系統(tǒng)。并不是所有的屏幕區(qū)域都可以用來(lái)顯示文檔窗口，如任務(wù)欄等。

為此，Screen對(duì)象提供了availHeight和availWidth屬性來(lái)返回客戶(hù)端屏幕的可用顯示區(qū)域。一般來(lái)說(shuō)，Windows操作系統(tǒng)的任務(wù)欄默認(rèn)在屏幕的底部，也可以被拖動(dòng)到屏幕的兩側(cè)或者頂部。假定屏幕的分辨率為1024?×?768，當(dāng)任務(wù)欄在屏幕的底部或者頂部時(shí)，其占據(jù)的屏幕區(qū)域大小為1024?×?30；當(dāng)任務(wù)欄被拖動(dòng)到屏幕兩側(cè)時(shí)，其占據(jù)的屏幕區(qū)域大小為60?×?768。表4.3列出了Screen對(duì)象的常用屬性。

2.?History對(duì)象

在頂級(jí)對(duì)象模型中，History對(duì)象處于Window對(duì)象的下一個(gè)層次，主要用于跟蹤瀏覽器最近訪(fǎng)問(wèn)的歷史URL地址列表。除了NN4+中使用簽名腳本并得到用戶(hù)許可的情況之外，該歷史URL地址列表并不能由JavaScript顯示讀出，而只能通過(guò)調(diào)用History對(duì)象的方法模仿瀏覽器的動(dòng)作來(lái)實(shí)現(xiàn)訪(fǎng)問(wèn)頁(yè)面之間的漫游。

1)?back()和forward()

History對(duì)象提供back()、forward()和go()方法來(lái)實(shí)現(xiàn)站點(diǎn)頁(yè)面的導(dǎo)航。back()和forward()方法實(shí)現(xiàn)的功能分別與瀏覽器工具欄中“后退”和“前進(jìn)”導(dǎo)航按鈕相同，而go()方法則可接受合法參數(shù)，并將瀏覽器定位到由參數(shù)指定的歷史頁(yè)面。這三種方法觸發(fā)腳本檢測(cè)瀏覽器的歷史URL地址記錄，然后將瀏覽器定位到目標(biāo)頁(yè)面，整個(gè)過(guò)程與文檔無(wú)關(guān)。

值得注意的是，History對(duì)象的back()和forward()方法只能通過(guò)目標(biāo)窗口或框架的歷史URL地址記錄列表分別向后和向前延伸，兩者互為平衡。這兩種方法有個(gè)顯著的缺點(diǎn)，就是只能實(shí)現(xiàn)歷史URL地址列表的順序訪(fǎng)問(wèn)，而不能實(shí)現(xiàn)有選擇的訪(fǎng)問(wèn)。為此，History對(duì)象引入了go()方法實(shí)現(xiàn)歷史URL地址列表的選擇訪(fǎng)問(wèn)。

2)?go()

History對(duì)象提供另外一種站點(diǎn)導(dǎo)航的方法即history.go(index|URLString)，該方法可接受兩種形式的參數(shù)：

·參數(shù)index傳入導(dǎo)航目標(biāo)頁(yè)面與當(dāng)前頁(yè)面之間的相對(duì)位置，正整數(shù)值表示向前，負(fù)整數(shù)值表示向后。

·參數(shù)URLString表示歷史URL列表中目標(biāo)頁(yè)面的URL，要使history.go(URLString)方法有效，則URLString必須存在于歷史URL列表中。

3.?Location對(duì)象

Location對(duì)象在頂級(jí)對(duì)象模型中處于Window對(duì)象的下一個(gè)層次，用于保存瀏覽器當(dāng)前打開(kāi)的窗口或框架的URL信息。如果窗口含有框架集，則瀏覽器的Location對(duì)象保存其父窗口的URL信息，同時(shí)每個(gè)框架都有與之相關(guān)聯(lián)的URL信息。在深入了解Location對(duì)象之前，先簡(jiǎn)單介紹URL的概念。

1)統(tǒng)一資源定位器(URL)

URL(UniformResourceLocator，統(tǒng)一資源定位器)是Internet上用來(lái)描述信息資源的字符串，主要用在各種WWW客戶(hù)程序和服務(wù)器程序上。采用URL可以用一種統(tǒng)一的格式來(lái)描述各種信息資源，包括文件、服務(wù)器地址和目錄等。

URL常見(jiàn)格式如下：

protocol://hostname[:port]/[path][?search][#hash]

參數(shù)的意義如下：

protocol：指訪(fǎng)問(wèn)Internet資源和服務(wù)的網(wǎng)絡(luò)協(xié)議。常見(jiàn)的協(xié)議有Http、Ftp、File、Telnet、Gopher等。

hostname：指要訪(fǎng)問(wèn)的資源和服務(wù)所在的主機(jī)對(duì)應(yīng)的域名，由DNS負(fù)責(zé)解析。如、等。

port：指網(wǎng)絡(luò)協(xié)議所使用的TCP端口號(hào)，此參數(shù)可選，并且在服務(wù)器端可自由設(shè)置。如Http協(xié)議常使用80端口等。

path：指要訪(fǎng)問(wèn)的資源和服務(wù)相對(duì)于主機(jī)的路徑，此參數(shù)可選。假設(shè)目標(biāo)頁(yè)面“query.cgi”相對(duì)于主機(jī)hostname的位置為/MyWeb/htdocs/，訪(fǎng)問(wèn)該頁(yè)面的網(wǎng)絡(luò)協(xié)議為Http，則通過(guò)http://hostname/MyWeb/htdocs/query.cgi進(jìn)行訪(fǎng)問(wèn)。

search：指URL中傳遞的查詢(xún)字符串。該字符串通過(guò)環(huán)境變量QUERY_STRING傳遞給CGI程序，并使用問(wèn)號(hào)(?)與CGI程序相連，若有多項(xiàng)查詢(xún)目標(biāo)，則使用加號(hào)(+)連接，此參數(shù)可選。例如，要在“query.cgi”中查詢(xún)name、number和code信息，可通過(guò)語(yǔ)句http://hostname/MyWeb/htdocs/query.cgi?name+number+code實(shí)現(xiàn)。

hash：表示指定的文件偏移量，包括散列號(hào)(#)和該文件偏移量相關(guān)的位置點(diǎn)名稱(chēng)，此參數(shù)可選。例如，要?jiǎng)?chuàng)建與位置點(diǎn)“MyPart”相關(guān)聯(lián)的文件部分的鏈接，可在鏈接的URL后添加“#MyPart”。

URL是Location對(duì)象與目標(biāo)文檔之間聯(lián)系的紐帶。Location對(duì)象提供的方法可通過(guò)傳入的URL將文檔裝入瀏覽器，并通過(guò)其屬性保存URL的各項(xiàng)信息，如網(wǎng)絡(luò)協(xié)議、主機(jī)名、端口號(hào)等。

2)?Location對(duì)象屬性與方法

瀏覽器載入目標(biāo)頁(yè)面后，Location對(duì)象的諸多屬性保存了該頁(yè)面URL的所有信息，其常用屬性、方法如表4.4所示。

3)頁(yè)面跳轉(zhuǎn)和刷新

通過(guò)改變Location對(duì)象的href屬性值可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，類(lèi)似于用戶(hù)手工在地址欄輸入其他地址然后按回車(chē)鍵從而載入其他頁(yè)面，同時(shí)也可以調(diào)用Location對(duì)象的reload()方法可以刷新當(dāng)前頁(yè)面。

4.?Document對(duì)象