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

下載本文檔

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

文檔簡介

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

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

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

任務(wù)6

History對象

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

window

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論