JavaScript 笔记 --- part 5 --- Web API (part 3)
(webAPI part3) BOM 操作
JS 执行机制
-
javascript 是单线程的, 也就是说, 只能同时执行一个任务。
-
为了解决这个问题, 利用多核 CPU 的计算能力, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。
-
于是, JS 出现了同步和异步的概念。同步任务是指在执行过程中, 必须等待前一个任务执行完毕, 才能继续执行; 异步任务是指在执行过程中, 不必等待前一个任务, 而是可以同时执行多个任务。
-
同步任务: 都在主线程上执行, 形成一个执行栈。
-
异步任务: 都在主线程之外, 形成一个事件队列。
-
事件循环: 主线程不断从事件队列中取出事件, 执行事件。(优先级: 同步任务 > 异步任务)
window 对象
-
定义: window 对象是 JavaScript 中最顶层的对象, 它代表了浏览器窗口, 也是所有全局变量和函数的宿主。
-
BOM 对象: 浏览器对象模型(Browser Object Model)
定时器 - 延时函数
-
settimeout()方法: 设定一个定时器, 在指定的时间间隔后执行一次函数。
setTimeout(function(){},delay);- 参数: function() - 要执行的函数名或函数体。 - 参数: delay - 延迟时间,单位为毫秒。// 清除延时函数 clearTimeout(timeoutID);- 参数: timeoutID - 要清除的延时函数的ID。
location 对象
- 定义: location 对象代表当前页面的 URL 信息。
// 获取当前页面的URL
var url = location.href;// 获取当前页面的域名
var domain = location.hostname;// 获取当前页面的协议
var protocol = location.protocol;// 获取URL中的查询字符串
location.search;// 获取URL中的hash值
location.hash;// 重定向到新的页面
location.href = "http://www.example.com";// (强制)刷新当前页面
location.reload(true);
navigator 对象
-
定义: navigator 对象代表浏览器的信息。
-
通过 userAgent 属性可以获取浏览器的类型和版本信息。
// 获取浏览器类型
var browser = navigator.appName;// 获取浏览器版本
var version = navigator.appVersion;// 获取操作系统类型
var os = navigator.platform;// 获取用户代理信息
var userAgent = 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";}
})();
history 对象
-
定义: history 对象代表浏览器的历史记录。
-
属性和方法
back(); // 后退
forward(); // 前进
go(num); // 前进或后退到指定页面back.addEventListener("click", function () {history.back();// 或者// history.go(-1);
});forward.addEventListener("click", function () {history.forward();// 或者// history.go(1);
});
本地存储(localStorage)
-
定义: 本地存储是指在浏览器端存储数据, 使得数据在浏览器关闭后依然存在。
-
常用方法
// 存储数据
localStorage.setItem("key", "value"); //本地存储只能存储字符串// 获取数据
var value = localStorage.getItem("key");// 删除数据
localStorage.removeItem("key");
-
sessionStorag: 与 localStorage 类似, 但数据在浏览器关闭后就丢失。
-
cookie: 存储在用户本地的小型文本文件, 用于存储少量数据, 并在每次请求时发送给服务器。
-
IndexedDB: 是一个高性能的本地数据库, 它使得客户端存储大量结构化数据变得十分简单。
存储复杂数据类型
-
JSON.stringify()方法: 将对象转换为 JSON 字符串。
-
JSON.parse()方法: 将 JSON 字符串转换为对象。
// 存储对象
let obj = { name: "John", age: 30, city: "New York" };
let jsonStr = JSON.stringify(obj);
localStorage.setItem("user", jsonStr);// 获取对象
let jsonStr = localStorage.getItem("user");
let obj = JSON.parse(jsonStr);
正则表达式
-
定义: 正则表达式(regular expression)是一种文本模式, 它能帮助你方便的检查、匹配、替换文本。
-
语法:
let str = "this is a test string, pattern, flags";// 定义规则
const pattern = /pattern/;// 匹配规则
pattern.test(str); // true
pattern.exec(str); // ["pattern", index: 10, input: "this is a test string, pattern, flags"]
元字符
-
定义: 元字符(metacharacter)是指用来匹配、搜索、替换文本的特殊字符。
-
常用元字符
[a - zA - Z]; // 匹配所有小写字母和大写字母
-
分类
- 字符类: [abc] 匹配 a 或 b 或 c
- 字符类范围: [a-z] 匹配所有小写字母(有一个就为 true)
- 字符类否定: [^abc] 匹配除了 a、b、c 以外的字符
- 字符类组合: [a-zA-Z0-9] 匹配所有字母和数字
- 字符类转义: \d 匹配数字, \D 匹配非数字
- 字符类预定义: \w 匹配字母、数字、下划线, \W 匹配非字母、数字、下划线
- 字符类转义: \s 匹配空白字符(包括空格、制表符、换行符), \S 匹配非空白字符
- 字符类边界: \b 匹配单词边界
- 字符类回溯: \B 匹配非单词边界
- 字符类数量词: {n} 匹配 n 次, {n,} 匹配 n 或更多次, {n,m} 匹配 n 到 m 次
- 字符类贪婪与懒惰: * 匹配 0 或多个字符, + 匹配 1 或多个字符,? 匹配 0 或 1 个字符
- 字符类锚点(边界符): ^ 匹配字符串开始(匹配以正则开头的字符), $ 匹配字符串结束(匹配以正则结尾的字符)
- 字符类子表达式: ( ) 匹配子表达式的内容
- 字符类反向引用: \1 引用第 1 个子表达式的内容
- 字符类. : 匹配除换行符以外的任意字符
/^哈+$/.test("哈哈哈哈哈哈"); // true
/^哈+$/.test("哈哈"); // true
/^哈+$/.test("二哈"); // false
修饰符
-
定义: 修饰符(modifier)是指在正则表达式中用于控制匹配方式的符号。
-
常用修饰符
// 全局匹配
/pattern/g;// 忽略大小写
/pattern/i;
替换
let str = "this is a test string, pattern, Pattern, flags";let newStr = str.replace(/pattern/gi, "replacement"); // "this is a test string, replacement, replacement, flags"
相关文章:
JavaScript 笔记 --- part 5 --- Web API (part 3)
(webAPI part3) BOM 操作 JS 执行机制 javascript 是单线程的, 也就是说, 只能同时执行一个任务。 为了解决这个问题, 利用多核 CPU 的计算能力, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。 于是, JS 出现了同步和异步的概念。…...
HCIP(OSPF)(3)
OSPF 报文结构 公共头部:包含版本(8bit)、类型(8bit)、报文长度(16bit)、路由器 ID(32bit)、区域 ID(32bit)、校验和(16bit࿰…...
Docker:重塑应用开发与部署的未来[特殊字符]
Docker:重塑应用开发与部署的未来🚀 在数字化转型的浪潮中🌊,应用开发与部署面临着诸多挑战,如环境一致性差、资源利用率低、运维复杂等。而Docker,作为容器技术领域的明星产品🌟,凭…...
逻辑回归:损失和正则化技术的深入研究
逻辑回归:损失和正则化技术的深入研究 引言 逻辑回归是一种广泛应用于分类问题的统计模型,尤其在机器学习领域中占据着重要的地位。尽管其名称中包含"回归",但逻辑回归本质上是一种分类算法。它的核心思想是在线性回归的基础上添…...
如何改电脑网络ip地址完整教程
更改电脑的网络IP地址以满足特定的网络需求,本文将为您提供一份详细的步骤指南。其实,改变IP地址并不是一件复杂的事,能解决因为IP限制带来的麻烦。以下是操作指南: 方法一:Windows 系统,通过图形界面修改 …...
Scenario Dreamer:用于生成驾驶模拟环境的矢量化潜扩散模型
25年3月来自加拿大 Mila AI研究院、蒙特利尔大学、蒙特利尔理工、普林斯顿、加拿大 CIFAR AI Chair 计划和 Torc 机器人公司的论文“Scenario Dreamer: Vectorized Latent Diffusion for Generating Driving Simulation Environments”。 Scenario Dreamer,是一个完…...
# 基于PyTorch的食品图像分类系统:从训练到部署全流程指南
基于PyTorch的食品图像分类系统:从训练到部署全流程指南 本文将详细介绍如何使用PyTorch框架构建一个完整的食品图像分类系统,涵盖数据预处理、模型构建、训练优化以及模型保存与加载的全过程。 1. 系统概述 本系统实现了一个基于卷积神经网络(CNN)的…...
【MCP Node.js SDK 全栈进阶指南】初级篇(1):MCP开发环境搭建详解
引言 Model Context Protocol (MCP) 是一种开放标准,旨在规范模型与应用程序之间的交互方式。本文作为MCP TypeScript-SDK系列的第一篇,将详细介绍如何搭建MCP开发环境,包括Node.js与TypeScript环境配置、SDK安装、开发工具推荐以及项目结构设计,帮助你快速入门MCP应用开发…...
unity脚本-FBX自动化模型面数校验
根据目前模型资源平均面数预算进行脚本制作,自动化校验模型面数是否符合规范。 *注:文件格式为.cs。需要放置在unity资源文件夹Assets>Editor下。 测试效果(拖一个fbx文件进unity时自动检测): 以下为完整代码 us…...
压力容器的优化设计
1 优化设计概述 优化设计是一种寻找确定最优设计方案的技术。所谓“最优设计”,指的是一种方案可以满足所有的设计要求,而且所需的支出(如重量,面积,体积,应力,费用等)最小。也就是…...
在Windows上安装Git
一、安装 Git 下载 Git地址:Git - Downloads (git-scm.com) 1、在页面中找到适用于 Windows 系统的最新版本安装包(通常为.exe 格式文件),点击下载链接。 出于访问Git官网需要科学上网,不会的可以私信我要软件包&…...
python包管理器,conda和uv 的区别
python包管理器,conda和uv 的区别 以下是 conda 和 uv 在 Python 包管理中的深度对比,结合知识库内容进行分析: 1. 核心设计理念 conda 以“环境为中心”,强调跨语言支持(如 Python、R、Julia)和严格的依赖…...
Oracle在ERP市场击败SAP
2024年,甲骨文(Oracle)以87亿美元的ERP收入和6.63%的市场份额,首次超越SAP,成为全球最大的ERP应用软件供应商,结束了SAP自上世纪80年代以来在该领域的长期霸主地位。据APPS RUN THE WORLD的市场调研&#x…...
Kafka 消息积压监控和报警配置的详细步骤
Kafka 消息积压监控和报警配置的详细步骤示例,涵盖常用工具(如 Prometheus Grafana、云服务监控)和自定义脚本方法: 一、监控配置 方法1:使用 Prometheus Grafana kafka-exporter 步骤1:部署 kafka-ex…...
记录一次使用面向对象的C语言封装步进电机驱动
简介 (2025/4/21) 本库对目前仅针对TB6600驱动下的42步进电机的基础功能进行了一定的封装, 也是我初次尝试以面向对象的思想去编写嵌入式代码, 和直流电机的驱动步骤相似在调用stepmotor_attach()函数和stepmotor_init()函数之后仅通过结构体数组stepm然后指定枚举变量中的id即…...
QTextDocument 入门
一、QTextDocument QTextDocument 是 Qt 中用于处理富文本文档的核心类,支持文本格式、图片、表格等复杂内容。 1. QTextDocument 入门 1.1 基本概念 QTextDocument 是 Qt 中用于处理富文本内容的核心类,它提供了: 结构化文本存储(段落、列表、表格等) 文本格式支持(…...
Arthas进阶用法
目录 查看已加载的类反编译代码动态执行代码排查 HTTP 请求问题热更新代码获取 Spring Context 并操作查看 JVM 信息自定义命令Web Console重置与退出 查看已加载的类 sc 命令 :可以查找所有 JVM 已经加载到的类。如果搜索的是接口,还会搜索所有的实现类…...
三生原理与现有密码学的核心区别?
AI辅助创作: 三生原理与现有密码学的核心区别 一、哲学基础与设计逻辑 动态生成 vs 静态分析 三生原理以“阴阳动态平衡”为核心,通过参数化生成(如素数构造中的阴阳元联动公式)模拟系统演化过程,而现有密码…...
定义python中的函数和类
1.函数 在Python中,定义一个函数要使用def语句,依次写出函数名、括号、括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回 1.1 定义函数 def showshow(sex):if sex1:return manelse:retu…...
明远智睿2351开发板四核1.4G Linux处理器:驱动创新的引擎
在科技日新月异的今天,创新成为了推动社会进步的核心动力。而在这场创新的浪潮中,一款性能卓越、功能全面的处理器无疑是不可或缺的引擎。今天,我们介绍的这款四核1.4G处理器搭配Linux系统的组合,正是这样一款能够驱动未来创新的强…...
【前端】【业务逻辑】【面试】JSONP处理跨域原理与封装
🧠 一、JSONP 是什么? 项目内容📌 全称JSON with Padding📍 用途跨域请求数据的一种方式,绕过同源策略📦 本质通过 <script> 标签加载远程 JS 文件,这个文件执行一个回调函数并传入数据 …...
深入探索RAG:用LlamaIndex为大语言模型扩展知识,实现智能检索增强生成
大型语言模型(LLM),如ChatGPT和Llama,在回答问题方面表现出色,但它们的知识仅限于训练时所获取的信息。它们无法访问私有数据,也无法在训练截止日期之后学习新知识。那么,核心问题就是……我们如…...
移远通信智能模组助力东成“无边界智能割草机器人“闪耀欧美市场
2025年4月21日,移远通信宣布,旗下SC206E-EM智能模组已成功应用于江苏东成电动工具有限公司旗下的DCK TERRAINA无边界智能割草机器人。 这款智能模组高度集成计算、通信、定位等多元能力,以小型化、低功耗、实时性强和低成本等综合优势&#…...
测试-时间规模化定律可以改进世界基础模型吗?
25年3月来自 UT Austin、UW Madison 和 Nvidia 的论文“Can Test-Time Scaling Improve World Foundation Model?”。 世界基础模型(WFM)通过根据当前的观察和输入预测未来状态来模拟物理世界,已成为许多物理智能(PI)…...
VMwaer虚拟机复制粘贴、ROS系统安装
一、VMwaer虚拟机复制粘贴设置:设置完记得重启VMwaer 1.首先确定 虚拟机设置-->选项-->客户机隔离-->勾选 启用拖放 启用复制粘贴 2.如果还是不能粘贴 可能是 没有 VMware Tools 可参考 怎么在linux安装vmware tools-CSDN博客 设置完记得重启VMwaer。…...
安装 vmtools
第2章 安装 vmtools 1.安装 vmtools 的准备工作 1)现在查看是否安装了 gcc 查看是否安装gcc 打开终端 输入 gcc - v 安装 gcc 链接:https://blog.csdn.net/qq_45316173/article/details/122018354?ops_request_misc&request_id&biz_id10…...
HCIP(综合实验2)
1.实验拓补图 2.实验要求 1.根据提供材料划分VLAN以及IP地址,PC1/PC2属于生产一部员工划分VLAN10,PC3属于生产二部划分VLAN20 2.HJ-1HJ-2交换机需要配置链路聚合以保证业务数据访问的高带宽需求 3.VLAN的放通遵循最小VLAN透传原则 4.配置MSTP生成树解决二层环路问题…...
机器学习第一篇 线性回归
数据集:公开的World Happiness Report | Kaggle中的happiness dataset2017. 目标:基于GDP值预测幸福指数。(单特征预测) 代码: 文件一:prepare_for_traning.py """用于科学计算的一个库…...
Spark-Streaming简介及核心编程
一、核心概念: 1.Spark-Streaming 是流式数据处理框架,基于 **DStream(离散化流)** 抽象,将实时数据划分为多个时间区间的 RDD 序列。 DStream 本质是RDD 序列,每个时间区间数据对应一个 RDD。 2.特点&a…...
优化提示词方面可以使用的数学方法理论:信息熵,概率论 ,最优化理论
优化提示词方面可以使用的数学方法理论:信息熵,概率论 ,最优化理论 目录 优化提示词方面可以使用的数学方法理论:信息熵,概率论 ,最优化理论信息论信息熵明确问题主题提供具体细节限定回答方向规范语言表达概率论最优化理论信息论 原理:信息论中的熵可以衡量信息的不确定性。…...
Sqlserver安全篇之_Sqlcmd命令使用windows域账号认证sqlserver遇到问题如何处理的案例
sqlcmd https://learn.microsoft.com/zh-cn/sql/tools/sqlcmd/sqlcmd-connect-database-engine?viewsql-server-ver16 sqlcmd -S指定的数据库连接字符串必须有对应的有效的SPN信息,否则会报错SSPI Provider: Server not found in Kerberos database. 正常连接 1、…...
基于华为云 ModelArts 的在线服务应用开发(Requests 模块)
基于华为云 ModelArts 的在线服务应用开发(Requests 模块) 一、本节目标 了解并掌握 Requests 模块的特点与用法学会通过 PythonRequests 访问华为云 ModelArts 在线推理服务熟悉 JSON 模块在 Python 中的数据序列化与反序列化掌握 Python 文件 I/O 的基…...
Graph Database Self-Managed Neo4j 知识图谱存储实践1:安装和基础知识学习
Neo4j 是一个原生图数据库,这意味着它在存储层实现了真正的图模型。它不是在其他技术之上使用“图抽象”,而是以您在白板上绘制想法的相同方式在Neo4j中存储数据。 自2007年以来,Neo4j已经发展成为一个丰富的工具、应用程序和库的生态系统。…...
【Python进阶】VSCode Python开发完全指南:从环境配置到高效调试
目录 前言技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比 二、实战演示环境配置要求核心代码实现案例1:配置虚拟环境案例2:智能代码补全案例3:调试配置 运行结果…...
vscode:Live Server Preview插件
这个插件不用另外打开浏览器;它是直接在Vscode里面预览html的,并且是自动实时更新的,不用不停地CtrlS保存查看 使用方法:F1 -> 弹出一个窗口输入live,选择即可。 运行结果如下:...
关于在Springboot中设置时间格式问题
目录 1-设置全局时间格式1.Date类型的时间2.JDK8时间3.使Date类和JDK8时间类统统格式化时间 2-关于DateTimeFormat注解 1-设置全局时间格式 1.Date类型的时间 对于老项目来说,springboot中许多类使用的是Date类型的时间,没有用到LocalDateTime等JDK8时…...
双周报Vol.70: 运算符重载语义变化、String API 改动、IDE Markdown 格式支持优化...多项更新升级!
2025-04-21 语言更新 async 函数的调用处语法改为和 error 相同的 f!(..),原语法 f!!(..) 将触发警告 运算符重载的语义从基于方法迁移到了基于 trait,以后重载运算符需要通过给 moonbitlang/core/builtin 中对应的 trait 添加 impl 的形式。各个运算符…...
AI 技术发展:从起源到未来的深度剖析
一、AI 的起源与早期发展 人工智能(AI)作为计算机科学的重要分支,其诞生可以追溯到 20 世纪中叶。1943 年,艾伦・图灵提出图灵机的概念,为计算机科学和 AI 理论奠定了基础。1950 年,图灵又提出著名的图灵…...
【前端】【业务逻辑】 数据大屏自适应方案汇总
前端数据大屏自适应设计方案全解析 在前端数据大屏的开发中,自适应设计是关键环节,它能确保大屏在不同设备和屏幕尺寸上都能呈现出良好的视觉效果和交互体验。除了常见的 transform: scale、rem/vw、Flex/Grid 等方案外,还有其他有效的方法可…...
Java基础复习(JavaSE进阶)第六章 IO流体系
6-1 File类 01 122、File、IO流概述 02 123、File类:对象的创建 03 124、File类:判断、判断信息相关的方法 04 125、File类:创建、删除文件的方法 05 126、File类:遍历文件夹的方法 6-2 前置知识 01 127、前置知识:方…...
kvm下的ceph主机启动io请求统计
背景 假如一个主机存储在ceph里面,我们想统计下一次启动过程中的io读取的情况,那么可以通过下面的方法来统计 启动时间也可以通过在宿主机里面去查看,通过日志这边要方便一点,无需登录到虚拟机内部 日志开启 [global] fsid 406…...
go-Casbin使用
本次测试代码是基于单租户的RBAC鉴权 依赖 github.com/casbin/casbin/v2 github.com/casbin/gorm-adapter/v2文件存储规则文件 model.pml [request_definition] r sub, obj, act[policy_definition] p sub, obj, act[role_definition] g _, _ # 用户,角色[polic…...
基于YOLOv11的106种手语识别分析系统
基于YOLOv11的手语识别分析系统 【包含内容】 【一】项目提供完整源代码及详细注释 【二】系统设计思路与实现说明 【三】多平台适配优化,支持Windows、macOS和Linux系统,确保中文字体正常渲染 【四】识别的类别数量:106种,具体类…...
CentOS创建swap内存
服务器版本为CentOS7 一、检查现有 swap 空间 sudo swapon --show如果系统中没有 swap 空间或者现有的 swap 空间不足,可以继续后续步骤来创建 swap 空间。 二、创建 swap 文件(推荐 2GB 作为示例) sudo dd if/dev/zero of/swapfile bs1M …...
OpenHarmony OS 5.0与Android 13显示框架对比
1. 架构概述 1.1 OpenHarmony OS 5.0架构 OpenHarmony OS 5.0采用分层架构设计,图形显示系统从底层到顶层包括: 应用层:ArkUI应用和第三方应用框架层:ArkUI框架、窗口管理API系统服务层:图形合成服务、窗口管理服务…...
详解Node.js中的setImmediate()函数
setImmediate() 是 Node.js 提供的一个定时器函数,用于在 事件循环的 “Check” 阶段 执行回调函数。它与 setTimeout() 相似,但两者有着显著的区别,主要体现在回调函数的执行时机上。 什么是事件循环(Event Loop) 在…...
使用C#写的HTTPS简易服务器
由于监控网络之用,需要写一个https服务器。 由于用到https,因此还需一个域名证书,可以免费申请,也可以用一个现有的。 接下来还需在Windows上安装证书,注册证书。 安装证书 找到证书,点击,一路…...
C# 事件知识文档
C# 事件知识文档 概述 在 C# 中,事件(Event) 是一种特殊的机制,它基于委托实现,用于支持发布-订阅模式。事件允许对象在发生特定操作时通知其他对象,而无需直接引用这些对象。这种机制非常适合于实现诸如用户界面交互、状态变化通知等场景。 核心概念 发布者(Publishe…...
C++进阶--二叉搜索树
文章目录 C进阶--二叉搜索树概念算法复杂度模拟实现结构定义插入查找删除剩余的次要接口中序遍历: 构造,析构,拷贝构造,赋值重载 结语 很高兴和大家见面,给生活加点impetus!!开启今天的编程之路…...
互联网大厂Java面试:从基础到进阶的技术点探讨
场景:赵大宝的面试旅程 在互联网大厂的面试现场,严肃的面试官李老师正在准备对求职者赵大宝进行一场Java技术栈的深度考核。赵大宝是一位以幽默著称的程序员,面试官希望通过这次面试能全面了解他的技术能力。 第一轮提问 李老师࿱…...