B41. 浏览器 BOM 对象 & 数学模块
JavaScript 不仅能操作网页内容（DOM），还能与浏览器进行深度交互。BOM（Browser Object Model）就是浏览器为我们提供的对象模型，它让我们可以访问窗口、屏幕、历史记录等信息。与此同时，JavaScript 的
Math模块也提供了丰富的数学运算功能。
1.1. window 对象：浏览器的“大管家”
同学们还记得用 Python 写的
print("Hello World")吗？在网页中，如果想弹出一个对话框显示信息，就需要用到window.alert()。window对象就像 JavaScript 的“大管家”，控制着浏览器窗口的一切行为！
1.1.1. 常用属性与方法
// 获取窗口宽高（包含滚动条）
console.log("窗口宽度：" + window.innerWidth);
console.log("窗口高度：" + window.innerHeight);
// 滚动到页面顶部
window.scrollTo(0, 0);
// 打开新窗口（注意广告拦截器可能拦截！）
window.open("https://example.com", "_blank");WARNING
⚠️ 易错点window.innerWidth 和 screen.width 容易混淆：前者是浏览器窗口的可视区域宽度，后者是屏幕物理分辨率的宽度。
1.2. screen 与 navigator：获取设备和浏览器信息
为什么有些网站在手机上会显示手机版界面？这就要用到
screen对象获取屏幕信息啦！再比如，如何知道用户用的是 Chrome 还是 Safari？navigator对象来帮忙！
1.2.1. screen 对象
// 获取屏幕分辨率
console.log("屏幕宽度：" + screen.width);
console.log("屏幕高度：" + screen.height);
// 可用工作区域（扣除任务栏）
console.log("可用高度：" + screen.availHeight);1.2.2. navigator 对象
// 识别浏览器类型
if (navigator.userAgent.includes("Chrome")) {
console.log("你正在使用 Chrome 浏览器");
}1.3. location 与 history：页面跳转与历史导航
有没有想过，点击“返回”按钮时浏览器做了什么？
history.back()就是答案！如果想让网页自动跳转到新地址，location.href是最常用的方法。
1.3.1. location 对象
// 获取当前 URL
console.log("当前地址：" + location.href);
// 跳转到新页面（5秒后跳转）
setTimeout(() => {
location.href = "https://newpage.com";
}, 5000);TIP
📌 技巧提示
location.search：获取查询参数（如?id=123）location.hash：获取锚点部分（如#section1）
1.3.2. history 对象
// 返回上一页（等同于浏览器后退按钮）
history.back();
// 前进到下一页
history.forward();
// 跳转到最近的第三个历史记录
history.go(-3);WARNING
⚠️ 易错点
location.replace()不会在历史记录中留下当前页面，适合单向跳转；location.href会保留当前页面在历史记录中。
1.4. Math 模块：数学计算的工具箱
在 Python 中我们用
import math，而 JavaScript 的数学函数直接通过Math对象调用。模块化就像把工具分门别类放在工具箱里，要用的时候直接取！
1.4.1. 模块化的意义
- 避免命名冲突（比如自己写的
random()不会覆盖系统函数） - 代码复用更方便
- 逻辑更清晰
1.5. Math 常用方法与常量
如何让网页上的小球随机移动？用
Math.random()生成随机坐标！还记得圆周率 π 吗？直接用Math.PI就能获取。
1.5.1. 常用方法
Math.random() 返回 [0,1) 区间的随机数，所以要得到 [m, n] 之间的随机整数，需要使用 Math.floor(Math.random() * (n - m + 1)) + m。
// 生成 1~10 的随机整数
let num = Math.floor(Math.random() * 10) + 1;
// 计算平方根
console.log(Math.sqrt(16)); // 输出 4
// 取绝对值
console.log(Math.abs(-5.8)); // 输出 5.81.5.2. 常用常量
console.log(Math.PI); // 圆周率 π ≈ 3.14159...
console.log(Math.E); // 自然对数的底数 e ≈ 2.71828...WARNING
⚠️ 易错点
Math.floor()是向下取整Math.ceil()是向上取整Math.round()是四舍五入
别记混了！
📚 知识回顾
| 对象 | 主要用途 |
|---|---|
window | 控制浏览器窗口、执行全局操作 |
screen | 获取设备屏幕信息 |
navigator | 获取浏览器信息（如 userAgent） |
location | 管理页面地址（跳转、刷新） |
history | 控制页面历史记录（前进、后退） |
Math | 提供数学运算（随机数、平方根、圆周率等） |
🧪 课后练习
✅ 基础题
（选择）以下哪项可以获取浏览器的用户代理信息？
- A.
window.userAgent - B.
navigator.userAgent✅ - C.
screen.userAgent
- A.
（填空）生成 5~10 的随机整数：
javascriptMath.floor(Math.random() * ___) + ___→ 答案：6 和 5
（纠错）找出代码错误：
javascriptlet url = location.address; // ❌ 错误！正确应为 location.href
🎯 项目题：制作一个“网页小助手”
要求：
- 点击按钮显示当前窗口宽高
- 点击另一个按钮 3 秒后跳转到指定 URL
- 显示用户浏览器名称（提示：用
navigator.userAgent分析） - （拓展）用
Math.random()实现背景色随机变化
HTML 示例结构：
<button onclick="showWindowSize()">显示窗口大小</button>
<button onclick="redirectAfter3Sec('https://example.com')">3秒后跳转</button>
<p id="browser-info">浏览器信息</p>
<div id="random-bg" style="width: 100%; height: 100px;"></div>JavaScript 示例逻辑：
function showWindowSize() {
alert(`窗口尺寸：${window.innerWidth} x ${window.innerHeight}`);
}
function redirectAfter3Sec(url) {
setTimeout(() => {
window.location.href = url;
}, 3000);
}
function detectBrowser() {
const ua = navigator.userAgent;
let browser = "未知浏览器";
if (ua.includes("Firefox")) {
browser = "Mozilla Firefox";
} else if (ua.includes("Edg")) {
browser = "Microsoft Edge";
} else if (ua.includes("Chrome")) {
browser = "Google Chrome";
}
document.getElementById("browser-info").innerText = `你正在使用：${browser}`;
}
function randomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
function changeBackgroundColor() {
const div = document.getElementById("random-bg");
div.style.backgroundColor = randomColor();
}
// 页面加载时检测浏览器
window.onload = detectBrowser;INFO
💡 提示：使用 setInterval(changeBackgroundColor, 1000) 可实现每秒变换背景色的动态效果。