JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>>
本章目录
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() 方法:加载新的文档
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】的更多相关文章
- JavaScript交互式网页设计作业目录(作业笔记)
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
- JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
随机推荐
- 【STM8】外挂存储器W25Q16
好像有几张图片被强制缩小了?看到这篇博客的人先对你们说声抱歉,我不知道怎么设置 文字就可以很长(文章宽度的全部),图片就只有文章宽度的2/3宽度 开新分页应该就是原始尺寸了,这点还是和大家说抱歉... ...
- An internal error occurred during: “Updating Maven Project”. Unsupported IClasspathEntry kind=4解决办法
An internal error occurred during: "Updating Maven Project". Unsupported IClasspathEntry k ...
- ES安装简记
JDK # java -versionjava version "1.8.0_231"Java(TM) SE Runtime Environment (build 1.8.0_23 ...
- Java资源下载
tomcat http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.5.49/bin/apache-tomcat-8.5.49.tar.gz s ...
- 阿里云esc 安装 mysql5.7.27
1. 下载: wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm 2. 安装: (1) yum -y in ...
- 理解css中的 content:" " 是什么意思
css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 ...
- Windows内存管理-分段
0x01原因 分段的产生原属于安全问题. 一个程序可以自由的访问不属于它的内存位置,甚至可以对那些内容进行修改.这也导致安全问题 促使一种内存隔离的手段 分段的产生. 0x02分段原理 处理器要求在加 ...
- Unity实现“笼中窥梦”的渲染效果
效果 思路 5个面用5个RenderTexture来接受5个摄像机分别获取的小场景图像: RenderTexture就当成屏幕来理解,MainCamera是把画面显示在屏幕上,屏幕就是最大的Rende ...
- Svelte入门——Web Components实现跨框架组件复用(二)
在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...
- Android工具 - 随机测试(猴子)
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6697535 本文章的前提:已经安装了Eclipse和ADT.androi ...