js BOM对象

js BOM对象

• BOM对象是什么？

• BOM(Brower Object Model) 浏览器对象模型

• BOM对象的组成
  

1.Window对象

window对象代表一个是浏览器中的一个窗口（页面）
全局变量会作为window对象的属性，全局函数会作为window对象的属性

//window 全局
    var a=3;//全局变量
    function input(){//函数
        var a=10;//局部变量
        console.log(a);//10
        console.log(window.a)//3
    }
    window.input();//window.函数名调用函数

注意：下面的函数可以省略window.

 //对话框
        function dialogBox() {//函数
            return alert('真的累！');//返回值 undefined
         // return confirm('你真的累吗')//返回值 确定：true 取消：false
        //  return prompt('你现在累不累');//返回值 确定：返回输入的字符串 取消null
        }
        console.log(dialogBox());//调用函数 返回值

上面三个对话框的特点
模态，触发后不可点击页面别的地方
触发后会停止JS运行
无法改变样式，其样式会随着浏览器的改变而改变

• 延时函数

var 变量名=setTimeout(funtion(){},时间)
（var 变量名可省略）
功能：延时一定的时间后执行代码，执行一次
参数：要做的事情，时间
返回值:数值id
时间的值为毫秒

//setTimeout(要做的事情，时间) 延时函数
        //例如:三秒钟之后，在控制台输出hello world
        console.log('开始页面')//控制台输出‘开始页面’
        setTimeout(function () {
            console.log('好点了！！！');//3秒后输出‘好点了’
        }, 3000)
        console.log('结束页面')//控制台输出‘结束页面’

下面让我们来思考一个问题 代码如下

 console.log('新的一天');
        setTimeout(function () {
            console.log('我先执行！')
        },0)
        console.log('不对，我先执行！');   

输出的顺序是什么？
结果如下

为什么会这样呢？我的时间不是都已经设为0了吗？要解释这个问题，我们就要先了解下setTimeout的执行原理是什么
setTimeout的执行原理大致就是执行到setTimeout的时候，浏览器会先将setTimeout放到一个队列中，然后执行下面的语句，等都执行完之后，再将setTimeout拿出来执行，所以即使参数为0，但他依然会最后执行
clearTimeout（id）的功能为取消setTimeout

console.log('新的一天');
        var id=setTimeout(function () {
            console.log('我先执行！')
        },0)
        clearTimeout(id);
        console.log('不对，我先执行！');

• 间隔函数

var 变量名=setInterval(funtion(){},时间)
（var 变量名可省略）
功能：间隔一定的时间后执行代码 一直执行
参数：要做的事情，时间
返回值:数值id
时间的值为毫秒

//setInterval
        setInterval(function(){
         console.log('开心?');
        },1000)

clearInterval（id）的功能为取消setInterval

 //clearInterval
        console.log('取消setInterval')
        var a=setInterval(function () {
            console.log('开心?');
        }, 1000)
        clearInterval(a);

• window常用事件

window.onload
功能:当所有的HTML元素和js代码加载完之后，执行window.onload（）事件

xxx.onclick
功能：点击事件，当有元素被点击时，可以调用onclick（）事件

window.onscroll
功能:当页面滚动的时候就会调用window.onscroll（）事件

• 窗口大小

2.Navigator对象

userAgent 浏览器的信息
console.log(navigator.userAgent);

3.Screen对象

Screen对象表示用户的屏幕相关信息

下面看例子
https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/

• location对象方法

5.History对象