【web APIs】快速上手Day05(Bom操作)

目录

  • Web APIs - 第5天笔记
    • js组成
    • window对象
      • BOM
      • 定时器-延迟函数
        • 案例-5秒钟之后消失的广告
      • JS执行机制
      • location对象
        • 案例-5秒钟之后跳转的页面
      • navigator对象
      • histroy对象
    • 本地存储(今日重点)
      • localStorage(重点)
      • sessionStorage(了解)
      • localStorage 存储复杂数据类型
    • 数组map 、join方法
      • 数组map方法
      • 数组join方法
    • 综合案例-学生就业信息表实现页面刷新数据不丢失

Web APIs - 第5天笔记

目标:

  1. 依托 BOM 对象实现对历史、地址、浏览器信息的操作或获取

  2. 具备利用本地存储实现学生信息表案例的能力

js组成

JavaScript的组成

  • ECMAScript:

    • 规定了js基础语法核心知识。
    • 比如:变量、分支语句、循环语句、对象等等
  • Web APIs :

    • DOM 文档对象模型, 定义了一套操作HTML文档的API
    • BOM 浏览器对象模型,定义了一套操作浏览器窗口的API

在这里插入图片描述

window对象

BOM

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

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

在这里插入图片描述

定时器-延迟函数

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

语法:

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

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

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

清除延时函数:

clearTimeout(timerId)

注意点

  1. 延时函数需要等待,所以后面的代码先执行
  2. 返回值是一个正整数,表示定时器的编号
案例-5秒钟之后消失的广告

需求:5秒钟之后,广告自动消失

分析:

①:设置延时函数

②:隐藏元素

<!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>Document</title><style>img {position: fixed;left: 0;bottom: 0;}</style>
</head><body><img src="./images/ad.png" alt=""><script>// 1.获取元素const img = document.querySelector('img')setTimeout(function () {img.style.display = 'none'}, 3000)</script>
</body></html>

JS执行机制

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

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

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

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

同步

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

异步

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

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


同步任务

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

异步任务

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

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

1、普通事件,如 click、resize 等

2、资源加载,如 load、error 等

3、定时器,包括 setInterval、setTimeout 等

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

在这里插入图片描述


在这里插入图片描述

  <script>console.log(1)console.log(2)setTimeout(function () {console.log(3)}, 0)console.log(4);//输出顺序为 1 2 4 3</script>
<script>console.log(1)document.addEventListener('click', function () {console.log(4)})console.log(2)setTimeout(function () {console.log(3)}, 3000)
</script>
//输出结果为 1 2 4 3 或者 1 2 3 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属性  得到 # 后面的地址// 后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如 网易云音乐console.log(location.hash)// 4. reload 方法  刷新页面const btn = document.querySelector('.reload')btn.addEventListener('click', function () {// location.reload() // 页面刷新location.reload(true) // 强制页面刷新 ctrl+f5})</script>
</body>
案例-5秒钟之后跳转的页面

需求:用户点击可以跳转,如果不点击,则5秒之后自动跳转,要求里面有秒数倒计时

分析:

①:目标元素是链接

②:利用定时器设置数字倒计时

③:时间到了,自动跳转到新的页面

<!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>Document</title><style>span {color: red;}</style>
</head><body><a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a><script>// 1. 获取元素const a = document.querySelector('a')// 2.开启定时器// 3. 声明倒计时变量let num = 5let timerId = setInterval(function () {num--a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`// 如果num === 0 则停止定时器,并且完成跳转功能if (num === 0) {clearInterval(timerId)// 4. 跳转  location.hreflocation.href = 'http://www.itcast.cn'}}, 1000)</script>
</body></html>

navigator对象

navigator是对象,该对象下记录了浏览器自身的相关信息

常用属性和方法:

  • 通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent(浏览器信息)
!(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst 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 (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等

使用场景

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

在这里插入图片描述

常见方法:

在这里插入图片描述

<body><button>后退</button><button>前进</button><script>const back = document.querySelector('button:first-child')const forward = back.nextElementSiblingback.addEventListener('click', function () {// 后退一步// history.back()history.go(-1)})forward.addEventListener('click', function () {// 前进一步// history.forward()history.go(1)})</script>
</body>

本地存储(今日重点)

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

常见的使用场景:

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

好处:

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

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

localStorage(重点)

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

特性:

  • 可以多窗口(页面)共享(同一浏览器可以共享)

  • 以键值对的形式存储使用

在这里插入图片描述


在这里插入图片描述

  <script>// 1. 要存储一个名字  'uname', 'pink老师'// localStorage.setItem('键','值')localStorage.setItem('uname', 'pink老师')// 2. 获取方式  都加引号console.log(localStorage.getItem('uname'))// 3. 删除本地存储  只删除名字// localStorage.removeItem('uname')// 4. 改  如果原来有这个键,则是改,如果么有这个键是增localStorage.setItem('uname', 'red老师')// 我要存一个年龄// 2. 本地存储只能存储字符串数据类型,18存进去自动也是字符串localStorage.setItem('age', 18)console.log(typeof (localStorage.getItem('age')))  //string</script>

sessionStorage(了解)

特性:

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

存储:sessionStorage.setItem(key,value)

获取:sessionStorage.getItem(key)

删除:sessionStorage.removeItem(key)

localStorage 存储复杂数据类型

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

在这里插入图片描述

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

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

在这里插入图片描述

JSON字符串:

  • 首先是1个字符串
  • 属性名使用双引号引起来,不能单引号
  • 属性值如果是字符串型也必须双引号

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

在这里插入图片描述

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

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

在这里插入图片描述

数组map 、join方法

数组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)
</script>
</body>

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

map重点在于有返回值,forEach没有返回值(undefined)
index可以简写成i

数组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>

综合案例-学生就业信息表实现页面刷新数据不丢失

需求: 录入学生信息,页面刷新数据不丢失

模块分析:

①:新增模块, 输入学生信息,数据会存储到本地存储中

②:渲染模块,数据会渲染到页面中

③:删除模块,点击删除按钮,会删除对应的数据

在这里插入图片描述

思路分析:

①:因为页面刷新不丢失数据,所以可能存在已有数据,所以第一步,我们先找本地存储里面查找是否有数据,如果有数据先进行渲染页面,如果没有数据,我们放一个空数组,用来存放数据

②:渲染模块,数据会渲染到页面中

③:新增模块, 输入学生信息,数据会存储到本地存储中,然后渲染页面

④:删除模块,点击删除按钮,会删除对应的数据,然后渲染页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名:<input type="text" class="uname" name="uname" />年龄:<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value=""></option><option value=""></option></select>薪资:<input type="text" class="salary" name="salary" />就业城市:<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 参考数据// const initData = [//   {//     stuId: 1001,//     uname: '欧阳霸天',//     age: 19,//     gender: '男',//     salary: '20000',//     city: '上海',//   }// ]// 1. 读取本地存储的数据   student-data  本地存储的命名const data = localStorage.getItem('student-data')// console.log(data)// 2. 如果有就返回对象,没有就声明一个空的数组  arr 一会渲染的时候用的const arr = data ? JSON.parse(data) : []// console.log(arr)// 获取 tbodyconst tbody = document.querySelector('tbody')// 3. 渲染模块函数function render() {// 遍历数组 arr,有几个对象就生成几个 tr,然后追击给tbody// map 返回的是个数组  [tr, tr]const trArr = arr.map(function (item, i) {// console.log(item)// console.log(item.uname)  // 欧阳霸天return `<tr><td>${item.stuId}</td><td>${item.uname}</td><td>${item.age}</td><td>${item.gender}</td><td>${item.salary}</td><td>${item.city}</td><td><a href="javascript:" data-id=${i}>删除</a></td></tr> `})// console.log(trArr)// 追加给tbody// 因为 trArr 是个数组, 我们不要数组,我们要的是 tr的字符串 join()tbody.innerHTML = trArr.join('')}render()// 4. 录入模块const info = document.querySelector('.info')// 获取表单form 里面带有 name属性的元素const items = info.querySelectorAll('[name]')// console.log(items)info.addEventListener('submit', function (e) {// 阻止提交e.preventDefault()// 声明空的对象const obj = {}// obj.stuId = arr.length + 1// 加入有2条数据   2 obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1// 非空判断for (let i = 0; i < items.length; i++) {// console.log(items) // 数组里面包含 5个表单  name// console.log(items[i]) //  每一个表单 对象// console.log(items[i].name) //  // item 是每一个表单const item = items[i]if (items[i].value === '') {return alert('输入内容不能为空')}// console.log(item.name)  uname  age gender// obj[item.name]   === obj.uname  obj.age obj[item.name] = item.value}// console.log(obj)// 追加给数组arr.push(obj)//  把数组 arr 存储到本地存储里面localStorage.setItem('student-data', JSON.stringify(arr))// 渲染页面render()// 重置表单this.reset()})// 5. 删除模块tbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// alert(1)// console.log(e.target.dataset.id)// 删除数组对应的这个数据arr.splice(e.target.dataset.id, 1)// 写入本地存储localStorage.setItem('student-data', JSON.stringify(arr))// 重新渲染render()}})</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/368369.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA数字化产科管理平台源码:涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全流程的信息化管理

JAVA数字化产科管理平台源码&#xff1a;涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全流程的信息化管理 智慧产科管理系统是基于自主研发妇幼信息平台&#xff0c;为医院产科量身打造的信息管理系统&#xff0c;涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全…

米国政府呼吁抛弃 C 和 C++

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 很多观点认为C 或 C永远不可被…

Django 模版继承

1&#xff0c;设计母版页 Test/templates/6/base.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><!-- 修正了模板标签的全角字符问题 -->{% block title %}<title>这个是母版页</title>{…

记录一下简单导入导出excel二级表头

数据库导入导出表头 之前的工具类GenerateExcelToFile新增两个导出这种二级表头方法 package com.njry.utils;import cn.hutool.core.util.IdUtil; import com.njry.config.FileProperties; import com.njry.exception.BadRequestException; import org.apache.poi.hssf.user…

Spring Cloud Alibaba - Sentinel 分布式系统流量哨兵

目录 概述特征基本概念 安装Sentinel微服务引入Sentinel案例流控规则&#xff08;流量控制&#xff09;流控模式-直接流控模式-关联流控模式-链路流控效果-快速失败流控效果-预热WarmUp流控效果-排队等候 流控规则&#xff08;并发线程数控制&#xff09;熔断规则&#xff08;熔…

【多媒体】富客户端应用程序GUI框架 JavaFX 2.0 简介

JavaFX 最初是由 Oracle 推出的一个用于开发富客户端应用程序的框架&#xff0c;它提供了丰富的用户界面控件、布局容器、3D图形绘制、媒体播放和动画等功能&#xff0c;旨在取代较旧的 Swing 框架。JavaFX 于 2007 年推出&#xff0c;2011 年 10 月发布了2.0 版本。JavaFX 2.0…

数据结构(一)C语言补

数据结构 内存空间划分 一个进程启动后&#xff0c;会生成4G的内存空间 0~3G是用户空间(应用层) 3~4G是内核空间(底层) 0~3G 3~4G 所有的进程都会共享3G~4G的内核空间&#xff0c; 但是每个进程会独立拥有0~3G的用户空间。 栈区 存放数据特点 栈区存放数据的申请空间的先后…

小学vr虚拟课堂教学课件开发打造信息化教学典范

在信息技术的浪潮中&#xff0c;VR技术正以其独特的魅力与课堂教学深度融合&#xff0c;引领着教育方式的创新与教学方法的变革。这一变革不仅推动了“以教促学”的传统模式向“自主探索”的新型学习方式转变&#xff0c;更为学生带来了全新的学习体验。 运用信息技术融合VR教学…

C++那些事之小项目实战-进程间通信

小项目实战之进程间通信 进程间通信是一个非常重要的话题&#xff0c;特别是像一些大型项目都有它的影子&#xff0c;例如&#xff1a;PostgreSQL使用了管道完成copy的进程间通信&#xff0c;那么本节也将基于这个主题&#xff0c;使用C去搭建一个进程间通过管道通信的demo出来…

【代码随想录】【算法训练营】【第53天】 [739]每日温度 [496]下一个更大元素I [503]下一个更大元素II

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 48&#xff0c;周六&#xff0c;不能再坚持~ 题目详情 [739] 每日温度 题目描述 739 每日温度 解题思路 前提&#xff1a;寻找任一个元素的右边比自己大的元素的位置 思路&#xff1a;通常…

(三十一)Flask之wtforms库【剖析源码下篇】

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…

spring boot初始化的几个总结

spring intializr File->New->Project 注意&#xff1a;Spring Initializer中 Java版本选择模块已经不支持1.8了。 Spring Boot 3.x要求 Java最低版本为17&#xff0c; 最新的SpringBoot版本已经要求Java22了 所以&#xff0c;你可以升级Java版本&#xff0c;使用Spri…

6.26.3 基于Transformer的深度神经网络在数字乳腺断层合成图像上的乳腺癌分类

开发一种有效的深度神经网络模型&#xff0c;该模型结合了相邻图像部分的上下文&#xff0c;以检测数字乳腺断层合成(DBT)图像上的乳腺癌。 数字乳房断层合成(DBT)是一种医学成像技术&#xff0c;其中检测器围绕患者以有限角度旋转并记录多幅图像。然后将这些图像重建为二维(2D…

【Python】变量与基本数据类型

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言变量声明变量变量的命名规则 变量赋值多个变量赋值 标准数据类型变量的使用方式存储和访问数据&#xff1a;参与逻辑运算和数学运算在函数间传递数据构建复杂的数据结构 NameE…

关于5G和卫星

手机&#xff0c;已经串联起了我们生活中的一切环节。我们随时随地拿出手机&#xff0c;都能畅快地上网。 这一切是如此地理所当然&#xff0c;以至于我们甚至想不到这样不可思议的问题&#xff1a; 移动通信网络真的无处不在吗&#xff1f; 我们都知道&#xff0c;地球虽叫…

WordPress主题大前端DUX v8.7源码下载

全新&#xff1a;用户注册流程&#xff0c;验证邮箱&#xff0c;设置密码 新增&#xff1a;列表显示小视频和横幅视频 新增&#xff1a;文章内容中的外链全部增加 nofollow 新增&#xff1a;客服功能中的链接添加 nofollow 优化&#xff1a;产品分类的价格显示

Day05-讲师列表前端-讲师信息添加

代码&#xff1a; //添加讲师 addTeacher(teacher){ return request({ url:/eduservice/teacher/addTeacher, method:‘post’, data:teacher }) } &#xff08;2&#xff09;在页面实现调用 代码&#xff1a; 讲师添加 <el-button type“primary” :disabled“sav…

【Qt之·类QVariant·数据类型】

系列文章目录 文章目录 前言一、概述二、操作及用法1.1 存储数据1.2 获取数据1.3 设置数据1.4 数据类型判断1.5 判断数据是否有效 三、实例演示总结 前言 QVariant是Qt开发中非常重要的一部分&#xff0c;它是Qt的一个核心类&#xff0c;用于处理不同数据类型之间的转换和传递。…

Elasticsearch集群部署(下)

目录 上篇&#xff1a;Elasticsearch集群部署&#xff08;上&#xff09;-CSDN博客 七. Filebeat 部署 八. 部署Kafka 九. 集群测试 链接&#xff1a;https://pan.baidu.com/s/1AFXSmDdY5xBb7g35ipKoaw?pwdfa9m 提取码&#xff1a;fa9m 七. Filebeat 部署 为什么用 F…

使用 draw.io 画图

尽管我非常喜欢 wps 和 office 的 ppt 画图&#xff0c;但因为它们对数学公式的糟糕支持&#xff0c;我不得不另外寻找一个画图工具。当然我也同样很喜欢 visio &#xff0c;但同样的&#xff0c;它对数学公式的支持糟糕&#xff0c;另外&#xff0c;最为重要的是&#xff0c;v…