《JavaScript高级程序设计》——DOM

对代码的理解全部写在了注释中

8.js

/*
 * BOM -
 * 		- 框架（每个框架包含自己的window对象）
 * 		- window对象（主要）	：窗口信息
 * 		- location对象	：文档信息
 * 		- navigator对象	：浏览器信息
 * 		- screen对象		：客户端信息
 * 		- history对象		：历史信息
 */

	//在全局作用域中声明的变量，函数会变成windows对象的属性和方法（windows对象就代表着全局作用域）。

var age = 29;
function sayAge() {
	console.log(this.age);
}
sayAge();					//29
window.sayAge();				//29
console.log(window.age == age);			//true	sayAge方法被归到了window下。

	//区别：删除在全局作用域中定义的属性和变量会产生失败。而删除window对象下的不会。
var age = 29;
window.color = "red";

console.log(delete window.age);			//false：因为是直接定义的，所以不能删除。
console.log(delete window.color);		//true：由windows定义的，可以删除。

console.log(window.age);			//29：未被删除。
console.log(window.color);			//undifined：已被删除。
	//原因：使用var语句添加的属性[Configurable]默认为false，所以不可被删除。

console.log(oldValue);				//出错 ：因为没被定义。
console.log(window.oldValue);			//undefined：不会跑出错误，因为这是一次属性查询。
									//可以通过查询window对象地方法可以知道某个未声明的变量是否存在

//框架	(frame.html)<span>	</span>不贴到博客里了，只做了几个简单的例子，写的还特丑<span style="color: rgb(51, 51, 51); font-family: arial; font-size: 13px; line-height: 20.02px;"> _(:3 」∠)_ </span>

/*
 *	window对象
 *		- 窗口位置：		window.screenLeft/window.screenTop	FireFox:	window.ScreenX/window.ScreenY
 *		- 窗口大小：		window.innerWidth/window.innerHeight/window.outerWidth/window.outerHeight
 *		- 调整浏览器窗口大小：	window.resizeTo()/window.resizeBy()
 *		- 打开窗口：		window.open()
 */
//窗口位置
	//IE,Safari,Opera,Chrome：screenLeft和scrrenTop。
	//FireFox：				：ScreenX和ScreenY
	//跨浏览器取得左边和上边的位置：
var leftPos = (typeof window.screenLeft) == "numer"?
				window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop) == "number"?
				window.screenTop:window.screenY;

console.log(leftPos+"..."+topPos);	//"392...147"从显示器左端到页面的距离和从显示器上端到页面的距离。

console.log(parent == top);				//true：由于没有框架，parent框架就等于top（浏览器窗口）。
	//IE,Opera：到页面可见区域的举例（如果页面紧贴上边，screenY就是导航栏的高度）。
	//Firefox,Safari,Chrome：到整个浏览器窗口的距离（页面紧贴上边，screenY返回0）。

//窗口大小
	//四个属性：innerWidth,innerHeight,outerWidth,outerHeight
	//OuterWidth,OuterHeight：
		//IE9+,Safari,Firefox：	返回浏览器窗口的尺寸。
		//Opera：				返回页面视图容器（单个标签页对应的浏览器窗口）的大小。
	//Opera中，innerWidth和innerHeight返回页面视图区（页面视图容器减去边框宽度）的大小。
	//Chrome中，inner的两个属性和outer的两个属性返回相同的值：视口（viewport）大小

//跨平台确定页面视口的大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth != "number") {					//如果不是数值，则检查是否处于标准模式（第十章讨论）。
	if(document.compatMode != "CSS1Compat")	{
		pageWidth = document.documentElement.clientWidth;	//是标准模式。
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageWidth = document.body.clientWidth;			//非标准模式。
		pageHeight = document.body.clientHeight;
	}
}

	//对于移动设备，window.innerWidth和window.innerHeight保存着可见视口。
	//不支持这些属性的浏览器，保存在document.body.clientWidth和document.body.clientHeight中

//调整浏览器窗口的大小。
	//resizeTo()和resizeBy()
	//其中resizeTo()接收浏览器窗口的新宽度和新高度。
	//resizeBy()接受新窗口与原窗口的宽度和高度之差。
window.resizeTo(100,100);		//调整到100*100
window.resizeBy(100,150);		//调整到200*250
window.resizeTo(300,300);		//调整到300*300

//打开窗口：
var wroxWin = window.open("http:///www.wrox.com/");		//会弹出一个窗口
								//第一个参数：窗口URL。
								//第二个参数：在哪个框架中打开。
	//返回一个对该窗口的引用，可以通过这个引用操作窗口。

console.log(wroxWin.opener);

var wroxWin = window.open("http:///www.wrox.com/");
wroxWin.close();						//该窗口被关闭。
console.log(wroxWin.closed);					//true：已被关闭。
console.log(wroxWin.parent);					//window对象。
console.log(wroxWin.parent == wroxWin.top);			//true
console.log(wroxWin.opener);					//window对象啊
	//opener属性保存着打开它的原始窗口对象，只在最外层window对象（top）中有定义。
	//弹出的窗口与使之弹出的窗口运行在一个进程中。若想单独运行，需要将弹出窗口的opener设置为null
wroxWin.opener = null;
	//联系切断后，无法恢复。

//弹出窗口屏蔽程序：大多数浏览内置有弹出窗口屏蔽程序。
	//检测方法：window.open是否返回null。
var wroxWin = window.open("http:///www.wrox.com/","_blank");
console.log(wroxWin == null);					//false：没有被屏蔽。

	//如果是外置工具屏蔽的窗口，浏览器会弹出错误。此时需要try并处理。
var blocked = false;							//用一个变量记录窗口是否被屏蔽。
try{
	var wroxWin = window.open("http:///www.wrox.com/","_blank");
	blocked = true;								//表示被屏蔽。
}catch(e){
	blocked = true;								//即使抛出异常也正常处理 。
}

console.log(blocked);

/*
 *		定时器：	超时调用	setTimeout
 *				间歇调用	setInterval	
 */
//setTimeOut也可以用字符串表示要执行的参数
setTimeout("console.log('executed');",1000);					//executed
var id = setTimeout(function(){console.log("executed");},1000);			//executed
				//不建议使用字符串，有可能带来性能损失。
				//秒数以后不一定会立即执行，只是进入预执行状态（类似java中的Thread.sleep()）
				//返回ID用于停止定时器
clearTimeout(id);								//未被执行


//间歇调用同样原理：setInterval

var num = 0;
var max = 10;
function inte() {				//计时器：从0到10
	if(num==max)
		clearInterval(id);		//会沿着作用域链自动在全局环境中寻找id
	console.log(num++);
}

var id = setInterval(inte,1000);

//用超时调用模拟间歇调用。
var num = 0;
var max = 10;

function incrementNumber () {
	num++;
	
	if(num < max) {				//不满足条件之前，每一秒钟新建一个超时调用。
		setTimeout(incrementNumber,1000)
	} else {
		console.log("Done");		//好处：不用记录ID。
	}
}

setTimeout(incrementNumber,1000);
	//在开发中很少真正的使用间歇调用，因为后一个间歇调用可能在前一个间歇调用之前启动。


//系统对话框：
	//1.外观由浏览器设置决定。
	//2.同步和模态：开启时代码停止执行，关闭时代码恢复执行。

//alert：弹出框
alert("呵呵！");					//弹出呵呵框

//confirm：确认框。经常在删除操作时使用。
var sure = confirm("爱我否？");				//返回一个boolean值

if(sure) {						//点了OK
	alert("你果然爱我。");
} else {						//点了cancel
	alert("竟然不爱我，嘤嘤嘤");
}

//prompt：输入框。
var text = prompt("请输入一段文本。");

if(text){						//如果输入不为空。
	alert("你输入的文本是'"+text+"'!");
} else {						//不输入或者输入空值，返回null。
	alert("你什么也没输！");
}

//chrome：页面显示两个以上对话框，可以屏蔽，后续对话框都不会显示。
var i = 0;
while(i<5) {
	alert("烦死你");
	i++;
}
alert("烦死你");					//如果屏蔽，这三种框都不会再显示
confirm("烦死你");
prompt("烦死你");

//查找和打印：异步显示（不影响页面加载）。
window.print();
window.find();

//location对象：提供与当前窗口中加载的文档的有关信息。
console.log(location.hash);			//URL后面的hash（#后面的字符，没有则返回空）
console.log(location.host);			//带端口号
console.log(location.hostname);			//不带端口号
console.log(location.href);			//地址
console.log(location.pathname);			//目录和文件名
console.log(location.port);			//端口号
console.log(location.protocol);			//协议
console.log(location.search);			//查询字符串

//解析查询字符串的函数：
function getQueryStringArgs() {
	var qs = (loaction.search.length > 0?
						//检查查询字符串的长度
		location.search.substring(1):"");
						//有长度则去掉"?"后返回，否则返回空
	
	var args = [];
	
	var item = null;
	var name = null;
	var value = null;
	
	var items = qs.length? qs.split("&"):[];
	
	for(var i=0;i<items.length;i++) {
		item = items[i].split("=");
		name = decodeURIComponent(item[0]);		//解码后存入name
		value = decodeURIComponent(item[1]);		//解码后存入value
	}
	
	if(name.length) {
		args[name] = value;
	}
	
	return args;

}

//location对象的位置操作。
location.assign("http://www.wrox.com");				//打开URL并生成一条历史记录

//相当于
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

	//还可以用location.hash location.search等方法修改相应属性（不演示了）。
	//都会使页面重新加载。
//replace()方法（重定位）：不会生成历史记录。
location.replace("http://www.wrox.com");
//reload()方法：重新加载
reload();							//重新加载（有可能从缓存中加载）。
reload(true);							//重新加载（一定从服务器加载）。
	//reload之后的代码不一定会执行（取决于网络），最好将reload放在代码的最后一行。


//navigator对象	浏览器信息（第九章详细讨论）

//插件信息，存在navigator.plugins数组内
//属性：	.name：插件的名字	.description：插件的描述	.filename:插件的文件名	.length：插件所处理的MIME类型数量。
//
//循环输出浏览器插件名
for(var i=0;i<navigator.plugins.length;i++) {
	console.log(navigator.plugins[i].name);
}
//检测是否存在指定插件（使用迭代的方法）（在IE中无效）
function hasPlugin(name) {					//使用迭代的方法检测plugins数组。
	name = name.toLowerCase();				//忽略大小写，便于比较。
	for(var i=0;i<navigator.plugins.length;i++) {		//遍历navigator.plugins数组
		if(navigator.plugins[i].name.indexOf(name))	//找到相同name的插件则返回true
			return true;
	}
	return false;						//否则返回false
}
*/
/*
//检测是否存在指定插件（使用迭代的方法）（IE方法）
function hasIEPlugin(name) {							//使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。
	try{
		new ActiveXObject(name);
		return true;							//创建成功则return true
	}catch(e){
		return false;							//创建失败（创建未知对象会导致抛出异常）则return false
	}
}

//由于两种方法差别太大，如果想通用，就要插件单独创建通用的检测方法
function hasFlash() {								//分别使用两种检测方法，都为false则返回false，否则返回true
	var result = hasPlugin("Flash");
	if(!result) {
		result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash")		//使用IE的插件标识符检测。
	}
	return result;
}


//注册处理程序。
	//navigator.registerContentHandler()
		//处理RSS源
	//navigator.registerProtocolHandler()
		//处理协议

//screen对象：用来表明客户端的能力（屏幕数据，颜色位数等）。

//history对象：历史数据。开发人员无法得知用户浏览过的URL，但可以借用history对象模拟。
	//go方法：跳转
history.go(-1);			//向后跳转一页历史记录。
history.go(1);			//向前跳转一页历史记录。
history.go(2);			//向前跳转两页历史记录。

		//传入字符串：跳转到最近的，包含该字符串的网址（可能前进，也可能后退）
history.go("wrox.com");	//跳转到最近的wrox.com中的页面。

history.back();			//后退一页，相当于浏览器的后退按钮。
history.forward()		//前进一页，相当于浏览器的前进按钮。

history.length;			//长度属性，保存着历史记录的数量。

if(history.length == 0) {
	console.log("你一定刚打开这个页面！");	//history的长度为0说明是新页面。
}