一、什么是BOM

     概念
  BOM(Browser Object Model)即浏览器对象模型。BOM提供了独立于内容,而与浏览器窗口进行交互的对象;
     核心
  由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
     不足
  BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
 

二、BOM结构图

BOM主要是对窗口的操作,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。从上图可以看出Window的子对象主要有如下几个:

JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象

三、常用对象

window对象
history对象
location对象

四、window对象

1、window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。


<script>
var num = Math.round(Math.random()*100);
console.log(num);
function acceptInput(){
  //2.让用户输入(prompt)并接受 用户输入结果,默认值为10.
  var userNum = prompt("请输入一个0~100之间的数字!","10");
  //3.将用户输入的值与 随机数进行比较
if(isNaN(+userNum)){
//用户输入的无效(重复2,3步骤)
alert("请输入有效数字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
alert("您输入的大了!");
acceptInput() }else if(userNum < num){
//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
alert("您输入的小了!");
acceptInput() }else{
//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
var result = confirm("恭喜您!答对了,是否继续游戏?");
if(result){
//是 ==> 重复123步骤.
num = Math.round(Math.random()*100);
acceptInput() }else{
//否==> 关闭窗口(close方法).
close();
}
}
}
acceptInput()
</script>

  

2、window对象应用(2)【setInterval()和clearInterval()】


<!DOCTYPE html>
<html lang="UTF8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body> </body> <input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<button onclick="comeon()">继续</button> <script> function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2; } var clock; function begin(){ if (clock==undefined){ showTime();
clock=setInterval(showTime,1000);
} } function end(){
clearInterval(clock);
} function comeon(){
showTime();
clock=setInterval(showTime,1000);
} </script>
</html>

  

3、setTimeout 和clearTimeout

function abc(){
alert('aaa');
} var ID = setTimeout(abc,2000); // 2s后调用调用一次对应函数,注意:只调用一次!! clearTimeout(ID); //清除

  

五、history对象

History 对象属性

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

history.length // 3

History 对象方法

history对象提供了一系列方法,允许在浏览历史之间移动。

  • back():移动到上一个访问页面,等同于浏览器的后退键。
  • forward():移动到下一个访问页面,等同于浏览器的前进键。
  • go():接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward()go(-1)相当于back()

六、location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

注意:assign和replace方法的区别

assign(URL):跳转到指定URL,可以后退

replace(URL):直接替换成指定URL,无后退可言


JavaScript快速入门-BOM对象的更多相关文章

  1. JavaScript快速入门-ECMAScript对象介绍

    一.概念介绍 在 ECMAScript 中,所有对象并非同等创建的.一般来说,可以创建并使用的对象有三种:本地对象.内置对象和宿主对象. 要理解这三种对象,先要理解宿主环境. 1.宿主环境 一般宿主环 ...

  2. JavaScript快速入门-DOM对象

    一.概述 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允 ...

  3. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  4. 【学习笔记】:JavaScript中的BOM对象

    JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...

  5. es6 快速入门 系列 —— 对象

    其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...

  6. JavaScript快速入门-ECMAScript本地对象(Date)

    JavaScript中的Date 对象用于处理日期和时间. var myDate=new Date()  #Date 对象会自动把当前日期和时间保存为其初始值. 一.Date对象的方法 方法 示例 n ...

  7. Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...

  8. JavaScript快速入门(一)——JavaScript概览

    JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netind ...

  9. javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

随机推荐

  1. mysql的表和数据类型

    一.查看当前数据库所有表 mysql> use db Database changed mysql> show tables; Empty set (0.00 sec) #表示db数据库下 ...

  2. C++使用初始化列表提高效率(转):

    转自:http://www.cnblogs.com/graphics/archive/2010/07/04/1770900.html 何谓初始化列表 与其他函数不同,构造函数除了有名字,参数列表和函数 ...

  3. sql: having使用,及删除重复数据

    写了好几年的sql,having语句基本上很少写,这就有一点尴尬了,现在总结一下having的作用,每日整理一下学习文档. having 通常伴随group by使用,过滤group by的数据集. ...

  4. 使用 Bulk Copy 将大量数据复制到数据库

    如果一次要向数据库服务器提交多条记录 , 通常会执行多次Insert命令 , 这样就为要插入的每个记录执行一次与数据库服务器的往返 , 这就给服务器增加了压力 , 效率也大大的降低了... .Net  ...

  5. Linux终端里的记录器

    我们在调试程序的时候,免不了要去抓一些 log ,然后进行分析. 如果 log 量不是很大的话,那很简单,只需简单的复制粘贴就好. 但是如果做一些压力测试,产生大量 log ,而且系统内存又比较小(比 ...

  6. ES6新特性2:变量的解构赋值

    本文摘自ECMAScript6入门,转载请注明出处. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).不仅适用于var命令,也适用于let和c ...

  7. 多线程之ThreadLocal(转)

    相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资源时的 ...

  8. 多线程之synchronized

    Java并发编程:synchronized 虽然多线程编程极大地提高了效率,但是也会带来一定的隐患.比如说两个线程同时往一个数据库表中插入不重复的数据,就可能会导致数据库中插入了相同的数据.今天我们就 ...

  9. Python:numpy.newaxis

    x1[:,np.newaxis]:增维,转置 从字面上是插入新的维度的意思 demo1: 针对一维的情况 >>> b = np.array([1, 2, 3, 4, 5, 6]) & ...

  10. 使用ROS节点——Node & Master——roscore、rosrun、rosnode

    1.Node 在ROS的世界里, 最小的进程单元就是节点( node) . 一个软件包里可以有多个可执行文件, 可执行文件在运行之后就成了一个进程(process), 这个进程在ROS中就叫做节点. ...