Web APIs (5) - 笔记

简介: 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力

Web APIs (5) - 笔记

目标: 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力

js组成

JavaScript的组成

  • ECMAScript:
    • 规定了js基础语法核心知识。
    • 比如:变量、分支语句、循环语句、对象等等
  • Web APIs :
    • DOM 文档对象模型, 定义了一套操作HTML文档的API
    • BOM 浏览器对象模型,定义了一套操作浏览器窗口的API

image.png

1 window对象

1.1 BOM(浏览器对象模型)

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

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

image.png

1.2 定时器-延迟函数

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

语法:

setTimeout(回调函数, 延迟时间)

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

间歇函数 setInterval : 每隔一段时间就执行一次, , 平时省略window。

清除延时函数:

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

注意点

  1. 延时函数需要等待,所以后面的代码先执行
  2. 返回值是一个正整数,表示定时器的编号
<body>
  <script>
    // 定时器之延迟函数

    // 1. 开启延迟函数
    let timerId = setTimeout(function () {
    
    
      console.log('我只执行一次')
    }, 3000)

    // 1.1 延迟函数返回的还是一个正整数数字,表示延迟函数的编号
    console.log(timerId)

    // 1.2 延迟函数需要等待时间,所以下面的代码优先执行

    // 2. 关闭延迟函数
    clearTimeout(timerId)

  </script>
</body>

1.3 JS 执行机制

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

这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

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

为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。

1.3.1 同步

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

1.3.2 异步

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

他们的本质区别:这条流水线上各个流程的执行顺序不同。

1.3.3 同步任务

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

1.3.4 异步任务

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

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

  1. 普通事件,如 click、resize 等
  2. 资源加载,如 load、error 等
  3. 定时器,包括 setInterval、setTimeout 等

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

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

2.异步任务放入任务队列中。

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

image.png

image.png

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

1.4 location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象。

属性/方法 说明
href 属性,获取完整的 URL 地址,赋值时用于地址的跳转
search 属性,获取地址中携带的参数,符号 ?后面部分
hash 属性,获取地址中的啥希值,符号 # 后面部分
reload() 方法,用来刷新当前页面,传入参数 true 时表示强制刷新
<body>
  <form>
    <input type="text" name="search"> <button>搜索</button>
  </form>
  <a href="#/music">音乐</a>
  <a href="#/download">下载</a>

  <button class="reload">刷新页面</button>
  <script>
    // location 对象  
    // 1. href属性 (重点) 得到完整地址,赋值则是跳转到新地址
    console.log(location.href)
    // location.href = 'http://www.itcast.cn'

    // 2. search属性  得到 ? 后面的地址 
    console.log(location.search)  // ?search=笔记本

    // 3. hash属性  得到 # 后面的地址
    console.log(location.hash)

    // 4. reload 方法  刷新页面
    const btn = document.querySelector('.reload')
    btn.addEventListener('click', function () {
    
    
      // location.reload() // 页面刷新
      location.reload(true) // 强制页面刷新 ctrl+f5
    })
  </script>
</body>

1.5 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'
    }
})();

1.6 histroy对象

history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录 等

使用场景

history对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。

image.png

常见方法:

history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是 1 前进1个页面 如果是 -1 后退1页面
<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // histroy对象

    // 1.前进
    const forward = document.querySelector('.forward')
    forward.addEventListener('click', function () {
    
    
      // history.forward() 
      history.go(1)
    })
    // 2.后退
    const back = document.querySelector('.back')
    back.addEventListener('click', function () {
    
    
      // history.back()
      history.go(-1)
    })
  </script>
</body>

2 本地存储(重点)

2.1 本地存储

本地存储:将数据存储在本地浏览器中

常见的使用场景:

https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

好处:

1、页面刷新或者关闭不丢失数据,实现数据持久化

2、容量较大,sessionStorage和 localStorage 约 5M 左右

2.2 localStorage(重点)

作用: 数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失。

特性:以键值对的形式存储,并且存储的是字符串, 省略了window。

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地存储-localstorage</title>
</head>

<body>
  <script>
    // 本地存储 - localstorage 存储的是字符串 
    // 1. 存储
    localStorage.setItem('age', 18)

    // 2. 获取
    console.log(typeof localStorage.getItem('age'))

    // 3. 删除
    localStorage.removeItem('age')
  </script>
</body>

</html>

2.3 sessionStorage(了解)

特性:

  • 用法跟localStorage基本相同
  • 区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除

存储:sessionStorage.setItem(key,value)

获取:sessionStorage.getItem(key)

删除:sessionStorage.removeItem(key)

2.4 localStorage 存储复杂数据类型

问题:本地只能存储字符串,无法存储复杂数据类型。

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

语法:JSON.stringify(复杂数据类型)

JSON字符串:

  • 首先是1个字符串
  • 属性名使用双引号引起来,不能单引号
  • 属性值如果是字符串型也必须双引号
<body>
  <script>
    // 本地存储复杂数据类型
    const goods = {
    
    
      name: '小米',
      price: 1999
    }
    // localStorage.setItem('goods', goods)
    // console.log(localStorage.getItem('goods'))

    // 1. 把对象转换为JSON字符串  JSON.stringify
    localStorage.setItem('goods', JSON.stringify(goods))
    // console.log(typeof localStorage.getItem('goods'))

  </script>
</body>

问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用

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

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

<body>
  <script>
    // 本地存储复杂数据类型
    const goods = {
    
    
      name: '小米',
      price: 1999
    }
    // localStorage.setItem('goods', goods)
    // console.log(localStorage.getItem('goods'))

    // 1. 把对象转换为JSON字符串  JSON.stringify
    localStorage.setItem('goods', JSON.stringify(goods))
    // console.log(typeof localStorage.getItem('goods'))

    // 2. 把JSON字符串转换为对象  JSON.parse
    console.log(JSON.parse(localStorage.getItem('goods')))

  </script>
</body>

3 综合案例

3.1 数组map 方法

使用场景

map 可以遍历数组处理数据,并且返回新的数组。

语法

<body>
  <script>
  const arr = ['red', 'blue', 'pink']
  // 1. 数组 map方法 处理数据并且 返回一个数组
   const newArr = arr.map(function (ele, index) {
   
   
    // console.log(ele)  // 数组元素
    // console.log(index) // 索引号
    return ele + '颜色'
    })
console.log(newArr)  // ['red颜色', 'blue颜色', 'green颜色']
</script>
</body>

map 也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值,forEach没有返回值(undefined)

3.2 数组join方法

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

语法:

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    // 1. 数组 map方法 处理数据并且 返回一个数组
    const newArr = arr.map(function (ele, index) {
    
    
      // console.log(ele)  // 数组元素
      // console.log(index) // 索引号
      return ele + '颜色'
    })
    console.log(newArr)

    // 2. 数组join方法  把数组转换为字符串
    // 小括号为空则逗号分割
    console.log(newArr.join())  // red颜色,blue颜色,pink颜色
    // 小括号是空字符串,则元素之间没有分隔符
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
  </script>
</body>

参数:

数组元素是通过参数里面指定的分隔符进行分隔的,空字符串(''),则所有元素之间都没有任何字符。

目录
相关文章
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
4月前
|
机器学习/深度学习 人工智能 前端开发
AI计算机视觉笔记三:WEB端部署YOLOv5
本文档介绍了如何将YOLOv5目标检测模型部署到Web端的方法,包括基于Flask和Streamlit两种实现方案。首先创建Python虚拟环境并安装必要的依赖库。接着详细展示了Flask方案下的前端HTML页面与后端Python逻辑代码,该方案利用Flask框架搭建服务器,处理实时视频流,并显示检测结果。随后介绍了Streamlit方案,该方案更简洁直观,适合快速开发交互式的机器学习应用。通过`streamlit run`命令即可启动应用,支持图像、视频及实时摄像头的目标检测演示。两种部署方式各有优势,Flask灵活性高,适用于复杂项目;而Streamlit则易于上手,便于快速原型设计。
|
6月前
|
XML 数据格式 Python
Python基础教程(第3版)中文版 第15章 python和web(笔记)
Python基础教程(第3版)中文版 第15章 python和web(笔记)
|
7月前
|
XML JSON Java
【Web系列笔记】Restful
本文讨论了RESTful接口设计的原因和原则。传统方式中,http接口常按功能聚合,导致行为不规范,如订单操作有多种请求方式。RESTful设计强调资源的结构清晰、标准统一,通过资源URI、表现层和状态转化来组织接口。它推荐使用GET、POST、PUT和DELETE等HTTP方法对应资源的创建、读取、更新和删除操作。在实践中,应避免URI中包含动词,确保每个URI代表一种资源,并利用HTTP动词表达操作。这样能提高接口的易理解和扩展性。
70 8
|
7月前
|
JSON 缓存 前端开发
【Web系列相关笔记】跨域
CORS是一种W3C标准,用于跨域资源共享,允许浏览器在发送AJAX请求时突破同源策略。它涉及浏览器和服务器两方,其中浏览器自动处理CORS请求,添加Origin头信息。服务器需通过返回特定的Access-Control-Allow-*头信息来允许跨域访问。
58 1
|
7月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
110 1
|
7月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
65 1
|
7月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
7月前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
260 0
|
7月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
275 0