js笔记--BOM编程

1.window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象具有双重角色。它既是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。所以网页中定义的任何一个对象,变量和函数,都以window作为其Global对象。

1.全局作用域

所有在全局作用域中声明的变量,函数都会编程window对象的属性和方法。但是定义全局变量和直接在window对象上定义属性还是有区别的:全局变量不能通过delete操作符删除,但是直接在window对象上定义的属性可以。

	var name = "zhangsan";
	window.color = "red";

	console.log(delete window.name);//fasle
	console.log(delete window.color);//true
chrome中全为true

注意:尝试访问未声明的变量会抛错,但是通过window对象查找,可以知道某给可能未声明的变量是否存在 。

	//var newValue = oldValue;  报错
	var newValue1 = window.oldValue;
	console.log(newValue1); //undefined

2.窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。可以通过数值索引(从0开始,左至右,上到下),或框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。

	<frameset rows="160,*">
		<frame src="top.html" name="topFrame">
		<frameset cols="50%,50%">
			<frame src="left.html" name="leftFrame">
			<frame src="right.html" name="rightFrame">
		</frameset>
	</frameset>
window.frames["topFrame"]

top.frames["topFrame"]

top对象始终指向最高(外)层的框架,也就是浏览器窗口。

parent对象始终指向当前框架的直接上层框架。某些情况下parent可能等于top

注意:除非最高层窗口是通过window.open()打开的,否则window对象的name属性不会包含任何值。

self对象:始终指向window;self和window对象可以互换使用。(引入self对象的目的只是与top和parent对应,不格外包含其他值)

所有上面的这些属性都是window对象的属性,可以通过window.parent,window.top来访问。

注意:在使用框架的情况下,浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数,因此每个框架都有一套自己的构造函数,这些构造函数一一对应,但并不相等。如:top.Object不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

3.窗口位置

IE,Safari,Opera和Chrome提供了  screenLeft和screenTop属性。Firefox提供screenX和screenY属性。

跨浏览器取得窗口左边和上边的位置。

	var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
	var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY;
	console.log(leftPos+"   "+topPos);
调整窗口位置和大小

	window.moveTo(0,0);//窗口移动到屏幕左上角
	window.moveBy(0,100);//窗口向下移动100像素

	window.resizeTo(100,100);//调整窗口大小
	window.resizeBy(100,50);//调整到200*150

4.导航和打开窗口

	var topFrame = 	window.open("top.html","topFrame","height=400,width=300,top=10,left=20");
	console.log(topFrame);

	topFrame.close();

5.间歇调用和超时调用

JS是单线程语言,但允许通过设置超时时间和间歇时间来调度代码在特定的时刻执行。前者是在指定的时间后执行代码,后者是每隔指定时间执行一次。

	var id = setTimeout(function(){ //1秒后执行
		alert("hehe");
	},1000);
	clearTimeout(id);

第二个参数表示等待多长时间的毫秒数,但经过该时间后指定的代码不一定会执行。JS是一个单线程序的解释器,因此一定时间内只能执行一段代码。为了控制要执行的代码,就有一个JavaScript任务队列。这些任务将会按照它们添加到队列的顺序执行。setTimeout()表示指定时间后,将该任务添加到执行队列中。如果队列是空的,就会立刻执行;如果队列不是空的,就要等到前面的代码执行完了以后再执行。

方法返回一个数值ID,表示这个超时调用。可以通过它来取消超时调用。clearTimeout()方法取消超时调用。

	var num = 0;
	var max = 10;
	var intervalId = null;

	function incrementNumber(){
		num++;
		if(num == max){
			clearInterval(intervalId);
			console.log("Done");
		}
	}
	intervalId = setInterval(incrementNumber,500);

使用setTimeout()实现间歇调用

	var num = 0;
	var max = 10;
	var intervalId = null;

	function incrementNumber(){
		num++;
		if(num < max){
			 console.log(num);
			 setTimeout(incrementNumber,500);
		}else{
			console.log("done");
		}
	}
	intervalId = setTimeout(incrementNumber,500);

在使用超时调用时,不需要跟踪超时调用ID,因为每次执行代码后,如果不再设置另一次超时调用,调用就会停止。一般认为使用超时调用来模拟间歇调用是一种最佳模式。因为后一个间歇调用可能会在前一个间歇调用结束前启动,为了避免这个,最好不要使用间歇调用。

6.系统对话框

浏览器通过alert(),confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系,也不包含HTML。它们的外观由操作系统及浏览器设置决定,而不是CSS决定。并且通过这几个方法打开的对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会回复执行。

	var flag = confirm("are you sure?");
	console.log(flag);
	console.log(prompt("name","zhangsan"));
prompt()如果点击的取消或没有点击确定而是通过其他方式关闭了对话框,则该方法返回null。

2.location对象

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。location对象是很特别的一个对象,因为它既是window对象的属性,也是document对象的属性;换句话说,window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。

hash "#contents"返回URL中的hash(#后跟零或多个字符),如果URL中不包含散列,则返回空字符串

	console.log(location.hash)
	console.log(location.host);//服务器名和端口号
	console.log(location.hostname);//服务器名
	console.log(location.href);//完整的URL,location.toString()
	console.log(location.pathname);//URL中的目录和文件名
	console.log(location.port);//URL中指定的端口号,如果没有返回空字符串""。
	console.log(location.protocol);//返回页面使用的协议。http或https
	console.log(location.search); //返回从?到URL末尾的所有内容

1.查询字符串参数

虽然通过上面的属性可以访问到location对象的大多数信息。但却没办法逐个访问其中的每个查询字符串参数。

	function getQueryStringArgs(){
		//获取查询参数?以后的值
		var qs = location.search.length>0?location.search.substring(1):"";
		args = {};//参数对象
		//获取每一项参数
		var items = qs.length?qs.split("&"):[];
		//遍历每一项
		 items.forEach(function(item){
		 	if(item.length){
		 		var keyValue = item.split("=");
		 		var name = decodeURIComponent(keyValue[0]);
		 		var value = decodeURIComponent(keyValue[1]);
		 		if(name.length){
		 			args[name] = value;
		 		}
		 	}
		 });
		 return args;
	}
	console.log(getQueryStringArgs());

2. 位置操作

使用location对象可以通过很多方式来改变浏览器的位置。首先,也是最常用的方式,就是使用assign()方法并为其传递一个URL。

	location.assign("http://www.baidu.com");
	window.location = "http://www.baidu.com";//调用的location.assign()
	location.href = "http://www.baidu.com";

通过设置location对象的其他属性值hash,search,hostname,pathname和port来改变URL。

修改后浏览器历史记录中会生成一条新记录,因此用户通过单击"后退"按钮会导航到前一个页面。可以使用replace()方法禁用这种行为。这个方法只接受一个参数,即要导航到的URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。在调用replace()方法后,不能回到前一个页面。

<html>
	<head>
		<title>BOM对象</title>
	</head>
	<body>
		hello,无法返回!
	</body>
<script>
	setTimeout(function(){
		location.replace("http://www.baidu.com");
	},1000);
</script>
reload()方法:重新加载当前显示的页面。如果不传递任何参数,页面就会以最有效的方式重新加载。即如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载,则需要像下面这样为该方法传递参数true。

	location.reload();   //重新加载,有可能重浏览器缓存中加载
	location.reload(true);  //重新加载(从服务器加载)
位于reload()调用之后的代码,可能不会被执行(取决于网络延迟或系统资源等因素),最好将reload()放在代码最后面。

3.navigator对象

最早由Netscape Navigator2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准。navigator对象是所有支持JavaScript的浏览器所共有的。与其他BOM对象的情况一样,每个浏览器中的navigator对象也都有一套自己的属性。

1.检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对非IE浏览器可以使用plugins数组来达到这个目的。数组属性:

name:插件名

description:插件的描述

filename:插件文件名

length:插件所处理的MIME类型数量

一般name属性中会包含检测插件必需的所有信息。(通过name属性来检测)

	//检测插件(IE中无效)
	function hasPlugin(name){
		name = name.toLowerCase();
		for(var i =0;i<navigator.plugins.length;i++){
			if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
				return true;
			}
		}
		return false;
	}
	console.log(hasPlugin("Flash")); //true
	console.log(hasPlugin("QuickTime"));//false

每个插件对象本身也是一个MimeType对象的数组,这些对象可以通过方括号语法来访问。每个MimeType对象有4个属性:包含MIME类型描述的description,回指插件对象的enabledPlugin,表示与MIME类型对应的文件扩展名的字符串suffixes和表示完整MIME类型字符串的type。

4.screen对象

screen对象基本上只用来表明客户端的能力,包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。

window.resizeTo(screen.availWidth,screen.availHeight);

5.history对象

history对象保存这用户上网的历史记录,从窗口被打开的那一刻算起。因为history是window对象的属性,因此每个浏览器窗口,每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。出于安全方面的考虑,开发人员无法得知用户浏览过的URL。不过,借由用户访问过的页面列表,可以实现后退和前进。

go():实现用户在历史记录中任意跳转。

	//后退一页
	history.go(-1);

	//前进一页
	history.go(1);

	//前进两页
	history.go(2);

跳转到历史记录中包含该字符串的第一个位置,可能后退也可能前进,具体看哪个位置最近。如果历史记录中不包含这个字符串,就什么也不做。

	history.go("baidu");
	history.back();
	history.forward();

history对象还有一个length属性,保存这历史记录的数量,如果为0,表示这是第一个打开的页面。

if(history.length == 0){
     //这是第一个打开的页面
}
时间: 2024-11-04 23:55:17

js笔记--BOM编程的相关文章

js的BOM编程的事件编程

1)事件编程的三要素:事件源,事件,监听器 //1)事件源 JButton button = new JButton("按钮"); //3)注册监听器 button.addMouseListner(new MyMouseListner()); //2)监听器 class MyMouseListner implments MouseListner{ public mouseOver(){ ..... } } 3)js事件分类 点击相关 onclick     单击 ondblclcik

js的BOM编程

浏览器对象分为: window对象: 窗口 location对象: 地址栏 histroy对象: 历史记录栏 screen对象:  屏幕 document对象: html文档 3)window对象(重点) 注意:因为window对象使用太频繁了,所以js可以让我们省略window对象名不写 常用方法: 提示 alert();   提示框 confirm()   询问提示框 prompt()    输入提示框 新窗口 open()    打开一个新窗口 定时 setInterval()   定时器

笔记-[面向对象]-JS基于面向对象编程-[1]

面向对象(oop):是一种开发过程中,以面向对象的一种编程思维进行开发. 在JS中,我们一般采用的是面向过程的开发. 面向对象的特点:抽象.封装.继承.多态 先看看自定义对象如何写:自定义一个人的对象,人的名字,年龄,或者是说话.在下面,name age是这个人的属性,说话是这个人的一种行为,也可以叫方法.这样也可以理解为一个简单的面向对象的编程.对象从哪里来,如 var arr=new Array();这个就是一个数组的对象,它从js的一个内定的系统方法类来的. 例如:定义一个人的类,每一个人

Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)

笔记来自<Node入门>@2011 Manuel Kiessling JavaScript与Node.js Node.js事实上既是一个运行时环境,同时又是一个库. 使用Node.js时,我们不仅仅在实现一个应用,同时还实现了整个HTTP服务器. 一个基础的HTTP服务器 server.js:一个可以工作的HTTP服务器 var http = require("http"); http.createServer(function(request, response) { r

笔记-[面向对象]-JS基于面向对象编程-[2]

下面是一个类定义私有属性的例子,和如何在类外部调用类内容的私有属性, <script type="text/javascript">var people=function(name,work,address){ var marry=1;//定义一个私有属性 marry  私有属性和私有方法在外部不可以直接调用访问 this.name=name; this.work=work; this.address=address; this.calls=function(){ aler

JS学习笔记-BOM之window

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

# JS笔记(1)

 JS理论: 1.JavaScript是一个客户端脚本 ------工作在客户端的浏览器完成:相对应的PHP.ASP.NET .JSP 是一个服务端脚本. 2.JS可以插入到HTML中的任意一个位置,不过HTML解析式从上往下解析的,所以放在上面可能会找不到控件. 3.JS的特点: 脚本编程语言 基于对象的语言 由事件驱动 跨平台.依赖于浏览器.与操作环境无关 4.JS的作用: 表单的验证(放在客户端验证比较好)----可以减轻服务端的压力,并且用户体验感更好 页面的动态效果 动态改变页面的内容

4、BOM编程/正则表达式

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

Bom编程

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