当前位置： 首页 > news >正文

【JS学习】10. web API-BOM

news 文章来源：https://blog.csdn.net/m0_50521311/article/details/143511523 2025/5/16 9:15:05

文章目录

  • Web APIs - 第5天笔记
    • js组成
    • window对象
    • 定时器-延迟函数
    • location对象
    • navigator对象
    • histroy对象
    • 本地存储（今日重点）
      • localStorage（重点）
      • sessionStorage（了解）
      • localStorage 存储复杂数据类型
    • 综合案例
      • 数组map 方法
      • 数组join方法

Web APIs - 第5天笔记

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

  • BOM操作
  • 综合案例

js组成

JavaScript的组成

  • ECMAScript:

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

  • Web APIs :

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

67604738945

window对象

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

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

67604743636

定时器-延迟函数

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

语法：

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

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

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

清除延时函数：

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>

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>

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 办公系统中见到。

67604783479

常见方法：

67604784659

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

本地存储（今日重点）

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

常见的使用场景：

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

好处：

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

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

localStorage（重点）

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

**特性：**以键值对的形式存储，并且存储的是字符串， 省略了window

67604963508

<!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>

sessionStorage（了解）

特性：

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

存储：sessionStorage.setItem(key,value)

获取：sessionStorage.getItem(key)

删除：sessionStorage.removeItem(key)

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.stringifylocalStorage.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.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把JSON字符串转换为对象  JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script>
</body>

综合案例

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

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

ole.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颜色
~~~

相关文章：

【JS学习】10. web API-BOM

文章目录 Web APIs - 第5天笔记js组成window对象定时器-延迟函数location对象navigator对象histroy对象本地存储&#xff08;今日重点&#xff09;localStorage&#xff08;重点&#xff09;sessionStorage&#xff08;了解&#xff09;localStorage 存储复杂数据类型 综合案例…...

编程日记 2024/11/6 13:31:14

C#实现递归获取所有父级的列表

条件&#xff1a; 父级的id是子级的父id形成递归条件 实现功能&#xff1a; 获取自己到最顶级父级的列表&#xff08;假如最顶级父级的父ID0&#xff09; 代码&#xff1a; 解释&#xff1a;CF_CODE是自己的ID&#xff0c;CF_PARENT_ID是父id /// <summary>/// 递归获…...

编程日记 2024/11/6 13:30:13

【深度学习】梯度累加和直接用大的batchsize有什么区别

梯度累加与使用较大的batchsize有类似的效果&#xff0c;但是也有区别 1.内存和计算资源要求 梯度累加&#xff1a; 通过在多个小的mini-batch上分别计算梯度并累积&#xff0c;梯度累积不需要一次加载所有数据&#xff0c;因此显著减少了内存需求。这对于显存有限的设别尤为重…...

编程日记 2024/11/6 13:26:08

【Linux】网络相关的命令

目录 ① ip addr show ② ip route show ③ iptables -nvL ④ ping -I enx00e04c6666c0 192.168.1.100 ⑤ ip route get 192.168.1.100 ⑥ sudo ip addr add dev enx00e04c6666c0 192.168.1.101/24 ⑦ ifconfig ⑧ netstat ⑨ traceroute ⑩ nslookup ① ip addr sho…...

编程日记 2024/11/6 13:23:04

leetcode哈希表（五）-四数相加II

题目 454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&…...

编程日记 2024/11/6 13:20:01

Java学习路线：Maven（一）认识Maven

目录 认识Maven 新建Maven文件 导入依赖 认识Maven Maven是一个Java的项目管理工具&#xff0c;通过Maven&#xff0c;我们可以实现&#xff1a; 项目自动构建&#xff0c;包括代码的编译、测试、打包、安装等依赖管理&#xff0c;快速完成依赖的导入 在学习Maven之前&…...

编程日记 2024/11/6 13:19:00

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、1×1 卷积层、汇聚层、多通道汇聚层

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、11 卷积层、汇聚层、多通道汇聚层 多输入多输出通道多通道输入的卷积示例&#xff1a;多通道的二维互相关运算 多输出通道实现多通道输出的互相关运算 11 卷积层11 卷积的作用 使用全连接层实现 11 卷积小结 …...

编程日记 2024/11/6 13:17:59

java mapper 的 xml讲解

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"com.bnc.s12.mapper.GoodaCateDT…...

编程日记 2024/11/6 13:15:58

全面解析：区块链技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;区块链技术及其应用 文章目录 全面解析&#xff1a;区块链技术及其应用什么是区块链区块链的工作原理1. 分…...

编程日记 2024/11/6 13:13:56

python基础学习笔记

本文类比c语言讲解python 一.变量和类型 前缀小知识&#xff1a; 注意&#xff1a;1.python写每一行代码时&#xff0c;结尾不需要 ; 这点是和c语言有很大区别的 2.代码的缩进&#xff08;就是每行代码前面的空格&#xff09;是非常重要的后文会提到 1.定义变量 注意: 和C/C …...

编程日记 2024/11/6 13:12:55

【dvwa靶场：XSS系列】XSS (DOM) 低-中-高级别，通关啦

一、低级low 拼接的url样式&#xff1a;​​​​​​​ http://127.0.0.1/dvwa/vulnerabilities/xss_d/?default 拼接的新内容 <script>alert("假客套")</script> 二、中级middle 拼接的url样式&#xff1a;​​​​​​​ http://127.0.0.1/dvwa/vuln…...

编程日记 2024/11/6 13:08:51

ONLYOFFICE 8.2深度体验：高效协作与卓越性能的完美融合

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ONLYOFFICE 8.2 &#x1f50d;引言&#x1f4d2;1. ONLYOFFICE 产品简介&#x1f4da;2. 功能与特点&#x1f341;协作编辑 PDF&#x1f342;…...

编程日记 2024/11/6 13:05:48

Mac如何将多个pdf文件归并到一个

电脑&#xff1a;MacBook Pro M1 操作方式&#xff1a; very easy 选中想要归并的所有pdf文件&#xff0c;然后 右键 -> quick actions -> Create PDF 然后就可以看到将所选pdf文件归并为一个pdf的文件了...

编程日记 2024/11/6 13:04:48

LINUX下的Mysql：Mysql基础

目录 1.为什要有数据库 2.什么是数据库 3.LINUX下创建数据库的操作 4.LINUX创建表的操作 5.SQL语句的分类 6.Mysql的架构 1.为什要有数据库 直接用文件直接存储数据难道不行吗&#xff1f;非得搞个数据库呢&#xff1f; 首先用文件存储数据是没错&#xff0c;但是文件不方…...

编程日记 2024/11/6 13:03:47

自然语言处理方向学习建议

自然语言处理方向学习建议 自然语言处理&#xff08;NLP&#xff09;作为人工智能的一个重要分支&#xff0c;近年来在学术界和工业界都取得了显著的发展。作为即将或正在攻读博士学位的你&#xff0c;投身于NLP领域无疑是一个充满挑战与机遇的选择。以下是一些针对NLP方向学习…...

编程日记 2024/11/6 12:58:42

介绍一下如何生成随机数（c基础）

适合对象 c语言初学者 总结语言用色&#xff0c;个人强调用红色&#xff0c;注意为易错点&#xff0c;若有问题请告诉我谢谢。(建议通过目录观看)。一定要自己动手打代码。 rand函数 是生成随机数的函数&#xff0c;但实则是伪随机数。(即是同一个值) 格式 #include<st…...

编程日记 2024/11/6 12:57:41

24-11-1-读书笔记（三十一）-《契诃夫文集》（五）下（[俄] 契诃夫 [译] 汝龙）生活乏味但不乏魅力。

文章目录 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。目录阅读笔记总结 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。 休息&#xff0c…...

编程日记 2024/11/6 12:54:38

从“点”到“面”，热成像防爆手机如何为安全织就“透视网”？

市场上测温产品让人眼花缭乱&#xff0c;通过调研分析&#xff0c;小编发现测温枪占很高比重。但是&#xff0c;测温枪局限于显示单一数值信息&#xff0c;无法直观地展示物体的整体温度分布情况&#xff0c;而且几乎没有功能拓展能力。以AORO A23为代表的热成像防爆手机改变了…...

编程日记 2024/11/6 12:53:36

基于vue框架的的奶茶店预约订单系统3fb55（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,奶茶分类,奶茶信息 开题报告内容 开题报告 题目&#xff1a;基于Vue框架的奶茶店预约订单系统开发 一、研究背景与意义 背景 随着饮品市场的蓬勃发展&#xff0c;奶茶店作为其中的重要组成部分&#xff0c;其业务量和顾客需求持…...

编程日记 2024/11/6 12:52:35

项目实战使用gitee

1.创建本地仓库 2.进行提交到本地仓库 创建仓库后在idea中会显示图标&#xff0c;点击绿色的√进行快速提交 3.绑定远程仓库 4.番外篇-创建gitee仓库 注意不要勾选其他...

编程日记 2024/11/6 12:49:32

数据结构--二叉树_链式（下）

实现链式结构二叉树 链式结构就是由一个一个的节点组成。 ⽤链表来表⽰⼀棵⼆叉树&#xff0c;即⽤链来指⽰元素的逻辑关系。 通常的⽅法是链表中每个结点由三个域组成&#xff0c;数据域和左右指针域&#xff0c;左右指针分别⽤来给出该结点左孩⼦和右孩⼦所在的链结点的存储…...

编程日记 2024/11/6 12:45:27

unity游戏开发之--人物打怪爆材料--拾进背包的实现思路

unity游戏开发之–人物打怪爆材料–拾进背包的实现思路 游戏实现&#xff1a;unity c# 1、敌人&#xff08;怪物&#xff09;的生命值和伤害系统 using UnityEngine; using System.Collections.Generic;public class Enemy : MonoBehaviour {[Header("基础属性")]…...

编程日记 2024/11/6 12:44:26

AWTK文件系统适配器更新-支持RT-Thread DFS POSIX接口

介绍 AWTK 文件系统适配器。 在嵌入式平台中&#xff0c;有时没有 POSIX 兼容的文件系统 API&#xff0c;需要把一些文件系统实现&#xff0c;包装成 AWTK 的 fs 接口。本项目提供一些常见文件系统的适配&#xff0c;目前支持的文件系统有&#xff1a; FATFS 主要用于访问 TF…...

编程日记 2024/11/6 12:37:19

C#如何快速获取P/Invoke方法签名

使用API函数已经好几年了&#xff0c;封装函数签名基本是参照MSDN上的文档&#xff0c;然后再做数据类型对应。 虽然有 pinvoke.net 这个网站&#xff0c;但基本很少使用。一方面是想多动手&#xff0c;另一方面是因为各种数据类型基本都用过了&#xff0c;都能自己在C#中 对应…...

编程日记 2024/11/6 12:35:16

CqEngine添加联合索引和复合唯一索引

一.实体类 Data public class CategoryT {private Integer id;private String oneCategory;private String twoCategory;private String createTime;private String updateTime;public String uniKey() {return oneCategory "/" twoCategory;} }二.集合 Suppress…...

编程日记 2024/11/6 12:33:13

基于matlab的SVPWM逆变器死区补偿算法仿真研究

背景介绍&#xff1a; 三相脉宽调制(pulse width modulation&#xff0c;PWM)电压源逆变器(voltage source inverter&#xff0c;VSI)的死区效应可导致电机相电压和相电流畸变、零电流钳位效应以及转矩和转速脉动&#xff0c;系统性能降低。为提高系统运行性能&#xff0c;对V…...

编程日记 2024/11/6 12:31:11

【网页设计】CSS 定位

目标 能够说出为什么要用定位能够说出定位的4种分类能够说出4种定位各自的特点能够说出为什么常用子绝父相布局能够写出淘宝轮播图布局能够说出显示隐藏的2种方式以及区别 1. 定位 1.1 为什么需要定位 提问&#xff1a; 以下情况使用标准流或者浮动能实现吗&#xff1f;1. …...

编程日记 2024/11/6 12:30:10

scala的属性访问权限

scala的属性访问权限有四种&#xff1a; 默认访问权限&#xff1b;protected访问权限&#xff1b;private访问权限&#xff1b;private[this]访问权限 package Test1104 //访问控制权限// 类的内部方法 伴生对象中的方法 类的外部(对象&#xff0c;访问)…...

编程日记 2024/11/6 12:29:09

QGIS：HCMGIS插件

插件GitHub地址&#xff1a;https://github.com/thangqd/HCMGIS。 以下对HCMGIS插件进行简单介绍&#xff0c;并演示如何进行地图数据下载。 插件简介 HCMGIS - Basemaps, Download OpenData, Batch Converter, VN-2000 Projections, and Field Calculation Utilities for QGI…...

编程日记 2024/11/6 12:28:08

Melty 主体流程图

┌───────────┐ │ 用户输入 │ └─────┬─────┘ │&#xff08;自然语言或指令&#xff09; │ ▼ ┌───────────┐ │ 自然语言处理 │ │ &#xff08;NLU 模块&#xff09;│ └─────┬─────┘ │ │ 解析用户意图 │ ▼ ┌─…...

编程日记 2024/11/6 12:27:07