基础部分

BOM

BOM-(browser object model)-浏览器对象模型。js会把浏览器的一个标签页（即网页）作为一个对象存在于程序当中，提供了一些列的api来操作标签页本身。比如新建或关闭标签页，跳转页面、前进或后退等功能。
BOM本质上是相当于把一个页面当成一个对象数据放在js程序中，通过提供的api来操作页面本身。
类似于DOM核心是document对象。BOM也是有一个核心对象 window ，具体BOM相关的api是由window对象提供。BOM的核心就是window对象。

window对象概念

window对象是每一个页面都会有的对象，js程序自动生成。每个页面的window对象是不一样的。
window对象提供了用于操作本页面所需的所有api。值得一提的是document对象是作为window对象的一部分。

console.log(window);
console.log(window.document === document); //true
//说明了document是window的一部分

作为window对象里的api，在使用的时候可以省略window.前缀

window.alert("123")
等同于
alert("123");

两者是完全等效的

window对象api

alert：警告消息框
prompt：提示消息框
confirm：页面上弹出一个确认框，会返回一个true或false,点击确定返回true，否则返回false
open：新建一个页面。不推荐使用，受浏览器的安全机制，可能无法执行。
close：关闭当前页面
setInterval：间隔定时器
setTimeout：延时定时器
clearInterval：取消间隔定时器设定的定时执行操作。
clearTimeout：取消延时定时器设定的定时执行操作。
innerWidth&innerHeight：用于获取页面窗口的宽度和首屏高度。
outerWidth&outerHeight:用于获取页面窗口的宽度和整个标签页窗口的高度（即innerHeight+浏览器的工具栏高度）。

//close
var result = confirm('确定是否关闭页面');
window.close(); //关闭当前页面
//open
window.open("网页地址"，打开方式，“窗口的基本配置字符串”);
例子：新页面打开百度首页，宽高300，激励浏览器顶部和左边100px
window.open("http://www.baidu.com",'_blank',"width=300,height=300,top=100,left=100")

//innerWidth&innerHeight
console.log(innerWidth,innerHeight);

BOM四大内置对象

location

基础
是属于window对象，location本身也是一个对象，内置了一些api能够实现刷新、跳转页面等功能，同时能够获取页面地址。
基本使用

console.log(location)

常用api
location.host：获取页面地址中的主机地址
location.port：获取页面地址中的端口号
location.protocol：获取页面地址中的协议名称
location.hostname：获取页面地址中的ip地址
location.search：获取页面地址中的数据
location.href：获取页面的完整地址
location.assign():跳转到指定的页面，新建一条历史记录
location.replace():跳转到指定的页面，替换当前历史记录，无法后退到上一步

例子： http://127.0.0.1:5500/star/night/like.html
console.log(location.host); //127.0.0.1:5500
console.log(location.port); //5500
console.log(location.protocol); //http
console.log(location.hostname); //127.0.0.1
console.log(location.search); //?name=zs&age=12&sex=nv
console.log(location.href); //整个地址

//跳转
location.assign("要跳转的页面地址")
location.replace("要跳转的页面地址")
location.href = "要跳转的页面地址";

//刷新
location.reload(); //例子<button onclick="location.reload();">刷新</button>

基本上只能能够使用，除了href外不能修改。
跳转页面：assign replace href
获取页面地址中的数据实现多页面数据共享
结合了表单以及location.search来实现的

history

概念
提供了页面前进或后退的api，能够实现页面的前进或后退。
常用api
go(数字)：根据数字的正负来确定是前进还是后退指定的页数。
go(-1)：表示后退一页，go(1)表示前进一步
forward():前进一页
back():后退一页

window.history.go(-1);
等同于history.go(-1);
history.forward();
history.back();

应用场景
比如在用户登录或注册后返回上一个访问的页面，而不是返回首页。

navigator

概念
收集了跟浏览器本身相关的信息，比如浏览器版本，当前操作系统的版本等。
应用场景
配合正则表达式，能够判断当前用户使用的浏览器版本以及是否是移动端，方便切换pc端页面或移动端页面。
常用api
userAgent：返回浏览器的版本信息

navigator.userAgent

screen

概念
收集屏幕的相关信息，比如是否横屏、色彩度之类的。html5针对screen新增了orientation来获取屏幕的角度信息,竖屏模式角度返回0，横屏返回90。

console.log(screen);

//显示当前屏幕旋转的角度
console.log(screen.orientation.angle);//竖屏：0 横屏：90

定时器

概念

JavaScript提供了两个api来实现在一段时间之后执行指定的JavaScript代码的功能。
根据指定js代码是否重复执行分为两种定时器：延时定时器和间隔定时器。

延时定时器:setTimeout

利用JavaScript内置api setTimeout 来实现在指定一段时间之后执行一次指定的JavaScript代码。js代码执行后定时器就结束了。

setTimeout(function(){
    延时执行的js代码
    },延时时间);
例子：2秒后输出starnight
setTimeout(function(){
    console.log('starnight');
    },2000);

延时时间以毫秒为单位。1000毫秒=1秒。
利用内置api clearTimeout来终止定时器的执行。
语法

clearTimeout(定时器的标识符);
例子：暂停还未执行的定时器
//timer保存了该定时器的标识符
var timer = setTimeout(function(){
    console.log('starnight');
    },2000);
//暂停定时器
clearTimeout(timer);

定时器的标识符指的是定时器的id，表示要暂停哪个定时器，定时器的标识符可以通过setTimeout的返回值来得到。
clearTimeout是定时器执行之前使用，如果定时器执行后，clearTimeout是无效的。

间隔定时器:setInterval

能够实现每隔一段时间都会执行一次指定的代码。即如果不暂停，间隔定时器会一直执行下去。
语法

setInterval(function(){
    每隔一段时间要执行的js代码
    },间隔时间);
例子:每隔2s输出一次starnight
setInterval(function(){
    console.log('starnight')
    },2000);

间隔时间以毫秒为单位。1000毫秒=1秒
clearInterval:用于停止间隔定时器

clearInterval(间隔定时器的标识符);

例子
var timer = setInterval(function(){
    console.log('straight')
    },2000);
//暂停
clearInterval(timer);

延时定时器和间隔定时器的区别

延时定时器是在一定时间后只执行一次，执行后就结束了。间隔定时器是每隔一段时间之后都会执行一次。
延时定时器使用clearTimeout来停止，间隔定时器使用clearInterval来停止。