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

【JavaScript】JavaScript开篇基础（6）

news 文章来源：https://blog.csdn.net/Easonmax/article/details/143755317 2025/5/15 0:00:52

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区jj指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练，巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我，提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

        学习前端知识，更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

8.JavaScript专栏

        在学习html5和css3的基础上使我们的前端使用更高级

📘 持续更新中，敬请期待❤️❤️

2. BOM

BOM（Browser Object Model）是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM 是由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

3.窗口加载事件

window.onload，是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用处理函数。

因为js是由上到下依次执行的，一般来说，我们需要按照先写标签，然后将script标签写在标签的下面的方式，但是我们可以通过window.onload来改变script标签的位置，将其放在标签上面，因为这个方法会在页面加载完毕之后才执行，所以执行这个方法的时候，页面中的DOM元素已经全部被渲染了。

<body><script>window.onload = function () {var btn = document.querySelector('button');btn.addEventListener('click',function () {alert('你点我？');})}</script><button>点击</button>
</body>

在以上代码中，我们没有按照之前的标准，将script标签写在button标签下面，但是依旧是可用的。

如果页面中存在多个window.onload，会以最后一个为准（最后一个会覆盖前面的事件）

这是传统事件存在的弊端，为了解决这一问题，我们可以使用监听事件替换window.onload

window.addEventListener('load',function () {}

这样就可以添加多个事件。

如果页面的图片非常多，那么用原来的onload要等很久等图片加载完才能执行该行为，这就会造成错误了。那么推荐使用以下方式。

document.addEventListener('DOMContentLoaded',function () {})

 DOMContentLoaded 事件触发时，仅当html中元素加载完成，不包括css中代码、图片、flash等，这样就很快了。

4.setTimeout 定时器和setInterval() 定时器

window.setTimeout(调用函数,延迟的毫秒数);

  1. window在调用的时候可以省略
  2. 单位是毫秒，省略是0秒，也就是立马执行
  3. 这个调用函数可以直接写函数，还可以写函数名（不需要带括号）

window.setInterval(调用函数,间隔毫秒数)

语法规则上与上述很相似，但与setTimeout()不同的是，setTimeout只会执行一次，但是setInterval会循环执行

5.清除定时器setTimeout()和setInterval() 

使用clearTimeout(定时器名称)函数可以清除setTimeout定时器，请看如下代码

<body><button>点我清除定时器</button><script>var btn = document.querySelector('button');var timer1 = setTimeout(function () {alert('我是Jim.kk');},5000);btn.onclick = function () {clearTimeout(timer1);}</script>
</body>

注意在执行settimeout时给定时器名称很重要，因为当要清除它时，我们需要用到名称，执行setinterval时同理。

使用clearInterval(定时器名称)函数可以清除setInterval定时器。这里同理 

6.同步与异步 

JavaScript是单线程，所以同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务，但是，如果前一个任务的执行时间很长，后一个任务就不得不等着，当用户向后台获取大量的数据时，不得不等到所有数据都获取完毕才能进行下一步操作，用户只能在那里干等着，严重影响用户体验。
因此，JavaScript在设计的时候，就已经考虑到这个问题，主线程可以完全不用等待时间长的任务，可以先挂起处于等待中的任务，先运行排在后面的任务，再回过头执行挂起的时间长的任务。因此，任务就可以分为同步任务和异步任务。

其实同步和异步，
无论如何，做事情的时候都是只有一条流水线（单线程），
同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务

异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程

 注意如果要进入异步任务中，必须为回调函数，一般而言，回调函数有以下三种类型:

1、普通事件，如click、resize等
2、资源加载，如load、error等

3、定时器，包括setlnterval、setTimeout等

 <script>setTimeout(function(){console.log(3);},5000)console.log(1);console.log(2);</script>

执行顺序是这样的，先输出1和2等待5秒后输出3.

1. 先执行执行栈中的同步任务
2. 遇到异步任务（回调函数）就放入任务队列中
3. 一旦执行栈中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行。 

总的来说，JavaScript的异步机制包括以下几个步骤：

1. 所有同步任务都在主线程上执行，形成一个执行栈。
2. 主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
3. 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，然后执行。
4. 主线程不断的重复上面的第三步

7.窗口大小变化事件

window.onresize = functoin(){}
或者
window.addEventListener('resize',function () {} )

 只要文档页面大小发生变化，就会触发里面的处理函数。

<body><button>当宽度小于900px的时候，我就消失啦</button><script>window.addEventListener('resize',function () {// console.log('变化了');// console.log('内高：'+window.innerHeight+'\t内宽' + window.innerWidth);var btn = document.querySelector('button');if ( window.innerWidth < 900 ) {btn.style.display = 'none';} else {btn.style.display = 'block';}})</script>
</body>

以上代码的执行效果：当我们改变浏览器框的大小的时候，当宽度小于900px，这个button按钮就会消失。

这种效果常用在一些页面元素渲染上，比如原本有四个列的某种元素，但是当页面较窄的时候，我们会隐藏其中某个列，以保证页面的正常显示。

注意innerheight指的是文档页面的高度，innerwidth指的是文档页面的宽度。

8.location对象 

window对象给我们提供了一个location属性用于获取或设置窗体的URL.

以下是它属性： 

这里我们只需要记住href和search 。

http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most

这是一个url地址。

href得到的就是这个全部url，而我们search得到的便是？后面的字符串。

href我们可以利用它去跳转页面，将其他url赋值给它就行。

search我们可以利用它得到参数。

以下是它方法： 

Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，则强制刷新，强制刷新不会保留缓存。当值为 false 或者未传参时，浏览器刷新后内容依旧不变。 

Location.assign()方法会触发窗口加载并显示指定的URL的内容

document.location.assign('https://www.baidu.com');

Location.replace() 方法以给定的URL来替换当前的资源。 与assign() 方法不同的是，调用 replace() 方法后，之前页面不会保存到会话历史中，这样，用户点击回退按钮时，将不会再跳转回该页面，而assign可以回退到之前页面。

9.history对象

该对象可以控制历史记录。 

back和forward均是前进和后退一格，而go可以很多格，它们前面均是history。

相关文章：

【JavaScript】JavaScript开篇基础（6）

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…...

编程日记 2024/11/16 12:38:36

Spark RDD、DStream、DataFrame、DataSet 在窗口操作上的区别

Spark RDD、DStream、DataFrame、DataSet 在窗口操作上的区别 1. Spark RDD 是否支持窗口操作&#xff1a; RDD 本身没有专门的窗口操作算子。原因&#xff1a; RDD 是一个弹性分布式数据集&#xff0c;设计为通用的、不可变的操作单元&#xff0c;主要用于批处理场景。窗口函…...

编程日记 2024/11/16 12:33:32

http自动发送请求工具(自动化测试http请求)

点击下载《http自动发送请求工具(自动化测试http请求)》 前言 在现代软件开发过程中&#xff0c;HTTP 请求的自动化测试是确保应用程序稳定性和可靠性的关键环节。为了满足这一需求&#xff0c;我开发了一款功能强大且易于使用的自动化 HTTP 请求发送工具。该工具基于 C# 开发…...

编程日记 2024/11/16 12:32:30

网络IP地址会经常换吗？深入解析与实操指南

在互联网的生态系统中&#xff0c;IP地址&#xff08;Internet Protocol Address&#xff09;是每台连接设备的唯一标识符&#xff0c;它在网络通信中起着至关重要的作用。然而&#xff0c;不少用户观察到自己的IP地址有时会发生变化&#xff0c;这引发了诸多疑问。本文旨在详细…...

编程日记 2024/11/16 12:31:28

MapLocNet由粗到细的定位网络

论文链接 MapLocNet: Coarse-to-Fine Feature Registration for Visual Re-Localization in Navigation Mapshttps://arxiv.org/html/2407.08561v1 问题背景 当前自动驾驶的定位主要依赖于高精度的地图和GPS信号&#xff0c;但在城市环境中&#xff0c;GPS信号易受到多路径传…...

编程日记 2024/11/16 12:28:25

【Docker】Mac安装Docker Desktop导致磁盘剩余空间较少问题如何解决？

目录 一、背景描述 二、解决办法 三、清理效果 四、理论参考 解决方法 1. 清理未使用的 Docker 镜像、容器和卷 2. 查看 Docker 使用的磁盘空间 3. 调整 Docker 的存储位置 4. 增加磁盘空间 5. 调整 Docker Desktop 配置 6. 使用 Docker 清理工具&#xff08;例如 D…...

编程日记 2024/11/16 12:27:23

构建客服知识库：企业效率提升的关键步骤

客服知识库是企业提升客户服务效率和质量的重要工具。它不仅帮助客服团队快速准确地回答客户问题&#xff0c;还能通过数据分析来优化服务流程和提升客户满意度。 1. 明确知识库的目标和范围 构建客服知识库的第一步是明确其目标和范围。这包括确定知识库的主要用户群体、需要…...

编程日记 2024/11/16 12:26:19

java-Day06 内部类 Lambda表达式 API

内部类 内部类:就是在一个类中定义一个类 格式例: public class Outer { public class Inner { } } 内部类分类 1.成员内部类(了解) 创建成员内部类 外部类.内部类 对象名new外部类().new内部类() 2.静态内部类(了解) 3.局部内部类(了解) 4.匿名内部类…...

编程日记 2024/11/16 12:25:18

Springboot配置全局异常通用返回

Springboot配置全局异常通用返回 前言 前端对接了部分接口后&#xff0c;开始抱怨&#xff0c;“后端接口出参的格式总是千奇百怪&#xff0c;没有一个固定的格式&#xff0c;错误信息提示也不明朗&#xff0c;业务的状态码总是东一个西一个&#xff0c;前端这都不好做统一的…...

编程日记 2024/11/16 12:23:15

计算机视觉在自动驾驶汽车中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机视觉在自动驾驶汽车中的应用 计算机视觉在自动驾驶汽车中的应用 计算机视觉在自动驾驶汽车中的应用 引言 计算机视觉在自动…...

编程日记 2024/11/16 12:22:13

wordpress functions文件的作用及详细说明

WordPress的functions.php文件是一个非常重要的主题文件&#xff0c;它允许开发者和用户向网站添加自定义代码片段&#xff0c;从而修改网站功能或添加新内容。以下是functions.php文件的主要作用和一些详细说明&#xff1a; 1. 自定义功能添加&#xff1a; functions.php文件…...

编程日记 2024/11/16 12:21:12

Cellebrite VS IOS18Rebooting

Cellebrite VS IOS18Rebooting我们想分享一些有关 iOS 18 重启“功能”的信息。在过去一周左右的时间里&#xff0c;人们对 iOS 18 中一项新的未记录功能产生了极大关注&#xff0c;该功能会导致设备在一段时间不活动后重新启动。 这意味着&#xff0c;如果设备在一定时间不活…...

编程日记 2024/11/16 12:18:10

[每日一氵] PySpark 的 log GC 部分是什么意思

2024-11-15T11:10:40.2920800: 2850.503: [GC (Allocation Failure) [PSYoungGen: 142705K->3472K(141312K)] 1403514K->1264289K(1543168K), 0.0170225 secs] [Times: user0.05 sys0.00, real0.01 secs] 这一行日志来自Java的垃圾收集器&#xff08;Garbage Collector, …...

编程日记 2024/11/16 12:13:04

Transformer中的算子：其中Q,K，V就是算子

目录 Transformer中的算子 其中Q,K，V就是算子 一、数学中的算子 二、计算机科学中的算子 三、深度学习中的算子 四、称呼的由来 Transformer中的算子 其中Q,K，V就是算子 “算子”这一称呼源于其在数学、计算机科学以及深度学习等多个领域中的广泛应用和特定功能。以下是…...

编程日记 2024/11/16 12:12:03

JWTUtil工具类

写一个Jwt工具类 导入如下pom.xml依赖 <!--fastjson依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.33</version></dependency><!--jwt依赖--><dependenc…...

编程日记 2024/11/16 12:11:02

【eNSP】企业网络架构实验——vlan间的路由通信（三）

VLAN间的路由是指不同VLAN之间的通信&#xff0c;通常VLAN是用来分割网络流量和提高网络安全性的。 一、VLAN 1. 什么是VLAN&#xff1f; VLAN&#xff0c;全称是虚拟局域网&#xff08;Virtual Local Area Network&#xff09;&#xff0c;是一种将物理局域网&#xff08;LA…...

编程日记 2024/11/16 12:09:01

软件测试基础二十九 （接口测试 mock）

Mock&#xff08;模拟&#xff09; 一、定义 Mock是在软件开发测试阶段使用的一种技术&#xff0c;用于模拟对象的行为。它主要用于隔离被测试单元&#xff08;如函数、类或模块&#xff09;与外部依赖&#xff0c;使得测试更加独立、可控&#xff0c;并且可以在不需要真实外…...

编程日记 2024/11/16 12:03:55

Learning RAG and Ragas

说明&#xff1a;这是我的学习笔记&#xff0c;很多内容转自网络&#xff0c;请查阅文章末尾的参考资料。 文章目录 RAGRagas评估框架评估维度评估指标Faithfulness (忠实度)Answer Relevance (答案相关度)Context Precision (上下文精确度)Context Recall (上下文召回率)Cont…...

编程日记 2024/11/16 12:02:54

Java项目实战II基于微信小程序的实习记录（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 在当今竞争激烈的就业市场中&#xff0…...

编程日记 2024/11/16 12:01:53

GIT将源码推送新分支

1. 创建并切换到新分支 首先&#xff0c;确保你在本地创建了一个新的分支并切换到该分支&#xff1a; git checkout -b new-branch-namenew-branch-name 是你要创建的新分支名称&#xff0c;替换为你需要的名称即可。 2. 确保所有更改已提交 在推送之前&#xff0c;确保你的…...

编程日记 2024/11/16 11:58:50

Python习题 250：删除空文件夹

（编码题）编写一段 Python 代码，删除指定目录的空文件夹。 参考答案： 使用 pathlib 库可以更简洁地处理文件路径。下面是一个使用 pathlib 库递归删除空文件夹的 Python 代码：from pathlib import Pathdef remove_empty_dirs(directory):# 遍历目录及其子目录for path in…...

编程日记 2024/11/16 11:57:49

基本数据类型：Kotlin、Dart (Flutter)、Java 和 C++ 的比较

文章目录 基本数据类型的比较整数类型浮点类型字符类型布尔类型小结 有符号和无符号整数二进制补码表示精度丢失问题结论 在编程语言中&#xff0c;基本数据类型是构建更复杂数据结构的基础。在本文中&#xff0c;我们将比较 Kotlin、Dart (Flutter)、Java 和 C 中的基本数据类…...

编程日记 2024/11/16 11:52:42

源码解析-Spring Eureka（更新ing）

源码解析-Spring Eureka 文章目录 源码解析-Spring Eureka前言一、从Spring.factory和注解开始二、重要的一步EurekaServerInitializerConfiguration三、初始化了什么&#xff1f;自动保护 四, 重新回到EurekaServerAutoConfiguration 前言 无 一、从Spring.factory和注解开始…...

编程日记 2024/11/16 11:50:40

python调用百度通用翻译API

文章目录 1. 简介2. 使用步骤3. api调用实现4. 编码实现 1. 简介 前段时间在做视频语音识别生成多语种字幕时&#xff0c;使用了百度翻译通用翻译api进行翻译。百度翻译平台经过个人认证之后&#xff0c;每月有200万字符的免费翻译额度。还是比较舒服的。 百度翻译开放平台是百…...

编程日记 2024/11/16 11:48:38

Timeline动画「硬切」的问题

1&#xff09;Timeline动画「硬切」的问题 2&#xff09;移动平台纹理压缩格式选择ASTC&#xff0c;美术出图还需遵守POT吗 3&#xff09;如何去掉DOTS Unity.Entities.Graphics创建的BatchRendererGroup的UI相机回调 4&#xff09;Timeline播放动画会产生位移的问题 这是第409…...

编程日记 2024/11/16 11:47:36

CentOS 9 配置网卡

在 CentOS 9 中配置网卡&#xff0c;通常涉及以下几个步骤&#xff1a; 1. 查看网络接口 首先&#xff0c;确认系统上存在的网络接口。可以使用 ip 命令或 ifconfig 命令查看网络接口的状态。 ip a 或者&#xff1a; ifconfig 这将列出所有可用的网络接口&#xff08;例如…...

编程日记 2024/11/16 11:46:35

redis7.x源码分析:(2) adlist双向链表

链表是一种常用的数据结构&#xff08;如果不了解&#xff0c;请先学习数据结构&#xff09;&#xff0c;由于c语言本身没有实现标准的链表库&#xff0c;所以redis自己实现了一个双向链表。 双向链表在redis内部的使用非常的多&#xff0c;几乎所有模块中都有用到。 下面看下它…...

编程日记 2024/11/16 11:45:34

KUKU FM 音频Linux平台免费下载工具

1.工具名称&#xff1a;kuku-dl 功能&#xff1a; ✅ 下载播客、故事和有声读物&#xff01; ✅ 获取所有元数据和封面艺术品。 ✅ 支持字幕&#xff01; 3.使用说明&#xff1a; 3.1. 直接镜像github源码库 &#x1f449; git clone https://github.com/bunnykek/kuku-…...

编程日记 2024/11/16 11:44:31

《Django 5 By Example》阅读笔记：p105-p164

《Django 5 By Example》学习第5天&#xff0c;p105-p164总结&#xff0c;总计60页。 一、技术总结 1.文章标签功能 Django自带django-taggit。 2.自定义template tags 3.roadmap功能 4.RSS功能 5.full-text搜索功能 这里使用的是Postgresql,使用pip install psycopg安…...

编程日记 2024/11/16 11:41:26

网络延迟对Python爬虫速度的影响分析

Python爬虫因其强大的数据处理能力和灵活性而被广泛应用于数据抓取和网络信息收集。然而&#xff0c;网络延迟是影响爬虫效率的重要因素之一。本文将深入探讨网络延迟对Python爬虫速度的影响&#xff0c;并提供相应的代码实现过程&#xff0c;以帮助开发者优化爬虫性能。 网络…...

编程日记 2024/11/16 11:40:26