第二节 BOM

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

1.BOM的介绍

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

BOM:Browser Object Model,浏览器对象模型。
BOM的结构图：

由上图可知：
window对象是bom的顶层对象，所有对象都是通过它延伸出来的，也可以成为window的子对象
dom是bom的一部分

window对象：

• window对象是JavaScript中的顶级对象。
• 全局变量、自定义函数也是window对象的属性和方法
• window对象下的属性和方法调用时，可以省略window

1.window对象的方法—屏幕弹窗

语法:window.alert()
语法:window.confirm("msg")  
语法:window.prompt("msg")  //提示

1.1.1window.alert()

var btn=window.alert(1)

1.1.2window.prompt(“msg”)

   var res=window.prompt("请输入你的名字")
   console.log(res)

1.1.3window.confirm(“msg”)

var isDelete= window.confirm("你确定删除吗");
    if(isDelete){
        //parentNode  -->亲爸
         btn.parentNode.style.display="none";
     }

1.2.window对象的方法—定时器

1.2.1setTimeout—延时调用

<script>
  //setTimeout  超时调用 间隔一段时间，执行函数，且只执行一次
   console.log(1)
   setTimeout(function(){
      console.log("a")
   },1000)
   console.log(2); 
  //输出结果1 2 a
</script>

1.2.2setInterval—间隔调用

<script>
  //间歇调用  间隔一段时间，执行函数
  setInterval(function(){
    console.log("b")
  },3000)
</script>

例子

<script>
    /* setInterval
    递归  在函数中调用函数自身 */
    function go(){
       setTimeout(function(){
           console.log("hello world")
           go()
        },1000)   
        }
         go()
</script>

//每秒输出一个数字  0-3  到3的时侯结束输出
<script>
  var a=0;
  function go(){
    setTimeout(function(){
      console.log(a);
      a++;
      if(a<=3){
        go();
      }
    },1000)
  }
  go(); 
</script>

1.2.3清除定时器

clearInterval()

<button id="btn">btn</button>
<script>
  var btn=document.getElementById("btn");
  var timer=setInterval(function(){
    console.log("a")
  },3000)
  //清除定时器  clearInterval()
  console.log(timer)
  btn.onclick=function(){
    clearInterval(timer)
  }
</script>

1.3.window.open()—打开新的浏览器页面

<!-- 打开新的浏览器页面 -->
    <button id="btn">打开http://www.baidu.com</button>
    <script>
        btn.onclick=function(){
            window.open('http://www.baidu.com')
        }
    </script>

2.location对象

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

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

3.history对象

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

例子

1.返回历史记录的前一个页面 index.html

<a href="detail.html">detail</a>
    <button id="btn">返回detail页面</button>
    <script>
        var  btn=document.getElementById("btn");
        btn.onclick=function(){
            /* 返回历史记录的前一个页面 */
            history.forward()
        }
    </script>

2.回到历史记录的上一个页面 detail.html

<button id="btn">跳转到index.html</button>
    <script>
        var btn =document.getElementById("btn");
        btn.onclick=function(){
            history.back()
        }
    </script>

4.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"
        }

5.screen对象

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