3.BOM

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

3-1window

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

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

3-1-1Window对象的方法

A.window.alert()
功能:显示一个带有指定消息和包含确定和取消按钮的对话框

<script>
        var t=window.confirm("要不要");
        console.log(t);
</script>

B.window.confirm(“msg”)
功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;

<ul>
        <li>html <button>删除</button></li>
        <li>js <button>删除</button></li>
        <li>vue<button>删除</button></li>
    </ul>
    <script>
        var btns=document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                var temp=window.confirm("确定吗");
                if(temp){
                    this.parentNode.style.display="none";
                }
            }
        }
    </script>

C.window.prompt(“text,defaultText”)

参数说明:
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
     点确定按钮,返回输入的文本
eg:
var result=window.prompt("请输入你的星座","狮子座");
console.log(result);

<script>
        var test=window.prompt("请输入","hello");
        console.log(test);
    </script>

D.window对象方法——定时器

1.超时调用-setTimeout()间隔一段时间只会触发一次

<script>
        // 超时调用
        //间隔一段时间只会触发一次
        setTimeout(function(){
            console.log("hello")
        },2000)
        </script>

setTimeout() 持续触发事件的方法(递归）

 function show(){
            setTimeout(function(){
                console.log("123");
                show();
            },1000)
        }
        show();

2.间歇调用-setInterval()每间隔一段时间，就会触发事件

 间歇调用，每间隔一段时间，就会触发事件
        */
        setInterval(function(){
            console.log("world")
        },2000)

3.清除定时clearInterval()

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

3-2location对象

location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。

location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
语法：location.host
功能:返回服务器名称和端口号
语法：location.hostname
功能:返回不带端口号的服务器名称
语法：location.pathname
功能：返回URL中的目录和(或)文件名
语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串

3-3.history对象

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

3-4.screen对象

screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight

例子

<script>
        //获取屏幕的宽度
         var screenWidth=window.screen.availWidth;
         console.log(screenWidth);
         //获取屏幕可视区
         var viewWidth=document.body.clientWidth;
         console.log(viewWidth);
    </script>

3-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"
        }

例子

//01.html
<p>01</p>
    <a href="02.html">02.html</a>

//02.html
<p>02</p>
    <button id="btn">click me</button>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            history.back();
        }
    </script>