【總結】javascript高階程式設計 讀書筆記
2018-11-13
第1章 簡介
javascript=DOM（文件物件模型：多層節點結構）+BOM（瀏覽器物件模型）+ECMAScript
-
ECMAScript，由ECMA-262定義，提供核心語言功能；
-
文件物件模型（DOM），提供訪問和操作網頁內容的方法和介面；
-
瀏覽器物件模型（BOM），提供與瀏覽器互動的方法和介面
第2章 在html中使用javascript
1、通過轉義字元 解決瀏覽器誤解問題：
<script type="text/javascript"> function sayScript(){ alert("<\/script>"); } </script>
2、在文件的<head>元素中包含所有JavaScript檔案，意味著必須等到全部JavaScript程式碼都被下載、解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時才開始呈現內容）。對於那些需要很多JavaScript程式碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器視窗中將是一片空白。為了避免這個問題，現代Web應用程式一般都把全部JavaScript引用放在<body>元素中，放在頁面的內容後面。
3、defer屬性延遲指令碼
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <!-- 這裡放內容 --> </body> </html>
雖然我們把<script>元素放在了文件的<head>元素中，但其中包含的指令碼將延遲到瀏覽器遇到</html>標籤後再執行。HTML5規範要求指令碼按照它們出現的先後順序執行，因此第一個延遲指令碼會先於第二個延遲指令碼執行，而這兩個指令碼會先於DOMContentLoaded事件（詳見第13章）執行。在現實當中，延遲指令碼並不一定會按照順序執行，也不一定會在DOMContentLoaded事件觸發前執行，因此最好只包含一個延遲指令碼。
defer屬性只適用於外部指令碼檔案。這一點在HTML5中已經明確規定，因此支援HTML5的實現會忽略給嵌入指令碼設定的defer屬性。IE4～IE7還支援對嵌入指令碼的defer屬性，但IE8及之後版本則完全支援HTML5規定的行為。
5、async屬性非同步指令碼
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
只適用於外部指令碼檔案。、
第二個指令碼檔案可能會在第一個指令碼檔案之前執行。因此，確保兩者之間互不依賴非常重要。指定async屬性的目的是不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內容。為此，建議非同步指令碼不要在載入期間修改DOM。
非同步指令碼一定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發之前或之後執行。支援非同步指令碼的瀏覽器有Firefox 3.6、Safari 5和Chrome。
6、外部檔案優點
-
可維護性：遍及不同HTML頁面的JavaScript會造成維護問題。但把所有JavaScript檔案都放在一個資料夾中，維護起來就輕鬆多了。而且開發人員因此也能夠在不觸及HTML標記的情況下，集中精力編輯JavaScript程式碼。
-
可快取：瀏覽器能夠根據具體的設定快取連結的所有外部JavaScript檔案。也就是說，如果有兩個頁面都使用同一個檔案，那麼這個檔案只需下載一次。因此，最終結果就是能夠加快頁面載入的速度。
-
適應未來：通過外部檔案來包含JavaScript無須使用前面提到XHTML或註釋hack。HTML和XHTML包含外部檔案的語法是相同的。
小結：
-
在包含外部JavaScript檔案時，必須將src屬性設定為指向相應檔案的URL。而這個檔案既可以是與包含它的頁面位於同一個伺服器上的檔案，也可以是其他任何域中的檔案。
-
所有<script>元素都會按照它們在頁面中出現的先後順序依次被解析。在不使用defer和async屬性的情況下，只有在解析完前面<script>元素中的程式碼之後，才會開始解析後面<script>元素中的程式碼。
-
由於瀏覽器會先解析完不使用defer屬性的<script>元素中的程式碼，然後再解析後面的內容，所以一般應該把<script>元素放在頁面最後，即主要內容後面，</body>標籤前面。
-
使用defer屬性可以讓指令碼在文件完全呈現之後再執行。延遲指令碼總是按照指定它們的順序執行。
-
使用async屬性可以表示當前指令碼不必等待其他指令碼，也不必阻塞文件呈現。不能保證非同步指令碼按照它們在頁面中出現的順序執行。
第3章 基本概念
1、嚴格模式
要在整個指令碼中啟用嚴格模式，可以在頂部新增如下程式碼：
"use strict";
2、使用保留字
會報錯：Identifier Expected
3、變數
函式作用域
function test(){
message = "hi"; // 全域性變數
}
test();
alert(message); // "hi"省略了var操作符，因而message就成了全域性變數。（太不推薦了！什麼鬼）
4、資料型別
簡單資料型別：Undefined、Null、Boolean、Number和String
複雜資料型別：Object
typeof操作符：判斷資料型別
會得到如下結果：
-
"undefined"——如果這個值未定義；
-
"boolean"——如果這個值是布林值；
-
"string"——如果這個值是字串；
-
"number"——如果這個值是數值；
-
"object"——如果這個值是物件或null；
-
"function"——如果這個值是函式。
強制轉換資料型別：Boolean() String() Number()
Boolean()
| 資料型別 | 轉換為true的值 | 轉換為false的值 |
|---|---|---|
| Boolean | true | false |
| String | 任何非空字串 | "" （空字串） |
| Number | 任何非零數字值（包括無窮大） | 0和NaN （參見本章後面有關NaN的內容） |
| Object | 任何物件 | null |
| Undefined | undefined |
isNaN()：判斷是否是NaN
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false（10是一個數值）
alert(isNaN("10")); //false（可以被轉換成數值10）
alert(isNaN("blue")); //true（不能轉換成數值）
alert(isNaN(true)); //false（可以被轉換成數值1）
有3個函式可以把非數值轉換為數值：Number()、parseInt()和parseFloat()
var num2 = Number(""); //0
var num2 = parseInt(""); // NaN
-
如果是Boolean值，true和false將分別被轉換為1和0。
-
如果是數字值，只是簡單的傳入和返回。
-
如果是null值，返回0。
-
如果是undefined，返回NaN。
-
如果是字串，遵循下列規則：
-
-
前面是數字後面是字串，會從字串開始擷取，Number('123number') //123
如果字串中只包含數字（包括前面帶加號或頭號的情況），則將其轉換為十進位制數值，即"1"會變成1，"123"會變成123，而"011"會變成11（注意：前導的零被忽略了）； -
如果字串中包含有效的浮點格式，如"1.1"，則將其轉換為對應的浮點數值（同樣，也會忽略前導零）；
-
如果字串中包含有效的十六進位制格式，例如"0xf"，則將其轉換為相同大小的十進位制整數值；
-
如果字串是空的（不包含任何字元），則將其轉換為0；
-
如果字串中包含除上述格式之外的字元，則將其轉換為NaN。
-
-
如果是物件，則呼叫物件的valueOf()方法，然後依照前面的規則轉換返回的值。如果轉換的結果是NaN，則呼叫物件的toString()方法，然後再次依照前面的規則轉換返回的字串值。
指定了16作為第二個引數，字串可以不帶前面的"0x"，如下所示：
var num1 = parseInt("AF", 16); //175
var num2 = parseInt("AF"); //NaN
toString()方法；數值、字串、物件、布林；都有toString方法；這個方法唯一能做的就是返回相應的字串；其中null和undefined沒有toString()方法；
String()屬於強制轉換， null轉換的結果為null；undefined轉換的結果為undefined；其餘的如果有toString()方法，即呼叫該方法，返回相應的結果
5、for-in語句
for (var propName in window) {
document.write(propName);
}
6、break和continue
break是結束整個迴圈體，會執行完本次迴圈
continue是結束單次迴圈，直接進行下一次迴圈
var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
break;
}
num++;
}
alert(num); //4var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++;
}
alert(num); //8var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
num++;
}
}
alert(num); //55break只退出一層迴圈，要想退出兩層，得加一個標記
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
alert(num); //957、函式的引數：arguments