JS BOM对象的介绍与应用
BOM对象的介绍
JS的三大组成部分：
ECMAScript：JS的规范
DOM:DOM是一套操作HTML标签的API（接口/方法/属性）
BOM：是一套操作浏览器的API（接口/方法/属性）全称Browser Object Model 浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
常见的BOM对象：
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Screen：代表用户的屏幕信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
document ：文档对象
window对象的介绍与使用
window对象:浏览器窗口
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
特点：
1.对于全局变量或者全局方法，在取值或者调用时，可以省略window
var a=12;
console.log(a);
console.log(window.a);
console.log(window);
console.log(window.a==a);//true
//alert(123);//window.alert(123);
2.window对象是js中的顶级对象（所有的全局变量 全局函数 包括document 都是window属性）
console.log(document.body);
console.log(window.document.body);
3.window对象有一个默认的属性name，而且name的值只能是字符串
console.log(age);//报错 因为没有定义
console.log(name);
//window对象有一个默认的属性name，而且name的值只能是字符串
window.name=10;
console.log(name);
name=[12,34,25];
console.log(name);
4.top属性是只读性质的 无法修改,返回最顶层的父窗口。
console.log(top);
var top="123";
console.log(top);
top 返回最顶层的父窗口。
语法
window.top
window对象中的两个方法
打开窗口：open
关闭窗口：close
打开窗口
语法：window.open()
参数：
@param url ：网址，要载入窗体的URL
@param name：新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开
两个值：
1._self 在本页面直接打开
2._blank 在新的标签页打开（此为默认值）
@param featrues：特征 设置新窗口的大小位置等特征，字符串组成，字符串中每个特性使用逗号分隔
@param replace：可选的布尔值，规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目
还是替换浏览历史中的当前条目，就是说明新载入的页面是否替换当前载入的页面，此参数通常不用指定
true：URL替换浏览历史中的当前条目。
false：URL在浏览历史中创建新的条目。
关闭窗口
语法：window.close()
是想关闭哪个窗口，就使用哪个窗口去调用close方法
var myWindow;
document.getElementById("open").onclick=function(){
myWindow = window.open("http://www.baidu.com","_self","left=100px,top=100px,width=200px,height=200px");
}
document.getElementById("close").onclick=function(){
myWindow.close();
}
window里的三个事件
script的内联写法如果写在head里面，就无法获取dom元素,因为js代码从上到下执行，解释的时候 body还没有被解析，如果要在任意位置获取就可以使用到这三个事件，分别是从浏览器打开到关闭的三个时刻。
1.onload：事件会在页面或图像加载完成后立即发生。
onload 通常用于 body元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
作用：可以在页面任意位置获取到dom元素
为什么使用 window.onload()
JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
window.οnlοad=function(){SomeJavaScriptCode};
window.onload=function(){
alert("页面加载完毕")
}
2.onbeforeunload：在页面即将要关闭的前一时刻
作用：挽留用户，onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。
该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意： 如果你没有在 body 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息。
在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。
window.onbeforeunload=function(){
console.log("页面即将关闭");
return "您确定离开吗？"
}
恶意程序：关闭页面时 人为写一个死循环 无限打开新的窗口
window.onbeforeunload=function(){
while(true){
window.open()
}
}
3.onunload：页面正在关闭 无法做任何事
onunload 事件在用户退出页面时发生。
onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)
window.οnunlοad=function(){SomeJavaScriptCode};
window.onunload=function(){
alert("页面正在关闭");
}
History的介绍与使用
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
History 对象属性
length 返回历史列表中的网址数
语法：history.length
document.write("历史列表中URL的数量： " + history.length);
History 对象方法
back():上一步
forward():下一步
如果是新打开的页面，没有发生过跳转，那么 forward是无效的
go() ：加载 history 列表中的某个具体页面
语法：history.go(number|URL)
//index.html
<a href="back.html">跳转</a>
<button id="forward">下一步</button>
console.log(history);
document.getElementById("forward").onclick=function(){
history.forward();
}
//back.html
<button id="back">上一步</button>
document.getElementById("back").onclick=function(){
history.back();
}
点击返回前两个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
<script>
function goBack(){
window.history.go(-2)
}
</script>
</head>
<body>
<input type="button" value="后退2页" onclick="goBack()">
<p>注意,点击“后退2页”按钮将不会导致任何行动,因为以前的历史列表中没有URL。</p>
</body>
</html>
Location的介绍与使用
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window
这个前缀。
url：全球统一资源定位符
http//www.baidu.com/ 路径/参数
window.location.href; //获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; // 设置当前地址栏的地址
window.location.reload(); //刷新
window.location.reload(true); //强制刷新
Location属性：
protocol:协议名 http/https
console.log(location.protocol);
host：hostname(主机名 ip)+(port)端口号
console.log(location.host);
console.log(location.hostname);
path：路径
hash：#锚点定位
console.log(location.hash);
search:返回一个URL的查询部分
console.log(location.search);
Location 对象方法
assign()：载入一个新的文档
document.getElementById("assign").onclick=function(){
//跳转网页：在浏览器的历史记录中产生了一条新的浏览记录
location.assign("http://www.baidu.com")
}
replace() ：用新的文档替换当前文档
document.getElementById("replace").onclick=function(){
//替换网页：不可回退
location.replace("http://www.baidu.com")
}
reload()：重新载入当前文档
document.getElementById("reload").onclick=function(){
location.reload()
}
Navigator的介绍与使用（获取用户当前浏览器信息）
Navigator代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
用Navigator判断浏览器的封装
console.log(window.navigator);
if(navigator.userAgent.indexOf("Chrome")!=-1){
alert("谷歌浏览器");
}else if(navigator.userAgent.indexOf("Firefox")!=-1){
alert("火狐浏览器");
}else{
alert("其他浏览器");
}
console.log(screen);
