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

Javaweb之javascript的BOM对象的详细解析

news 2026/1/19 12:50:06

1.5.2 BOM对象

接下来我们学习BOM对象，BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称描述
Window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
Locationd地址栏对象

上述5个对象与浏览器各组成对应的关系如下图所示：

对于上述5个对象，我们重点学习的是Window对象、Location对象这2个。

1.5.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下：

window.alert('hello');

其可以省略window. 所以可以简写成

alert('hello')

所以对于window对象的属性和方法，我们都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法

window对象提供了获取其他BOM对象的属性：

属性描述
history用于获取history对象
location用于获取location对象
Navigator用于获取Navigator对象
Screen用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的函数，如下表格所示：

函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。

接下来，我们通过VS Code中创建名为05. JS-对象-BOM.html文件来编写代码来演示上述函数：

  • alert()函数：弹出警告框，函数的内容就是警告框的内容

    <script>//window对象是全局对象，window对象的属性和方法在调用时可以省略window.window.alert("Hello BOM");alert("Hello BOM Window");
</script>

    浏览器打开，依次弹框，此处只截图一张

  • confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

    添加如下代码：

    confirm("您确认删除该记录吗?");

    浏览器打开效果如图所示：

  • 但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false 
    var flag = confirm("您确认删除该记录吗?");
alert(flag);

  • setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

    fn:函数，需要周期性执行的功能代码

    毫秒值：间隔时间

    注释掉之前的代码，添加代码如下：

    //定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){i++;console.log("定时器执行了"+i+"次");
},2000);

    刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：

  • setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

    注释掉之前的代码，添加代码如下：

    //定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){alert("JS");
},3000);

    浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

1.5.2.2 Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

浏览器效果如下：首先弹框展示浏览器地址栏信息，

然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到传智首页

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-BOM</title>
</head>
<body></body>
<script>//获取// window.alert("Hello BOM");// alert("Hello BOM Window");
​//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag = confirm("您确认删除该记录吗?");// alert(flag);
​//定时器 - setInterval -- 周期性的执行某一个函数// var i = 0;// setInterval(function(){//     i++;//     console.log("定时器执行了"+i+"次");// },2000);
​//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){//     alert("JS");// },3000);//locationalert(location.href);
​location.href = "https://www.itcast.cn";
​
</script>
</html>

相关文章：

Javaweb之javascript的BOM对象的详细解析

1.5.2 BOM对象 接下来我们学习BOM对象&#xff0c;BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能&#xff0c;可以通过操作BOM对象的相关属性或者函数来完成。例如&#xff1a…...

编程日记 2023/11/11 6:03:04

使用Nginx和Spring Gateway为SkyWalking的增加登录认证功能

文章目录 1、使用Nginx增加认证。2、使用Spring Gateway增加认证 SkyWalking的可视化后台是没有用户认证功能的&#xff0c;默认下所有知道地址的用户都能访问&#xff0c;官网是建议通过网关增加认证。 本文介绍通过Nginx和Spring Gateway两种方式 1、使用Nginx增加认证。 生…...

编程日记 2023/11/11 6:02:03

Android 12.0 增加多张图片作为系统静态壁纸的功能实现

1.前言 在12.0的系统rom定制化开发中，在做系统定制化开发中，在对系统的静态壁纸做定制的时候，需要增加几种静态壁纸可以让用户自己设置壁纸，所以可以在壁纸的系统应用中 添加几种静态壁纸图片，然后配置好 就可以在选择壁纸的时候，作为静态壁纸，接下来看如何具体实现这个…...

编程日记 2023/11/11 6:01:02

无线优化之RRM模板

一、简介 RRM即，Radio Resource Management，射频资源管理 WLAN技术是以射频信号（如2.4G/5G的无线电磁波）作为传输介质，无线电磁波在传输过程中因周围环境导致无线信号衰减，从而影响无线用户上网的服务质量。 RRM模板主要用于保持最优的频射资源状态，自动检查周围无线…...

编程日记 2023/11/11 6:00:01

BI 数据可视化平台建设（1）—交叉表组件演变实战

作者&#xff1a;vivo 互联网大数据团队 - Zhu Jianchen 本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。 交叉表在数据分析里应用广泛&#xff0c;通过本文&#xff0c;你将了解到&#xff1a; 交叉表的基本概念&#xff0c;以及BI可视化平…...

编程日记 2023/11/11 5:58:59

Python---练习：求幸运数字6

案例&#xff1a; 幸运数字6&#xff08;只要是6的倍数&#xff09;&#xff1a;输入任意数字&#xff0c;如数字8&#xff0c;生成nums列表&#xff0c;元素值为1~8&#xff0c;从中选取幸运数字移动到新列表lucky&#xff0c;打印nums与lucky。 思考&#xff1a; 要求是6的…...

编程日记 2023/11/11 5:57:58

【云栖2023】王峰：开源大数据平台3.0技术解读

本文根据2023云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;王峰 | 阿里云研究员&#xff0c;阿里云计算平台事业部开源大数据平台负责人 演讲主题&#xff1a;开源大数据平台3.0技术解读 实时化与Serverless是开源大数据3.0时代的必然选…...

编程日记 2023/11/11 5:56:57

如何改变Wi-Fi的IP地址，提高网络连接稳定性和速度

Wi-Fi已经成为我们日常生活中必不可少的一部分。大多数家庭和办公室都依赖于Wi-Fi来连接网络和进行各种在线活动。然而&#xff0c;有时我们可能会遇到网络连接不稳定或速度较慢的问题。这可能是由于IP地址的设置不当所导致的。虎观代理小二二将向您介绍如何改变Wi-Fi的IP地址&…...

编程日记 2023/11/11 5:55:56

APP 备案公钥、签名 MD5、SHA-1、SHA-256获取方法。

公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取&#xff0c;最简单的就是以 appuploader为例。 1.下载 appuploader工具 &#xff0c;点击此处 下载 appuploader 工具。 2.下载完成后&#xff0c;解压压缩包&#xff0c;双击 appuploder 运行。 3.运…...

编程日记 2023/11/11 5:54:55

屏幕提词软件Presentation Prompter mac中文版使用方法

Presentation Prompter for mac是一款屏幕提词器软件&#xff0c;它可以将您的Mac电脑快速变成提词器&#xff0c;支持编写或导入&#xff0c;可以在一个或多个屏幕上平滑地滚动&#xff0c;Presentation Prompter 下载是为适用于现场表演者&#xff0c;新闻广播员&#xff0c;…...

编程日记 2023/11/11 5:53:54

Rc与Arc实现1vN所有权机制

Rc与Arc实现1vN所有权机制 观察引用计数的变化一个例子多线程无力的Rc< T >Arc Rust所有权机制要求一个值只能有一个所有者&#xff0c;在大多数情况下&#xff0c;都没有问题&#xff0c;但是考虑以下情况&#xff1a; 在图数据结构中&#xff0c;多个边可能会拥有同一个…...

编程日记 2023/11/11 5:52:54

建造者模式 rust和java的实现

文章目录 建造者模式介绍优点缺点使用场景 实现javarust rust代码仓库 建造者模式 建造者模式&#xff08;Builder Pattern&#xff09;使用多个简单的对象一步一步构建成一个复杂的对象。 一个 Builder 类会一步一步构造最终的对象。该 Builder 类是独立于其他对象的。 介绍…...

编程日记 2023/11/11 5:51:53

书写Prompt的经验总结

首先最重要的一点是Prompt无法全部模型都通用&#xff0c;可能你的Prompt在ChatGPT中使用很好&#xff0c;迁移到ChatGLM就不行了。不知道未来是否会出现Prompt的跨平台。 首先书写Prompt要明确告诉模型要做什么&#xff0c;而不是告诉它不要做什么。还要保证精简&#xff0c;…...

编程日记 2023/11/11 5:50:52

WebSocket实时应用

在开发一些前端页面的时候&#xff0c;总是能接收到这样的需求&#xff1a;如何保持页面并实现自动更新数据呢&#xff1f;以往的常规做法&#xff0c;是前端使用定时轮询后端接口&#xff0c;获取响应后重新渲染前端页面&#xff0c;这种做法虽然能达到类似的效果&#xff0c;…...

编程日记 2023/11/11 5:49:50

从零开始搭建React+TypeScript+webpack开发环境-基于lerna的webpack项目工程化改造

项目背景 在实际项目中&#xff0c;我们的前端项目往往是一个大型的Webpack项目&#xff0c;结构较为复杂。项目根目录下包含了各种配置文件、源代码、以及静态资源&#xff0c;整体布局相对扁平。Webpack的配置文件分散在不同的部分&#xff0c;包括入口文件、输出目录、加载…...

编程日记 2023/11/11 5:48:49

网络监控系统和防火墙的区别有哪些？

现如今&#xff0c;市面上保护企业网络安全的设备有很多&#xff0c;其中使用最多的当属网络监控系统和防火墙。 网络监控系统就是通过网页内容的自动采集处理、敏感词过滤、智能聚类分类、主题检测、专题聚焦、统计分析等多个环节&#xff0c;实现相关网络舆情监督管理的需要…...

编程日记 2023/11/11 5:47:48

刷题学习记录BUUCTF

[极客大挑战 2019]RCE ME1 进入环境直接就有代码 <?php error_reporting(0); if(isset($_GET[code])){$code$_GET[code];if(strlen($code)>40){die("This is too Long.");}if(preg_match("/[A-Za-z0-9]/",$code)){die("NO.");}eval($co…...

编程日记 2023/11/11 5:46:47

Linux imu6ull驱动- led

一、GPIO模块结构 开始来啃手册了&#xff0c;打开我们的imx6ull手册。本章我们编写的是GPIO的&#xff0c;打开手册的第28章&#xff0c;这一章就有关于IMX6ULL 的 GPIO 模块结构。 mx6ull一共有5 组 GPIO&#xff08;GPIO1&#xff5e;GPIO5&#xff09; GPIO1 有 32 个引脚&…...

编程日记 2023/11/11 5:45:46

【 云原生 | K8S 】Kubernetes 概述

Kubernetes 概述 1 K8S 是什么&#xff1f; K8S 的全称为 Kubernetes (K12345678S)&#xff0c;PS&#xff1a;“嘛&#xff0c;写全称也太累了吧&#xff0c;不如整个缩写”。 作用&#xff1a; 用于自动部署、扩展和管理“容器化&#xff08;containerized&#xff09;应用…...

编程日记 2023/11/11 5:44:45

边缘计算多角色智能计量插座：用电监测和资产管理的未来智能化引擎

目前主流的智能插座涵盖了红外遥控&#xff08;控制空调和电视等带有红外标准的电器&#xff09;&#xff0c;配备着测温、测湿等仓库应用场景&#xff0c;配备了人体红外或者毫米波雷达作为联动控制&#xff0c;但是大家有没有思考一个问题&#xff0c;就是随着对接的深入&…...

编程日记 2023/11/11 5:43:45

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/1/11 12:39:08

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/15 7:06:11

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/15 6:09:28

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/1/15 5:43:21

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/1/16 20:34:27

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/11/12 9:47:25