From 5d6ed4d98fcc4ca83650e0648f59239909e91d09 Mon Sep 17 00:00:00 2001 From: SimonAllen Date: Mon, 16 Aug 2021 17:16:41 +0800 Subject: zh-tw Fix flaws: 1. id 參考英文版改回英文字串 2. 圖片連結修正與新增三張 zh-tw 版對應圖片 3. 修正 http 成 https 4. 將 zh-tw 缺失的三頁連結按提示改成 en-us 相對路徑 5. 修改指向同頁的連結中文名稱 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../what_went_wrong/console-log-output.png | Bin 0 -> 28967 bytes .../first_steps/what_went_wrong/index.html | 46 ++++++++++----------- .../first_steps/what_went_wrong/not-a-function.png | Bin 0 -> 30551 bytes .../what_went_wrong/variable-is-null.png | Bin 0 -> 31414 bytes 4 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png create mode 100644 files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png create mode 100644 files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png (limited to 'files') diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png new file mode 100644 index 0000000000..9e532a9a36 Binary files /dev/null and b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png differ diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html index 2b8a058524..3d108aea3b 100644 --- a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html @@ -22,7 +22,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong -

錯誤類型

+

錯誤類型

一般來說，當你的編碼有錯誤時，主要有兩種類型

@@ -33,9 +33,9 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

好的，但事情並沒有那麼單純——當你越深入，就會發現更多不同的因素。但上述的分類已經足夠應付初期的工程師職涯了。接著，我們將更深入來討論這兩個類型。

-

一個錯誤範例

+

一個錯誤範例

-

讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份number-game-errors.html（或運行線上版 running live here）。

+

讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份number-game-errors.html（或運行線上版 running live here）。

  1. 首先，在編輯器與瀏覽器分別開啟你剛下載檔案。
    2. @@ -48,12 +48,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    現在，先讓我們來看看開發者主控台有沒有提示我們任何錯誤，然後試著修正他們。你會在接下來的段落中學到如何修正這些錯誤。

    -

    修復語法錯誤

    +

    修復語法錯誤

    -

    在前篇文章中我們讓你在開發者工具JavaScript console中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：

    +

    在前篇文章中我們讓你在開發者工具JavaScript console中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：

      -
    1. 切換到你開啟了number-game-errors.html 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：
      2. +
    2. 切換到你開啟了number-game-errors.html 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：
    3. 這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是Firefox的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到：
      • 一個紅色的「X」代表這是一個錯誤訊息。
        • @@ -66,7 +66,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
      • 如果我們在編輯器中檢視第86行，我們會看到： 
        guessSubmit.addeventListener('click', checkGuess);
        • -
      • 主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn關鍵字」。為了節省時間，這裡提供你一個捷徑：addEventListener()。
        • +
      • 主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn關鍵字」。為了節省時間，這裡提供你一個捷徑：addEventListener()。
      • 回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把addeventListener 改成addEventListener 問題就解決了。現在將你的程式碼修正吧。
    @@ -74,11 +74,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    Note: 看看這個TypeError: "x" is not a function連結來了解更多有關這類錯誤的資訊。

    -

    語法錯誤：第二回合

    +

    語法錯誤：第二回合

    1. 將你的頁面存檔並重整，你現在應該會看到剛剛的錯誤消失了。
      2. -
    2. 現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！
      3. +
    3. 現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！
    4. 這次的錯誤是「TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）」，在第78行的位置。
      Note：Null是一個特別的值，代表著「空」、「什麼都沒有」。lowOrHi被宣告為一個變數，但並沒有被賦予任何有意義的值——他既沒有變數型態，也沒有值。
      @@ -94,10 +94,10 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong 
      console.log(lowOrHi);
      -

      Note:console.log() 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給lowOrHi後，將它的值印出至主控台中。

      +

      Note:console.log() 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給lowOrHi後，將它的值印出至主控台中。

      5. -
    5. 存檔並重整，你應該會在主控台中看到 console.log() 輸出的結果。在這個時間點，lowOrHi的值是null。所以很明顯的，第 48 行一定出了什麼問題。
      6. +
    6. 存檔並重整，你應該會在主控台中看到 console.log() 輸出的結果。在這個時間點，lowOrHi的值是null。所以很明顯的，第 48 行一定出了什麼問題。
    7. 讓我們思考一下發生了什麼問題。第48行呼叫了 document.querySelector() 方法來透過CSS選擇器取得一個HTML元素參照。打開我們的網頁看看我們想要取得的段落元素： 
      <p class="lowOrHi"></p>
      8. @@ -109,14 +109,14 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

      Note: 看看這個 TypeError: "x" is (not) "y" 連結來了解更多有關這類錯誤的資訊。

      -

      語法錯誤：第三回合

      +

      語法錯誤：第三回合

      1. 現在如果你試著再次玩這個遊戲應該會相當順利，直到該讓遊戲結束的時機點才會發生錯誤：無論是猜對還是10次用完。
      2. 此時console提供錯誤訊息跟一開始一樣： "TypeError: resetButton.addeventListener is not a function"! 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把addeventListener 改成 .addEventListener就沒問題了。
      -

      邏輯錯誤

      +

      邏輯錯誤

      到這邊為止遊戲應該可以進行得很順利，然而玩幾次下來無疑地你會發現「隨機」數字總是0或1，這可不是我們想要的！

      @@ -134,7 +134,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
    8. 儲存程式碼並更新頁面，然後再試玩幾次，你會看到randomNumber 在console中總是等於1，這就是問題所在。
    -

    修正小錯誤

    +

    修正小錯誤

    為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫Math.random()以產生一個介於0到1的隨機小數，例如：0.5675493843

    @@ -154,11 +154,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    試著自己動手更新這兩行程式碼吧，儲存並更新頁面後你應該能看到遊戲如預期般進行！

    -

    其他常見錯誤

    +

    其他常見錯誤

    還有些初學者非常容易忽略的小問題，這小節讓我們來概覽一下：

    -

    語法錯誤：語句缺少「 ; 」
    +

    語法錯誤：語句缺少「 ; 」
    SyntaxError: missing ; before statement

    這個錯誤是指每行程式碼結束時必須加上英文輸入法的分號;(請注意不要打成中文輸入法)，分號被遺忘的錯誤有時不太容易發現，此外另舉一例：如果我們改動下方變數checkGuess() 中的程式碼：

    @@ -175,7 +175,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    Note: 更多細節請參考右方關於缺少分號的語法錯誤文章頁面： SyntaxError: missing ; before statement 。

    -

    無論輸入什麼，程式總是顯示「你贏了」

    +

    無論輸入什麼，程式總是顯示「你贏了」

    還有另一種混用指派運算子(=)與嚴格比較運算子(===)的狀況，舉例如果我們將變數 checkGuess()中的嚴格比較運算子(===)

    @@ -187,7 +187,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    這個檢查就失效了，程式會永遠回傳 true而勝利並結束遊戲。請小心！

    -

    語法錯誤：參數列表後面缺少「)
    SyntaxError: missing ) after argument list

    +

    語法錯誤：參數列表後面缺少「)
    SyntaxError: missing ) after argument list

    給完函式或方法參數時別忘了放上)右括號（請注意不要打成中文輸入法）。

    @@ -195,7 +195,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    Note: 更多細節請參考右方關於缺少右括號的語法錯誤文章頁面：SyntaxError: missing ) after argument list。

    -

    語法錯誤：屬性ID後缺少「:」
    +

    語法錯誤：屬性ID後缺少「:」
    SyntaxError: missing : after property id

    這個錯誤通常與JavaScript物件格式錯誤有關，在這個例子中，通過修改

    @@ -212,7 +212,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    很簡單——這通常意味你的函式或條件結構式缺少一個大括號。若我們將checkGuess()函式末段的一個結尾大括號刪除，就會獲得這個錯誤。

    -

    語法錯誤：預期得到表達式，但實際得到「字串」
    SyntaxError: expected expression, got 'string'

    +

    語法錯誤：預期得到表達式，但實際得到「字串」
    SyntaxError: expected expression, got 'string'

    或是

    @@ -226,7 +226,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    Note：有關這些錯誤的詳細資訊，可參閱SyntaxError: Unexpected token與SyntaxError: unterminated string literal

    -

    小結

    +

    小結

    那麼，我們得到它了——能在簡易JavaScript程式中找出錯誤的基礎知識。解決程式碼中的錯誤並不總是那麼簡單，但至少本章節可以為你省下幾小時的時間好用來睡覺，並讓你在早期學習過程更快的解決問題。

    @@ -241,12 +241,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong

    {{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

    -

    在這個學習模組中

    +

    在這個學習模組中