diff options
Diffstat (limited to 'files/he/learn/javascript/first_steps/a_first_splash/index.html')
| -rw-r--r-- | files/he/learn/javascript/first_steps/a_first_splash/index.html | 634 |
1 files changed, 0 insertions, 634 deletions
diff --git a/files/he/learn/javascript/first_steps/a_first_splash/index.html b/files/he/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 76a5d40f9b..0000000000 --- a/files/he/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,634 +0,0 @@ ---- -title: מבט ראשון ל-JavaScript -slug: Learn/JavaScript/First_steps/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "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>להתנסות בכתיבת קוד JavaScript ולהבין כיצד לנסות לעשות זאת.</td> - </tr> - </tbody> -</table> - -<p>אנו לא מצפים שתבינו את כל הקוד לפרטי פרטים ישר על ההתחלה. אנחנו רק רוצים להציג לכם בצורה עקרונית את הרעיון כיצד השפה עובדת. בהמשך המאמרים ניכנס יותר לעומק. </p> - -<div class="note"> -<p>הרבה מהמאפיינים והאפשרויות ב-JavaScript זהים לשפות תכנות אחרות - כמו לדוגמא לולאות, פונקציות וכד׳. הסינטקס אולי שונה, אבל הרעיונות בגדול דומים.</p> -</div> - -<h2 id="לחשוב_כמו_מתכנת_או_מתכנתת">לחשוב כמו מתכנת או מתכנתת</h2> - -<p>אחד מהדברים הקשים ללמידה בפיתוח תוכנה אינו למידת השפה או הסינטקס, אלא איך אנחנו מחילים את השפה לפתרון בעיות אמיתיות. אנחנו צריכים להתחיל לחשוב כמו מתכנתים - זה בעצם כולל בתוכו התבוננות על התיאור של מה התוכנית שלנו צריכה לעשות, להבין מה מאפייני הקוד שאנחנו צריכים כדי להשיג את אותם דברים ואיך אנחנו גורמים להם לעבוד יחד. </p> - -<p>זה דורש מאיתנו שילוב של עבודה קשה, ניסיון עם סינטקס השפה, תרגול, וכן מעט יצירותיות. ככל שנכתוב קוד יותר, ככה נשתפר בכך. אנחנו לא יכולים להבטיח שנגרום לך לפתח ״מוח של מתכנת״ בחמש דקות, אבל אנחנו נתן לך את מירב ההזדמניות לתרגל חשיבה של מתכנת בקורס זה.</p> - -<h2 id="דוגמא_—_משחק_״נחש_את_המספר״">דוגמא — משחק ״נחש את המספר״</h2> - -<p>במאמר זה אנחנו נראה לך כיצד ליצור משחק פשוט:</p> - -<div class="hidden"> -<h6 id="Top_hidden_code">Top hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <title>Number guessing game</title> - <style> - html { - font-family: sans-serif; - } - - body { - width: 50%; - max-width: 800px; - min-width: 480px; - margin: 0 auto; - } - - .lastResult { - color: white; - padding: 3px; - } - </style> -</head> - -<body> - <h1>Number guessing game</h1> - <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> - <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> - <div class="resultParas"> - <p class="guesses"></p> - <p class="lastResult"></p> - <p class="lowOrHi"></p> - </div> -<script> - // Your JavaScript goes here - let randomNumber = Math.floor(Math.random() * 100) + 1; - const guesses = document.querySelector('.guesses'); - const lastResult = document.querySelector('.lastResult'); - const lowOrHi = document.querySelector('.lowOrHi'); - const guessSubmit = document.querySelector('.guessSubmit'); - const guessField = document.querySelector('.guessField'); - let guessCount = 1; - let resetButton; - - function checkGuess() { - let userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Previous guesses: '; - } - - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Congratulations! You got it right!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - lowOrHi.textContent = ''; - setGameOver(); - } else { - lastResult.textContent = 'Wrong!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent = 'Last guess was too low!' ; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Last guess was too high!'; - } - } - - guessCount++; - guessField.value = ''; - } - - guessSubmit.addEventListener('click', checkGuess); - - function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start new game'; - document.body.appendChild(resetButton); - resetButton.addEventListener('click', resetGame); - } - - function resetGame() { - guessCount = 1; - const resetParas = document.querySelectorAll('.resultParas p'); - for(let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; - } - - resetButton.parentNode.removeChild(resetButton); - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value = ''; - guessField.focus(); - lastResult.style.backgroundColor = 'white'; - randomNumber = Math.floor(Math.random() * 100) + 1; - } -</script> - -</body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>נסו לשחק עם הקוד קצת, הכירו את המשחק לפני שאתם ממשיכים הלאה.</p> - -<p>תדמיינו שהבוס שלכם נתן את התיאור הקצר ליצירת המשחק הזה:</p> - -<blockquote> -<p>הבוס: ״אני רוצה שתצרו משחק פשוט של ״נחש את המספר״. </p> - -<p>הוא אמור ליצור מספר בין 1 ל-100, כאשר המשתתף צריך לנחש את המספר בכפולות של 10. </p> - -<p>אחרי כל פעם שהמשתתף ניחש את המספר, המשחק יגיד לו אם הוא טעה או צדק, אם הוא טעה, הוא יגיד לו האם הניחוש היה גבוה מדי או נמוך מדיץ בנוסף, המשחק צריך להגיד למשתתף כמה ניחושים הוא ביצע כבר. המשחק יסתיים ברגע שהמשתתף ינחש נכונה את המספר האקראי או ברגע שנגמרו לו הנסיונות. כשהמשחק הסתיים, המשתמש צריך לקבל אפשרות להתחיל את המשחק מחדש. </p> -</blockquote> - -<p>עכשיו, ננסה להפוך את למשימות פשוטות, בצורה מתוכננת כמה שאפשר: </p> - -<ol> - <li>צור מספר בין 1 ל-100.</li> - <li>שמור את הניסיון של המשתתף. תתחיל במספר 1 שכן זהו הניסיון הראשון.</li> - <li>ספק למשתמש דרך לנחש את המספר האקראי.</li> - <li>ברגע שהמתשמש ניחש, שמור את הניחוש שלו כדי שתוכל להציג לו את הניחושים הקודמים.</li> - <li>בדוק האם המשתמש ניחש את המספר האקראי.</li> - <li>אם ניחש נכונה: - <ol> - <li>הצג הודעת זכייה. </li> - <li>תמנע מהמשתמש להזין ניחושים נוספים.</li> - <li>תציג למשתמש אפשרות לאתחל את המשחק.</li> - </ol> - </li> - <li>אם המשתמש לא ניחש נכונה ונותרו לו הנסיונות : - <ol> - <li>תציג למשתמש שהוא טעה.</li> - <li>תאפשר לו לנחש שוב.</li> - <li>תעלה את מספר הנסיונות שלו ב-1.</li> - </ol> - </li> - <li>אם המשתמש לא ניחש נכונה ונגמרו לו הנסיונות: - <ol> - <li>תציג למשתמש שהמשחק נגמר.</li> - <li>תמנע מהמשתמש להזין ניחושים נוספים.</li> - <li>תציג למשתמש אפשרות לאתחל את המשחק.</li> - </ol> - </li> - <li>ברגע שהמשחק אותחל מחדש, תוודא שהלוגיקה והנראות של המשחק מאותחלים לחלוטין וחזור לצעד מספר 1.</li> -</ol> - -<p>כעת נראה כיצד ניתן להפוך את רשימת המשימות הזו לקוד של JavaScript.</p> - -<h3 id="הגדרות_ראשונות">הגדרות ראשונות</h3> - -<p>על מנת להתחיל את המדריך, צרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> או ראו <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">כדף אינטרנט</a>.</p> - -<p>פתחו אותו גם בעורך הקוד וגם בדפדפן. בנקודה זו אתם תראו כותרת, פסקת הוראות וטופס להכניס ניחוש, אבל הטופס לא עובד כראוי. </p> - -<p>אנחנו נכניס את הקוד שלנו בתוך האלמנט {{htmlelement("script")}} בתחתית קובץ ה-HTML:</p> - -<pre class="brush: html"><script> - - // Your JavaScript goes here - -</script> -</pre> - -<h3 id="הוספת_משתנים_לשם_אחסון_המידע">הוספת משתנים לשם אחסון המידע</h3> - -<p>ראשית, הכניסו את השורות הבאות תוך האלמנט {{htmlelement("script")}} :</p> - -<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1; - -const guesses = document.querySelector('.guesses'); -const lastResult = document.querySelector('.lastResult'); -const lowOrHi = document.querySelector('.lowOrHi'); - -const guessSubmit = document.querySelector('.guessSubmit'); -const guessField = document.querySelector('.guessField'); - -let guessCount = 1; -let resetButton;</pre> - -<p>חלק זה של הקוד מגדיר משתנים וקבועים שאנחנו צריכים על מנת לאחסן את המידע שהתוכנית שלנו תצטרך. <strong>משתנים הם בעצם כמו קופסאות אחסון עבור ערכים מסוגים שונים אשר יכולים להיות מספרים, טקסט, אובייקטים, מערכים וכד</strong>׳. </p> - -<p>אנו יוצרים משתנה באמצעות שימוש במילה שמורה של JavaScript בשם <code>let</code>או <code>var</code> ולאחר מכן בשם שאנחנו רוצים להעניק למשתנה שלנו. (אנחנו נלמד על ההבדלים ביניהם ב<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">מאמר בהמשך</a>).</p> - -<p><strong>קבועים</strong> לעומת זאת, אלו מעין קופסאות אחסון שנועדו לאחסן ערכים שאנחנו לא נרצה לשנות, ואותם אנחנו יוצרים באמצעות מילה שמורה בשם <code>const</code>. במקרה שלנו אנחנו משתמשים בקבועים על מנת לאחסן את ההפניות לאלמנטים בדף ה-html, כלומר לממשק המשתמש. אמנם יכול להיות שהתוכן שלהם ישתנה, אבל ההפניה לאותו אלמנט תישאר קבועה לאורך התוכנית.</p> - -<p>על מנת לשים ערך מסויים במשתנה או בקבוע מסויים, אנחנו משתמשים בסימן ״שווה״ (<code>=</code>), ולאחר מכן הערך שאנחנו רוצים להשים באותו משתנה או קבוע.</p> - -<p>בדוגמא שלנו :</p> - -<ul> - <li>המשתנה הראשון — <code>randomNumber</code> — הושם לו ערך אקראי בין 1 ל- 100, באמצעות שימוש במתודה אשר נמצאת ב-JavaScript.</li> - <li>שלושת הקבועים הראשונים נועדו על מנת לאחסן או להשים את ההפנייה לפסקאות הרלוונטיות ב-html אליהם אשר התוכן שלהם ימולא בערכים שיינתו להם בהמשך: - <pre class="brush: html"><p class="guesses"></p> -<p class="lastResult"></p> -<p class="lowOrHi"></p></pre> - </li> - <li>שני הקבועים הבאים נועדו לאחסן הפנייה לקלט של הטופס ולכפתור השליחה ונועדו לשם שליטה בניחוש שביצע המשתמש.</li> - <li> - <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> -<input type="submit" value="Submit guess" class="guessSubmit"></pre> - </li> - <li>שני המשתנים האחרונים שלנו נועדו לאחסן את מס׳ הניחושים וכן להוות הפנייה לכפתור הריסט, שאינו קיים לבינתיים.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אתם תלמדו עוד על משתנים וקבועים בהמשך הקורס, החל מה<a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">מאמר הבא</a>.</p> -</div> - -<h3 id="פונקציות">פונקציות</h3> - -<p>הוסיפו את הקוד הבא, מתחת לקוד הקיים שלכם:</p> - -<pre class="brush: js">function checkGuess() { - alert('I am a placeholder'); -}</pre> - -<p>פונקציות הם בעצם חלקי קוד הניתנים לשימוש חוזר, אותם ניתן לרשום פעם אחת, ולהריץ שוב ושוב. זה מאוד שימושי. יש כמה דרכים להגדיר פונקציה אבל כעת אנחנו נתמקד בצורה פשוטה אחת. </p> - -<p>כאן אנחנו הגדרנו את הפונקציה באמצעות שימוש במילה שמורה <code>function</code> ולאחר מכן שם הפונקציה וסוגריים <code>()</code>. לאחר מכן, הוספנו סוגריים מסולסלים <code>{}</code>. כל מה שנמצא בתוך הסוגריים המסולסלים זה הקוד שנרצה שירוץ בכל פעם שנקרא לפונקציה. </p> - -<p>כשנרצה להריץ את הקוד, אנחנו פשוט נקליד את שם הפונקציה ובצמוד לה נשים סוגריים <code>()</code>. שמרו את הקובץ ורענן את הדף בדפדפן. לאחר מכן, הזן<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"> בקונסולה</a>, את השורה הבאה: </p> - -<pre class="brush: js">checkGuess();</pre> - -<p>לאחר שנלחץ על <kbd>Return</kbd>/<kbd>Enter</kbd>, אנחנו אמורים לראות שקפצה הודעה שרשמה "<samp>I am a placeholder</samp>".</p> - -<p>הגדרנו פונקציה שמקפיצה הודעה למשתמש בכל פעם שנקרא לה.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אתם תלמדו עוד על פונקציות <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">בהמשך הקורס</a>.</p> -</div> - -<h3 id="אופרטורים_(Operators)">אופרטורים (Operators)</h3> - -<p>אופרטורים של JavaScript מאפשרים לנו לבצע מבחנים מסויימים, חישובים מתמטיים, חיבור מחרוזות ודברים נוספים רבים. </p> - -<p>אם לא עשיתם זאת עד עכשיו, שמרו את הקוד, ורעננו את הדף. לאחר מכן, פתחו את הקונסולה. נסו להזין את הדוגמאות המפורטות למטה בעמודת ״דוגמא״, בדיוק בצורה שבה הן מופיעות ולאחר מכן לחצו <kbd>Return</kbd>/<kbd>Enter</kbd> וראו את התוצאות. </p> - -<p>נתחיל עם אופרטורים מתמטיים:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">אופרטור</th> - <th scope="col">שם</th> - <th scope="col">דוגמא</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>+</code></td> - <td>חיבור</td> - <td><code>6 + 9</code></td> - </tr> - <tr> - <td><code>-</code></td> - <td>חיסור</td> - <td><code>20 - 15</code></td> - </tr> - <tr> - <td><code>*</code></td> - <td>כפל</td> - <td><code>3 * 7</code></td> - </tr> - <tr> - <td><code>/</code></td> - <td>חילוק</td> - <td><code>10 / 5</code></td> - </tr> - </tbody> -</table> - -<p>ניתן להשתמש בסימן החיבור + על מנת לחבר מחרוזות ביחד (בתכנות, בשפה האנגלית זה נקרא: <em>concatenation).</em></p> - -<p>נסו להזין את השורות הבאות בקונסולה, אחת בכל פעם:</p> - -<pre class="brush: js">let name = 'Bingo'; -name; -let hello = ' says hello!'; -hello; -let greeting = name + hello; -greeting;</pre> - -<p>יש גם כמה קיצורים לאופרטורים מתמטיים, לדוגמא, אם אנחנו פשוט רוצים להוסיף מחרוזת טקסט חדשה למחרוזת טקסט קיימת ולהחזיר את המחרוזת המחוברת של שתיהן, נוכל לבצע את הדבר הבא: </p> - -<pre class="brush: js">name += ' says hello!';</pre> - -<p>זה זהה בתוצאה לדבר הבא:</p> - -<pre class="brush: js">name = name + ' says hello!';</pre> - -<p>כשאנחנו מריצים מבחני אמת/שקר (לדוגמא, בתוך תנאים), אנחנו משתמשים ב<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">אופרטורים השוואתיים</a>: </p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">אופרטור</th> - <th scope="col">שם</th> - <th scope="col">דוגמא</th> - </tr> - <tr> - <td><code>===</code></td> - <td>האם זהה לחלוטין?</td> - <td> - <pre class="brush: js"> -5 === 2 + 4 // false -'Chris' === 'Bob' // false -5 === 2 + 3 // true -2 === '2' // false; number versus string -</pre> - </td> - </tr> - <tr> - <td><code>!==</code></td> - <td>האם לא זהה?</td> - <td> - <pre class="brush: js"> -5 !== 2 + 4 // true -'Chris' !== 'Bob' // true -5 !== 2 + 3 // false -2 !== '2' // true; number versus string -</pre> - </td> - </tr> - <tr> - <td><code><</code></td> - <td>קטן מ-</td> - <td> - <pre class="brush: js"> -6 < 10 // true -20 < 10 // false</pre> - </td> - </tr> - <tr> - <td><code>></code></td> - <td>גדול מ-</td> - <td> - <pre class="brush: js"> -6 > 10 // false -20 > 10 // true</pre> - </td> - </tr> - </thead> -</table> - -<h3 id="משפטי_תנאי">משפטי תנאי</h3> - -<p>נחזור לפונקציית <code>()checkGuess</code> שלנו. אנחנו נרצה שהיא תעשה יותר מאשר להוציא הודעה פשוטה למשתמש. אנחנו רוצים לבדוק האם הניחוש של המשתמש היה נכון או לא ולהגיב ובהתאם. </p> - -<p> בנקודה זו, החלף את הפונקציה <code>()checkGuess</code> עם הקוד הבא: </p> - -<pre class="brush: js">function checkGuess() { - let userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Previous guesses: '; - } - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Congratulations! You got it right!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - setGameOver(); - } else { - lastResult.textContent = 'Wrong!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent = 'Last guess was too low!'; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Last guess was too high!'; - } - } - - guessCount++; - guessField.value = ''; - guessField.focus(); -}</pre> - -<p>נעבור על כל חלק בקוד על מנת להסביר אותו: </p> - -<ul> - <li>בשורה 2 אנחנו מצהירים על משתנה בשם <code>userGuess </code>ומשימים לו את הערך שיהיה הערך אשר מוכנס על ידי המשתמש לתוך תיבת הקלט. אנחנו מריצים את הערך שהוכנס על ידי המשתמש במתודה מובנית בשפה בשם <code>()Number</code> מנת לוודא שאכן המספר שהמשתמש הזין, הוא מספר ולא טקסט.</li> - <li>בשורות 3-5, אנחנו מזינים לראשונה את משפט התנאי שלנו. משפט תנאי מאפשר לנו להריץ קוד באופן סלקטיבי, כאשר הקוד ירוץ בהתבסס על התקיימות תנאי כלשהו או היעדר התקיימותו. הצורה הפשוטה ביותר של משפט תנאי תתחיל במילה השמורה <code>if</code> ולאחר מכן סוגריים רגילים <code>()</code> ואז סוגריים מסולסלות <code>{}</code>. בתוך הסוגריים הרגילים אנחנו נזין את התנאי/מבחן. אם התנאי יתקיים, כלומר תוצאת המבחן היא אמת, אז הקוד בתוך הסוגריים המסולסלות ירוץ. אם לא, אנחנו לא נריץ את הקוד בסוגריים המסולסלים והתוכנית תמשיך הלאה. </li> - <li>במקרה הזה, התנאי/המבחן בודק האם המשתנה <code>userGuess</code> שווה באופן מוחלט ל-1, כלומר האם זה התור הראשון של המשתתף במשחק: - <pre class="brush: js">guessCount === 1</pre> - אם כן, אנחנו נציג לו הודעה כזו באמצעות שינוי הטקסט בתוכן של הפסקה למלל הבא: "<samp>Previous guesses:</samp>" ואם לא, לא. </li> - <li>שורה 6 מוסיפה את התוכן הנוכחי של ניחוש המשתמש (<code>userGuess</code> ) לסוף הפסקה <code>guesses</code> בצירוף רווח מסויים בין הניחושים.</li> - <li>שורות 8-24 מבצעות מספר בדיקות: - <ul> - <li>התנאי הראשון <code>{ }</code><code>()if</code>בודק האם הניחוש של המשתמש (<code>userGuess)</code> הוא שווה למספר האקראי (<code>randomNumber)</code> שהוגדר בתחילת הקוד שלנו. - <ul> - <li>אם כן, המשתתף ניחש נכונה את המספר, וניצח במשחק. </li> - <li>נציג לו הודעת זכייה בצבע ירוק.</li> - <li>נמחק את התוכן של הפסקה שמציינת האם הניחוש היה גדול/קטן. </li> - <li>נריץ פונקציה שנקראת <code>()setGameOver</code> אשר נדון בה מאוחר יותר. </li> - </ul> - </li> - <li>אם התנאי הראשון לא התקיים, נריץ מבחן נוסף באמצעות שימוש בביטוי <code> { } () else if</code>. מבחן זה בודק האם זהו התור האחרון של המשתתף ואם כן, ירוץ קוד זהה לקוד שנמצא בבלוק הקודם, למעט כך שתוקפץ הודעה שהמשחק נגמר ולא הודעת זכייה. </li> - <li>התנאי האחרון בשרשרת, אותו הגדרנו באמצעות הביטוי <code>{} else</code> מתפקד כמו ברירת מחדל. הוא מכיל קוד שירוץ רק אם אף אחד מהתנאים לעיל לא התקיים, כלומר לא החזיר ערך אמת <code>true</code>. במקרה כזה, נודיע למשתמש שהוא טעה, ונבצע בדיקת תנאי נוספת (שורות 19-23) לבדוק האם הניחוש של המשתתף במשחק היה גבוה או נמוך מהמספר האקראי, וכן נודיע לו בהתאם. </li> - </ul> - </li> - <li>שורות 26-28 של הפונקציה מבצעות הכנה לניחוש הבא של המשתתף - אנו מגדילים את המשתנה <code>guessCount</code> ב-1 על מנת לעדכן את כמות הניחושים של המשתתף, ומרוקנים את הערך של הקלט, על מנת שהמשתמש יזין את הניחוש החדש. לבסוף אנו מריצים מתודה על האובייקט המכיל את אלמנט הקלט מהמשתמש שמאפשרת לנו לגרום לכך שהפוקוס של המסך יהיה באלמנט הקלט. </li> -</ul> - -<h3 id="אירועים">אירועים</h3> - -<p>בשלב זה הגדרנו את פונקציית <code>()checkGuess</code> אבל היא לא תעשה כלום כי לא קראנו לה עדיין. באופן אידיאלי, אנחנו רוצים ״<strong>לקרוא</strong>״ (<strong>Invoke</strong>) לפונקציה כאשר המשתמש ילחץ על לחצן ״Submit guess" ועל מנת לבצע זאת אנחנו צריכים לעשות שימוש באירוע (Event). אירועים אלו דברים המתרחשים בתוך הדפדפן - כפתור נלחץ, דף נטען, וידאו מתנגן וכד׳ - ובהתאם, אנחנו יכולים להריץ בלוקים של קוד. הקונסטרקטור (בעברית: הבנאי), שמאזין לאותו אירוע שמתרחש בדפדפן נקרא מאזין אירוע (<strong>event listeners</strong>), ואילו בלוק הקוד שרץ בתגובה לאותו אירוע נקרא מטפל אירוע (<strong>event handlers</strong>).</p> - -<p>הוסף את הקוד הבא מתחת לפונקציית<code> ()checkGuess</code> :</p> - -<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre> - -<p>כאן אנו מוסיפים event listener<strong> </strong>לכפתור <code>guessSubmit</code>. מתודה זו מקבלת 2 ערכים (שנקראים ״ארגומנטים״) - הראשון הוא סוג האירוע שאנחנו רוצים להאזין לו (במקרה, אירוע מסוג <code>click</code>), ואותו נזין כמחרוזת, עטוף בגרשיים, לאחר מכן פסיק, ואז את event handlers, שהוא בעצם הקוד שנרצה שירוץ ברגע שהתרחש האירוע (במקרה זה, פונקציית <code>()checkGuess</code> ). תשומת לב כי אנחנו לא צריכים להכניס סוגריים כאשר אנחנו רושמים את הפונקציה <code>checkGuess </code>בתוך המתודה {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p> - -<p>נסו לשמור ולרען את הדף כעת - הדוגמא אמורה לעבוד, עד נקודה מסויימת. הבעיה היחידה היא שכאשר המשתתף ינחש נכון או המשחק הסתיים כי נגמרו לו הנסיונות, המשחק יסתיים בצורה לא רצויה, מכיוון שלא הגדרנו את הפונקציה <code>()setGameOver</code> שאמורה לרוץ ברגע שהמשחק יסתיים (הן אם המשתתף ניחש נכון והן אם למשתתף נגמרו הנסיונות).</p> - -<p>כעת נוסיף את הקוד החסר ונשלים את הפונקציונליות של המשחק. </p> - -<h3 id="השלמת_הפונקציונליות_של_המשחק">השלמת הפונקציונליות של המשחק</h3> - -<p>כעת נוסיף את הפונקציה <code>()setGameOver</code> מתחת לקוד הנוכחי: </p> - -<pre class="brush: js">function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start new game'; - document.body.appendChild(resetButton); - resetButton.addEventListener('click', resetGame); -}</pre> - -<ul> - <li>שתי השורות הראשונות משנות את <code>guessField</code> ושל <code>guessSubmit</code> לבלתי זמין - זאת באמצעות שינוי המאפיין של אובייקטים אלו ל-<code>disabled</code>. זה הכרחי על מנת למנוע מהמשתמש להזין ניחושים נוספים. </li> - <li>שלושת השורות הבאות מייצרות לנו אלמנט {{htmlelement("button")}} חדש, ומוסיפות אותו בתחתית ה-html הנוכחי שלנו. </li> - <li>השורה האחרונה מוסיפה event listner לכפתור החדש, ש-״מאזין״ לאירוע של הקלקה על הכפתור, וכשזה קורה, מריץ את הפונקציה שנקראת <code>()resetGame</code>.</li> -</ul> - -<p>עת אנחנו צריכים להגדיר את הפונקציה הזו. הוסף את הקוד הבא מתחת לקוד הנוכחי: </p> - -<pre class="brush: js">function resetGame() { - guessCount = 1; - - const resetParas = document.querySelectorAll('.resultParas p'); - for (let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; - } - - resetButton.parentNode.removeChild(resetButton); - - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value = ''; - guessField.focus(); - - lastResult.style.backgroundColor = 'white'; - - randomNumber = Math.floor(Math.random() * 100) + 1; -}</pre> - -<p>קוד זה מאתחל הכל לאיך שהוא היה בתחילת המשחק: </p> - -<ul> - <li>משים ערך של 1 במשתנה <code>guessCount</code>. (שורה 2)</li> - <li>מרוקן את כל תוכן הטקסט בפסקאות. (שורות 4-7)</li> - <li>מוחק את כפתור האתחול. (שורה 9)</li> - <li>הופך את <code>guessField</code> ו- <code>guessSubmit</code> לזמינים שוב. (שורות 11-12)</li> - <li>מרוקן מתוך<code>guessField</code> כל טקסט שנמצא בתוכו. (שורה 13) </li> - <li>מזיז את הפוקוס במסך ל-<code>guessField</code>. (שורה 14) </li> - <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">משנה את הרקע של פסקת </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">lastResult</code>. (שורה 16)</li> - <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">לבסוף, יוצר שוב מספר אקראי, חדש, על מנת שלא ננחש שוב את אותו מספר. </span></li> -</ul> - -<p><strong>בשלב זה - יש לנו משחק שעובד במלואו. פשוט יחסית, אך עובד. </strong></p> - -<p>כעת נדבר על אפשרויות נוספות שראינו, ואולי לא שמנו לב. </p> - -<h3 id="לולאות">לולאות</h3> - -<p>חלק מתוך הקוד למעלה שנרצה להתעמק בו הוא לולאת מסוג <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>.</p> - -<p>לולאות הן עקרון מאוד חשוב בתכנות, ומאפשרות לנו להריץ קוד שוב ושוב, עד שתנאי מסויים יתרחש. </p> - -<p>על מנת להתחיל, פתח את ה<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה </a>שוב, והכנס את הקוד הבא: </p> - -<pre class="brush: js">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> - -<p>מה קרה?</p> - -<p>המספרים 1 עד 20 הודפסו לקונסולה. זה מכיוון שהשתמשנו בלולאה מסוג <code>for</code>. לולאה מסוג <code>for</code> מקבלת 3 ערכים (ארגומנטים):</p> - -<ol> - <li><strong>ערך ראשון (Starting Value) -</strong> במקרה זה אתחלנו את המונה ל-1, אך אנו יכולים להתחיל בכל מספר שנרצה. כמו כן, את שם המשתנה <code>i</code> ניתן להחליף בכל שם שנרצה. אנו מבצעים שימוש ב-<code>i</code> כי זה קצר ונוח לזכור. </li> - <li><strong>תנאי יציאה (An exit condition) - </strong>כאן הגדרנו שתנאי היציאה מהלולאה, כלומר מתי הלולאה תפסיק לרוץ יהיה כל עוד <code>i < 21</code>. כלומר הלולאה תרוץ כל זמן ש-<code>i</code> יהיה קטן מ-21. ברגע ש-<code>i</code> יהיה שווה ל-21, הלולאה תפסיק לרוץ.</li> - <li>המוסיף (<strong>An incrementor</strong>) - כאן הגדרנו <code>i++</code> כלומר נעלה את הערך של <code>i</code> ב-1 בכל פעם שהקוד שנמצא בתוך הסוגריים המסולסלות <code>{}</code> מסיים לרוץ (כל איטרציה-iteration), עד אשר <code>i</code> יגיע לערך 21. במקרה הזה אנחנו פשוט מדפיסים לקונסולה את הערך של <code>i</code> בכל איטרציה (iteration), באמצעות {{domxref("Console.log", "console.log()")}}.</li> -</ol> - -<p>בוא נסתכל כעת על הלולאה במשחק הניחוש שבנינו בתוך פונקציית <code>()resetGame</code>:</p> - -<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p'); -for (let i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; -}</pre> - -<p>קוד זה יוצר משתנה מסוג מערך (נדבר עליו בהמשך) בשם <code>resetParas</code> המכיל רשימה של כל האלמנטים מסוג p הנמצאים בתוך אלמנט עם <code>class</code> בשם <code>resultParas</code> (במקרה שלנו זה האלמנט הבא: <code><div class="resultParas"></code>). </p> - -<p><code>resetParas</code> נוצר באמצעות שימוש במתודה {{domxref("Document.querySelectorAll", "querySelectorAll()")}}. </p> - -<p>לאחר מכן, הוא עובר באמצעות לולאה על כל איבר במערך, ומסיר את התוכן טקסט של כל איבר. </p> - -<h3 id="דיון_קצר_על_אובייקטים">דיון קצר על אובייקטים</h3> - -<p>נוסיף שיפור נוסף לפני שנמשיך בדיון : הוסיפו את הקוד הבא, מתחת לקוד זה: <code>let resetButton;</code> הנמצא בראש הדף, ולאחר מכן שמרו את הקובץ: </p> - -<pre class="brush: js">guessField.focus();</pre> - -<p>קוד זה עושה שימוש במתודה בשם {{domxref("HTMLElement.focus", "focus()")}} על מנת לשים את סמן העבר בתוך הטקסט של תיבת הקלט {{htmlelement("input")}} ברגע שהדף נטען, כך שהמשתמש יוכל הזין את הניחוש הראשון שלו ישר כשהדף נטען, ללא צורך ללחוץ על תיבת הקלט. זוהי אמנם תוספת קטנה, אך היא משפרת השימוש של המשתמש ומאפשרת לו להבין באופן ויזואלי איך לשחק את המשחק.</p> - -<p>נכנס לזה קצת יותר לעומק. ב-JavaScript, כל דבר הוא אובייקט. אובייקט הוא אוסף של מס׳ פונקציונליות וערכים אשר קובצו יחד לקבוצה אחת. אנו יכולים ליצור אובייקט בעצמו, אך נגע בנושא זה בהמשך. לצורך העניין במאמר הנוכחי, אנחנו נדון בקצרה באובייקטים המובנים בדפדפן, אשר מאפשרים לנו לעשות הרבה דברים שימושיים. </p> - -<p>במקרה הנוכחי, יצרנו תחילה קבוע בשם <code>guessField</code> אשר אחסן בתוכן הפנייה לתיבת קלט הטקסט ב-html - השורה הבאה יכולה להימצא באזור שבו הצרנו על המשתנים/קבועים בתחילת הקוד שלנו: </p> - -<pre class="brush: js">const guessField = document.querySelector('.guessField');</pre> - -<p>על מנת לקבל את ההפניה הזו, השתמשנו במתודה {{domxref("document.querySelector", "querySelector()")}} של האובייקט {{domxref("document")}}. דוגמא נוספת היא למתודה של אובייקט זה היא <code>()querySelector</code> אשר מקבלת מידע אחד מסוג <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">סלקטור של CSS</a> - ואותו סלקטור בוחר את האלמנט שאנחנו רוצים להפנות אליו. </p> - -<p>מכיוון ש-<code>guessField</code> מכיל כעת הפנייה לאלמנט {{htmlelement("input")}}, הוא יכול כעת לגשת למספר מאפיינים (properties) ומתודות (methods). באופן עקרוני, properties אלו משתנים המאוחסנים בתוך אובייקט, וחלקם לא יכולים לשנות את ערכם, ואילו methods אלו פונקציות המאוחסנות בתוך אובייקט. מתודה אחת אשר זמינה לאלמנט {{htmlelement("input")}}, היא <code>()focus</code>, כך שאנחנו יכולים להשתמש בקוד למטה, על מנת לבצע פוקוס לתיבת קלט הטקסט: </p> - -<pre class="brush: js">guessField.focus();</pre> - -<p>משתנים שאינם כוללים הפנייה לאלמנטים של טפסים, אינם יכולים לגשת למתודה הזו והיא לא תהיה זמינה עבורם. לדוגמא, הקבוע <code>guesses</code> מכיל הפנייה לאלמנט {{htmlelement("p")}} ו-המשתנה <code>guessCount</code> מכיל מספר. </p> - -<h3 id="לשחק_ולנסות_את_האובייקטים_של_הדפדפן">לשחק ולנסות את האובייקטים של הדפדפן</h3> - -<p>בואו נשחק טיפה עם האובייקטים של הדפדפן.</p> - -<ol> - <li>פתחו תוכנית בדפדפן.</li> - <li>פתחו את <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> ווודאו שהקונסולה מופיעה. </li> - <li>רשמו <code>guessField</code> והקונסולה תציג לכם את המשתנה המכיל את האלמנט {{htmlelement("input")}}. אתם תבחינו שהקונסולה גם משלימה את השמות של האובייקטים שקיימים בסביבת ההרצה, כולל משתנה. </li> - <li>כעת הזינו את הקוד הבא: </li> - <li> - <pre class="brush: js">guessField.value = 'Hello';</pre> - המאפיין (property) בשם <code>value</code> מייצג את הערך שהוזן לתוך שדה הטקסט. ניתן לראות שעם הזנת הקוד לעיל, אנחנו משנים את הטקסט בשדה הטקסט. </li> - <li>נסו לרשום בקונסולה <code>guesses</code>. הקונסולה תראה לכם שהוא מכיל אלמנט מסוג{{htmlelement("p")}}.</li> - <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">כעת הזן את הקוד הבא:</span></li> - <li> - <pre class="brush: js">guesses.value</pre> - הקונסולה תחזיר את הערך <code>undefined</code> מכיוון שאלמנט מסוג {{htmlelement("p")}} לא מקבל מאפיין מסוג <code>value</code>.</li> - <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">על מנת לשנות את הטקסט בתוך</span> {{htmlelement("p")}} , אנחנו צריכים להשתמש במאפיין בשם <span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{domxref("Node.textContent", "textContent")}}</span></li> - <li>כעת הזינו את הקוד הבא<span style="font-size: 1rem; letter-spacing: -0.00278rem;">:</span></li> - <li> - <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre> - </li> - <li>כעת ננסה לשנות עיצוב באמצעות גישה ל-properties של האובייקט: - <pre class="brush: js">guesses.style.backgroundColor = 'yellow'; -guesses.style.fontSize = '200%'; -guesses.style.padding = '10px'; -guesses.style.boxShadow = '3px 3px 6px black';</pre> - כל אלמנט שנמצא בדף מכיל מאפיין בשם <code>style</code> אשר הוא בעצמו אובייקט המכיל את כללי ה-CSS ה-inline שהוחלו על אותו אובייקט (ואף ניתן להחיל עליו כללי CSS או למחוק את הכללים הנוכחיים או להחליפם באחרים) . זה מאפשר לנו לשנות באופן דינמי את העיצוב של האובייקט באמצעות JavaScript.</li> -</ol> - -<h2 id="לסיכום">לסיכום</h2> - -<p>סיימנו לבנות את הדוגמא. בדקו את הקוד הסופי שלכם וודאו שהוא עובד כראוי, או שתוכלו <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">לשחק עם הגרסה הסופית פה</a> אם אתם לא מצליחים לגרום לקוד שלכם לעבוד, נסו להשוות אותו אל מול <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">קוד המקור</a>. </p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "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> |