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

JavaScript第九讲BOM编程的练习题

news 文章来源：https://blog.csdn.net/2303_80856850/article/details/139456330 2025/2/3 12:41:47

前言

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

第九十七节 Java面向对象设计 - Java Object.Finalize方法

Java面向对象设计 - Java Object.Finalize方法 Java提供了一种在对象即将被销毁时执行资源释放的方法。 在Java中&#xff0c;我们创建对象&#xff0c;但是我们不能销毁对象。 JVM运行一个称为垃圾收集器的低优先级特殊任务来销毁不再引用的所有对象。 垃圾回收器给我们一个…...

编程日记 2024/6/5 8:10:04

【scikit-learn009】异常检测系列：单类支持向量机（OC-SVM）实战总结（看这篇就够了，已更新）

1.一直以来想写下机器学习训练AI算法的系列文章，作为较火的机器学习框架，也是日常项目开发中常用的一款工具，最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架OCSVM模型相关知识体系。 3.欢迎批评指正，欢迎互三，跪谢一键三连！ 4.欢迎…...

编程日记 2024/6/5 8:07:01

网络管理与运维

文章目录 网络管理与运维概念&#xff1a;传统网络管理&#xff1a;基于SNMP集中管理&#xff1a;基于iMaster NCE的网络管理&#xff1a;传统网络管理方式&#xff1a; 基于SNMP集中管理&#xff1a;交互方式&#xff1a;MIB&#xff1a;版本&#xff1a;SNMPv3配置网管平台&a…...

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

数据库查询字段在哪个数据表中

问题的提出 当DBA运维多个数据库以及多个数据表的时候&#xff0c;联合查询是必不可少的。则数据表的字段名称是需要知道在哪些数据表中存在的。故如下指令&#xff0c;可能会帮助到你&#xff1a; 问题的处理 查找sysinfo这个字段名称都存在哪个数据库中的哪个数据表 SELEC…...

编程日记 2024/6/5 8:00:52

第 400 场 LeetCode 周赛题解

A 候诊室中的最少椅子数 计数&#xff1a;记录室内顾客数&#xff0c;每次顾客进入时&#xff0c;计数器1&#xff0c;顾客离开时&#xff0c;计数器-1 class Solution {public:int minimumChairs(string s) {int res 0;int cnt 0;for (auto c : s) {if (c E)res max(res, …...

编程日记 2024/6/5 7:58:50

数据结构与算法之Floyd弗洛伊德算法求最短路径

目录 前言 Floyd弗洛伊德算法 定义 步骤 一、初始化 二、添加中间点 三、迭代 四、得出结果 时间复杂度 代码实现 结束语 前言 今天是坚持写博客的第18天&#xff0c;希望可以继续坚持在写博客的路上走下去。我们今天来看看数据结构与算法当中的弗洛伊德算法。 Flo…...

编程日记 2024/6/5 7:57:49

Ubuntu系统设置Redis与MySQL登录密码

Ubuntu系统设置Redis与MySQL登录密码 在Ubuntu 20.04系统中配置Redis和MySQL的密码&#xff0c;您需要分别对两个服务进行配置。以下是详细步骤&#xff1a; 配置Redis密码 打开Redis配置文件: Redis的配置文件通常位于/etc/redis/redis.conf。 sudo nano /etc/redis/redis.c…...

编程日记 2024/6/5 7:55:47

数据库连接池的概念和原理

目录 一、什么是数据库连接池 二、数据库连接池的工作原理 1.初始化阶段&#xff1a; 2.获取连接&#xff1a; 3.使用连接&#xff1a; 4.管理和优化&#xff1a; 三、数据库连接池的好处 一、什么是数据库连接池 数据库连接池&#xff08;Database Connection Pooling&…...

编程日记 2024/6/5 7:54:46

国内常用的编程博客网址：技术资源与学习平台

一、国内常用的编程博客网址&#xff1a;技术资源与学习平台 大家初入编程&#xff0c;肯定会遇到各种各样的问题。我们除了找 AI 工具以外&#xff0c;我们还能怎么迅速解决问题呢&#xff1f; 大家可以通过谷歌&#xff0c;百度&#xff0c;必应&#xff0c;github&#xf…...

编程日记 2024/6/5 7:51:42

怎么给三极管基极或者MOS管栅极接下拉电阻

文章是瑞生网转载&#xff0c;PDF格式文章下载&#xff1a; 怎么给三极管基极或者MOS管栅极接下拉电阻.pdf: https://url83.ctfile.com/f/45573183-1247189078-52e27b?p7526 (访问密码: 7526)...

编程日记 2024/6/5 7:50:40

wordpress文章和博客的区别/宁波seo网络推广公司排名

选对正确的学习方法途径&#xff0c;是高效学习Python的前提。想选一个最好的学习方法&#xff0c;肯定是要先相互比较一下的。 先看看最传统的买一本Python的基础书学习。通常来说&#xff0c;我们能买到的Python基础学习书都是有基本的质量保证的&#xff0c;最起码不会出现错…...

编程日记 2025/2/3 12:34:19

wordpress 字数限制/怎么建网站赚钱

import org.apache.mina.core.buffer.IoBuffer; //导入方法依赖的package包/类Overridepublic MessageDecoderResult decode(IoSession session, IoBuffer in,ProtocolDecoderOutput outPut) throws Exception {//将客户端发来的对象进行封装//TODO 等待测试超长数据是否能正常…...

编程日记 2025/2/3 12:00:13

网站建设销售怎么做/如何建立网站服务器

在华为因为芯片规则影响无法生产芯片之后&#xff0c;业界曾期待中国芯片会涌现更多类似华为的企业&#xff0c;然而现实似乎有点不一样&#xff0c;这两年国内倒下的芯片企业已超过8000多家&#xff0c;似乎显示出这些芯片企业接棒华为成为奢望。一、芯片是资金密集的高门槛行…...

编程日记 2025/2/3 10:37:24

网站的建设属于无形资产吗/搜索引擎优化关键词

http://www.oschina.net/translate/ssi-an-open-source-platform-for-social-signal-interpretation http://hcm-lab.de/...

编程日记 2025/2/3 10:18:56

模型下载网站开发流程/seo教程培训

哪项不是质性研究资料收集的方法&#xff1f;哲学上的“价值”是指( )哮喘的处理方法包括( )哪项不是人力资源的要点()哪首歌是一个艺术类型的转折点&#xff1f;哪项不是质性研究资料收集的方法&#xff1f;哪首歌曲不是“新民歌”&#xff1f;()哪项对于法律的理想是不正确的…...

编程日记 2025/2/3 9:32:21

企业网站建设的报价/网站搜索排名靠前

随着大众创业万众创新的浪潮&#xff0c;越来越多的大企业切入企业服务&#xff0c;同时创业型的企业服务公司也不断涌现。近期听一个创业中的朋友介绍企业魔方&#xff0c;一款现金管理和人力资源管理的工具&#xff0c;是一款“有人味”的产品&#xff0c;自己公司用了后员工…...

编程日记 2025/2/3 8:11:21