JavaScript学习笔记之BOM篇，认识几种常见的浏览器对象

BOM（Browser Object Document）即浏览器对象模型，顾名思义就是为了控制浏览器的行为而出现的接口。浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。而BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要location.href = "http://www.xxxx.com";这个 location 就是 BOM 里的一个对象。

BOM提供了许多独立于内容而与浏览器窗口进行交互的对象，包括 Window、Navigator、Screen 、History、Location、弹出框、定时器等等，其核心对象是Window。而Window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

下面为大家介绍一下这几种常见的浏览器对象，以及他们的属性和方法。

window对象

Window 对象是 JavaScript 层级中的顶层对象，代表一个浏览器窗口或一个框架。Window 对象会在 < body> 或 < frameset> 每次出现时被自动创建。

属性和方法	描述
closed	返回窗口是否已被关闭。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
status	设置窗口状态栏的文本。
self	返回对当前窗口的引用。等价于 Window 属性。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
close()	关闭窗口
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。

window监听：浏览器窗口大小的改变对页面产生的影响。

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: violet;
    }
</style>
<script>
    window.addEventListener('load', function () {
        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>
<div></div>

注意：只要窗口大小发生变化，就会触发这个事件，我们经常利用这个事件完成响应式布局。

Navigator对象

navigator`对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。

属性	描述
appCodeName	获取浏览器代码名
appName	获取浏览器步伐名
appMinorVersion	获取浏览器补钉版本
cpuClass	获取cpu类型
platform	获取操作体系类型
appVersion	获取浏览器版本(包括体系版本)
systemLanguage	获取客户体系语言
onLine	获取用户否在线的信息

Screen对象

属性	描述
width	获取屏幕宽度
height	获取屏幕高度
colorDepth	获取屏幕颜色深度
availWidth	获取可用宽度(除去任务栏的宽度)
availHeight	获取可用高度(除去任务栏的高度)

document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)

History对象

属性和方法	描述
history.length	返回历史列表中的网址数 注意：IE和Opera从0开始，而Firefox、Chrome和Safari从1开始。
history.back()	在浏览历史里后退一步
history.forward()	在浏览历史里前进一步
history.go(i)	i>0表示向前跳转，i<0表示向后跳转

<a href="https://www.baidu.com">百度一下</a>
<button onclick="prew()">上一页</button>
<button onclick="next()">下一页</button>
<button onclick="info()">获取url</button>
<script>
    function prew(){
        window.history.back();
    }
    function next(){
        window.history.go(1);
    }
    function info() {
        console.log(window.location);
    }
</script>

Location对象

window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为Location属性返回的是一个对象，所以我们将这个属性也称为对象。

属性和方法	描述
location.href	获取或者设置整个URL
location.portocol	返回URL中使用的协议
location.host	返回服务器名称和端口号
location.hostname	返回服务器名称
location.port	返回端口号（如果没有，返回空字符串）
location.pathname	返回路径
location.search	返回参数（查询字符串）
location,hash	如果URL包含#，返回该符号之后的内容
locatio.assign()	跳转页面(也称为重定向页面)
location.replace()	替换当前页面（因为不记录历史，所以不能后退页面）
location.reload()	重新加载页面，相当于刷新按钮

<button class="assign">跳转页面</button>
<button class="replace">替换页面</button>
<button class="reload">刷新</button>
<script>
    document.querySelector('.assign').addEventListener('click',function(){
        // 记录浏览历史，可以实现后退功能
        location.assign('http:www.itcast.cn');
    });
    document.querySelector('.replace').addEventListener('click',function(){
        // 不记录浏览历史，不能后退
        location.replace('http:www.itcast.cn')
    });
    document.querySelector('.reload').addEventListener('click',function(){
        location.reload()
    });
</script>

弹出框

方法	描述
alert(“message”)	弹出一个具有OK按钮的系统消息框，显示指定的文本。
confirm(“Are you sure?”)	弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值。
prompt(“What’s your name?”, “Default”)	提示用户输入信息，将文本框中的值作为函数值返回。

定时器

setTimeout（）

setTimeout() 我们称之为回调函数，普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了之后才去调用这个函数，因此称为回调函数。简单理解：回调，就是回头调用的意思，上一件事干完，再回头调用这个函数，比如element.οnclick=function(){}和 element.addEventlistener(‘click’，function(){} )里面的函数都是回调函数。语法规格为：setTimeout（调用函数，延迟时间）。

setTimeout(function(){
	console.log('时间到了');
},2000);
function callback() {
	console.log('时间到了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

<script>
    var flag = setTimeout(function(){
        console.log(new Date().getTime());
    },3000)
    document.querySelector("#clear_timeout").onclick = function(){
        clearTimeout(flag);
    }
</script>
<button id="clear_timeout">取消超时调用</button>

setInterval（）

<script>
    var index = setInterval(() => {
        console.log(new Date().getTime());
    }, 2000);
    console.log("index:",index)
    document.querySelector("#clear_interval").onclick = function(){
        clearInterval(index);
        console.log("取消成功");
    }
    }
</script>
<button id="clear_interval">取消间歇调用</button>

拓展1：使用超时调用来模拟间歇调用。

var num=0;
var max=10;
function incrementNum(){
    num++;
    if(num<max){
        alert(num);
        setTimeout(incrementNum,500);
    }else{
        alert("Done"+num);
    }
}
setTimeout(incrementNum,500);

拓展2：设计一个定时发送按钮，要求按钮中提示剩余时间。

<button>发送</button>
<script>
    var btn = document.querySelector('button');
    var time = 3; // 定义剩下的秒数
    btn.addEventListener('click', function () {
        btn.disabled = true;
        var timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器并且复原按钮
                clearInterval(timer);
                btn.disabled = false;
                //修改按钮中的内容
                btn.innerHTML = '发送';
                time = 3; 
            } else {
                btn.innerHTML = '还剩' + time + '秒'
                time--;
            }
        }, 1000)
    })
</script>