JavaScript 解決常見的問題

初學者常見的錯誤

糾正語法與程式碼

如果你的程式碼毫無反應或瀏覽器回應某些內容「未定義（undefined）」，請檢查你是否「正確輸入」所有變數名稱，函數名稱等。

以下為常見造成問題的預設瀏覽器功能比較：

分號位置

你必須確定所有分號都放置在正確的位置。例如：

功能內容

有很多種錯誤能造成函數無法正確執行，其中一個最常見的錯誤是宣告完函數後卻從未呼叫它。舉一個例子：

function myFunction() {
  alert("這是我的功能。");
}

這段程式碼不會做任何事，直到它被呼叫，例如：

myFunction();

函數作用域

記得函數有自己的作用域——你無法從函數外部存取函數內部宣告的變數，除非你將該變數設為全域變數（也就是不在任何函數內部），或是回傳變數的值。

在 return 敘述後執行語法

同樣記得當你把一個值從函數回傳出去後，JavaScript 編譯器便離開該函數——在 return 敘述之後的程式碼皆不會執行。

其實，當有程式碼出現在 return 敘述後時，某些瀏覽器會在開發人員工具的主控台中顯示 error 訊息，像是 Firefox 瀏覽器會顯示「unreachable code after return statement」。

物件表示法與正確的指定

通常當你在 JavaScript 指定某個值給一個變數時，你只會用到一個等號，例如：

const myNumber = 0;

然而，這在物件裡是行不通的——此時你需要用冒號區隔物件成員的名稱與值，再用逗號區隔每個成員，例如：

const myObject = {
  name: "Chris",
  age: 38,
};

基本定義

• 什麼是 JavaScript？
• 什麼是變數？
• 什麼是字串？
• 什麼是陣列？
• 什麼是迴圈？
• 什麼是函數？
• 什麼是事件？
• 什麼是物件？
• 什麼是 JSON？
• 什麼是 Web API？
• 什麼是 DOM？

基本使用例子

概括

• 如何將 JavaScript 加到網頁裡？
• 如何在 JavaScript 裡新增註解？

變數

• 如何宣告變數？
• 如何初始化變數的值？
• 如何改變變數的值？（更多請看指定運算子）
• JavaScript 有哪些資料型態？
• 「弱型別」是什麼意思？

數學運算

• 網路開發需要處理哪些型態的數字？
• 如何在 JavaScript 中進行基本數學運算？
• 什麼是運算次序，以及它在 JavaScript 中是如何運作的？
• 如何在 JavaScript 中遞增與遞減值？
• 如何在 JavaScript 比較不同的值？（例如比較哪一個值比較大，或是比較該值是否等同於另一個值）

字串

• 如何在 JavaScript 中建立字串？
• 要使用單引號還是雙引號？
• 如何在字串中處理跳脫字元？
• 如何串接字串？
• 可以將字串和數字串接在一起嗎？
• 如何獲得字串長度？
• 如何獲得位於字串特定位置的字元？
• 如何從字串裡找到並擷取指定子字串？
• 如何改變字串大小寫？
• 如何替換指定子字串？

陣列

• 如何建立陣列？
• 如何存取與修改陣列元素？（此篇文章包含多維陣列）
• 如何獲得陣列長度？
• 如何新增與移除陣列元素？
• 如何將字串分割成陣列元素，或將陣列元素串接成字串？

JavaScript 除錯

• 有哪些 error 的基本型態？
• 什麼是瀏覽器開發人員工具以及如何獲取？
• 如何在 JavaScript 主控台輸出一個值？
• 如何使用中斷點及其它 JavaScript 除錯功能？

欲獲得更多 JavaScript 除錯相關資訊，參閱處理 JavaScript 常見問題；此外，參閱其它常見 error 以了解常見 error。

程式碼的條件判斷

• 如何基於變數的值或其它條件來執行不同程式碼區塊？
• 如何使用 if ...else 敘述？
• 如何置入巢狀條件區塊？
• 如何在 JavaScript 使用運算子「且」、「或」與「非」？
• 如何方便地基於一個條件處理大量決定？
• 如何使用三元運算子來在基於 true 或 false 判斷的兩個選項間快速決定

循環/迭代

• 如何一遍一遍地重覆執行相同的程式碼片段？
• 如何在滿足特定條件時提前離開迴圈？
• 如何在滿足特定條件時跳到下一次迴圈？
• 如何使用 while 與 do ... while 迴圈？
• 如何遍歷陣列元素？
• 如何遍歷多維陣列元素？
• 如何遍歷物件成員？
• 如何遍歷陣列中物件的成員？

進階使用例子

函數

• 如何在瀏覽器裡找到函數
• 函數（function）與方法（method）的區別是什麼？)
• 如何創建自己的函數？
• 如何執行（呼叫）一個函數？
• 什麼是匿名函數？
• 如何在呼叫函數時指定參數？
• 什麼是函數作用域？
• 什麼是回傳值以及如何利用它？

物件

• 如何創建物件？
• 什麼是點記法（dot notation）？
• 什麼是括弧記法（bracket notation）？
• 如何獲取與設定物件方法與屬性？
• 這個 this 是什麼？
• 什麼是物件導向？
• 什麼是建構子與實例以及如何創建？
• 有哪些創建 JavaScript 物件的方式？

JSON

• 如何建構 JSON 資料並從 JavaScript 讀取？
• 如何在網頁中載入 JSON 檔案？
• 如何把 JSON 物件轉換成字串以及轉換回去？

事件

• 什麼是事件處理器以及如何使用？
• 什麼是行內事件處理器？
• addEventListener()函數在做什麼以及如何使用？
• 我該使用哪種機制來在網頁中新增事件程式嗎？
• 什麼是事件物件以及如何使用？
• 如何阻止事件預設行為？
• 如何在巢狀元素中觸發事件？（事件傳遞機制：事件冒泡與捕獲）
• 什麼是事件指派以及如何運作？

JavaScript 物件導向

• 什麼是物件原型？
• 什麼是建構子屬型以及如何使用？
• 如何在建構子中新增方法？
• 如何新增一個繼承了父建構子成員的新建構子？
• JavaScript 中什麼時候該使用繼承？

網頁 Web API

• 如何使用 JavaScript 操控 DOM（例如新增或移除元素）？