window對象是所有客戶端JavaScript特性和API的主要接入點虑稼。

常用方法

alert

彈出一個對話框用來顯示一些信息

setTimeout

注冊一個函數(shù)令野，在給定的一段時間之后觸發(fā)一個回調(diào)
<code>
//等待兩秒，然后說hello
setTimeout(function() {alert("hello world");},2000);
</code>

window對象中一個最重要的屬性是document，他引用Document對象，后者表示顯示在窗口中的文檔拟赊。

window、Document和Element對象上另一個重要的屬性集合是事件處理程序相關(guān)的屬性粹淋。

Web文檔里的JavaScript

JavaScript程序可以通過Document對象和它包含的Element對象遍歷和管理文檔內(nèi)容要门。

在HTML里嵌入JavaScript

在HTML文檔里嵌入JavaScript代碼有四種方法：

• 內(nèi)聯(lián)，放置在<script>和</script>標(biāo)簽對之間
• 放置在游<script>標(biāo)簽的src屬性指定的外部文件中
• 放置在ＨＴＭＬ事件處理程序中廓啊，該事件處理程序由onclick或onmouseover這樣的HTML屬性值指定
• 放在一個URL里欢搜，這個URL使用特殊的“JavaScript：”協(xié)議

<Script>元素

JavaScript代碼可以以內(nèi)聯(lián)的形式出現(xiàn)在HTML文件里的<script>和</script>標(biāo)簽之間。
<code>
<script>
//這里是你的javascript代碼
</script>
</code>

外部文件中的腳本

<script>標(biāo)簽支持src屬性谴轮，這個屬性指定包含JavaScript代碼文件的URL炒瘟。
用法：
<code>
<script src = "../../scripts/util.js></script>
</code>
使用src屬性方式的優(yōu)點：

• 可以把大塊JavaScript代碼從HTML文件中刪除，這有助于保持內(nèi)容和行為的分離第步，從而簡化HTML文件
• 如果多個Web頁面共用相同的JavaScript代碼疮装，用src屬性可以讓你只管理一份代碼，而不用在代碼改變時編輯每個HTML文件粘都。
• 如果一個JavaScript代碼文件由多個頁面共享廓推，就只需要下載它一次，通過使用它的第一個頁面——隨后的頁面就可以從瀏覽器緩存檢索它
• 由于src屬性的值可以是任意的URL翩隧，因此來自一個Web服務(wù)器的JavaScript程序或Web頁面可以使用由另一個Web服務(wù)器輸出的代碼樊展。
• 從其它網(wǎng)站載入腳本的能力，可以讓我們更好的利用緩存堆生。

腳本類型

JavaScript是Web的原始腳本語言专缠。在默認(rèn)情況下，假定<script>元素包含或引用JavaScript代碼淑仆。

HTML中的事件處理程序

類似onclick的事件處理程序?qū)傩岳酝瘢孟嗤拿謱?yīng)到HTML屬性，并且漢可以通過將JavaScript代碼放置在HTML屬性里來定義事件處理程序蔗怠。

URL中的JavaScrit

在URL后面跟一個JavaScript：協(xié)議限定符墩弯，是另一種嵌入JavaScript代碼到客戶端的方式吩跋。

書簽

“書簽”就是一個保存下來的URL。

JavaScript程序的執(zhí)行

JavaScript程序的執(zhí)行有兩個階段：

• 載入文檔內(nèi)容渔工，并執(zhí)行<script>元素里的代碼
• 事件驅(qū)動階段锌钮，響應(yīng)異步發(fā)生的事件

同步、異步和延遲的腳本

當(dāng)腳本把文本傳遞給document.write()時涨缚，這個文本被添加到文檔輸入流中，HTML解析器會在當(dāng)前位置創(chuàng)建一個文本節(jié)點策治，將文本插入這個文本節(jié)點后面脓魏。

腳本的執(zhí)行只在默認(rèn)情況下是同步和阻塞的。

<script>標(biāo)簽可以由defer和async屬性通惫。

• defer屬性使得瀏覽器延遲腳本的執(zhí)行茂翔，直到文檔的載入和解析完成。
• anync屬性使得瀏覽器可以盡快的執(zhí)行腳本履腋，而不用在下載腳本時阻塞文檔解析珊燎。

如果<script>標(biāo)簽同時有兩個屬性，同時支持兩者的瀏覽器會遵從async屬性并忽略defer屬性遵湖。

事件驅(qū)動的JavaScript

如果想要程序響應(yīng)一個事件悔政，寫一個函數(shù)，叫做“事件處理程序”延旧、“事件監(jiān)聽器”或“回調(diào)”拉队。然后注冊這個函數(shù)蔓姚，這樣也就會在事件發(fā)生時調(diào)用它。
addEvenListaner()方法允許注冊多個監(jiān)聽器。

功能測試

功能測試是解決不兼容性問題的一種強(qiáng)大技術(shù)降盹。
例如：
<code>
if(element.addEventListener){
element.addEventListener("Keydown",handler,false);
element.addEventListener("Keypress",handler,false);
}
else if(element.attachEvent){
element.attachEvent("onKoydown",handler);
element.attachEvent("onKeypress",handler);
}
else{
element.onkeydown = element.onKeypress = handler;
}
</code>

瀏覽器測試

在客戶端JavaScript中檢測瀏覽器類型和版本的方法就是使用Navigator對象。

條件注釋

例如：excanvs.js類庫在IE里實現(xiàn)<canvas>元素
<code></code>

同源策略

同源策略是對JavaScript代碼能夠操作哪些Web內(nèi)容的一條完整的安全限制珍特。
負(fù)責(zé)管理窗口或窗體中的JavaScript代碼以及和其他窗口或幀的交互届谈。

腳本只能讀取和所屬文檔來源相同的窗口和文檔的 屬性。

不嚴(yán)格的同源策略

為了支持多域名站點挺智，可以使用Document對象的domain屬性祷愉。

在默認(rèn)情況下，屬性domain存放的是載入文檔的服務(wù)器的主機(jī)名赦颇∫ゴ牵可以設(shè)置這一屬性，不過使用的字符串必須具有有效的域前綴或它本身沐扳。

如果兩個窗口包含的腳本把domain設(shè)置成了相同的值泥从，那么這兩個窗口就不在受同源策略的約束，他們可以相互讀取對方的屬性沪摄。

Window對象

客戶端JavaScript程序的全局對象

setTimeout()和setInterval()

可以用來注冊在指定的時間之后單次或重復(fù)調(diào)用的函數(shù)躯嫉。

• window對象的setTimeout()方法用來實現(xiàn)一個函數(shù)在指定的毫秒數(shù)之后運(yùn)行纱烘。setTimeout()返回一個值，這個值可以傳遞給clearTimeout()用于取消這個函數(shù)的執(zhí)行祈餐。
• setInterval()和setTimeout()一樣擂啥，只不過這個函數(shù)會在指定的毫秒數(shù)的間隔里重復(fù)調(diào)用。也是返回一個值帆阳，傳遞給clearInterval()用于取消后續(xù)函數(shù)的調(diào)用哺壶。
  <code>
  setInterval(updateClock,60000); //每60秒調(diào)用一次updateClock();
  </code>

瀏覽器的定位和導(dǎo)航

window對象的location屬性引用的是Location對象，他表示該窗口中當(dāng)前顯示的文檔的URL蜒谤，并定義了方法來使窗口載入新的文檔山宾。
Document對象的location屬性也引用到Location對象：
<code>window.location === document.location //總是返回true</code>

• 解析URL
  window對象的location屬性引用的是Location對象，表示窗口中當(dāng)前顯示的文檔的URL鳍徽。
  location對象的屬性href是一個字符串资锰，后者包含URL的完整文本。
  location對象的toString()方法返回href屬性的值阶祭。
  Location對象的其他屬性——protocol绷杜，host，hostname濒募，port鞭盟，pathname和search，分別表示URL的各個部分瑰剃。
• 載入新的文檔
  Location對象的assign()方法可以使窗口載入并顯示你指定的URL中的文檔懊缺。
  replace()方法也類似，但是他會在載入新文檔之前會從瀏覽歷史中把當(dāng)前文檔刪除培他。
  reload()方法可以讓瀏覽器重新載入當(dāng)前文檔鹃两。
  是瀏覽器跳轉(zhuǎn)到新的頁面的另一種方法是直接把新的URL賦給location屬性：
  <code>location = "http://www.oreilly.com"</code>
  還可以把相對URL賦給location，它們會相對當(dāng)前URL進(jìn)行解析：
  <code>location = "page2.html"</code>
  純粹的片段標(biāo)識符是URL的一種類型舀凛，會讓頁面滾動到文檔的某個位置俊扳。
  <code>location = "#top"</code>

瀏覽歷史

window對象的history屬性引用的是該窗口的History對象，History對象是用來把窗口的瀏覽歷史文檔和文檔狀態(tài)列表的形式表示猛遍。

方法：

• back()
  使瀏覽器在瀏覽歷史中后退一格馋记。
• foward()
  使瀏覽器在盧蘭歷史中前進(jìn)一格。
• go()
  接受一個參數(shù)懊烤，可以在歷史列表向前向后跳過任意多個頁梯醒。

瀏覽器和屏幕信息

• Navigator對象
  window對象的navigator屬性引用的是包含瀏覽器廠商和版本信息的Navigator對象。
  Navigator對象有4個屬性：appName腌紧、appVersion茸习、userAgent、platForm壁肋。
• Screen對象
  提供有關(guān)窗口顯示的大小和可用的顏色數(shù)量的信息号胚。
  width和height指定的是以像素為單位的窗口大小
  availWidth和availHeight指定的是實際可用的顯示大小
  colorDepth指定的是顯示的BPP的值

對話框

• alert()向用戶顯示一條消息并等待用戶關(guān)閉對話框
• confirm()也顯示一條消息籽慢，要求用戶單擊“確定”或“取消”按鈕，并返回一個布爾值
• prompt()同樣也顯示一條消息猫胁，等待用戶輸入字符串箱亿，并返回那個字符串。

錯誤處理

Window對象的onerror屬性是一個事件處理程序弃秆，當(dāng)未捕獲的異常傳播到調(diào)用棧上時就會調(diào)用它届惋，并把錯誤的信息輸出到瀏覽器的JavaScript控制臺上。如果給這個屬性賦一個函數(shù)菠赚，那么只要這個窗口放生了JavaScript錯誤脑豹，就會調(diào)用該函數(shù)。

window.onerror的第一個參數(shù)是描述錯誤的一條消息锈至，第二個參數(shù)是一個字符串晨缴，它存放引發(fā)錯誤的JavaScript代碼所在的文檔的URL译秦，第三個參數(shù)是文檔中發(fā)生錯誤的行數(shù)峡捡。

多窗口和窗體

HTML文檔經(jīng)常使用<iframe>來嵌套多個文檔，由<iframe>所創(chuàng)建的嵌套瀏覽上下文使用它自己的window對象所表示的筑悴。

• 打開窗口
  使用window對象的open()方法尅打開一個新的瀏覽器窗口们拙。window.open()載入指定的URL到新的或已存在的窗口中，并返回代表那個窗口的window對象阁吝。
  open()的返回值是代表命名或新創(chuàng)建的窗口的window對象砚婆。
• 關(guān)閉窗口
  方法close()關(guān)閉一個窗口
  要顯式的使用標(biāo)識符window，這樣可以避免混淆Window對象的close()方法和Document對象的close()方法突勇。

窗體之間的關(guān)系

任何窗口或窗體中的JavaScript代碼都可以將自己的窗口和窗體引用為window和self装盯。

• 窗體可以用parent屬性引用彪悍他的窗口或窗體的window對象
  <code>parent.history.back();</code>
• 如果一個窗口是頂級窗口或標(biāo)簽，而不是窗體甲馋，那么其parent屬性引用的就是這個窗口本身：
  <code>parent == self;</code>
• 如果一個窗體包含在另一個窗體中埂奈，而后者又包含在頂級窗口中，那么該窗體就可以使用parent.parent來引用頂級窗口定躏。
• top屬性引用的都是指向包含它的頂級窗口账磺。

窗體是通過<iframe>元素創(chuàng)建的∪叮可以用獲取其他元素的方法來獲取一個表示<iframe>的元素對象垮抗。

• 假定文檔里有<ifrme id = "f1">，那么表示該ifame的元素對象就是：
  <code>var iframeElement = document.getElementById("f1");</code>

<iframe>元素有contentWindow屬性碧聪，引用該窗體的Window對象冒版，所以此窗體的Window對象就是：
<code>var childFrame = document.getElementById("f1").contentWindow</code>

可以進(jìn)行反向操作，從表示窗體的Window對象來獲取窗體的<iframe>元素——用window對象的frameElement屬性逞姿。
<code>var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement === elt;
window.frameElement === null;</code>