前端学习：
欢迎提issues斧正：
JavaScript-BOM
BOM是browser object model的缩写，简称浏览器对象模型。它本身是没有标准的或者还没有哪个组织去标准它，所以，BOM缺乏标准。它提供了很多对象，并且每个对象都提供了很多方法与属性，用于访问浏览器的功能。
window对象
BOM的核心对象是window，它表示浏览器的一个实例，主要用于管理窗口与窗口之间的通讯。window 对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window 对象。F12打开console,输入window,即可看到window的所有属性和方法。太多了，很多是不需要我们去深入了解的。
window 对象的属性
属性 含义closed 当窗口关闭时为真defaultStatus 窗口底部状态栏显示的默认状态消息document 窗口中当前显示的文档对象frames 窗口中的框架对象数组history 保存着窗口最近加载的URLlength 窗口中的框架数location 当前窗口的URLname 窗口名offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新opener 打开当前窗口的窗口parent 指向包含另一个窗口的窗口（由框架使用）screen 显示屏幕相关信息，如高度、宽度（以像素为单位）self 指示当前窗口。status 描述由用户交互导致的状态栏的临时消息top 包含特定窗口的最顶层窗口（由框架使用）window 指示当前窗口，与self 等效
要验证这些属性，直接F12打开console，验证即可。
window 对象的方法
方法 功能alert(text) 创建一个警告对话框，显示一条信息blur() 将焦点从窗口移除clearInterval(interval) 清除之前设置的定时器间隔clearTimeOut(timer) 清除之前设置的超时close() 关闭窗口confirm() 创建一个需要用户确认的对话框focus() 将焦点移至窗口open(url,name,[options]) 打开一个新窗口并返回新window 对象prompt(text,input) 创建一个对话框要求用户输入信息scroll(x,y) 在窗口中滚动到一个像素点的位置moveBy(x,y) 按照给定像素参数移动指定窗口,x,y代表水平位移量和垂直位移量moveTo(x,y) 将窗口移动到指定的指定坐标(x,y)处resizeBy(x,y) 将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小resizeTo(x,y) 将当前窗口改变大小，x、y分别为宽度和高度print() 调出打印对话框find() 调出查找对话框setInterval(func,time) 经过指定时间间执行代码clearInterval("id"); 取消setInterval setTimeout(func,time) 在定时器超过后执行代码clearTimeout("id"); 取消还未执行的setTimeout window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。下面简要介绍几个。
window属性-窗口的位置和大小
窗口的位置，IE、Safari、Opera 和Chrome都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。
console.log(screenLeft); //102, fireFox下输出screenLeft is not definedconsole.log(screenX); //102
兼容：
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;var topY = (typeof screenTop == 'number') ? screenTop : screenY;
窗口页面大小，IE、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性：innerWidth和innerHeight，返回浏览器窗口本身的尺寸；outerWidth 和outerHeight，返回浏览器窗口本身及边框的尺寸。
console.log(innerWidth); //1366 页面宽度console.log(innerHeight); //681 页面高度console.log(outerWidth); //1366 页面长度+边框console.log(outerHeight); //768 页面高度+边框//缩小窗口数据就会有变化
旧的IE版本没有提供当前浏览器窗口尺寸的属性。不过，DOM有提供相关的方法：
document.documentElement.clientWidthdocument.documentElement.clientHeight
当然，这是标准模式下，还要兼容怪异模式：
document.body.clientWidth; //非标准模式使用bodydocument.body.clientHeight;
window方法-系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。
alert()
alert('xzavier warning'); 直接弹出弹框，弹框只有确定和关闭按钮。
一般用于用户交互时做出提示，不过这种方法的用户体验不是很好，现在都流行使用业务需要的用户体验好的弹窗。另外，以前常用于调试代码，但现在基本不用了。因为它很烦，弹一个要关一个。如果调试代码后忘记关掉，还会给用户带来较差的体验。现在都用console，在控制台打印，研发人员可以很方便的看到调试信息，也不用去关闭弹窗之类的，就算一时疏忽忘记删掉调试代码，也不会影响到用户体验。confirm()
confirm('confirm or cancel'); 确定和取消弹框，按确定返回true，按取消或者关闭按钮返回false。
if (confirm('confirm or cancel')) { alert('you confirmed'); } else { alert('you canceled');} prompt()
prompt('please input a number', 0); 输入提示框，带两个参数，一个提示，一个值。按确定返回输入值，不填返回空，按取消或者关闭按钮返回null。
window方法-新建窗口
window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：
1.要加载的URL2.窗口的名称或窗口目标3.一个字符串参数，表示新窗口的长宽等属性值4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。open('https://segmentfault.com/blog/xzavier'); //新建页面并打开open('https://segmentfault.com/blog/xzavier','xzavier'); //新建页面并命名窗口并打开open('https://segmentfault.com/blog/xzavier','_parent'); //在本页窗口打开 target 属性：
blank - 在一个新的未命名的窗口载入文档_self - 在相同的框架或窗口中载入目标文档_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架字符串参数：
属性 值 说明width 数值 新窗口的宽度 ，不能小于100height 数值 新窗口的高度，不能小于100top 数值 新窗口的Y坐标，不能是负值left 数值 新窗口的X坐标，不能是负值location yes/no 是否在浏览器窗口中显示地址栏，不同浏览器默认值不同menubar yes/no 是否在浏览器窗口显示菜单栏，默认为noresizable yes/no 是否可以通过拖动浏览器窗口的边框改变大小，默认为noscrollbars yes/no 如果内容在页面中显示不下，是否允许滚动，默认为nostatus yes/no 是否在浏览器窗口中显示状态栏，默认为notoolbar yes/no 是否在浏览器窗口中显示工具栏，默认为noopen('https://segmentfault.com/blog/xzavier','xzavier','width=600,height=400,top=200,left=400,resizable=yes');//类似一个弹窗弹出一个网页，open有返回值，返回window对象 window方法-setTimeout和setInterval
JavaScript是单线程语言，它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。setTimeout在指定的时间过后执行代码，setInterval是每隔指定的时间就执行一次代码。
setTimeout
接受两个参数：要执行的代码和超时时间（单位：毫秒）
function timer() { console.log("xzavier's timer");}setTimeout(timer, 2000); setTimeout()返回一个数值ID，表示这个超时调用。这个ID是超时调用的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
function timer() { console.log("xzavier's timer");}var xzavier = setTimeout(timer, 2000);clearTimeout(xzavier); //取消超时调用不执行 setInterval
setInterval按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，接受参数：要执行的代码和每次执行之前需要等待的毫秒数
setInterval(function () { console.log('xzavier');}, 2000); 取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
var xzavier = setInterval(function () { console.log('xzavier');}, 1000);clearInterval(xzavier); 一般来说，使用了setInterval就一定要使用clearInterval去清除，所以，使用超时调用来模拟间歇调用是一种最佳模式。因为，使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。
location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息。location对象是window对象的属性，也是document对象的属性。所以window.location和document.location等效。
location 对象的属性
属性 描述的URL内容host 主机名：端口号hostname 主机名href URLpathname 路径名port 端口号protocol 协议部分search 查询字符串hash 如果该部分存在，表示锚点部分
location 对象的方法
方法 功能assign() 跳转到指定页面，与href等效reload() 重载当前URLrepalce() 用新的URL 替换当前页面
F12打开调试器，console下打印window.location即可查看location的属性和方法。
location.reload(); //最有效的重新加载，有可能从缓存加载location.reload(true); //强制加载，从服务器源头重新加载location.assign('https://segmentfault.com/blog/xzavier'); //跳转到指定的URLlocation.replace('https://segmentfault.com/blog/xzavier'); //可以避免产生跳转前的历史记录，跳转后浏览器不能返回上一个页面 navigator对象
navigator对象，其实也是window对象的属性，包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。
console.log(navigator.userAgent); //用户代理头信息，很多时候用于判断浏览器 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36console.log(navigator.appCodeName); //浏览器代码名 Mozilla //appCodeName 属性是一个只读字符串，声明了浏览器的代码名。//在所有以 Netscape 代码为基础的浏览器中，它的值是 "Mozilla"。//为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"。console.log(navigator.appName); //官方浏览器名 Netscape//appName返回所使用浏览器的名称。该属性并不一定能返回正确的浏览器名称。//在基于 Gecko 的浏览器 （例如 Firefox）和基于 WebKit 的浏览器//（例如 Chrome 和 Safari）中，返回的浏览器名称都是 "Netscape". console.log(navigator.appVersion); //浏览器版本信息 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36console.log(navigator.cookieEnabled); //是否启用cookie，返回true/false console.log(navigator.javaEnabled); //是否启用java，返回true/false console.log(navigator.platform); Win32//浏览器所在计算机平台 console.log(navigator.plugins); //安装在浏览器中的插件数组 PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5} history对象
history对象是window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。
history对象有一个length属性，表示history 对象中的记录数。history对象有三个方法。方法 功能back() 前往浏览器历史条目前一个URL，类似后退forward() 前往浏览器历史条目下一个URL，类似前进go(number) 跳转指定历史记录的URL
screen对象
screen对象是window 对象的属性,用于获取屏幕的信息。
属性 描述width 屏幕的宽度 height 屏幕的高度 availWidth 窗口可以使用的屏幕的宽度availHeight 窗口可以使用的屏幕的高度
document对象见：