js教程(11)

一、Window对象

1.BOM(浏览器对象模型)

        BOM(Browser Object Model)是JavaScript中用来与浏览器交互的一组对象。BOM提供了访问和控制浏览器窗口、历史记录、定时器、以及与浏览器进行通信的能力。

        BOM包括以下一些常用的对象:

  1. window对象:代表浏览器窗口,可以通过window对象访问和控制浏览器的各种属性和方法,如窗口的大小、位置、打开新窗口、关闭窗口等。

  2. location对象:代表浏览器地址栏的URL,可以通过location对象获取和修改当前页面的URL信息,如获取URL中的参数、跳转到新的URL等。

  3. navigator对象:提供了关于浏览器的信息,如浏览器的名称、版本、操作系统等。

  4. history对象:代表浏览器的历史记录,可以通过history对象访问和操作浏览器的历史记录,如前进、后退、跳转到指定页面等。

  5. screen对象:提供了关于用户屏幕的信息,如屏幕的宽度、高度、像素密度等。

        除了以上常用的对象,BOM还包括一些其他对象和方法,如定时器(setTimeout、setInterval)、弹窗(alert、confirm、prompt)等。

        需要注意的是,BOM只定义了一组对象和方法,具体实现和支持度取决于浏览器,不同的浏览器可能会有不同的实现和扩展。因此,在编写跨浏览器的JavaScript代码时,需要注意BOM的兼容性。

        这里主要对window对象进行讲解:

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

2.JS执行机制

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

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

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

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

        js的同步任务都是再主线程上执行的,而异步任务是通过回调函数实现,一般来说,异步任务有普通事件,资源加载和定时器三种,js中这种异步任务会通过各种队列去解决js阻塞问题。

        这里简单的去介绍一下事件循环:

  • 先在主线程中进行同步任务;
  • 遇见异步任务时将异步任务加入到任务队列中;
  • 一旦主线程中的所有任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取任务队列的任务,开始执行。

由于主线程不断的重复获得任务、执行任务,再获取、再执行,我们则称该机制为事件循环(event loop),在之前一篇文章中,我对其进行了较为详细的讲解:

浏览器事件循环-CSDN博客

3.location对象

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

常用属性和方法

  • href属性获取完整的URL地址,对其赋值时用于地址的跳转;
  • search属性获取地址中携带的参数,符号?后面部分;
  • hash属性获取地址中的哈希值,符号#后面部分;
  • reload方法用来刷新当前页面,传入参数true时表示强制刷新。

使用方法展示

(1)href属性

console.log(location.href);
//通过js方式跳转目标地址
location.href = 'https://blog.csdn.net/2301_77523019?type=blog';

(2)search属性和hash属性

console.log(location.search);
console.log(location.hash);

 (3)reload方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>dome</title></head><body>123</body><script>setInterval(()=>{location.reload(true);},1000)</script>
</html>

4.navigator对象

       在JavaScript中,navigator对象是浏览器的内置对象之一。它提供了关于浏览器的相关信息,允许JavaScript代码与浏览器进行通信和操作。

以下是navigator对象的一些常见属性和方法:

  • navigator.userAgent:返回包含用户代理字符串的字符串,该字符串标识了浏览器的类型和版本。
  • navigator.platform:返回浏览器运行的操作系统平台。
  • navigator.language:返回浏览器使用的默认语言。
  • navigator.cookieEnabled:返回一个布尔值,表示浏览器是否允许使用cookies。
  • navigator.onLine:返回一个布尔值,表示当前是否处于联网状态。
  • navigator.geolocation:返回一个Geolocation对象,允许通过浏览器获取设备的地理位置信息。
  • navigator.mediaDevices:返回一个MediaDevices对象,允许通过浏览器访问媒体设备,如摄像头和麦克风。
  • navigator.sendBeacon():允许在页面卸载后异步发送数据到服务器,以避免在卸载页面时数据丢失。

        除了上述属性和方法外,navigator对象还提供了其他一些功能,比如屏幕信息和浏览器插件信息等。可以根据具体需求使用navigator对象的相关属性和方法来实现与浏览器的交互和操作。

这里对两个方法进行举例说明

当使用navigator.userAgent时,我们可以通过判断浏览器的用户代理字符串来执行特定的操作或逻辑。

下面是一个使用navigator.userAgent的示例,用于检测用户是否使用移动设备浏览网页:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {console.log("您正在使用移动设备浏览网页");
} else {console.log("您正在使用桌面设备浏览网页");
}

在上面的示例中,我们使用正则表达式来匹配常见的移动设备型号,如果用户代理字符串中包含其中任何一个移动设备的关键词,则认为用户当前正在使用移动设备浏览网页。

当使用navigator.platform时,我们可以获取用户的操作系统平台信息。下面是一个示例,用于显示用户的操作系统平台:

console.log("您的操作系统平台是:" + navigator.platform);

该示例将在控制台中显示用户的操作系统平台信息,如Windows、Mac、Linux等。

需要注意的是,用户代理字符串和操作系统平台信息并不是绝对可靠的,因为它们可以被用户手动修改或伪造。因此,在使用这些信息时,应该仅作为参考,在实际应用中需要进行更严格的验证和处理。

5.histroy对象

  history对象是JavaScript中的一个内置对象,它提供了访问浏览器历史记录的方法和属性。使用history对象,我们可以在浏览器历史记录中向前或向后导航,以及修改当前URL的状态。

history对象的常用方法和属性如下:

  • history.back(): 在浏览器历史记录中向后导航,相当于点击浏览器的后退按钮。
  • history.forward(): 在浏览器历史记录中向前导航,相当于点击浏览器的前进按钮。
  • history.go(n): 在浏览器历史记录中导航到相对当前页面的指定位置,n为正数表示向前导航,负数表示向后导航,0表示重新加载当前页面。
  • history.length: 返回浏览器历史记录中的页面数量。
  • history.pushState(state, title, url): 添加一个新的历史记录条目,并修改当前URL的状态,但不导航到新的URL。
  • history.replaceState(state, title, url): 修改当前历史记录条目的状态,但不导航到新的URL。

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

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

相关文章

【Rust】——生命周期

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

PyQt6猜数字小游戏

PyQt6猜数字小游戏 本文使用pyQt6实现猜数字小游戏。游戏开始给出数字范围&#xff0c;猜测失败缩写给定范围。 import math import sys import random from PyQt6.QtWidgets import QMainWindow, QApplication, QMessageBox from PyQt6.QtCore import Qt from sample import U…

AI 在医疗保健领域的应用:技术、趋势和前景

人工智能&#xff08;AI&#xff09;在医疗保健领域的应用已经成为引人瞩目的发展方向&#xff0c;其在医学影像分析、疾病诊断和个性化治疗等方面展现出了巨大潜力。本文将深入探讨这些技术应用和未来的发展趋势。 医学影像分析 医学影像分析是AI在医疗领域中应用最广泛的领…

Redis 缓存雪崩、穿透、击穿、预热

在实际工程中&#xff0c;Redis 缓存问题常伴随高并发场景出现。例如&#xff0c;电商大促、活动报名、突发新闻时&#xff0c;由于缓存失效导致大量请求访问数据库&#xff0c;导致雪崩、击穿、穿透等问题。因此&#xff0c;新系统上线前需预热缓存&#xff0c;以应对高并发&a…

文献阅读:将条形码神经解剖学与空间转录分析相结合,可以识别投射神经元相关基因

文献介绍 「文献题目」 Integrating barcoded neuroanatomy with spatial transcriptional profiling enables identification of gene correlates of projections 「研究团队」 Anthony M. Zador&#xff08;美国冷泉港实验室&#xff09; 「发表时间」 2021-05-10 「发表期…

# #一眼就解密

BUUCTF #一眼就解密 1 下面的字符串解密后便能获得flag&#xff1a;ZmxhZ3tUSEVfRkxBR19PRl9USElTX1NUUklOR30 注意&#xff1a;得到的 flag 请包上 flag{} 提交 flag{THE_FLAG_OF_THIS_STRING}

MPLS-基础、LSR、LSP、标签、体系结构

MPLS技术 MPLS基础 MPLS&#xff1a;转发数据时&#xff0c;只在网络边缘分析IP报文头&#xff0c;不在每一跳都分析&#xff0c;节约了转发时间。 MPLS&#xff1a;Multiprotocol Label Switching&#xff0c;多协议标签交换骨干网技术。主要应用&#xff1a;VPN、流量工程…

Golang学习系列1-pprof性能调优

1. pprof 简述 一位亦师亦友的话让我记忆犹新&#xff0c;他说“学习一个新事务&#xff0c;应该从三个方面入手what,why,how;且三者的重要程度应该是递减”。所以在本文的第一部分先叙述下pprof的what & why。 1.1 What&#xff1f; pprof是golang自身提供的一种性能分…

【C++入门】初识C++

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

稀疏矩阵的三元组表表示法及其转置

1. 什么是稀疏矩阵 稀疏矩阵是指矩阵中大多数元素为零的矩阵。 从直观上讲&#xff0c;当元素个数低于总元素的30%时&#xff0c;这样的矩阵被称为稀疏矩阵。 由于该种矩阵的特点&#xff0c;我们在存储这种矩阵时&#xff0c;如果直接采用二维数组&#xff0c;就会十分浪费…

开启 Keep-Alive 可能会导致http 请求偶发失败

大家好&#xff0c;我是蓝胖子&#xff0c;说起提高http的传输效率&#xff0c;很多人会开启http的Keep-Alive选项&#xff0c;这会http请求能够复用tcp连接&#xff0c;节省了握手的开销。但开启Keep-Alive真的没有问题吗&#xff1f;我们来细细分析下。 最大空闲时间造成请求…

C++Date类的实现

目录 前言&#xff1a; 1.显示日期 2.构造函数与获取某年某月的日期的函数 3.日期比较 4.日期加减天数 5.日期减日期 6.前置后置与-- 7.完整代码 8.测试 总结&#xff1a; 感谢支持&#xff01; 前言&#xff1a; 结合了前面的内容的学习&#xff0c;本篇来对之前的…

基于php医院预约挂号系统

摘 要 随着信息时代的来临&#xff0c;过去的管理方式缺点逐渐暴露&#xff0c;对过去的医院预约挂号管理方式的缺点进行分析&#xff0c;采取计算机方式构建医院预约挂号系统。本文通过阅读相关文献&#xff0c;研究国内外相关技术&#xff0c;开发并设计一款医院预约挂号系统…

语义分割交互式智能标注工具 | 澳鹏数据标注平台

随着人工智能应用的大规模落地&#xff0c;数据标注市场在高速增长的同时&#xff0c;也面临着标注成本的挑战。据IDC报告显示&#xff1a;数据标注在AI应用开发过程中所耗费的时间占到了25%&#xff0c;部分医学类应用一条数据的标注成本甚至高达20元。数据精度的高要求、强人…

【Flink技术原理构造及特性】

1、Flink简介 Flink是一个批处理和流处理结合的统一计算框架&#xff0c;其核心是一个提供了数据分发以及并行化计算的流数据处理引擎。它的最大亮点是流处理&#xff0c;是业界最顶级的开源流处理引擎。 Flink最适合的应用场景是低时延的数据处理&#xff08;Data Processin…

爬虫实战三、PyCharm搭建Scrapy开发调试环境

#一、环境准备 Python开发环境以及Scrapy框架安装&#xff0c;参考&#xff1a;爬虫实战一、Scrapy开发环境&#xff08;Win10Anaconda&#xff09;搭建 PyCharm安装和破解&#xff0c;参考&#xff1a;爬虫实战二、2019年PyCharm安装&#xff08;激活到2100年&#xff09; …

音视频过滤器实战--音频混音

1、添加并初始化音频输入、输出流 2、打开输入、输出音频文件 3、添加音频帧数据&#xff0c;然后循环获取输出的音频帧&#xff0c;将音频数据写文件保存 4、代码实例 audiomixer.h #ifndef AUDIOMIXER_H #define AUDIOMIXER_H#include <map> #include <mutex&g…

0基础如何进入IT行业?

0基础如何进入IT行业&#xff1f; 简介&#xff1a;对于没有任何相关背景知识的人来说&#xff0c;如何才能成功进入IT行业&#xff1f;是否有一些特定的方法或技巧可以帮助他们实现这一目标&#xff1f;我不知道&#xff0c;我的行业算不算是IT&#xff0c;或者最多是半个IT行…

重磅!openGauss6.0创新版本,带着新特性正式发布了!

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…

Tokio强大的Rust异步框架

一、简介 异步是现在编写高性能应用的核心要素之一&#xff0c;很多语言都已经纷纷加入异步的特效。C#应该是最先做出响应的语言。连微软这位软件大佬都非常重视异步&#xff0c;可见异步编程重要性。 在Rust中同样支持异步编程&#xff0c;只不过一般我们不会使用Rust官方&a…