全部章节   >>>>


本章目录

3.1 浏览器对象模型

3.1.1 浏览器对象模型

3.2 window 对象

3.2.1 window 对象的常用属性及方法

3.2.2 使用window对象创建对话框

3.2.3 使用window对象操作窗口

3.2.4 使用window对象执行计时事件

3.2.5 实践练习

3.3 history 对象和 location 对象

3.3.1 history对象

3.3.2 location对象

3.3.3 实践练习

3.4 screen对象和navigator对象

3.4.1 screen对象

3.4.2 navigator对象

3.4.3 实践练习

总结:


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浏览器对象模型】的更多相关文章

  1. JavaScript交互式网页设计作业目录(作业笔记)

    JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...

  2. JavaScript交互式网页设计笔记 • 【目录】

    章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...

  3. JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

    全部章节   >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...

  4. 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...

  5. 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...

  6. 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...

  7. JavaScript交互式网页设计 • 【第5章 JavaScript对象】

    全部章节   >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...

  8. JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】

    全部章节   >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...

  9. JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】

    全部章节   >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...

随机推荐

  1. 【STM8】外挂存储器W25Q16

    好像有几张图片被强制缩小了?看到这篇博客的人先对你们说声抱歉,我不知道怎么设置 文字就可以很长(文章宽度的全部),图片就只有文章宽度的2/3宽度 开新分页应该就是原始尺寸了,这点还是和大家说抱歉... ...

  2. An internal error occurred during: “Updating Maven Project”. Unsupported IClasspathEntry kind=4解决办法

    An internal error occurred during: "Updating Maven Project". Unsupported IClasspathEntry k ...

  3. ES安装简记

    JDK # java -versionjava version "1.8.0_231"Java(TM) SE Runtime Environment (build 1.8.0_23 ...

  4. Java资源下载

    tomcat http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.5.49/bin/apache-tomcat-8.5.49.tar.gz     s ...

  5. 阿里云esc 安装 mysql5.7.27

    1. 下载:  wget  http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm 2. 安装: (1) yum -y in ...

  6. 理解css中的 content:" " 是什么意思

    css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 ...

  7. Windows内存管理-分段

    0x01原因 分段的产生原属于安全问题. 一个程序可以自由的访问不属于它的内存位置,甚至可以对那些内容进行修改.这也导致安全问题 促使一种内存隔离的手段 分段的产生. 0x02分段原理 处理器要求在加 ...

  8. Unity实现“笼中窥梦”的渲染效果

    效果 思路 5个面用5个RenderTexture来接受5个摄像机分别获取的小场景图像: RenderTexture就当成屏幕来理解,MainCamera是把画面显示在屏幕上,屏幕就是最大的Rende ...

  9. Svelte入门——Web Components实现跨框架组件复用(二)

    在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...

  10. Android工具 - 随机测试(猴子)

    原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6697535 本文章的前提:已经安装了Eclipse和ADT.androi ...