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

JavaScript第九讲BOM编程的练习题

news 2026/2/7 10:47:49

前言

上一节有BOM的讲解，有需要的码客们可以去看一下

以下是一个结合了上述BOM（Browser Object Model）相关内容的练习题及其源代码示例：

练习题：

编写一个JavaScript脚本，该脚本应该执行以下操作：

  1. 显示当前浏览器窗口（外部窗体）的宽度和高度。
  2. 显示当前文档显示区域（视口）的宽度和高度。
  3. 使用Screen对象显示用户的屏幕分辨率。
  4. 创建一个新的浏览器窗口，并在其中加载指定的URL。
  5. 刷新当前页面。
  6. 使用Location对象跳转到另一个页面。
  7. 使用警告框、确认框和输入框与用户进行交互。
  8. 使用计时器（setTimeout和setInterval）在控制台打印信息，并展示如何终止setInterval。

源代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>BOM 编程练习题</title>  
<script>  
window.onload = function() {  // 1. 显示当前浏览器窗口的宽度和高度  console.log('外部窗体宽度:', window.outerWidth, '外部窗体高度:', window.outerHeight);  // 2. 显示当前文档显示区域的宽度和高度  console.log('文档显示区域宽度:', window.innerWidth, '文档显示区域高度:', window.innerHeight);  // 3. 显示用户的屏幕分辨率  console.log('屏幕分辨率:', screen.width, 'x', screen.height);  // 4. 创建一个新的浏览器窗口并加载URL  var newWindow = window.open('https://www.example.com', '_blank');  // 5. 刷新当前页面  function refreshPage() {  location.reload();  }  // 可以调用 refreshPage() 来刷新页面，但这里不直接调用  // 6. 跳转到另一个页面  function navigateToPage() {  location.href = 'https://www.anotherexample.com';  }  // 可以调用 navigateToPage() 来跳转页面，但这里不直接调用  // 7. 与用户进行交互  function showAlert() {  alert('这是一个警告框！');  }  function showConfirm() {  if (confirm('你确定要继续吗？')) {  alert('你点击了确定！');  } else {  alert('你点击了取消！');  }  }  function showPrompt() {  var inputValue = prompt('请输入你的名字：', '');  if (inputValue !== null) {  alert('你好，' + inputValue + '!');  }  }  // 可以调用这些函数来显示不同的对话框  // 8. 使用计时器  // setTimeout 只执行一次  setTimeout(function() {  console.log('setTimeout 执行的消息');  }, 2000);  // setInterval 不停地重复执行  var intervalId = setInterval(function() {  console.log('setInterval 执行的消息');  // 假设在某个条件下我们要停止定时器  if (Date.now() > someFutureTime) { // someFutureTime 是某个未来的时间戳  clearInterval(intervalId);  }  }, 1000);  // 注意：不要在setInterval的回调函数中使用document.write()，因为它会重写整个页面  
};  
</script>  
</head>  
<body>  <button onclick="showAlert()">显示警告框</button>  
<button onclick="showConfirm()">显示确认框</button>  
<button onclick="showPrompt()">显示输入框</button>  
<!-- 可以添加更多按钮来调用其他函数 -->  </body>  
</html>

注意：

  • someFutureTime 在上面的 setInterval 示例中是一个假设的变量，你需要用实际的时间戳替换它。
  • 由于浏览器安全策略的限制，某些浏览器可能会阻止或限制window.open方法的行为。
  • 出于演示目的，refreshPage和navigateToPage函数在上面的代码中没有被直接调用，但你可以根据需要调用它们。
  • 在实际应用中，应当避免在全局范围内定义过多的函数和变量，以防止命名冲突和意外的副作用。

今天就到这里了各位大佬们。

respect！

相关文章：

JavaScript第九讲BOM编程的练习题

前言 上一节有BOM的讲解&#xff0c;有需要的码客们可以去看一下 以下是一个结合了上述BOM&#xff08;Browser Object Model&#xff09;相关内容的练习题及其源代码示例&#xff1a; 练习题&#xff1a; 编写一个JavaScript脚本&#xff0c;该脚本应该执行以下操作&#…...

编程日记 2024/6/5 8:53:56

JavaScript 中创建函数的多种方式

在 JavaScript 中&#xff0c;可以通过多种方式创建函数。每种方式都有其特定的用途、优点和缺点&#xff0c;以及适用的使用场景。以下是几种常见的创建函数的方式及其详细说明。 1. 函数声明&#xff08;Function Declaration&#xff09; 示例 function add(a, b) {retur…...

编程日记 2024/6/5 8:51:54

对称二叉树[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个二叉树的根节点root&#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xf…...

编程日记 2024/6/5 8:49:53

判断GIF类型并使用ImageDecoder解析GIF图

一、判断是否为GIF图片类型 在JavaScript中&#xff0c;判断用户上传的文件是否为GIF文件类型时&#xff0c;通常可以通过检查文件的type属性或文件的拓展名来判断&#xff0c;但是由于文件拓展名可以轻易被用户修改&#xff0c;type属性是由浏览器根据文件拓展名猜测得出的&a…...

编程日记 2024/6/5 8:46:47

数组对象数据修改后页面没有更新，无法进行编辑，校验失效问题

在 Vue 中&#xff0c;当你通过 Object.assign 或其他方式修改了对象中的某个属性时&#xff0c;Vue 并不会触发组件重新渲染&#xff0c;因此表单中的 input 框无法及时更新。这可能导致在修改表单数据后&#xff0c;页面没有更新&#xff0c;而且表单校验也失效的情况。这是因…...

编程日记 2024/6/5 8:45:46

什么是低代码？有什么特点？

低代码是一种高效的软件开发方法&#xff0c;它允许开发者通过图形化界面和预构建的代码块&#xff0c;以最小化传统手写代码的方式快速构建应用程序。这种方法旨在加速应用程序的开发周期&#xff0c;同时降低技术门槛和成本。以下是根据驰骋低代码设计者的观念与主张&#xf…...

编程日记 2024/6/5 8:44:45

Kafka 消息保留时长由 24 小时变更为 72 小时的影响分析

目录 Kafka 消息保留时长由 24 小时变更为 72 小时的影响分析Kafka 消息存储机制保留时长对生产速度的影响保留时长对消费速度的影响底层分析与优化建议附加&#xff1a;将 Kafka 消息保留时长从 24 小时更改为 72 小时后&#xff0c;CPU 使用率从 40% 上升到 70% 的现象1. 增加…...

编程日记 2024/6/5 8:41:41

MySQL A表的字段值更新为B表的字段值

MySQL A表的字段值更新为B表的字段值 准备数据表 create table person (id int unsigned auto_increment comment 主键 primary key,uuid varchar(32) not null comment 系统唯一标识符32个长度的字符串,mobile varchar(11) null comment 中国国内手机号,nickn…...

编程日记 2024/6/5 8:40:39

TCP 建链（三次握手）和断链（四次握手）

TCP 建链&#xff08;三次握手&#xff09;和断链&#xff08;四次挥手&#xff09; 背景简介建链&#xff08;三次握手&#xff09;断链&#xff08;四次挥手&#xff09;序号及标志位延伸问题为什么建立连接需要握手三次&#xff0c;两次行不行&#xff1f;三次握手可以携带数…...

编程日记 2024/6/5 8:37:37

SpringBoot集成JOOQ加Mybatis-plus使用@Slf4j日志

遇到个问题记录下&#xff0c;就是SpringBoot使用Mybatis和Mybatis-plus时可以正常打印日志&#xff0c;但是JOOQ的操作日志确打印不出来&#xff1f; 下面的解决方法就是将JOOQ的日志单独配置出来&#xff0c;直接给你们配置吧&#xff01; 在项目的resources目录下创建日志…...

编程日记 2024/6/5 8:36:35

浅谈JavaScript中的对象赋值

目录 常见的对象赋值方式 直接赋值和对象扩展&#xff08;浅拷贝&#xff09;两种赋值方式区别 区别 联系 常见的对象赋值方式 1. 直接赋值&#xff1a;this.info this.deviceInfo&#xff0c;将一个对象的引用赋给另一个变量&#xff0c;它们引用同一个对象。 2. 对象扩…...

编程日记 2024/6/5 8:35:34

Java面试题-集合

Java面试题-集合 1、什么是集合&#xff1f;2、集合和数组的区别是什么&#xff1f;3、集合有哪些特点&#xff1f;4、常用的集合类有哪些&#xff1f;5、List&#xff0c; Set&#xff0c; Map三者的区别&#xff1f;6、说说集合框架底层数据结构&#xff1f;7、线程安全的集合…...

编程日记 2024/6/5 8:34:32

从当当网批量获取图书信息

爬取当当网图书数据并保存到本地&#xff0c;使用request、lxml的etree模块、pandas保存数据为excel到本地。 爬取网页的url为&#xff1a; http://search.dangdang.com/?key{}&actinput&page_index{} 其中key为搜索关键字&#xff0c;page_index为页码。 爬取的数据…...

编程日记 2024/6/5 8:30:27

python爬虫之JS逆向——网页数据解析

目录 一、正则 1 正则基础 元字符 基本使用 通配符: . 字符集: [] 重复 位置 管道符和括号 转义符 转义功能 转义元字符 2 正则进阶 元字符组合(常用) 模式修正符 re模块的方法 有名分组 compile编译 二、bs4 1 四种对象 2 导航文档树 嵌套选择 子节点、…...

编程日记 2024/6/5 8:27:21

VL53L4CX TOF开发(2)----修改测距范围及测量频率

VL53L4CX TOF开发.2--修改测距范围及测量频率 概述视频教学样品申请完整代码下载测距范围测量频率硬件准备技术规格系统框图应用示意图生成STM32CUBEMX选择MCU串口配置IIC配置 XSHUTGPIO1X-CUBE-TOF1app_tof.c详细解释测量频率修改修改测距范围 概述 最近在弄ST和瑞萨RA的课程…...

编程日记 2024/6/5 8:26:20

C++之noexcept

目录 1.概述 2.noexcept作为说明符 3.noexcept作为运算符 4.传统throw与noexcept比较 5.原理剖析 6.总结 1.概述 在C中&#xff0c;noexcept是一个关键字&#xff0c;用于指定函数不会抛出异常。如果函数保证不会抛出异常&#xff0c;编译器可以进行更多优化&#xff0c;…...

编程日记 2024/6/5 8:23:17

Kafka之Broker原理

1. 日志数据的存储 1.1 Partition 1. 为了实现横向扩展&#xff0c;把不同的数据存放在不同的 Broker 上&#xff0c;同时降低单台服务器的访问压力&#xff0c;我们把一个Topic 中的数据分隔成多个 Partition 2. 每个 Partition 中的消息是有序的&#xff0c;顺序写入&#x…...

编程日记 2024/6/5 8:21:15

RabbitMQ docker安装及使用

1. docker安装RabbitMQ docker下载及配置环境 docker pull rabbitmq:management # 创建用于挂载的目录 mkdir -p /home/docker/rabbitmq/{data,conf,log} # 创建完成之后要对所创建文件授权权限&#xff0c;都设置成777 否则在启动容器的时候容易失败 chmod -R 777 /home/doc…...

编程日记 2024/6/5 8:20:14

篇3：Mapbox Style Specification

接《篇2：Mapbox Style Specification》，继续解读Mapbox Style Specification。 目录 Spec Reference Root 附录： MapBox Terrain-RGB...

编程日记 2024/6/5 8:17:11

C#WPF数字大屏项目实战11--质量控制

1、区域划分 2、区域布局 3、视图模型 4、控件绑定 5、运行效果 走过路过&#xff0c;不要错过&#xff0c;欢迎点赞&#xff0c;收藏&#xff0c;转载&#xff0c;复制&#xff0c;抄袭&#xff0c;留言&#xff0c;动动你的金手指&#xff0c;财务自由...

编程日记 2024/6/5 8:16:09

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/6 10:22:29

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/2/4 16:40:55