摸鱼不如来了解一下-- BOM浏览器对象模型(下)

简介: BOM浏览器对象模型(browser object model)● BOM提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window

方法调用中,谁调用,this就指向谁


网络异常,图片无法展示
|


构造函数中,this指向构造函数的实例

网络异常,图片无法展示
|


js执行


●   js语言的一大特点就是单线程,同一时间只能做一件事。单线程意味着所有任务都要排队,前一个任务结束,才执行下一个任务。这就有个问题:如果js执行时间太长,这样会造成页面渲染不连贯,导致页面渲染加载阻塞

●   同步:前一个任务执行完毕之后再执行后一个任务,程序的执行顺序和任务的排列顺序是一致的、同步的

●   异步:在处理一个任务时,这个任务需要耗费很长时间,那在处理这个任务的同时,可以去做其他的任务(如:煲汤需要半小时,那么这个过程中可以洗菜切菜炒菜)

js执行机制


同步任务:都在主线程上执行,形成一个执行栈

异步任务:通过回调函数实现。异步任务相关的回调函数放到任务队列中(也叫消息队列)

●   1、普通事件,如click、resize等

●   2、资源加载事件,如load、error等

●   3、定时器,包括setTimeout和setInterval

机制

●   1、先执行执行栈中的同步任务

●   2、异步任务(回调函数)放到任务队列中

●   3、一旦执行栈中的同步任务全部执行完毕,系统会依次按序读取任务队列中的异步任务。被读取到的异步任务结束等待状态,进入执行栈中开始执行

网络异常,图片无法展示
|


网络异常,图片无法展示
|

location对象


●   window对象给我们我提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以也称这个属性为location对象

●   URL:统一资源定位器(Uniform Resource Locator),是互联网上标准资源的地址。互联网上每个资源都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它

网络异常,图片无法展示
|


location对象属性

●   location.href 获取或设置整个URL

●   location.host返回主机(域名) (如www.itheima.com)

●   location.port 返回端口号,如果为设置则返回空字符 ●   location.pathname 返回路径

●   location.search 返回参数

●   location.hash 返回片段  井号后面的内容 常见于锚点 链接

●   location对象方法

●   location.assign( ),跟href属性类似,可以跳转页面(也称为重定向页面)

●   location.replace( ),替换当前页面,因为不记录历史,所以不能后退页面

网络异常,图片无法展示
|


●   location.reload( ),重新加载页面,相当于F5刷新按钮。参数默认是空或者为false,则直接刷新;当参数设置为true时为强制刷新(相当于ctrl+f5)

navigator对象


●   navigator对象包含很多浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

网络异常,图片无法展示
|


history对象

●   window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL

方法

●   history.back( ),后退功能

●   history.forward( ),前进功能

●   history.go(参数),前进后退功能。参数为1,前进一个页面;参数为-1,后退一个页面

目录
相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1530 14
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
375 23
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
1791 62
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
233 2
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
852 156
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
420 63
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
319 5
在浏览器执行js脚本的两种方式
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
2162 1
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
729 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统