JavaScript学习4:BOM之window对象

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己的想法去扩展它,那么浏览器共有的对象就成了事实的标准,所以,BOM本身是没有标准的或者说是还没有哪个组织去为它制定标准。

本文我们主要来看BOM中的核心对象:Window对象

Window对象是BOM的核心对象,它表示浏览器的一个实例。Window对象处于JavaScript结构的最顶层(如下图所示),对于每个打开的窗口,系统都会自动为其定义window对象。

1 对象的属性和方法

Window对象有一系列的属性,这些属性本身也是对象。Window对象下的属性和方法,可以使用window.属性和window.方法()或者直接属性和方法()的方式调用。举个例子:window.alert()和alert()是一样的意思。

由于window对象的属性和方法较多,这里不再一一列举。大家自己可以查阅文档资料。

2系统对话框

浏览器是通过alert()、confirm()和prompt()方法来调用系统对话框向用户显示信息的。系统对话框与浏览器中显示的网页没有关系,也不包含HTML。

举个简单的输入提示框的例子:

<span style="font-size:18px;">var num=prompt('请输入第一个数字',0);
var num1=prompt('请输入第二个数字',0);
var num2= Number(num)+Number(num1);
alert('两个数字的和是:'+ num2); </span>

当然还有其他的提示框,比如调用系统的打印、查找对话框等等,还可以对浏览器的状态栏的初始值进行设置。

3新建窗口

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,它可以接受四个参数:1.要加载的URL;2.窗口的名称或者窗口目标;3.一个特定的字符串;4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

举个例子说明一下如何使用

<span style="font-size:18px;">open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');</span>

4间歇调用和超时调用

JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来控制代码在特定的时刻执行。前者在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次。

超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间。调用setTimeout()方法之后,该方法会返回一个数值ID,表示超时调用。这个超时调用的ID是计划执行代码的唯一标识,可以通过它来取消超时调用。

要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

间歇调用和超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同。

取消间歇调用方法和取消超时调用类似,使用clearInterval()方法。但取消间歇调用的重要性远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面关闭。

一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,因为需要根据情况来取消ID,并且可能会造成同步的一些问题,因此不建议使用间歇调用。下面我们使用js写一个5秒的定时器:

<span style="font-size:18px;">var num=0;
var max=5;
function timer(){    //声明一个定时器
	num++;
	if(num==max){
		alert('5秒后结束!');
	}else{
		setTimeout(timer,1000);
	}
}

setTimeout(timer,1000);  //执行定时器</span>

至此,对于BOM的window对象就介绍完了,没有什么高深的东西和牛逼的技巧,都是基础的东西,但是这是我们的必经之路,万丈高楼平地起!

时间: 2024-10-12 02:29:24

JavaScript学习4:BOM之window对象的相关文章

黑马JavaScript学习一 BOM之Window对象定时器功能

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <body> 8 <img id="lunbo" src="img/banner_1.jpg" alt="&q

javascript学习笔记整理(window对象)

浏览器对象模型 (BOM--Browser Object Model),window对象是BOM中所有对象的核心 A.属性 1.(位置类型-获得浏览器的位置) IE:window.screenLeft    获得浏览器距屏幕左上角的左边距  window.screenTop    获得浏览器距屏幕左上角的上边距 FF:  screenXscreenY 2.获得浏览器的尺寸 window.innerWidth      获得窗口的宽度window.innerHeight      获得窗口的高度

[转] JavaScript学习:BOM和DOM的区别和关联

BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要

JS学习笔记-BOM之window

BOM:BrowserObjectModel,浏览器对象模型,提供JS中对浏览器的各种操作的对象,是JS应用中唯一没有相关标准的部分,这事BOM经常出现问题的所在,主要用于处理浏览器窗口与框架,浏览器特有的JS扩展也被默认为BOM的一部分,而各浏览器之间的公有对象就成了默认的标准.本篇文章将主要介绍window对象. 属性 世界上本没有模型,用的多了也就成了模型.模型便是一个可供参考的东西,BOM中的一系列通用的对象便构成了这个模型,其结构可展示为: window的六大属性,同时它们也是对象:

JavaScript学习12 JS中定义对象的几种方式

JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型("prototype")方式 5.动态原型方式 一.基于已有对象扩充其属性和方法 <script type="text/javascript"> var object = new Object(); object.name

javascript知识点之DOM与window对象

在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本操作: 获得节点: document:通过元素ID获取节点,标签,name属性 节点指针:获取元素首个子节点,最后一个,子节点列表,兄弟节点的前一个后一个,节点的父节点 节点操作: 创建节点:创建元素节点,属性节点,文本节点 插入节点:节点的子节点添加新的子节点  已有节点前插入新子节点 替换节点:

Javascript学习总结-BOM编程-(六)

1. BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 1.2. BOM对象: 1.3. window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架. Wind

BOM之window对象

双重角色 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.这意味着在网页中定义的任何一个对象.变量和函数,都以window作为其Global对象. 全局作用域 [1]在全局作用域中声明的变量.函数都会变成window对象的属性和方法 var age = 29; function sayAge(){ console.log(this.age); }

JavaScript学习12 JS中定义对象的几种方式【转】

avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型("prototype")方式 5.动态原型方式 一.基于已有对象扩充其属性和方法 <script type="text/javascript