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

JavaScript第九讲BOM编程的练习题

news 2026/4/1 13:22:24

前言

上一节有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

从嵌入式到云原生：手把手教你根据项目规模选对MQTT Broker（EMQX vs Mosquitto实战避坑）

从嵌入式到云原生&#xff1a;手把手教你根据项目规模选对MQTT Broker&#xff08;EMQX vs Mosquitto实战避坑&#xff09; 当你在设计一个物联网系统时&#xff0c;选择正确的MQTT Broker就像为你的房子选择合适的地基。选得太轻量级&#xff0c;系统可能无法承载未来的增长&…...

编程新知 2026/4/1 13:14:49

手把手教你用MounRiver Studio开发沁恒CH32V003（附完整项目实战）

从零开始用MounRiver Studio开发沁恒CH32V003&#xff1a;温度控制器实战指南 当RISC-V遇上国产MCU&#xff0c;会碰撞出怎样的火花&#xff1f;沁恒CH32V003作为一款性价比极高的RISC-V内核微控制器&#xff0c;配合MounRiver Studio这一专为RISC-V优化的开发环境&#xff0c;…...

编程新知 2026/4/1 12:46:23

AI图像增强：3步实现低清图片修复的开源跨平台工具

AI图像增强&#xff1a;3步实现低清图片修复的开源跨平台工具 【免费下载链接】Real-ESRGAN-GUI Lovely Real-ESRGAN / Real-CUGAN GUI Wrapper 项目地址: https://gitcode.com/gh_mirrors/re/Real-ESRGAN-GUI Real-ESRGAN-GUI是一款基于Flutter开发的开源AI图像增强工具…...

编程新知 2026/4/1 12:30:18

电子设计竞赛必备：RC、运放、TTL信号处理电路实战指南（附避坑技巧）

电子设计竞赛信号处理电路实战&#xff1a;从RC滤波到TTL脉冲的进阶技巧 第一次参加电子设计竞赛时&#xff0c;我在信号处理环节浪费了整整两天时间——原本清晰的方波经过电路后变得面目全非&#xff0c;放大后的信号带着令人头疼的振荡&#xff0c;而评委要求的脉冲宽度总是…...

编程新知 2026/4/1 12:20:12

高效获取B站视频到本地存储：BilibiliDown工具全攻略

高效获取B站视频到本地存储&#xff1a;BilibiliDown工具全攻略 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/…...

编程新知 2026/4/1 11:29:40

MGeo地址实体对齐镜像快速上手：5分钟部署，支持自定义阈值

MGeo地址实体对齐镜像快速上手&#xff1a;5分钟部署&#xff0c;支持自定义阈值 1. 引言&#xff1a;地址数据混乱&#xff0c;是时候换个思路了 你有没有被这样的问题困扰过&#xff1f; 公司CRM系统里&#xff0c;同一个客户因为地址写法不同&#xff0c;被重复记录了十几…...

编程新知 2026/4/1 11:29:40

MySQL数据恢复实战：从frm和ibd文件重建完整数据表

1. MySQL数据恢复实战&#xff1a;从frm和ibd文件重建完整数据表 数据库管理员最怕听到的就是"数据丢了"三个字。我经历过好几次半夜被叫起来处理数据丢失的紧急情况&#xff0c;那种头皮发麻的感觉至今难忘。不过别担心&#xff0c;只要.frm和.ibd文件还在&#xff…...

编程新知 2026/4/1 11:17:36

Alpamayo-R1-10B参数详解：Top-p=0.98与Temperature=0.6组合的工程意义解析

Alpamayo-R1-10B参数详解&#xff1a;Top-p0.98与Temperature0.6组合的工程意义解析 1. 项目背景与技术架构 1.1 Alpamayo-R1-10B核心定位 Alpamayo-R1-10B是NVIDIA开发的自动驾驶专用视觉-语言-动作(VLA)模型&#xff0c;其核心设计目标是通过类人因果推理能力提升自动驾驶…...

编程新知 2026/4/1 10:41:09

5个步骤搞定苹果设备Windows连接：从无法识别到无缝协作

5个步骤搞定苹果设备Windows连接&#xff1a;从无法识别到无缝协作 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/4/1 9:23:51

三步打造个性化Windows任务栏：TranslucentTB效率工具完全指南

三步打造个性化Windows任务栏&#xff1a;TranslucentTB效率工具完全指南 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 你是否曾觉得Wi…...

编程新知 2026/4/1 8:06:04