首頁 > 開發者 > JavaScript
標籤：定義 turn 理解 元素 ase while 自動 row cti
第 1 章 JavaScript 簡史1.1 JavaScript 的起源JavaScript 是 Netscape 公司與 Sun 公司合作開發的。
JavaScript 是 ECMAScript 標準的一種實現，但在一般表述中，這兩者是指同一種程式設計語言。
1.2 DOMDOM（Document Object Model，文件物件模型），是一套對文檔的內容進行抽象和概念化的方法。
通過 DOM 可以對文檔內的某些實際內容進行查詢和操控。
1.3 瀏覽器戰爭1.3.1 DHTMLDHTML（Dynamic HMTL，動態超文字標記語言），是描述 HTML、CSS 和 JavaScript 技術組合的術語。其背後的含義是：
Netscape 公司和 Microsoft 公司的瀏覽器的 DOM 的差異，導致了當時 DHTML 技術的難以實現。
1.4 制定標準W3C 於 1998 年 10 月完成了“第 1 級 DOM”（DOM Level 1）標準，這種標準化的 DOM 可以讓任何一種程式設計語言對使用任何一種標記語言編寫出來的任何一種文檔進行操控。
1.4.1 瀏覽器以外的考慮DOM 是一種 API（Application Programming Interface，API），也是一種已經得到有關各方共同認可的基本約定。
W3C 對 DOM 的定義是：“一個與系統平台和程式設計語言無關的介面，程式和指令碼可以通過這個介面動態訪問和修改文檔的內容、結構和樣式。”
1.4.2 瀏覽器戰爭的結局由於 Windows 作業系統的成功，Netscape 公司輸了。戰爭促進了 DOM 標準的最終制定。
1.4.3 嶄新的起點WebKit 是 Safari 和 Chrome 採用的一個開源 網頁瀏覽器引擎；它與另一個開源引擎——FireFox 的核心 Gecko，共同促進了 IE 的核心 Trident 等專有瀏覽器引擎逐步向 Web 標準靠攏。
1.5 小結略。
第 2 章 JavaScript 文法2.1 準備工作使用 JavaScript 的兩種方式：
<head> 標籤中的 <script> 標籤之間；<head> 標籤中添加 <script> 標籤，並使用 <script> 標籤的 src 屬性指向該檔案。最好的做法是把 <script> 標籤放到 HTML 文檔的最後，</body> 標籤之前。
程式語言分為解釋型和編譯型兩大類。Java 或 C++ 等語言需要一個編譯器（compiler）。編譯器是一種程式，能夠把 Java 等進階語言編寫出來的原始碼翻譯為直接在電腦上執行的檔案。
解釋型程式設計語言不需要編譯器，僅需要解譯器，對於 JavaScript 語言，一般由瀏覽器負責完成有關的解釋和執行工作。
2.2 文法2.2.1 語句JavaScript 編寫的指令碼又一系列指令構成，這些指令叫作語句（statement）。
各條語句放在不同行就可以分隔開，如果多條語句要放在同一行，必須使用分號分隔；建議每條語句的末尾都加分號。
2.2.2 注釋指令碼中有一些需要解譯器直接忽略的僅供參考或提醒的資訊，這類語句就是注釋（comment）。
//；/* 和 */ 包裹起來。人們把那些會發生變化的東西稱為變數（variable），例如人的心情、年齡等。
把值存入變數的操作稱為賦值（assignment）。
JavaScript 允許直接對變數賦值而無需事先聲明這個變數，這在很多程式設計語言中是不允許的。
要求在使用任何變數之前必須先對它做出“介紹”，就叫作聲明（declare）。
在 JavaScript 中，如果對某個變數賦值之前未聲明該變數，賦值操作將自動聲明該變數。雖然如此，但提前聲明變數是良好的習慣，另外還關乎於變數的範圍與變數聲明提前等影響。
聲明變數使用 var 操作符（ES6 標準之前的方式）。另外：
, 分割；在 JavaScript 中變數名區分大小寫；變數名中只能使用字母、數字、底線 _ 和貨幣符號 $，且第一個字元不能為數字。
變數名一般使用駝峰格式（camel case）或在詞語之間使用底線串連的方式命名。
在 JavaScript 中直接在代碼中寫出的資料稱為字面量（literal），字面量除了表示自己以外不能表示任何別的東西……“它就是它！”嗯……
2.2.4 資料類型有些其他語言要求在聲明變數的同時聲明變數的資料類型，這種做法稱為型別宣告（typing）。
必須明確型別宣告的語言稱為強型別（strongly typed）語言；而 JavaScript 不需要進行型別宣告，因此它是一種弱類型（weakly typed）語言。這意味著可以在任何階段改變變數的資料類型。
JavaScript 中的重要資料類型有：
1. 字串
字串（string）類型由零個或多個字元構成（零個的稱為“Null 字元串”），字串必須包在引號裡，單引號雙引號皆可，一般推薦單引號，並且整個指令碼要一致，這才是良好的編程習慣。
如果要表示的字串中包含單引號，為了避免解譯器認為它是整個字串的結尾，則將其放在雙引號中，反之則反。但是一般推薦使用轉義符來轉義（escaping）有代碼含義的字元，在 JavaScript 中，使用反斜線\對字元進行轉義。
2. 數值
數值（number）類型包含整數和帶任意位小數的浮點數。在數值前面加一個減號-表示該數值為負數。
3. 布爾值
布爾（boolean）類型只包含兩個值—— true 和 false。
布爾值不是字串，千萬不要把布爾值使用引號包起來。‘false‘ 和 false 值兩碼事。
備忘：書中只簡單提到三種基礎資料型別 (Elementary Data Type)，沒有提到另外兩種基礎資料型別 (Elementary Data Type) undefined 和 null，以及複雜資料類型 object。
2.2.5 數組字串、數值和布爾值都是標量（scalar）。如果某個變數是標量，它在任意時刻就只能有一個值。如果想用一個變數來儲存一組值，就需要使用數組（array）。
數組是指用一個變數表示一個值的集合，集合中的每個值都是這個數組的一個元素（element）。
聲明數組有兩種方式：
Array 關鍵字，聲明數組的同時可以指定數組的初始元素個數，也就是數組的長度（length）；向數組中添加元素的操作稱為填充（populating）；在填充數組時，需要給出新元素的值以及新元素在數組中的位置，這個位置就是這個元素的下標（index）；下標從 0 開始，數組裡每個元素都有下標，使用下標時必須用方括弧將其括起來。
前面提到的兩種聲明數組的方法都可以在聲明的同時，對數組進行填充操作。
數組元素可以儲存任何類型的資料，同一數組的元素也可以儲存不同類型的資料；如果數組的元素中儲存了另一個數組，這種數組被稱為多元數組，多元數組雖然強大，但一般建議使用對象將複雜資料儲存在數組中。
在填充數組時只給出了元素的值，其下標為預設的數值，這個數組就是一個傳統數組；而在填充時為元素同時添加下標和值，且下標不是數值，這種數組稱為關聯陣列。填充元素時將下標設定為字串，實際與為數組添加屬性的操作相同。
備忘：其實關聯陣列與 JSON 格式的資料類似，但是不推薦使用關聯陣列。
2.2.6 對象與數組類似，對象也是使用一個名字表示一組值。對象的每個值都是對象的一個屬性。
建立對象也有兩種方式：
Object 關鍵字；訪問、添加或修改對象的屬性可以使用點號 .，也可以使用中括弧，中括弧內的屬性名稱必須為字串，是要用引號括起來的。使用對象直接量的方式可以同時聲明對象和為對象添加屬性；屬性的值可以是任何資料類型。
對資料進行計算和處理的動作稱為操作（operation）。
算數操作符加 +、減 -、乘 *、除 / 操作，都是算術操作（arithmetic operation）；每一種都必須藉助於相應的操作符（operator）才能完成，操作符是 JavaScript 為完成各種操作而定義的一些符號。
可以把多種操作組合在一起使用；為避免產生歧義或提高運算優先順序，可以使用括弧把不同的操作分割開。
為一個變數加 1 可以簡寫為++，減法操作也可以如此，再複習一遍前置 ++ 或 -- 和後置 ++ 或 -- 的區別：
++ / --先計算，後賦值；++ / --先賦值，後計算。這裡要重點一下加法操作符，當兩個運算元都為數字時便進行加法操作，如果有一個運算元是字串時，便將另一個運算元轉換為字串並將兩個運算元首位相連地拼接（concatenation）為一個字串。
值或變數包含自身的加法（或拼接）/減法操作後的賦值可以簡寫為 += / -=。
JavaScript 使用條件陳述式（conditional statement）來做判斷。
最常見的條件陳述式是 if 語句，條件必須放到 if 後面的圓括弧中，條件的求值結果永遠是一個布爾值；花括弧中的語句，只要在給定條件的求值結果為 true 的情況下才會執行。
如果 if 語句後面只有一條語句，可以不加花括弧，但是並不推薦這樣做。
比較操作符包括大於 >、小於 <、大於或等於 >=、小於或等於 <=、相等 ==、全等 ===、不相等 != 和不全等 !==。
一個等號 = 是賦值操作符，不是比較操作符，所以不要在條件判斷時使用錯；如果使用了賦值操作符進行了條件判斷，會使判斷條件的結果最終取決於被賦值的變數轉換後的布爾值。
相等/不相等和全等/不全等的區別簡單的說是：相等操作符不表示嚴格相等，在比較時會發生兩個運算元的類型轉換；而全等是嚴格相等，需要資料類型和值完全相等才會返回 true，比較時是不會發生資料類型轉換的。
JavaScript 允許把條件陳述式裡的操作組合在一起。判斷兩個或更多個條件的成立與否的操作，稱為邏輯比較（operand）。
邏輯與操作符 && 只要在它的兩個運算元都為真時才會返回 true。
邏輯或操作符 || 只要有一個運算元為真則會返回 true。
邏輯非操作符 ! 只能用於單個運算元，其結果是將運算元返回的布爾值取反。
迴圈語句可以反覆多次執行同一段代碼，只要給定條件仍然能得到滿足，包含在迴圈語句中的代碼就將重複執行；一旦給定條件傳回值不再為 true，則停止迴圈。
只要圓括弧內的給定條件求值為 true，則包含在花括弧裡的代碼反覆執行；一般會在花括弧裡設定停止迴圈的條件。
與 while 迴圈的區別是，在迴圈條件求值之前，包含在花括弧裡的代碼至少會執行一次，然後再判斷迴圈條件是否成立。
for 迴圈是 while 迴圈的一種變體。
for 迴圈最常見的用途是對某個數組裡的全體元素進行遍曆處理，一般情況下，都會設定迴圈停止的條件為，迴圈輪次變數小於數組的最大長度，即 i < arr.length。
如果需要多次使用同一段代碼，可以把它們封裝成一個函數（function），函數就是一組允許在代碼裡隨時調用的語句，每個函數實際上是一個短小的指令碼。
一般情況下，需要先對函數做出定義再調用它們；當然也有自調用的匿名函數這種二般的情況。
函數可以接收傳遞進來的資料，並使用這些資料完成預定的操作，這些傳遞進函數的資料稱為參數（argument）。
在定義函數時，可以為其聲明任意多個參數，它們之間需要使用逗號分隔；在函數內部可以像使用普通變數一般使用任何一個傳遞進來的參數。
函數不僅可以接收資料，還可以返回資料，返回資料使用 return 關鍵字，當結果返回完畢後，函數也將停止運行。
變數命名推薦使用下滑線分隔單詞，而函數命名推薦使用駝峰格式，這樣可以一目瞭然的分辨變數和函數。
變數的範圍變數可以是全域的，也可以是局部的。
全域變數（global variable）可以在指令碼中的任何位置被引用；全域變數的範圍是整個指令碼。
局部變數（local variable）只存在於聲明它的函數內部，在該函數外部是無法引用這個局部變數的；局部變數的範圍僅限於某個特定的函數內部。
前面提到變數聲明時，應該使用 var 關鍵字，這樣做就是為了明確變數的範圍。不使用 var 關鍵字聲明的變數屬於全域變數，不論這個變數是在指令碼的什麼位置聲明的。而使用 var 關鍵字，變數就將成為一個局部變數，除非它不是在某個函數中。
函數在行為方面應該像一個自給自足的指令碼，在定義一個函數時，一定要把其內部變數全部明確地聲明為局部變數。
2.7 對象對象（object）是自包含的資料集合，包含在對象裡的資料可以通過兩種形式訪問——屬性（property）和方法（method），對象就是由一些屬性和方法組合在一起構成的資料實體：
要訪問對象的屬性或方法，可以使用點號。
執行個體（instance）是對象的具體個體；將對象執行個體化後，便可以訪問對象的屬性和方法。
為給定對象建立一個新執行個體需要使用 new 關鍵字。
在 JavaScript 中，由使用者建立的對象被稱為使用者自訂對象（user-defined object）；而語言提供的一系列預先定義好的對象稱為內建對象（native object）。
2.7.1 內建對象常見的內建對象如前面提到的數組對象（Array），以及常用的數學對象（Math）和日期對象（Date）等。
所有對象都是 Object 對象的執行個體。
具有抽象化的對象在命名時首字母一般都是大寫。
2.7.2 宿主對象有一些非 JavaScript 提供的，但也是預先定義好的對象，它們是由 JavaScript 的運行環境提供的，這些對象稱為宿主對象（host object）。
例如在瀏覽器環境中的 window 對象，在 Node.js 環境中是沒有的。這本書主要講的也是一個瀏覽器提供的宿主對象——Document 對象。
2.8 小結略。
第 3 章 DOM3.1 文檔：DOM 中的“D”指的是 Document，即文檔。當建立一個網頁並把它載入到 網頁瀏覽器中時，瀏覽器便把網頁文檔轉換為一個文檔對象。
3.2 對象：DOM 中的“O”指的是 Object，即對象。宿主對象 window 是最基礎的對象之一，它對應著瀏覽器視窗本身，這個對象的屬性和方法通常統稱為 BOM（Browser Object Model，瀏覽器物件模型）。
3.3 模型：DOM 中的“M”指的是 Model，意思是“模型”，但更形象的描述是“Map”，即地圖。簡單理解，地表徵圖明了文檔中各個節點的方位和彼此之間的關係，JavaScript 可以依照這個地圖，來訪問對應的元素。
書中用 DOM 樹來更清楚的表現了網頁的結構。
3.4 節點節點（node）表示網路中的一個連接點，一個網路就是由一些節點構成的集合。
DOM 也是由節點構成的集合，在 DOM 中主要有三種節點：元素節點、文本節點以及屬性節點。
3.4.1 元素節點元素節點（element node）是 DOM 的主要組成部分。
標籤的名字就是元素的名字，在一般情況下，標籤就等於元素。
3.4.2 文本節點在文檔中，文本節點（text node）總是被包含在元素節點的內部，但並非所有元素節點都包含有文本節點。
3.4.3 屬性節點屬性節點（attribute node）用來對元素節點作出更具體的描述。屬性總是被放在起始標籤中，所以屬性節點總是被包含在元素節點中。但並非所有元素都包含屬性。
3.4.4 CSS通過 CSS（Cascading Style Sheet，層疊樣式表）可以告訴瀏覽器如何顯示一份文檔。
在 CSS 中，也把文檔內容視為一棵節點樹，節點樹上的各個元素都將繼承（inheritance）其父元素的樣式屬性。
為了把某個或多個元素與其他元素區別開，需要使用標籤的 id 或 class 屬性。
1. class 屬性
可以在所有元素上任意應用 class 屬性。class 屬性不具有唯一性。
2. id 屬性
id 屬性的用途是給網頁裡的某個元素加上一個獨一無二的標識符，也就是說在整個文檔中，id 屬性具有唯一性。
有 3 種 DOM 方法可以擷取元素節點，分別是通過元素 ID、通過標籤名和通過類名來擷取。
1. getElmentById
該方法返回一個擁有指定 id 屬性的元素節點對應的對象。它是 document 對象特有的函數。
2. getElmentsByTagName
該方法返回的是一個對象數組，每個對象對應文檔中有指定標籤名的元素。
該方法允許一個萬用字元*做為其參數，這樣可以將文檔中的所有標籤元素全部返回為一個數組。
3. getElmentsByClassName
該方法為 HTML5 DOM 中新增的方法，可以通過標籤 class 屬性中的類名來訪問元素，傳回值是一個對象數組，每個對象對應文檔中具有指定類名的元素。
《JavaScript DOM 編程藝術（第2版）》- 綜合筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
