瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器“對(duì)話”稠鼻。
瀏覽器對(duì)象模型（Browser Object Model）尚無(wú)正式標(biāo)準(zhǔn)刃滓。
由于現(xiàn)代瀏覽器已經(jīng)（幾乎）實(shí)現(xiàn)了 JavaScript 交互性方面的相同方法和屬性，因此常被認(rèn)為是 BOM 的方法和屬性欠痴。
Window 對(duì)象
- 所有瀏覽器都支持
window對(duì)象迄靠。它表示瀏覽器窗口。
所有 JavaScript 全局對(duì)象喇辽、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員掌挚。
全局變量是window對(duì)象的屬性。
全局函數(shù)是window對(duì)象的方法菩咨。
甚至 HTML DOM 的document也是window對(duì)象的屬性之一： - 瀏覽器窗口的高度和寬度：（不包括工具欄/滾動(dòng)條）
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Window Screen
-
window.screen對(duì)象包含有關(guān)用戶屏幕的信息吠式。 -
window.screen對(duì)象在編寫(xiě)時(shí)可以不使用window這個(gè)前綴。 -
screen.availWidth屬性返回訪問(wèn)者屏幕的寬度旦委，以像素計(jì)奇徒，減去界面特性，比如窗口任務(wù)欄缨硝。
document.write("可用寬度：" + screen.availWidth);
- screen.availHeight 屬性返回訪問(wèn)者屏幕的高度摩钙，以像素計(jì)，減去界面特性查辩，比如窗口任務(wù)欄胖笛。
document.write("可用高度：" + screen.availHeight);
Window Location
-
window.location對(duì)象用于獲得當(dāng)前頁(yè)面的地址 (URL)网持，并把瀏覽器重定向到新的頁(yè)面。 -
window.location對(duì)象在編寫(xiě)時(shí)可不使用window這個(gè)前綴长踊。 - 一些例子：
location.hostname // 返回 web 主機(jī)的域名
location.pathname // 返回當(dāng)前頁(yè)面的路徑和文件名
location.port // 返回 web 主機(jī)的端口 （80 或 443）
location.protocol // 返回所使用的 web 協(xié)議（http:// 或 https://）
location.href // 返回當(dāng)前頁(yè)面的 URL功舀。
location.assign() // 加載新的文檔。
Window History
-
window.history對(duì)象在編寫(xiě)時(shí)可不使用window這個(gè)前綴身弊。
為了保護(hù)用戶隱私辟汰，對(duì) JavaScript 訪問(wèn)該對(duì)象的方法做出了限制。 -
history.back()方法加載歷史列表中的前一個(gè) URL阱佛。
這與在瀏覽器中點(diǎn)擊后退按鈕是相同的： -
history forward()方法加載歷史列表中的下一個(gè) URL帖汞。
這與在瀏覽器中點(diǎn)擊前進(jìn)按鈕是相同的：
Window Navigator
-
window.navigator對(duì)象包含有關(guān)訪問(wèn)者瀏覽器的信息。 -
window.navigator對(duì)象在編寫(xiě)時(shí)可不使用window這個(gè)前綴凑术。 - 來(lái)自 navigator 對(duì)象的信息具有誤導(dǎo)性翩蘸，不應(yīng)該被用于檢測(cè)瀏覽器版本
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>";
- 由于不同的瀏覽器支持不同的對(duì)象，您可以使用對(duì)象來(lái)檢測(cè)瀏覽器淮逊。例如催首，由于只有 Opera 支持屬性
"window.opera"，您可以據(jù)此識(shí)別出 Opera泄鹏。
if (window.opera) {
...some action...
}
消息框
可以在 JavaScript 中創(chuàng)建三種消息框：警告框郎任、確認(rèn)框、提示框命满。
- 警告框經(jīng)常用于確保用戶可以得到某些信息涝滴。
當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作胶台。
alert("文本")
- 確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息歼疮。
當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作诈唬。
如果用戶點(diǎn)擊確認(rèn)韩脏，那么返回值為true。如果用戶點(diǎn)擊取消铸磅，那么返回值為false赡矢。
confirm("文本")
- 提示框經(jīng)常用于提示用戶在進(jìn)入頁(yè)面前輸入某個(gè)值。
當(dāng)提示框出現(xiàn)后阅仔，用戶需要輸入某個(gè)值吹散，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。
如果用戶點(diǎn)擊確認(rèn)八酒，那么返回值為輸入的值空民。如果用戶點(diǎn)擊取消，那么返回值為null。
prompt("文本","默認(rèn)值")
計(jì)時(shí)事件
通過(guò)使用 JavaScript界轩，我們有能力作到在一個(gè)設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼画饥，而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計(jì)時(shí)事件浊猾。
- 未來(lái)的某時(shí)執(zhí)行代碼
var t=setTimeout("javascript語(yǔ)句",毫秒)
setTimeout() 方法會(huì)返回某個(gè)值抖甘。在上面的語(yǔ)句中，值被儲(chǔ)存在名為t 的變量中葫慎。假如你希望取消這個(gè) setTimeout()衔彻，你可以使用這個(gè)變量名來(lái)指定它。
setTimeout() 的第一個(gè)參數(shù)是含有 JavaScript 語(yǔ)句的字符串幅疼。這個(gè)語(yǔ)句可能諸如 "alert('5 seconds!')"米奸，或者對(duì)函數(shù)的調(diào)用昼接，諸如 "alertMsg()"爽篷。
第二個(gè)參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個(gè)參數(shù)。
- 取消
setTimeout():clearTimeout()
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
document.getElementById('txt').value=0
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="開(kāi)始計(jì)時(shí)慢睡！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計(jì)時(shí)逐工！" onClick="stopCount()">
</form>
<p>請(qǐng)點(diǎn)擊上面的“開(kāi)始計(jì)時(shí)”按鈕來(lái)啟動(dòng)計(jì)時(shí)器。輸入框會(huì)一直進(jìn)行計(jì)時(shí)漂辐，從 0 開(kāi)始泪喊。點(diǎn)擊“停止計(jì)時(shí)”按鈕可以終止計(jì)時(shí)，并將計(jì)數(shù)重置為 0髓涯。</p>
</body>
</html>
Cookies
- cookie 用來(lái)識(shí)別用戶袒啼。
- cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)纬纪，就會(huì)發(fā)送這個(gè) cookie蚓再。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。
- 當(dāng)訪問(wèn)者首次訪問(wèn)頁(yè)面時(shí)包各，他或她也許會(huì)填寫(xiě)他/她們的名字摘仅。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪問(wèn)者再次訪問(wèn)網(wǎng)站時(shí)问畅，他們會(huì)收到類似 "Welcome John Doe!" 的歡迎詞娃属。而名字則是從 cookie 中取回的。
- 當(dāng)訪問(wèn)者首次訪問(wèn)頁(yè)面時(shí)护姆，他或她也許會(huì)填寫(xiě)他/她們的密碼矾端。密碼也可被存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L問(wèn)網(wǎng)站時(shí)卵皂，密碼就會(huì)從 cookie 中取回秩铆。
- 當(dāng)訪問(wèn)者首次訪問(wèn)你的網(wǎng)站時(shí)，當(dāng)前的日期可存儲(chǔ)于 cookie 中渐裂。當(dāng)他們?cè)俅卧L問(wèn)網(wǎng)站時(shí)豺旬，他們會(huì)收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"钠惩。日期也是從 cookie 中取回的。
- 在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問(wèn)者名字的 cookie族阅。當(dāng)訪問(wèn)者首次訪問(wèn)網(wǎng)站時(shí)篓跛，他們會(huì)被要求填寫(xiě)姓名。名字會(huì)存儲(chǔ)于 cookie 中坦刀。當(dāng)訪問(wèn)者再次訪問(wèn)網(wǎng)站時(shí)愧沟，他們就會(huì)收到歡迎詞。
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{
alert('Welcome again '+username+'!')
}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
