對程式碼的理解全部寫在了註釋中

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說明是新頁面。
}