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 是用來操作平臺或者運行平臺上頁面的工具，它構成了 JS 核心的語法基礎，
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="https://www.cnblogs.com/jackpotmxx/p/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: 錯誤出現時，轉到錯誤所在的行觀察是否能發現問題所在，記住，錯誤不一定在那一行，甚至可能是由某個不相關的問題造成的！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179490.html
標籤：JavaScript
上一篇：松軟科技web課堂:JavaScript Math 物件
下一篇：js 獲取陣列最后一個元素