JavaScript 解決常見的問題

以下連結針對你需要修復的常見問題提供解決方案,以便讓你的 JavaScript 正確執行。

初學者常見的錯誤

糾正語法與程式碼

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

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

正確 錯誤
getElementsByTagName() getElementbyTagName()
getElementsByName() getElementByName()
getElementsByClassName() getElementByClassName()
getElementById() getElementsById()

分號位置

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

正確 錯誤
elem.style.color = 'red'; elem.style.color = 'red;'

功能內容

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

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

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

js
myFunction();

函數作用域

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

在 return 敘述後執行語法

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

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

物件表示法與正確的指定

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

js
const myNumber = 0;

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

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

基本定義

基本使用例子

概括

變數

數學運算

字串

陣列

JavaScript 除錯

程式碼的條件判斷

循環/迭代

進階使用例子

函數

物件

JSON

事件

JavaScript 物件導向

網頁 Web API