《JavaScript DOM編程藝術（第2版）》筆記

時間 2020-01-30

標籤 javascript dom 編程藝術筆記欄目 JavaScript 简体版

原文原文鏈接

《JavaScript DOM 編程藝術（第2版）》筆記javascript

第1章：JavaScript 簡史

JavaScript 的起源

JavaScript 是 Netscape 公司和 Sun 公司合做開發的。

DOM 是一套對文檔的內容進行抽象和概念化的方法。

瀏覽器戰爭

今天，幾乎全部的瀏覽器都內置了對 DOM 的支持，只要遵循 DOM 標準，就能夠放心大膽的去作。

第2章：JavaScript 語法

語句html

建議在每條語句末尾都加上分號。

註釋java

// 單行註釋
/* 多行註釋
   多行註釋*/

變量node
```
var mood = "happy";
var age = 33;
```
數據類型編程
- 字符串
- 數值
- 布爾值
- 數組canvas
  - 數組
  - 關聯數組
- 對象
操做符
- 算術操做符
+ ,-,*,/,++,--,+=數組
- 比較操做符
>,=,<,>=,<=,==,!=,===.......瀏覽器

==並不表示嚴格相等，認爲 false 與 "" 表示的含義相同。app
```
false == '';
// true
```
=== 進行嚴格比較，不只比較值，並且比較變量的類型。函數
```
false === '';
// false
```
- 邏輯操做符

條件語句和循環語句

if (condions) {
    statemen}

while循環
```
while (conditions) {
    statements;
}
```
for 循環

函數與對象
- 函數：
```
function name(arguments) {
    statements;
}
```
- 對象(object)：
對象是一種很是重要的數據類型。

對象的兩種訪問形式：

屬性 Object.property
方法 Object.method()

宿主對象：在Web應用中就是由瀏覽器提供的預約義對象。

第3章：DOM

DOM：

文檔：D (document)
對象：O(object)
- 用戶定義對象
- 內建對象：如 Array,Math,Data等。
- 宿主對象：由瀏覽器提供的對象。
模型: M(model)

節點(node)：

元素節點
文本節點
屬性節點

獲取元素：

getElementById
getElementsByTagName
getElementsByClassName

獲取屬性：

getAttribute

設置屬性：

setAttribute

第4章：案例研究：JavaScript圖片庫

介紹了 DOM 提供的幾個新屬性：

childNodes
nodeType
nodeValue
firstChild
lastChild

第5章：最佳實戰

平穩退化

平穩退化(graceful degradation)：正確使用 JavaScript 腳本，可讓訪問者在他們的瀏覽器不支持 JavaScript 的狀況下仍然能順利地瀏覽你的網站。
不能平穩退化會影響你的網頁在搜索引擎上的排名。

"javascript:" 僞協議：這種作法很是很差
- 真協議：用來在因特網上的計算機之間傳輸數據包，如HTTP協議(http://)、FTP協議(ftp://)等。
- 僞協議：非標準化的協議。
```
// 用"javascript:" 僞協議調用 popUp()函數：
<a href="javascript:popUp('http://www.example.com/');">Example</a>
```
內嵌的事件處理函數
```
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>
```
很是很差，由於#只是建立了一個空連接。
平穩退化辦法：將 href 屬性設置爲真實存在的 URL 地址，讓它成爲一個有效的連接。
```
<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>
```
這樣，即便 javascript 被禁止，這個連接也是可用的。

漸進加強

漸進加強就是用一些額外的信息層去包裹原始數據。
按照「漸進加強」原則建立出來的網頁幾乎都符合「平穩退化」原則。

結構、樣式、行爲要分離。

向後兼容

對象檢測

// 例如
if (!document.getElementById) {
    return false;
}

瀏覽器嗅探技術

經過提取瀏覽器供應商提供的信息來解決向後兼容問題。

性能考慮

儘可能少訪問DOM和儘可能減小標記
合併和放置腳本
- 推薦把 functionA.js,functionB.js,functionC.js合併到一個腳本文件中，這樣能夠減小加載頁面時發送的請求數量。
- 把 <script>標籤都放到文檔的末尾</body>標記以前。由於位於<head>中的腳本會致使瀏覽器沒法並行加載其餘文件。
壓縮腳本
- JSMin(http://javascript.crockford.c...)
- YUI Compressor

第6章：案例研究：圖片庫改進版

共享onload事件：`addLoadEvent()`函數

須要多個函數都在頁面加載時執行。addLoadEvent只有一個參數：打算在頁面加載完畢時執行的函數的名字。

把現有的 window.onload 事件處理函數的值存入變量 oldonload;
若是這個處理函數上尚未綁定任何函數，就像平時那樣把新函數添加給它；
若是這個處理函數上已經綁定了一些函數，就把新函數追加到現有指令的末尾。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function (){
            oldonload();
            func();
        }
    }
}

第7章動態建立標記

動態添加

注意：用 document.createElement建立一個空白的p元素，想在p元素內部添加內容，實際上內容也是一個文本節點，因此應該 document.createTextNode建立一個文本節點，再用 .appendChild添加到p節點中。

window.onload = function () {
    var testdiv = document.getElementById("testdiv");
    var para = document.createElement("p"); // 建立 p 元素節點
    var txt1 = document.createTextNode("This is"); // 建立 文本節點
    var em = document.createElement("em"); // 建立 em 元素節點
    var txt2 = document.createTextNode("content."); // 建立 文本節點
    var txt3 = document.createTextNode("my "); // 建立 文本節點
    testdiv.appendChild(para); // 將 p 元素節點添加到 div 中
    para.appendChild(txt1); // 將文本節點添加到 p 元素中
    para.appendChild(em);
    para.appendChild(txt2);
    em.appendChild(txt3); // 將文本節點添加到 em 元素中
}

在現有元素後插入一個元素：insertAfter()函數

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

第8章：充實文檔的內容

把文檔裏的縮略語顯示爲一個「縮略語列表」
爲文檔裏引用的每段文獻節選生成一個「文獻來源連接」
把文檔所支持的快捷鍵線是位於分「快捷鍵清單」

第9章：CSS-DOM

給一個元素追加新的 class:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}

第10章：用JavaScript實現動畫效果

位置position
- static
- fixed
- relative
- absolute
時間
- var variable = setTimeout("function",interval)
- clearTimeout(variable)
parseInt把字符串裏的數值信息提取出來