BOM
掌握什么是BOM
掌握BOM對核心：-window物件
掌握window物件的控制，彈出視窗方法
BOM(Browser Object Model)瀏覽器物件模型
它提供的物件主要有：
window navigator screen history location document event
全域變數：腳本的任何一個地方都能呼叫的變數
所有的全域變數和全域方法都被歸在window上
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" value="洗掉" id="btn">
</div>
<script>
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 宣告一個全域變數
window.username="marry"; //相當于 var username="marry";
// 宣告一個全域方法
window.sayName=function(){
alert("我是"+this.username);
}
//sayAge();
//window.sayName();
// confirm()
// 獲取按鈕,系結事件
var btn=document.getElementById("btn");
btn.onclick=function(){
// 彈出確認對話框
var result=window.confirm("您確定要洗掉嗎？洗掉之后該資訊\n將不可恢復！");
if(result){
document.getElementById("box").style.display="none";
}
}
// 彈出輸入框
//var message=prompt("請輸入您的星座","天蝎座");
//console.log(message);
</script>
</body>
回傳值：布林值，當點確定時，comfirm()回傳true，否則回傳false
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打開子視窗，顯示newwindow.html
window.open("D:/little_tools/vip/html/test.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
var quit = document.getElementById("quit");
// 點擊關閉當前視窗
quit.onclick = function(){
window.close();
}
}
</script>
</body>
JavaScript是單執行緒語言，單執行緒就是所執行的代碼必須按照順序執行，
掌握超時呼叫和間歇呼叫，
//setTimeout("alert('hello')",4000);
var fnCall=function(){
alert("world"); //自定義函式
}
var timeout1=setTimeout(function(){
alert("hello"); //匿名函式
},2000)
//SetTimeout方法回傳一個ID值，通過它用clearTimeout()取消超時呼叫
clearTimeout(timeout1);
//setTimeout(fnCall,5000);
setTimeout()只執行code一次，如果要多次呼叫，可以讓code自己再次呼叫setTimeout（）
周期性執行的間歇呼叫
/* var intervalId=setInterval(function(){
console.log("您好"); //列印9次
},1000)
// 10秒之后停止列印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;// 超時呼叫的ID是個物件，null釋放記憶體
// 每隔1秒針num遞增一次，直到num的值等于max清除
/* timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)*/
// 使用超時呼叫實作
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000); //
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
location物件
location物件提供了與當前視窗中加載的檔案有關的資訊，還提供了一些
導航的功能，它既是window物件的屬性，也是document物件的屬性，
<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); //給網頁后加#top可以取到#top
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
location改變瀏覽器的位置
掌握位置操作，location.replace()和location.reload()函式
<input type="button" value="重繪" id="reload">
<script>
/* setTimeout(function(){
//location.href='index6.html';
// window.location='index6.html'; 這兩種會產生回退按鈕，下面replace則不會
location.replace("index6.html");
},1000)*/
document.getElementById("reload").onclick=function(){
location.reload(true);
}
</script>
BOM中的history物件
history物件保存了用戶在瀏覽器中訪問頁面的歷史記錄
<p><input type="button" value="后退" id="btn"></p>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
history.back();
history.go(-2);//回退2步
}
</script>
Screen物件包含有關客戶端顯示螢屏的資訊，
console.log("頁面寬："+screen.availWidth);
console.log("頁面高："+screen.availHeight);
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);
navigator物件
UserAgent:用來識別瀏覽器名稱、版本、引擎以及作業系統等資訊的內容，
//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("您當前使用的瀏覽器是："+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);
indexOf(）方法回傳某個指定的字串值在字串中首次出現的位置，如果沒有出現過，回傳-1
IE不支持console.log()，用alert()
NEXT:
一個小栗子！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/151589.html
標籤：其他
上一篇：dom模型介紹