項目五多窗體注冊頁面——窗口對象設(shè)計一個多窗體的用戶注冊頁面，具體需求如下：①如圖5.1所示，在首頁上有一個“注冊”按鈕，點擊可以進入如圖5.2的注冊頁面。首頁窗體狀態(tài)欄上有一行文字“歡迎您光臨本站！”從右向左循環(huán)滾動。項目情境

圖5.1首頁

圖5.1首頁

圖5.2注冊頁面項目情境②打開如圖5.2所示注冊頁面，默認(rèn)尺寸為280*400像素。點擊“注冊須知”按鈕打開一個對話框窗口（如圖5.3）,此對話框窗口尺寸為200*200像素，點擊其中的“關(guān)閉”鏈接，可以關(guān)閉此對話框窗口。

圖5.3注冊須知項目情境③在圖5.2的注冊頁面的簡介文本區(qū)域框中填入簡介信息，點擊“編輯>>”按鈕，打開如圖5.4所示的頁面，在該頁面中可以重新編輯簡介信息，編輯完成后，點擊“確定修改并關(guān)閉本窗口”按鈕，將本窗口關(guān)閉，并且把重新編輯的簡介信息更新到注冊頁面的簡介文本區(qū)域框中。圖5.4編輯簡介頁面項目情境④點擊圖5.2注冊頁面中的“首頁”按鈕，頁面跳轉(zhuǎn)到圖5.1所示的首頁，點擊“關(guān)閉”按鈕，直接關(guān)閉注冊頁面。掌握窗體對象Window的常用屬性和方法。掌握地址對象Location的常用屬性和方法。掌握歷史對象History的常用屬性和方法。掌握屏幕對象Screen的常用屬性和方法。掌握瀏覽器對象Navigator的常用屬性和方法。學(xué)習(xí)目標(biāo)在如圖5.5的頁面上有三個按鈕，點擊“關(guān)閉本窗口”按鈕，彈出如圖5.6所示的關(guān)閉窗口選擇對話框，點擊“是”按鈕，當(dāng)前窗口關(guān)閉，點擊“否”，不關(guān)閉當(dāng)前窗口。點擊“立即關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對話框。點擊“打開子窗口”按鈕，打開如圖5.7所示的窗口，點擊該窗口上的“關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對話框。任務(wù)1打開和關(guān)閉窗口圖5.5主窗口圖5.6關(guān)閉窗口選擇對話框圖5.7子窗口1、窗口對象WindowWindow對象代表的是整個瀏覽器窗口?！鞠嚓P(guān)知識】屬性描述

closed獲取引用窗口是否已關(guān)閉。

defaultStatus設(shè)置或獲取要在窗口底部的狀態(tài)欄上顯示的缺省信息。

dialogArguments設(shè)置或獲取傳遞給模式對話框窗口的變量或變量數(shù)組。

dialogHeight設(shè)置或獲取模式對話框的高度。

dialogLeft設(shè)置或獲取模式對話框的左坐標(biāo)。

dialogTop設(shè)置或獲取模式對話框的頂坐標(biāo)。

dialogWidth設(shè)置或獲取模式對話框的寬度。

frameElement獲取在父文檔中生成window的frame或iframe對象。

length設(shè)置或獲取集合中對象的數(shù)目。

name設(shè)置或獲取表明窗口名稱的值。

offscreenBuffering設(shè)置或獲取對象在對用戶可見之前是否要先在屏幕外繪制。

opener設(shè)置或獲取創(chuàng)建當(dāng)前窗口的窗口的引用。

parent獲取對象層次中的父窗口。

returnValue設(shè)置或獲取從模式對話框返回的值。

screenLeft獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的x坐標(biāo)。

screenTop獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的y坐標(biāo)。

self獲取對當(dāng)前窗口或框架的引用。

status設(shè)置或獲取位于窗口底部狀態(tài)欄的信息。

top獲取最頂層的祖先窗口。【相關(guān)知識】事件描述

onblur在對象失去輸入焦點時觸發(fā)。

onerror當(dāng)對象裝載過程中發(fā)生錯誤時觸發(fā)。

onfocus當(dāng)對象獲得焦點時觸發(fā)。

onload在瀏覽器完成對象的裝載后立即觸發(fā)。

onmove當(dāng)對象移動時觸發(fā)。

onmoveend當(dāng)對象停止移動時觸發(fā)。

onmovestart當(dāng)對象開始移動時觸發(fā)。

onresize當(dāng)對象的大小將要改變時觸發(fā)。

onresizeend當(dāng)用戶更改完控件選中區(qū)中對象的尺寸時觸發(fā)。

onresizestart當(dāng)用戶開始更改控件選中區(qū)中對象的尺寸時觸發(fā)。

onscroll當(dāng)用戶滾動對象的滾動條時觸發(fā)。

onunload在對象卸載前立即觸發(fā)?！鞠嚓P(guān)知識】方法描述

alert顯示包含由應(yīng)用程序自定義消息的對話框。

blur使元素失去焦點并觸發(fā)onblur事件。

clearInterval使用setInterval方法取消先前開始的間隔事件。

clearTimeout取消先前用setTimeout方法設(shè)置的超時事件。

close關(guān)閉當(dāng)前瀏覽器窗口或HTML應(yīng)用程序(HTA)。

confirm顯示一個確認(rèn)對話框，其中包含一個可選的消息和確定取消按鈕。

focus使得元素得到焦點并執(zhí)行由onfocus事件指定的代碼。

moveBy將窗口的位置移動指定x和y偏移值。

moveTo將窗口左上角的屏幕位置移動到指定的x和y位置。

navigate在當(dāng)前窗口中裝入指定URL。

open打開新窗口并裝入給定URL的文檔。

prompt顯示一個提示對話框，其中帶有一條消息和一個輸入框。

resizeBy更改窗口的當(dāng)前位置縮放指定的x和y偏移量。

resizeTo將窗口的大小更改為指定的寬度和高度值。

scroll將窗口滾動到自左上角起指定的x和y偏移量。

scrollBy將窗口滾動x和y偏移量。

scrollTo將窗口滾動到指定的x和y偏移量。

setActive設(shè)置對象為當(dāng)前對象而不將對象置為焦點。

setInterval每經(jīng)過指定毫秒值后計算一個表達(dá)式。

setTimeout經(jīng)過指定毫秒值后計算一個表達(dá)式。

showModalDialog創(chuàng)建一個顯示指定HTML文檔的模式對話框。

showModelessDialog創(chuàng)建一個顯示指定HTML文檔的非模式對話框?！鞠嚓P(guān)知識】子對象描述

Document文檔對象代表HTML文檔Event事件對象代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài)。History歷史對象代表當(dāng)前窗口的瀏覽歷史記錄Location地址對象代表當(dāng)前文檔的URLMath數(shù)學(xué)對象為數(shù)學(xué)計算提供常量和計算函數(shù)Navigator瀏覽器對象包含了用戶正在使用的瀏覽器的總體信息Screen屏幕對象包含了用戶正在使用的顯示器的信息【相關(guān)知識】2、打開和關(guān)閉窗口2.1、open()方法window.open(URL,name,features,replace)參數(shù)說明：參數(shù)

描述URL一個可選的字符串，聲明了要在新窗口中顯示的文檔的URL。如果省略了這個參數(shù)，或者它的值是空字符串，那么新窗口就不會顯示任何文檔。name一個可選的字符串，該字符串是一個由逗號分隔的特征列表，其中包括數(shù)字、字母和下劃線，該字符聲明了新窗口的名稱。這個名稱可以用作標(biāo)記<a>和<form>的屬性target的值。如果該參數(shù)指定了一個已經(jīng)存在的窗口，那么open()方法就不再創(chuàng)建一個新窗口，而只是返回對指定窗口的引用。在這種情況下，features將被忽略。該參數(shù)還可以是以下值：_blank：在一個新的空白窗口打開。_parent：在當(dāng)前框架頁的父窗口打開，如果沒有父窗口就在自己窗口打開。

_self：在自己窗口中打開。_top：在頂層窗口打開

features一個可選的字符串，聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征。如果省略該參數(shù)，新窗口將具有所有標(biāo)準(zhǔn)特征。該字符串的格式的詳細(xì)說明見下表所示。replace一個可選的布爾值。規(guī)定了裝載到窗口的URL是在窗口的瀏覽歷史中創(chuàng)建一個新條目，還是替換瀏覽歷史中的當(dāng)前條目。支持下面的值：true：URL替換瀏覽歷史中的當(dāng)前條目。false：URL在瀏覽歷史中創(chuàng)建新的條目。【相關(guān)知識】features參數(shù)說明：特征描述channelmode=yes|no|1|0是否使用劇院模式顯示窗口。默認(rèn)為no。directories=yes|no|1|0是否添加目錄按鈕。默認(rèn)為yes。fullscreen=yes|no|1|0是否使用全屏模式顯示瀏覽器。默認(rèn)是no。處于全屏模式的窗口必須同時處于劇院模式。height=pixels窗口文檔顯示區(qū)的高度。以像素計。left=pixels窗口的x坐標(biāo)。以像素計。location=yes|no|1|0是否顯示地址字段。默認(rèn)是yes。menubar=yes|no|1|0是否顯示菜單欄。默認(rèn)是yes。resizable=yes|no|1|0窗口是否可調(diào)節(jié)尺寸。默認(rèn)是yes。scrollbars=yes|no|1|0是否顯示滾動條。默認(rèn)是yes。status=yes|no|1|0是否添加狀態(tài)欄。默認(rèn)是yes。titlebar=yes|no|1|0是否顯示標(biāo)題欄。默認(rèn)是yes。toolbar=yes|no|1|0是否顯示瀏覽器的工具欄。默認(rèn)是yes。top=pixels窗口的y坐標(biāo)。width=pixels窗口的文檔顯示區(qū)的寬度。以像素計。1、在<body>標(biāo)簽對中創(chuàng)建兩個按鈕，代碼如下：<body><inputtype="button"id="openWinButton"value="打開子窗口"/><inputtype="button"id="closeDialogButton"value="關(guān)閉本窗口"/><inputtype="button"id="closeNoDialogButton"value="立即關(guān)閉本窗口"/></body>【任務(wù)實現(xiàn)一】主窗口頁面文件“主窗口.html”2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ openWinButton.onclick=function() { window.open("子窗口.html","_blank","status=no,menubar=no,left=0,top=0,width=100,height=100"); } closeDialogButton.onclick=function() { window.close(); } closeNoDialogButton.onclick=function() { window.open("","_self"); window.close(); }}</script>【任務(wù)實現(xiàn)一】主窗口頁面文件“主窗口.html”1、在<body>標(biāo)簽對中輸入以下代碼：<body>這是被打開的窗口<br/><inputtype="button"id="closeWinButton"value="關(guān)閉本窗口"/></body>【任務(wù)實現(xiàn)二】子窗口頁面文件“子窗口.html”2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ closeWinButton.onclick=function() { window.close(); }}</script>【任務(wù)實現(xiàn)二】子窗口頁面文件“子窗口.html”在如圖5.8的頁面上有一個城市下拉列表框，當(dāng)選擇一個城市，點擊“提交”按鈕后，頁面提交到如圖5.9所示的頁面，在此頁面上顯示用戶選擇的城市，點擊該頁面頁面上的“返回”按鈕，頁面返回到圖5.8所示的頁面。任務(wù)2用Location地址對象獲取URL參數(shù)圖5.8提交表單圖5.9顯示所選城市1、innerText屬性和innerHTML屬性innerText和innerHTML作用都是設(shè)置HTML標(biāo)簽中要顯示的內(nèi)容，但是innerHTML可以解析HTML標(biāo)記，而innerText只支持普通字符串。innerHTML屬性在IE、FF瀏覽器中都支持，而innerText在FF瀏覽器中不支持。在FF瀏覽器中，與innerText相似的屬性為contentText?！鞠嚓P(guān)知識】2、地址對象Location地址對象Location是Window對象的一個子對象，它包含了當(dāng)前顯示的文檔的URL地址，通過該對象可以訪問當(dāng)前文檔URL地址的各個不同的部分?！鞠嚓P(guān)知識】屬性描述hash 設(shè)置或返回從井號(#)開始的URL（錨）。host設(shè)置或返回主機名和當(dāng)前URL的端口號。hostname設(shè)置或返回當(dāng)前URL的主機名。href設(shè)置或返回完整的URL。pathname設(shè)置或返回當(dāng)前URL的路徑部分。port設(shè)置或返回當(dāng)前URL的端口號。protocol設(shè)置或返回當(dāng)前URL的協(xié)議。search設(shè)置或返回從問號(?)開始的URL（查詢部分）。方法描述reload()重新加載當(dāng)前文檔。replace()用新的文檔替換當(dāng)前文檔。3、編碼和解碼如果瀏覽器的地址欄有中文字符，可能會出現(xiàn)不可預(yù)期的錯誤，所以常常用encodeURI方法把非英文字符轉(zhuǎn)化為英文編碼，而用decodeURI方法把字符還原回來。encodeURI方法不會對下列字符進行編碼：":"、"/"、";"和"?"。這兩個方法常常配對使用。例如：encodeURI("你好!javascript")編碼后的結(jié)果是：%E4%BD%A0%E5%A5%BD!javascript如果將編碼后的結(jié)果用decodeURI解碼，如：decodeURI("%E4%BD%A0%E5%A5%BD!javascript")則又可以還原成“你好!javascript”。【相關(guān)知識】1、建立一個頁面文件“提交表單.html”。2、在<body>標(biāo)簽對中輸入以下代碼，以建立如圖5.8所示的表單界面。<body><formid="form1"method="get"action="顯示所選城市.html">

城市：

<selectname="city"id="city"><optionvalue="廣州">廣州</option><optionvalue="上海">上海</option><optionvalue="北京">北京</option></select><inputtype="submit"name="button"id="button"value="提交"/></form></body>【任務(wù)實現(xiàn)】3、再建立一個頁面文件“顯示所選城市.html”。4、在<body>標(biāo)簽對中輸入以下代碼，以建立如圖5.9所示的界面。<body><divid="cityDiv"></div><inputtype="button"id="backButton"value="返回"></body>【任務(wù)實現(xiàn)】5、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varurl=decodeURI(window.location.search); varstr=url.substr(1); varcityStr=str.split("&")[0]; varcity=cityStr.split("=")[1]; cityDiv.innerText="您選擇的城市是："+city; backButton.onclick=function() { window.location.href="提交表單.html"; }}</script>【任務(wù)實現(xiàn)】在如圖5.10的窗口上有一個文本區(qū)域框，輸入內(nèi)容“我來自中國”后，點擊“編輯>>”按鈕，打開如圖5.11所示窗口，在此頁面上也有一個文本區(qū)域框，框內(nèi)自動顯示傳遞過來的文字“我來自中國”。用戶可以重新編輯內(nèi)容，比如改為“我來自中國。我愛中國！”，點擊“回傳修改并關(guān)閉”按鈕，當(dāng)前窗口立即關(guān)閉，同時在圖5.10窗口的文本區(qū)域框內(nèi)顯示修改后的內(nèi)容“我來自中國。我愛中國！”。任務(wù)3窗口信息交互圖5.10主窗口圖5.11編輯窗口window.opener的用法window.opener實際上就是通過window.open方法打開的窗體的父窗體。比如，在winParent窗體中執(zhí)行window.open("winSub.html")，則在winSub.html中window.opener就代表窗體winParent。其常用方法有：1、用于在子窗體中引用父窗體中的網(wǎng)頁元素，如：window.opener.formname.submit();//提交主窗體中的表單2、用于在子窗體中執(zhí)行父窗體的方法或?qū)傩?，如：window.opener.location.reload();//刷新主窗體【相關(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建一個文本區(qū)域框introMain和一個按鈕，代碼如下：<body><formname="form1"action="">簡介：<textareacols="25"rows="5"id="introMain"></textarea><inputtype="button"value="編輯>>"id="openWinButton"/></form></body>【任務(wù)實現(xiàn)一】建立主窗口頁面文件“主窗口.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.openWinButton.onclick=function() { window.open(“編輯窗

口.html","_blank","width=250,height=150"); }}</script>【任務(wù)實現(xiàn)一】建立主窗口頁面文件“主窗口.html”。1、在<body>標(biāo)簽對中創(chuàng)建一個文本區(qū)域框introSub和一個按鈕，代碼如下：<body>編輯簡介：<textareacols="25"rows="5"id="introSub"></textarea><inputtype="button"value="回傳修改并關(guān)閉"id="closeSelfButton"/></body>【任務(wù)實現(xiàn)二】建立編輯窗口頁面文件“編輯窗口.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ introSub.value=roMain.value; closeSelfButton.onclick=function() { roMain.value=introSub.value; window.close(); }}</script>【任務(wù)實現(xiàn)二】建立編輯窗口頁面文件“編輯窗口.html”。在如圖5.12的窗口上有一個文本框，輸入內(nèi)容后，點擊“彈出模態(tài)窗口并傳遞消息”按鈕，彈出如圖5.13所示網(wǎng)頁對話框窗口，在此對話框頁面上也有一個文本框，框內(nèi)自動顯示傳遞過來的文字。用戶可以重新編輯內(nèi)容，點擊“回傳修改并關(guān)閉”按鈕，對話框窗口立即關(guān)閉，同時在圖5.12窗口的文本框內(nèi)顯示修改后的內(nèi)容。任務(wù)4與模態(tài)窗口進行信息交互

圖5.12主窗口

圖5.13模態(tài)窗口1、模態(tài)窗口模態(tài)窗口也叫模態(tài)對話框或者模式對話框。當(dāng)模態(tài)窗口彈出時，用戶不能操作瀏覽器中的其他窗口。語法格式：vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])【相關(guān)知識】參數(shù)

描述sURL必選參數(shù)，類型：字符串。用來指定對話框要顯示的文檔的URL。vArguments可選參數(shù)，類型：變體。用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限，包括數(shù)組等。對話框通過window.dialogArguments來取得傳遞進來的參數(shù)。features一個可選的字符串，聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征。如果省略該參數(shù)，新窗口將具有所有標(biāo)準(zhǔn)特征。該字符串的格式的詳細(xì)說明見任務(wù)一中features參數(shù)說明表中所示。sFeatures可選參數(shù)，類型：字符串。用來描述對話框的外觀等信息，可以使用下表列出的特征的一個或幾個，用分號“;”隔開。

sFeatures（窗口特征）參數(shù)說明：【相關(guān)知識】特征描述dialogHeight對話框高度，不小于100px。dialogWidth對話框?qū)挾?。dialogLeft離屏幕左邊緣的距離。dialogTop離屏幕上邊緣的距離。center{yes|no|1|0}是否居中，默認(rèn)yes，但仍可以指定高度和寬度。help{yes|no|1|0}是否顯示幫助按鈕，默認(rèn)yes。resizable{yes|no|1|0}[IE5+]是否可被改變大小。默認(rèn)no。status{yes|no|1|0}[IE5+]是否顯示狀態(tài)欄。默認(rèn)為no。scroll{yes|no|1|0|on|off}是否顯示滾動條。默認(rèn)為yes。2、模態(tài)窗口傳遞參數(shù)在使用window.showModalDialog方法打開一個模態(tài)窗口時，可以用vArguments參數(shù)來向模態(tài)窗口傳遞值，類型不限制，對于字符串類型，最大為4096個字符。模態(tài)窗口可以通過window.dialogArguments屬性來接收傳遞過來的值，還可以通過window.returnValue屬性向打開模態(tài)窗口的窗口返回值?！鞠嚓P(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建一個文本框mianMsgText和一個按鈕，代碼如下：<body><inputtype="text"id="mainMsgText"/><inputtype="button"id="openDiaWinBtn"value="彈出模態(tài)窗口并傳遞消息"/></body>【任務(wù)實現(xiàn)一】主窗口頁面文件“主窗口.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ openDiaWinBtn.onclick=function() { varmsg=mainMsgText.value; varreturnValue=window.showModalDialog("模態(tài)窗口.html",msg,"dialogHeight:50px;dialogWidth:300px;dialogTop:0px;dialogLeft:0px"); mainMsgText.value=returnValue; }}</script>【任務(wù)實現(xiàn)一】主窗口頁面文件“主窗口.html”。1、在<body>標(biāo)簽對中創(chuàng)建一個文本框diaMsgText和一個按鈕，代碼如下：<body>傳遞來的消息是：<inputtype="text"id="diaMsgText"/><inputtype="button"id="closeWinButton"value="回傳修改并關(guān)閉"/></body>【任務(wù)實現(xiàn)二】將在模態(tài)窗口中顯示的頁面文件“模態(tài)窗口.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ diaMsgText.value=window.dialogArguments; closeWinButton.onclick=function() { window.returnValue=diaMsgText.value; window.close(); }}</script>【任務(wù)實現(xiàn)二】將在模態(tài)窗口中顯示的頁面文件“模態(tài)窗口.html”。任務(wù)5超時與時間間隔在如圖5.14的窗口上有一個系統(tǒng)時鐘在實時更新計時。點擊“暫?！卑粹o，時鐘停止更新；點擊“開始”按鈕，時鐘又開始實時更新計時。

圖5.14超時與時間間隔1、超時事件setTimeoutsetTimeout是window對象的一個方法，功能是經(jīng)過一定的時間（毫秒）后執(zhí)行一段代碼或者表達(dá)式。注意，它只執(zhí)行一次。語法格式為：variTimerID=window.setTimeout(vCode,iMilliSeconds)【相關(guān)知識】參數(shù)

描述iTimerID存儲setTimeout方法返回的值，如果需要取消這個超時事件，則可以用clearTimeout(iTimerID)清除。vCode要執(zhí)行的代碼?？梢允荍avaScript語句,也可以是一個要調(diào)用的函數(shù)名。注意，函數(shù)名后面不要一對“()”,也不要用雙引號將函數(shù)名括起來。如：setTimeout(myFunction,1000);iMilliSeconds執(zhí)行代碼前的延遲時間。單位是毫秒。2、時間間隔事件setIntervalsetInterval是window對象的一個方法，功能是每經(jīng)過一定的時間（毫秒）就執(zhí)行一段代碼或者表達(dá)式。注意，與setTimeout方法不同的是，它周期性不斷的執(zhí)行，直到強制停止為止。語法格式為：variTimerID=window.setInterval(vCode,iMilliSeconds)【相關(guān)知識】參數(shù)

描述iTimerID存儲setInterval方法返回的值，如果需要取消這個超時事件，則可以用clearInterval(iTimerID)清除。vCode要執(zhí)行的代碼?？梢允荍avaScript語句,也可以是一個要調(diào)用的函數(shù)名。注意，函數(shù)名后面如果保留一對“()”,那么函數(shù)名和一對小括號都要用雙引號括起來；如果函數(shù)名后面不保留一對“()”，那么函數(shù)名也不要用雙引號括起來。如：setInterval("myFunction()",1000);或者setInterval(myFunction,1000);iMilliSeconds執(zhí)行代碼前的延遲時間。單位是毫秒。1、在<body>標(biāo)簽對中創(chuàng)建一個div和兩個按鈕，代碼如下：<body><divid="timeDiv"></div><inputtype="button"id="stopTimeButton"value="暫停"/><inputtype="button"id="startTimeButton"value="開始"/></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ vartimeoutID; showTime(); functionshowTime() { vartime=newDate(); varh=time.getHours(); varm=time.getMinutes(); vars=time.getSeconds(); timeDiv.innerHTML=h+":"+m+":"+s; timeoutID=window.setTimeout(showTime,1000); } stopTimeButton.onclick=function() { window.clearTimeout(timeoutID); } startTimeButton.onclick=function() { window.clearTimeout(timeoutID); showTime(); }}</script>【任務(wù)實現(xiàn)】任務(wù)6“項目五”的實現(xiàn)1、屏幕對象Screen屏幕對象Screen是Window對象的子對象，它包含了用戶正在使用的顯示器屏幕的信息，例如屏幕的分辨率、顏色數(shù)等。它沒有事件和方法?！鞠嚓P(guān)知識】屬性描述height 獲取屏幕的垂直分辨率。width獲取屏幕的水平分辨率。colorDepth獲取屏幕的顏色像素位數(shù)。availHeight獲取系統(tǒng)屏幕的工作區(qū)域高度，對于Windows操作系統(tǒng)來說，排除任務(wù)欄高度。availWidth獲取系統(tǒng)屏幕的工作區(qū)域?qū)挾?，對于Windows操作系統(tǒng)來說，排除任務(wù)欄寬度。2、歷史對象History歷史對象History是Window對象的子對象，它存儲了瀏覽器窗口最近所瀏覽過的歷史網(wǎng)址。通過該方法，可以完成類似瀏覽器窗口的前進、后退等按鈕的功能。為安全起見，History對象并不給出瀏覽器歷史的實際URL地址。History對象只有一個屬性length，作用是獲取歷史列表中的網(wǎng)頁的數(shù)目。History對象的方法有三個，主要用于導(dǎo)航歷史記錄，【相關(guān)知識】方法描述back() 從當(dāng)前頁面后退到上一個訪問過的URL。forward()從當(dāng)前頁面前進到下一個訪問過的URL。go()從當(dāng)前頁面直接跳轉(zhuǎn)到歷史記錄中的任意一個URL。一般有一個參數(shù)，該參數(shù)是要訪問的URL在歷史記錄中的相對與當(dāng)前頁面的位置。取值為：-1：代表前一個（與forward方法類似）0：代表當(dāng)前1：代表后一個（與back方法類似）n(n為整數(shù)):相對位置為n的URL1、在本項目中，需要建立四張頁面，分別為：首頁（index.html）、注冊頁（reg.html）、注冊須知頁（notice.html）和編輯簡介頁（edit.html）。2、首頁（index.html）窗口狀態(tài)欄上循環(huán)滾動的字幕可以用window對象的setTimeout方法或者setInterval方法實現(xiàn)。3、注冊須知頁（notice.html）在對話框中打開，可以用window對象的showModalDialog方法；編輯簡介頁（edit.html）在新窗口中打開，可以用window對象的open方法。【任務(wù)分析】1、在<body>標(biāo)簽對中建立一個按鈕，代碼如下：<body>這是首頁<inputtype="button"value="注冊"id="goRegButton"/></body>【任務(wù)實現(xiàn)一】首頁文件“index.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ setInterval(scrollChar,100); goRegButton.onclick=function() { window.location.href="reg.html"; }}varstr="歡迎光臨本站！";functionscrollChar(){ first=str.charAt(0); last=str.substring(1,str.length); str=last+first; window.status=str;}</script>【任務(wù)實現(xiàn)一】首頁文件“index.html”。1、在<body>標(biāo)簽對中創(chuàng)建如圖5.2所示的界面，代碼如下：<body>【用戶注冊】<inputtype="button"value="注冊須知"id="noticeButton"/><br/><formname="form1"method="post"action="">

用戶名：<inputtype="text"name="username"/><br/>

密碼：<inputtype="text"name="psw"/><br/>

簡介：

<textareacols="25"rows="5"id="introduce"></textarea><inputtype="button"value="編輯>>"id="editButton"/><br/><inputtype="submit"value="提交"/></form><inputtype="button"value="首頁"id="goBackButton"/><inputtype="button"value="關(guān)閉"id="closeButton"/></body>【任務(wù)實現(xiàn)二】注冊頁面文件“reg.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ window.resizeTo(280,400); window.moveTo((screen.width-280)/2,(screen.height-400)/2); noticeButton.onclick=function() { window.showModalDialog("notice.html","","dialogHeight:200px;dialogWidth:200px;"); } form1.editButton.onclick=function() { window.open("edit.html","_blank","status=no,left=0,top=0,width="+screen.width/3+",height="+screen.height/3); } closeButton.onclick=function() { window.open("","_self"); window.close(); } goBackButton.onclick=function() { history.back(); }}</script>【任務(wù)實現(xiàn)二】注冊頁面文件“reg.html”。1、在<body>標(biāo)簽對中創(chuàng)建如圖5.3所示的界面，代碼如下：<body>這是注冊須知的內(nèi)容......<ahref="javascript:window.close();">關(guān)閉</a></body>【任務(wù)實現(xiàn)三】注冊須知頁面文件“notice.html”。1、在<body>標(biāo)簽對中創(chuàng)建如圖5.4所示的界面，代碼如下：<body>簡介：<textareaname="introduce"cols="30"rows="10"id="introduce"></textarea><inputtype="button"value="確定修改關(guān)閉本窗口"id="closeButton"/></body>【任務(wù)實現(xiàn)四】編輯簡介頁面文件“edit.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ introduce.value=roduce.value; closeButton.onclick=function() { if(window.opener&&!window.opener.closed) { roduce.value=introduce.value; window.close(); } else { alert("父窗口不存在或者已關(guān)閉"); } }}</script>【任務(wù)實現(xiàn)四】編輯簡介頁面文件“edit.html”。項目六多功能相冊——文檔對象設(shè)計一個多功能相冊，具體需求如下：①如圖6.1所示，是相冊用戶登錄的頁面。用戶輸入用戶名、密碼正確才能進入如圖6.2所示的相冊頁面。如果選擇了“記住密碼”復(fù)選框，則重新打開此頁面時，用戶名、密碼已經(jīng)被填入文本框中，用戶直接點擊“進入看相冊”按鈕就可以查看相冊。項目情境

圖6.1登錄

圖6.2相冊②如圖6.2所示，是進入的相冊頁面。相冊中的圖片在一行顯示，當(dāng)鼠標(biāo)放置到小圖上時，在下方顯示對應(yīng)的大圖。當(dāng)點擊小圖時，打開如圖6.3所示的對話框。在該對話框中，顯示該圖的詳細(xì)信息。項目情境

圖6.3詳細(xì)介紹③在圖6.3所示的對話框中，不僅顯示圖片的詳細(xì)介紹，還可以通過點擊圖片介紹下方的導(dǎo)航鏈接瀏覽其他圖片及其詳細(xì)介紹。項目情境掌握文檔對象Document的常用屬性和方法。掌握Cookie對象的使用方法。掌握圖像對象的使用方法。掌握超級鏈接對象的使用方法。掌握利用JavaScript設(shè)置樣式的方法。學(xué)習(xí)目標(biāo)任務(wù)1用JAVASCRIPT設(shè)置屬性和樣式在如圖6.4的窗口上顯示4張大小比例相同的圖片，每張圖片加紅色實線邊框，且在一行顯示。要求必須用JavaScript實現(xiàn)屬性和樣式的設(shè)置。圖6.4設(shè)置屬性和樣式1、文檔對象DocumentWindow對象的一個子對象，代表整個HTML文檔。通過Document對象可以操作HTML文檔中的內(nèi)容及其他對象。Document對象有許多屬性和方法，還有子對象?！鞠嚓P(guān)知識】屬性描述

all返回對象所包含的元素集合的引用。（IE支持）alinkColor設(shè)置或獲取元素中所有激活鏈接的顏色。

bgColor不贊成。設(shè)置或獲取表明對象后面的背景顏色的值。

cookie設(shè)置或獲取cookie的字符串值。

documentElement獲取對文檔根結(jié)點的引用。

domain設(shè)置或獲取文檔的安全域名。

expand設(shè)置或獲取表明是否可對象內(nèi)創(chuàng)建任意變量的值。

fgColor設(shè)置或獲取文檔的前景(文本)顏色。

forms返回一個數(shù)組，數(shù)組中的元素為Form表單對象。images返回一個數(shù)組，數(shù)組中的元素為Image圖像對象。linkColor設(shè)置或獲取對象文檔鏈接的顏色。

links返回一個數(shù)組，數(shù)組中的元素為Link超級鏈接對象。referrer獲取將用戶引入當(dāng)前頁面的位置URL。

URL設(shè)置或獲取當(dāng)前文檔的URL。

vlinkColor設(shè)置或獲取用戶已訪問過的鏈接顏色。

XMLDocument獲取對由對象引出的的XML文檔對象模型(DOM)的引用。

XSLDocument獲取對XSL文檔的頂層結(jié)點的引用?！鞠嚓P(guān)知識】方法描述close關(guān)閉輸出流并強制將數(shù)據(jù)發(fā)送到顯示。open此方法以兩種方式工作。該方法打開一個文檔用于收集write和writeln方法的輸出。在這種情況下，只使用前兩個參數(shù)url和name。若指定了附加參數(shù)，此方法將打開一個窗口，這與window對象的window.open方法相同。write在指定窗口的文檔中寫入一個或多個HTML表達(dá)式。

writeln在指定窗口的文檔中寫入一個或多個HTML表達(dá)式，后面追加一個換行符。2、圖像對象文檔對象Document的images屬性返回的是一個數(shù)組，數(shù)組中的每一個元素都是一個圖像對象，即Image對象。JavaScript加載HTML文檔時，會自動創(chuàng)建一個images數(shù)組，數(shù)組中的元素個數(shù)由HTML文檔中的<img>標(biāo)簽決定，每一個<img>標(biāo)簽就是images數(shù)組的一個元素，也就是一個圖像對象。引用images數(shù)組中的元素方法有三種，分別是：document.images[i]document.images[圖片的名字]document.圖片的名字【相關(guān)知識】3、在JavaScript中設(shè)置對象的屬性或樣式1）設(shè)置屬性

通常，在HTML文檔中，可以直接在該標(biāo)簽內(nèi)部設(shè)置一個標(biāo)簽的屬性，例如： <imgsrc="1.jpg"/>

其中，src就是<img>標(biāo)簽的一個屬性，但是，有時為了動態(tài)的改變某個標(biāo)簽的屬性，就可以借助JavaScript，在程序內(nèi)部設(shè)置，方法是：

標(biāo)簽對象.屬性=屬性的值;【相關(guān)知識】2）設(shè)置樣式

在HTML文檔中，設(shè)置樣式通常用CSS樣式表，但是有時候也需要在JavaScript中進行動態(tài)的設(shè)置，方法是：標(biāo)簽對象.style.樣式=樣式的值;

其中，樣式的書寫原則上與CSS樣式表的書寫方式一致。但是，如果樣式中有短橫線”-”，則在JavaScript中省略此短橫線，而采用“駝峰”法書寫原則，原因是在JavaScript中短橫線會被當(dāng)作減號來處理從而導(dǎo)致錯誤，例如，CSS樣式表中設(shè)置字體大小用font-size,在JavaScipt中則寫成fontSize?！鞠嚓P(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建一個項目列表ul，每個列表項li中放置一個空的img圖片標(biāo)簽，代碼如下：<body><ul><li><img/></li><li><img/></li><li><img/></li><li><img/></li></ul></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varimgCount=document.images.length; for(i=0;i<imgCount;i++) { document.images[i].src="images/"+(i+1)+".jpg"; document.images[i].style.height=75+"px"; document.images[i].style.width=105+"px"; document.images[i].style.border="1pxredsolid"; } document.all.tags("ul")[0].style.listStyle="none";//IE支持all varlists=document.all.tags("li"); for(i=0;i<lists.length;i++) { lists[i].style.display="inline"; }}</script>【任務(wù)實現(xiàn)】在如圖6.5所示的頁面中，有兩種樣式可供選擇，每種樣式下圖片的來源和外邊框都不同。當(dāng)用戶選擇了某一種樣式，例如選擇了“樣式一”，關(guān)閉瀏覽器后，重新打開頁面，則該頁面圖片默認(rèn)使用“樣式一”。任務(wù)2用COOKIE記住樣式圖6.5用COOKIE記住樣式1、cookie的概念cookie是以文件的形式存儲在客戶端磁盤上的一些信息，這些信息用來保存狀態(tài)或者用戶身份識別。為了安全，瀏覽器只會讓創(chuàng)建cookie的網(wǎng)站訪問該cookie。用戶可以通過設(shè)置瀏覽器配置從而阻止cookie的使用?！鞠嚓P(guān)知識】2、創(chuàng)建與讀取cookie在JavaScript中，cookie可以通過cookie名和值的方式來創(chuàng)建。用Document對象的cookie屬性就可以用來設(shè)置和讀取cookie。創(chuàng)建cookie的語法如下：document.cookie="cookie的名稱=cookie的值“一個網(wǎng)站可以創(chuàng)建多個cookie，不同的cookie可以擁有不同的值?！鞠嚓P(guān)知識】3、獲取cookie的值用Document對象的cookie屬性就可以獲得一個網(wǎng)站下所有的cookie，實際上是獲取了cookie文件的內(nèi)容。【相關(guān)知識】4、cookie的有效期cookie被創(chuàng)建后，一般來說，只要瀏覽器不關(guān)閉，就一直有效，一旦瀏覽器被關(guān)閉了，cookie就自動失效了。如果希望在關(guān)閉瀏覽器后還能繼續(xù)使用，就必須為cookie設(shè)置一個有效期，也就是生存期。在有效期內(nèi)，cookie都可以使用，一旦超過了，該cookie就自動失效，cookie文件就會被自動刪除?？梢栽谠O(shè)置cookie值的同時定義cookie的有效期，使用方式如下：document.cookie="cookie的名稱=cookie的值";expires=日期【相關(guān)知識】注意，這里的日期必須是GMT格式或者UTC格式的日期型字符串。GMT(GreenwichMeanTime)是格林尼治時;UTC(UniversalTimeCoordinated)是協(xié)調(diào)世界時。其值的格式形如：Tue,20May201410:46:08GMT由于這種格式使用不方便，所以，可以使用方法toGMTString()或者toUTCString()將日期進行轉(zhuǎn)換。一般來說，cookie的有效期都設(shè)置為從當(dāng)前時間開始向后延續(xù)的毫秒數(shù)，再將這個毫秒數(shù)轉(zhuǎn)換為GMT或者UTC日期格式?！鞠嚓P(guān)知識】5、cookie的可訪問路徑cookie被某個頁面創(chuàng)建后，并不是只有這個頁面才能訪問，與該頁面處在同一個目錄或者其子目錄下的頁面都可以訪問該cookie，除此之外的其他目錄下的頁面就無法訪問了。一個能使得網(wǎng)站中所有的頁面都能訪問該cookie的方法是在創(chuàng)建cookie的同時，設(shè)置其path參數(shù)值為根目錄“/”。【相關(guān)知識】1、在<body>標(biāo)簽對中創(chuàng)建兩個單選按鈕和一個<img>圖像標(biāo)簽，代碼如下：<body><inputtype="radio"name="radio"id="style1"/>樣式一<inputtype="radio"name="radio"id="style2"/>樣式二<br/><imgid="sampleImage"/></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ varexpires=newDate(); expires.setTime(expires.getTime()+24*3600000); style1.onclick=function() { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; document.cookie="style=1;expires="+expires.toUTCString()+";path=/"; } style2.onclick=function() { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid";document.cookie="style=2;expires="+expires.toUTCString()+";path=/"; } varcookie=document.cookie.split("=")[1];

if(cookie=="1") { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; style1.checked=true; } else { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid"; style2.checked=true; }}</script>【任務(wù)實現(xiàn)】

if(cookie=="1") { sampleImage.src="images/1.jpg"; sampleImage.style.border="4pxredsolid"; style1.checked=true; } else { sampleImage.src="images/2.jpg"; sampleImage.style.border="4pxbluesolid"; style2.checked=true; }}</script>【任務(wù)實現(xiàn)】在如圖6.6所示的頁面中，有一些超級鏈接，點擊“顯示鏈接地址”按鈕，顯示頁面上已有的所有超級鏈接的內(nèi)容和鏈接到的頁面地址。任務(wù)3找出所有超級鏈接地址圖6.6找出所有超級鏈接地址1、鏈接對象Document對象的links屬性可以返回一個數(shù)組，數(shù)組中的每個元素就是一個鏈接（Link）對象?？梢允褂靡韵碌姆椒▉硪胠inks數(shù)組中的元素：document.links[i]【相關(guān)知識】2、鏈接對象的屬性【相關(guān)知識】屬性描述hash 設(shè)置或返回從井號(#)開始的URL（錨）。Host設(shè)置或返回主機名和當(dāng)前URL的端口號。Hostname設(shè)置或返回當(dāng)前URL的主機名。Href設(shè)置或返回完整的URL。Pathname設(shè)置或返回當(dāng)前URL的路徑部分。Port設(shè)置或返回當(dāng)前URL的端口號。Protocol設(shè)置或返回當(dāng)前URL的協(xié)議。Search設(shè)置或返回從問號(?)開始的URL（查詢部分）。target設(shè)置或返回超級鏈接打開的目標(biāo)窗口。innerHTML返回Link對象中的超級鏈接文字。也可以用text（Netscape瀏覽器支持）或者innerText（IE瀏覽器支持）。1、在<body>標(biāo)簽對中創(chuàng)建一些超級鏈接、一個按鈕和一個用于顯示結(jié)果的div，代碼如下：<body><ahref="">百度</a><ahref="">Google</a><ahref="">雅虎</a><ahref="">淘寶</a><inputtype="button"value="顯示鏈接地址"id="showBtn"/><divid="allLinksDiv"></div></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ showBtn.onclick=function() { allLinksDiv.innerHTML=""; for(i=0;i<document.links.length;i++) { varthisLink=document.links[i]; allLinksDiv.innerHTML+=thisLink.innerHTML+"："+thisLink.href+"<br/>"; } }}</script>【任務(wù)實現(xiàn)】任務(wù)4“項目六”的實現(xiàn)cookie值的編碼和解碼

一般情況下，cookie中是不允許出現(xiàn)空格、分號、逗號等特殊符號的，如果需要將這些符號寫入cookie，就必須使用escape()函數(shù)對cookie進行編碼，在讀取cookie時再用unescape()函數(shù)對cookie進行解碼以便還原cookie的值。 escape()函數(shù)返回一個包含charstring內(nèi)容的字符串值（Unicode格式）。所有空格、標(biāo)點、重音符號以及其他非ASCII字符都用“%xx”編碼代替，其中“xx”等于表示該字符的十六進制數(shù)。例如，空格返回的是“%20”。字符值大于255的以“%uxxxx”格式存儲。注意，escape()函數(shù)不能夠用來對統(tǒng)一資源標(biāo)示碼(URI)進行編碼，編碼應(yīng)使用encodeURI函數(shù)。 unescape()函數(shù)返回一個包含charstring內(nèi)容的字符串值。所有以“%xx”十六進制形式編碼的字符都用ASCII字符集中等價的字符代替。以“%uxxxx”格式（Unicode字符）編碼的字符用十六進制編碼“xxxx”的Unicode字符代替。注意，unescape()函數(shù)不能用于解碼統(tǒng)一資源標(biāo)識碼(URI)，解該碼可使用decodeURI函數(shù)?！鞠嚓P(guān)知識】1、在本項目中，需要建立三張頁面，分別為：登錄（login.html）、相冊（photo.html）、相片詳細(xì)（detail.html）。2、在登錄（login.html）頁面中要實現(xiàn)記住密碼的功能可以使用cookie保存用戶輸入的用戶名和密碼。3、在相冊（photo.html）頁面中要導(dǎo)入多張相片，并且設(shè)置顯示格式，點擊圖片觸發(fā)相關(guān)事件，可以考慮使用圖片對象的屬性、樣式和事件。點擊某一張圖片打開對話框顯示圖片詳細(xì)介紹可以使用Window對象打開模態(tài)對話框技術(shù)。4、在相片詳細(xì)（detail.html）頁面中，要實現(xiàn)導(dǎo)航功能，可以考慮使用鏈接對象的屬性和事件來實現(xiàn)。5、考慮到代碼的模塊化和可重用性，本項目中將設(shè)置和讀取cookie的功能獨立為一個函數(shù)，并放置在一個單獨的文件“func.js”中?！救蝿?wù)分析】在文件中創(chuàng)建一個設(shè)置cookie的函數(shù)setCookie和一個讀取cookie的函數(shù)getCookie。代碼如下：functionsetCookie(cookieName,value,hours,path){ varexpires=newDate(); expires.setTime(expires.getTime()+hours*3600000); document.cookie=cookieName+"="+escape(value)+";expires="+expires.toUTCString()+";path="+path;}functiongetCookie(cookieName){ varallCookies=document.cookie; varstartPos=allCookies.indexOf(cookieName); varcookieValStartPos=startPos+cookieName.length+1; varcookieValEndPos=allCookies.indexOf(";",startPos); if(cookieValEndPos==-1) { cookieValEndPos=allCookies.length+1; } varcookieValue=allCookies.substring(cookieValStartPos,cookieValEndPos); returnunescape(cookieValue);}【任務(wù)實現(xiàn)一】設(shè)置和讀取cookie的代碼文件“func.js”。1、在<body>標(biāo)簽對中建立一個表單，表單元素為兩個文本框、一個復(fù)選框和一個按鈕。代碼如下：<body><formid="form1"name="form1"method="post"action="">用戶名：<inputtype="text"id="nameText"/><br/>密碼：<inputtype="text"id="pswText"/><br/><inputtype="checkbox"id="saveCookie"/>記住密碼<br/><inputtype="button"id="submitBtn"value="登錄看相冊"/></form></body>【任務(wù)實現(xiàn)二】登錄頁面文件“l(fā)ogin.html”。2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript"src="func.js"></script><scripttype="text/javascript">window.onload=func