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

---
title: מתמתיקה בסיסית ב-JavaScript - מספרים ואופרטורים
slug: Learn/JavaScript/First_steps/Math
translation_of: Learn/JavaScript/First_steps/Math
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">בשלב זה של הקורס, נדון קצת במתמתיקה שבשפת JavaScript - איך אנחנו יכולים להשתמש ב - {{Glossary("Operator","operators")}} ועוד אפשרויות על מנת להצליח לבצע מניפולציות וחישובים שונים על מספרים לצרכים שלנו</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>הכרות עם שימוש במתמתיקה באופן בסיסי ב-JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="כולנו_אוהבים_מתמטיקה">כולנו אוהבים מתמטיקה</h2>

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

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

<h3 id="סוגי_מספרים">סוגי מספרים</h3>

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

<ul>
 <li><strong>Integers- מספרים שלמים - </strong>10, 400,5.</li>
 <li><strong>Floating point numbers - מספרים עשרוניים - </strong>12.5, 56.7786543.</li>
 <li><strong>Doubles - </strong>אלו מספרים עשרוניים בעלי רמת דיוק גבוהה יותר ממספרים עשרוניים רגילים. </li>
</ul>

<p>יש לנו אפילו כמה מערכות של מספרים! לדוגמא, מערכת מספרים דצימלית היא מבוססת על בסיס 10, כלומר, היא עושה שימוש בספרות 0-9 בכל עמודה. אבל יש עוד. לדוגמא:</p>

<ul>
 <li><strong>Binary</strong> — השפה הנמוכה של מחשבים; 0 ו- 1.</li>
 <li><strong>Octal</strong> — בסיס 8, משתמש ב- 0–7 בכל עמודה.</li>
 <li><strong>Hexadecimal</strong> — בסיס 16, משתמש ב- 0–9 ואז ב- a–f בכל עמודה. נתקלנו בזה ב-<a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">צבעים ב-CSS</a>.</li>
</ul>

<p><strong>לפני שאתם מתחילים לחשוש ולהתבלבל, תנשמו. נדיר שנשתמש במספרים שאינם מספרים דצימליים.</strong></p>

<p>חדשות טובות נוספות הן שלא כמו בשפות תכנות אחרות, לשפת JavaScript יש רק סוג מידע אחד עבודה מספרים - {{jsxref("Number")}}. כלומר, לא משנה איזה סוג מספרים אנחנו נקבל/נזין בקוד, אנחנו נטפל בו בדיוק באותה צורה.</p>

<h3 id="זה_הכל_מספרים">זה הכל מספרים</h3>

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

<ol>
 <li>קודם כל, נצהיר על שני משתנים ונשים בהם ערכים. לאחר מכן נזין את שמות המשתנים בקונסולה לוודא שהערכים הושמו כראוי:
  <pre class="brush: js">let myInt = 5;
let myFloat = 6.667;
myInt;
myFloat;</pre>
 </li>
 <li>מספרים אלו בעצם ערכים שנרשמים ללא גרשיים - נסו להזין מספרים עטופים בגרשיים וראו מה קורה.</li>
 <li>בוא נבדוק האם הערכים השונים שהזנו הם מאותו סוג. האופרטור שבודק את זה הוא {{jsxref("Operators/typeof", "typeof")}}. רשמו את הקוד הבא מתחת לקוד הנוכחי:
  <pre class="brush: js">typeof myInt;
typeof myFloat;</pre>
  אתם אמורים לקבל <code>"number"</code> בשני המקרים. ברור לנו שעיסוק בסוג מספר אחד הרבה יותר קל מאשר עם כמה סוגים.</li>
</ol>

<h2 id="Arithmetic_operators_-_אופרטורים_מתמתטיים">Arithmetic operators - אופרטורים מתמתטיים</h2>

<p>אופרטורים מתמטיים הם האופרטורים הבסיסים שאנחנו משתמשים בהם על מנת לבצע חישובים:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">אופרטור</th>
   <th scope="col">שם</th>
   <th scope="col">מטרה</th>
   <th scope="col">דוגמא</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+</code></td>
   <td>חיבור</td>
   <td>חיבור</td>
   <td><code>6 + 9</code></td>
  </tr>
  <tr>
   <td><code>-</code></td>
   <td>חיסור</td>
   <td>חיסור</td>
   <td><code>20 - 15</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>כפל</td>
   <td>כפל</td>
   <td><code>3 * 7</code></td>
  </tr>
  <tr>
   <td><code>/</code></td>
   <td>חילוק</td>
   <td>חילוק</td>
   <td><code>10 / 5</code></td>
  </tr>
  <tr>
   <td><code>%</code></td>
   <td>שארית</td>
   <td>
    <p>השארית מחלוקת שני מספרים</p>
   </td>
   <td>
    <p><code>8 % 3</code> (מחזיר 2, שכן 3 נכנס ב- 8 פעמיים, והשארית היא 2,).</p>
   </td>
  </tr>
  <tr>
   <td><code>**</code></td>
   <td>חזקה</td>
   <td>מכפיל את ה-<code>base</code> ב-<code>מעריך</code> , לדוגמא, המספר שיהיה נקוב ב- <code>base</code> עם המספר שיהיה נקוב ב- <code>מעריך</code> יגרום להכפלה של המספר שבבסיס כפול המספר שבמעריך. הוצג לראשונה ב- EcmaScript 2016.</td>
   <td><code>5 ** 5</code> (מחזיר <code>3125</code>, שזה זהה ל- <code>5 * 5 * 5 * 5 * 5</code>).</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>לתשומת לב</strong>: לפעמים ניתקל במספרים המעורבים בחישובים כ- {{Glossary("Operand", "operands")}}.</p>
</div>

<div class="blockIndicator note">
<p><strong>לתשומת לבד</strong>: לפעמים אנחנו נראה שמשתמשים במתודה הישנה {{jsxref("Math.pow()")}} אשר פועלת בדרך דומה. לדוגמא, בקוד <code>Math.pow(7, 3)</code>, <code>7</code> הבסיס הוא 7 ו-3 הוא המעריך בחזקה, והתוצאה תהיה <code>343</code>. <code>Math.pow(7, 3)</code> is שזה שווה ל- <code>7**3</code>.</p>
</div>

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

<ol>
 <li>הכניסו דומאות פשוטות כמו:
  <pre class="brush: js">10 + 7
9 * 8
60 % 3</pre>
 </li>
 <li>אתם גם יכולים לנסות להצהיר על משתנים להשים להם מספרים כערכים, ונסו לעשות עליהם חישובים - המשתנים יתנהגו בדיוק כמו שיתנהגו הערכים שהם מחזיקים בהם. כך לדוגמא:
  <pre class="brush: js">let num1 = 10;
let num2 = 50;
9 * num1;
num1 ** 3;
num2 / num1;</pre>
 </li>
 <li>נסו להזין קצת ביטויים יותר מורכבים, כמו:
  <pre class="brush: js">5 + 10 * 3;
num2 % 9 * num1;
num2 + num1 / 8 + 2;</pre>
 </li>
</ol>

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

<h3 id="סדר_עדיפות_אופרטורים">סדר עדיפות אופרטורים</h3>

<p>אם נסתכל על הדוגמא למעלה, נניח ש- <code>num2</code> הוא 50 ו- <code>num1</code> הוא 10 :</p>

<pre class="brush: js">num2 + num1 / 8 + 2;</pre>

<p>בני אדם רגילים עלולים להניח ש- <em>"50 ועוד 10 שווה 60"</em>, ואז <em>"8 ועוד 2 שווה 10"</em>, ואז <em>"60 חלקי 10 שווה 6"</em>.</p>

<p>אבל הדפדפן הולך לפי כללי החישוב המתמטים <em>"10 חלקי 8 שווה 1.25"</em>, ואז <em>"50 עוד 1.25 ועוד 2 שווה 53.25"</em>.</p>

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

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

<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>

<p>נסו כדי לראות.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: רשימה מלאה של האופטורים ב- JavaScript וסדר העדיפות שלהם ניתן למצוא ב<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">ביטויים ואופרטורים</a>.</p>
</div>

<h2 id="אופרטים_להעלאההורדה_-_Increment_and_decrement_operators">אופרטים להעלאה/הורדה - Increment and decrement operators</h2>

<p>לפעמים אנחנו רוצים להוסיף לערך או להוריד ממנו מספר אחד. ניתן לבצע זאת בקלות באמצעות שימוש באופרטור (<code>++</code>) לצורך העלאה ב-1 ובאופרטור (<code>--</code>) לצורך הורדה ב-1. השתמשנו באופרטור <code>++</code> במשחק שלנו  "Guess the number" ב-<a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">מבט ראשוני ל- JavaScript</a> כאשר הוספנו אחד למשתנה <code>guessCount</code> על מנת לעקוב אחר מספר הניחושים שביצע המשתשמש.</p>

<pre class="brush: js">guessCount++;</pre>

<div class="note">
<p><strong>לתשומת לב</strong>: אופרטורים אלו נמצאים בדרך כלל ב<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">לולאות</a>, עליהן נלמד בהמשך הקורס. לדוגמא, אם אנחנו רוצים לעבור על רשימה של מחירים, ולהוסיף מס על כל אחד מהם, אנחנו יכולים להשתמש בלולאה על מנת לעבור על כל ערך ברשימה, ולעשות את החישוב המתאים של הוספת מס. האופטרטור הוספה ישמש להעביר אותנו לערך הבא כשנצטרך. ראה לדוגמא כיצד זה מבוצע <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">בדף האינטרנט </a>וגם ב<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">קוד המקור</a>. בדקו האם אתם מזהים את האופרטורים שמשמשים להוספה/הורדה בתוך הלולאה, נדון בהם בהמשך.</p>
</div>

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

<pre class="brush: js">3++;</pre>

<p>כלומר, אנחנו יכולים רק להעלות משתנה קיים ב-1. נסו להזין את הקוד הבא:</p>

<pre class="brush: js">let num1 = 4;
num1++;</pre>

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

<pre class="brush: js">num1;</pre>

<p>אותו הדבר לגבי <code>--</code>  נסו את הקוד הבא:</p>

<pre class="brush: js">let num2 = 6;
num2--;
num2;</pre>

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

<h2 id="Assignment_operators_-_אופרטורים_להשמה">Assignment operators - אופרטורים להשמה</h2>

<p>אופרטורים להשמה אלו אופרטים שמשימים ערך לתוך משתנה. ראינו זאת עם הבסיסי שבה: <code>=</code>- הוא פשוט משים את הערך מצד שמאל, למשתנה שמצויין מצד ימין.</p>

<pre class="brush: js">let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">אופרטור</th>
   <th scope="col">שם</th>
   <th scope="col">מטרה</th>
   <th scope="col">דגומא</th>
   <th scope="col">קיצור עבור</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+=</code></td>
   <td>חיבור והשמה</td>
   <td>מוסיף את הערך מצד ימין לערך שבמשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
   <td><code>x = 3;<br>
    x += 4;</code></td>
   <td><code>x = 3;<br>
    x = x + 4;</code></td>
  </tr>
  <tr>
   <td><code>-=</code></td>
   <td>חיסור והשמה</td>
   <td>מחסיר את הערך מצד ימין מתוך הערך שנמצא בתוך המשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
   <td><code>x = 6;<br>
    x -= 3;</code></td>
   <td><code>x = 6;<br>
    x = x - 3;</code></td>
  </tr>
  <tr>
   <td><code>*=</code></td>
   <td>כפל והשמה</td>
   <td>מכפיל את הערך מצד ימין עם הערך שנמצא במשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
   <td><code>x = 2;<br>
    x *= 3;</code></td>
   <td><code>x = 2;<br>
    x = x * 3;</code></td>
  </tr>
  <tr>
   <td><code>/=</code></td>
   <td>חילוק והשמה</td>
   <td>מחלק את הערך מצד ימין בערך שנמצא במשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
   <td><code>x = 10;<br>
    x /= 5;</code></td>
   <td><code>x = 10;<br>
    x = x / 5;</code></td>
  </tr>
 </tbody>
</table>

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

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

<pre class="brush: js">let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x *= y; // x now contains the value 12</pre>

<div class="note">
<p><strong>לתשומת לב</strong>: יש הרבה <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">אופרטורים להשמה נוספים</a>, אבל אלו הבסיסיים שאתם צריכים לדעת לעת עתה.</p>
</div>

<h2 id="למידה_אקטיבית_שינוי_גודל_של_canvas_box">למידה אקטיבית: שינוי גודל של canvas box</h2>

<p>בתרגיל זה נלמד כיצד לבצע מניפולציות על מספרים ואופרטורים, על מנת לשנות גודל של קופסא. הקופסא מצויירת באמצעות browser API אשר נקרא {{domxref("Canvas API", "", "", "true")}}. אין מה לדאוג לגבי איך הוא עובד, רק התרכזו בחישובים עצמם. הגובה והרוחב של הקופסא בפיקסלים יוגדרו על ידי המשתנים <code>x</code> ו- <code>y</code>, אשר קיבלו ערך התחלתי של 50.</p>

<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p>

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

<ul>
 <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li>
 <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li>
 <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li>
 <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li>
 <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li>
 <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li>
</ul>

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

<h2 id="Comparison_operators_-_אופרטורים_להשוואה">Comparison operators - אופרטורים להשוואה</h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">אופרטור</th>
   <th scope="col">שם</th>
   <th scope="col">מטרה</th>
   <th scope="col">דוגמא</th>
  </tr>
  <tr>
   <td><code>===</code></td>
   <td>השוואה מוחלטת</td>
   <td>אופרטור זה בודק הא הערכים מצד ימין וצד שמאל זהים לחלוטין</td>
   <td><code>5 === 2 + 4</code></td>
  </tr>
  <tr>
   <td><code>!==</code></td>
   <td>שונים לחלוטין</td>
   <td>בודק האם הערך מצד ימין<strong>לא זהה</strong> לערך מצד שמאל</td>
   <td><code>5 !== 2 + 3</code></td>
  </tr>
  <tr>
   <td><code>&lt;</code></td>
   <td>קטן מ-</td>
   <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין.</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>גדול מ-</td>
   <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין.</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
  <tr>
   <td><code>&lt;=</code></td>
   <td>קטן מ- או שווה ל-</td>
   <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין או שווה לו.</td>
   <td><code>3 &lt;= 2</code></td>
  </tr>
  <tr>
   <td><code>&gt;=</code></td>
   <td>גדול מ- או שווה ל-</td>
   <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין או שווה לו.</td>
   <td><code>5 &gt;= 4</code></td>
  </tr>
 </thead>
</table>

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

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

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

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

<pre class="brush: html">&lt;button&gt;Start machine&lt;/button&gt;
&lt;p&gt;The machine is stopped.&lt;/p&gt;
</pre>

<pre class="brush: js">const btn = document.querySelector('button');
const txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}</pre>

<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">פתח בחלון חדש</a></strong></p>

<p>אתם יכולים לראות את האופרטור להשוואה מתקיים בתוך פונקציית <code>()updateBtn</code> . במקרה זה, אנחנו לא בודקים האם שני ביטויים מתמידים הם בעלי ערך זהה, אלא אנחנו בודקים האם תוכן הטקסט של הכפתור כולל בתוכו מחרוזת מסויימת - אבל עדיין מדובר באותו עקרון שלמדנו עליו. אם הכפתור כולל בתוכו מחרוזת "Start machine" כשלוחצים עליו, אזי נשנה את השם שלו בהתאם. אם הוא כולל מחרוזת "Stop machine" אזי נבצע החלפה שוב.</p>

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

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

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

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

<div class="note">
<p><strong>לתשומת לב</strong>: אם אתם מעוניינים להרחיב את הידיעות בנושא, ראו את הדפים שלנו בנושא  <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> ו-<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a>.</p>
</div>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>

<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>