BOM
BOM
概念：BOM（browser object model）窗口對象模型瀏覽器
一、經常使用對象
window：窗口，瀏覽器的窗口cookie
咱們定義的全局變量和全局函授都是window對象的屬性和方法函數
例子：.net
var a = 1;
function test(){
var a = 2;
alert(a);
alert(window.a);
}orm
全局變量是window的屬性，全局函數是window的方法
窗口body是寬度：window.innerWidth對象
窗口body的高度：window.innerHeightblog
var p1 = document.getElementById("p1");
var width = window.innerWidth;
var height = window.innerHeight;
p1.innerHTML = "窗口的寬度爲：" + width + "窗口的高度爲：" + height;事件
經常使用的方法：
（1）open：打開一個新的窗口。要傳三個參數：第一個參數爲將要打開窗口的路徑；第二個參數爲打開的方式；第三個參數爲對於新打開瀏覽器的描述（寬和高等）。ip
（2）close：關閉一個窗口rem
（3）moveTo：移動一個窗口。以窗口的左上角爲座標起點
（4）focus：是窗口獲取焦點
（5）resizeTo：改變新窗口的大小
例子：包含的上面的5個方法
<body>
<p id="p1">窗口的寬度</p>
<button onclick="openWin()">打開一個新的窗口</button>
<button onclick="closeWin()">關閉新的窗口</button>
<button onclick="removeWin()">移動新的窗口</button>
<button onclick="resizeWin()">改變新窗口的大小</button>
</body>
<script>
//當前窗口的寬度和高度
var p1 = document.getElementById("p1");
var width = window.innerWidth;
var height = window.innerHeight;
p1.innerHTML = "窗口的寬度爲：" + width + "窗口的高度爲：" + height;
function openWin(){//打開一個新的窗口
myWindow = window.open("","","width=200,height=300");
}
function closeWin(){//關閉一個窗口
myWindow.close();
}
function removeWin(){//移動新的窗口
//一個窗口的左上角爲移動窗口的座標
myWindow.moveTo(200,200);
//獲取焦點
myWindow.focus();
}
function resizeWin(){//改變窗口的大小
myWindow.resizeTo(500,500);
//獲取焦點
myWindow.focus();
}
</script>
（6）screen：屏幕，也是window下面的一個對象，在使用的時候能夠用window.screen，也能夠把window省略掉。
屏幕的經常使用屬性：寬、高、可用寬和可用高（可用高不包括任務欄）
<script>
var scrWidth = window.screen.width;
var scrHeight = screen.height;
document.write("屏幕的寬：" +scrWidth + "屏幕的高：" + scrHeight);
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的寬：" +scrAvaWidth + "屏幕的高：" + scrAvaHeight);
</script>
（7）location：地址
經常使用屬性：href：完整路徑；port：端口號；pathname：路徑名；protocol協議
經常使用方法：
①打開一個新的路徑（窗口）
function newLocation(){
location.assign("http://www.runoob.com");
}
②刷新：普通刷新和強制刷新
function reloadDoc(){
//若是傳值爲true那麼就是強制刷新，若是不傳，就是普通刷新
location.reload();
}
③history：歷史記錄
記錄窗口的歷史，能夠進行頁面的轉換。
④back：返回上一頁
⑤forward：進入下一頁
⑥go：進入肯定的哪一頁（須要傳參數，-1時回到上一頁
例子：包含③-⑥四個方法
function goBack(){
history.back();
}
function newDoc(){
location.assign("http://www.runoob.com");
}
function goForward(){
history.forward();
}
function goTo(){
history.go(-1);
}
二、彈窗
（1）alert()：警告提示框。也是window對象下的方法，window能夠省略不寫。
alert("提示的內容");//警告提示框
（2）prompt(「提示的信息」,」默認值」)：信息提示輸入框。也是window對象下的方法，window也能夠省略不寫。當點擊了肯定後才把值返回不然返回爲null。
var str = prompt("請輸入的內容","hello world");//請輸入內容就是提示的信息，後面的hello world是默認值
（3）confirm(「提示的信息」)：確認框。也是window對象下的方法，window能夠省略不寫，當點擊「肯定」的時候，返回true，若是點擊「取消」返回false
var isRight = confirm("是否肯定刪除！");
alert(typeof (isRight) + isRight);
三、cookie
（1）cookie的做用：在本地瀏覽器存儲數據。經常使用語記住帳號等。
（2）cookie的組成：鍵值對的形式
（3）存儲的數據：「userId=12324；psd=1324；」
有效期：「expires=今天之後的時間」
（4）存儲cookie：
按照cookie的格式寫好一個字符串，而後將它賦值給document.cookie，瀏覽器就存了這個cookie。能夠存儲多個鍵值對，可是鍵的名字不能重複。新的值替換舊的值。
function saveCookie(){
var pad = document.getElementById("pad").value;
//日期的應用
var date = new Date();
date.setDate(date.getDate() + 7);
var cookieText = "pad=" +pad +";" + "expires=" + date;
document.cookie = cookieText;
}
（5）獲取cookie：
經過document.cookie就能獲得瀏覽器以前存儲的cookie。是一個字符串。將這個字符串進行解析，獲得仔細想要的內容。
function getCookie(){
var data = document.cookie;
var result = [];
result= data.split("; ");
var userIdData = result[1].split("=")[1];
var padData = result[1].split("=")[1];
var userId = document.getElementById("userId");
userId.value = userIdData;
var pad = document.getElementById("pad");
pad.value = padData;
}
（6）清除cookie：
將存儲的cookie的有效期改成過去的某一天，就清除了cookie。
function removeCookie(){
var date = new Date();
date.setDate(date.getDate()-7);
var cookieText = "pad=;expires=" + date;
document.cookie = cookieText;
}
案例：cookie方法的總體代碼
<body onload="getCookie()">
<form action="">
<label for="userId">帳號：</label>
<input type="text" id="userId"/><br><br>
<label for="pad">密碼：</label>
<input type="text" id="pad"/><br><br>
<label for="rememberUser">記住帳號</label>
<input type="checkbox" id="rememberUser"/><br><br>
<input type="submit" value="登陸" onclick="saveCookie()"/>
<button onclick="getCookie()">獲得cookie</button>
<button onclick="removeCookie()">清除cookie</button>
</form>
</body>
<script>
function saveCookie(){
//存儲
var pad = document.getElementById("pad").value;
//日期的應用
var date = new Date();
date.setDate(date.getDate() + 7);
var cookieText = "pad=" +pad +";" + "expires=" + date;
document.cookie = cookieText;
}
function getCookie(){
//獲取
var data = document.cookie;
var result = [];
result= data.split("; ");
var userIdData = result[1].split("=")[1];
var padData = result[1].split("=")[1];
var userId = document.getElementById("userId");
userId.value = userIdData;
var pad = document.getElementById("pad");
pad.value = padData;
}
function removeCookie(){
//清除
var date = new Date();
date.setDate(date.getDate()-7);
var cookieText = "pad=;expires=" + date;
document.cookie = cookieText;
}
</script>
四、計時事件
（1）setInterval(「函數」,」毫秒數」)：計時器。每隔多長時間就調用一次函數。
執行週期性的任務。
例如：時鐘的演示
<body>
<p id="p1">時間</p>
</body>
<script>
var timer = setInterval("getTime()",1000);
function getTime(){
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var p1 = document.getElementById("p1");
p1.innerHTML = hour +":" + minute + ":" + second;
}
</script>
（2）clearInterval(計時器)：中止一個計時器
var timer = setInterval("countDown()",1000);
var i = 10;
function countDown(){
if(i == 0){
clearInterval(timer);
}else{
var id1 = document.getElementById("id1");
id1.innerHTML = i;
}
i--;
}
（3）setTimeout(「函數名」,」毫秒數」)：延時器，就是隔了多長時間調用一次函數。
<body> <p id="p1">您的電話已欠費（3秒以後消失）</p></body><script> var timer = setTimeout("alarmClock()",3000); function alarmClock(){ var p1 = document.getElementById("p1"); p1.innerHTML = ""; }</script>
-
每一个你不满意的现在，都有一个你没有努力的曾经。