★【知識(shí)點(diǎn)】：
1今魔、掌握什么是BOM
2、掌握BOM的核心-window對(duì)象
3顷级、掌握window對(duì)象的控制凫乖、彈出窗口方法
一、什么是bom弓颈？
BOM（browser object model）瀏覽器對(duì)象模型
關(guān)于BOM：
1.核心是window對(duì)象帽芽，所有的全局變量和全局函數(shù)都被歸在了window上
2.BOM是Browser Object Model的縮寫(xiě)，是瀏覽器對(duì)象模型
二翔冀、window
window是瀏覽器的一個(gè)實(shí)例导街，在瀏覽器中，window對(duì)象有雙重角色纤子，它既是通過(guò)JavaScript訪問(wèn)瀏覽器窗口的一個(gè)接口搬瑰，又是ECMAScript規(guī)定的Global對(duì)象。
三控硼、window對(duì)象的方法：
1/window.alert("content")
【語(yǔ)法】：
window.alert("content")
【功能】：
顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框
2/window.confirm("message")
【語(yǔ)法】：
window.confirm("message")
【功能】：
顯示一個(gè)帶有指定消息和OK及取消按鈕的對(duì)話框
【返回值】：
如果用戶點(diǎn)擊確認(rèn)按鈕泽论，則confirm()返回true
如果用戶點(diǎn)擊取消按鈕，則confirm()返回false
【confirm案例1】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" id="btn" value="刪除">
</div>
<script>
//confirm
//獲取按鈕卡乾，綁定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
//彈出確認(rèn)對(duì)話框
var result=window.confirm("你確定要?jiǎng)h除嗎翼悴？");
console.log(result);
}
</script>
</body>
</html>
【confirm案例2】：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>輸入框</title>
</head>
<body>
<input type="button" value="點(diǎn)擊" id="btn">
<script type="text/javascript">
//獲取按鈕對(duì)象
var btn=document.getElementById("btn");
//綁定鼠標(biāo)事件
btn.onclick=function(){
//寫(xiě)出確認(rèn)框
var result=window.confirm("確認(rèn)要?jiǎng)h除嗎？");
//對(duì)確認(rèn)框的返回值進(jìn)行判斷说订，設(shè)置相應(yīng)樣式
if(result==true){
btn.style.color="#f00";
}else{
btn.style.color="#0f0";
}
}
</script>
</body>
</html>
3/window.prompt(“text,defaultText")
【語(yǔ)法】：
window.prompt(“text,defaultText")
【參數(shù)說(shuō)明】：
text：要在對(duì)話框中顯示的純文本（而不是HTML格式的文本）
defaultText：默認(rèn)的輸入文本
【返回值】：
如果用戶單擊提示框的取消按鈕抄瓦，則返回null
如果用戶單擊確認(rèn)按鈕，則返回輸入字段當(dāng)前顯示的文本
【案例】：
<script>
// 彈出輸入框
//var message=prompt("請(qǐng)輸入您的星座","天蝎座");
//console.log(message);
</script>
4/window.open(pageURL,name,parameters)
【語(yǔ)法】：
window.open(pageURL,name,parameters)
【功能】：
打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口
【參數(shù)說(shuō)明】：
pageURL:子窗口路徑
name:子窗口句柄（name聲明了新窗口的名稱陶冷，方便后期通過(guò)name對(duì)子窗口進(jìn)行引用）
parameters:窗口參數(shù)（各參數(shù)用逗號(hào)分隔）
【案例】：
window.open
newwindow.html
5/window.close()
【語(yǔ)法】：
window.close()
【功能】：
關(guān)閉瀏覽器窗口
【案例】：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打開(kāi)子窗口钙姊，顯示newwindow.html
window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
var quit = document.getElementById("quit");
// 點(diǎn)擊關(guān)閉當(dāng)前窗口
quit.onclick = function(){
window.close();
}
}
</script>
</body>
</html>
【備注】\n
\n 能夠讓alert 、confirm等彈出框上的提示文字實(shí)現(xiàn)換行
★【知識(shí)點(diǎn)】：
1埂伦、掌握超時(shí)調(diào)用
2煞额、掌握間歇調(diào)用
一、超時(shí)調(diào)用
【語(yǔ)法】：
setTimeout(code,millisec)
【功能】：
在指定的毫秒后調(diào)用函數(shù)或計(jì)算表達(dá)式
【參數(shù)說(shuō)明】：
1、code：要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串
2膊毁、millisec：在執(zhí)行代碼前需等待的毫秒數(shù)
【說(shuō)明】：
setTimeout()只執(zhí)行code一次胀莹。如果要多次調(diào)用，請(qǐng)使用setInterval()或者讓code自身再次調(diào)用setTimeout()
二婚温、清除超時(shí)調(diào)用
【語(yǔ)法】：
clearTimeout(id_of_settimeout)
【功能】：
取消由setTimeout()方法設(shè)置的timeout
【參數(shù)說(shuō)明】：
id_of_settimeout：由setTimeout()返回的ID值描焰，該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。
【案例】：
三栅螟、間歇調(diào)用
【語(yǔ)法】：
setInterval(code,millisec)
【功能】：
每隔指定的時(shí)間執(zhí)行一次代碼
【參數(shù)說(shuō)明】：
1荆秦、code：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2力图、millisec：周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔步绸，以毫秒計(jì)
四、清除間歇調(diào)用
【語(yǔ)法】：
clearInterval(id_of_setinterval)
【功能】：
取消由setInterval()方法設(shè)置的interval
【參數(shù)說(shuō)明】：
id_of_setinterval:由setInterval()返回的ID值
【案例】：
【案例】：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>閃爍的文字</title>
<style type="text/css">
div{
width:400px;
height:400px;
line-height:400px;
border:2px solid gray;
text-align:center;
color:red;
}
</style>
</head>
<body>
<h3>會(huì)閃爍的文字</h3>
<div id="text"> </div>
<script type="text/javascript">
//獲取放置文本div中的內(nèi)容
var text=document.getElementById("text");
//自定義一個(gè)變量吃媒，用來(lái)記錄閃爍的值瓤介，初始值是0
var star=0;
//設(shè)置定時(shí)器，每500毫秒執(zhí)行一下定時(shí)器里面的腳本
/*定時(shí)器腳本判斷：當(dāng)閃爍變量的值是0時(shí)赘那，閃爍變量的值設(shè)置為1刑桑，div里面的內(nèi)容設(shè)置為：：'☆☆☆今日特賣☆☆☆'；當(dāng)閃爍變量的值為1時(shí)漓概，閃爍變量的值設(shè)置為0漾月，div里面的內(nèi)容設(shè)置為'★★★今日特賣★★★'*/
setInterval(function(){
if(star==0){
star=1;
text.innerHTML="☆☆☆今日特賣☆☆☆"
}else{
star=0;
text.innerHTML='★★★今日特賣★★★'
}
}
,500);
</script>
</body>
</html>
【案例2】：num開(kāi)始每間隔1s加1病梢，到max停止
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/* var intervalId=setInterval(function(){
console.log("您好");
},1000)
// 10秒之后停止打印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;
// 每隔1秒針num遞增一次胃珍，直到num的值等于max清除
//使用間歇調(diào)用實(shí)現(xiàn)
/* timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)*/
// 使用超時(shí)調(diào)用實(shí)現(xiàn)
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
</script>
</body>
</html>
本案例注意點(diǎn)：
1.注意：此處為null不是空“”
2.超時(shí)調(diào)用實(shí)現(xiàn)間歇調(diào)用效果的應(yīng)用原理是讓自身再次調(diào)用了set Timeout()
★【知識(shí)點(diǎn)】：
1、掌握l(shuí)ocation對(duì)象
2蜓陌、掌握l(shuí)ocation對(duì)象的常用屬性
一觅彰、location對(duì)象☆
location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航的功能钮热，它既是window對(duì)象的屬性填抬，也是document對(duì)象的屬性。
二隧期、location對(duì)象的常用屬性
1/location.href
【語(yǔ)法】：
location.href
【功能】：
返回當(dāng)前加載頁(yè)面的完整URL
【說(shuō)明】：
location.href與window.location等價(jià)
2/location.hash
【語(yǔ)法】：
location.hash
【功能】：
返回URL中的hash（#號(hào)后跟零或多個(gè)字符）飒责，如果不包含則返回空字符串。
【案例】：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{height:400px;background:#ccc;}
.box2{height:600px;background:#666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回頂部">
<script>
//console.log(location.href);
//console.log(location.hash);
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
</html>
3/location.host
【語(yǔ)法】：
location.host
【功能】：
返回服務(wù)器名稱和端口號(hào)（如果有）
【例如】：
4/location.hostname
【語(yǔ)法】：
location.hostname
【功能】:
返回不帶端口號(hào)的服務(wù)器名稱仆潮。
5/location.pathname
【語(yǔ)法】：
location.pathname
【功能】：
返回URL中的目錄和（或）文件名宏蛉。
6/location.port
【語(yǔ)法】：
location.port
【功能】：
返回URL中指定的端口號(hào)，如果沒(méi)有性置，返回空字符串拾并。
7/location.protocol
【語(yǔ)法】：
location.protocol
【功能】：
返回頁(yè)面使用的協(xié)議。
8/location.search
【語(yǔ)法】：
location.search
【功能】：
返回URL的查詢字符串。這個(gè)字符串以問(wèn)號(hào)開(kāi)頭嗅义。
★【知識(shí)點(diǎn)】：
1屏歹、掌握位置操作
2、掌握l(shuí)ocation.reaplace()
3之碗、掌握l(shuí)ocation.reload()
一蝙眶、位置操作
改變?yōu)g覽器位置的方法：
location.href屬性
location對(duì)象其他屬性也可改變URL:
location.hash
location.search
二、location.replace()
1/location.replace(url)
【語(yǔ)法】：
location.replace(url)
【功能】：重新定向URL褪那。
【說(shuō)明】：使用location.replace不會(huì)在歷史記錄中生成新紀(jì)錄械馆。
2/location.reload()
【語(yǔ)法】：
location.reload()
【功能】：
重新加載當(dāng)前顯示的頁(yè)面。
【說(shuō)明】：
1武通、reload()有可能從緩存中加載
2霹崎、 location.reload(true)從服務(wù)器重新加載
★【知識(shí)點(diǎn)】：
1、掌握對(duì)象字面量表示法
2冶忱、掌握編碼與解碼方法
3尾菇、掌握解析地址欄中的參數(shù)
一、對(duì)象字面量
【語(yǔ)法】：
var obj={key1:value1,key2:value2...}
【功能】：
使用對(duì)象字面量的形式創(chuàng)建一個(gè)對(duì)象
【說(shuō)明】：
1囚枪、可以使用obj.key1或obj["key1"]的形式訪問(wèn)對(duì)象中的鍵值
2派诬、可以用obj.key1=value1的形式為obj添加值。
二链沼、encodeURI()
【語(yǔ)法】：encodeURI(URIstring)
【功能】：可把字符串作為URI進(jìn)行編碼默赂。
【參數(shù)】：必需。一個(gè)字符串括勺，含有URI或其他要編碼的文本缆八。
【說(shuō)明】：
1、 該方法不會(huì)對(duì)ASCII 字母和數(shù)字進(jìn)行編碼
2疾捍、不會(huì)對(duì)ASCII 標(biāo)點(diǎn)符號(hào)進(jìn)行編碼：-_ . ! ~ * ' ( ) 奈辰。
3、如URI 組件中含有分隔符乱豆，如? 和#
應(yīng)使用encodeURIComponent() 方法分別對(duì)各組件進(jìn)行編碼
三奖恰、decodeURI()
【語(yǔ)法】：
decodeURI(URIstring)
【功能】：
可對(duì)encodeURI()函數(shù)編碼過(guò)的URI進(jìn)行編碼。
【參數(shù)】：
必需宛裕。一個(gè)字符串瑟啃，含有要解碼的URI或其他要解碼的文本。
四揩尸、encodeURIComponent()
【語(yǔ)法】：
encodeURIComponent(URIstring)
【功能】：
可把字符串作為URI組件進(jìn)行編碼蛹屿。
【參數(shù)】：
必需。一個(gè)字符串疲酌，含有URI組件或其他要編碼的文本蜡峰。
【說(shuō)明】：
1了袁、不會(huì)對(duì)ASCII字母和數(shù)字進(jìn)行編碼
2、也不會(huì)對(duì)這些ASCII標(biāo)點(diǎn)符號(hào)進(jìn)行編碼：- _ . ! ~ * ' ( ) 湿颅。
五载绿、decodeURIComponent()
【語(yǔ)法】：
decodeURIComponent()函數(shù)編碼的URI進(jìn)行解碼。
【參數(shù)】：
必需油航。一個(gè)字符串崭庸，含有編碼URI組件或其他要解碼的文本。
★【知識(shí)點(diǎn)】：
掌握BOM中的history對(duì)象
history歷史對(duì)象
1 /history.back()
【語(yǔ)法】：
history.back()
【功能】：
回到歷史記錄的上一步
【說(shuō)明】：
想當(dāng)于使用了history.go(-1)
2/location.forward()
【語(yǔ)法】：
location.forward()
【功能】：
回到歷史記錄的下一步
【說(shuō)明】：
相當(dāng)于使用了history.go(1)
3/history.go(-n)
【語(yǔ)法】：
history.go(-n)
【功能】：
回到歷史記錄的前n步
4/history.go(n)
【語(yǔ)法】：
history.go(n)
【功能】：
回到歷史記錄的后n步
★【知識(shí)點(diǎn)】
掌握Screen對(duì)象及其常用屬性
一谊囚、Screen對(duì)象屬性
1/screen.availWidth
【語(yǔ)法】：
screen.availWidth
【功能】：
返回可用的屏幕寬度
2/screen.availHeight
【語(yǔ)法】：
screen.availHeight
【功能】：
返回可用的屏幕高度
【參考案例】：
【注意區(qū)別】：
★【知識(shí)點(diǎn)】：
1怕享、掌握Navigator對(duì)象的userAgent屬性
2、掌握如何判斷瀏覽器的類型
3镰踏、掌握如何判斷設(shè)備的終端是移動(dòng)還是PC
例如：
appCodeName:獲取瀏覽器名稱
appName:獲取完整的瀏覽器名稱
Navigator
UserAgent：用來(lái)識(shí)別瀏覽器名稱函筋、版本、引擎以及操作系統(tǒng)等信息的內(nèi)容奠伪。
瀏覽器判斷的封裝
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<script>
//console.log(navigator.userAgent);
// 判斷瀏覽器
function getBrowser(){
var explorer = navigator.userAgent,browser;
if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
}
return browser;
}
var browser = getBrowser();
console.log("您當(dāng)前使用的瀏覽器是："+browser);
// 判斷終端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
</script>
</body>
</html>
