BOM对象学习
一.BOM对象的介绍
1.什么是BOM
之前我们学习过了DOM对象，它是文档对象，而BOM则是浏览器对象模型，它是一组用于操作浏览器窗口和处理与浏览器相关的对象集合。
它提供了访问和控制浏览器窗口、处理用户输入、操作浏览器历史记录、处理Cookies等的功能。通过BOM对象，开发人员可以获取有关浏览器、窗口和屏幕的信息，并与浏览器进行交互。
2.BOM的结构
DOM的结果是一个树，那么BOM对象的结构体呢?
如下所示：
3.常见的子对象
window对象：window对象是BOM的顶层对象，表示浏览器窗口。
- document对象：也成为DOM对象，是HTML页面当前窗体的内容，是window对象的一个属性。
- navigator对象：navigator对象提供有关浏览器的信息，例如浏览器的名称、版本、操作系统等。
- location对象：location对象用于获取和操作浏览器的URL。
- history对象：history对象用于操作浏览器的历史记录，可以使用前进和后退功能
- screen对象：screen对象提供了关于用户屏幕的信息，如屏幕的宽度、高度和颜色深度等。
二.Window对象
1.全局作用域
- window对象是BOM中所有对象的核心，也是BOM所有对象的父类，定义在全局作用域的变量，函数，以及js中的内置函数都可以被window对象调用。
- 示例：
<script>
var area="北京";
var num1="111";
function getArea() {
return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(num1));
</script>
- 运行效果如下所示：
2.弹出对话框和窗口
2.1 window的对话框方法
- 警告框 alert()：如果要确保信息传递给用户，通常会使用警告框 ，用户将需要单击“确定”来继续。
- 确认框 confirm()：如果您希望用户验证或接受某个东西，则通常使用“确认”框。
- 提示框 prompt()： 如果您希望用户在进入页面前输入值，通常会使用提示框。
2.2窗口属性和方法
-
属性：closed，name，opener，parent，self，top。
-
方法：open（），close（），focus（），print（），
scrollBY（）：按照指定的像素值来滚动内容。
scrollTo（）：把内容滚动到指定的坐标。 -
open（）打开一个新的浏览器窗口：参数如下open（URL，name，specs，replace），其中URL为指定地址（可不写），name为窗口的名字，specs来设置窗口的属性，replace设置true和flase是否替换浏览历史中的当前条目。
-
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>使用示例</title>
<script>
function openWindow() {
// 打开新的窗口
var newWindow = window.open("", "newWindow", "width=400,height=300");
// Set window properties
console.log("Closed: " + newWindow.closed);
console.log("Name: " + newWindow.name);
console.log("Opener: " + newWindow.opener);
console.log("Parent: " + newWindow.parent);
console.log("Self: " + newWindow.self);
console.log("Top: " + newWindow.top);
// 使用方法
newWindow.focus();
//打印当前窗口的内容
newWindow.print();
// Perform scrolling
newWindow.scrollBy(0, 100);
newWindow.scrollTo(0, 0);
}
function closeWindow() {
// Close the current window
window.close();
}
</script>
</head>
<body>
<h1>使用示例</h1>
<button onclick="openWindow()">Open Window</button>
<button onclick="closeWindow()">Close Window</button>
</body>
</html>
效果：
2.3窗口位置和大小
- 属性
| 名称 | 说明 |
|---|---|
| screenLeft，screenright | 返回相对于屏幕窗口的x坐标和y坐标（Firebox不支持） |
| screenX，screenY | 返回相对于屏幕窗口的x坐标和y坐标（IE8不支持） |
| innerHeight，innerWidth | 返回窗口的文档显示区的高度和宽度 |
| outerHeight，outerWidth | 返回窗口的外部高度和宽度 |
- 方法
方法主要是移动位置和设置窗口大小：
moveBy（）：移动相对位置，是在原有基础上的加减。
moveTo（）：直接移动到指定位置。
resizeBy（）：宽高调整到相对大小，是在原有基础上的加减。
resizeTo（）：窗口宽高直接调整为指定大小。
三.定时器的使用（重要）
在 JavaScript 中，定时器指的是一种机制，可以用来在一定时间间隔之后执行指定的代码或函数。JavaScript 提供了两种定时器：setTimeout 和 setInterval。
1.定时方法
-
setTimeout 方法：它用于在指定的延迟时间之后执行一次指定的代码或函数。
语法：setTimeout(function, delay, param1, param2, …) 或 setTimeout(code, delay) -
setInterval 方法：它用于按照指定的时间间隔重复执行一次指定的代码或函数。
语法：setInterval(function, delay, param1, param2, …) 或 setInterval(code, delay) -
参数：function：指定要执行的函数。
delay：时间间隔，以毫秒为单位。
param1, param2, …：（可选）传递给函数的参数列表。
code：指定要执行的 JavaScript 代码的字符串。
返回值：一个计时器标识符，可以用于取消定时器的执行。
2. 区别
setTimeout（）：在一个时间段只执行一次。
setInterval（）：在一个时间段内以设置的毫秒数周期性执行。
clearTimeOut（）取消setTimeout（）定时器。
clearInterval ）取消setInterval （）定时器。
3.使用示例
- 倒计时3秒后自动跳转页面：还结合了DOM的知识点，修改了文本，实现倒计时的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="https://www.baidu.com/">
<span id="seconds">3</span>秒后自动完成跳转，也可点击链接跳转
</a>
</div>
<script>
function timing(sec,url){
var seconds=document.getElementById('seconds'); //获取元素对象
seconds.innerHTML=sec--; //seconds获取元素内容是--sec
if (sec>0){
setTimeout('timing('+sec+',\''+url+'\')',500); //递归调用
}
else {
location.href=url; //当前页面打开URL的网页，完成跳转
}
};
timing(3,'https://www.baidu.com/');
</script>
</body>
</html>
效果如下：
- 实现轮播图效果
- 这里要说明一下window.onload是一个事件，后面会具体提到，它在整个网页的内容（包括图像、样式表、嵌入的对象等）都加载完成后触发。
- 定时器的设置和命名以及调用，销毁都写得很清楚了，也标注了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//利用数组来储存图片的地址
var arr = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var img = document.getElementById("img2");
//图片数组的下标
var index=0;
img.src = arr[index];
var timer=null;
var button5 = document.getElementById("button5");
button5.onclick = function(){
//设置定时器timer，每1000毫秒执行一次
timer = setInterval(function(){
if(index == arr.length-1){
index = 0;
}
img.src = arr[index++];
},1000);
};
var button6 = document.getElementById("button6");
button6.onclick = function(){
//关闭定时器
clearInterval(timer);
};
};
</script>
<div id="box17" >
<img style="width: 350px;height: 360px" src="img/img1.jpg" id="img2">
</div>
<div id="box18">
<button id="button5">开始</button>
<button id="button6">停止</button>
</div>
</body>
</html>
效果如下：
四.location
1.URL
URL 是统一资源定位符（Uniform Resource Locator） 的缩写，它用于在互联网上定位和标识资源（如网页、图像、视频等）的地址。
在URL中包含了网络协议，服务器的主机名，端口号，资源名称字符串，参数以及锚点。
2.更改和获取
location对象中提供了更改方法，所有主流浏览器都支持。
- assign():载入一个新的文档
- reload（）：重新载入当前的文档
- replace（）：用新的文档替换当前文档
获取URL的参数，location.属性就可以获取了，它的属性如下。
- host：主机名和端口
- href：完整的URL
- protocol：返回一个URL协议
- pathname：返回URL的路径名
- hash：返回一个URL的锚部分
3.使用示例
下面写一个方法使用效果，实现点击载入新文档，就载入新的文档，界面实现了跳转URL也发生了更改。击刷新界面，重新载入当前文档，注意时间变化了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="载入新文档" onclick="newpage()">
<input type="button" value="刷新页面" onclick="freshpage()">
<p id="time"></p>
<script>
var da=new Date();
var data1=da.toLocaleTimeString();
//将p中的html设置为时间
document.getElementById('time').innerHTML=data1;
function newpage(){
window.location.assign('https://www.baidu.com/');
}
//刷新文档
function freshpage(){
window.location.reload(true);
}
</script>
</body>
</html>
五.history对象
在 JavaScript 中，history 对象提供了与浏览器历史记录相关的功能。使用 history 对象，你可以根据需要执行各种浏览器导航操作，包括后退、前进、前进或后退指定数量的历史记录条目，以及动态修改 URL 和状态对象等。
1.属性和方法
history 对象有以下常用的属性和方法：
- 属性：
- length：返回当前会话的历史记录条目数。
- state：返回当前活动历史条目的状态对象。
- 方法：
- back()：与用户单击浏览器的后退按钮相同，导航到历史记录中的上一页。
- forward()：与用户单击浏览器的前进按钮相同，导航到历史记录中的下一页。
- go()：接受一个整数作为参数，用于前进或后退指定数量的历史记录条目。
- pushState(state, title, url)：在历史记录中添加新的条目，并更新当前 URL，但不会导致浏览器加载新的页面。
- replaceState(state, title, url)：替换当前历史记录中的条目，并更新当前 URL，但不会导致浏览器加载新的页面。
2.使用和示例
// 后退一页
history.back();
// 前进一页
history.forward();
// 前进两页
history.go(2);
// 后退三页
history.go(-3);
// 添加新的历史记录条目，更新 URL
const stateObj = { page: "example" };
const title = "Example Page";
const url = "example.html";
history.pushState(stateObj, title, url);
// 替换当前历史记录条目，更新 URL
const newStateObj = { page: "updated-example" };
const newTitle = "Updated Example Page";
const newUrl = "updated-example.html";
history.replaceState(newStateObj, newTitle, newUrl);
六.navigator和screen对象
在 JavaScript 中，navigator 对象和 screen 对象提供了关于浏览器和用户屏幕的信息。
1.navigator对象
navigator 对象提供了与浏览器相关的信息，包括浏览器的名称、版本、用户代理字符串等。下面是一些 navigator 对象的常用属性：
- userAgent：返回浏览器的用户代理字符串，该字符串通常用于识别浏览器的类型和版本。
- appName：返回浏览器的名称。
- appVersion：返回浏览器的版本号。
- platform：返回操作系统平台。
- language：返回当前浏览器的首选语言。
2.screen对象
screen 对象提供了与用户屏幕相关的信息，包括屏幕的宽度、高度和颜色深度等。下面是一些 screen 对象的常用属性：
- width：返回屏幕的宽度（以像素为单位）。
- height：返回屏幕的高度（以像素为单位）。
- availWidth：返回屏幕可用的宽度（不包括任务栏或其他屏幕辅助元素）。
- availHeight：返回屏幕可用的高度（不包括任务栏或其他屏幕辅助元素）。
- colorDepth：返回屏幕的颜色深度（每个像素使用的位数）。
- pixelDepth：返回屏幕的颜色深度（每个像素使用的位数）。
3.综合实践：红绿灯倒计时
- 这里用到了css和html，这里红绿灯显示使用了opacity不透明度属性，1为亮的，0.3代表暗的。
- 倒计时显示文本使用了DOM对象的innerText
- 倒计时使用了定时器，每一秒钟实现一次倒计时，文本显示是倒计时，但是逻辑上我们使用了从0开始递增，如果红灯开始超过10秒，跳转到绿灯。
- 边界条件，每一个灯时长达标，清楚定时器，并且执行下一个灯的定时器。
<!DOCTYPE html>
<html>
<head>
<style>
.traffic-light {
width: 100px;
height: 300px;
background-color: black;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10px;
}
.light {
width: 80px;
height: 80px;
border-radius: 50%;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
.countdown-text {
font-size: 16px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="traffic-light">
<div id="red" class="light"></div>
<div id="yellow" class="light"></div>
<div id="green" class="light"></div>
</div>
<div id="countdown" class="countdown-text"></div>
<script>
function trafficLightTimer() {
var redLight = document.getElementById("red");
var yellowLight = document.getElementById("yellow");
var greenLight = document.getElementById("green");
var countdownText = document.getElementById("countdown");
redLight.style.opacity = 1;
yellowLight.style.opacity = 0.3;
greenLight.style.opacity = 0.3;
countdownText.innerText = "红灯倒计时 10 秒";
var redTimer = setInterval(function() {
countdownText.innerText = "红灯倒计时 " + (10 - i) + " 秒";
i++;
if (i > 10) {
clearInterval(redTimer);
countdownText.innerText = "";
redLight.style.opacity = 0.3;
yellowTimer();
}
}, 1000);
var i = 0;
function yellowTimer() {
yellowLight.style.opacity = 1;
countdownText.innerText = "黄灯倒计时 2 秒";
var yellow = setInterval(function() {
countdownText.innerText = "黄灯倒计时 " + (2 - i) + " 秒";
i++;
if (i > 2) {
clearInterval(yellow);
countdownText.innerText = "";
yellowLight.style.opacity = 0.3;
greenTimer();
}
}, 1000);
}
var j = 0;
function greenTimer() {
greenLight.style.opacity = 1;
countdownText.innerText = "绿灯倒计时 4 秒";
var green = setInterval(function() {
countdownText.innerText = "绿灯倒计时 " + (4 - j) + " 秒";
j++;
if (j > 4) {
clearInterval(green);
countdownText.innerText = "";
greenLight.style.opacity = 0.3;
trafficLightTimer();
}
}, 1000);
}
}
trafficLightTimer();
</script>
</body>
</html>
实现效果：
到这边JAvaScript的重点就差不多结束了，这个红绿灯倒计时的实例认认真真敲完会有很大的帮助。剩下的还有事件了，鼠标啦，键盘啦…等等，用来实现前端小游戏和用户验证码之类的操作。接下来就是JOSN和AJAX的学习，为接下来的前端框架学习做准备。
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
