BOM用法

一、BOM简介

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()

二、window对象

看上面的例子你会发现，name直接封装到了window对象上，了解一下就可以了。

　　所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一

一些常用的Window方法：（在浏览器调试器的console里面输入下面这些属性或者方法，就能看到对应的效果）

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)

// 打开窗体,本页面跳转
window.open("http://www.baidu.com","_self");
 // 打开窗体,新窗口跳转
window.open("http://www.baidu.com","_blank","width=1px,height=1px");

三、弹出框（windows子对象）

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

3.1 警告框

　警告框经常用于确保用户可以得到某些信息。

　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　　语法：

window.alert("你看到了吗？");

3.2 确认框

　确认框用于使用户可以验证或者接受某些信息。

　　　　当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

　　　　如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

var res = window.confirm("111")
console.log(res)

3.3 提示框

提示框经常用于提示用户在进入页面前输入某个值。

　　　　当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

　　　　如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

　　　　语法：

var res = window.prompt("请输入您的银行卡密码:")
console.logv(res,typeof(res))

四、location对象（windows子对象）

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

　　　　常用属性和方法：

location.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload()  //重新加载页面,就是刷新一下页面

五、history对象（windows子对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> history 对象 和 navigator 对象 </title>
</head>
<body>
    <button onclick="func1()">查看history历史对象</button>
    <button onclick="func2()">上一页</button>
    <button onclick="func3()">下一页</button>
    <button onclick="func4()">刷新</button>
    <script>
        function func1(){
            console.log(history)
        }
        
        function func2(){
            history.go(-1)
        }

        function func3(){
            // 跳转第一页
            history.go(1)
            // 跳转到第二页
            history.go(2)
        }

        function func4(){
            history.go(0)
        }

        console.log(navigator) 
        console.log(navigator.platform)  // 判断是pc端还是移动端
        console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据
        


    </script>
    
</body>
</html>

六 navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

console.log(navigator) 
console.log(navigator.platform)  // 判断是pc端还是移动端
console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据

七、定时器

定时器是基于单线程的异步并发操作

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

  window.setInterval(函数,间隔时间(毫秒)) // 定时执行多次任务
  window.setTimeout(函数,间隔时间(毫秒))  // 定时执行一次任务

 // 清除定时器
 window.clearInterval(id号)
 window.clearTimeout(id号)

// 创建一个定时器1
        // var id1 = window.setInterval(func,1000)

        // 创建一个定时器2
        var id2 = window.setTimeout(func,1000)

        var count = 1
        // 执行任务 当前函数可以预加载
        function func(){
            console.log("当前数值为:",count)
            if(count == 10){
                // 杀死定时器1
                // window.clearInterval(id1)
                // 杀死定时器2
                window.clearTimeout(id2)
            }
            count++
        }