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

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

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

1.1.1window.alert()

  1. var btn=window.alert(1)

1.1.2window.prompt(“msg”)

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

1.1.3window.confirm(“msg”)

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

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