BOM—瀏覽器物件模型（Browser Object Model）
1,javascript 組成部分：
1.ECMAscript（核心標準）： 定義了基本的語法，比如：if for 陣列 字串 ...
2.BOM ： 瀏覽器物件模型（Browser Object Model）
2,BOM 的組成部分：
1.window物件 每一個子視窗對應的又是一個window物件
2. screen物件
3.location物件
4.history物件
5.Navigator物件
6.定時器 （兩種）
7.彈框（三種）
8. document (DOM-文件物件模型)
1.1window 物件(表示瀏覽器視窗):
- 所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
- 所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
- 全域性變數是 window 物件的屬性。
- 全域性函式是 window 物件的方法。
- 甚至 HTML DOM 的 document 也是 window 物件的屬性之一
1.2window 尺寸:
檢視window尺寸有三種方式適用於不同的情況:
1) w3c標準(適用於老版本ie之外的瀏覽器)
- window.innerHeight - 瀏覽器視窗的內部高度
- window.innerWidth - 瀏覽器視窗的內部寬度
2) 老版本的IE瀏覽器
標準模式:
document.documentElement.clientHeight)
document.documentElement.clientWidth)
怪異模式（向後相容）中:
document.body.clientHeight
document.body.clientWidth
(如何知道是何種模式?
console.log(document.compatMode)可以檢視文件是以什麼方式進行解析的
CSS1Compat 標準模式
BackCompat 怪異模式
)
function getScreen(){ //獲取螢幕的可視寬高 if (window.innerWidth) { //如果window底下有這個屬性，就用這個， w3c標準 return { width : window.innerWidth, height : window.innerHeight } }else{ //老版本IE if(document.compatMode == "CSS1Compat"){ //標準模式 return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } }else{ //怪異模式 return { width : document.body.clientWidth, height : document.body.clientHeight } } } } console.log(getScreen())
1.3 其他 Window 方法
•window.open() - 開啟新視窗
•window.close() - 關閉當前視窗
•window.moveTo() - 移動當前視窗
•window.resizeTo() - 調整當前視窗的尺寸
2.1 screen 物件(包含有關使用者螢幕的資訊)
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
<script> document.write("可用寬度：" + screen.availWidth); document.write("可用高度：" + screen.availHeight); </script>
3.1 location物件(用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面)
console.log(location.href) //返回（當前頁面的）整個 URL： console.log(location.hash) //hash 雜湊值，也叫錨點，比方說a連結中的 console.log(location.host) // host 設定或返回主機名和當前 URL 的埠號。 console.log(location.hostname) // hostname 設定或返回當前 URL 的主機名。 console.log(location.pathname) // pathname 設定或返回當前 URL 的路徑部分。 console.log(location.port) // port 設定或返回當前 URL 的埠號。 console.log(location.protocol) // protocol 設定或返回當前 URL 的協議。 console.log(location.search) // search 引數（查詢字串） 設定或返回從問號 (?) 開始的 URL（查詢部分）。
// location.href = "http://www.baidu.com" //放到某一個事件中去觸發
4.1 history物件(包含瀏覽器的歷史記錄)
- history.back() - 與在瀏覽器點選後退按鈕相同
- history.forward() - 與在瀏覽器中點選按鈕向前相同
<body> <a href="http://www.baidu.com">去百度</a> <button>後退</button> <button>前進</button> <script> var btn1 = document.getElementsByTagName("button")[0]; var btn2 = document.getElementsByTagName("button")[1]; btn1.onclick = function(){ history.back() } btn2.onclick = function(){ history.forward() } </script> </body>
5.1 Navigator物件(記錄了瀏覽器的一些資訊的物件)
- appCodeName 返回瀏覽器的程式碼名。
- appMinorVersion 返回瀏覽器的次級版本。
- appName 返回瀏覽器的名稱。
- appVersion 返回瀏覽器的平臺和版本資訊。
- browserLanguage 返回當前瀏覽器的語言。
- cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布林值。
- cpuClass 返回瀏覽器系統的 CPU 等級。
- onLine 返回指明系統是否處於離線模式的布林值。
- platform 返回執行瀏覽器的作業系統平臺。
- systemLanguage 返回 OS 使用的預設語言。
- userAgent 返回由客戶機發送伺服器的 user-agent 頭部的值。
- userLanguage 返回 OS 的自然語言設定。
<div id="example"></div> <script> txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script>
6.1 PopupAlert 物件
警告框:
alert("文字")
確認框:
confirm("文字")
提示框:
prompt("文字","預設值")
7.1 Timing 物件
一次性定時器:
setTimeout()未來的某時執行程式碼;
clearTimeout()取消setTimeout();
無限次定時器:
setInterval( );
clearInterval();
8.1 cookie (用來識別使用者)
有關cookie的例子：
名字 cookie:
當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會儲存於 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
密碼 cookie:
當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被儲存於 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。
日期 cookie:
當訪問者首次訪問你的網站時，當前的日期可儲存於 cookie 中。當他們再次訪問網站時，他們會收到類似這樣的一條訊息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。