定时器

setInterval

语法：setInterval(函数,数字)
函数：每次定时器重新执行的时候，要做的事情（要执行的代码）
数字：当前定时器每隔多长时间重新执行一次，单位是毫秒

setTimeout

语法：setTimeout(函数，数字)
函数：倒计时器执行的时候，要做的事情（要执行的代码）
数字：当前倒计时器延迟多长时间执行（只会执行一次），单位是毫秒

当不传递第二个参数时，或者传递的时0的时候

执行速度会按照最快的速度执行
最快的速度一般为4~20毫秒，最快速度与电脑性能有关
所以在书写定时器或者倒计时器的时候，需要我们指定一个时间，一般不要不写或者给0毫秒



//1. 定时器
setInterval(function(){
     console.log('定时器每次执行的时候，就会被打印一次)
}, 1000)

setInterval(function(){
    console.log('定时器每次执行的时候，就会被打印一次')
})
setInterval(function(){
    console,log('定时器每次执行的时候，就会被打印一次')
})

// 2.倒计时器
setTimeout(function(){
    console.log('倒计时器时间到的时候，会执行一次')
} ,1000)

setTimeout(function(){
    console.log('倒计时时间到的时候，我会执行一次')
},0)

setTimeout(function(){
    console.log('倒计时时间到的时候，我会执行一次')
})

定时器的返回值

意义：表明当前定时器是这个页面的第几个定时器
注意：如果页面的打开方式是利用liverserve启动，那么定时器的ID，会不太一样
作用：能够利用返回值关闭这个定时器

关闭语法1：clearInterval(要关闭的定时器的返回值）
关闭语法2：clearTimeout(要关闭的定时器的返回值）
注意：关闭语法可以混用，所以只要关闭定时器，随便写上边就可以
但是推荐对应的书写，目的是为了让别人一眼看出关闭的时定时器还是倒计时器


//利用返回值 停止定时器
var timerID = setInterval(function(){
    console.log('定时器执行的时候')
},1000)

setTimeout(function(){
    console.log('倒计时执行，停止了上边的定时器')
    clearInterval(timerID)
},5000)

var timerId = setTimeout(function(){
    console.log('3秒钟后我会执行')
},3000)

clearTimeout(timerId)


//查看定时器的返回值
var timerId = setInterval(function(){},1000)
console.log(timerId)
var timeId = setTimeout(function(){},1000)
console.log(timerId)

JS的异步任务

JS是单线程的，同一时间只能做一件事
同步任务：

目前所接触到的内容中，除了两个定时器之外的都是同步任务

异步任务

目前所接触到的内容中，只有两个定时器算是异步任务，将来还会有心得异步任务

JS中代码执行的顺序

代码从上往下执行
先将代码的所有同步任务，全都执行一遍
同步任务执行完毕后，在执行异步任务
如果在代码的中间遇到了异步任务，那么先将异步任务暂存到一个任务队列中，等待所有的同步任务执行完毕后执行


 console.log('1. JS开始执行')
 
 setTimeout(function(){
     console.log('2.一个非常耗时的任务执行完毕')
 })
 
 console.log('3.JS执行完毕')
 
 /*
   同步任务
   1.JS开始执行
   3.JS执行完毕
   
   
   异步任务
   2. 一个非常耗时的任务执行完毕
 */

BOM

BOM：浏览器对象模型（由浏览器赋予我们的能力） BOM其实就是浏览器提供给我们操作浏览器的一个能力

1.获取浏览器的宽高

2.获取浏览器页面卷去的高度

3.通过JS控制页面的跳转

4.获取浏览器页面的信息

5.操作浏览器页面的滚动条

6 获取到浏览器的版本

7.打开浏览器的弹窗

核心：页面中有一个对象叫做window

window是JS内置的一个对象，上述所有的方法都可以利用window内部提供的一些东西解决

window 内的书写的时候可以 window.xxxx xxxx


    prompt('弹出框1: prompt')
    window.prompt('弹出框2: window.prompt')

扩展：

我们所有的全局变量（函数以外的地方声明变量）和全局函数（函数以外的地方声明的函数））

全都存放在 window 对象中

window对象中有一个属性叫做name

所以我们在开发的时候，尽量避免全局变量或者全局函数的名字叫做name

浏览器窗口尺寸与弹出框

打开浏览器提供的弹出框

1 prompt 用户输入框

会有一个返回值, 就是用户输入的内容, 永远是字符串格式

alert 弹出框
confim 用户询问框

会有一个返回值, 如果点确定返回true, 否则返回 false

弹出框会中断(暂停)程序的运行, 直到关闭弹出框

     console.log('JS 开始')
     alert("提示信息1: alert")
     console.log('JS 运行到一半')
     window.alert('提示信息2: window.alert')
     console.log('JS运行完毕')
     
    confirm('您确定删除吗?') 
    var res = window.confirm('您确定删除吗?')
    console.log('用户确定与否: ', res)

浏览器的地址信息

在window 对象中有一个对象location,他的内部存储的就是浏览器地址的信息

浏览器的地址信息

在window中，有一个对象叫做location，他是专门用来存储浏览器地址栏内的信息

location.href

 location.href 专门存储浏览器地址栏内 url 地址的信息
 语法: `var url = window.location.href`
 我们也可以给这个属性赋值, 这样就会跳转到我们复制的地址了
  window.location.href = 'https://www.baidu.com'

location.reload

   
      location.reload 会重新加载页面, 相当于刷新
      注意: 不要写在全局内, 否则浏览器会一直刷新
      window.location.reload()

浏览器的历史记录

window 中有一个对象叫做 history 他专门用来存储历史记录信息

history.back

history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
      注意: 我们需要有上一条记录, 不然就一直在这个页面 不会回退
       window.history.back()

history.forward

history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于 浏览器左上角的 → 按钮
 注意: 前提是我们之前有过回退操作, 不然的话我们现在就是在最后一个页面, 没有下一个
   window.history.forward()

浏览器的版本信息(了解)

  window 中的 navigator 可以获取到浏览器的信息
  window.navigator

浏览器的事件


// 浏览器延迟加载事件

window.onload = function(){
  /**
             *  在以前开发的时候, 我们会将 所有的 JS 代码, 全都放在这个函数中运行
             * 
             *  因为在这个函数中运行的时候, 可以保证页面所有的资源已经加载完毕了, 比如  标签, 图片
            */
            
            console.log('当前函数不需要调用, 会在当前页面的所有资源加载完毕的时候执行')
}


// 浏览器的滚动事件

window.onscroll = function(){
 console.log('当前函数也不需要调用, 会在浏览器发生滚动事件的时候执行')
}

浏览器的滚动距离

  /**
         *  浏览器的滚动距离
         *      注意: 滚动事件发生的时候, 浏览器的位置一致没变, 而是 浏览器内的页面发生了滚动
         * 
         *      document.body.scrollTop
         *        document.documentElement.scrollTop
         
    window.onscroll = function(){
    console.log('滚动事件')
               console.log('body:',document.body.scrollTop)
               console.log('documentElement:',document.cocumentElemennt.scrollTop)
               
               
             console.log('body:',document.body.scrolleft)
             console.log('documentElement: ',document.documentElment.scrollLeft)
         }
         
        */

/**
         *  如何区分
         *      谷歌 火狐
         *          如果 页面 声明 <!DOCTYPE html> 那么需要使用 documentElement
         *          否则使用 body
         * 
         *      IE (了解)
         *          如果没有 声明 <!DOCTYPE html> 那么使用两个都没问题
         *          如果 声明了 <!DOCTYPE html>  那么只能使用 documentElement
         * 
         *      Safari
         *          两个都不用, 使用一个单独的方法 `window.pageYOffset`
        */

localStorage

本地存储

把一些常用的信息存储在用户的电脑本地(存储在浏览器中)

2.localStrorage

浏览器的本地存储, 持久化存储, 存储之后不手动删除, 那么永远存在
在存储的时候, 只能存储基本数据类型中的字符串
如果需要存储其他数据类型, 需要借助 JSON 提供的方法
可以实现跨页面通讯

   // 增 --- 实现一个本地存储 (localStorage)
    // window.localStorage.setItem('存储的标识是什么', '要存储起来的内容')
    window.localStorage.setItem('box', '20230824')
        window.localStorage.setItem('qq', '88888888')

        window.localStorage.setItem('arr1', [1, 2, 3, 4, 5])
        window.localStorage.setItem('obj1', { id: 'QF001', name: '张三' })
        
 // JSON.stringify([1, 2, 3, 4, 5])      会将传入的数组 转换成 JSON 格式的字符串, 然后存储到本地存储中
 
   window.localStorage.setItem('arr2', JSON.stringify([1, 2, 3, 4, 5]))
        window.localStorage.setItem('obj2', JSON.stringify({ id: 'QF001', name: '张三' }))
        
        
        // 查 --- 获取之前存储到本地的一些数据
    console.log('box: ', window.localStorage.getItem('box'))

        var qq = window.localStorage.getItem('qq')
        console.log('qq: ', qq)
        
    // 获取到的数据有问题, 无法使用    
     console.log('arr1: ', window.localStorage.getItem('arr1'))
        console.log('obj1: ', window.localStorage.getItem('obj1'))
        
    // 此时获取到的 JSON 格式的 字符串, 想要使用 ,需要借助 JSON 提供的方法, 还原格式
   console.log('arr2: ', window.localStorage.getItem('arr2'))
        console.log('obj2: ', window.localStorage.getItem('obj2')) 
        
      // JSON.parse()     能够将传入的 JSON 格式的字符串还原成原本的数据类型, 原本是数组就还原为数组, 原本是对象就还原为对象 
      
       console.log('arr2: ', JSON.parse(window.localStorage.getItem('arr2')))
        console.log('obj2: ', JSON.parse(window.localStorage.getItem('obj2')))


   /**
         *  localStorage
         * 
         *      增: window.localStorage.setItem('key', 'value')
         * 
         *      查: window.localStorage.getItem('key')
         *          返回值: 查询到返回对应的数据, 否则返回 null
         * 
         *      删: window.localStorage.removeItem('key')
         *      
         *      清空: window.localStorage.clear()
         * 
         * 
         *      以后在公司开发的时候, 建议只用删除, 目的是为了自己的操作不会影响同事的代码
        */

        // 删除某一条
        // window.localStorage.removeItem('msg')

        // 清空
        window.localStorage.clear()

sessionStorage

 /**
         *  sessionStorage
         *  也是浏览器本地存储的一种方案, 是临时存储, 当浏览器关闭的时候, 存储的内容, 自动清空
         *
         *  跨页面通讯 必须是从当前页面跳转过去的页面才能实现通讯
        */
        
        //增
        window.sessionStorage.setItem('wx1','123456')
         window.sessionStorage.setItem('wx2', 'qwerqwer')
        window.sessionStorage.setItem('wx3', '@#$%^')
        window.sessionStorage.setItem('wx4', '2310')
        
        //查
        var wx = window.sessionStorage.getItem('wx')
        console.log(wx)
        
        //删除
        windows.sessionStorage.removeItem('wx')
        
        //清空
        window.sessionStorage.clear()

cookie

只能存储字符串，并且有自己固定的格式；key=value; key2=value2;key3=value3
存储大小有限制4KB左右
存储具有时效性

默认是会话级（sessionStorage），但是我们可以指定过期时间

操作必须依赖服务器
前端后通讯的时候，会自动携带cookie

前端向后端发起请求的时候，会自动把cookie内部存储的数据发送给后端

前后端语言都可以操作
存储依赖域名，同一个域名内可以通讯，否则不行

    // 设置一条cookie
    document.cookie='qq=666666'
    document.cookie='wx=88888888'

cookie 过期时间


  //设置一条cookie
  document.cookie='a=100'
  
  //设置一条具有过期时间的cookie
  
  var time = new Date()
  
  /**
         *  因为我们的当前时间是按照东八区的时间执行的,
         *  比世界标准时间快 8 小时, 所以设置过期时间的时候需要将是将往回调8小时
        */
        
        
        time.setTime(time.getTime()-8*60*60*1000+1000*3)
        document.cookie='b=222;expires='+time
        setTimeout(function(){
        console.log(document.cookie)
        },5000)

本地存储之间的区别

出现时间

cookie 有JS的时候就有了
storage有H5的时候才有的

存储大小

cookie 4kb 左右
storage 4mb-20mb

前后端交互

cookie 交互式会自动传递给后端
storage交互式不会自动传递给后端，除非手动携带

前后端操作

cookie 前后端语言都可以操作
storage 只能前端语言操作

过期时间

cookie 可以手动指定过期时间，也有默认的过期时间
storage 没有过期时间

两个storage 之间的区别

1 localStorage

过期时间：持久化存储，除非手动删除
跨页面通讯：能过完成

sessionStorage

过期时间：临时存储，关闭浏览器的时候数据就会清空
跨页面通讯：只有从当前页面跳转过去的页面才能完成

两个storage的共同点

都必须存储字符串
存储其他数据类型的时候，需要借助JSON的方法进行一个转换

JS(BOM)

定时器

定时器的返回值

JS的异步任务

JS中代码执行的顺序

BOM

浏览器窗口尺寸与弹出框

浏览器的地址信息

浏览器的地址信息

location.href

location.reload

浏览器的历史记录

history.back

history.forward

浏览器的版本信息(了解)

浏览器的事件

浏览器的滚动距离

localStorage

sessionStorage

cookie

cookie 过期时间

本地存储之间的区别

两个storage 之间的区别

两个storage的共同点