第五章 BOM

BOM(browser object model)浏览器对象模型

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。

var age =15;
//声明一个全局变量
window.name="chengchao";
//相当于var name = "chengchao"

1 window对象的方法

1-1 alert

1-2 window.confirm( “msg”)

功能：显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;

var value = window.confirm("去不去")
console.log(value)  // true / false

1-3 window.prompt(“text”,”defaultText”)

参数说明
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
           点确定按钮,返回输入的文本

var temp = window.prompt("请输入","hello world")
console.log(temp);

2 history 对象

history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能:回到历史记录的上一步
相当于是用了history.go(-1)
//-1表示前一步,-2前两部
语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()
语法：history.go(-n)
功能:回到历史记录的前n部
语法:history.go(n)
功能:回到历史记录的后n步

3 screen 对象

screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight
// 获取屏幕的宽度
var screenWidth = window.screen.availWidth;
console.log(screenWidth);
// 获取屏幕的可视区
var viewWidth = document.body.clientWidth;
console.log(viewWidth);

4 定时器

4-1 setTimeout 超时调用

特点：间歇一段时间，只会触发一次

setTimeout(function(){
  console.log("hello");
},2000)

//使用递归 让超时调用实现间歇调用
        function show(){
            setTimeout(function(){
                console.log(1);
                show();
            },1000)
        }
        show()

4-2 setInterval 间歇调用

特点：每间隔一段时间就会触发

setInterval(function(){
  console.log("world");
},2000)

4-2-1 清除定时器

<button id="btn">停止定时器</button>
    <script>
        var btn = document.getElementById("btn")
        var timer = setInterval(function(){
            console.log(2);
        },1000)
        btn.onclick = function(){
            clearInterval(timer)
        }
    </script>

5 navigator对象

1.掌握Navigator对象的userAgent属性
2.掌握如何判断浏览器的类型
3.掌握如何判断设备的终端是移动还是PC
UserAgent:用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。
//检测浏览器类型
        if(/Android|iphone|webOS/i.test(navigator.userAgent)){
            location.href="mobile.html"
        }else if(/ipad/i.test(navigator.userAgent)){
            location.href="pad.html"
        }