權威指南學習心得-瀏覽器中的js

window對象：表示web了瀏覽器的一個窗口或窗體（winow屬性引用自身）

含有如下屬性：location包含Location對象，指定當前顯示在窗口中URL，容許腳本往窗口裏載入新的URL

含有如下方法：

alert（），setTimeout（）；

document屬性 引用Document對象，後者表示顯示在窗口中的文檔，它包含有一些重要方法，好比getElementById()，返回Element對象，這個對象有其它重要的屬性和方法。每一個Element對象都有style和className屬性。容許腳本指定文檔元素的css樣式，或者修改應用到元素上的css類名。設置這些css相關的屬性會改變文檔元素的呈現

Window、Document和Element對象上另外一個重要的屬性集合是事件處理程序相關的屬性，能夠在腳本中爲之綁定一個函數，事件處理程序的屬性名是以單詞「on」開始的

Window對象的onlaod處理程序：當顯示在窗口中的文檔內容穩定並能夠操做是會觸發它

javaScript程序能夠經過Document對象和它包含的Element對象遍歷和管理文檔內容。它能夠經過操縱css樣式和類，修改文檔內容的呈現，而且能夠經過註冊適當的事件處理程序來定義文檔元素的行爲。內容 呈現 和行爲的組合，叫作動態HTML

嵌入方式：

1.內聯 放置在<script>和</script>標籤之間。

二、放置在有<script>標籤的src屬性指定的外部文件中

三、放置在HTML事件處理程序中，該事件處理程序由onclick或者onmouseover這樣的HTML屬性指定

四、放在一個URL裏，這個url使用特殊的「javascript:」協議

註冊時間處理程序：web瀏覽器先註冊javascript函數，並在以後調用它做爲事件的響應，javascript代碼能夠經過把函數賦值給Element對象的屬性來註冊事件處理程序。Element對象表示文檔裏的一個HTML元素。

<a href="javascript:new Date().toLocalTimeString;">what time is ite</a>

部分瀏覽器（firefox）會執行URL裏的代碼，並使用返回的字符串做爲待顯示新文檔的內容，瀏覽器會擦除當前文檔並顯示新文檔。

<a href="javascript:alert(new Date().toLocaleTimeString());">時間</a>

當瀏覽器載入這種類型的URL時，它會執行javascript代碼，可是因爲沒有返回值（alert（）方法返回undefined）做爲新文檔的顯示內容，相似firefox的瀏覽器並不會體會當前顯示的文檔

javascript：url能識別的「資源」是轉換成字符串的執行代碼的返回值.若是代碼返回undefined，那麼這個資源是沒有內容的，能夠用在可使用常規URL的任意地方：好比<a>標記的href屬性，<form>的action屬性，甚至window.open方法的參數

若是要確保javascript：url不會覆蓋當前文檔，能夠用void操做符強制函數調用或給表達式賦予undefined值：

<a href='javascript:void window.open('about:blank');'></a>

若是這個url裏沒有void操做符，調用window.open()方法返回的值會被轉化爲字符串並顯示，而當前文檔也會被覆蓋爲包含該字符串的文檔

javascript程序是由web頁面中全部包含的全部javascript代碼（內聯腳本 html事件處理程序和javascript：URL）和經過《script》標籤的src屬性引用的外部javascript代碼組成。全部這些單獨的代碼共用同一個全局Window對象。這意味着它們均可以看到相同的Document對象，能夠共享相同的全局函數和變量的集合：若是一個腳本定義了新的全局變量或者函數，那麼這個變量或者函數會在腳本執行以後對任意javascript代碼可見。

若是web頁面包含一個嵌入的窗體（一般使用《iframe》元素），嵌入文檔中的javascript代碼和被嵌入文檔裏的javascript代碼會有不一樣的全局對象，它能夠看成一個獨立的javascript程序。可是要記住，沒有嚴格的關於javascript程序範圍的定義。若是外面和裏面的文檔來自於同一個服務器，那麼兩個文檔中的代碼就能夠進行交互。而且若是你願意，就能夠把它們看成是同一程序的兩個互相做用的部分

javascript程序的執行有兩個階段.在第一個階段，載入文檔內容，並執行《script》元素裏的代碼（包括內聯腳本和外部腳本）。腳本一般（但不老是）會按它們在文檔裏的出現順序執行。全部腳本里的javascript代碼都是從上往下，按照他在條件、循環以及其餘控制語句中的出現順序執行

當文檔載入完成，而且全部腳本執行完成後，javascript執行就進入他的第二階段。這個階段是異步的，並且由事件驅動的，在事件驅動階段，web瀏覽器調用事件處理程序函數（由第一階段裏執行的腳本指定的html事件處理程序，或者以前 調用的事件處理程序來定義），來響應異步發生的事件。調用事件處理程序一般是響應用戶輸入（鼠標單擊或者鍵盤按下等）。可是還能夠有網絡活動，運行時間或者javas代碼中的錯誤來觸發，注意 ，嵌入web頁面裏的javascript：url也能夠看成是一種事件處理程序，由於直到用戶經過單擊連接或者提交表單以後它們纔有有效果

事件驅動階段發生的第一事件是laod事件，指示文檔已經徹底載入，並能夠操做，javascript程序常常用這個時間來觸發或發生消息。正是這個onlaod事件會對文檔進行操做，並作程序想作的任何事。javascript程序的載入階段是相對短暫的，一般只持續1~2秒。在文檔載入完成以後，只有web瀏覽器顯示文檔。事件驅動階段就會一直持續下去

核心javascript和客戶端javascript有一個單線程執行模型，腳本和事件處理程序在同一個時間只能執行一個，沒有併發性

javascript第一次添加到web瀏覽器時，還麼有api能夠用來遍歷和操做文檔的結構和內容。當文檔還在載入時，javascript影響文檔內容的惟一方式是快速生成內容。當HTML解析器遇到《script》元素時，它默認必須先執行腳本，而後再恢復文檔的解析和渲染，這對於內聯腳本沒什麼問題。但若是腳本源代碼是一個有Src屬性指定的外部文件，這意味着腳本後面的文檔部分在下載和執行腳本以前，都不會出如今瀏覽器中

腳本的執行只在默認狀況下是同步和阻塞的。《script》標籤能夠有defer和async屬性，這能夠改變腳本的執行方式，這些都是布爾屬性，沒有值。只須要出如今《script》標籤裏便可

defer和async屬性都想在告訴瀏覽器連接進來的腳本不會使用document。write，也不會生成熱火文檔內容，所以瀏覽器能夠在下載腳本是繼續解析和渲染文檔，defer屬性使得瀏覽器延遲腳本的執行，知道文檔的載入和解析完成，並能夠操做。async屬性使得瀏覽器能夠儘快的執行腳本，而不用在下載腳本時阻塞文檔解析，若是《script》標籤同時又兩個屬性，同時支持二者的瀏覽器會聽從async屬性並忽略defer屬性。

注意，延遲的腳本會按它們在文檔裏的出現順序執行，而異步腳本在他們載入後執行，這意味着他們可能會無序執行

甚至能夠在不支持async屬性的瀏覽器裏，經過動態建立《script》元素並把它插入到文檔中

來實現腳本的異步加載和執行。

function loadasync(url){
var head=document.getElementsByTagName("head")[0];
var s=document.createElement("script");
s.src=url;
head.appendChild(s);


}

 

 

 

 

事件都有名字，好比click  change load mouseover keypress或者readystatechange，指示發生的事件的通用類型。事件還有目標，它是一個對象，而且事件就是在它上面發生的。當咱們談論事件的時候，必須同時指定事件類型(名字)和目標，好比一個單擊事件發生在HTMLButtonElement對象上，或者一個readystatechange事件發生在XMLHttpRequest對象上

若是想要程序響應一個事「件，寫一個函數，叫作「事件處理程序」、「事件監聽器」或者「回調」，而後註冊這個函數，這樣他就會在事件發生時調用它，正如前面提到的，這個能夠經過HTML屬性來完成，可是咱們不鼓勵獎javascript代碼和HTML內容混淆在一塊兒，反之，註冊事件處理程序最簡單的方法是把javascript函數賦值給目標對象的屬性

好比

window.onload=function (){};

document.getElementById().onclick=function(){}

function handleResponse(){}

request.onreadystatechange=handleResponse;

事件處理程序的屬性的名字是以「on」開始，後面跟着事件的名字

對於大部分瀏覽器中的大部分事件來講，會把一個對象傳遞給事件處理程序做爲參數，那個對象的屬性提供了事件的詳細信息。好比，傳遞給單擊事件的對象，會有一個屬性說明鼠標的哪一個按鈕被單擊（在IE裏，這些事件信息被存儲在全局event對象裏，而不是傳遞給處理程序函數）。事件處理程序的返回值有時用來指示函數是否充分處理了事件，以及阻止瀏覽器執行它默認會進行的各類操做。

有些事件的目標是文檔元素，它們會常常往上傳遞給文檔樹，這個過程叫作「冒泡」。若是註冊在按鈕上的函數沒有處理該事件，事件會冒泡到按鈕嵌套的容器元素。

大部分能夠成爲事件目標的對象都有一個叫作addEventListener的方法，容許註冊多個監聽器：

window.addEventListener("load",function(){},false);

request.addEventListener("readystatechange",function(){},false)；

微軟目前只有在IE9中實現了它，在IE8以及以前的瀏覽器中，必須使用一個類似的方法：

window.attchEvent("onloac",function(){});

客戶端javascript程序仍是使用異步通知類型，這些類型每每不是事件。若是設置window對象的onerror屬性爲一個函數，會在發生javascript錯誤時調用函數。傳遞給setTimeout和setInterval的函數和真實事件處理程序的註冊不一樣，它們一般叫作「回調邏輯」而不是「處理程序」，但它們和事件處理程序同樣，也是異步的

function onLoad(f){
  if(onload.loaded){
    window.setTimeout(f,0);
  }
  else if(window.addEventListener){
    window.addEventListener("load",f,false);
  }
  else if(window.attchEvent){
    window.attchEvent("onload",f);
  }
}
onLoad.loaded=false;
onLoad(function(){
  onLoad.loaded=true;
                 });

客戶端javascript時間線

一、web瀏覽器建立Dcoment對象，而且開始解析Web頁面，解析HTML元素和它們的文本內容後添加Element對象和Text節點到文檔中。在這個階段document.readystate屬性的值是"loading"。

二、當HTML解析器遇到沒有async和defer屬性的<script>元素時，它把這些元素添加到文檔中，而後執行行內或者外部腳本，這些腳本會同步執行，而且咋腳本下載（若是須要）和執行時解析器會暫停。這樣腳本就能夠用document.write（）來吧文本插入到輸入流中，解析器恢復時這些文本會成爲文檔的一部分。同步腳本將從簡單定義函數和註冊後面使用的註冊事件處理程序。但它們能夠遍歷和操做文檔樹，由於在它們執行時已經存在了。這樣，同步腳本能夠看到它本身的</script>元素和它們以前的文檔內容。

三、當解析器遇到設置了async屬性的<script>元素時，它開始下載腳本文本，並繼續解析文檔。腳本會在它下載完成後儘快執行。可是解析器沒有停下來等它下載，異步腳本禁止使用document.write方法，它們能夠看到本身的《script》元素和它以前的全部文檔元素，而且可能或者乾脆不可能訪問其餘的文檔內容

四、當文檔完成解析，document.readyState屬性變成 "interactive"

五、全部defer屬性的腳本，會按它們在文檔裏的出現順序執行。異步腳本可能也會在這個時間執行。延遲腳本能訪問完整的文檔樹，禁止使用document。write方法

六、瀏覽器在Document對象上觸發DOMContentLoaded事件。這標誌這程序執行從同步腳本階段轉換到異步事件驅動階段。但要注意，這時可能還有異步腳本沒有執行完成。

七、這時，文檔已經徹底解析完成，可是瀏覽器可能還在等待其餘內容載入，如圖片，當全部這些內容完成載入時，而且全部異步腳本完成完成載入和執行，document。readyState屬性改變爲「complete」,web瀏覽器出發Window對象上的load事件。

八、今後刻起，會調用異步事件，以異步響應用戶輸入事件、網絡事件、計時器過時等

全部瀏覽器廣泛都支持load事件，都會觸發它，它是決定文檔徹底載入並能夠操做最通用的技術。

DOMContentLoaded事件在load事件以前觸發，當前全部瀏覽器都支持這個事件，除了IE以外，document.readyState屬性在寫本書是已被大部分瀏覽器實現，可是屬性的值在瀏覽器之間有細微的差異。defer屬性被全部當前版本的IE支持，可是如今還未被其餘瀏覽器實現。async屬性的支持在寫本書時還不通用，可是13-4裏展現的異步腳本執行技術會被當前全部瀏覽器支持

標準模式和怪異模式

要進行這種渲染模式的特性檢測，一般檢查document.compatMode屬性。若是其值爲「CSS1Compat」,則說明

瀏覽器工做在標準模式，若是值爲「BackCompat」(或者undefined，說明屬性根本不存在)，則說明瀏覽器工做在怪異模式。全部現代瀏覽器都實現了compatMode屬性，而且HTML5規範對它進行了標準化

同源策略

是對javascript代碼可以操做哪些web內容的一條完整的的安全機制。當web頁面使用多個《iframe》元素或者打開其餘瀏覽器窗口的時候，這一策略一般就會發揮做用。

在這種狀況下，同源策略負責管理窗口或者窗體中的javascript代碼以及和其餘窗口或幀的交互，具體的說，腳本只能讀取和所屬文檔來源相同的窗口和文檔的屬性

文檔的來源包含協議、主機，以及載入文檔的url端口。從不一樣web服務器載入的文檔具備不一樣的來源。經過贊成主機的不一樣端口載入的文檔具備不一樣的來源。使用http協議載入的文檔和使用https協議載入的文檔具備不一樣的來源，即便它們來自同一服務器。

腳本自己的來源和同源策略並不相關，相關的是腳本所嵌入的文檔的來源

爲了支持多個子域的多域名站點，可使用Document對象的domain屬性屬性，在默認狀況下，屬性domain存放的是載入文檔的服務器的主機名。能夠設置這一屬性，不過使用的字符串必須具備有效的域前綴或它自己。

另外，domain值中必須有一個點號，不能把它設置爲「com」或者其餘頂級域名。

若是兩個窗口（或者窗體）包含的腳本把domain設置成了相同的值，那麼這個兩個窗口就再也不受同源策略的約束，它們能夠互相讀取對方的屬性。

不嚴格的同源策略的第二項技術已經標準化爲：跨域資源共享，這個標準草案用新「Origin」:請求頭和新的Access-control-allow-origin響應頭來擴展http，一些瀏覽器可使用這種新的頭信息來容許跨域http請求，這樣XMLHttpRequest就不會被同源策略所限制了。

另外一種新技術，叫作跨文檔消息，容許來自一個文檔的腳本能夠傳遞文本消息到另外一個文檔裏的腳本，而無論腳本的來源是否不一樣。調用Window對象上的postMessage方法，能夠異步傳遞消息事件（能夠用onmessage事件句處理程序函數來處理它）到窗口的文檔裏。一個文檔裏的腳本仍是不能調用在其餘文檔裏的方法和讀取屬性，但她們能夠用這種消息傳遞技術來實現安全的通訊。

跨站腳本XSS

攻擊者像目標web站點注入html標籤或者腳本

var name=decodeURLComponent(window.location.search.substring(1))||"";
document.write("hello"+name);

防止xss攻擊的方式是，在使用任何不可信的數據來動態的建立文檔內容以前，從中移除html標籤

name=name.replace(/</g,"&lt;").reaplce(/>/,"&gt;");