《JavaScript高級程序設計》讀書筆記

1、第三章 基本概念：

1.理解參數
1.1 能夠向函數中傳遞任意數量的參數，而且能夠經過arguments對象來訪問這些參數。
1.2 arguments對象只是相似數組，它經過length來肯定傳進來多少參數
1.3 arguments它的值永遠與對應的參數名的值保持同步
eg:function add(num1,num2){arguments
arguments[1] =10;//修改了arguments[1]的值，對應的num2也會保持同步（他們的內存空間是獨立的）
}
2.with語句
做用：將代碼的做用域設置到一個特定的對象中
with(location){
 var  url= href;//
var  hostName = hostName;
}
在with代碼內部 每一個變量都被認爲是局部變量。若是局部環境中找不到該變量定義，那麼就會到location對象下面找是否有同名的屬性
3.break continue
break當即退出循環，執行循環以後的代碼
continue 退出循環，可是會從循環的頂部繼續執行

---

2、第五章 引用類型

全部對象都有 toLocalesString() toString() valueOf() 方法 
alert()要接收字符串參數，因此它會在後臺調用 toString()方法   

var color = ['red','blue','green'];
console.log(color.toString());//red,blue,green 返回數組中每一個值得字符串形式拼接而成的一個以逗號分隔的字符串
color.valueOf();   //返回數組自己
toLocaleString()方法 常常返回與上面2種方法同樣的值，可是不一樣點在於，爲了取得每一項的值，調用的是每一項的toLocaleSrting()而不是toString()；
使用toString()檢測對象類型Section
能夠經過toString() 來獲取每一個對象的類型。爲了每一個對象都能經過 Object.prototype.toString() 來檢測，須要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象做爲第一個參數，稱爲thisArg。

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]                      
  5.5 function類型     
函數內部有2個特殊對象 arguments 和this                
arguments保存着函數中傳入的全部參數 這個對象還有個callee的屬性，指向擁有這個arguments對象的函數。      
eg:
function test(num) {
    if(num<=1){
        return 1
    }else {
        return num*test(num-1);
    }
}
//這個函數的執行與函數名牢牢耦合在一塊兒，爲了消除這種耦合，能夠像下面這樣寫
function test(num) {
    if(num<=1){
        return 1
    }else {
        return num*arguments.callee(num-1);
    }

var test1 = test;
test = function () {
    return 0;
}
test1(5)//120
test(5)//0
//這樣重寫了test函數後，也能夠保證函數的正常調用

---

3、第八章 window對象 BOM的核心

BOM的核心對象是window,它表示的是一個瀏覽器實例。在瀏覽器中，window有雙重角色，既是js訪問瀏覽器的一個接口，又是js規定的    
gloabal對象.
8.1窗口關係及框架
若是頁面包含框架，則每一個框架都包含本身的window對象，而且保存在frames集合中。window.frames
每一個window對象都有一個name屬性，即框架名稱。
top對象始終指向最外層的框架，也就是瀏覽器窗口
與top相對的是 parent ,它始終指向當前框架的直接上層框架
8.1.5 導航和打開窗口
window.open()方法 既能夠導航到一個特定url，也能夠打開一個瀏覽器窗口
它能夠接受四個參數：要加載的url,窗口目標，一個特性字符串，一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只傳第一個參數，最後一個只在不打開新窗口的狀況下使用。
eg:
var wroxWin = window.open("http://www.baidu.com","wroxWindow","height=400,width=200");
wroxWin.resizeTo(500,500);//調整大小
wroxWin.moveTo(100,100)//移動位置
wroxWin.close()//關閉新打開的窗口
能夠經過try catch  以及判斷 wroxWin == null 來判斷是否 受到彈窗屏蔽程序影響
8.2 location對象 
location.href = ''跳轉到指定頁面
location.replace 實現導航到一個新的 url地址，替換掉當前頁面在瀏覽器中的歷史記錄
8.3navigator 
它有一個公共屬性 userAgent
history.go(1) 等同於 history.forword()
history.go(-1)等同於 history.back()
if(history.length ==1)則表示這是用戶打開窗口後的第一個頁面

---

4、第十章 DOM

document 三個與網頁請求有關的屬性
1.URL 即地址欄中顯示的URL
2.domain 即頁面域名 
3.referrer 保存着連接到當前頁面的那個頁面的URL
三個屬性中，只有domain是能夠設置的，因爲安全方面的限制，不能將這個屬性設置成URL中不包含的域
//假設頁面來自p2p.wrox.com
document.domain = 'wrox.com' //成功
document.domain = 'nczel.net'//失敗
因爲跨域的安全限制，來自不一樣子域的頁面沒法經過js通性，而經過將每一個頁面的document.domain設置成相同值，這些頁面就能夠互相訪問對方的js對象了
Node類型：
每一個節點都有一個childNodes屬性，其中保存着一個NodeList對象，NodeList是一種類數組對象，用於保存一組有序的節點。
NodeList的獨特之處在於，它是基於DOM結構動態執行查詢的結果，所以DOM結構的變化，可以自動地反應在NodeList對象中。它是有生命有呼吸的對象，而不是第一次訪問，某個瞬間拍攝下來的一張快照。
對於arguments對象和NodeList對象，均可以使用Array.prototype.slice(),將其轉換成數組。
eg：
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0)
NodeList對象都是動態的，這就意味着每次訪問NodeList對象，都會運行一次查詢。
DOM是語言中立的api,用於訪問和操做HTML和XML文檔。DOM 1級將HTML 和 XML文檔形象地看作一個層次化的節點樹，可使用js來操做這個節點樹，進而改變底層文檔的外觀和結構。

---

5、第十一章 DOM擴展

1.Selector Api 定義了2個方法，querySelector() querySelectorAll()
eg:document.querySelector("body")
返回匹配的第一個元素，沒有則返回null
可以調用的類型爲Document 和 Element 類型 

eg:var ems = document.getElementById("myDiv").querySelectorAll("em");
返回全部匹配的元素，返回的值是帶有屬性和方法的NodeList ,底層實現相似於 一組元素的快照，而非不斷的動態查詢,沒有則返回null
可以調用的類型爲Document 和 Element  DocumentFrament 類型
3.Element Traversal Api定義了額外的屬性，能方便地從一個元素跳到另外一個元素 
3.HTML5 
classList: add() contains()//是否存在  remove() toggle() 用於操做元素的類名
eg:div.classList.remove("user")；原來是使用div.className 返回爲字符串

焦點管理：document.activeElement 這個屬性始終會引用dom中當前得到焦點的元素 文檔加載期間爲null
document.hasFocus()檢測文檔是否得到了焦點
document.readyState 有2個屬性值 loading //正在加載文檔  complete //已經加載完文檔
html5 元素 上添加 data- 屬性 能夠經過 div.dataset來訪問
eg <div data-appid></div>   //獲取div.dataset.appid  

scollIntoView()   scollIntoViewIfNeed() 以前的筆記中有詳細介紹

---

6、十三章 事件

事件流：捕獲 目標元素 冒泡 document html body div的順序
addEventListener 接收三個參數 事件名，函數，布爾值 true表示捕獲階段調用處理程序 false表示冒泡階段調用處理程序

html5事件
1.contextmenu 即經過鼠標右鍵點出上下文菜單
2.beforeunload 事件
3.hasChange事件 Url的參數列表發生變化時調用
4.readystatechange事件 uninitialized 未初始化 loading loaded interactive交互 complete 完成

---

7、第二十一章 ajax

ajax  的核心對象 XHRHttpRequest
XHRHttpRequest 經常使用方法和屬性
onreadyStateChange：監聽當前http的狀態函數，當請求狀態發生變化時，就會調用該函數
open： xhr.open('get','http://www.baidu.com',true);// 三個參數 方法 地址 是否異步
send:接收一個參數做爲請求主體發送的數據，若不須要則傳null  send(null)
abort:終止鏈接 xhr.abort()
error:在請求錯誤時使用
responseText： 做爲響應主體被返回的文本
status ： 響應的http狀態
statusText： http狀態說明
readyState:當前http狀態變化值0-4
0:未初始化，還沒定調用open
1:啓動  已調用open方法可是沒調用send方法
2:發送  請求被接收 send()方法完成，可是還沒有接收到響應
3:接收 已經接收到部分響應數據
4.完成 請求處理完成，響應就緒
status:請求處理完以後，http的響應碼
200：請求數據返回成功
404：沒有發現查詢的url

只有當get的時候,纔會存在緩存問題   (IE上比較嚴重)
解決緩存問題:     getTime()取得時間戳(毫秒)
超時設定 timeout屬性 表示請求在等待多少毫秒後就終止 xhr.timeout = 0 ;即用不過期
eg:
var xhr = new XMLHttpRequest();
//鏈接服務器
xhr.open('get','http://www.baidu.com',true);// 三個參數 方法 地址 是否異步
//發送請求
xhr.send(null);
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status == '200'){
            console.log(xhr.responseText);
        }else {
            alert(xhr.status);
        }
    }
}
跨域問題：
CORS ,圖像ping和JSONP都是利用其src屬性實現跨域
comet（服務器向頁面推送數據的技術）是對ajax的進一步擴展 
實現的手段主要有兩個：長輪詢和HTTP流 ，因此瀏覽器都支持長輪詢 部分支持HTTP流
SSE (server-send Events 服務器發送事件) 是一種實現comet交互的瀏覽器API,既支持長輪詢，也支持HTTP流
websSockts 是一種持久的與服務器進行全雙工雙向通訊的信道，不使用http協議，而是一種自定義協議