網(wǎng)頁設計與制作（活頁式） 課件 情景9-4BOM

網(wǎng)頁設計與制作BOM對象授課教師：喬振華HTMLCSSJavaScriptJavaScript目錄CONTENTS12學習目標知識講解3小結(jié)學習目標01學習目標學習目標01理解BOM對象學習目標02熟悉并會使用BOM中的五大對象02知識點講解

01什么是BOM對象？

03BOM中有哪些對象，他們有什么作用？思考知識點講解

02BOM對像能夠做什么？表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。表單域：相當于一個容器，用來容納所有的表單控件和提示信息。1、什么是BOM瀏覽器對象模型（BrowserObjectModel，簡稱BOM）是JavaScript的組成部分之一，BOM賦予了JavaScript程序與瀏覽器交互的能力，在JavaScript中BOM可以彈出新瀏覽器窗口并移動、關閉和更改瀏覽器窗口大小等。BOM2、BOM五大對象在JavaScript中，有五個BOM對象，分別如下32145window對象；location對象；navigator對象；screen對象；history對象。2.1window對象BOM的核心對象是window。

window對象是JavaScript的最頂層對象，它表示瀏覽器的一個實例。其他的BOM對象都是window對象的屬性。提供了獨立于內(nèi)容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型可以實現(xiàn)與HTML的交互。window對象常用方法如下表方法描述alert()在瀏覽器窗口中彈出一個提示框，提示框中有一個確認按鈕prompt()顯示一個可供用戶輸入的對話框confirm()在瀏覽器中彈出一個對話框，對話框帶有一個確認按鈕和一個取消按鈕open()打開一個新的瀏覽器窗口或查找一個已命名的窗口close()關閉某個瀏覽器窗口2.1window對象alert()的使用方法插入alert的演示視頻prompt()的使用方法插入prompt的演示視頻confirmt()的使用方法confirmt()的使用方法表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。表單域：相當于一個容器，用來容納所有的表單控件和提示信息。2.2location對象location對象中包含了有關當前頁面鏈接（URL）的信息，例如當前頁面的完整URL、端口號等，我們可以通過window對象中的location屬性來獲取location對象。由于window對象是一個全局對象，因此在使用window.location時可以省略window前綴，例如window.location.href可以簡寫為location.href。location對象常用屬性和方法如下屬性/方法描述hostname返回一個URL的主機名，例如。href返回一個完整的URL，例如/javascript/location-object.html。port返回一個URL中的端口號，如果URL中不包含明確的端口號，則返回一個空字符串''。reload()方法用于刷新當前文檔。該方法類似于瀏覽器上的刷新頁面按鈕href屬性的使用方法<script>

document.write(location.href);</script>navigator對象2.3navigator對象navigator對象中存儲了與瀏覽器相關的信息，例如名稱、版本等，可以通過window對象的navigator屬性（即window.navigator）來引用navigator對象，并通過它來獲取瀏覽器的基本信息。同樣，在使用window.navigator時可以省略window前綴，例如window.navigator.appVersion可以簡寫為navigator.appVersion。navigator對象常用屬性navigator對象常用屬性如下表：屬性描述appCodeName返回當前瀏覽器的內(nèi)部名稱（開發(fā)代號）appName返回瀏覽器的官方名稱appVersion返回瀏覽器的平臺和版本信息cookieEnabled返回瀏覽器是否啟用cookie，啟用返回true，禁用返回falseonLine返回瀏覽器是否聯(lián)網(wǎng)，聯(lián)網(wǎng)則返回true，斷網(wǎng)則返回falseplatform返回瀏覽器運行的操作系統(tǒng)平臺userAgent返回瀏覽器的廠商和版本信息，即瀏覽器運行的操作系統(tǒng)、瀏覽器的版本、名稱platform屬性的使用方法<script> document.write(navigator.platform);</script>2.4screen對象screen對象中包含了有關計算機屏幕的信息，例如分辨率、寬度、高度等，可以通過window對象的screen屬性來獲取它。使用window.screen時可以省略window前綴，例如window.screen.width可以簡寫為screen.width。screen對象常用屬性screen對象常用屬性如表：屬性說明availTop返回屏幕上方邊界的第一個像素點（大多數(shù)情況下返回0）availLeft返回屏幕左邊邊界的第一個像素點（大多數(shù)情況下返回0）availHeight返回屏幕的高度（不包括Windows任務欄）availWidth返回屏幕的寬度（不包括Windows任務欄）colorDepth返回屏幕的顏色深度（colordepth），根據(jù)CSSOM（CSS對象模型）視圖，為兼容起見，該值總為24。height返回屏幕的完整高度pixelDepth返回屏幕的位深度/色彩深度（bitdepth），根據(jù)CSSOM（CSS對象模型）視圖，為兼容起見，該值總為24width返回屏幕的完整寬度orientation返回當前屏幕的方向height和width屬性的使用方法<script>document.write("總高度:"+screen.height+"總寬度:"+screen.width);</script>2.5history對象

history對象中包含了用戶在瀏覽器中訪問過的歷史記錄，其中包括通過瀏覽器瀏覽過的頁面，以及當前頁面中通過<iframe>加載的頁面?？梢酝ㄟ^window對象中的history屬性來獲取history對象，例如window.history.go()可以簡寫為history.go()。history對象history對象常用屬性和方法如下表屬性/方法描述length返回瀏覽歷史的數(shù)目，包含當前已經(jīng)加載的頁面。back()參照當前頁面，返回歷史記錄中的上一條記錄（即返回上一頁），您也可以通過點擊瀏覽器工具欄中的←按鈕來實現(xiàn)同樣的效果。forward()參照當前頁面，前往歷史記錄中的下一條記錄（即前進到下一頁），您也可以通過點擊瀏覽器工具欄中的→按鈕來實現(xiàn)同樣的效果。go()參照當前頁面，根據(jù)給定參數(shù)，打開指定的歷史記錄，例如-1表示返回上一頁，1表示返回下一頁。back()方法的使用方法注意：先從第一個頁面的鏈接跳轉(zhuǎn)到第二個頁