大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
全部章节 >>>>
本章目录
3.1 浏览器对象模型
3.1.1 浏览器对象模型
BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象
一个完整的 BOM 主要包括 window 对象、history 对象、location 对象和 document 对象等
BOM中，整个对象的层次关系如下图
3.2 window 对象
3.2.1 window 对象的常用属性及方法
window 对象处于对象模型的第一层，对于每个打开的窗口系统都会自动将其定义为window 对象
window 对象常用属性
|
属性 |
含义 |
|
document |
窗口中当前显示的文档对象 |
|
history |
history 对象保存窗口最近加载的 URL |
|
location |
当前窗口的 URL |
|
status |
状态栏文本 |
window 对象常用方法
|
方法 |
说明 |
|
prompt |
显示可提示用户输入的对话框 |
|
alert |
显示带有一个提示消息和一个确定按钮的警示框 |
|
confirm |
显示一个带有提示信息、确定和取消按钮的确认框 |
|
close |
关闭浏览器窗口 |
|
open |
打开一个新的浏览器窗口，加载给定URL所指定的文档 |
|
setTimeout |
在设定的毫秒数后调用函数或计算表达式 |
|
setInterval |
按照设定的周期（以毫秒计）来重复调用函数或表达式 |
|
clearInterval |
取消重复设置，与setInterval对应 |
3.2.2 使用window对象创建对话框
alert() 方法弹出警告对话框
<body>
<script type="text/javascript">
var age = 23;
var name = " 张三 ";
window.alert(" 我是：" + name + "\n 年龄是：" + age);
</script>
</body>
prompt() 方法创建提示对话框
<body>
<script type="text/javascript">
var name = window.prompt(" 请输入昵称：");
window.alert(" 欢迎你："+ name);
</script>
</body>
confirm() 方法创建确认对话框
<body>
<script type="text/javascript">
var flag = window.confirm(" 确认删除吗 ?");
if(flag) {
window.alert(" 执行删除操作 ");
} else {
window.alert(" 取消删除操作 ");
}
</script>
</body>
3.2.3 使用window对象操作窗口
window对象的 open() 方法和 close() 方法用于打开和关闭窗口
open方法的第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征
|
名称 |
说明 |
|
height、width |
窗口文档显示区的高度、宽度，单位为像素 |
|
left、top |
窗口与屏幕左边、顶端的距离，单位为像素 |
示例：制作一个从天而降的广告页面，打开主页面时，广告页面也随之打开
<body>
<script type="text/javascript">
var newWin;
window.onload=function(){ newWin=window.open("adv.html","adv","width=800,height= 500,left=275,top=118");
}
</script>
<h2> 主页面 </h2>
<a href="javascript:newWin.close()"> 关闭广告 </a>
</body>
3.2.4 使用window对象执行计时事件
setTimeout() 方法会在指定的时间执行指定的代码并退出。setInterval() 方法会根据设置的时间间隔反复执行指定的代码，直至程序结束或利用clearInterval() 方法取消
<body>
<script type="text/javascript">
setTimeout("alert('hello')",2000);
</script>
</body>
示例：使用setInterval()和clearInterval()制作小女孩看书的动态效果
<script type="text/javascript">
var i=1; // 保存动画当前播放的静态画面的索引
function change() {
if(i<4) i++;
else i=1; // 播放到最后一幅图画时，再从头开始
document.getElementById("pic").src="../img/girl_"+i+".gif";
}
var dh;
function play() {
dh = setInterval("change()",100);
}
function stop() {
clearInterval(dh);
}
</script>
requestAnimationFrame() 方法是浏览器用于定时循环操作的一个接口，类似于 setTimeout，主要用途是按帧对网页进行重绘
优势在于充分利用显示器的刷新机制，比较节省系统资源
requestID = window.requestAnimationFrame(callback);
示例：使用requestAnimationFrame()方法让正方形从左到右慢慢移动
var startTime = 0;
function change() {
if (startTime == 0) {
startTime = new Date();
} time = new Date();
document.getElementById("div").style.left = ((time - startTime) / 10 % 500) + "px";
}
var animation;
function start() {
animation = requestAnimationFrame(start);
change();
}
function stop() {
cancelAnimationFrame(animation);
} 
3.2.5 实践练习
3.3 history 对象和 location 对象
3.3.1 history对象
history对象保存了当前浏览器窗口中打开页面的一个历史记录列表，使用 history对象可以将当前浏览器页面跳转到某个曾经打开过的页面
|
方法 |
描述 |
|
back() |
后退一个页面，相当于浏览器后退按钮 |
|
forward() |
前进一个页面，相对于浏览器前进按钮 |
|
go() |
打开一个指定位置的页面 |
可以使用 history.go(-1) 和 history.go(1) 代替 histroy.back() 和 history.forward()
示例：使用history对象中的方法实现页面跳转
<body>
<a href="../3.9-2.html"> 打开下一个页面 </a>
</body>
<body>
<a href="http://www.baidu.com"> 打开百度页面 </a><br/>
<a href="javascript:window.history.forward()"> 前进 </a><br/>
<a href="javascript:window.history.back()"> 后退 </a><br/>
<a href="javascript:window.history.go(1)"> 前进 </a><br/>
<a href="javascript:window.history.go(-1)"> 后退 </a>
</body>
location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏
3.3.2 location对象
location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏
|
名称 |
描述 |
|
href 属性 |
返回或设置当前页面的 URL |
|
hostname 属性 |
返回 Web 主机的域名 |
|
pathname 属性 |
返回当前页面的路径和文件名 |
|
port 属性 |
返回 Web 主机的端口（80 或 443） |
|
protocol 属性 |
返回所使用的 Web 协议（http:// 或 https://） |
|
reload() 方法 |
重新加载当前页面，相对于浏览器的刷新按钮 |
|
assign() 方法 |
加载新的文档 |
示例：使用location对象中的属性和方法实现加载用户所选页面
<script type="text/javascript">
window.onload = function() {
var info = document.getElementById("info");
info.innerHTML=" 主机域名：" +
window.location.hostname+"<br/> URL 地址："+
window.location.href +"<br/> 主机端口："+
window.location.port +"<br/>Web 协议："+
window.location.protocol+"<br/> 页面的路径和文件名：" + window.location.pathname;
}
function changURL() {
// 获取选择的列表项的值
var url = document.getElementById("sel").value;
window.location.href = url; // 设置当前浏览器窗口地址栏的 URL
}
</script>
3.3.3 实践练习
3.4 screen对象和navigator对象
3.4.1 screen对象
window.screen 对象包含了用户屏幕的相关信息，在编写时可以不使用 window前缀
|
属性 |
描述 |
|
availWidth |
返回显示屏幕的可用宽度（除 Windows 任务栏之外） |
|
availHeight |
返回显示屏幕的可用高度（除 Windows 任务栏之外） |
|
colorDepth |
返回目标设备或缓冲器上的调色板的比特深度 |
|
pixelDepth |
返回显示屏幕的颜色分辨率（比特每像素） |
|
width |
返回显示器屏幕的宽度 |
|
height |
返回显示器屏幕的高度 |
示例：使用screen对象中的属性获取访问者的屏幕信息
<h3> 你的屏幕：</h3>
<script type="text/javascript">
document.write(" 总宽度 / 高度 :");
document.write(screen.width+"*"+screen.height);
document.write("<br/>");
document.write(" 可用宽度 / 高度 :");
document.write(screen.availWidth+"*"+screen.availHeight);
document.write("<br/>");
document.write(" 色彩深度 :");
document.write(screen.colorDepth);
document.write("<br/>");
document.write(" 色彩分辨率 :");
document.write(screen.pixelDepth);
</script>
3.4.2 navigator对象
navigator对象包含了浏览器的有关信息
navigator 对象的实例是唯一的，可以用 window 对象的 navigator 属性来引用它
|
方法 |
描述 |
|
javaEnabled() |
规定浏览器是否启用 Java |
|
taintEnabled() |
规定浏览器是否启用数据污点，仅适用于 IE 浏览器（Data Tainting） |
navigator对象的常用属性如下
|
属性 |
描述 |
|
appCodeName |
返回浏览器的代号 |
|
appMinorVersion |
返回浏览器的次级版本 |
|
appName |
返回浏览器的名称 |
|
appVersion |
返回浏览器的平台和版本信息 |
|
browserLanguage |
返回当前浏览器的语言 |
|
cookieEnabled |
返回浏览器中是否启用 cookie 的布尔值 |
|
cpuClass |
返回浏览器系统的 CPU 等级 |
|
onLine |
返回系统是否处于联机模式的布尔值 |
|
platform |
返回运行浏览器的操作系统平台 |
|
systemLanguage |
返回操作系统使用的默认语言 |
|
userAgent |
返回由客户机发送服务器的 user-agent 头部的值 |
|
userLanguage |
返回操作系统的自然语言设置 |
示例：使用navigator对象中的属性和方法获取当前浏览器的相关信息
<body>
<div id="info"></div>
<script type="text/javascript">
var info = "<p> 浏览器代号 :" + navigator.appCodeName + "</p>";
info+="<p> 浏览器名称 :"+navigator.appName+"</p>";
info+="<p> 浏览器版本 :"+navigator.appVersion+"</p>";
info+="<p> 是否处于联机模式 :"+navigator.onLine+"</p>";
info+="<p> 启用 Cookies:"+navigator.cookieEnabled+"</p>";
info+="<p> 硬件平台 :"+navigator.platform+"</p>";
info+="<p> 用户代理 :"+navigator.userAgent+"</p>";
info+="<p> 是否启用 Java:"+navigator.javaEnabled()+"</p>";
document.getElementById("info").innerHTML=info;
</script>
</body>
由于 navigator 会误导浏览器检测，所以可以使用对象检测来嗅探不同的浏览器。但不同的浏览器支持不同的对象，因此对于不同的浏览器，要使用不同的对象来检测
|
集合 |
描述 |
|
|
返回对文档中所有嵌入式对象的引用 |
|
plugins[] |
该集合是一个 plugin 对象的数组，其中的元素代表浏览器已经安装的插件。plugin对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表 |
|
|
虽然 plugins[ ] 数组是由 IE4 定义的，但是在 IE4 中它却总是空的，因为 IE4 不支持插件和 plugin 对象 |
示例：使用navigator对象显示出浏览器安装了哪些插件
<body>
<h2> 你的浏览器安装了以下插件：</h2>
<script type="text/javascript">
var plug = navigator.plugins;
for (var i=0; i<plug.length;i++){
document.write(plug[i].name+"<br/>")
}
</script>
</body>
3.4.3 实践练习
总结：
window是浏览器对象模型的顶层对象
- alert() 方法：显示带有一个提示消息和一个“确定”按钮的警示框
- confirm() 方法：显示一个带有提示信息、“确定”和“取消”按钮的确认框
- open() 方法：打开一个新的浏览器窗口，加载给定 URL 所指定的文档
- setInterval() 方法：按照设定的周期（以毫秒计）来重复调用函数或表达式
history对象用来管理当前窗口最近访问过的URL
location对象用来管理当前窗口的URL信息
- href 属性：返回或设置当前页面的URL
- reload() 方法：重新加载当前页面，相对于浏览器的刷新按钮
- assign() 方法：加载新的文档
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/179937.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...