[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（掌握）
