path: root/files/he/learn/javascript/first_steps/what_went_wrong/index.html

---
title: מה השתבש? - פתרון שגיאות ב-JavaScript
slug: Learn/JavaScript/First_steps/What_went_wrong
translation_of: Learn/JavaScript/First_steps/What_went_wrong
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">כשבנינו את המשחק ״שחק את המספר״ במאמר הקודם, בטח שמתם לב שהוא לא עבד. מאמר זה לספק לכם הבנה כיצד למצוא שגיאות ב-JavaScript ולתקן אותן.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">ידע מוקדם:</th>
   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">מטרה:</th>
   <td>
    <p>הכרת חלק מהאפשרויות ללתיקון שגיאות בקוד שלנו.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="סוגי_שגיאות">סוגי שגיאות</h2>

<p>באופן כללי, כשאנחנו מבצעים משהו שגוי בקוד, יש שתי סוגי שגיאות עיקריות שאנחנו ניתקל בהן:</p>

<ul>
 <li><strong>Syntax errors - שגיאות סינטקס</strong>: אלו בעיקרון שגיאות כתיב בקוד שכתבנו שגורמות לתוכנית לא לרוץ בכלל, או להפסיק לעבוד בשלב מסוים. בדרך כלל גם נקבל הודעת שגיאה מסויימת. שגיאות אלו בדר״כ קלות לתיקון, ככל ואנחנו מכירים את הכלים שעומדים לרשותנו ומה הודעת השגיאה אומרת.</li>
 <li><strong>Logic errors - טעויות לוגיות</strong>: אלו שגיאות שבהן הסינטקס היה נכון, כלומר כתבנו ללא שגיאות כתיב, אבל הקוד לא מבצע את מה שרצינו שיבצע. אלו שגיאות שקצת יותר מורכב לתקן אותן מאשר שגיאות סינטקס, שכן הן לרוב לא יקפיצו הודעת שגיאה.</li>
</ul>

<p>אוקיי, זה לא <em>כזה</em> פשוט — יש חלוקות נוספות של סוגי השגיאות, וככל ונעמיק בחומר ננחקור אותן לעומק. לצרוך הלימוד כרגע, החלוקה הזו תספיק בהתחלה. </p>

<h2 id="דוגמא_לשגיאה">דוגמא לשגיאה</h2>

<p>לשם התחלה, חזרו למשחק ״נחש את המספר״ שלנו - רק שהפעם, השתמשו בקובץ שלנו שהוכנסו בו מכלתחילה מספר שגיאות. כנסו ל-Github והכינו לעצמכם עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (ראו זאת בדף אינטרנט<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html"> כאן</a>).</p>

<ol>
 <li>לשם התחלה, פתחו את הקובץ המקומי בעורך הקוד ובדפדפן.</li>
 <li>נסו לשחק עם המשחק, אתם תשימו לב כשאתם לוחצים על כפתור - "Submit guess", הכפתור לא עושה כלום.</li>
</ol>

<div class="note">
<p><strong>לתשומת לב</strong>: יכול להיות שהגרסה שאתם עבדתם עליה לא עובדת בעצמה, ואולי אותה תרצו לתקן. בכל מקרה, אנא השתמשו בגרסה שלנו לאורך המאמר הנוכחי, על מנת שתוכלו ללמוד את הטכניקות שאנחנו נלמד כאן. לאחר מכן, חזרו לדוגמא שלכם ונסו לתקן אותה אם היא אינה עובדת.</p>
</div>

<p>בשלב זה, ניעזר בקונסולה בדפדפן על מנת לראות את שגיאות הסינטקס, וננסה לתקן אותם. </p>

<h2 id="תיקון_שגיאות_סינטקס">תיקון שגיאות סינטקס</h2>

<p>בתחילת הקורס, הזנו מס׳ פקודות של JavaScript לתוך ה<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>. יתרון נוסף של שימוש בקונסולה הוא העובדה שהקונסולה מחזירה לכם הודעות בדבר שגיאות כתיב כאשר אלו קיימות בקוד ה-JavaScript אשר נטען על ידי מנוע ה- JavaScript של הדפדפן. בוא נבדוק זאת:</p>

<ol>
 <li>לך ללשונית שבה יש את הקובץ <code>number-game-errors.html</code> פתוח ופתחו את הקונסולה. אתם אמורים לראות שגיאה שמכילה את המלל הבאה:<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
 <li>זו שגיאה דיי קלה לאיתור, והדפדפן מספק לם מס׳ נתונים על מנת לעזור לכם - צילום המסך לעיל לקוח מדפדפן Firefox אבל גם דפדפנים אחרים מספקים את אותו מידע. משמאל לימין, זו השגיאה:
  <ul>
   <li>״x״ אדום אשר יעיד על כל שקיימת שגיאה.</li>
   <li>הודעת שגיאה על מנת להראות שמשהו השתבש: "TypeError: guessSubmit.addeventListener is not a function".</li>
   <li>טקסט וקישור "Learn More" אשר יוביל לדף MDN שמסביר מהי השגיאה - שימו לב שקישור זה קיים רק בפיירפוקס ולא בכרום.</li>
   <li>השם של קובץ JavaScript אשר מקושר ללשונית ה-Debugger. אם נעקוב אחרי הקישור נראה את השורה המדויקת שבה התרחשה השגיאה.</li>
   <li>מספר השורה שבה התרחשה השגיאה, ומספרו של התו באותה השורה שבו השגיאה נראתה לראשונה. במקרה שלנו, השגיאה התרחשה בשורה 86, ובתו מספר 3.</li>
  </ul>
 </li>
 <li>אם נסתכל על שורה 86 בעורך הקוד שלנו, אנחנו נמצא את השורה הבאה:
  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
 </li>
 <li>הודעת שגיאה זו אומרת ש-"guessSubmit.addeventListener is not a function", אז אנחנו כנראה אייתנו משהו בצורה לא נכונה. אם אנחנו לא בטוחים לגבי האיות הנכון של כתיב/סינטקס מסויים, הפתרון הכי טוב זה להסתכל על המאפיינים של הסינטקס באתר של MDN. הדרך הכי טובה לעשות זאת היא לחפש "mdn <em>name-of-feature</em>" במנוע החיפוש האהוב עליכם. הנה קישור לדוגמא לחסוך לכם זמן <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>.</li>
 <li>אז, אם אנחנו מסתכלים על הדף, השגיאה הופיעה ככל הנראה מכיוון שאייתנו את שם המתודה לא נכון. זכרו ש- JavaScript היא case sensitive, וכל שינוי קטן באיות, או שימוש באותיות גדולות/קטנות לא בצורה נכונה, יגרום לשגיאה. שינוי של <code>add<strong>e</strong>ventListener</code> לכתיב הנכון: <code>add<strong>E</strong>ventListener</code> אמור לתקן את הבעיה.</li>
</ol>

<div class="note">
<p><strong>לתשומת לבכם</strong> ראו גם: <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a>. זהו דף שלנו שמסביר בפרטים על השגיאה הזו.</p>
</div>

<h3 id="שגיאות_סינטקס_-_דוגמאות_נוספות">שגיאות סינטקס - דוגמאות נוספות</h3>

<ol>
 <li>שמרו את הדף ורעננו אותו, אתם אמורים לראות שהשגיאה נעלמה.</li>
 <li>כעת, אם המשתמש ינסה להכניס ניחוש וללחוץ על הכפתור של Submit, תתקבל שגיאה נוספת:<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
 <li>הפעם, השגיאה מדווחת עם ההודעה הבאה: "TypeError: lowOrHi is null", בשורה 78.
  <div class="note"><strong>לתשומת לבכם</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> הוא ערך מיוחד שמשמעותו הוא ״כלום״ או ״ללא ערך״. כך <code>lowOrHi</code> אמנם הוצהר ואותחל, אבל הוא ללא כל ערך, אין לו סוג ואין ערך שהוזן לתוכו.</div>

  <div class="note"><strong>לתשומת לבכם</strong>: שגיאה זו לא הופיעה ברגע שהדף נטען שכן שגיאה זו נמצאת בתוך פונקציה - בתוך <code>() { ... }checkGuess</code>. אנו נלמד על פונקציות במאמרים הבאים, ואנו נלמד שקוד אשר נמצא בתוך פונקציה רץ בסקופ (מתחם) אחר ונפרד מהסקופ שרץ בו קוד מחוץ לפונקציה. במקרה הנוכחי - הקוד שבתוך הפונקציה אשר גרם לשגיאה לא רץ עד אשר הפונקציה <code>()checkGuess</code> לא הופעלה בשורה 26.</div>
 </li>
 <li>:הסתכלו על הקוד בשורה 78
  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
 </li>
 <li>שורה זו מנסה לקבוע את ה-property - מאפיין:  <code>textContent</code> של המשתנה <code>lowOrHi</code> למחרוזת טקסט, אך זה לא יעבוד מכיוון ש-<code>lowOrHi</code> לא מכיל את הערך שהוא אמור להכיל. בו ננסה לחפש מופעים נוספים של <code>lowOrHi</code> בקוד שלנו. הפעם הראשונה שנמצא אותו תהיה בשורה 48:
  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
 </li>
 <li>בשלב זה אנחנו מנסים להפוך את המשתנה שלנו להפנייה לאלמנט בדף ה-html, בוא ננסה לראות האם הוא מקבל את הערך <code>null</code> אחרי ההרצה של השורה הזו. הוסיפו את הקוד הבא לאחר שורה 49:
  <pre class="brush: js">console.log(lowOrHi);</pre>

  <div class="note">
  <p><strong>לתשומת לבכם</strong>: <code><a href="/en-US/docs/Web/API/Console/log">()console.log</a></code> מקבלת ארגומנט כלשהו ומדפיסה אותו לקונסולה. זוהי פונקציה מאוד שימושית לשם איתור שגיאות.</p>
  </div>
 </li>
 <li>שמור ורענן, ואתה אמור לראות ש-<code>()console.log</code> החזירו את התשובה הבאה בקונסולה:<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> אנו רואים שהערך של <code>lowOrHi</code>הוא בעצם <code>null</code> בנקודה זו ולכן הבעיה היא עם שורה 48.</li>
 <li>ננסה לחשוב מהי הבעיה. שורה 28 משתמשת במתודה <code><a href="/en-US/docs/Web/API/Document/querySelector">()document.querySelector</a></code> על מנת לקבל הפניה לאלמנט באמצעות בחירת סלקטור ה-CSS שלו. אם נסתכל בדף, אנחנו יכולים למצוא את האלמנט הרלוונטי:
  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
 </li>
 <li>כאן אנחנו רואים שאנחנו צריכים סלקטור של קלאס, אשר מתחיל עם (<code>.</code>), אבל הסלקטור שמועבר במתודה <code>()querySelector</code> בשורה 48 אינו מכיל נקודה. זו יכולה להיות הבעיה, נסו לשנות את <code>lowOrHi</code> ל- <code>.lowOrHi</code> וראו מה קורה.</li>
 <li>שמרו ורעננו את הדף ו-<code>()console.log</code> אמור להחזיר את האלמנט <code>&lt;p&gt;</code> שרצינו. </li>
</ol>

<div class="note">
<p><strong>לתשומת לב</strong>: ראו גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> -  דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
</div>

<h3 id="שגיאות_סינטקס_נוספות">שגיאות סינטקס נוספות</h3>

<ol>
 <li>אם תנסו לשחק עכשיו במשחק, אתם אמורים להצליח להתקדם יותר - אך עד שהמשחק יסתיים, בין אם ניחשתם את המספר האקראי הנכון ובין אם נגמרו לך הנסיונות.</li>
 <li>כשהמשחק נגמר, אנחנו מקבלים שגיאה מסוג - "TypeError: resetButton.addeventListener is not a function"! אשר מופיעה בשורה 94.</li>
 <li>אם נסתכל על שורה 94, נראה כי עשינו טעות באיות המתודה <code>addEventListener</code> ולכן נדרש לשנות את הקוד. להזכירכם, מתודות הן case senitive.</li>
</ol>

<h2 id="טעות_לוגית">טעות לוגית</h2>

<p>בשלב זה, המשחק אמור לעבוד טוב, אך עם זאת, אחרי כמה משחקים, אתם תשימו לב שהמספר האקראי שלנו הוא תמיד 0 או 1. זה לא ממש מה שהתכוונו.</p>

<p>יש בוודאות שגיאה לוגית במשחק איפשהו, אך אנחנו לא מקבלים הודעת שגיאה, המשחק עובד, אך לא כמו רצינו.</p>

<ol>
 <li>נסו לחפש את המשתנה <code>randomNumber</code> ואת השורות בקוד שבהן אנחנו מגדירים אותו. הוא נמצא בשורה 44:

  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
  והשורה שבה אנחנו מייצרים מספר אקראי חדש לאחר כל משחק היא בשורה 113:</li>
 <li>
  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
 </li>
 <li>על מנת לבדוק האם השורות האלו הן הבעיתיות, אנחנו ניעזר ב- <code>()console.log</code> ונכניס את הקוד הבא מתחת לשתי שורות לעיל:
  <pre class="brush: js">console.log(randomNumber);</pre>
 </li>
 <li>שמרו ורעננו את הדף ותנסו לשחק מספר משחקים. אתם תראו ש- <code>randomNumber</code> שווה ל-1 בכל פעם שאנחנו מדפיסים אותו לקונסולה:</li>
</ol>

<h3 id="מעבר_על_הלוגיקה_של_המשחק">מעבר על הלוגיקה של המשחק</h3>

<p>על מנת לתקן זאת, בואו נחשוב כיצד שורה זו עובדת. קודם כל, אנחנו קוראים ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a></code>, אשר מייצרת מספר עשרוני בין 0 ל-1, לדוגמא: 0.5676665434:</p>

<pre class="brush: js">Math.random()</pre>

<p>לאחר מכן אנחנו מעבירים את התוצאה של הפעלת פונקציית <code>()Math.random</code> דרך הפונקציה <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">()Math.floor</a></code>, אשר בתורה, מעגלת את המספר ולאחר מכן מוסיפים <code>1</code>. אם לא נוסיף <code>1</code>, פונקציה זו יכולה לעגל כלפי מטה ואז נקבל <code>0</code>.</p>

<pre>Math.floor(Math.random()) + 1</pre>

<p>1.  אנחנו צריכים להכפיל את המספר האקראי שלנו ב-<code>100</code> לפני שנעביר אותו הלאה. זה ייתן לנו מספר אקראי בין 0 ל-99:</p>

<pre class="brush: js">Math.floor(Math.random()*100);</pre>

<p>הוספת של <code>1</code>, תאפשר לנו לקבל ערך בין 1 ל-100:</p>

<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>

<p>נסו לשמור ולרענן את הדף ואתם תראו שהמשחק עושה מה שהוא צריך לבצע - מייצר מספר אקראי בין 0 ל-100.</p>

<h2 id="שגיאות_נפוצות_נוספות">שגיאות נפוצות נוספות</h2>

<p>ישנן שגיאות נפוצות נוספות שאנחנו ניתקל בהן: </p>

<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>

<p>שגיאה זו לרוב אומרת ששכחנו לשים <code>;</code> בסוף שורות הקוד, אבל היא יכולה להיות גם מסיבה אחרת. אם נשנה את השורה שנמצאת בתוך הפונקציה <code>()checkGuess</code> :</p>

<pre class="brush: js">var userGuess = Number(guessField.value);</pre>

<p>לקוד הבא:</p>

<pre class="brush: js">var userGuess === Number(guessField.value);</pre>

<p>זה יקפיץ לנו הודעת שגיאה מכיוון ש- JavaScript חושבת שאתה מנסה לבצע משהו אחר. צריך תמיד לוודא שאנחנו לא מערבבים בין סימן השווה שנועד להשים ערך (<code>=</code>) לבין שלושת סימני השווה שנועדו לבדוק האם ערך אחד שווה לשני, ולהחזיר <code>true</code>/<code>false:</code></p>

<div class="note">
<p><strong>לתשומת לב</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
</div>

<h3 id="המשחק_תמיד_נותן_למשתמש_לנצח_לא_משנה_מה_הניחוש_שהמשתמש_הכניס">המשחק תמיד נותן למשתמש לנצח, לא משנה מה הניחוש שהמשתמש הכניס</h3>

<p>זה יכול להיות עוד סימן לכך שעירבבנו בין סימן ההשמה לבין סימן הבדיקה. לדוגמא, אם אנחנו את השורה הבאה שנמצא בתוך<code>()checkGuess</code>:</p>

<pre class="brush: js">if (userGuess === randomNumber) {</pre>

<p>לקוד הבא:</p>

<pre class="brush: js">if (userGuess = randomNumber) {</pre>

<p>תוצאת המבחן תהיה תמיד <code>true</code>, מה שגורם לכך שתמיד הניחוש של המשתמש נכון.</p>

<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3>

<p>זוהי שגיאה פשוטה יחסית - היא אומרת באופן כללי ששכחנו לשים סוגריים בסוף קריאה לפונקציה או מתודה:</p>

<div class="note">
<p><strong>לתשומת לבד</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>  - דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
</div>

<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>

<p>שגיאה זו בדרך כלל מתייחסת לכך שלא יצרנו אובייקט ל JavaScript בצורה נכונה. נסה לשנות את הקוד הבא:</p>

<pre class="brush: js">function checkGuess() {</pre>

<p>לקוד הבא:</p>

<pre class="brush: js">function checkGuess( {</pre>

<p>זה גרם לדפדפן לחשוב שאנחנו מנסים להעביר את התוכן של הפונקציה כארגומנט של הפונקציה.</p>

<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>

<p>זו גם שגיאה פשוטה יחסית - היא אומרת בעיקרון ששכחנו אחת מהסוגריים המסולסלות במשפט תנאי שרשמנו. </p>

<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>

<p>שגיאות אלו אומרות באופן כללי ששכחנו להוסיף סימן של <code>'</code> או <code>"</code>. בשגיאה הראשונה <em>string</em> יוחלף עם תו לא ידוע שהדפדפן ימצא במקום המרכאות או הגרש. השגיאה השניה אומרת שהמחרוזת לא הסתיימה עם גרש או מרכאות.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> וגם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a>  - דפי ההסבר שלנו לפרטים נוספים על שגיאות אלו.</p>
</div>

<h2 id="לסיכום">לסיכום</h2>

<p>כעת אנו יודעים את הבסיס להבין שגיאות בתוכניות JavaScript הפשוטות שלנו. רק צריך לזכור שזה לא יהיה תמיד קל להבין מה השתבש לנו בקוד. כאשר שגיאה מתרחשת, הסתכלו על מספר השורה שאתם מקבלים, ולכו לאותה שורה על מנת לנסות לאתר מה השתבש. זכרו תמיד שהשגיאה לא תמיד תהיה בשורה זו, ושאולי היא לא תהיה אחת מאלו שעברנו עליהם במאמר זה.</p>

<h2 id="ראה_גם">ראה גם</h2>

<div>
<ul>
 <li>יש עוד הרבה סוגי שגיאות שלא פירטנו עליהן כאן. להרחבה, ראו <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
 <li>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</li>
</ul>
</div>

<h2 id="במודול_זה">במודול זה</h2>

<ul>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
 <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
</ul>