Web APIs_day05

晚风的街

于 2024-08-16 16:17:53 发布

阅读量673

点赞数 6

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_74153968/article/details/141260940

版权

Window对象

BOM(浏览器对象模型)

BOM(Browser Object Model ) 是浏览器对象模型

注意：

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
window对象下的属性和方法调用的时候可以省略window。

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout。

语法：setTimeout(回调函数，等待的毫秒数）

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

清除延时函数：let timer = setTimeout(回调函数，等待的毫秒数）

clearTimeout(timer)

注意

（1）延时器需要等待,所以后面的代码先执行。

（2）每一次调用延时器都会产生一个新的延时器，返回的也是数字Id。

两种定时器对比：执行的次数

延时函数: 执行一次

间歇函数:每隔一段时间就执行一次,除非手动清除

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

<body>
  <img src="./images/ad.png" alt="">
  <script>
    const img = document.querySelector('img')
    setTimeout(function () {
      img.style.display = 'none'
    }, 3000)
  </script>
</body>

JS执行机制

//经典面试题

console.log(1)
setTimeout(function(){
 console.log(2)
},1000)
console.log(3)     //1 3 2

console.log(1)
setTimeout(function(){
 console.log(2)
},0)
console.log(3)    //1 3 2

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

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

JS 执行机制

同步: 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步: 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
本质区别：这条流水线上各个流程的执行顺序不同。

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

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

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

（1）普通事件，如 click、resize 等

（2）资源加载，如 load、error 等

（3）定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列）。

执行顺数

（1）先执行执行栈中的同步任务。

（2）异步任务放入任务队列中。

（3）一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop ）。

console.log(1)
 document.addEventListener('click', function () {
 console.log(4)
 })
 console.log(2)
 setTimeout(function () {
 console.log(3)
 }, 3000）

//先关闭后点击  1 2 3 4
//先点击后关闭  1 2 4 3

location对象

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

常用属性和方法：

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

案例 5秒钟之后跳转的页面

<body>
  <a href="http://baidu.com"><span>n</span>秒后跳转页面</a>
  <script>
    const a = document.querySelector('a')
    let timer = 5
    let timerId = setInterval(function () {
      timer--
      a.innerHTML = `<span>${timer}</span>秒后跳转页面`
      if (timer === 0) {
        clearInterval(timerId)
        //跳转页面
        location.href = 'http://baidu.com'
      }
    }, 1000)
  </script>
</body>

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 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

常用属性和方法：

本地存储

本地存储介绍

（1）数据存储在用户浏览器中

（2）设置、读取方便、甚至页面刷新不丢失数据

（3）容量较大，sessionStorage和localStorage约 5M 左右

本地存储分类

localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在。

特性：

（1）可以多窗口（页面）共享（同一浏览器可以共享）

（2）以键值对的形式存储使用

（3）只能存储字符串类型，所有的键都要加""。

存储数据： localStorage.setItem(key, value)
获取数据： localStorage.getItem(key)
删除数据： localStorage.removeItem(key)

sessionStorage

特性：

（1）生命周期为关闭浏览器窗口

（2）在同一个窗口(页面)下数据可以共享

（3）以键值对的形式存储使用

（4）用法跟localStorage 基本相同

存储复杂数据类型

原因：本地只能存储字符串,无法存储复杂数据类型。

解决：需要将复杂数据类型转换成JSON字符串,在存储到本地。

语法：JSON.stringify(复杂数据类型) （属性和值都有引号，统一为双引号。）

原因：因为本地存储里面取出来的是字符串，不是对象，无法直接使用。

解决：把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

补充：数组中map和join方法

数组中map方法迭代数组

map 可以处理数据，并且返回新的数组。map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。map的重点在于有返回值，forEach没有返回值。

数组中join方法

join() 方法用于把数组中的所有元素转换一个字符串

数组元素是通过参数里面指定的分隔符进行分隔的，默认空括号用逗号分隔。

const arr = ['pink','red','blue']

const newArr = arr.map(function(ele,index){

       console.log(ele)  //'pink' 'red' 'blue'
       console.log(index) // 0 1 2
       return ele + '老师' 
})

console.log(newArr) //['pink老师','red老师','blue老师']

console.log(newArr.join('')) //pink老师red老师blue老师

综合案例学生就业信息表

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        salary: '12000',
        gender: '女',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ]
    //本地存储,已经存储没必要再重复存储
    // localStorage.setItem('data', JSON.stringify(initData))
    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    // (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // (2). 如果没有数据，则用空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []

    // 1.2 利用map和join方法来渲染页面
    //获取tbody
    const tbody = document.querySelector('tbody')
    function render() {
      // (1). 利用map遍历数组，返回对应tr的数组
      const trArr = arr.map(function (ele, index) {
        return `
        <tr>
            <td>${ele.stuId}</td>
            <td>${ele.uname}</td>
            <td>${ele.age}</td>
            <td>${ele.gender}</td>
            <td>${ele.salary}</td>
            <td>${ele.city}</td>
            <td>${ele.time}</td>
            <td>
                <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
                </a>
           </td>
        </tr>
        `
      })
      // (2). 把数组转换为字符串 join
      // (3). 把生成的字符串追加给tbody
      tbody.innerHTML = trArr.join('')
      // 显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()

    // 2. 新增业务
    // 2.1 form表单注册提交事件，阻止默认行为
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    info.addEventListener('submit', function (e) {
      e.preventDefault()
      //2.2 非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      //2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
      arr.push({
        //处理stuId：数组最后一条数据的stuId+1
        stuId: arr.length ? [arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        //获取当前时间
        time: new Date().toLocaleString()
      })
      // 2.4 渲染页面和重置表单（reset()方法）
      render()
      this.reset()
      // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
      localStorage.setItem('data', JSON.stringify(arr))
    })

    // 3. 删除业务
    // 3.1 采用事件委托形式，给 tbody 注册点击事件
    tbody.addEventListener('click', function (e) {
      //判断是否点到的是删除按钮
      if (e.target.tagName === 'A') {
        // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
        //确认删除
        if (confirm('您确定要删除这条数据吗？')) {
          //3.3 根据索引，利用splice删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          //3.4 重新渲染页面
          render()
          //3.5 把最新的arr数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })

  </script>
</body>