JavaScript 基礎入門 JavaScript 的組成 JS 由三部分組成，它們分別是：ECMAScript、DOM、BOM. ECMAScript 因為網景開發了JavaScript，一年後微軟又模仿JavaScript開發了JScript，為了讓JavaScript成為全球標準，幾個公司聯 ...
JavaScript 基礎入門
JavaScript 的組成
JS 由三部分組成，它們分別是：ECMAScript、DOM、BOM.
ECMAScript
因為網景開發了JavaScript，一年後微軟又模仿JavaScript開發了JScript，為了讓JavaScript成為全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定製了JavaScript語言的標準，被稱為ECMAScript標準。
DOM
文檔對象模型（Document Object Model）。DOM把整個頁面映射成一個多層節點結構。HTML 頁面組成都是某種類型的節點，這些及節點又包含著不同類型的數據。
BOM
瀏覽器對象模型（Browser Object Model）。可以訪問瀏覽器視窗的 BOM，對瀏覽器視窗進行操作。
ECMAScript、DOM、BOM 之間的關係
ECMAScript是用來操作平臺或者運行平臺上頁面的工具
DOM是運行在平臺上的頁面
BOM是運行平臺，BOM的規則(語法)是建立在ECMAScript的規則之上
JavaScript 和 ECMAScript 規範
JavaScript 的標準化組織是 ECMA ——這個歐洲信息與通信系統標準化協會提供基於 Javascript 的標準化方案（ECMA 原先是歐洲電腦製造商協會的首字母縮寫）。這種標準化版本的 JavaScript 被稱作 ECMAScript，在所有支持該標準的應用中以相同的方式工作。公司可以使用開放標準語言來開發他們自己的 JavaScript 實現版本。ECMAScript 標準在ECMA－262規範中進行文檔化。
ECMA-262 標準也通過了 國際標準化組織（ISO）的 ISO-16262。你可以在這裡找到該規範文件。 ECMAScript 規範並沒有描述文檔對象模型（DOM），該模型由 萬維網聯盟（W3C） 制定。DOM 定義了HTML文件對象被腳本操作的方法。
JavaScript 文獻 和 ECMAScript 規範
ECMAScript 規範是實現 ECMAScript 的一組需求;如果你想在 ECMAScript 實現或引擎(如Firefox 中的 SpiderMonkey 或 Chrome 中的 V8)中實現符合標準的語言特性，那麼它是非常有用的。
ECMAScript 文檔不是用來幫助腳本程式員的;使用 JavaScript 文檔獲取關於編寫腳本的信息。
ECMAScript 規範使用了 JavaScript 程式員可能不熟悉的術語和語法。儘管 ECMAScript 中對語言的描述可能有所不同，但語言本身保持不變。JavaScript 支持 ECMAScript 規範中列出的所有功能。
JavaScript 文檔描述了適合 JavaScript 程式員的語言方面。
JavaScript 代碼位置
內部 JavaScript
1 <script> 2 // 在此編寫 JavaScript 代碼 3 </script>
內部 JavaScript 通常寫在 </body> 後面；或者<body></body>裡面；再或者寫在<head></head>中，比如：
1 <head> 2 window.onload = function () { 3 // 在此編寫 JavaScript 代碼 4 } 5 </head>
推薦將 JS 代碼寫在</body>後面或者<head>標簽中。因為如果將 JS 代碼寫在<body>中，那麼當瀏覽器載入時，會按照從上到下的順序解析代碼，載入完 JS 代碼時，HTML 還沒有載入，會破壞頁面的渲染效果，JS 代碼無法實現與 HTML 的交互行為。
外部 JavaScript
將外部的 JS 文件引入當前頁面，類似於引入外部 CSS 文件，代碼如下：
1 <script src="script.js"></script>
這種方式是最好的，優點如下：
1. 可維護性：遍及不同 HTML 頁面的 JavaScript 會造成維護問題，但把所有 JS 文件都放在一個文件夾中維護起來就輕鬆多了。而且開發人員因為也能夠在不觸及 HTML 標記的情況下集中精力編寫 JS 代碼
2. 可緩存：瀏覽器能夠根據具體的設置緩存鏈接的所有外部 JS 文件，也就是說，如果有2個頁面都使用同一個文件，那麼這個文件只需下載一次。因此，最終結果就是能夠加快頁面載入速度。
3. 適應未來：通過外部文件包含 JS 無需使用 XHTML 或 hack 註釋。HTML 和 XHTML 包含外部文件的語法是相同的。
內聯 JavaScript 處理器
示例：
1 <button onclick="createParagraph()">點我呀</button>
強烈不推薦這樣編寫 JS 代碼，這將使 JavaScript 污染到 HTML，而且效率低下。
這三者中，一般在練習中使用內部 JavaScript，實際開發中使用 外部 JavaScript，幾乎不使用 內聯 JavaScript 處理器。
JavaScript 中的大小寫
JS 是區分大小寫的，並使用 Unicode 字元集。如：
var a = 10; var A = 11; console.log(a); console.log(A); /* 結果為 10 11 由此可見，a 和 A 並不是同一個變數 */
JavaScript 中的註釋
就像 HTML 和 CSS，JavaScript 代碼中也可以添加註釋，瀏覽器會忽略它們，註釋只是為你的同事（還有你，如果半年後再看自己寫的代碼你會說，這是什麼垃圾玩意。）提供關於代碼如何工作的指引。註釋非常有用，而且應該經常使用，尤其在大型應用中。註釋分為兩類：
在雙斜杠後添加單行註釋，比如：
// 啦啦啦，我是註釋~~~
在 /* 和 */ 之間添加多行註釋，比如：
/* 多行註釋1 多行註釋2 多行註釋3 */
JavaScript 代碼執行順序
當瀏覽器執行到一段 JS 代碼時，通常會按照 從上到下，從左往右 的順序執行代碼。比如：
1 var a = 10; 2 var b = 11; 3 console.log(a); 4 console.log(b); 5 console.log(a + b); 7 /* 8 控制台顯示的結果為： 9 10 10 11 11 21 12 */
JavaScript 語句
JS 當中的語句表示 JS 向宿主環境發送的命令。
例如下麵的語句是向控制臺中輸出計算 10 + 2 的結果。
console.log(10 + 2); // 在每一條語句的後面都帶有一個分號，表示語句結束
當然 JS 允許我們將分號省掉，但是無論是從代碼的維護成本還是其他因素考慮，都不建議將每條語句後面的分號省略掉。
需要註意的是，如果分號前面的語句為空，則沒有意義。
JavaScript 的輸出方式
通常使用的有兩種輸出方式
// 第一種 console.log(); // 第二種 document.write();
console.log(); 是將數據輸出到瀏覽器的控制臺中，一般用來調試 JS 代碼
document.write(): 是將數據輸出到網頁的頁面中，此方式可以直接解析標簽。如：
document.write(<strong>內容</strong>);
我們通常將 console.log(); 這種輸出代碼的形式稱之為 代碼列印
並且，我們一般使用 console.log(); 來列印數據 而不是 document.write(); ，因為後者會影響頁面佈局，某些情況下，後者甚至會覆蓋頁面。
JavaScript 中的表達式
一般情況下，表達式需要得到一個結果
例如 11 + 3 就是一個表達式，我們在創建這個表達式的時候，就希望得到 11 + 3 的結果
console.log(11 + 3); // 將 11 + 3 的結果 列印到瀏覽器的控制臺中
JavaScript 的彈窗
JS 中的彈窗有三種方式，它們分別是：
// 第一種，警告對話框，只有確認鍵 alert(); // 沒有返回值，返回 undefined; 不同的瀏覽器，顯示不同 // 第二種，模態對話框(確認框)，有確認件和取消鍵 confirm(); // 返回 Boolean 類型：true、false 表示選擇確定還是取消 // 第三種，對話框，對話框中包含一條文字信息，用來提示用戶輸入文字,有確認鍵和取消鍵以及輸入框 prompt(); // 如果文本輸入框中為空,則返回一個空字元串，如果用戶點擊"取消"按鈕，則返回null
註意事項：
alert 對話框使用在無需用戶確認的情況下,否則應該使用其他類型的對話框
confirm 對話框是彈出式，直到這個對話框被點擊後, 後面的腳本才會運行. 請勿濫用此功能
prompt 和 alert 以及類似的對話框都是模態視窗，它們會阻止用戶激活程式其他部分的界面，直到該對話框關閉。因此，你不應該過度使用該方法。
查找並解決 JavaScript 代碼的錯誤
錯誤類型
一般來說，代碼錯誤主要分為兩種：
語法錯誤：代碼中存在拼寫錯誤，將導致程式完全或部分不能運行，通常你會收到一些出錯信息。只要熟悉語言並瞭解出錯信息的含義，你就能夠順利修複它們。
邏輯錯誤：有些代碼語法雖正確，但執行結果和預期相悖，這裡便存在著邏輯錯誤。這意味著程式雖能運行，但會給出錯誤的結果。由於一般你不會收到來自這些錯誤的提示，它們通常比語法錯誤更難修複。
解決 BUG 的方法
以下是幾種常見的 bug 形式
有報錯
當在控制臺中看到報錯信息時，我們要觀看它報的什麼錯，一般來說，我們可以很直觀的看到報錯信息。如：
Cannot set property 'onclick' of null // 不是onc1ick為nu11，是onclick不能加給nu1l xxx is not defined // xxx 未定義
有報錯但是代碼沒有問題
解決方法：反向查找
發生這種情況時，我們要觀看報錯信息，如果在報錯信息中沒有找到來源，我們要根據報錯的變數，向上逐步查找來源，如果沒有找到，那就繼續向上查找。
沒有報錯，沒有結果
解決方法：反向查找
解決方法：
解決 bug 的通用方式
使用 console.log("1");
將 console.log("1"); 逐行使用，哪行代碼列印不出來，哪行就出現了問題(最好的方式是，將 "1" 換位當前測試行的變數名，同時，變數名不要手寫，而是將當前變數名 copy 一下)
定位 bug 信息的工具(工具幫助找到定位 bug 的信息)
打斷點：讓瀏覽器逐行執行代碼
1. 使用 JS 提供的關鍵字：debugger (debugger要配合控制台使用)
2. 使用瀏覽器提供的控制台 sources，在 sources 選項中找到要需要斷點的文件，點擊要進行斷點的行號，之後一步步執行。
以下有幾種常見的錯誤類型
SyntaxError: missing ; before statement (語法錯誤：語句缺少分號)
這個錯誤通常意味著你漏寫了一行代碼最後的分號，但是此類錯誤有時候會更加隱蔽。例如如果我們把 checkGuess() 函數中的這一行 :
let userGuess = Number(guessField.value); // 改成 let userGuess === Number(guessField.value);
將拋出一個錯誤。因為系統認為你在做其他事情。請不要把賦值運算符（=，為一個變數賦值）和嚴格等於運算符（===，比較兩個值是否相等，返回 true/false）弄混淆。
SyntaxError: missing) after argument list (語法錯誤：參數表末尾缺少括弧)
顧名思義：此錯誤通常意味著 函數 or 方法 調用或的結束括弧忘寫了。
SyntaxError: missing: after property id (語法錯誤：屬性 ID 後缺少冒號)
JS 對象的形式有錯時通常會導致此類錯誤，如：
function checkGuess() { //寫成了 function checkGuess( {
瀏覽器會認為我們試圖將函數的內容當作參數傳回函數。寫圓括弧時要小心！
SyntaxError: missing} after function body (語法錯誤：函數末尾缺少花括弧)
通常意味著函數或條件結構中丟失了一個花括弧。如果我們將 checkGuess() 函數末尾的花括弧刪除，就會得到這個錯誤。
SyntaxError: expected expression, got'string' (語法錯誤：得到一個 'string' 而非表達式)
↑↑↑↑↑↑ 或者 ↓↓↓↓↓↓
SyntaxError: unterminated string literal (語法錯誤：字元串字面量未正常結束)
這個錯誤通常意味著字元串兩端的引號漏寫了一個。如果你漏寫了字元串開始的引號，將得到第一條出錯信息，這裡的 'string' 將被替換為瀏覽器發現的意外字元。如果漏寫了末尾的引號將得到第二條。
Notes: 錯誤出現時，轉到錯誤所在的行觀察是否能發現問題所在。記住，錯誤不一定在那一行，甚至可能是由某個不相關的問題造成的！
