JavaScriptBOMWeb APIs 第六天 BOM- 操作浏览器依托 BOM 对象实现对历史、地址、浏览器信息

Web APIs 第六天

BOM- 操作浏览器

依托 BOM 对象实现对历史、地址、浏览器信息的操作或获取
具备利用本地存储实现学生信息表案例的能力

Window对象

BOM（浏览器对象模型）
定时器-延时函数
JS执行机制
location对象
navigator对象
histroy对象

目标：学习 window 对象的常见属性，知道各个 BOM 对象的功能含义

BOM

BOM(Browser Object Model ) 是浏览器对象模型
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

javaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法

setTimeout(回调函数,等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数

let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

案例 5秒钟之后消失的广告

需求：5秒钟之后，广告自动消失

①：设置延时函数

②：隐藏元素

    <div class="box">5秒后广告消失</div>
    <script>
        let box=document.querySelector('.box')
        // let num=0;
          setTimeout(function(){
            //   num++
           
            document.querySelector('.box').style.display ='none'
        },5000)
    </script>

定时器-延时函数

<div class='clock'></div>
<script>
	let clock = document.querySelector('.clock')    
    function myInterval(){
        let d =new Date()
        clock.innerText = d.toLocaleString()
        setTimeout(myInterval,1000)
    }
	myInterval()
</script>

两种定时器对比：

setInterval 的特征是重复执行，首次执行会延时
setTimeout 的特征是延时执行，只执行 1 次
setTimeout 结合递归函数，能模拟 setInterval 重复执行
clearTimeout 清除由 setTimeout 创建的定时任务
- 创建的定时器应该由clearInterval来清除
- 创建的延迟器应该由clrearTimeout来清除

JS 执行机制

JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

search属性获取地址中携带的参数，符号？后面部分

console.log(location.search)

reload 方法用来刷新当前页面，传入参数true 时表示强烈刷新

    <button>跳转到百度</button>
    <script>
        //1使用a 标签 href  




        // hash #/index  学习到了vue阶段就会用到它了 ，获取url上？后面一串字符
        // search  后一个阶段会用到他了
        const button = document.querySelector('button')
        button.addEventListener('click',function(){
            // location.href=location.href
            // location.href='http://www.baidu.com'
            

            // console.log(location.search);
            // reload  实现刷新
            // location.reload(true) //强制刷新
            // location.reload(true)  //强制刷新
            // location.search='http://www.baidu.com'
            // location.hash=11
        })
    </script>xxxxxxxxxx <button    <button>跳转到百度</button>    <script>  
        
        //1使用a 标签 href   
        // hash #/index  学习到了vue阶段就会用到它了 ，获取url上？后面一串字符       
        // search  后一个阶段会用到他了        const button = document.querySelector('button')        					    button.addEventListener('click',function(){           
        // location.href=location.href          
        // location.href='http://www.baidu.com'                        
        // console.log(location.search);         
        // reload  实现刷新         
        // location.reload(true) //强制刷新    
        // location.reload(true)  //强制刷新         
        // location.search='http://www.baidu.com'        
        // location.hash=11        })    </script>js

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

     // 检测 userAgent（浏览器信息）
        !(function () {
            const userAgent = navigator.userAgent
            // 验证是否为Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            // 如果是Android或iPhone，则跳转至移动站点
            if (android || iphone) {
                location.href = 'http://m.itcast.cn'
            }
        })()

histroy对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法：

swiper 插件

html代码`

  <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./assets/b_01.jpg" alt="" /></div>
        <div class="swiper-slide"><img src="./assets/b_02.jpg" alt="" /></div>
        <div class="swiper-slide"><img src="./assets/b_03.jpg" alt="" /></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>

js代码

    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
      const mySwiper = new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项  水平滚动-默认就是水平滚动
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      });
    </script>