Javascript基础-BOM

news2024/11/14 16:43:34

文章目录

  • BOM——Browser Object Model
    • 定时器--延时函数
  • JS执行机制
    • 具体流程
  • 三个常见对象
    • location对象
    • navigator对象
    • history对象
  • 本地存储
    • 介绍
      • sessionStorage
      • sessionStorage
    • 存储复杂数据类型
    • 字符串拼接
  • 正则表达式
    • 元字符

BOM——Browser Object Model

浏览器对象模型,操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等
在这里插入图片描述
window对象是一个全局对象,也可以说是JavaScript中的顶级对象
像document、alert()、 console.log()这 些都是window的属性,基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器–延时函数

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

1、语法setTimeout(回调函数,等待的毫秒数)
setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
2、清除
ClearTimeout(变量名)

JS执行机制

浏览器有两个引擎,一个网页渲染引擎,另一个JS解析器。
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做-件事。
这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加, 之后再删除。
单线程就意味着,所有任务需要排队,前一一个任务结束,才会执行后-一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核CPU的计算能力,HTML5 提出Web Worker标准,允许JavaScript 脚本创建多个线程。于是, JS中出现了同步和异步。
同步任务在主线程上执行,形成一个执行栈。JS异步任务通过回调函数实现

常见异步任务:
	普通事件,如click、resize 等
	资源加载,如load. error 等
	定时器,包括setInterval、setTimeout 等
	异步任务相关添加到任务队列中(任务队列也称为消息队列)

具体流程

1.先执行执行栈中的同步任务。
2.异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
在这里插入图片描述
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。

三个常见对象

location对象

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

常用属性和方法:
	href属性获取完整的URL地址,对其赋值时用于地址的跳转
	search属性获取地址中携带的参数,符号?后面部分
	hash属性获取地址中的哈希值,符号#后面部分
		后期vue路由的铺垫,经常用于不刷新页面,显示不同页面
	reload方法用来刷新当前页面,传入参数true时表示强制刷新(经常看到的刷新按钮),不加代表普通刷新

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 II iphone) {
		location.href = 'http://m.itcast.cn'
	} 
})(

history对象

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

属性和方法:
	back():可以后退功能
	forward():前进功能
	go(参数):前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

本地存储

介绍

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大,sessionStorage和localStorage约 5M左右

sessionStorage

目标:能够使用localStorage把数据存储的浏览器中
作用:可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
    可以多窗口(页面)共享(同一浏览器可以共享)
    以键值对的形式存储使用

1、数据在f12后通过application中看
2、存储数据:localStorage.setltem('key',value')
3、localStorage.getltem('key')
4、删除:localStorage.removeltem('key')
5、改:localStorage.setltem('key',value')    //和存一样
PS:本地存储只能存字符串,传入什么数据都会改成字符串类型

sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage基本相同

存储复杂数据类型

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

1、语法: JSON.stringify(复杂数据类型)
		localStorage.setItem( 'key', JSON. stringify(obj))
		JSON对象属性和值有引号,而是引号统一是双引号
2、取数据时将JSON字符串转换为对象:
	JSON.parse(localStorage.getItem('key'))

字符串拼接

因为用到字符串,之前+连接效率低,可以用map()和join()数组方法实现字符串拼接

1、map()遍历数组处理数据,并且返回新的数组
	const arr =['red','blue',green' ];
	const newArr = arr.map(function (ele, index) {
		console.log(eLe) // 数组元素
		console. log(index) //数组索引号
		return ele+'颜色'
	})
	console.log (newArr)   // [ 'red颜色','bLue颜色', 'green颜色 ']
	
	PS:map重点在于有返回值,forEach没有返回值

2、join()方法用于把数组中的所有元素转换一个字符串
	const arr = [ 'red颜色',' blue颜色',' green颜色' ]
	console.1og(arr.join('')) // red颜色blue颜色green颜色
	里面参数为空默认用逗号分隔

正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。
作用:
    输入指定格式的字符串
    过滤掉页面中一些敏感词
    从字符串中获取想要的特定部分

1、语法:
	const变量名= /表达式/           //是正则表达式的字面量
2、判断是否有包含表达式的表达式的字符串
	regObj.test(被检测的字符串)   匹配返回true,否则false
	exec()方法在一一个指定字符串中执行一个搜索匹配
	如果匹配成功,exec() 方法返回一个数组,否则返回null

元字符

MDN
正则测试工具

1、边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
	正则表达式中的边界符( 位置符)用来提示字符所处的位置,主要有两个字符
	^:表示匹配行首的文本(以谁开始)
	$:表示匹配行尾的文本(以谁结束)
2、量词(表示重复次数)
	设置某个模式出现次数
	*:重复零次或更多次
	+:重复一-次或更多次
	?:重复零次或一-次
	{n}:重复n次
	{n,}:重复n次或更多次
	{n,m}:重复n到m次
	逗号两侧不要出现空格
3、字符类(比如\d表示0~9)
	[]匹配字符集合,后面的字符串只要包含abc中任意一个字符,都返回true。
	eg.console.log(/[abc]/.test('andy')) // true
		[a-z] 表示a到Z 26个英文字母都可以
		[a-zA-Z] 表示大小写都可以
		[0-9]表示0~9的数字都可以
		[]里面加上1^取反符号,[^a-z]匹配除了小写字母以外的字符
	预定义:指的是某些常见模式的简写方式。
	\d:匹配0-9之间的任一数字,相当于[0-9]
	\D:匹配所有0-9以外的字符,相当于[^0-9]
	\w:匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]
	\W:除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]
	\s:匹配空格(包括换行符、制表符、空格符等),相等于[\t\r\n\vf]
	\S:匹配非空格的字符,相当于[^\tlr\n\v\f]
4、修饰符
	修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等
	语法:/表达式/修饰符
		i是单词ignore的缩写,正则匹配时字母不区分大小写
		g是单词global的缩写,匹配所有满足正则表达式的结果
5、替换replace
	const str = 字符串.replace(/正则表达式/,'替换的文本' )  
	将字符串钟符合正则表达式的替换掉,结果存在str中,这只能替换一个
	const str = 字符串.replace(/正则表达式/g,'替换的文本' )  
	全局替换用到修饰符g

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode:26. 删除有序数组中的重复项 | 双指针】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

怎么从外面远程访问服务器设备?

怎么从外面远程访问服务器设备? “我家里有一台服务器设备,当我在学校时需要远程访问家里的服务器。请问是否可以从外网远程访问家里的服务器设备,有什么方法可以实现吗?” 远程访问服务器设备,一种典型…

20量子比特!芬兰成功研发第二台量子计算机

(图片来源:网络) 近期,芬兰国家技术研究中心(VTT)宣布,已顺利研发芬兰第二台量子计算机,该计算机具有20个超导量子比特,由芬兰国家技术研究中心(VTT&#xf…

java如何获取调用接口的ip?

获取调用者的ip 场景:想知道哪个ip访问的某个接口时,就需要打印出来看看,这时就可以使用这个方法了。 案例: //HttpServletRequest 入参加上,请求对象public ForkResponse queryXXX(RequestBody XXXX xxxx, HttpServletRequest …

Ps:快速选择工具​

对那些有清晰轮廓的对象进行抠图,在 Ps 中传统的方法是钢笔工具和快速选择工具 Quick Selection Tool。其中,快速选择工具以其使用简单快捷而受到众人喜爱。 快捷键:W ◆ ◆ ◆ 常用操作方法与技巧 1、将快速选择工具的笔刷从目标对象的内部…

用前端框架Bootstrap和Django实现用户注册页面

01-新建一个名为“mall_backend”的Project 命令如下: CD E:\Python_project\P_001\myshop-test E: django-admin startproject mall_backend02-新建应用并注册应用 执行下面条命令依次创建需要的应用: CD E:\Python_project\P_001\myshop-test\mall…

Nacos常规问题汇总

一、Nacos常规问题 Nacos是什么 Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。详情可以参考Nacos官网介绍。 Nacos如何支持多环境 在日常使用中常常需要不同的环…

“破解我!“---160个CrackMe练习002-Afkayas.1.Exe

文章目录 前言题目分析程序分析Keygen 前言 系列之002,记录学习。 题目分析 一道一星的题目 惯例查壳。 32-bit的文件,用的是 VB 写的。 关于Visual Basic: Visual Basic(VB)是由微软公司开发的包含环境的事件驱动…

酒店预订订房小程序源码系统 带完整搭建教程

酒店预订订房小程序源码系统是一种基于互联网技术的线上预订平台,旨在为用户提供方便快捷的酒店预订服务。该系统通常包括前端用户界面、后端服务器和数据库三个部分,其中前端界面主要展示酒店信息、订房需求信息、订单信息等,后端服务器负责…

国风AI绘画平台Trik;「一个女孩的一生」走红;音视频转文字的精准处理指南;神经网络原理动画 | ShowMeAI日报

👀日报&周刊合集 | 🎡生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 🉑 智谱AI推出第三代基座大模型ChatGLM3,瞄向了 GPT-4V https://github.com/THUDM/ChatGLM3 10月27日,智谱AI宣布…

EVM6678L 开发教程: 烧写 IBL(Intermediate Bootloader)

目录 EVM6678L 开发教程: 烧写 IBL烧写出厂IBL修改IBL引导格式 EVM6678L 开发教程: 烧写 IBL 参考: C:\ti\mcsdk_2_01_02_06\tools\boot_loader\ibl\doc\README.txtC:\ti\mcsdk_2_01_02_06\tools\boot_loader\ibl\doc\evmc6678-instructions.txtC:\ti\mcsdk_2_01_02_06\tools…

js 异常数组 [空白,Array(10),空白,Array(10),空白]

异常数组 [空白,Array(10),空白,Array(10),空白] 的解决方案

Elasticsearch(二)---搭建

搭建es 不允许root用于运行 创建esuser用户: useradd esuser 设置密码 passwd esuser 让esuser拥有sudo的权限,需要修改/etc/sudoers文件 需要先给/etc/sudoers添加写的权限 [rootnode1 ~]# vim /etc/sudoers 改完之后将写权限删除 三台服务器上操…

halcon canny 和opencv c++ canny 实现对比

Opencv和C实现canny边缘检测_opencv边缘增强-CSDN博客 一、canny实现步骤 1、图像必须是单通道的,也就是说必须是灰度图像 2、图像进行高斯滤波,去掉噪点 3、sobel 算子过程的实现,计算x y方向 、梯度(用不到,但是…

如何选购适合自己的内衣洗衣机?性价比高内衣洗衣机推荐

内衣洗衣机,在几年前或许是个新事物,但近两年却是成为了很普遍的家电产品,由于近几年内衣洗衣机需求量的增加,我们在商场的电子产品区都能见到它,就像普通的家庭洗衣机那样,直接摆在展台上销售,…

分布式:一文掌握分布式ID生成方案

目录 背景1、UUID2、数据库自增ID2.1、主键表2.2、ID自增步长设置 3、号段模式4、Redis INCR5、雪花算法6、美团(Leaf)7、百度(Uidgenerator)8、滴滴(TinyID)总结比较 背景 在复杂的分布式系统中,往往需要对大量的数据进行唯一标识,比如在对一个订单表进…

从零开始的目标检测和关键点检测(一):用labelme标注数据集

从零开始的目标检测和关键点检测(一):用labelme标注数据集 1、可视化标注结果2、划分数据集3、Lableme2COCO,将json文件转换为MS COCO格式 前言:前段时间用到了mmlab的mmdetction和mmpose,因此以一个小的数…

python练习(猜数字,99乘法表)

python练习(猜数字&#xff0c;99乘法表) 猜数字 import random num1random.choice(range(1,101))for i in range(11):num2input("plz input a number:")num2int(num2)if num1<num2:print("太大了&#xff0c;小一点")elif num1>num2:print("…

【每日一题】2003. 每棵子树内缺失的最小基因值-2023.10.31

题目&#xff1a; 2003. 每棵子树内缺失的最小基因值 有一棵根节点为 0 的 家族树 &#xff0c;总共包含 n 个节点&#xff0c;节点编号为 0 到 n - 1 。给你一个下标从 0 开始的整数数组 parents &#xff0c;其中 parents[i] 是节点 i 的父节点。由于节点 0 是 根 &#xf…

可视化 | 数据可视化降维算法梳理

文章目录 &#x1f4da;数据描述&#x1f407;iris&#x1f407;MNIST &#x1f4da;PCA&#x1f407;算法流程&#x1f407;图像描述 &#x1f4da;Kernel-PCA&#x1f407;算法流程&#x1f407;图像描述 &#x1f4da;MDS&#x1f407;算法流程&#x1f407;图像描述 &#…