JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 5-2使用Windows對(duì)象和document對(duì)象_第1頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 5-2使用Windows對(duì)象和document對(duì)象_第2頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 5-2使用Windows對(duì)象和document對(duì)象_第3頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 5-2使用Windows對(duì)象和document對(duì)象_第4頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 5-2使用Windows對(duì)象和document對(duì)象_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目5.2使用Windows對(duì)象和document對(duì)象主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)1子項(xiàng)目項(xiàng)目5BOM對(duì)象和事件表單常用元素2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)2學(xué)習(xí)任務(wù)

任務(wù)1使用Windows對(duì)象

任務(wù)2使用document對(duì)象

任務(wù)6

History對(duì)象

任務(wù)3使用Location對(duì)象任務(wù)4使用navigator對(duì)象任務(wù)5使用screen對(duì)象項(xiàng)目5BOM對(duì)象和事件項(xiàng)目5BOM對(duì)象和事件任務(wù)1認(rèn)識(shí)window對(duì)象window對(duì)象是瀏覽器窗口對(duì)文檔提供一個(gè)顯示的容器，通過(guò)window對(duì)象可以控制窗口的大小和位置、由窗口彈出的對(duì)話框、打開(kāi)窗口與關(guān)閉窗口，還可以控制窗口上是否顯示地址欄、工具欄、狀態(tài)欄等欄目。對(duì)于窗口中的內(nèi)容，window對(duì)象可以控制是否重載網(wǎng)頁(yè)、返回上一個(gè)文檔或前進(jìn)到下一個(gè)文檔，甚至于還可以停止加載文檔。所有瀏覽器都支持

window

對(duì)象。它表示瀏覽器窗口。項(xiàng)目5BOM對(duì)象和事件屬性說(shuō)明document對(duì)話框中顯示的當(dāng)前文檔location指定當(dāng)前文檔的URLname對(duì)話框的名字status狀態(tài)欄中的當(dāng)前信息top表示最頂層的瀏覽器對(duì)話框parent表示包含當(dāng)前對(duì)話框的父對(duì)話框opener表示打開(kāi)當(dāng)前對(duì)話框的父對(duì)話框self表示當(dāng)前對(duì)話框screen表示用戶屏幕，提供屏幕尺寸、顏色深度等信息navigator表示瀏覽器對(duì)象，用于獲得與瀏覽器相關(guān)的信息1、Window對(duì)象的屬性項(xiàng)目5BOM對(duì)象和事件所有JavaScript全局對(duì)象、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員。全局變量是window對(duì)象的屬性。全局函數(shù)是window對(duì)象的方法。甚至HTMLDOM的document也是window對(duì)象的屬性之一：

window.document.getElementById("header");與此相同：document.getElementById("header");項(xiàng)目5BOM對(duì)象和事件有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）。對(duì)于InternetExplorer、Chrome、Firefox、Opera以及Safari：

window.innerHeight-瀏覽器窗口的內(nèi)部高度window.innerWidth-瀏覽器窗口的內(nèi)部寬度對(duì)于InternetExplorer8、7、6、5：document.documentElement.clientHeightdocument.documentElement.clientWidth或者document.body.clientHeightdocument.body.clientWidth項(xiàng)目5BOM對(duì)象和事件實(shí)用的JavaScript方案（涵蓋所有瀏覽器）：范例5-1顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動(dòng)條）：<html><head><title>下拉框</title><scriptlanguage="javascript">Varw=window.innerWidth//document.documentElement.clientWidth//document.body.clientWidth;varh=window.innerHeight//document.documentElement.clientHeight//document.body.clientHeight;alert(w+""+h);</script></head><body></body></html>項(xiàng)目5BOM對(duì)象和事件2、Window對(duì)象的方法alert(“m提示信息")顯示包含消息的對(duì)話框。confirm（“提示信息”）顯示一個(gè)確認(rèn)對(duì)話框，包含一個(gè)確定取消按鈕Prompt（”提示信息“）彈出提示信息框open("url","name")打開(kāi)具有指定名稱的新窗口，并加載給定URL所指定的文檔；如果沒(méi)有提供URL，則打開(kāi)一個(gè)空白文檔close()關(guān)閉當(dāng)前窗口setTimeout（”函數(shù)”,毫秒數(shù)）設(shè)置定時(shí)器：經(jīng)過(guò)指定毫秒值后執(zhí)行某個(gè)函數(shù)clearTimeout(定時(shí)器對(duì)象)項(xiàng)目5BOM對(duì)象和事件2.1對(duì)話框的類型Windows對(duì)象提供了3種對(duì)話框，包括警告對(duì)話框、詢問(wèn)對(duì)話框和輸入對(duì)話框。練習(xí)5-2使用Windows對(duì)象alert()、confirm()、prompt()實(shí)現(xiàn)淘寶網(wǎng)一口價(jià)拍賣效果

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><scripttype="text/javascript">functionjingpai(price){if(price<10000){document.write("拍賣價(jià)格"+price+"<br/>"+"價(jià)格太低，競(jìng)拍不成功");}else{ document.write("拍賣價(jià)格"+price+"<br/>"+"競(jìng)拍成功");}}</script>項(xiàng)目5BOM對(duì)象和事件</head><body><p>蘋果手機(jī)8plus</p><p><inputname="jingpai"type="button"value="開(kāi)始競(jìng)拍"onclick="jingpai(prompt('競(jìng)拍，請(qǐng)出一口價(jià)',1000))"/></p></body></html>項(xiàng)目5BOM對(duì)象和事件2.1范例5-2使用Open方法和close是指通過(guò)js腳本控制打開(kāi)和關(guān)閉一個(gè)新的窗口：

<html><head><scripttype="text/javascript">functionopenwindow(){window.open("http://www.baidu.htm");}functionclosewindow(){window.close();}</script>項(xiàng)目5BOM對(duì)象和事件</head><body><from><inputtype=buttonvalue="打開(kāi)窗口"onClick="openwindow()"><inputtype=buttonvalue="關(guān)閉窗口"onClick="closewindow()"></from><body>項(xiàng)目5BOM對(duì)象和事件任務(wù)2使用document對(duì)象通過(guò)HTMLDOM，可訪問(wèn)JavaScriptHTML文檔的所有元素。HTMLDOM（文檔對(duì)象模型）當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（DocumentObjectModel）。HTMLDOM模型被構(gòu)造為對(duì)象的樹(shù)。項(xiàng)目5BOM對(duì)象和事件HTMLDOM樹(shù)項(xiàng)目5BOM對(duì)象和事件1、document的屬性名稱說(shuō)明alinkColor設(shè)置或檢索文檔中所有活動(dòng)鏈接的顏色bgColor設(shè)置或檢索Document對(duì)象的背景色body指定文檔正文的開(kāi)始和結(jié)束linkColor設(shè)置或檢索文檔鏈接的顏色location包含關(guān)于當(dāng)前URL的信息title包含文檔的標(biāo)題url設(shè)置或檢索當(dāng)前文檔的URLvlinkColor設(shè)置或檢索用戶訪問(wèn)過(guò)的鏈接的顏色使用document屬性設(shè)置body背景顏色的方法document.body.style.backgroundColor=red;項(xiàng)目5BOM對(duì)象和事件2、document的方法名稱說(shuō)明clear()清除當(dāng)前文檔close()關(guān)閉輸出流并強(qiáng)制顯示發(fā)送的數(shù)據(jù)write("text")將文本寫入文檔項(xiàng)目5BOM對(duì)象和事件范例5-4使用Windows對(duì)象document對(duì)象write()方法輸出長(zhǎng)方形的面積和周長(zhǎng)：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><scripttype="text/javascript">varwidth=100;varheight=20;varmianji=width*height;varzhouchang=2*(width+height)document.write("長(zhǎng)方形的面積為"+mianji+"<br\>");document.write("長(zhǎng)方形的周長(zhǎng)為"+zhouchang);</script></head><body></body></html>運(yùn)行結(jié)果如下所示：項(xiàng)目5BOM對(duì)象和事件通過(guò)后面DOM章節(jié)的學(xué)習(xí)，可了解document對(duì)象是可編程的對(duì)象模型，JavaScript獲得了足夠的能

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論