JavaScript --------WebS APIs学习之BOM浏览器对象模型

BOM

           BOM即浏览器对象模型 ，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

           1 . BOM由一系列相关对象构成，并且每个对象都提供了很多方法与属性

           2 . BOM缺乏标准，javaScript 语法的标准化组织是ECMA 。 DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。（兼容性较差）。

对比DOM和BOM

                     

BOM的构成

              

       window对象是浏览器的顶级对象，它具有双重角色

       1.它是JS访问浏览器窗口的一个接口

       2.它是全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

          在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（），prompt（）等；

         window下的一个特殊属性window.name 

一 ：window对象的常见事件

 1.窗口加载事件

             ①

                        

               window.onload 是窗口（页面）加载事件，当文档内容完全加载完成，触发该事件（包括图像，脚本文件，CSS文件                     等），就是调用的处理函数。

               注意：1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行                                处理函数。

                          2.window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准

                          3.如果使用addEventListener则没有限制。

             ②

                          

                DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，flash等等（ie9以上才行）

                如果页面的图片很多的话，从用户访问onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较适用。

2.调整窗口大小事件

                      

              window.onresize 是调整窗口的大小加载事件，当触发时就调用处理里面的函数

              注意：

                        1.只要窗口大小发生像素变化，就会触发这个事件

                        2. 可利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。

二 ：定时器

            一  setTimeout（）

                

                setTimeout()方法用于设置一个定时器   ，该定时器在定时器到期后执行调用函数

                注意：setTimeout（）这个调用函数也称为回调函数callback。

                                 1.普通函数是按照代码顺序直接调用

                                  2.回调函数需要等待时间，时间到了才去调用这个函数。

案例：打开网站后 ，广告在5s后关闭

    <div>
        <img src="1.png" alt="">
    </div>
     <script>
        var img = document.querySelector('img');
         setTimeout(function(){
            img.style.display = 'none';
        } , 5000)
    </script> 

           停止 setTimeout（）

                 

                clearTimeout（）方法取消了先前通过调用setTimeout（）建立的定时器。

                注意：1.window可以省略

                           2.里面的参数就是定时器的标识符

二 setInterval ()定时器

                

setInterval()方法调用一个函数，每隔这个时间，就去调用一次回调的函数

案例：做一个倒计时

                                    

js代码
<script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var stopTime = +new Date('2020-5-1 18:00:00');//输入截止的时间
        countTime();//先调用函数，防止刷新页面时1s的延迟
        setInterval(countTime,1000);
        function countTime (){
            var nowTime = +new Date();//获得现在的毫秒数
            var times = (stopTime - nowTime) /1000 ;// 用截止时间的毫秒数 - 获得时间的毫秒数  / 1000 = 相差的秒数
            var d = parseInt(times / 60 / 60 /24 ) //天数
            day.innerHTML = d ;
            var h = parseInt(times / 60 /60 % 24 ) //小时
            h = h < 10 ? '0' + h : h ;
            hour.innerHTML = h ;
            var m = parseInt(times / 60 %60) //分钟
            m = m < 10 ? '0' + m : m ;
            minute.innerHTML = m ;
            var s = parseInt(times  %60 ) //秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s ;

        }

    </script>

              停止setInterval()定时器

                          

                         clearInterval()方法取消了先前通过调用setInterval()建立的定时器

                       注意：1.window可以省略

                                  2.里面的参数就是定时器的标识符

三 ：JS执行机制

 js是单线程

           JavaScript语言的一大特点就是单线程，即 同一时间只能做一件事。

           JavaScript为什么是单线程： 因为JavaScript 是为处理页面中用户的交互，以及DOm而诞生的。比如：我们许个DOM元素进行添加和删除操作，不能同时进行。应先添加，之后再删。

          单线程导致的问题： 如果JS执行时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

 解决单线程导致的问题：同步和异步

          同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的

          异步：同时进行多个任务

          区别：  这条流水线上各个流程的执行顺序不同

同步任务和异步任务

同步任务 ：

        同步任务都在主线程上执行，形成一个执行栈。

异步任务：

       js的异步任务是通过回调函数实现的。

      一般而言，异步任务有以下三种类型：

                        1.普通事件，如click ，resize 等

                        2.资源加载，如load ， error等

                        3.定时器 ，包括setInterval  ,setTimeout 等

执行机制：   

           1.先执行执行栈中的同步任务

            2.异步任务（回调函数）放入任务队列中

            3.当执行栈中的所有同步任务执行完毕，系统依次序读取任务列队中的异步任务。异步任务结束等待状态，进入执行栈，开始执行。

四 location对象

              location对象 ： window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用来解析URL，因为        这个属性返回的是一个对象，所以称为location对象。

URL

             URL : 统一资源定位符是互联网上标准的资源地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么使用它。

            url一般语法格式：

                              

                              

location对象的属性

                 

重点：herf  和 search 

案例：将 login 页面的用户名字 传递给 index 页面

login 页面代码：

 <form action="index.html"> <!--表单域 -->
      用户名：<input type="text" name="uname">  <!--必须要有name 才能提交-->
      <input type="submit" value="登陆">
</form>

index页面代码：

<div></div>
<script>
   var div = document.querySelector('div');
   console.log(location.search); //得到的是 ？uname = andy
   // 先去？  substr ('起始位置'，截取几个字符)
   var chuanDi = location.search.substr(1);
   console.log(location.search.substr(1));
   //利用 = 把字符串分割成数组 split（'='）
   var arr = chuanDi.split('=');
   console.log(arr);
   div.innerHTML = arr[1] + '欢迎您';
</script>

location对象方法

location方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面） 记录浏览历史 可后退
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload	重新加载页面，相当于刷新按钮或者f5 如果参数为true 强行刷新ctrl + f5

五 navigator 对象

          navigator对象包含有关浏览器的信息，他有很多属性，最常用的是userAgent，该属性可以返回 由客户机发送服务器的user-agent 头部的值 。

       判断用户用哪个终端打开页面，实现跳转的代码

                   

六 history 对象

     history对象主作用 ：与浏览器历史记录进行交互，该对象包括用户（在浏览器窗口中），访问过的URL