javascript進階程式設計讀書筆記--BOM

對BOM進行一下總結

1.  location 對象

location既是window也是document的屬性，是以二者在使用的時候引用的是同一個location對象

location參數解析：

   location.href: 傳回完整的url

location.host: 傳回主機名和端口号。 eg: www.baidu.com：80

location.hostname: 傳回主機名。 eg: www.baidu.com

location.search: 傳回查詢字元串。包括?.例如 ?q=javascript

location.protocol:傳回協定名。例如： http：

location.pathname: 傳回檔案路徑。例如： /search

location.port: 傳回端口号。例如 80

對搜尋字元串進行查詢參數提取

<span style="font-size:18px;">function parseUrl(){
	// 如果查詢字元串存在，傳回？以後的字元。反則傳回 ''
	var query = location.search.length? location.slice(1): '';

	var args = {}; // 用來儲存查詢參數
	// 對query進行分割。
	var item = query.length? query.split('&'):[];

	var keyVal;
	// 周遊item，将查詢參數以 key，value形式儲存到args
	item.forEach(function (ele, index) {
		keyVal = ele.split('=');
		args[keyVal[0]] = keyVal[1];
	});

	return args;

}</span>
           

location 位置操作

location.assign()。 傳遞一個url，将會打開新視窗。并生成一條曆史記錄

使用location.href以及window.location設定值打開新視窗調用該方法。

location.reload() 方法會優先選取比較有效的加載方式，即從緩存中加載頁面。傳參為true的時候，強制重新整理，将會從伺服器擷取頁面。

location.replace() 傳入一個url的時候，将會生成新的曆史記錄。

即使用該方式加載一個新的頁面的時候，無法傳回到上一頁面~

2. history 對象

history.go() 表示從曆史記錄中加載某一頁面。

傳入 負數 -n 的時候，便是後退 n個頁面

傳入 正數 n， 表示前進 n個頁面

傳入 字元串 str 的時候，将會優先加載最近的href中含有str的頁面。如果曆史記錄不含有該字元串，就什麼都不做。

history.back()   history.forward() 模仿浏覽器的後退/前進按鈕。每次跳轉一個頁面。

history.length 傳回曆史記錄條數。通常用來判斷是否直接打開某一個頁面。

3. navigator 對象

經常被用來進行浏覽器類型檢測。常用的屬性包括 useragent

詳細的會在對javascript第九章進行總結之後再放上來

4. screen 對象

使用頻率較低。主要是顯示浏覽器外部顯示資訊，例如： 寬高

5. window 對象（核心）

在js中，未使用var 聲明的變量/方法會直接被歸為window對象的屬性/方法。 其中 全局變量不能被删除。而window對象的屬性可以被删除。

<span style="font-size:18px;">color = "red";
console.log(window.color); // red
var blue = "blue"; 
console.log(delete blue); // false
console.log(delete color); // true</span>
           

視窗關系和架構。

在使用架構集的時候

top: 始終指向最外層的架構，也就是浏覽器視窗

parent：指向目前架構的上層架構，可能等于top

self： 指向window對象

也可以使用window.frame[0],window.frame[1]來進行架構通路。

視窗位置及大小

resizeTo(w, h)表示調整大小至寬為w，高為h

resizeBy(w, h)表示在原基礎上寬增加/減少 w， 高增加/減少h

moveTo(x, y)表示将浏覽器視窗位置移動到螢幕 （x,y） 坐标處

moveBy(x, y)表示将浏覽器視窗位置在原坐标基礎上橫坐标改變 x， 縱坐标改為 y

document.body.clientWidth / document.documentElement.clientWidth頁面視口大小（注意相容性問題）

document.body.clientHeight / document.documentElement.clientHeight 

// 擷取目前浏覽器視口大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth  !== 'number' ) {
// 不支援innerWidth/innerHeight

	if(document.compatMode === 'CSS1Compat') { // 判斷是否處于标準模式
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clinetHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}
           

由于相容性問題，很難準确獲得視窗大小。但以上方法擷取視口大小還是可以的。

打開視窗

window.open() 傳入三個參數。

第一參數為url。

第二個參數表示已有視窗或架構的名字。

第三個參數表示所要打開的視窗的特性。包括： top,left,height,width,location,status,scrollBars,resizable等。

傳回的對象是一個指向新視窗的引用。可以通過該引用對新視窗進行調整大小、位置移動等

<span style="font-size:18px;">var newWin = window.open("http:www.baidu.com", "nwewindow", "top=200,left=200,width=400,height=400,resizable=true");
newWin.resizeTo(600,600);

console.log(newWin.opener == window); // true. newWin.opener指向調用window.open() 的原始視窗
newWin.opener = null; // 切斷newWin與之前視窗的聯系，如果需要标簽頁通信，就不可以切斷。一旦切斷，不可恢複。

newWin.close(); // 關閉新打開的視窗</span></span>
           

間歇調用和逾時調用

setInterval(fn, time) // 傳入的第一個參數為函數，第二個時間。

傳回值為一個數字ID。通過該ID對間歇調用進行清除

setTimeout(fn , time ) // 可以說是一個定時器。在time時間後，調用fn函數。

傳回值為一個數字ID，可以通過該ID在函數未被調用之前清除逾時調用

<span style="font-size:18px;">var timer1 = setInterval(function(){
		num++;
		if (num > 10 ) {
			clearInterval(timer1); // 每隔3秒執行函數一次，當num>10的時候，清除間歇調用。
		}
	}, 3000);

var timer2 = setTimeout(function(){
		num++;
	}, 10000); // setTimeout被執行10秒後,将會調用該函數。可以使用 clearTimeout(timer2)來在10s到達之前清除調用。

// 在真正的開發中，很少直接使用間歇調用。
// 因為很可能發生本次間歇調用還沒結束，下次已經開始。是以使用逾時調用模拟間歇調用時很好的方法
function dingshiqi() {
	num++;
	if (num <= 11) {
		setTimeout(dingshiqi, 3000);
	} 
}
setTimeout(dingshiqi, 3000);
// 以上不用一直追蹤逾時調用ID， 用來模拟間歇調用
</span>
           

彈出視窗

alert() 彈出提示框

confirm() 彈出确認框。

prompt() 彈出驗證框。

<span style="font-size:18px;">if (confirm("are you sure ?") ) { // 彈出确認框，如果傳回值為确認
	var yourname = prompt("請輸入你的名字："); // 彈出驗證框
	if (yourname) { // 使用者輸入姓名
		alert(yourname); // 彈出使用者姓名
	} else { // 點選取消
		alert("您已經取消輸入！");
	}
} else {
	alert("what a pity ! ");
}</span>
           

以上~