BOM对象（浏览器对象模型）

BOM简单来说就是提供独立于浏览器内容和浏览器窗口进行的交互对象，也就是说BOM负责和浏览器打交道。
通过BOM我们可以知道与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象（核心对象），可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

window对象

获取浏览器窗口坐标：screenX、screenY,这里存在兼容问题，在老版的火狐里，只能通过screenX、screenY来获取坐标，其他浏览器还可以通过screenLeft、screenTop获取坐标)

//html:
  <button id="getLocation" type="button" name="button">获取窗口位置</button>
//JS:
var getLocation = document.getElementById('getLocation');
        getLocation.onclick = function () {
            console.log(window.screenX);
            console.log(window.screenY);
        }

获取浏览器窗口的宽高：innerWidth、innerHeight(宽高并不是完整的浏览器窗口，而是用来渲染html页面的区域尺寸)

//html:
 <button id='getSize' type="button" name="button">获取浏览器的宽高</button>
//JS:
var getSize = document.getElementById('getSize');
        getSize.onclick = function () {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        }

通过js打开页面的方法：window.open();
第一个参数：设置打开的url链接（必填项）
第二个参数：设置在那个窗口、选项卡下打开新链接（可选）
第三个参数：设置打开的新窗口的坐标、尺寸、提供的功能等信息（可选）

//html:
<button id='open' type="button" name="button">打开百度</button>
//JS:
var openTag = document.getElementById('open');
        openTag.onclick = function () {
            window.open('http://www.baidu.com', '', 'width=600,height=300,left=100,top=100,resizable=no');
        }

警告框：给用户以弹窗的形式提示警告信息，用户关闭窗口后，我们获取不到任何用户操作产生的数据

//js:
alert('hello')

判断框：给用户以弹窗的形式提示警告信息后，用户可以同意或不同意该信息，我们能获取到用户操作产生的数据：确认：true;取消：false

//JS:
var bol = confirm('是否同意以上需求？')
console.log(bol);

信息收集框：以弹框的形式，让用户输入一段简单的文本，我们可以获取到这段输入的文本信息。如果用户点击确定按钮，则返回用户输入的数据，如果用户没有输入直接点击确定，则获取到的是空字符串,如果用户点击取消（关闭）按钮，则返回null,函数需要两个参数，第一个表示要输入文本的提示信息，第二个表示默认情况下的文本.

var str = prompt('请输入姓名','小淡同学');
console.log(str);

定时器
定时器：让某段代码按照定时器设定的时间执行
分类：循环定时器、延时定时器
循环定时器：相当于for循环，可以让某段代码重复执行，区别是：可以设置两次执行的间隔时间
延时定时器：让某段代码推迟一段时间再执行

JS:
  // setInterval():开启循环定时器
            // 第一个参数是函数类型：把需要重复执行的代码封装在这个函数中，一般是匿名函数
            // 第二个参数是number类型：以毫秒为单位的时间
            // var timer = setInterval(function () {
            //     alert('hello')
            // }, 3000);
            // console.log(timer);



            // clearInterval(): 取消循环定时器
            // 参数是开启定时器时保存的定时器id
            // clearInterval(timer)

            // function stop() {
            //     // clearInterval(timer);
            // }


            // 延时定时器
            // setTimeout()
            // 第一个参数是函数类型：需要延迟执行的代码
            // 第二个参数是number类型：以毫秒为单位的时间
            // var timer = setTimeout(function () {
            //     alert('三秒的弹出');
            // },3000);

            // 清理延时定时器的方法：clearTimeout()
            // 参数是延时定时器的id
            // clearTimeout(timer);

小结：属于window对象下的方法、属性，在取值、调用时，一般可以省略window，但是如果需要区分属性、方法的归属，则要把window对象加上

location对象

location对象中的属性、方法操作的是浏览器的url区域

//html:
<button onclick='action()' type="button" name="button">点击</button>
//js:
function action() {
                console.log(window.location.hash);
//关于window.location.hash用法，
//在处理根据首字母A-Z查询时用锚点链接实现时，
//可以一下关于window.location.hash用法
//借阅博客https://www.cnblogs.com/nifengs/p/5104763.html
                console.log(window.location.port);//返回web端口
                console.log(window.location.hostname);//返回主机域名
                console.log(window.location.href);
                console.log(window.location.toString());
                console.log(window.location.pathname);//返回当前页面路径和文件名

                // window.location.assign('http://www.baidu.com')

                window.location.href = 'http://www.baidu.com'

                // 页面刷新操作
                // location.reload():不穿参数，是从浏览器缓存中把页面再加载一边，传参true是从服务器中把页面再请求一遍
                window.location.reload(true)
            }

screen对象

screen对象：设备的屏幕对象，常通过该对象下的属性和方法获取屏幕尺寸信息

screen.availHeight\screen.availWidth: 获取的是屏幕的总高、宽减去系统组件所占的高度、宽度（浏览器可以占用的宽高）

小结：一般用在移动端开发时获取移动设备的屏幕尺寸信息，因为移动设备屏幕比例种类多，必要情况下需要手动计算屏幕尺寸，安排元素布局位置

history对象

history对象下的属性和方法常用与操作页面在历史记录中的各个页面间的跳转操作。

history.go()在历史记录中跳转，参数为一个数值型的数，表示向前或向后跳转的页面数。
参数为-1：后退一页。
参数为1：前进一页
参数为2：前进两页。

history.back():向后退一页。
在拥有根据A-Z查询的排序表页面时，如果A-Z查询时使用锚点链接实现的话，history.back返回的不是上一级页面，而是上一级锚点。

history.forward()：向前进一页

例子：

//domo1.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function backPage() {
                history.go(-1);
            }

            function forwordPage() {
                history.go(1);
            }
        </script>
    </head>
    <body>
        I`am demo one
        <button onclick='backPage()' type="button" name="button"></button>

        <a href="./demo2.html">click to demo2</a>

        <button onclick='forwordPage()' type="button" name="button">click to demo2</button>
    </body>
</html>


//domo2.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function backPage() {
                history.go(-2);
            }
        </script>
    </head>
    <body>

        I`am demo two;

        <button onclick='backPage()' type="button" name="button"></button>

    </body>
</html>

navigator对象

navigator对象识别客户端浏览器的事实标准
常用属性：
appCodeName:浏览器代码名的字符串
appName:官方浏览器名的字符串
appVersion:浏览器版本信息
systemLanguage:操作系统的语音
Language浏览器主语言
onLine是否连接了因特网
cookieEnabled是否启用cookie
userAgent用户代理头