什么地方出了錯？

錯誤類型

? ? ?一般來說，當你在代碼中做錯了，你會遇到兩種主要的錯誤類型:

• 語法錯誤:這是在你的代碼的拼寫錯誤，實際上導致程序不能運行在所有或停止通過工作的一部分，這樣你通常會用一些錯誤消息也提供了通?？梢孕迯偷姆椒ǎ灰闶煜ふ_的工具，知道錯誤消息的意思！
• 邏輯錯誤:這些錯誤，其中語法實際上是正確的，但代碼是不是你想要的，這意味著項目成功運行，但會產(chǎn)生不正確的結(jié)果。這些通常比語法錯誤更難以修復，因為通常沒有錯誤指向錯誤源。

好了，這是不是很是簡單-因為你更深入的研究也有一些其他的差異化。但上述分類將在你的職業(yè)生涯的這個早期階段做。我們將看看這兩種類型。

一個錯誤的例子

開始，讓我們回到我們的猜測游戲 - 除了這一次，我們將探索一個版本，有一些故意錯誤介紹。轉(zhuǎn)到Github上，讓自己的本地拷貝數(shù)游戲errors.html(看到它在這里住上運行)。

1. 要開始，請在您喜歡的文本編輯器和瀏覽器中打開本地副本。
2. 嘗試玩游戲 - 你會注意到，當你按"提交猜測"按鈕，它不工作！

此時，讓我們打開開發(fā)者控制臺，看看我們是否可以有語法錯誤，然后嘗試修復它們。你會學到如何修復。

修復語法錯誤

早年在過程中，我們得到了你輸入一些簡單的JavaScript命令到開發(fā)工具JavaScript控制臺(如果你不記得如何在瀏覽器中打開此，按照前面的鏈接了解如何 F12.)。更有用的是，當JavaScript進入瀏覽器的JavaScript引擎時，如果存在語法錯誤，控制臺會提供錯誤消息?，F(xiàn)在讓我們?nèi)タ匆豢础?/p>

1. 在谷歌瀏覽器打開errors.html中打開，并打開JavaScript控制臺(默認F12)。您應該會看到以下行中的錯誤消息:
2. 這是一個很容易跟蹤的錯誤，瀏覽器提供了幾個有用的信息來幫助你(上面的截圖是從Firefox，但其他瀏覽器提供類似的信息)。從左到右，我們有:
3. 紅色"x"表示這是一個錯誤。
4. 一個錯誤消息，指示發(fā)生了什么問題:"TypeError:guessSubmit.addeventListener不是一個函數(shù)"
5. 點擊錯誤鏈接瀏覽器解釋了大量詳細信息含義
6. 錯誤所在的行號，以及首次看到錯誤的行中的字符編號。在這種情況下，我們有第86行，字符數(shù)3。
7. 如果我們在代碼編輯器中看第86行，我們會發(fā)現(xiàn)這行:

   guessSubmit.addeventListener('click', checkGuess);

8. 錯誤消息說"guessSubmit.addeventListener不是一個函數(shù)"，所以我們可能拼寫錯了。如果你不確定一段語法的正確拼寫，在MDN上查找該功能通常是很好的。當前做到這一點，最好的辦法就是搜索"MDN?名稱的特征在你喜歡的搜索引擎。"?這里有快捷鏈接，為您節(jié)省在這種情況下:addEventListener()。
9. 所以，看著這個頁面，錯誤似乎是我們拼寫的函數(shù)名錯誤！請記住，JavaScript是區(qū)分大小寫的，所以任何輕微的拼寫或大小不同都會導致錯誤。更改addeventListener到addEventListener解決這個問題。現(xiàn)在。

語法錯誤二

1. 保存您的頁面并刷新，您會看到錯誤已經(jīng)消失。
2. 現(xiàn)在，如果你嘗試輸入一個猜測，并按提交猜測按鈕，你會看到...另一個錯誤！
3. 這次報告的錯誤是"TypeError:lowOrHi is null"，在第78行。
   注意:Null是一個特殊值，意思是"無"，或者"無值"。因此，lowOrHi已申報和初始化，但不與任何有意義的價值-它沒有任何類型或值。
   注意 因為(內(nèi)部函數(shù)內(nèi)部發(fā)生這個錯誤checkGuess() { ... }塊)。正如你將在后面的函數(shù)文章中更詳細地學到的，代碼里面的函數(shù)運行在一個單獨的范圍內(nèi)來編寫外部函數(shù)。在這種情況下，代碼沒有運行并且沒有被拋出的誤差，直到checkGuess()函數(shù)由線86上運行。
4. 看看第78行，你會看到下面的代碼:

   lowOrHi.textContent = 'Last guess was too high!';

5. 該行正試圖設置textContent的中lowOrHi變量為一個文本字符串，但它不工作，因為lowOrHi不包含什么它應該操作不了。讓我們來看看這是為什么-嘗試搜索的其他實例lowOrHi中的代碼。你在JavaScript中找到的最早的例子是第48行:

   var lowOrHi = document.querySelector('lowOrHi');

6. 在這一點上，我們試圖讓變量包含對文檔HTML中的元素的引用。讓我們來檢查值是否是null運行后。在第49行添加以下代碼:

   console.log(lowOrHi);

   注意:console.log()是一個非常有用的調(diào)試功能，打印的值到控制臺。所以它會打印的價值lowOrHi，快速的打印到控制臺，我們曾試圖將其設置為48行。

7. 保存并刷新，你現(xiàn)在應該看到console.log()的結(jié)果在控制臺。 果然，lowOrHi的值是null在這一點上，所以絕對沒有48中的問題。
8. 讓我們想想問題可能是什么。48號線使用document.querySelector()方法與CSS選擇器選擇它去一個元素的引用。進一步查看我們的文件，我們可以找到有問題的段落:

   <p class="lowOrHi"></p>

9. 因此，我們需要一個類在這里，它與一個點開始(.)，但選擇器被傳遞到querySelector()方法中管線48沒有圓點。這可能是問題！嘗試改變lowOrHi，以.lowOrHi行號48。
10. 嘗試保存并刷新一遍，你的console.log()說法應該返回<p>我們想要的元素。！！另一個錯誤修復！您可以刪除您console.log()，或保持在隨后參考-你的選擇。

第三個語法錯誤

1. 現(xiàn)在，如果你再次嘗試玩游戲，你應該獲得更多的成功 - 游戲應該通過，直到你結(jié)束游戲，通過猜測正確的數(shù)字，或通過運行重置。
2. 在這一點，游戲再次失敗，同樣的錯誤是拋出，我們在開始 - "TypeError:resetButton.addeventListener不是一個函數(shù)！這次它來自第94行。
3. 看看行號94，很容易看到我們在這里犯了同樣的錯誤。我們再次只需要改變addeventListener為addEventListener?，F(xiàn)在做這個。

邏輯錯誤

在這一點上，游戲進行得很順利。但經(jīng)過幾次你一定會注意到你要猜測的這個隨機數(shù)總是1。毋庸置疑，我們不想這么玩游戲！

可以確定的是，某處游戲的邏輯出現(xiàn)了問題——游戲并沒有返回錯誤；它只是不能正確地運行。

1. 找到我們第一次聲明變量randomNumber所在的位置。這個我們要在游戲開始時猜測的隨機數(shù)實例大約出現(xiàn)在44行:

   var randomNumber = Math.floor(Math.random()) + 1;

   另一個在隨后的每一次游戲前形成的隨機數(shù)實例應該在113行:

   randomNumber = Math.floor(Math.random()) + 1;

2. 為了檢查是否這兩行確實存在問題，讓我們再次回到我們的朋友控制臺——在上面兩行代碼之后各自插入下面的代碼:

   console.log(randomNumber);

3. 保存并刷新，然后進行游戲——你會看到在它被輸入到控制臺的地方隨機數(shù)總是等于1。

通過邏輯

確定了這個，讓我們來思考這行代碼如何工作。首先，我們調(diào)用 Math.random(),它生成一個在0和1之間的十進制隨機數(shù)，例如 0.5675493843。

Math.random()

接下來，我們把調(diào)用Math.random()的結(jié)果作為參數(shù)傳遞給Math.floor()，它會向下舍入到與它最接近的整數(shù)。然后我們給這個結(jié)果加上1:

Math.floor(Math.random()) + 1

舍入介于?0?和?1?下的之間的十進制隨機數(shù)將總是返回?0，所以加1之后它總是返回1。我們需要在它舍入之將它前乘以100。那么接下來的結(jié)果就是0到99之間的隨機數(shù)了:

Math.floor(Math.random()*100);

昂斯想要我們加1，才給我們一個1到100之間的隨機整數(shù):

Math.floor(Math.random()*100) + 1;

試著像這樣更新這兩行，然后保存并刷新——現(xiàn)在游戲應該是我們期望的那樣了！

其它常見錯誤

還有其他常見錯誤，你會在代碼中遇到。 本節(jié)重點介紹其中的大部分。

語法錯誤: 在聲明后缺少" ; "

這個錯誤通常意味著你在一行代碼的末尾錯過了一個冒號，但有時它會更加隱秘。 例如，如果我們在 checkGuess()函數(shù)中更改此行:

var userGuess = Number(guessField.value);

至

var userGuess === Number(guessField.value);

它拋出這個錯誤，因為它認為你正在嘗試做不同的事情。 你應該確保不要使用strict等于運算符混合賦值運算符( = ) - 它設置一個變量等于一個值( === code>)，它測試一個值是否等于另一個值，并返回 true / false 結(jié)果。

程序總是說你贏了，無論你進入猜測

這可能是混淆賦值和嚴格相等運算符的另一個癥狀。 例如，如果我們在 checkGuess()中更改此行:

if (userGuess === randomNumber) {

至

if (userGuess = randomNumber) {

測試總是返回true，所以程序報告游戲已經(jīng)贏了。 小心！

語法錯誤: 在參數(shù)后缺少" ) "

這很簡單 - 通常意味著你錯過了一個函數(shù)/方法調(diào)用結(jié)束時的右括號。

語法錯誤: 在屬性id后缺少" : "

這個錯誤通常與一個不正確形成的JavaScript對象有關，但在這種情況下，我們設法通過更改獲得它

function checkGuess() {

至

function checkGuess( {

這導致瀏覽器認為我們試圖將函數(shù)的內(nèi)容作為參數(shù)傳遞到函數(shù)中。 小心這些括號！

語法錯誤: 在函數(shù)體后缺少" } "

這很容易 - 通常意味著你從一個函數(shù)或條件結(jié)構(gòu)中錯過了一個花括號。 我們通過刪除 checkGuess()函數(shù)底部附近的一個關閉花括號來獲得此錯誤。

SyntaxError：expected expression，got\' string \'或SyntaxError：unterminated string literal

這些錯誤通常意味著您錯過了字符串值的開頭或結(jié)尾引號。 在上面的第一個錯誤中， string 將替換為瀏覽器找到的意外字符，而不是字符串開頭的引號。 第二個錯誤表示字符串尚未以引號標記結(jié)束。

對于所有這些錯誤，想想我們?nèi)绾翁幚砦覀冊谘菥氈锌吹降睦印?/span> 當出現(xiàn)錯誤時，查看您給出的行號，轉(zhuǎn)到該行，看看是否可以發(fā)現(xiàn)錯誤。 記住，錯誤不一定是在那行，也錯誤可能不是由上面提到的完全相同的問題引起的！

概要

所以我們有它，在簡單的JavaScript程序中找出錯誤的基礎。 它不總是那么簡單，弄清楚你的代碼有什么問題，但至少這將節(jié)省你幾個小時的睡眠，并允許你進步一點，當事情沒有出現(xiàn)在你的學習之前 。

也可以看看