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

/*
* 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说明是新页面。
}