學習筆記：MDN的JavaScript

JavaScript 第一步

什麼是JavaScript？

每次當你瀏覽網頁時不僅是顯示靜態信息—— 顯示即時更新的內容， 或者交互式的地圖，或 2D/3D 圖形動畫，又或者自動播放視頻等，你能夠確信，JavaScript 參與其中。

HTML是一種標記語言，用來結構化咱們的網頁內容和賦予內容含義，例如定義段落、標題、和數據表,或在頁面中嵌入圖片和視頻。

CSS 是一種樣式規則語言，咱們將樣式應用於咱們的 HTML 內容， 例如設置背景顏色和字體，在多個列中佈局咱們的內容。

JavaScript 是一種編程語言，容許你建立動態更新的內容，控制多媒體，圖像動畫，和一些其餘的東西。好吧，雖然不是一切，可是它的神奇之處是你可以用幾行JavaScript代碼就能實現。

JavaScript 語言的核心包含一些廣泛的編程特色，以讓你能夠作到以下的事情：

• 在變量中儲存有用的值。好比，咱們用prompt請求輸入一個新的名字，而後把那個名字儲存到一個叫 name 的變量.
• 對一段文本（在編程中被稱爲「字符串」）進行操做。在上面的例子中，咱們取出字符串 "Player 1: "，而後把它和 name 變量連結起來，創造出完整的文本標籤，例：''Player 1: Chris"。
• 運行代碼以響應在網頁中發生的特定事件。在上述的例子中，咱們用了一個 click 事件來檢測按鈕何時被點擊，而後運行更新文本標籤的代碼。
• 以及更多！

然而更使人興奮的是創建在 JavaScript 語言的核心之上的功能。在你的 JavaScript 代碼裏，被稱爲應用程序編程接口 [Application Programming Interfaces (APIs)] 的功能會提供額外的超能力給你使用。

APIs 是已經創建好的一套代碼組件，目的是讓開發者能夠實現除了用APIs以外很難甚至不可能實現的程序。它們的做用就像是已經制做好的傢俱套件對家居建設的做用同樣——從一堆已經切好的木板開始組裝一個書櫃，顯然比本身設計，尋找合適的木材，裁切至合適的大小和形狀，找到合適大小的螺絲釘，而後組裝成一個書櫃要簡單得多。

APIs一般分紅兩個分類：

瀏覽器 APIs (Browser APIs) 已經安裝在你的瀏覽器中，並且可以從周圍的計算機環境中揭露數據，或者作有用的復瑣事情。舉個例子：

• 文檔對象模型 API [DOM (Document Object Model) API] 容許你操做 HTML 和 CSS，建立，移除和修改 HTML，動態地應用新的樣式到你的頁面，等等。好比說每次你在一個頁面裏看到一個彈出窗口，或者顯示一些新的內容，這就是 DOM 在運做。
• 地理定位 API [Geolocation API] 獲取地理信息。這就是爲何谷歌地圖能夠找到你的位置，並且標示在地圖上。
• 畫布 [Canvas] 和 WebGL APIs 容許你建立生動的 2D 和 3D 圖像。人們正運用這些網頁技術進行一些使人驚歎的事情——好比說 Chrome Experiments 和 webglsamples。
• 音像和影像 APIs [Audio and Video APIs]，像 HTMLMediaElement 和 WebRTC 容許你運用多媒體去作一些很是有趣的事情，好比在網頁中播放音像和影像，或者從你的網頁攝像頭中獲取獲取錄像，而後在其餘人的電腦上展現。

第三方 APIs (Third party APIs)（這些 APIs 是高級的） 默認是沒有安裝到瀏覽器中的，而你一般須要從網絡上的某些地方取得它們的代碼和信息。舉個例子：

• 推特 API [Twitter API] 容許你作一些像是在你的網站上展現你的最新推送之類的事情。
• 谷歌地圖 API [Google Maps API] 容許你去嵌入定製的地圖到你的網站，和其餘的功能。

在 HTML 和 CSS 已經被集合和組裝成一個網頁後，瀏覽器的 JavaScript 引擎執行 JavaScript。這保證了當 JavaScript 開始運行時，網頁的結構和樣式已經在該出現的地方了。這是一個好事情，正如 JavaScript 的廣泛用處是經過 DOM API（如以前說起的那樣）動態地修改 HTML 和 CSS 來更新用戶交界面。若是 JavaScript 在 HTML 和 CSS 加載完成以前加載運行，那麼會發生錯誤。

每一個瀏覽器標籤自己就是一個用來運行代碼的分離的容器（這些容器用專業術語稱爲「運行環境」）——這意味着在大多數狀況中，每一個標籤中的代碼是徹底分離地運行，並且在一個標籤中的代碼不能直接影響在另外一個標籤中的代碼——或者在另外一個網站中的。這是一個好的安全措施——若是不是這樣的話，那麼海盜們就能夠開始寫從其餘網站偷取信息的代碼，和其餘像這樣的壞事。注意：有安全的方式去在不一樣網站/標籤中傳送代碼和數據，但這些方法是高級的技術。

當瀏覽器遇到一塊 JavaScript 代碼時，它一般會按順序運行這代碼塊，從上往下。這意味着你須要注意你放置代碼的順序。

在編程環境中，你或許據說過這兩個術語 解釋 [interpreted] 和 編譯 [compiled]。JavaScript 是一個解釋語言——代碼從上到下運行，而運行的結果會立刻被返回。在瀏覽器運行代碼前，你沒必要先把它轉化爲其餘形式。另外一方面來講，編譯語言則須要在運行前轉化爲另外一種形式。好比說 C/C++ 則要先被編譯成彙編語言，而後再由電腦運行。

客戶端[client-side]代碼是在用戶的電腦上運行的代碼——當瀏覽一個網頁時，這個網頁的客戶端代碼就會被下載，而後由瀏覽器來運行和展現。在另外一方面，服務器端[server-side]代碼則在服務器上運行，而後它的結果會由瀏覽器進行下載和展現。JavaScript也是流行的服務器端網頁語言！JavaScript 同時也能用做服務器端語言，好比說在流行的 Node.js 環境中。

JavaScript 是區分大小寫的，並且很是的講究。

把 JavaScript 放置在一個外部文件中，對於規劃你的代碼來講，這一般是一件好事，讓它能夠在多個 HTML 文件中重複使用，再加上 HTML 中沒有一大堆腳本的話，HTML 會更容易閱讀。請不要內聯JavaScript到HTML。這是一個用 JavaScript 來污染你的 HTML 的壞實踐，並且它還不高效——你會須要在每一個想要 JavaScript 應用到的按鈕上包含 onclick="createParagraph()" 屬性。使用一個純 JavaScript 結構容許你使用一個指令來應用於全部的按鈕，不管頁面上有多少個，和有多少個按鈕被添加或者移除。不須要對 JavaScript 進行任何修改。

JavaScript的註釋方式和C++同樣，有兩種（CSS只有C++的其中一種，HTML也是一種，但和C++的不同）。

進入JavaScript的第一課

像程序員同樣思考。

您可使用關鍵字var以及變量的名稱建立一個變量。

函數Window.alert：即警告。彈出警告窗口。

===：Strict equality (is it exactly the same?)

!==：Non-equality (is it not the same?)

您可能會看到有些人在他們的代碼中使用==和!=來平等和不相等，這些都是JavaScript中的有效運算符，但它們與===/!==不一樣，前者測試值是否相同， 可是數據類型可能不一樣，然後者的嚴格版本測試值和數據類型是否相同。 嚴格的版本每每致使更少的錯誤，因此咱們建議您使用這些嚴格的版本。

小於等於和大於等於都只有一個等號，而不是兩個。

事件（Events）是瀏覽器中發生的動做，例如點擊按鈕，加載頁面或播放視頻，咱們能夠調用代碼來響應。偵聽事件發生的構造方法稱爲事件監聽器，響應事件觸發而運行的代碼塊被稱爲事件處理器。

注意，當函數做爲事件監聽方法的參數時，函數名後不該帶括號。

In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced. The built-in objects that your browser contains allow you to do lots of useful things.

For example, we first created a guessField variable that stores a reference to the text input form field in our HTML(To get this reference, we used the querySelector() method of the document object).

Because guessField now contains a reference to an <input> element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects).

頁面上的每一個元素都有一個style屬性，它自己包含一個對象，其屬性包含應用於該元素的全部內聯CSS樣式。 這容許咱們使用JavaScript在元素上動態設置新的CSS樣式。

什麼地方出了錯？

瀏覽器的控制檯能夠檢查JavaScript是否有語法錯誤並提示錯誤信息。有的錯誤要和網頁交互後控制檯才能提示，好比錯誤在函數內部發生，相對於函數外部的代碼，函數內部的代碼運行在一個獨立的範圍中，在這種狀況下，頁面加載時函數內部的代碼不會被運行也不會拋出異常。

console.log() is a really useful debugging function that prints a value to the console. log是日誌的意思。

如何存儲你須要的信息—變量

變量是用來存儲數值的，那麼有一個重要的概念須要區分。變量不是數值自己，它們僅僅是一個用於存儲數值的容器。你能夠把變量想象成一個個用來裝東西的紙箱子。

在JavaScript中，全部代碼指令都會以分號結尾 (;) — 若是忘記加分號，雖然瀏覽器的JS引擎會幫你加上，但不必定可靠，因此最好是養成主動以分號做爲代碼結尾的習慣。

變量名不要如下劃線開頭—— 如下劃線開頭的被某些JavaScript設計爲特殊的含義，所以可能讓人迷惑。

一個可靠的命名約定叫作 "小寫駝峯命名法"，用來將多個單詞組在一塊兒，小寫整個命名的第一個字母而後大寫剩下單詞的首字符。

與其餘編程語言不一樣，在 JavaScript 中你不須要聲明一個變量的類型，由於JavaScript是一種「鬆散類型語言」。

字符串是文本的一部分。當你給一個變量賦值爲字符串時，你須要用單引號或者雙引號把值給包起來，二者之間幾乎沒有什麼區別，根據我的偏好來使用。可是，您應該選擇一個並堅持使用它。

數組是一個單個對象，其中包含不少值，方括號括起來，並用逗號分隔。

In programming, an object is a structure of code that models a real life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

可用對象字面量建立對象，好比var dog = { name : 'Spot', breed : 'Dalmatian' };。

JavaScript中的基礎數學—數字和操做符

Unlike some other programming languages, JavaScript only has one data type for numbers, you guessed it, Number. 這意味着，你在JavaScript中處理的任何類型的數字，都以徹底相同的方式處理它們。因此整數除以整數的結果能夠是浮點數。

A control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

運算符typeof：參數能夠是變量，返回數據類型。注意，是運算符。格式，typeof myInt;。吐槽：我無語了，這個運算符的字母o是小寫的，可是方法indexOf()的字母O倒是大寫的。

文本處理— JavaScript中的字符串

想在字符串中包含單引號（雙引號），那包裹字符串的就應該用雙引號（單引號），或者用轉義字符——反斜槓\。

字符串和數字也能用加號相連（瀏覽器會自動把數字轉換爲字符串）。

函數Number()能把字符串轉換爲數字。

方法toString()能把數字轉換爲字符串。

有用的字符串方法

咱們曾經說過，如今咱們重申一遍—在javascript中，一切東西均可以被當作對象。

When you create a string, your variable becomes a string object instance, and as a result has a large number of properties（即.XXX） and methods（即.XXX()） available to it.

您可使用方括號符號返回字符串中的字符。

屬性length：獲取字符串或數組的長度。

注意：數組也有indexOf()和slice()方法。

方法indexOf()：在字符串中查找子字符串，參數是要查找的子字符串，返回子字符串的第一個字符的下標。找不到則返回-1。吐槽：我無語了，這個方法的字母O是大寫的，可是運算符typeof的字母o倒是小寫的。

方法slice()：提取子字符串，參數是字符的下標，返回子字符串。slice()的第二個參數是可選的（表示要提取的子字符串的最後一個字符的下一個下標），若是你沒有傳入第二個參數，這個分片的結束位置會在原始字符串的末尾。

方法toLowerCase()和toUpperCase()：大小寫轉換（全部字符），不須要參數，返回轉換後的字符串。

方法replace()：將字符串中的一個子字符串替換爲另外一個子字符串，須要兩個參數 - 要被替換下的子字符串和要被替換上的子字符串，返回替換後的字符串。注意，想要真正更新變量的值，您須要設置變量的值等於返回的結果，它不會自動更新變量的值。——這樣只能替換匹配到的第一個子字符串，要想替換全部子字符串，惟一的辦法就是提供一個正則表達式。

函數和方法直觀的區別是，方法前面有「XXX.」；內在的區別是函數是通用的，而方法是屬於某一個對象的函數。

數組

Bear in mind that you can store any item in an array — string, number, object, another variable, even another array. You can also mix and match item types — they don't all have to be numbers, strings, etc, just like this: var random = ['tree', 795, [0, 1, 2]];.

字符串的方法split()：在其最簡單的形式中，須要一個參數——您要將字符串分隔的字符——並返回分隔符之間的子串，做爲數組中的項。這在技術上是一個字符串的方法，而不是一個數組的方法，可是咱們把它放在數組這裏來說，是由於它在這裏很好。

方法join()：這個是數組的方法，進行與split()相反的操做，能夠指定一個參數（不指定則默認是逗號）做爲分隔符。而若是用方法toString()，則不能指定參數，只能是逗號做爲分隔符。

方法push()和方法pop()：在數組末尾添加或刪除項目。push()的參數能夠有多個，即一次添加多個數組項，返回數組的新長度；pop()不須要參數，返回已刪除的項目。unshift()和shift()（shift意思是「去掉」）以徹底相同的方式工做，只是它們在數組的開始處，而不是結尾。

函數Math.round()：四捨五入填入括號內的參數。

 

JavaScript 基礎要件

在代碼中作決定 - 條件語句

有時候你可能會看到 if…else 語句沒有寫花括號（但要寫在同一行），這是徹底有效的代碼，但不建議這樣使用——由於若是有花括號進行代碼切割的話，總體代碼被切割爲多行代碼，更易讀和易用。即便只有一句代碼，也最好加上花括號。

Any value that is not false, undefined, null, 0, NaN, or an empty string ('') actually returns true when tested as a conditional statement. 所以您甚至可使用變量是否是未定義的（即有沒有被賦值）來做爲條件。

&& — 邏輯與

|| — 邏輯或

! — 邏輯非

Note: switch語句的default 部分（不須要break語句）不是必須的 - 若是表達式不可能存在未知值，則能夠安全地省略它。 若是有機會，您須要包括它來處理未知的狀況。

JS也有三元運算符，即XXX?XXX:XXX。

若是寫成if (x === 5 || 7)，則極可能寫錯了，本意應該是if (x === 5 || x === 7)。

循環語句

若是要在全部迭代完成以前退出循環，可使用break語句。

JS也有C++有的continue語句。

除了for語句，也有while語句和do ... while語句（後二者能作的，for語句通常也能作）。咱們建議使用for，由於它可能能最簡單地幫你記住一切 - 初始化程序，退出條件和最終表達式都必須整齊地放入括號，因此很容易看到他們在哪裏並檢查你沒有丟失他們。

無限循環的結果是要麼瀏覽器強制終止它，要麼它本身崩潰。

函數-可複用的代碼塊

JavaScript的函數的定義位置隨便在哪，在使用前或使用後都行（前提是在一個js文件中並且不能是用函數表達式定義，即要用函數聲明）。

In fact, some of the code you are calling when you invoke (a fancy word for run, or execute) a built in browser function couldn't be written in JavaScript — many of these functions are calling parts of the background browser code, which is written largely in low-level system languages like C++, not web languages like JavaScript. Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality.

Technically speaking, built-in browser functions are not functions — they are methods. The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called properties) are stored inside structured objects, to make the code more efficient and easier to handle.

匿名函數：You generally use an anonymous function along with an event handler. 你還能夠將匿名函數分配爲變量的值，但這隻會使人費解，因此不要這樣作！

主要使用匿名函數來運行負載的代碼以響應事件觸發（如點擊按鈕）。

Note:當您須要指定多個參數時，它們以逗號分隔（指JS。而CSS有點奇葩）。

若是重複定義一個變量或函數，結果固然是後定義的。

注意：函數做用域的規則不適用於循環（for（）{...}）和條件塊（if（）{...}） - 它們看起來很是類似，但它們不同！也就是說，for和if外的代碼也能夠用for和if裏面的東西。

注意：ReferenceError: "x" is not defined錯誤是您遇到的最多見的錯誤。若是您收到此錯誤，而且肯定您已經定義了該問題的變量，就請檢查它的做用域範圍。

建立您本身的函數

document.querySelector()（參數是CSS中的選擇器）：a DOM API function，用來選擇元素。而後能夠把它存放在一個變量中, 這樣方便咱們接下來使用這個元素。例子：var html = document.querySelector('html');，變量名能夠和元素名相同。注：document均可換成element，。

document.createElement()（參數是元素名）：a DOM API function，用來建立元素。而後能夠把該新建元素的引用（其實是新建對象的地址）放在一個變量中。例子：var panel = document.createElement('div');。

Element.setAttribute()（Element指引用了HTML中的元素的JS變量；第一參數是屬性，第二個參數是值）：a DOM API function，給元素添加屬性和值，若是屬性已經存在，則更新值。它能夠方便咱們給元素添加樣式。例子：panel.setAttribute('class', 'msgBox');。

Node.textContent：a property（屬性）,  represents the text content of an element — 能夠用來改變元素的文本內容。例子：var msg = document.createElement('p');msg.textContent = 'This is a message box';。和innerHTML的效果差很少。二者都爲徹底替換元素內容提供了一個更加便捷的方式。舉個例子，能夠經過以下代碼徹底刪除文檔內body的內容：document.body.innerHTML = "";或document.body. textContent = "";

Node.appendChild()（Node指引用了HTML中的元素的JS變量）：a DOM function，給變量（咱們以前定義好的）追加元素 。該方法追加了元素的同時也把元素指定爲Node的子元素 。這樣作是由於咱們建立了一個元素以後這個元素並不會莫名其妙地出如今咱們的頁面上（瀏覽器只知道咱們建立了一個元素，可是不知道把這個元素怎麼呈現出來） — 所以，咱們給這個元素一個定位，就是顯示在Node引用的HTML中的元素裏面！例子：html.appendChild(panel);，這裏的html是在JS裏定義的變量。

onclick：a property that can be set to a function to specify what code to run when the button is clicked. 能夠給 onclick 事件處理器綁定一個匿名函數, 函數中的代碼就會在元素被點擊的時候運行。onclick就像其它屬性同樣（好比textContent），只不過有一個特別的地方——當您將一些代碼賦給它的時候，只要事觸發，代碼就會運行。

Node.removeChild()：a DOM API function, 指定咱們想要移除的HTML中的子元素。至少，你要擁有要刪除的節點和其父節點的引用。例子（panel.parentNode即panel的父節點）：panel.parentNode.removeChild(panel);。另外，The ChildNode.remove() method removes the object from the tree it belongs to.

不必定要在函數聲明後面才調用函數，在C語言中確實是要先定義後使用，可是咱們如今用的是JavaScript，它很強大，無論你是先定義後調用仍是先調用後定義都行，可是別忘了定義。

btn.onclick = displayMessage;：You might be wondering why we haven't included the parentheses（括號） after the function name. This is because we don't want to call the function immediately — only after the button has been clicked. 若是加了括號，you'll see that the message box appears without the button being clicked! The parentheses in this context are sometimes called the "function invocation（調用） operator". You only use them when you want to run the function immediately in the current scope. In the same respect, the code inside the anonymous function（匿名函數） is not run immediately, as it is inside the function scope.

一個定義了兩個參數的函數，能夠只使用一個參數進行調用。

Node.style.backgroundImage、Node.style.backgroundColor、Node.style.paddingLeft（這些屬性的值都有加引號）

函數返回值

Node.value

onchange： runs whenever the change event fires.

isNaN()：判斷參數的值是否是數字。若是不是，就返回true。

事件介紹

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

Each available event has an event handler（事件處理器）, which is a block of code (usually a user-defined JavaScript function) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are registering an event handler. Note that event handlers are sometimes called event listeners（事件監聽器）——從咱們的用意來看這兩個名字是相同的，儘管嚴格地說來這塊代碼既監聽也處理事件。監聽器留意事件是否發生，而後處理器就是對事件發生作出的迴應。

注： web events不是核心 JavaScript 語言的一部分——它們是做爲瀏覽器內置的JavaScript APIs的一部分被定義的。

document.body.style.backgroundColor

理解JavaScript在不一樣環境下使用不一樣的事件模型很重要——從Web api到其餘領域，如瀏覽器WebExtensions（用於開發跨瀏覽器的插件）和Node.js(服務器端JavaScript)。

The event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments. For example, Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The Node.js event model relies on listeners to listen for events and emitters（發射器） to emit events periodically ——雖然聽起來好像差很少，可是實現二者的代碼是很是不一樣的，Node.js 使用 on ( ) 這樣的函數來註冊一個事件監聽器，使用 once ( ) 這樣函數來註冊一個在運行一次以後註銷的監聽器。

也能夠將一個有名字的函數的名字賦值給事件處理器。

有許多不一樣的事件處理器屬性（properties）可選：

btn.onfocus和btn.onblur — 代碼將於按鈕被置於焦點或解除焦點時執行。btn可換成別的。

btn.ondblclick — 代碼將僅於按鈕被雙擊時執行（不要使用dblclick執行重要的操做，由於鍵盤沒法觸發這個事件）。btn可換成別的。

window.onkeypress, window.onkeydown, window.onkeyup — 代碼將於按一下鍵、按下鍵或鬆開鍵時執行（能夠把window換成別的）。

btn.onmouseover 和 btn.onmouseout — 代碼將會在鼠標移入按鈕上方時執行, 或者當它從按鈕移出時。btn可換成別的。

不要使用內聯的事件處理器。

將您的編程邏輯與內容分離也會使您的站點對搜索引擎更加友好。

addEventListener()和removeEventListener()：addEventListener()這個函數和事件處理器屬性（properties）是相似的，可是語法略有不一樣。例子：btn.onclick = bgChange;和btn.addEventListener('click', bgChange);是等效的。若是須要，可使用removeEventListener()刪除事件處理器代碼，並且若是須要，您能夠向同一類型的元素添加多個監聽器。例如，您能夠在一個元素上屢次調用addEventListener('click', function() { ... })，而第二個參數中指定不一樣的函數。對於事件處理器屬性來講，這是不可能的，由於後面設置的屬性會覆蓋較早的屬性。

只要可能，應該用DOM Level 2 Events (addEventListener(), etc.)。

事件對象（event objects, 即參數e）：It is automatically passed to event handlers to provide extra features and information.

事件對象 e 的target屬性始終是剛剛發生的事件所在的元素的引用。您可使用任何您喜歡的名稱做爲事件對象。開發人員最常使用 e / evt / event，由於它們很簡單易記。堅持標準老是很好。當您要在多個元素上設置相同的事件處理程序時，e.target很是有用（用this不也同樣嗎，要寫的代碼還更少事件委託的狀況下不同，只能用e.target——不過注意，即便是其他狀況，this也只能代替e.target，e的別的功能代替不了）。例如，你可能有一組16塊方格，當它們被點擊時就會消失。用e.target老是能準確選擇當前操做的東西（方格）並執行操做讓它消失，而不是必須以更困難的方式選擇它。

一些瀏覽器支持自動的表單數據驗證功能，但因爲許多瀏覽器不支持，所以建議你不要依賴這些功能，並實現本身的驗證檢查。

onsubmit

document.getElementById()

e.preventDefault()：阻止默認行爲，好比表單的提交。

如何控制一個元素的顯示和隱藏？想隱藏能夠把元素放到屏幕外或者用display: none或者用visibility: none。

當一個事件發生在具備父元素的元素上時，現代瀏覽器運行兩個不一樣的階段 - 捕獲階段和冒泡階段。

在捕獲階段：

• 瀏覽器檢查元素的最外層祖先<html>，是否在捕獲階段中註冊了一個onclick事件處理程序，若是是，則運行它。
• 而後，它移動到<html>中的下一個元素，並執行相同的操做，而後是下一個元素，依此類推，直到到達實際點擊的元素。

在冒泡階段，偏偏相反：

• 瀏覽器檢查實際點擊的元素是否在冒泡階段中註冊了一個onclick事件處理程序，若是是，則運行它
• 而後它移動到下一個直接的祖先元素，並作一樣的事情，而後是下一個，等等，直到它到達<html>元素。

在現代瀏覽器中，默認狀況下，全部事件處理程序都在冒泡階段進行註冊。這在大多數狀況下更有意義。若是您真的想在捕獲階段註冊一個事件，那麼您能夠經過使用addEventListener()註冊您的處理程序，並將可選的第三個屬性設置爲true。

標準事件對象具備可用的名爲 stopPropagation()（Propagation意爲傳播）的函數, 當在事件對象上調用該函數時，它只會讓當前事件處理程序運行，但事件不會在冒泡鏈上進一步擴大，所以將不會有更多事件處理器被運行(不會向上冒泡)。

事件委託（Event delegation）：冒泡還容許咱們實現事件委託——這個概念依賴於這樣一個事實,若是你想要在大量子元素中單擊任何一個均可以運行一段代碼，您能夠將事件監聽器設置在其父節點上，並將事件監聽器氣泡的影響設置爲每一個子節點，而不是每一個子節點單獨設置事件監聽器。

一個很好的例子是一系列列表項，若是你想讓每一個列表點擊時彈出一條信息，您能夠將click單擊事件監聽器設置在父元素<ul>上，它將會冒泡到列表項上。

getAttribute()：參數爲某個Attribute，返回該Attribute的value。

 

JavaScript 對象介紹

在 JavaScript 中，大多數事物都是對象, 從做爲核心功能的字符串和數組，到創建在 JavaScript 之上的瀏覽器 API。

對象基礎

An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)

一個對於初學者很常見的錯誤是在最後一個成員後面多了一個逗號，這會引起錯誤。

一個對象由許多的成員組成，每個成員都擁有一個名字（如name、age），和一個值（如['Bob', 'Smith']、32）。每個名字/值（name/value）對被逗號分隔開，而且名字和值之間由冒號（:）分隔。成員的值能夠是函數(function)。值不是函數的成員叫屬性(property)，值是函數的成員叫方法(method)。

object literal（對象的字面量） — we've literally written out the object contents as we've come to create it.

當你想要傳輸一些有結構和關聯的資料時常見的方式是使用字面量來建立一個對象，舉例來講，發起一個請求到服務器以存儲一些數據到數據庫，發送一個對象要比分別發送這些數據更有效率，並且比起數組更爲易用，由於你使用名字(name)來標識這些資料。

The object name (如person) acts as the namespace.

除了用dot notation來訪問對象的屬性和方法，還能用bracket notation。好比，person['name']['first']和person.name.first是等價的。這看起來很像訪問一個數組的元素，從根本上來講是一回事兒，你使用了關聯了值的名字，而不是索引去選擇元素。難怪對象有時被稱之爲關聯數組(associative array)了——對象作了字符串到值的映射，而數組作的是數字到值的映射。你用dot notation和bracket notation不只更新已經存在的成員的值，還可建立新的成員。bracket notation一個有用的地方是它不只能夠動態地設置成員的值，還能夠動態地設置成員的名字，以下：

var myDataName = 'height';

var myDataValue = '1.75m';

person[myDataName] = myDataValue;

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL.

built-in API 等於 built-in object

It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.

你應該清楚對象有利於存儲一些相關聯的數據和函數，若是你嘗試以分開的方式去保存person對象包含的全部的屬性和方法，這是使人沮喪且效率低下的，並且會有不少的變量和函數之間同名的風險。對象使咱們將一些信息安全地鎖在了它們本身的包內，防止它們被損壞。

適合初學者的JavaScript面向對象

注：本節內容很是難懂，作好心理準備（可能還不如看https://www.cnblogs.com/shuiyi/p/5305435.html）

基本的 OOP 思想就是使用對象來模仿咱們想要在咱們的程序中表現的現實世界的事物, 同時提供一種簡單的方式來訪問這些事物的功能。（The basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.）

Object data (and often, functions too) can be stored neatly (the official word is encapsulated（封裝）) inside an object package (which can be given a specific name to refer to, which is sometimes called a namespace), making it easy to structure and access; objects are also commonly used as data stores that can be easily sent across the network.

abstraction（抽象） — creating a simple model of a more complex thing, which represents its most important aspects in a way that is easy to work with for our program's purposes.

在一些面向對象的語言中，咱們用類（class）的概念去描述一個對象（您在下面就能看到JavaScript使用了一個徹底不一樣的術語）-類並不徹底是一個對象，它更像是一個定義對象特質的模板。注：紅寶書說JS沒有類。

When an object instance is created from a class, the class's constructor function（構造函數，used to define objects and their features.） is run to create it. This process of creating an object instance from a class is called instantiation（實例化） — the object instance is instantiated from the class.

The fancy word for the ability of multiple object types to implement the same functionality is polymorphism（多態）.

The constructor function below is JavaScript's version of a class, 它只定義了對象的屬性和方法，沒有明確建立一個對象和返回任何值（構造函數模式）：

function Person(name) {

  this.name = name;

  this.greeting = function() {

    alert('Hi! I\'m ' + this.name + '.');

  };

}    

若是不用this，就要寫成這樣（工廠模式。注意，這不是構造函數）：

function createNewPerson(name) {

  var obj = {};

  obj.name = name;

  obj.greeting = function () {

    alert('Hi! I\'m ' + this.name + '.');

  }

  return obj;

}

因此，this能簡化構造函數的編寫。

Note: A constructor function name usually starts with a 大寫字母 — this convention（慣例） is used to make constructor functions easier to recognize in code.

那如何調用構造函數建立新的實例呢？答：var person1 = new Person('Bob'); 。the new keyword is used to tell the browser we want to create a new object instance.

When we are calling our constructor function, we are defining greeting() every time（由於方法直接定義在了構造器函數裏而不是prototype屬性裏）, which isn't ideal. To avoid this, we can define functions on the prototype（原型） instead, which we will look at later.

同一個構造函數建立出的不一樣實例被存儲在不一樣的命名空間裏。

Sub-namespaces: It is possible to make the value of an object member another object（即對象中的對象）.

So far we've seen two different ways to create an object instance— declaring an object literal, and using a constructor function（上面還提到第三種，工廠模式）. These make sense, but there are other ways — we want to make you familiar with these in case you come across them in your travels around the Web.

The Object() constructor: You can use the Object() constructor to create a new object. Yes, even generic objects have a constructor, which generates an empty object. 例子：var person1 = new Object();

Using the create() method: Some people prefer to create object instances without first creating constructors, especially if they are creating only a few instances of an object. JavaScript has a built-in method called create() that allows you to do that. With it, you can create a new object based on any existing object. 例子： var person2 = Object.create(person1);

Object prototypes

Prototypes are the mechanism（機制） by which JavaScript objects inherit features from one another. The prototype property can be used to add methods to existing constructors.

JavaScript is often described as a prototype-based language — each object has a prototype object, which acts as a template object that it inherits methods and properties from. An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain（原型鏈）.

To be exact, the properties and methods are defined on the prototype property on the Objects' constructor functions, not the object instances themselves.

It's important to understand that there is a distinction between an object's prototype and the prototype property on constructor functions. The former is the property on each instance, and the latter is the property on the constructor. That is, Object.getPrototypeOf(new Foobar()) refers to the same object as Foobar.prototype.

舉個栗子：person1's prototype object is the Person() (Person() is the constructor). person1中除了有在原型對象Person()中定義的成員外，還有一些其它成員，they are defined on the Person() 's prototype object, which is Object. 就像下圖所示：

 

 

What happens if you call a method on person1, which is actually defined on Object? For example:

person1.valueOf()

This method simply returns the value of the object it is called on — try it and see! In this case, what happens is（當js引擎查找對象的屬性或方法時，先在對象自己上找（但不會在對象的prototype屬性中找），找不到就順着原型鏈、在原型鏈上的對象的prototype屬性中找）:

• The browser initially checks to see if the person1 object has a valueOf() method available on it.
• It doesn't, so the browser then checks to see if the person1 object's prototype object (Person() constructor's prototype) has a valueOf() method available on it.
• It doesn't either, so the browser then checks to see if the Person() constructor's prototype object's prototype object (Object() constructor's prototype) has a valueOf() method available on it. It does, so it is called, and all is good!

Note: 必須重申，原型鏈中的方法和屬性沒有被複制到其餘對象 — they are accessed by walking up the chain as described above.

The inherited ones are the ones defined on the prototype property (you could call it a sub-namespace) — that is, the ones that begin with Object.prototype., and not the ones that begin with just Object.

Person.prototype和Object.prototype之類的是指Person、Object的prototype屬性，要指Person、Object的原型對象，則要用.__proto__

重要：prototype 屬性大概是 JavaScript 中最容易混淆的名稱之一。你可能會認爲，這個屬性指向當前對象的原型對象，其實不是（還記得麼？原型對象是一個內部對象，應當使用 __proto__ 訪問）。prototype 屬性包含（指向）一個對象，你在這個對象中定義須要被繼承的成員。

var person2 = Object.create(person1);

create() 實際作的是從指定原型對象建立一個新的對象。這裏以 person1 爲原型對象建立了 person2 對象。在控制檯輸入：person2.__proto__結果返回 person1 對象。

每一個對象實例都具備 constructor 屬性，它指向建立該實例的構造器函數。

person1.constructor和person2.constructor都將返回 Person() 構造器，由於該構造器包含這些實例的原始定義。一個小技巧是，你能夠在 constructor 屬性的末尾添加一對圓括號（括號中包含所需的參數），從而用這個構造器建立另外一個對象實例。畢竟構造器是一個函數，故能夠經過圓括號調用；只需在前面添加 new 關鍵字，便能將此函數做爲構造器使用。一般你不會去用這種方法建立新的實例；但若是你恰好由於某些緣由沒有原始構造器的引用，那麼這種方法就頗有用了。此外，constructor 屬性還有其餘用途。好比，想要得到某個對象實例的構造器的名字，能夠這麼用：instanceName.constructor.name。具體地，像這樣：person1.constructor.name。

爲構造器的 prototype 屬性添加一個新的方法，則整條繼承鏈動態地更新了，任何由此構造器建立的對象實例都自動得到了這個方法。舊有對象實例的可用功能被自動更新了。這證實了先前描述的原型鏈模型。這種繼承模型下，上游對象的方法不會複製到下游的對象實例中；下游對象自己雖然沒有定義這些方法，但瀏覽器會經過上溯原型鏈、從上游對象中找到它們。這種繼承模型提供了一個強大而可擴展的功能系統。

你不多看到屬性定義在 prototype 屬性中，由於如此定義不夠靈活。Person.prototype.fullName = this.name.first + ' ' + this.name.last;這麼作的話，this 引用的是全局範圍，而非函數範圍。訪問這個屬性只會獲得 undefined undefined（除非全局真有name這個對象和相應的屬性）。但這個語句若放在prototype屬性的方法中則不會發生這種狀況，由於此時語句位於函數範圍內，從而可以成功地轉換爲對象實例範圍。你可能會在 prototype屬性上定義常屬性 (constant property) （指那些你永遠無需改變的屬性），但通常來講，在構造器內定義屬性更好。

一種極其常見的對象定義模式是，在構造函數（constructor）中定義屬性（properties）、在 prototype 屬性上定義方法（methods）。如此，構造函數只包含屬性定義，而方法則分裝在不一樣的代碼塊，代碼更具可讀性。例如：

// 構造函數及其屬性定義

function Test(a,b,c,d) {

  // 屬性定義

};

// 定義第一個方法

Test.prototype.x = function () { ... }

// 定義第二個方法

Test.prototype.y = function () { ... }

// 等等……

JavaScript 中的繼承

栗子：

function Teacher(first, last, age, gender, interests, subject) {

  Person.call(this, first, last, age, gender, interests);

 

  this.subject = subject;

}

Teacher.prototype = Object.create(Person.prototype) //或者 new Person();

Teacher.prototype.constructor = Teacher;

每個函數對象（Function）都有一個prototype屬性，而且只有函數對象有prototype屬性，由於prototype自己就是定義在Function對象下的屬性。當咱們輸入相似var person1=new Person(...)來構造對象時，JavaScript實際上參考的是Person.prototype指向的對象來生成person1。另外一方面，Person()函數是Person.prototype的構造函數，也就是說Person===Person.prototype.constructor（不信的話能夠試試）。

在定義新的構造函數Teacher時，咱們經過function.call來調用父類的構造函數。而後咱們利用Object.create()方法將Person.prototype做爲Teacher.prototype的原型對象，並改變其構造器指向，使之與Teacher關聯。

任何您想要被繼承的方法都應該定義在構造函數的prototype對象裏，而且永遠使用父類的prototype來創造子類的prototype，這樣纔不會打亂類繼承結構。

就在本身代碼中使用繼承而言，您可能不會使用得很是頻繁，特別是在小型項目中或者剛開始學習時 - 由於當您不須要對象和繼承的時候，僅僅爲了使用而使用它們只是在浪費時間而已。可是隨着您的代碼量的增大，您會愈來愈發現它的必要性。若是您開始建立一系列擁有類似特性的對象時，那麼建立一個包含全部共有功能的通用對象，而後在更特殊的對象類型中繼承這些特性，將會變得更加方便有用。

Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called delegation.

在使用繼承時，建議您不要使用過多層次的繼承，並仔細追蹤定義方法和屬性的位置。頗有可能您的代碼會臨時修改了瀏覽器內置對象的原型，但您不該該這麼作，除非您有足夠充分的理由。過多的繼承會在調試代碼時給您帶來無盡的混亂和痛苦。

 

Ultimately（根本上）, objects are just another form of code reuse（重用）, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.（總之，對象是另外一種形式的代碼重用，就像函數和循環同樣，有他們特定的角色和優勢。若是您發現本身建立了一堆相關的變量和函數，還想一塊兒追蹤它們並將其靈活打包的話，對象是個不錯的主意。對象在您打算把一個數據集合從一個地方傳遞到另外一個地方的時候很是有用。這兩種狀況均可以在不使用構造器和繼承的狀況下完成。若是您只是須要一個單一的對象實例，也許使用對象常量會好些，您固然不須要使用繼承。）

Working with JSON

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax（JSON是一種基於文本的格式，表明結構化的數據，基於JS對象語法）.

JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data. This is not a big issue —  JavaScript provides a global JSON object that has methods available for converting between the two.

Note: Converting a string to a native object is called parsing（解析）, while converting a native object to a string so it can be transmitted across the network is called stringification（string化）.

A JSON object can be stored in its own file, which is basically just a text file with an extension of .json, and a MIME type of application/json.

A JSON is a string whose format very much resembles JavaScript object literal format. You can include the same data types inside JSON as you can in a standard JavaScript object — strings, numbers, arrays, booleans, and other object literals.

咱們使用 . 或 [] 訪問對象內的數據。

」咱們已經能夠推測出 JSON 對象就是基於JavaScript 對象，並且這幾乎是正確的「——咱們說幾乎正確的緣由是數組也是一種合法的 JSON 對象（其實數組也是JavaScript 對象）。

JSON 是一種純數據格式，它只包含屬性，沒有方法。

JSON 要求有兩頭的 { } 來使其合法。

甚至一個錯位的逗號或分號就能夠致使  JSON 文件出錯。您應該當心的檢查您想使用的數據(雖然計算機生成的 JSON 不多出錯，只要生成程序正常工做)。您能夠經過像 JSONLint 的應用程序來檢驗 JSON。

爲了載入 JSON 到頁面中，咱們將使用 一個名爲XMLHTTPRequest的API（常稱爲XHR）。這是一個很是有用的 JavaScript 對象，使咱們可以經過代碼來向服務器請求資源文件(如：圖片，文本，JSON，甚至HTML片斷)，意味着咱們能夠更新小段內容而不用從新加載整個頁面。

舉個栗子：

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

var request = new XMLHttpRequest();：爲了建立一個HTTP請求，咱們須要建立一個HTTP請求對象。

request.open('GET', requestURL);：使用 open() 函數打開一個新的請求。這個函數至少含有兩個參數，其它的是可選參數。

request.responseType = 'json'; request.send();：設定 responseType 爲 JSON，因此服務器將知道咱們想要返回一個 JSON 對象，而後發送請求。這樣作的話，就訪問 JSON 而言是簡單的，由於咱們設置了 XHR 來訪問 JSON 格式數據

request.onload = function() {

  var superHeroes = request.response;

  populateHeader(superHeroes);

  showHeroes(superHeroes);

}：這兒咱們保存了相應咱們請求的數據(訪問 response 屬性) 於變量 superHeroes ;這個變量如今含有 JSON！咱們如今把superHeroes傳給兩個函數，第一個函數將會用正確的數據填充<header>，同時第二個函數將建立一個信息卡片，而後把它插入<section>中。咱們把代碼包在事件處理函數中，當請求對象load事件觸發時執行代碼，這是由於請求對象load事件只有在接收到完整的響應數據時觸發；這種方式能夠保證事件觸發時request.response 是絕對能夠訪問的。注：populateHeader()和showHeroes()是自定義的函數。

有時候，咱們接收到一些 字符串做爲 JSON 數據，而後咱們想要將它轉換爲對象。當咱們想要發送 JSON 數據做爲信息，咱們將須要轉換它爲字符串，咱們常常須要正確的轉換數據，幸運的是，這兩個問題在web環境中是那麼廣泛以致於瀏覽器擁有一個內建的 JSON，包含如下兩個方法。

parse(): 以文本字符串形式接受JSON對象做爲參數，並返回相應的對象。。

stringify(): 接收一個對象做爲參數，返回一個對應的JSON字符串。

實踐對象構造

打開瀏覽器中的 JavaScript 控制檯後，刷新頁面，可更新F12中的盒模型數據（前提是盒模型的尺寸確實變了）。

 

客戶端網頁 API

Web API簡介

• JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as Node.
• Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily（好比DOM、BOM）.
• Third party APIs — constructs built into third-party platforms (e.g. Twitter, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your latest Tweets on your web page).
• JavaScript libraries — Usually one or more JavaScript files containing custom functions that you can attach to your web page to speed up or enable writing common functionality. Examples include jQuery, Mootools and React.
• JavaScript frameworks — The next step up from libraries, JavaScript frameworks (e.g. Angular and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you install and then use to write an entire web application from scratch. The key difference between a library and a framework is 「Inversion（倒置） of Control」. When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.

匿名函數的括號們的放置能夠像這樣：

navigator.geolocation.getCurrentPosition(function(position) {

  ……

});

僅在操做完成時調用函數的模式在JavaScript API中很是常見 - 確保一個操做已經完成，而後在另外一個操做中嘗試使用該操做返回的數據。這些被稱爲 asynchronous  「異步」操做。因爲獲取設備的當前位置依賴於外部組件（設備的GPS或其餘地理定位硬件）， we can't guarantee that it will be done in time to just immediately use the data it returns. 所以，這樣子是行不通的：

var position = navigator.geolocation.getCurrentPosition();

var myLatitude = position.coords.latitude;

若是第一行尚未返回結果（第一行是異步的），則第二行將會出現錯誤，由於位置數據還不可用。 出於這個緣由，涉及異步操做的API被設計爲使用 callback functions 「回調函數」，或更現代的 Promises 系統，這些系統在ECMAScript 6中可用，並被普遍用於較新的API。

API使用一個或多個 JavaScript objects 在您的代碼中進行交互，這些對象用做API使用的數據（包含在對象屬性中）的容器以及API提供的功能（包含在對象方法中）。

您將在許多API中看到兩種常見模式：首先，API對象一般包含構造函數，能夠調用這些構造函數來建立用於編寫程序的對象的實例。 其次，API對象一般有幾個可用的options，能夠調整以得到您的程序所需的確切環境(根據不一樣的環境,編寫不一樣的Options對象)。 API構造函數一般接受options對象做爲參數，這是您設置這些options的地方。

使用API時，應確保知道API入口點的位置。 在Geolocation API中，這很是簡單 - 它是 Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 對象，全部有用的地理定位方法均可用。文檔對象模型 (DOM) API有一個更簡單的入口點 —它的功能每每被發現掛在 Document 對象, 或任何你想影響的HTML元素的實例。

一些Web API不包含事件，但有些包含一些事件。

WebAPI功能受到與JavaScript和其餘Web技術（例如同源政策）相同的安全考慮，可是他們有時會有額外的安全機制。

Manipulating（操縱） documents

直接出如今web頁面視圖中的瀏覽器的主要部分：

• window是載入瀏覽器的標籤，使用這個對象的可用方法，你能夠返回窗口的大小（參見window.innerWidth和window.innerHeight），操做載入窗口的文檔，存儲客戶端上文檔的特殊數據（例如使用本地數據庫或其餘存儲設備），爲當前窗口綁定event handler，等等。
• navigator表示瀏覽器（即用戶代理）的狀態和身份。你能夠用這個對象獲取一些信息，好比來自用戶攝像頭的地理信息、用戶偏心的語言、多媒體流等等。
• document（在瀏覽器中用DOM表示）是載入窗口的實際頁面，你能夠用這個對象來返回和操做文檔中HTML和CSS上的信息。例如獲取DOM中一個元素的引用，修改其文本內容，並應用新的樣式，建立新的元素並添加爲當前元素的子元素，甚至把他們一塊兒刪除。

在瀏覽器標籤中當前載入的文檔用文檔對象模型來表示。這是一個由瀏覽器生成的「樹結構」，使編程語言能夠很容易地訪問HTML結構 — 例如瀏覽器本身在呈現頁面時，使用它將樣式和其餘信息應用於正確的元素，而頁面呈現完成之後，開發人員能夠用JavaScript操做DOM。文檔中每一個元素和文本在樹中都有它們本身的入口 — 稱之爲節點（node）（即節點包括元素和文本）。

要操做DOM內的元素，首先須要選擇它，並將它的引用存儲在一個變量中，栗子：var link = document.querySelector('a');——Now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like HTMLAnchorElement in the case of <a> element, its more general parent interface HTMLElement, and Node — which represents all nodes in a DOM).

注意，有不少方法能夠選擇一個元素，並在一個變量中存儲一個引用。Document.querySelector()是推薦的主流方法，它容許你使用CSS選擇器選擇元素，使用很方便。上面的querySelector()調用會匹配它在文檔中遇到的第一個<a>元素。若是想對多個元素進行匹配和操做，你可使用Document.querySelectorAll()，這個方法匹配文檔中每一個匹配選擇器的元素，並把它們的引用存儲在一個假的array（NodeList）中。querySelectorAll的結果不會動態更新。

Document.getElementById()是舊的方法，沒那麼方便，而Document.querySelector()能夠實現相同的功能。

Document.createTextNode()：建立文本節點。栗子：var text = document.createTextNode('Hi');

若是咱們想移動 the paragraph with the link inside it to the bottom of the section, we could simply do this: sect.appendChild(linkPara);This moves the paragraph down to the bottom of the section. 你可能會覺得這會建立那個段落的副本，可是並無 — linkPara 是那個段落的惟一引用。 If you wanted to make a copy and add that as well, you'd need to use Node.cloneNode() instead.

操縱樣式：可用HTMLElement.style屬性添加內聯樣式。另外一種方法，添加的不是內聯樣式：在CSS裏寫好樣式，而後在JavaScript裏用Element.setAttribute()匹配樣式。兩種方式各有優缺點，選擇哪一種取決於你本身。第一種方式簡單，第二種方式更加純粹（沒有CSS和JavaScript的混合，沒有內聯樣式這些被認爲是很差的實踐）。當你開始構建更大更復雜的應用時，你可能會更多地使用第二種方法，但這徹底取決於你本身。

注意: CSS樣式的JavaSript屬性版本以小寫駝峯式命名法書寫，而CSS樣式的CSS版本用鏈接符號（好比，backgroundColor 對 background-color）。確保你不會混淆，不然就不能工做。

目前爲止，咱們尚未作任何有用的事！使用JavaScript建立靜態內容是毫無心義的—你也能用HTML實現它，而不用JavaScript。用JavaScript實現還更復雜，並且還有其它問題，好比不會被搜索引擎獲取。

window.innerWidth和window.innerHeight是the width and height of the viewport。

window.onresize事件 : The window object has an event available on it called resize, which is fired every time the window is resized. 能夠用來實現無論視口的大小是多少，應用程序都和它所在的視口同樣大。

使用focus()方法能夠在進入頁面時自動聚焦。