[TOC]
# BOM
## BOM的概念（了解）
BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，
比如：刷新瀏覽器、后退、前進、在瀏覽器中輸入URL等
## BOM的頂級對象window（熟悉）
window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window 注意，window對象中內置了一些特殊屬性，比如name，top屬性。
JavaScript代碼
~~~
// 1、window對象中的方法和屬性，調用的時候不用window，可直接寫方法或屬性
alert('很高興認識你');
window.alert('終于調用我了');
// 2、全局變量定義的時候會自動成為window對象的屬性
var age = 18;
console.log(age);
console.log(window.age);
// 3、注意window的內置屬性 name和top的用法
var name = 123;
console.log(window.name);
?
var top = '30px';
console.log(window.top);
?
window.console.log('我也為你感到高興')
~~~
### **對話框（了解**）
**alert()：彈出提示框；** **? prompt()：彈出對話框；**
第二個參數是一個input的內容，可以是數組，如果是數組，渲染結果使一逗號隔開的字符串 **? confirm()：彈出確認框；**
html和css代碼
~~~
<input type="button" value="alert" id="btn1">
<input type="button" value="prompt" id="btn2">
<input type="button" value="confirm" id="btn3">
~~~
JavaScript代碼
~~~
my$('btn1').onclick = function () {
? ? ? ?alert('你好嗎')
? }
? ?my$('btn2').onclick = function () {
? ? ? var answer = prompt('可不可以，和我在一起', '不可以');
? ? ? ?console.log(answer);
? }
? ?my$('btn3').onclick = function () {
? ? ? ?var con = confirm('你真的舍得嗎');
? ? ? ?console.log(con);
? }
~~~
### **頁面加載事件（掌握）**
onload：在文檔加載完畢（元素的創建，外部文件js、css、圖片等的引入）之后，才執行onload中的代碼
~~~
//當頁面加載完成執行
// window.onload=function () {
//1、onload：在文檔加載完畢（元素的創建，外部文件js、css、圖片等的引入）之后，才執行onload中的代碼
onload = function () {
? ?var box = document.getElementById('box');
? ?console.log(box);
}
//標簽放在onload下面
<div id="box">我是一個div</div>
~~~
onunload：卸載頁面的時候觸發
~~~
//2、onunload:卸載頁面的時候觸發
onunload = function () {
? ?// Blocked alert('hello') during unload.
? ?//卸載頁面的時候，window被凍結起來，所以alert方法無法調用了
? ?// alert('hello');
? ?console.log('hello wolfcode');
}
?
//F5:刷新頁面的過程
? ?//1、下載頁面
? ?//2、重新加載頁面
~~~
### **定時器（掌握）**
#### setTimeout()和clearTimeout()
在指定的毫秒數到達之后執行指定的函數，只執行一次
html和css代碼
~~~
<input id="btn" type="button" value="停止計劃"/>
~~~
JavaScript代碼
~~~
//window對象中的定時器
//參數一：定時器要執行的函數
//參數二：執行函數的間隔時間，單位是毫秒
//返回定時器的id
timeId = setTimeout(function () {
? ?console.log('爆炸了');
}, 3000);
?
var btn = document.getElementById('btn');
btn.onclick = function () {
? ?//取消（銷毀）定時器
? ?clearTimeout(timeId);
}
~~~
需求：點擊刪除按鈕時，彈出刪除成功提示，提示在3秒后自動消失。
html和css代碼
~~~
<style>
? ?body {
? ? ? ?margin: 0;
? ? ? ?padding: 0;
? }
?
? ?#tip {
? ? ? ?width: 150px;
? ? ? ?height: 30px;
? ? ? ?background-color: lightblue;
? ? ? ?opacity: 0.5;
? ? ? ?margin: 200px auto;
? ? ? ?padding-top: 5px;
? ? ? ?text-align: center;
? ? ? ?color: red;
? ? ? ?display: none;
? }
</style>
<script src="common.js"></script>
~~~
JavaScript代碼
~~~
onload = function () {
? ?//在頁面加載完成之后執行，頁面加載包括所有頁面元素的創建和js、css、圖片 等引用外部的資源下載
? ?var btn = document.getElementById('btn');
? ?btn.onclick=function () {
? ? ? ?//刪除操作
?
? ? ? ?//顯示div
? ? ? ?var tip = document.getElementById('tip');
? ? ? ?tip.style.display = 'block';
? ? ? ?//3秒之后隱藏div
? ? ? ?setTimeout(function () {
? ? ? ? ? ?tip.style.display = 'none';
? ? ? },3000);
?
? }
}
?
<input type="button" id="btn" value="刪除">
<div id="tip">刪除成功</div>
~~~
#### **setInterval()和clearInterval()**
定時調用的函數，可以按照給定的時間(單位毫秒)周期性（重復）調用函數
~~~
// 創建一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
?var date = new Date();
?console.log(date.toLocaleTimeString());
}, 1000);
?
// 取消定時器的執行
clearInterval(timerId);
~~~
需求：時間倒計時； 需求描述：實現從當前時間到未來某個時間的倒計時； 需求分析：每1000毫秒更新一下倒計時時間，使得span中的時間值每秒更新一次，呈現出倒計時的效果；
html和css代碼
~~~
<style type="text/css">
? ?.time-item {
? ? ? ?width: 430px;
? ? ? ?height: 45px;
? ? ? ?margin: 0 auto;
? }
?
? ?.time-item strong {
? ? ? ?background: orange;
? ? ? ?color: #fff;
? ? ? ?line-height: 49px;
? ? ? ?font-size: 36px;
? ? ? ?font-family: Arial;
? ? ? ?padding: 0 10px;
? ? ? ?margin-right: 10px;
? ? ? ?border-radius: 5px;
? ? ? ?box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
? }
?
? ?.time-item > span {
? ? ? ?float: left;
? ? ? ?line-height: 49px;
? ? ? ?color: orange;
? ? ? ?font-size: 32px;
? ? ? ?margin: 0 10px;
? ? ? ?font-family: Arial, Helvetica, sans-serif;
? }
? ?.title {
? ? ? ?width: 360px;
? ? ? ?height: 50px;
? ? ? ?margin:200px auto 50px auto;
? }
</style>
?
<h1 class="title">距離端午節，還有</h1>
?
<div class="time-item">
? ?<span><span id="day">00</span>天</span>
? ?<strong><span id="hour">00</span>時</strong>
? ?<strong><span id="minute">00</span>分</strong>
? ?<strong><span id="second">00</span>秒</strong>
</div>
~~~
JavaScript代碼
~~~
?
//目標時間
var endDate = new Date('2019-07-012 0:0:0');
?
var day = my$('day');
var hour = my$('hour');
var minute = my$('minute');
var second = my$('second');
?
//每隔一秒設置一次時間
setInterval(countDown,1000);
//先執行一次
countDown();
?
function countDown() {
? ?var startDate = new Date();
? ?//獲取時間差
? ?var interval = getInterval(startDate, endDate);
? ?//每秒切換一次時間
? ?setInnerText(day, interval.day);
? ?setInnerText(hour, interval.hour);
? ?setInnerText(minute, interval.minute);
? ?setInnerText(second, interval.second);
}
~~~
需求：簡單動畫； 需求描述：當點擊按鈕時，div向右慢慢移動，移動到某個位置就停止； 需求分析：div 移動實際是設置 div 的 left 或 top 不斷遞增，遞增到一個指定的值則停止遞增；
步驟一：先完成單次移動，即點擊一次按鈕，就移動一次div； 步驟二：然后將步驟一中移動div的代碼放入到定時器中，當點擊按鈕時，div周期性向右移動；
html和css代碼
~~~
<style>
? ?body {
? ? ? ?margin: 0;
? }
?
? ?#box {
? ? ? ?position: relative;
? ? ? ?background-color: red;
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? }
</style>
<input type="button" value="開始" id="btn">
<div id="box"></div>
?
~~~
JavaScript代碼
~~~
// 常修改的值不能寫死
// 目標位置
var target = 500;
// 步長
var step = 3;
my$('btn').onclick = function () {
? ?console.log(my$('box').style.left, my$('box').offsetLeft);
? ?// div不停地向右移動
? ?var timeId = setInterval(function () {
? ? ? ?my$('box').style.left = my$('box').offsetLeft + step + 'px';
? ? ? ?// div移動到指定的位置，停止移動
? ? ? ?//如果等于500，就停止移動
? ? ? ?if (my$('box').offsetLeft >= target) {
? ? ? ? ? ?clearInterval(timeId);
? ? ? ? ? ?my$('box').style.left = target + 'px';
? ? ? }
? }, 10);
}
// 小結：
// 偏移量： 是一個只讀屬性，offsetLeft（offsetTop）返回當前元素相對于父元素左側（頂部）邊界的距離（沒有單位）；
// left屬性：定位元素的左外邊距邊界與父元素左邊界之間的偏移，單位是像素px
?
~~~
## **Location對象（熟悉）**
Location對象是window對象下的一個只讀屬性，可以返回一個Location對象，調用的時候可以省略window對象。
window對象中的location屬性，用于獲取或者設置瀏覽器地址欄的URL；
###** Location對象中的成員**
使用chrome的控制臺輸入window.location，然后按回車鍵，可輸出Location對象進行查看。我們也可以查看MDN文檔。Location對象的主要成員有以下這些。
* assign()：委派，作用和href一樣
* reload()：重新加載。參數：true 強制從服務器獲取頁面；false 如果瀏覽器中有緩存的話，直接從緩存獲取頁面
* replace()：替換掉地址欄中的歷史，但不記錄歷史，無法后退
* hash：錨點，# 后面的參數
* host：主機（包含端口在內）
* hostname：主機名（不包含端口）
* search：？后面#前面的參數
* href：設置瀏覽器地址欄中的地址,并跳轉到該地址
JavaScript代碼
~~~
my$('btn').onclick = function () {
?
? ?// 獲取location對象
? ?console.log(window.location);
? ?console.log(location);
?
? ?// href：瀏覽器地址欄中的地址
? ?// location.href = 'http://www.baidu.com';//設置href的值，將會立即跳轉的設置的地址
?
? ?// assign()：委派，作用和href一樣
? ?// location.assign('https://www.oschina.net/');
? ?// reload()：重新加載。參數：true 強制從服務器獲取頁面；false 如果瀏覽器中有緩存的話，直接從緩存獲取頁面
? ?// 相當于Ctrl + F5
? ?// window.location.reload(true);
?
? ?// replace()：替換掉地址欄中的歷史并立即跳轉到該地址，但不記錄歷史，無法后退
? ?// location.replace('http://www.jd.com');
?
? ?// hash：錨點，# 后面的參數
? ?// #username=hello
? ?// host：主機（包含端口在內）
? ?// hostname：主機名（不包含端口）
? ?// search：？后面#前面的參數
}
~~~
## **URL**
統一資源定位符 (Uniform Resource Locator, URL)簡稱URL，URL的組成如下
~~~
格式:scheme://host:port/path?query#fragment
舉例:http://www.wolfcode.cn/index.html?name=listeny&age=18#bottom
scheme:通信協議
常用的http,ftp,maito等
host:主機
服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:端口號
整數，可選，省略時使用方案的默認端口，如http的默認端口為80。
path:路徑
由零或多個'/'符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。
query:查詢
可選，用于給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每個參數的名和值用'='符號隔開。例如：name=zs
fragment:信息片斷
字符串，錨點.
~~~
**拓展案例**
解析URL中的query參數，并以對象形式返回。
~~~
// 定義一個函數，用于解析URL中的參數
function getQuery(queryStr) {
? ?// 定義一個空對象，用于封裝解析好的參數
? ?var query = {};
? ?// 判斷當前url中是否存在參數
? ?if (queryStr.indexOf('?') > -1) {
? ? ? ?// 截取 ? 后面的參數字符串，如得到 name=listeny&age=18
? ? ? ?var index = queryStr.indexOf('?');
? ? ? ?queryStr = queryStr.substr(index + 1);
? ? ? ?// 根據&切割字符串參數
? ? ? ?var array = queryStr.split('&');
? ? ? ?for (var i = 0; i < array.length; i++) {
? ? ? ? ? ?// 根據等號 = 切割字符串參數
? ? ? ? ? ?var tmpArr = array[i].split('=');
? ? ? ? ? ?if (tmpArr.length === 2) {
? ? ? ? ? ? ? ?query[tmpArr[0]] = tmpArr[1];
? ? ? ? ? }
? ? ? }
? }
? ?return query;
}
var url = 'http://www.wolfcode.cn/index.html?name=listeny&age=18';
console.log(getQuery(url));
// 解析當前location中的url
console.log(getQuery(location.search));
console.log(getQuery(location.href));
~~~
## **History對象**
  History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。History 對象作為 window 對象的一個屬性，可通過 window.history 獲取到History對象。常用的history的屬性和方法如下:
* length：歷史記錄的長度（個數） ?
* back()：向后跳轉 ?
* forward()：向前跳轉 ?
* go()：頁面前后跳轉，參數 1 表示向前跳轉，-1表示向后跳轉
頁面一
html和css代碼
```
=============== first.html ===============
<!--<input id="go" type="button" value="go(1)"/>-->
<input id="forward" type="button" value="forward"/>
<br>
<a href="second.html">很高興認識你</a>
```
JavaScript代碼
```
var btn1 = document.getElementById('btn1');
btn1.onclick=function () {
//前進
// history.forward();
history.go(1);
}
var btn2 = document.getElementById('btn2');
btn2.onclick=function () {
//后退
// history.back();
history.go(-1);
}
```
頁面二
html和css代碼
```
=============== second.html ===============
<!--<input id="btn" type="button" value="go(-1)"/>-->
<input id="back" type="button" value="back"/>
<br>
<a href="first.html">我也為你感到高興</a>
```
JavaScript代碼
```
var btn1 = document.getElementById('btn1');
btn1.onclick=function () {
//前進
// history.forward();
history.go(1);
}
var btn2 = document.getElementById('btn2');
btn2.onclick=function () {
//后退
// history.back();
history.go(-1);
}
```
注意：歷史記錄涉及用戶信息安全問題，History對象中不提供獲取歷史記錄的API。
## **Navigator對象（了解）**
Navigator：導航
userAgent：用戶代理，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。通過userAgent可以判斷用戶瀏覽器的類型 ?
platform：通過platform可以判斷瀏覽器所在的系統平臺類型.
```
/*
- userAgent：用戶代理，通過userAgent可以判斷用戶瀏覽器的類型
- platform：通過platform可以判斷瀏覽器所在的系統平臺類型.
*/
console.log(navigator);
console.log(navigator.userAgent);
console.log(navigator.platform);
```
## 偏移量offset（掌握）
## 客戶區client（掌握）
## 滾動scroll（掌握）
