window對(duì)象
ECMAScript是JavaScript的核心，但是如果要在web中使用javascript，那么BOM(瀏覽器對(duì)象模型)才是真正的核心。BOM提供了很多對(duì)象，用于訪問(wèn)瀏覽器的功能，這些功能與任何網(wǎng)頁(yè)內(nèi)容無(wú)關(guān)。
window對(duì)象：BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它既是通過(guò)javascript訪問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。
因此，所有全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。
<script type="text/javascript"> var age=26;//這里定義的全局變量和全局函數(shù)被自動(dòng)歸在了window對(duì)象名下 function sayAge(){ console.log(this.age); } console.log(window.age);//26 sayAge();//26 相當(dāng)于window.sayAge() window.sayAge();//26 //全局變量和在window對(duì)象上直接定義屬性的唯一區(qū)別：全局變量不能夠通過(guò)delete操作符刪除，而直接在window對(duì)象上定義的屬性可以 window.color='red'; delete window.age; delete window.color; console.log(window.age);//26 console.log(window.color);//undefined </script><script type="text/javascript"> /* 還要注意：嘗試訪問(wèn)未聲明的變量會(huì)拋出錯(cuò)誤，但是通過(guò)查詢window對(duì)象，可以知道某個(gè)可能未經(jīng)聲明的變量是否存在 */ //這會(huì)拋出錯(cuò)誤，因?yàn)閛ldValue未定義 var newValue=oldValue; //這不會(huì)拋出錯(cuò)誤，因?yàn)槭且淮螌傩圆樵? var newValue=window.oldValue; </script>
窗口關(guān)系和框架
如果頁(yè)面中包含框架，則每個(gè)框架都擁有自己的window對(duì)象，并且保存在frames集合中。在frames集合中，可以通過(guò)數(shù)值索引(從0開始，從左到右，從上到下)或者框架名稱來(lái)訪問(wèn)相應(yīng)的window對(duì)象。每個(gè)window對(duì)象都有一個(gè)name屬性，其中包含著框架的名稱。
可以通過(guò)window.frames[0]或者window.frames[“topFrame”]來(lái)引用上方的框架。不過(guò)，最好使用top，而不是window來(lái)引用這些框架。因?yàn)椋瑃op對(duì)象始終指向最高(最外)層的框架，也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪問(wèn)另一個(gè)框架。因?yàn)閷?duì)于一個(gè)在框架中編寫的任何代碼來(lái)說(shuō)，其中的window對(duì)象指向的都是那個(gè)框架的特定實(shí)例，而不是最高層的框架。
與top相對(duì)的另一個(gè)window對(duì)象是parent。parent對(duì)象始終指向當(dāng)前框架的直接上層框架。
與框架有關(guān)的最后一個(gè)對(duì)象是self，它始終指向window。self和window對(duì)象可以互換使用。
在使用框架的情況下，瀏覽器中會(huì)存在多個(gè)Global對(duì)象。在每個(gè)框架中定義的全局變量會(huì)自動(dòng)成為框架中window對(duì)象的屬性。由于每個(gè)window對(duì)象都包含原生類型的構(gòu)造函數(shù)，因此每個(gè)框架都有一套自己的構(gòu)造函數(shù)，這些構(gòu)造函數(shù)一一對(duì)應(yīng)，但并不相等。
location對(duì)象
location對(duì)象是一個(gè)很特別的對(duì)象，因?yàn)樗仁莣indow對(duì)象的屬性，也是document對(duì)象的屬性。window.location和document.location引用的是同一個(gè)對(duì)象。
location對(duì)象的屬性：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>查詢字符串參數(shù)</title></head><body><script type="text/javascript"> function getQueryStringArgs(){ //取得查詢字符串并去掉開頭的問(wèn)號(hào) var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //保存數(shù)據(jù)對(duì)象 args = {}, //取得每一項(xiàng) items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //在for循環(huán)中使用 i = 0, len = items.length; //逐個(gè)將每一項(xiàng)添加到args對(duì)象中 for (i=0; i < len; i++){ item = items[i].split("="); //decodeURIComponent用來(lái)解碼name和value,因?yàn)椴樵冏址畱?yīng)該是被編碼過(guò)的 name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length){ args[name] = value; } } return args; } //假設(shè)查詢字符串是： ?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10" //這樣一來(lái)，每個(gè)查詢字符串參數(shù)都成了返回對(duì)象的屬性，極大地方便了對(duì)每個(gè)參數(shù)的訪問(wèn)</script></body></html>使用location對(duì)象可以通過(guò)很多方式來(lái)改變?yōu)g覽器的位置。
其中，最常用的方式是：使用assign()方法并為其傳遞一個(gè)URL
location.assign(“//www.survivalescaperooms.com“)
這樣就可以立即打開新的URL并在瀏覽器的歷史記錄中生成一條記錄。
同樣的，將location.href和window.location設(shè)置為一個(gè)URL值,也會(huì)以該值調(diào)用assign()方法。
location.href=”//www.survivalescaperooms.com”;
window.location=”//www.survivalescaperooms.com”;
這兩種方式的效果和顯示調(diào)用assign()方法效果完全一樣
此外，通過(guò)修改location對(duì)象的其他屬性也可以改變當(dāng)前加載的頁(yè)面。
每次修改location的屬性(hash除外)，頁(yè)面都會(huì)以新的URL重新加載。修改hash的值會(huì)在瀏覽器的歷史記錄中生成一條新的記錄
在url：http://a.com#helloword中的'#helloworld'就是location.hash，改變hash并不會(huì)導(dǎo)致頁(yè)面刷新，所以可以利用hash值來(lái)進(jìn)行數(shù)據(jù)傳遞，當(dāng)然數(shù)據(jù)容量是有限的。
當(dāng)通過(guò)上述任何一種方法修改URL之后，瀏覽器的歷史記錄中就會(huì)生成一條新紀(jì)錄，因此通過(guò)點(diǎn)擊”后退”按鈕都會(huì)導(dǎo)航到前一個(gè)頁(yè)面。
我們可以使用replace()方法來(lái)禁用這種行為。該方法只接受一個(gè)參數(shù)，即要導(dǎo)航到的URL;結(jié)果雖然會(huì)導(dǎo)致瀏覽器位置改變，但不會(huì)在歷史記錄中生成新紀(jì)錄。在調(diào)用replace()方法后，用戶不能回到前一個(gè)頁(yè)面。
這個(gè)頁(yè)面加載到瀏覽器中后，瀏覽器就會(huì)在1秒鐘后重新定向到www.survivalescaperooms.com。然后，'后退'按鈕將處于禁用狀態(tài)，如果重新輸入完整的URL，則無(wú)法返回示例頁(yè)面。
<script type="text/javascript"> setTimeout(function () { location.replace("http://www.survivalescaperooms.com/"); }, 1000); </script>reload()方法，其作用是重新加載當(dāng)前顯示的頁(yè)面。如果調(diào)用reload()方法時(shí)不傳遞任何參數(shù)，頁(yè)面就會(huì)以最有效的方式重新加載。也就是說(shuō)，如果頁(yè)面自上次請(qǐng)求以來(lái)并沒(méi)有改變過(guò)，頁(yè)面就會(huì)從瀏覽器緩存中重新加載。如果要強(qiáng)制從服務(wù)器重新加載，需要給該方法傳遞參數(shù)true。
location.reload();//重新加載(有可能從緩存中加載)
location.reload(true);//重新加載(從服務(wù)器重新加載)
超時(shí)調(diào)用和間歇調(diào)用
javascript是單線程語(yǔ)言，但允許通過(guò)設(shè)置超時(shí)值和間歇值來(lái)設(shè)定代碼在特定時(shí)刻執(zhí)行
超時(shí)調(diào)用：是在指定的時(shí)間過(guò)后執(zhí)行代碼
間歇調(diào)用：每隔指定的時(shí)間就執(zhí)行一次代碼
超時(shí)調(diào)用：需要使用window對(duì)象的setTimeout()方法，接收兩個(gè)參數(shù)：要執(zhí)行的代碼和以毫秒表示的時(shí)間。
第二個(gè)參數(shù)是一個(gè)表示等待多長(zhǎng)時(shí)間的毫秒數(shù)，但經(jīng)過(guò)該時(shí)間后指定的代碼不一定執(zhí)行。因?yàn)?，javascript是一個(gè)單線程的解釋器，因此一定時(shí)間內(nèi)只能執(zhí)行一段代碼。第二個(gè)參數(shù)表示再過(guò)多長(zhǎng)時(shí)間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的，則代碼會(huì)立刻執(zhí)行，否則就要等待前面的代碼執(zhí)行完了以后再執(zhí)行。
調(diào)用setTimeout()后，該方法會(huì)返回一個(gè)數(shù)值ID,表示超時(shí)調(diào)用。要取消未執(zhí)行的超時(shí)調(diào)用計(jì)劃，可以調(diào)用clearTimeout()方法并將相應(yīng)的超時(shí)調(diào)用ID作為參數(shù)傳遞給它即可。
間歇調(diào)用：使用setInterval()方法
與超時(shí)調(diào)用類似，只不過(guò)它會(huì)按照指定的時(shí)間間隔重復(fù)執(zhí)行代碼，直到間歇調(diào)用被取消或者頁(yè)面被卸載。它接收的參數(shù)與setTimeout()方法一樣
Demo1
<script type="text/javascript"> //設(shè)置超時(shí)調(diào)用 var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //取消超時(shí)調(diào)用 clearTimeout(timeoutId); </script>Demo2
<script type="text/javascript"> /* 使用間歇調(diào)用實(shí)現(xiàn) */ var num = 0; var max = 10; var intervalId = null; function incrementNumber() { num++; if (num == max) { clearInterval(intervalId); alert("Done"); } } intervalId = setInterval(incrementNumber, 500); </script>Demo3
<script type="text/javascript"> /* 使用超時(shí)調(diào)用來(lái)實(shí)現(xiàn) */ var num = 0; var max = 100; function incrementNumber() { num++; if (num < max) { setTimeout(incrementNumber, 500); } else { alert("Done"); } } setTimeout(incrementNumber, 500); </script>在使用超時(shí)調(diào)用時(shí)，沒(méi)有必要跟蹤超時(shí)調(diào)用ID，因?yàn)槊看螆?zhí)行代碼之后，如果不再設(shè)置另一次超時(shí)調(diào)用，調(diào)用就會(huì)自動(dòng)停止。一般認(rèn)為，使用超時(shí)調(diào)用來(lái)模擬間歇調(diào)用是一種最佳模式。間歇調(diào)用一般較少使用，因?yàn)楹笠粋€(gè)間歇調(diào)用可能會(huì)在前一個(gè)間歇調(diào)用結(jié)束之前啟動(dòng)。
系統(tǒng)對(duì)話框
alert()、confirm()和prompt()
<script type="text/javascript"> alert("Hello world!"); </script><script type="text/javascript"> /* 判斷用戶點(diǎn)擊了OK還是Cancel，可以檢查confirm()方法返回的布爾值：true表示單擊了OK，false表示單擊了Cancel或單擊了右上角的X按鈕。 */ if (confirm("Are you sure?")) { alert("I'm so glad you're sure! "); } else { alert("I'm sorry to hear you're not sure. "); } </script><script type="text/javascript"> /* prompt()方法用來(lái)生成一個(gè)"提示"框，用于提示用戶輸入一些文本。提示框除了顯示OK和Cancel按鈕之外 ，還會(huì)顯示一個(gè)文本輸入域，用來(lái)輸入文本內(nèi)容。該方法接收兩個(gè)參數(shù)：要顯示給用戶的文本提示和文本輸入域的默認(rèn)值(可以是一個(gè)空字符串) */ var result = prompt("What is your name? ", ""); if (result !== null) { alert("Welcome, " + result); } </script>history對(duì)象
history對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。因?yàn)閔istory是window對(duì)象的屬性，因此每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)以及每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。處于安全方面的考慮，開發(fā)人員是無(wú)法知道用戶瀏覽過(guò)的URL，不過(guò)，借助用戶訪問(wèn)過(guò)的頁(yè)面列表，同樣可以在不知道實(shí)際URL的情況下實(shí)現(xiàn)后退和前進(jìn)。
使用Go()方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后也可以向前。該方法接收一個(gè)參數(shù)：表示向前或者向后跳轉(zhuǎn)的頁(yè)面數(shù)的整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)(類似單擊瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(zhuǎn)(類似瀏覽器的前進(jìn)按鈕)。
//后退一頁(yè) history.go(-1); //前進(jìn)一頁(yè) history.go(1);
也可以給go()方法傳遞一個(gè)字符串參數(shù)，此時(shí)瀏覽器會(huì)跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個(gè)位置 主站蜘蛛池模板： 疏勒县| 梁河县| 兴业县| 苗栗县| 石林| 滨海县| 准格尔旗| 塘沽区| 韩城市| 环江| 马公市| 金坛市| 永济市| 紫金县| 无为县| 吉木乃县| 林西县| 康马县| 绍兴县| 屯门区| 思南县| 康保县| 汶上县| 儋州市| 日土县| 阳春市| 新建县| 岑巩县| 弋阳县| 峨眉山市| 岳普湖县| 溧水县| 喀喇沁旗| 钦州市| 安福县| 中阳县| 安吉县| 安吉县| 阿合奇县| 冕宁县| 滨海县|