diff options
Diffstat (limited to 'files/he/learn/javascript/first_steps')
10 files changed, 0 insertions, 3704 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> diff --git a/files/he/learn/javascript/first_steps/arrays/index.html b/files/he/learn/javascript/first_steps/arrays/index.html deleted file mode 100644 index 44675349fa..0000000000 --- a/files/he/learn/javascript/first_steps/arrays/index.html +++ /dev/null @@ -1,564 +0,0 @@ ---- -title: Arrays - מערכים -slug: Learn/JavaScript/First_steps/Arrays -translation_of: Learn/JavaScript/First_steps/Arrays ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">במאמר האחרון במודול זה, אנחנו נדע במערכים - דרך מסודרת וקלה לאחסן רשימה פריטי מידע תחת משתנה אחד. אנחנו נבין מדוע שמוש במערך הוא שימושי כל כך ונבין כיצד ליצור מערך, לשנות את האיברים שלו, למחוק או להוסיף לו איברים ועוד.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">ידע מוקדם:</th> - <td>הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>הבנה של מערכים וביצוע פעולות שונות עליהם</td> - </tr> - </tbody> -</table> - -<h2 id="מה_זה_בעצם_מערך_-_Array">מה זה בעצם מערך - Array?</h2> - -<p>מערכים לרוב מתוארים כאובייקט של מעין רשימה (״list-like objects״). בעיקרון, אלו אובייקטים המכילים מספר ערכים שמאוחסנים יחד.</p> - -<p>אובייקטים מסוג מערך יכולים להיות מאוחסנים בתוך משתנה ונוכל לטפל בהם בדיוק כמו שאנחנו מטפלים במשתנים אחרים.</p> - -<p>אנו יכולים לטפל בכל ערך בודד באותו במערך או במערך בכללותו. אנחנו יכולים לעבור על כל איברי המערך אחד אחרי השני ולבצע בהם פעולות שונות. כך לדוגמא, אם יש לנו סדרה של מוצרים והמחירים שלהם מאוחסנים במערך, אנחנו רוצים לעבור על כל המחירים ולהדפיס אותם בחשבונית, ובמקביל לחשב את הסכום הכולל של המוצרים יחד עם המחירים שלהם.</p> - -<p>אם לא היו לנו מערכים, היינו צריכים לשמור כל פריט במשתנה אחר, ואז לכתוב קוד שידפיס את המחיר בנפרד עבור כל משתנה. זה היה הופך את הקוד שלנו להרבה יותר מורכב וארוך ופחות יעיל. אם היו לנו 10 פריטי להדפיס לחשבונית זה עוד נשמע הגיוני, אך מה נעשה במצב שיש לנו 100 פריטים או 1,000 פריטים? נחזור לדוגמא זו בהמשך המאמר על מנת להבין כיצד ניתן לעשות זאת.</p> - -<p>כמו במאמרים קודמים, אנחנו נלמד על הבסיס של מערכים באמצעות שימוש ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>.</p> - -<h3 id="יצירת_מערכים">יצירת מערכים</h3> - -<p>מערכים כוללים סוגריים מרובעות <code>[]</code> וכל איבר (אלמנט) במערך מופרד מאיבר אחר על ידי פסיק <code>,</code>.</p> - -<ol> - <li>נניח ואנחנו רוצים לאחסן רשימת פריטים בתוך מערך. הכניסו את הקוד הבא לקונסולה: - <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; -shopping;</pre> - </li> - <li>בדוגמא למעלה, כל איבר הוא מחרוזת, אך ניתן לאחסן כל מיני סוגי ערכים בתוך מערכים - מחרוזות, מספרים, אובייקטים ואפילו מערכים נוספים. לדוגמא: - <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; -let random = ['tree', 795, [0, 1, 2]];</pre> - </li> - <li>לפני שתמשיכו, נסו ליצור מספר מערכים וחקרו את האפשרויות השונות.</li> -</ol> - -<h3 id="גישה_לאיברי_המערך_ושינוי_שלהם">גישה לאיברי המערך ושינוי שלהם</h3> - -<p>אנחנו יכולים לגשת לכל איבר במערך על ידי שימוש בסוגריים המרובעות <code>[]</code> בדיוק כפי שאנו <a href="/he/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">ניגשים לתווים במחרוזת</a>.</p> - -<ol> - <li>הכניסו את הקוד הבא לקונסולה: - <pre class="brush: js">shopping[0]; -// returns "bread"</pre> - </li> - <li>אנחנו גם יכולים לשנות איבר במערך באמצעות מתן ערך חדש לאותו איבר במערך. ראו לדוגמא: - <pre class="brush: js">shopping[0] = 'tahini'; -shopping; -// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre> - - <div class="note"><strong>להזכירכם</strong>: מחשבים מתחילים לספור מ-0 ולא מ-1. בדיוק כמו במחרוזות, כך גם במערכים.</div> - </li> - <li>שימו לב שמערך בתוך מערך נקרא <strong>מערך רב מימדי</strong>. אנחנו יכולים לגשת לאיבר שנמצא בתוך מערך מסויים, כאשר המערך הזה נמצא בתוך מערך באמצעות <strong>שרשור</strong> של שתי סוגריים מרובעות ביחד. לדוגמא, על מנת לגשת לאיבר במערך שהוא האיבר השלישי במערך המשורשר והמערך המשורשר הוא האיבר השלישי במערך הראשי בשם <code>random</code>, אנו נצטרך לרשום זאת בצורה הבאה: - <pre class="brush: js">random[2][2];</pre> - </li> - <li>נסו לעשות כמה פעולות ושינויים בעצמכם על מנת להבין את הדרך שבה אנו ניגשים לאיברים במערך.</li> -</ol> - -<h3 id="מציאת_האורך_של_מערך">מציאת האורך של מערך</h3> - -<p>מציאת האורך של מערך - כלומר כמה איברים יש לו - מתבצעת בדיוק באותה דרך שבה אנחנו מוצאים את מספר התווים במחרוזת - באמצעות המאפיין {{jsxref("Array.prototype.length","length")}}.</p> - -<p>נסו להזין את הקוד הבא:</p> - -<pre class="brush: js">sequence.length; -// should return 7</pre> - -<p>מאפיין <code>length</code> גם ישמש אותנו לצורך מעבר על איברי המערך באמצעות לולאת <code>for</code> וביצוע פעולות כלשהן שנבחר על כל איבר ואיבר, כך שהלולאה תעבור על כל איברי המערך. לדוגמא:</p> - -<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13]; -for (let i = 0; i < sequence.length; i++) { - console.log(sequence[i]); -}</pre> - -<p>אנחנו נלמד יותר לעומק על לולאות במאמרים הבאים, אך בהסבר פשוט, הקוד הנוכחי אומר את הדברים הבאים:</p> - -<ol> - <li>הרצת הקוד שנמצא בין הסוגריים המסולסלות <code>{}</code> על כל איבר במערך החל מהאיבר הראשון במערך (אשר נמצא במיקום 0 כמובן). את מספר המיקום של האיבר במערך אותו אנו מייצגים באמצעות המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font>.</li> - <li>הרצת הלולאה מסוג <code>for</code> כל עוד מיקומו של האיבר במערך (שכאמור מיוצג בכל ריצה על ידי המשתנה <code>i</code>) קטן מסך כל האיברים במערך. כלומר, במקרה זה הקוד בתוך הסוגריים המסולסלות <code>{}</code> לא ירוץ כאשר המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font> יהיה שווה ל-7. (להזכירכם - אמנם יש שבעה איברים במערך, אך הספירה שלהם מתחילה ב-0, ולכן האיבר השביעי במערך, יהיה במיקום/אינדקס השישי וזו הסיבה שהשתמשנו בסימן קטן מאורך המערך (<code>></code>) ולא שווה לאורך המערך (<code>=</code>) שכן אז היינו מקבלים במיקום השביעי את הערך undefiened.</li> - <li>בתוך הסוגריים המסולסלות, רשמנו את הקוד שאנחנו רוצים שיבוצע במסגרת כל ריצה של הלולאה. במקרה הזה, הדפסנו לקונסולה את הערך הנוכחי של האיבר שעליו רצה הלולאה באותה ריצה. לצורך הדפסה לקונסולה עשינו שימוש ב-<code><a href="/en-US/docs/Web/API/Console/log">()console.log</a></code>.</li> -</ol> - -<h2 id="מס׳_מתודות_שימושיות_של_מערכים">מס׳ מתודות שימושיות של מערכים</h2> - -<p>בחלק זה אנחנו נסתכל על מתודות שימושיות של מערכים או מתודות שימושיות הקשורות למערכים, המאפשרות לנו להפוך מחרוזת למערך ומערך למחרוזת ונלמד כיצד להכניס איברים נוספים לתוך מערכים או להסיר איברים ממערך. </p> - -<h3 id="המרה_בין_מחרוזות_ומערכים">המרה בין מחרוזות ומערכים</h3> - -<p>הרבה פעמים אנחנו נקבל מידע גולמי אשר נמצא במחרוזת ארוכה ונרצה להפריד אותו לפריטי מידע אשר עמם נוכל לעשות שימוש באמצעות המרתה של המחרוזת למבנה אחר.</p> - -<p>על מנת לעשות זאת, אנחנו נעשה שימוש במתודה {{jsxref("String.prototype.split()","split()")}}. מתודה זו ממירה מחרוזת למערך ומקבלת פרמטר אחד - התו שהמתודה תחפש בתוך המחרוזת שנרצה להמיר למערך וכאשר היא תמצא את אותו תו בכל פעם, היא תפריד בין החלק במחרוזת שנמצא לפני תו זה לבין החלק במחרוזת שנמצא אחריו, וכך היא בעצם מחלקת את המחרוזת לאיברים במערך. התוצאה של מתודה זו מערך שהאיברים שלו הם המחרוזות משנה שהופרדו.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: מבחינה טכנית זוהי מתודה של מחרוזות ולא מתודה של מערכים.</p> -</div> - -<ol> - <li>בואו ננסה להבין כיצד מתודה הזו עובדת: צרו מחרוזת בקונסולה כגון זו: - <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre> - </li> - <li>עכשיו הפרידו בין התווים במחרוזת באמצעות המתודה {{jsxref("String.prototype.split()","split()")}} כך שכל פעם שיופיע התו <code>,</code> תבוצע העברה של התווים שלפניו לאיבר חדש במערך שנקרא <code>myArray</code>: - <pre class="brush: js">let myArray = myData.split(','); -myArray;</pre> - </li> - <li>נסו למצוא את האורך של המערך החדש וכן לקבל את הערך של חלק מהאיברים שלו: - <pre class="brush: js">myArray.length; -myArray[0]; // the first item in the array -myArray[1]; // the second item in the array -myArray[myArray.length-1]; // the last item in the array</pre> - </li> - <li>ניתן כמובן גם <strong>להמיר מערך למחרוזת</strong> באמצעות שימוש במתודה {{jsxref("Array.prototype.join()","join()")}}. נסו את הקוד הבא: - <pre class="brush: js">let myNewString = myArray.join(','); -myNewString;</pre> - </li> - <li>דרך נוספת של <strong>המרת</strong> <strong>מערך למחרוזת</strong> נוכל לעשות באמצעות שימוש במתודה {{jsxref("Array.prototype.toString()","toString()")}}.</li> - <li>המתודה <code>()toString</code> הרבה יותר פשוטה מאשר <code>()join</code> שכן היא לא מקבלת שום פרמטר/ארגומנט, אך יש לה מספר הגבלות. עם המתודה <code>()join</code> אנחנו יכולים להגדיר איזה תו אנחנו נרצה שיפריד בין התווים במחרוזת. נסו לדוגמא להריץ שוב את שורה מספר 4, אך עם תו מפריד אחד כמו <code>/</code> או <code>-</code>. - <pre class="brush: js">let dogNames = ['Rocket','Flash','Bella','Slugger']; -dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre> - </li> -</ol> - -<h3 id="הוספה_והסרה_של_איברים_במערך">הוספה והסרה של איברים במערך</h3> - -<p>בחלק זה נלמד כיצד להוסיף ולהסיר איברים במערך. אנו נעשה שימוש במערך <code>myArray</code> שהוגדר למעלה. לנוחיותכם, הנה הוא שוב:</p> - -<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre> - -<p>על מנת להוסיף איבר לסוף של מערך אנחנו משתמשים במתודות {{jsxref("Array.prototype.push()","push()")}} ובמתודה {{jsxref("Array.prototype.pop()","pop()")}} להסיר איבר מסוף המערך.</p> - -<ol> - <li>ננסה תחילה את המתודה <code>()push</code> — שימו לב שאנחנו צריכים לכלול איבר אחד או יותר כארגומנט/פרמטר למתודה זו, אשר אותו נרצה להכניס לסוף המערך: - - <pre class="brush: js">myArray.push('Cardiff'); -myArray; -myArray.push('Bradford', 'Brighton'); -myArray; -</pre> - </li> - <li>כשאנו מבצעים את המתודה הזו, אנו מקבלים כערך מוחזר את ה-<code>length</code> החדש של המערך, לאחר ההוספה. אם נרצה לשמור את ה-<code>length</code> החדש, אנחנו נצטרך לשמור אותו במשתנה חדש: - <pre class="brush: js">let newLength = myArray.push('Bristol'); -myArray; -newLength;</pre> - </li> - <li>הסרה של האיבר האחרון במערך מתבצע באמצעות המתודה <code>()pop</code> על המערך. נסו את הקוד הבא: - <pre class="brush: js">myArray.pop();</pre> - </li> - <li>האיבר האחרון במערך הוסר, ו<strong>הערך המוחזר של המתודה זו היא האיבר האחרון שהוסר</strong>. על מנת לשמור את האיבר הזה במשתנה חדש, ניתן לרשום את הקוד הבא: - <pre class="brush: js">let removedItem = myArray.pop(); -myArray; -removedItem;</pre> - </li> -</ol> - -<p>{{jsxref("Array.prototype.unshift()","unshift()")}} וכן {{jsxref("Array.prototype.shift()","shift()")}} עובדות בדיוק אותו הדבר כמו ש-<code>()push</code> ו- <code>()pop</code>, בהתאמה, למעט העבודה שהן מוסיפות/מסירות איברים מ<strong>תחילת המערך ולא מסופו</strong>.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>:{{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} המתודות <strong>משנות</strong> את מערך המקור.</p> -</div> - -<ol> - <li>מתודת <code>()unshift</code> — הזינו את הקוד הבא לקונסולה: - - <pre class="brush: js">myArray.unshift('Edinburgh'); -myArray;</pre> - </li> - <li>מתודת <code>()shift</code>— הזינו את הקוד הבא לקונסולה: - <pre class="brush: js">let removedItem = myArray.shift(); -myArray; -removedItem;</pre> - </li> -</ol> - -<h2 id="תרגול_עצמאי_הדפסת_המוצרים">תרגול עצמאי : הדפסת המוצרים</h2> - -<p>נחזור לדוגמא שנתנו בתחילת המאמר - הדפסת שמות המוצרים והמחירים שלהם על חשבונית, וכן חישוב של המחירים שלהם בתחתית החשבונית. בדוגמא הבאה יש שורות עם הערות המכילות מספרים (לדוגמא: <code>number 1</code>). כל שורה שכזו נועדה לציין בפניכם את המיקום שבו תצטרכו להוסיף קוד לקוד הקיים:</p> - -<ol> - <li>מתחת להערה <code>number 1 //</code> יש מספר של מחרוזות, כאשר כל אחת כוללת שם של מוצר והמחיר שלו, מופרדים על ידי הסימן <code>;</code>. אנו נרצה שתהפכו את המחרוזות הללו למערך ותאחסנו אותו במשתנה שנקרא <code>products</code>.</li> - <li>בשורה שבה נמצאת העקב <code>number 2 //</code> נמצאת לולאת ה-for שלנו. בשורה זו יש כרגע <code>i <= 0</code>, שזהו מבחן תנאי אשר גורם ל-<a href="/he/Learn/JavaScript/First_steps/A_first_splash#Loops">for loop</a> לרוץ רק פעם אחת, מכיוון שבפועל הוא ״תפסיק לרוץ כאשר <code>i</code> לא קטן יותר או שווה ל-0״, ו-<code>i</code> מתחיל ב-0. אנו נרצה שתחליפו את התנאי זה בקוד אחר כך שהלולאה תפסיק לרוץ כאשר <code>i</code> לא יהיה קטן יותר מהאורך של <code>products</code>.</li> - <li>מתחת להערה <code>number 3 //</code> אנו רוצים שתכתבו קוד שמפצל את האיבר הנוכחי במערך (<code>name:price</code>) ל-2 איברים נפרדים - אחד כולל את שם הפריט ואחד הכולל את מחירו. אם אתם לא בטוחים איך לבצע זאת, ראו <a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות של מחרוזות</a> והעמיקו בחלק {{anch("המרה בין מחרוזות ומערכים")}} של מאמר זה.</li> - <li>כחלק מהקוד למעלה, אולי גם נרצה להמיר את המחירים ממחרוזת למספר. אם אתם לא זוכרים כיצד לבצע זאת, קיראו את המאמר הבא, בחלק של <a href="/he/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">״מספרים מול מחרוזות״</a>.</li> - <li>בראשית הקוד הנוכחי קיים משתנה שנקרא <code>total</code> אשר הוצהר והושם לו ערך של 0. בתוך הלולאה (מתחת <code>number 4 //</code>) אנו נרצה שתוסיפו שורת קוד שמוסיפה את האיבר שמייצג את המחיר הנוכחי למשתנה <code>total</code> בכל ריצה של הלולאה, כך שבסוף, המחיר הכולל (<code>total</code>)יודפס לחשבונית. אולי תרצו לחזור ולעיין ב-<a href="/he/Learn/JavaScript/First_steps/Math#Assignment_operators">אופרטורים להשמה</a> על מנת לעשות זאת.</li> - <li>בנוסף, נרצה שתשנו את השורה שמתחת להערה <code>// number 5</code><code>//</code> כך שהמשתנה <code>itemText</code> יהיה בצורת כתיבה הזו לכל איבר ל-"<em>current item name — $current item price</em>", לדוגמא: "Shoes — $23.99" , כך שהמידע יוצג בתצורה הזו על גבי החשבונית. שימו לב שמדובר באיחוד של מחרוזות, לא משהו מורכב מדי שלא למדנו כבר.</li> -</ol> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 150px;"> - -<ul> - -</ul> - -<p></p> - -</div> - -<h2>Editable code</h2> - -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 410px;width: 95%"> -var list = document.querySelector('.output ul'); -var totalBox = document.querySelector('.output p'); -var total = 0; -list.innerHTML = ''; -totalBox.textContent = ''; -// number 1 - 'Underpants:6.99' - 'Socks:5.99' - 'T-shirt:14.99' - 'Trousers:31.99' - 'Shoes:23.99'; - -for (var i = 0; i <= 0; i++) { // number 2 - // number 3 - - // number 4 - - // number 5 - itemText = 0; - - var listItem = document.createElement('li'); - listItem.textContent = itemText; - list.appendChild(listItem); -} - -totalBox.textContent = 'Total: $' + total.toFixed(2); -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; -var solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background-color: #f5f9fa; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="למידה_עצמאית_5_החיפושים_האחרונים">למידה עצמאית: 5 החיפושים האחרונים</h2> - -<p>שימוש נפוץ שאנחנו עושים במתודות של מערכים כמו {{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} הוא כאשר אנחנו שומרים רישום של מספר פריטים מסויימים כגון עשרת החיפושים האחרונים שביצע המשתמש או כאשר אנחנו משתמשים באנימציה המציגה כמות מסויימת של פריטים המוצגים על גבי המסך המתחלפים ביניהם, כך שכל פעם יהיה רק מספר מסויים של פריטים. בדוגמאות אלו אובייקטים חדשים נוצרים ומתווספים למערך ואילו ישנים נמחקים על מנת לשמור על המספר שרצינו.</p> - -<p>בדוגמאות הבאות אנחנו הולכים לעשות שימוש פשוט יחסית במתודות אלו - יש לנו אתר עם תיבת חיפוש. הרעיון הוא שכאשר ערכים מוכנסים לתיבת החיפוש, חמשת החיפושים הקודמים מוצגים ברשימה. כאשר כמות החיפושים הקודמים עולה על חמש, החיפוש הקודם ביותר נמחק מהרשימה ובמקומו נכנס החיפוש האחרון ביותר בתחילת הרשימה, כך שתמיד יוצגו לנו חמשת החיפושים האחרונים.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ביישום חיפוש אמיתי, יתאפשר לנו רוב הסיכויים ללחוץ על החיפושים הקודמים ולחזור לאותם חיפושים. בדוגמא הבא נרצה להשאיר את הנושא פשוט.</p> -</div> - -<p>על מנת להשלים את המשימה, הנכם נדרשים:</p> - -<ol> - <li>להוסיף שורת מתחת להערה <code>number 1//</code> שמוסיפה את הערך הנוכחי שהוזן לתיבת החיפוש לתוך תחילת המערך. ניתן למצוא את הערך שהוזן לתיבת החיפוש באמצעות <code>searchInput.value</code>.</li> - <li>הוסיפו מתחת להערה <code>number 2</code><code>//</code> שורת קוד שמסירה את הערך שנמצא כרגע בסוף המערך.</li> -</ol> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Live output</h2> -<div class="output" style="min-height: 150px;"> - -<input type="text"><button>Search</button> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> - -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - - -<textarea id="code" class="playable-code" style="height: 370px; width: 95%"> -var list = document.querySelector('.output ul'); -var searchInput = document.querySelector('.output input'); -var searchBtn = document.querySelector('.output button'); - -list.innerHTML = ''; - -var myHistory = []; - -searchBtn.onclick = function() { - // we will only allow a term to be entered if the search input isn't empty - if (searchInput.value !== '') { - // number 1 - - // empty the list so that we don't display duplicate entries - // the display is regenerated every time a search term is entered. - list.innerHTML = ''; - - // loop through the array, and display all the search terms in the list - for (var i = 0; i < myHistory.length; i++) { - itemText = myHistory[i]; - var listItem = document.createElement('li'); - listItem.textContent = itemText; - list.appendChild(listItem); - } - - // If the array length is 5 or more, remove the oldest search term - if (myHistory.length >= 5) { - // number 2 - - } - - // empty the search input and focus it, ready for the next term to be entered - searchInput.value = ''; - searchInput.focus(); - } -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; -var solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="לסיכום">לסיכום</h2> - -<p>לאחר קריאה של מאמר זה, אתם ככל הנראה מבינים כמה מערכים הם שימושים עבורנו. אנחנו נראה אותם לאורך כל הדרך, בדרך כלל בצירוף לולאת <code>for</code> על מנת לבצע פעולה כלשהו על כל איבר במערך. אנחנו נלמד במודול הבא את הדברים השימושיים והבסיסיים שניתן לבצע עם לולאות מסוגים שונים, וביניהן לולאות <code>for</code>.</p> - -<p>כעת, בצעו את התרגול הנמצא במאמר הבא, המרכז את מרבית הנושאים שלמדנו במודול זה.</p> - -<h2 id="ראו_גם">ראו גם</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — מדריך מתקדם למערכים ודומיהם - כמו מערכים (typed arrays).</li> - <li>{{jsxref("Array")}} — דף ההסבר המורחב באתר זה בנושא <code>Array</code> — להעמקה נוספת ולהסברים נוספים בנושא המאפיינים של מערכים.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "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> diff --git a/files/he/learn/javascript/first_steps/index.html b/files/he/learn/javascript/first_steps/index.html deleted file mode 100644 index 1cccf0cf39..0000000000 --- a/files/he/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: צעדים ראשונים ב - JavaScript -slug: Learn/JavaScript/First_steps -tags: - - JavaScript - - אופרטורים - - מאמר - - מדריך - - מודול - - מחרוזות - - מספרים - - מערכים - - משימה - - משתנים - - מתחילים -translation_of: Learn/JavaScript/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">במודול JavaScript הראשון שלנו, אנחנו קודם כל נענה על כמה שאלות בסיסיות כמו "מהי JavaScript?", "איך היא ניראת?", ו"מה היא יכולה לעשות?", לפני שנתקדם לניסיון הפרקטי הראשון בכתיבת JavaScript. לאחר מכן נדון בכמה תכונות מפתח של JavaScript בפירוט, כגון משתנים, מחרוזות, מספרים ומערכים.</p> - -<h2 id="דרישות_מוקדמות">דרישות מוקדמות</h2> - -<p>לפני שנתחיל מודול זה, אינכם צריכים כל ידע מוקדם בJavaScript, אבל יש לכם צורך בהיכרות עם HTML ו-CSS. מומלץ לעבור על המודולים הבאים לפני תחילת הלימוד אודות JavaScript:</p> - -<ul> - <li><a href="https://developer.mozilla.org/he/docs/Learn/Getting_started_with_the_web">הכרות ראשונית עם הרשת</a> (שכולל בתוכו בצורה מינימלית <a href="/he/docs/Learn/Getting_started_with_the_web/JavaScript_basics">מבוא בסיסי לJavaScript</a>).</li> - <li><a href="/he/docs/Learn/HTML/Introduction_to_HTML">מבוא -HTML</a>.</li> - <li><a href="https://developer.mozilla.org/יק/docs/Learn/CSS/Introduction_to_CSS">מבוא ל-CSS</a>.</li> -</ul> - -<div class="note"> -<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="מדריכים">מדריכים</h2> - -<dl> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></dt> - <dd>ברוכים הבאים לקורס JavaScript למתחילים של MDN! במאמר ראשון זה אנו נסתכל על JavaScript מלמעלה, ונענה על שאלות כמו "מה זה?", ו-"מה זה עושה?", ונדאג שתרגישו בנוח עם המטרה של JavaScript.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">צלילה ראשונית לתוך JavaScript</a></dt> - <dd>לאחר שלמדתם משהו על התאוריה של JavaScript, ומה אתם יכולים לעשות איתה, נמשיך לקורס מזורז על הפיצ'רים הבסיסיים של JavaScript באמצעות הדרכה מעשית בלבד. כאן נבנה משחק "נחש את המספר" פשוט, צעד אחר צעד.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></dt> - <dd>כשבניתם את משחק ״נחש את המספר״ במאמר הקודם, בטח שמתם לב שהוא לא עבד. אל חשש - המאמר הנוכחי נועד לחסוך לך זמן בפתרון הבעיה ולהעניק לך כמה טיפים פשוטים איך למצוא ולתקן שגיאות בתוכניות JavaScript.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון האינפורמציה שאתם צריכים — משתנים</a></dt> - <dd>לאחר קריאת המאמרים הקודמים אתם אמורים לדעת מה היא JavaScript, מהם היכולות שלה, איך להשתמש בה לצד טכנולוגיות אינטרנט אחרות, ואיך ניראים הפיצ'רים הראשיים שלה במבט מלמעלה. במאמר זה נקבל את הבסיס האמיתי, בהתבוננות על איך לעבוד עם אבני הבנין הבסיסיות ביותר של JavaScript — המשתנים.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-JavaScript - מספרים ואופרטורים</a></dt> - <dd>בחלק הזה של הקורס, נדון במתמתיקה של JavaScript - כיצד אנו יכולים לצרף אופרטורים שונים ואפשרויות נוספות על מנת לבצע מניפולציות שונות על מספרים לצרכים שלנו.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט - מחרוזות ב-JavaScript.</a></dt> - <dd>במאמר זה נתמקד במחרוזות - כך טקסט נקרא בתכנות. נסכתל על הדברים הבסיסיים שצריך לדעת על מחרוזות כשלומדים תכנות בשפת JavaScript, כמו יצירת מחרוזות, חיבור מחרוזות וכיוצ״ב.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות של מחרוזות</a></dt> - <dd>לאחר שלמדנו את הבסיס של מחרוזות, נלמד מס׳ פעולות שימושיות שאנחנו יכולים לבצע על המחרוזות באמצעות מתודות מובנות, כגון מציאת האורך של מחרוזת טקס, חיבור ופיצול של מחרוזות, הוצאת תו אחד מתוך מחרוזת ועוד.</dd> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים</a></dt> - <dd>במאמר האחרון של מודול זה, נסתכל על מערכים - דרך מסודרת לאחסכן רשימה של פריטי מידע, תחת משתנה אחד. נבין מדוע שימוש במערך הוא שימושי מאוד, ולאחר מכן נבין כיצד ליצור מערך, לאחזר מערך, להוסיף או להסיר איברים ממערך ועוד. </dd> -</dl> - -<h2 id="בוחנים">בוחנים</h2> - -<p>הבחנים הבאים יבדקו את ההבנה שלכם בבסיס של JavaScript כפי שנלמד במדריך.</p> - -<dl> - <dt><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">יישום אינטרנט ליצירת סיפורים טיפשיים</a></dt> - <dd>במשימה זו אתם תתבקשו לקחת את הידע שלמדתם במאמרים של המודול הזה, ולממש אותם בכך שתיצרו יישום שמייצר סיפורים טיפשיים באופן אקראי. בהצלחה!.</dd> -</dl> diff --git a/files/he/learn/javascript/first_steps/math/index.html b/files/he/learn/javascript/first_steps/math/index.html deleted file mode 100644 index e5c22c141f..0000000000 --- a/files/he/learn/javascript/first_steps/math/index.html +++ /dev/null @@ -1,427 +0,0 @@ ---- -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><</code></td> - <td>קטן מ-</td> - <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין.</td> - <td><code>10 < 6</code></td> - </tr> - <tr> - <td><code>></code></td> - <td>גדול מ-</td> - <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין.</td> - <td><code>10 > 20</code></td> - </tr> - <tr> - <td><code><=</code></td> - <td>קטן מ- או שווה ל-</td> - <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין או שווה לו.</td> - <td><code>3 <= 2</code></td> - </tr> - <tr> - <td><code>>=</code></td> - <td>גדול מ- או שווה ל-</td> - <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין או שווה לו.</td> - <td><code>5 >= 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"><button>Start machine</button> -<p>The machine is stopped.</p> -</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> diff --git a/files/he/learn/javascript/first_steps/silly_story_generator/index.html b/files/he/learn/javascript/first_steps/silly_story_generator/index.html deleted file mode 100644 index 8c4ca6772a..0000000000 --- a/files/he/learn/javascript/first_steps/silly_story_generator/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Silly story generator -slug: Learn/JavaScript/First_steps/Silly_story_generator -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">בתרגול זה, תתבקשו ליישם את מה שלמדתם בכל המאמרים האחרונים במודול הנוכחי על מנת ליצור יישום קטן שמייצר סיפורים טיפשיים באופן רנדומלי. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">ידע מוקדם:</th> - <td>אנא וודאו כי עברתם על כל המאמרים במודול זה בטרם ביצוע התרגול.</td> - </tr> - <tr> - <th scope="row">מטרה:</th> - <td>לוודא הבנה של יסודות שפת JavaScript ושימוש במשתנים, מספרים,אופרטורים, מחרוזות ומערכים. </td> - </tr> - </tbody> -</table> - -<h2 id="נקודת_התחלה">נקודת התחלה</h2> - -<p>על מנת להתחיל:</p> - -<ul> - <li>הורידו את <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">הקובץ זה</a> לצורך התרגול ושמרו אותו בשם <code>index.html</code> בתיקיה במחשב שלכם. קובץ זה מכיר גם CSS על מנת לעצב את הדוגמא שנמצאת בתוכו.</li> - <li>גשו ל <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">דף המכיל מידע גולמי</a> והשאירו אותו פתוח בלשונית חדשה בדפדפן שלכם. אתם תצטרכו אותו אחר כך.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: לחילופין, אתם יכולים לעשות שימוש ב- <a class="external external-icon" href="http://jsbin.com/">JSBin</a> או <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> על מנת להשלים את התרול. אתם יכולים להדביק לתוכם את ה HTML, CSS ואת JavaScript.</p> -</div> - -<h2 id="תקציר_הפרוייקט">תקציר הפרוייקט</h2> - -<p>קיבלתם לידיכם HTML/CSS גולמי ומס׳ מחרווזת טקסט וכן מס׳ פונקציות של JavaScript. הנכם נדרשים לכתוב את הקוד הרלוונטי על מנת להפוך אותם לתוכנית שעושה את הדברים הבאים:</p> - -<ul> - <li>יוצרת סיפור חדש כאשר הכפתור "Generate random story" נלחץ.</li> - <li>מחליפה את שם ברירת המחדל "Bob" אשר נמצא בסיפור, בשם אחר, רק אם השם האחר הוכנס לתוך תיבת הטקסט "Enter custom name" לפני שכפתור יצירת הסיפור נלחץ.</li> - <li>ממירה את שיטת המשקלים והטמפרטורות משיטה אמריקאית לשיטה בריטית אם הכפתור uk מסומן לפני שנלחץ על כפתור יצירת הסיפור.</li> - <li>נייצר סיפור אקראי בכל פעם אם תלחץ על הכפתור שוב (ושוב...)</li> -</ul> - -<p>צילום המסך הבא יסייע לכם להבין כיצד זה אמור להיראות:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p> - -<p>לתת לכם קצת יותר הכוונה, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">הסתכלו בפתרון העובד</a> (אך אל תסתכלו על קוד המקור, אלא אם ממש נתקעתם)</p> - -<h2 id="פעולות_נדרשות">פעולות נדרשות</h2> - -<p>אלו הפעולות שתידשו לבצע על מנת להשלים את התרגול בהצלחה</p> - -<p>התקנה בסיסית:</p> - -<ol> - <li>צרו קובץ חדש שנקרא בשם <code>main.js</code>, באותה תיקיה שבה נמצא קובץ <code>index.html</code> שלכם</li> - <li>החילו את קובץ ה-JavaScript לתוך קובץ ה-HTML כפי שלמדנו באמצעות {{htmlelement("script")}} עם קישור ל-<code>main.js</code>. שימו אותו לפני תגית הסיום של <code></body></code>.</li> -</ol> - -<p>אתחול משתנים ופונקציות:</p> - -<ol> - <li>בקובץ הטקסט הגולמי העתיקו את כל הקוד שמופיע תחת הכותרת "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" והדביקו אותו בחלקו העליון של הקובץ <code>main.js</code>.זה נותן שלשה משתנים שמכילים הפניות לשדה הטקסט "Enter custom name" (המשתנה: <code>customName</code>) ולכפתור "Generate random story" (המשתנה:<code>randomize</code>) ולאלמנט {{htmlelement("p")}} (המשתנה:<code>story</code>) שבתחתית חלק ה HTML שאליו יועתק הסיפור בהתאמה. בנוסף יש לך פונקציה שנקראת <code>randomValueFromArray()</code> שלוקחת מערך, ומחזירה אחד מהפריטים המאוחסנים בתוך המערך באופן אקראי</li> - <li>כעת התבוננו בקטע השני שבקובץ הטקסט הגולמי "2. RAW TEXT STRINGS" זה מכיל מחרוזות טקסט that will act as input into our program. We'd like you to contain these inside variables inside <code>main.js</code>: - <ol> - <li>Store the third set of three strings inside an array called <code>insertZ</code>.</li> - <li>Store the second set of three strings inside an array called <code>insertY</code>.</li> - <li>Store the first set of three strings inside an array called <code>insertX</code>.</li> - <li>Store the first, big long, string of text inside a variable called <code>storyText</code>.</li> - </ol> - </li> -</ol> - -<p>Placing the event handler and incomplete function:</p> - -<ol> - <li>Now return to the raw text file.</li> - <li>Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your <code>main.js</code> file. This: - <ul> - <li>Adds a click event listener to the <code>randomize</code> variable so that when the button it represents is clicked, the <code>result()</code> function is run.</li> - <li>Adds a partially-completed <code>result()</code> function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.</li> - </ul> - </li> -</ol> - -<p>Completing the <code>result()</code> function:</p> - -<ol> - <li>Create a new variable called <code>newStory</code>, and set it's value to equal <code>storyText</code>. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to <code>storyText</code>, we'd only be able to generate a new story once.</li> - <li>Create three new variables called <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>, and make them equal to the result of calling <code>randomValueFromArray()</code> on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of <code>insertX</code> by writing <code>randomValueFromArray(insertX)</code>.</li> - <li>Next we want to replace the three placeholders in the <code>newStory</code> string — <code>:insertx:</code>, <code>:inserty:</code>, and <code>:insertz:</code> — with the strings stored in <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. There is a particular string method that will help you here — in each case, make the call to the method equal to <code>newStory</code>, so each time it is called, <code>newStory</code> is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.</li> - <li>Inside the first <code>if</code> block, add another string replacement method call to replace the name 'Bob' found in the <code>newStory</code> string with the <code>name</code> variable. In this block we are saying "If a value has been entered into the <code>customName</code> text input, replace Bob in the story with that custom name."</li> - <li>Inside the second <code>if</code> block, we are checking to see if the <code>uk</code> radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows: - <ol> - <li>Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.</li> - <li>Inside the line that defines the <code>weight</code> variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate <code>' stone'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li> - <li>Inside the line that defines the <code>temperature</code> variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate <code>' centigrade'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li> - <li>Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the <code>temperature</code> variable, and '300 pounds' with the contents of the <code>weight</code> variable.</li> - </ol> - </li> - <li>Finally, in the second-to-last line of the function, make the <code>textContent</code> property of the <code>story</code> variable (which references the paragraph) equal to <code>newStory</code>.</li> -</ol> - -<h2 id="רמזים_וטיפים">רמזים וטיפים</h2> - -<ul> - <li>You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.</li> - <li>If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the {{htmlelement("html")}} element red — so the entire browser window should go red if the JavaScript is applied properly: - <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> - </li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.</li> - <li>There are three instances of strings that need to be replaced. You may repeat the <code>replace()</code> method multiple times, or you can use regular expressions. For instance, <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> will replace all instances of 'love' to 'like'. Remember, Strings are immutable!</li> -</ul> - -<h2 id="Assessment">Assessment</h2> - -<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p> - -<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> diff --git a/files/he/learn/javascript/first_steps/strings/index.html b/files/he/learn/javascript/first_steps/strings/index.html deleted file mode 100644 index 8523f144ac..0000000000 --- a/files/he/learn/javascript/first_steps/strings/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: "התמודדות עם טקסט\_— מחרוזות (Strings) ב-JavaScript" -slug: Learn/JavaScript/First_steps/Strings -translation_of: Learn/JavaScript/First_steps/Strings ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "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> - -<h2 id="כוחן_של_מילים">כוחן של מילים</h2> - -<p>מילים הן אחד הדברים החשובים לבני אדם - זוהי הדרך שמרבית מאיתנו מתקשרים אחד עם השני. מאחר ורשת האינטרנט היא בעיקרה מדיה המבוססת על טקסט המאפשרת לבני אדם להחליף ביניהם מידע, זה מאוד שימוש עבורנו לקבל שליטה על הדרך שבה מילים מוצגות ברשת האינטרנט. {{glossary("HTML")}} מעניק לנו את המבנה ואת המשמעות מאחורי הטקסט שלנו, {{glossary("CSS")}} מאפשר לנו לעצב אותו ואילו JavaScript מכילה מספר אפשרויות וכללים לבצע מניפולציות שונות על מחרוזות, ליצור הודעות/התראות שונות, להראות את הטקסט הנכון כשצריך ועוד.</p> - -<p>כמעט כל התוכניות שעברנו עליהם בקורס עד כה כללו מניפולציה כלשהי על מחרוזות.</p> - -<h2 id="Strings_—_מחרוזות_-_הבסיס">Strings — מחרוזות - הבסיס</h2> - -<p>אנו נעבוד עם מחרוזות בדיוק כמו שעבדנו עם מספרים, אך עם מספר הבדלים: נתחיל בכך שנפתח את הקונסולה ונזין מספר שורות קוד:</p> - -<h3 id="יצירת_מחרוזת">יצירת מחרוזת</h3> - -<ol> - <li>על מנת להתחיל, הזן את השורות הבאות בקונסולה: - <pre class="brush: js">let string = 'The revolution will not be televised.'; -string;</pre> - בדיוק כמו שעשינו עם מספרים, אנחנו מכריזים פה על משתנה ומשימים לו ערך של מחרוזת ואז מקבלים את הערך של המשתנה. ההבדל היחיד הוא שכאשר אנחנו כותבים מחרוזת, אנחנו צריכים להשתמש במרכאות כפולות <code>""</code> או במרכאות בודדות - גרש מכל צד - <code>''</code>.</li> - <li>אם לא נעשה זאת, או שנחסיר אותן בצד ימין או שמאל, אנחנו נקבל שגיאה. נסו להזין את השורות הבאות: - <pre class="brush: js example-bad">let badString = This is a test; -let badString = 'This is a test; -let badString = This is a test';</pre> - שורות קוד אלו לא יעבדו מכיוון שכל טקסט שאינו מוקף במלואו במרכאות נחשב כשם של משתנה או שם של מאפיין או מילה שמורה וכד׳. אם הדפדפן לא מוצא את אותה מילה, הוא מחזיר שגיאה. לדוגמא: "missing; before statement". אם הדפדפן יכול לראות מתי מתחילה מחרוזת, אבל לא מתי היא מסתיימת, מכיוון שחסר מרכאות בצד כלשהו, הוא יחזיר שגיאה כגון: "unterminated string literal". אם התוכנית שלנו מעלה שגיאות כאלו, צריך לחזור ולבדוק את כל המחרוזות ולוודא שלא שכחנו מרכאות.</li> - <li>הקוד הבא יעבוד אם הגדרנו לפני את המשתנה <code>string</code>: - <pre class="brush: js">let badString = string; -badString;</pre> - <code>badString</code> כעת הוגדר לקבל את אותו ערך כמו של <code>string</code>.</li> -</ol> - -<h3 id="מרכאות_כפולות_או_בודדות">מרכאות כפולות או בודדות</h3> - -<ol> - <li>ב-JavaScript, אנחנו יכולים לבחור האם להשתמש במרכאות כפולות או במרכאות בודדות לשם עטיפת המחרוזת שלנו. שניהם יעבדו מצויין ובדיוק אותו דבר: - <pre class="brush: js">let sgl = 'Single quotes.'; -let dbl = "Double quotes"; -sgl; -dbl;</pre> - </li> - <li>יש מעט מאוד הבדלים ביניהם, וזה תלוי בכם במה להתשמש. אתם צריכים לבחור סוג אחד ואיתו להמשיך. צריך לזכור שלא ניתן להשתמש בשניהם במקביל כך שמצד אחד של מחרוזת יהיו מרכאות כפולות ומצד שני יהיו מרכאות בודדות, שכן זה יחזיר לנו שגיאה: - <pre class="brush: js example-bad">let badQuotes = 'What on earth?";</pre> - </li> - <li>הדפדפן יחשוב שהמחרוזת לא נסגרה מכיוון שכשאנחנו משתמשים בסוג אחד של מרכאות על מנת לעטוף טקסט, אנחנו יכולים להשתמש בסוג השני של המרכאות בתוך הטקסט עצמו. לדוגמא, השורות הקוד הבאות הן תקינות לחלוטין: - <pre class="brush: js">let sglDbl = 'Would you eat a "fish supper"?'; -let dblSgl = "I'm feeling blue."; -sglDbl; -dblSgl;</pre> - </li> - <li>יחד עם זאת, צריך לזכור שאנחנו לא יכולים לכלול בתוך הטקסט את סוג המרכאות שאיתו אנחנו משתמשים על מנת לעטוף את אותו הטקסט. הדוגמא הבאה תציג לנו שגיאה, שכן הדפדפן לא יודע מתי המחרוזת מסתיימת: - <pre class="brush: js example-bad">let bigmouth = 'I've got no right to take my place...';</pre> - וזה מה שמוביל אותנו לנושא הבא. תווים לבריחה ממחרוזות.</li> -</ol> - -<h3 id="תווים_לבריחה_ממחרוזת">תווים לבריחה ממחרוזת</h3> - -<p>על מנת לתקן את הבעיה בקוד הקודם, אנחנו צריכים לברוח מסימן המרכאות אשר עוטף את הטקסט. תווי בריחה שכאלו משמעותם שאנחנו עושים משהו על מנת לוודא שהם ייקראו כטקסט רגיל ולא כחלק מהקוד שלנו. ב-JavaScript, אנחנו עושים את זה באמצעות שימוש בסימן <code>\</code>נסו את זה:</p> - -<pre class="brush: js">let bigmouth = 'I\'ve got no right to take my place...'; -bigmouth;</pre> - -<p>זה עובד מצוין. אנחנו יכולים גם לברוח מתווים אחרים באותה צורה. לדוגמא: <code>"\</code>, ויש עוד. ראו <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a> לפרטים נוספים.</p> - -<h2 id="Concatenating_strings_-_שרשור_מחרוזות">Concatenating strings - שרשור מחרוזות</h2> - -<ol> - <li>שרשור נשמעת כמו מילה מורכבת שמשמעותה הפשוטה הוא חיבור ביחד. חיבור מחרוזות יחד ב-JavaScript מתבצע באמצעות האופרטור (+), באותה צורה כשהשתמשנו בו לביצוע חיבור בין מספרים, אבל בהקשר שלנו הוא מבצע משהו אחר. נסו את הקוד הבא בקונסולה: - <pre class="brush: js">let one = 'Hello, '; -let two = 'how are you?'; -let joined = one + two; -joined;</pre> - התוצאה של המשתנה שנקרא <code>joined</code> תכיל את הערך של "Hello, how are you?"</li> - <li>במשתנה השלישי, פשוט חיברנו שתי מחרוזות יחד, אך אנחנו יכולים לחבר כמה מחרוזות שנרצה, כל עוד אנחנו כוללים את סימן <code>+</code> בין כל אחת מהמחרוזות. נסו לדוגמא: - <pre class="brush: js">let multiple = one + one + one + one + two; -multiple;</pre> - </li> - <li>אתם גם יכולים לערבב בין משתנים לבין מחרוזות בפועל. נסו את הבא: - <pre class="brush: js">let response = one + 'I am fine — ' + two; -response;</pre> - </li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: כשאנחנו מכניסים מחרוזת טקסט ממשית לתוך הקוד שלנו, כשהיא עטופה במרכאות (כפולות או בודדות), זה נקרא <strong>string literal</strong>.</p> -</div> - -<h3 id="Concatenation_in_context_-_שרשור_בתוכן">Concatenation in context - שרשור בתוכן</h3> - -<p>בוא נסתכל על שרשור בפועל - הנה דוגמא ממאמרים קודמים בקורס:</p> - -<pre class="brush: html"><button>Press me</button></pre> - -<pre class="brush: js">const button = document.querySelector('button'); - -button.onclick = function() { - let name = prompt('What is your name?'); - alert('Hello ' + name + ', nice to see you!'); -}</pre> - -<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>כאן אנחנו משתמשים ב- {{domxref("window.prompt()", "window.prompt()")}} פונקציה בשורה 4, אשר מבקשת מהמשתמש לענות לשאלה באמצעות חלון קופץ, ולאחר מכן מאחסנת את הטקסט שהמשתמש הכניס לתוך משתנה נתון - במקרה הזה - המשתנה <code>name</code>.</p> - -<p>לאחר מכן אנחנו משתמשים ב-{{domxref("window.alert()", "window.alert()")}} בשורה 5, על מנת להציג למשתמש חלון קופץ נוסף המיכל מחרוזת שהרכבנו משתי מחרוזות בנויות ומהמשתנה <code>name</code>, באמצעות שרשור של המחרוזות.</p> - -<h3 id="מספרים_vs._מחרוזות">מספרים vs. מחרוזות</h3> - -<ol> - <li>מה יקרה כאשר אנחנו ננסה לחבר (לשרשר) בין מחרוזת לבין מספר? נזין את הקוד הבא בקונסולה: - <pre class="brush: js">'Front ' + 242; -</pre> - היינו מצפים שניסיון כזה יחזיר לנו שגיאה, אך זה עובד בצורה מצויינת. נסיון להציג מחרוזת כמספר לא עושה הגיון, אבל הצגת מספר כמחרוזת כן, ולכן הדפדפן ממיר את המספר למחרוזת ומאחד בין שתי המחרוזות.</li> - <li>ניתן אפילו לעשות זאת עם שני מספרים - אנחנו יכולים להכריח מספר להפוך למחרוזת על ידי עטיפה שלו במרכאות. נסו את הקוד הבא. שימו לב שאנחנו משתמשים באופרטור <code>typeof</code> על מנת לבדוק האם הערך של המשתנה הוא מספר או מחרוזת: - <pre class="brush: js">let myDate = '19' + '67'; -typeof myDate;</pre> - </li> - <li>אם יש לנו משתנה שיש לו ערך של מספר ואנחנו רוצים להמירו למחרוזת ללא ביצוע שינוי נוסף בו, או יש לנו משתנה שיש לו ערך שהוא מחרוזת ואנחנו רוצים להמירו למספר ולא לעשות בו שינוי נוסף, אנחנו יכולים להשתמש במתודות הבאות: - <ul> - <li>האובייקט {{jsxref("Number")}} יהפוך כל דבר שמועבר אליו למספר, אם הוא יכול. נסו את הקוד הבא: - <pre class="brush: js">let myString = '123'; -let myNum = Number(myString); -typeof myNum;</pre> - </li> - <li>מצד שני, לכל מספר יש מתודה שנקראת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">()toString</a></code> שתמיר כל מספר למחרוזת תואמת. נסו לדוגמא את הקוד הבא: - <pre class="brush: js">let myNum = 123; -let myString = myNum.toString(); -typeof myString;</pre> - </li> - </ul> - אלו יכולים להיות מאוד שימושיים בסיטואציות שונות. לדומא, אם משתמש מכניס מספר לתוך שדה טקסט בטופס, זה תמיד יהיה מחרוזת, גם אם הוא הזין מספרים. לעומת זאת, אם אנחנו רוצים להוסיף את המספר שהמשתמש הזין למשהו, זה חייב להיות מספר, ולכן אנחנו נצטרך להעביר את הקלט הזה דרך <code>()Number</code>. עשינו זאת בדיוק, בדוגמא שלנו ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">משחק ״נחש את הזיכרון״, בשורה 54</a>.</li> -</ol> - -<h2 id="לסיכום">לסיכום</h2> - -<p>זה היה הבסיס של מחרוזת ב-JavaScript. במאמר הבא אנחנו נסתכל על מתודות מובנות הזמינות למחרוזות בשפה זו ונלמד כיצד אנחנו יכולים להשתמש בהם על מנת לבצע מניפולציות למחרוזות שלנו או לשנות את המבנה שלהן.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "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> diff --git a/files/he/learn/javascript/first_steps/useful_string_methods/index.html b/files/he/learn/javascript/first_steps/useful_string_methods/index.html deleted file mode 100644 index 8315262c35..0000000000 --- a/files/he/learn/javascript/first_steps/useful_string_methods/index.html +++ /dev/null @@ -1,673 +0,0 @@ ---- -title: מתודות שימושיות של מחרוזות -slug: Learn/JavaScript/First_steps/Useful_string_methods -tags: - - JavaScript - - אובייקט - - חילוץ וחיבור מחרוזות - - מחרוזות - - מחרוזות ב-JavaScript - - מציאת האורך של מחרוזת - - מציאת חלק ממחרוזת -translation_of: Learn/JavaScript/First_steps/Useful_string_methods ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">לאחר שלמדנו את הבסיס של מחרוזות, נתקדם הלאה ונלמד אילו פעולות אנחנו יכולים לבצע על מחרוזות תוך שימוש במתודות מובנות, כגון מציאת אורך המחרוזת, חיבור ופיצול של מחרוזות, הפרדת תו בודד במחרוזת ועוד.</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 id="Useful_string_methods">רוב הדברים ב-JavaScript הן בעצם אובייקט. כאשר אנחנו יוצרים מחרוזת כזו לדוגמא:</p> - -<pre class="brush: js">let string = 'This is my string';</pre> - -<p>המשתנה שלנו בעצם הופך למעין מופע של אובייקט מחרוזת (a string object instance), וכתוצאה מכך לא מעט מתודות ומאפיינים הופכים לזמינים עבור המשתנה. </p> - -<p>ניתן לראות את רשימת המתודות ומאפיינים אלו בדף בנושא {{jsxref("String")}} - ראו את הכמות הלא מבוטלת הזו של מתודות ומאפיינים. </p> - -<p><strong>לפני שאתם נלחצים - אנחנו לא באמת צריכים לזכור את כל המתודות והמאפיינים הללו, לפחות לא בתחילת דרכנו. </strong>אך יש כאלו שנרצה לזכור ולתרגל שכן אנחנו נשתמש בהן לעיתים תכופות. </p> - -<p>נתחיל בתרגול על ידי הכנסת הדוגמאות הבאות ל<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>:</p> - -<h3 id="מציאת_האורך_של_מחרוזת">מציאת האורך של מחרוזת</h3> - -<p>זהו מאפיין המאפשר לנו למצוא את האורך של המחרוזת - אנחנו פשוט משתמשים במאפיין {{jsxref("String.prototype.length", "length")}}. נסו להכניס את הקוד הבא בקונסולה:</p> - -<pre class="brush: js">let browserType = 'mozilla'; -browserType.length;</pre> - -<p>זה אמור להחזיר לכם את המספר 7, מכיוון שהמחרוזת ״mozilla״ מורכבת מ-7 תווים. זה מאוד שימושי מסיבות רבות: לדוגמא, לפעמים נרצה למצוא את האורך של כל שם ברשימה של שמות ואז להציג אותם לפי האורך שלהם, או לתת למשתמש הודעה ששם המשתמש שהוא הכניס הוא ארוך מדי אם הוא עבר אורך מסויים.</p> - -<h3 id="אחזור_של_תו_ספציפי_במחרוזת">אחזור של תו ספציפי במחרוזת</h3> - -<p>בהקשר זה, אנחנו יכולים לקבל תו ספציפי במחרוזת, על ידי שימוש ב - <strong>סוגריים מרובעות</strong> בסוף המחרוזת שלנו - כלומר, אנחנו צריכים לכלול (<code>[]</code>) בסוף שם המשתנה שלנו.</p> - -<p>בתוך הסוגריים המרובעות אנחנו צריכים להכניס את מס׳ התו שאנחנו רוצים לקבל בחזרה, כך שאם נרצה את התו הראשון במחרוזת, נזין את הקוד הבא:</p> - -<pre class="brush: js">browserType[0];</pre> - -<p>שימו לב שמחשבים מתחילים לספור מ-0 ולא מ-1. על מנת לקבל את התו האחרון של <em>כל</em> מחרוזת, אנחנו יכולים להשתמש בקוד הבא המבצע שימוש גם במאפיין <code>length</code> שלמדנו למעלה.</p> - -<pre class="brush: js">browserType[browserType.length-1];</pre> - -<p>האורך של "mozilla" הוא 7 תווים, אך מכיוון שהמונה (או יותר נכון - אינדקס) מתחיל לספור מ-0, אז המיקום של התו 6 בעצם הוא המיקום של התו האחרון במחרוזת, ולכן אנחנו צריכים את הקוד <code>length-1</code>. אנחנו יכולים להשתמש בזה לדוגמא על מנת למצוא את האות הראשון בסדרה של מחרוזות ולסדר המחרוזות לפי סדר האלפבית.</p> - -<h3 id="מציאת_חלק_ממחרוזת_וחילוצו">מציאת חלק ממחרוזת וחילוצו</h3> - -<ol> - <li>לפעמים נרצה לבדוק האם מחרוזת מסויימת בת מספר תווים נמצאת בתוך מחרוזת גדולה יותר. (באופן כללי אנחנו בודקים <em>האם מחרוזת המשנה קיימת בתוך המחרוזת</em>). ניתן לבצע זאת באמצעות מתודת {{jsxref("String.prototype.indexOf()", "indexOf()")}} אשר מקבלת {{glossary("parameter")}} אחד — את מחרוזת המשנה שאנחנו נרצה לחפש בתוך המחרוזת הגדולה יותר. נסו להזין את הקוד הבא: - - <pre class="brush: js">browserType.indexOf('zilla');</pre> - קיבלנו בחזרה את הערך 2 שמציין שמחרוזת-המשנה "zilla" מתחילה במיקום 2 בתוך המחרוזת "mozilla". קוד שכזה יכול לעזור לנו לסנן מחרוזות. לדוגמא, אם יש לנו רשימה של כתובות אינטרנט, ונרצה לסנן רק את אלו המכילים את המחרוזת "zilla".</li> -</ol> - -<ol start="2"> - <li>שימו לב שניתן לבצע סינון זאת גם על דרך השלילה אשר תהיה כמובן יעילה יותר. נסו את הקוד הבא: - <pre class="brush: js">browserType.indexOf('vanilla');</pre> - קוד זה יחזיר לנו את התוצאה <code>1-</code> אשר משמעותה היא כי מחרוזת המשנה שהזנו למתודה לא קיימת במחרוזת הראשית. כאן לדוגמא, המחרוזת 'vanilla' לא נמצאה במחרוזת הראשית.<br> - <br> - אנו יכולים לעשות בזה שימוש למצוא את כל המופעים של מחרוזות <strong>שכן</strong> מכילים את מחרוזת המשנה 'mozilla' או <strong>שאינם מכילים,</strong> אם אנחנו משתמשים באופרטור שלילה כפי שמצויין למטה. - - <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) { - // do stuff with the string -}</pre> - </li> - <li>כשאנחנו יודעים היכן מחרוזת המשנה שלנו מתחילה בתוך מחרוזת ראשית, ואנחנו יודעים באיזה תו אנחנו רוצים שמחרוזת המשנה תסתיים, אנחנו יכולים להשתמש ב - {{jsxref("String.prototype.slice()", "slice()")}} נסו להזין את הקוד הבא: - <pre class="brush: js">browserType.slice(0,3);</pre> - קוד זה יחזיר לנו כתוצאה "moz" - הארגומנט הראשון שהזנו - 0 - הוא המיקום של התו הראשון במחרוזת המשנה שנרצה לחלץ, והארגומנט השני שהזנו - 3 - יהיה התו שאחרי התו האחרון במחרוזת שנרצה לחלץ. זאת אומרת, החיתוך של המחרוזת מתרחש החל מהתו הראשון ועד, אך לא כולל, התו הרביעי. להזכירכם - מחשבים מתחילים לספור מ-0 ולא מ-1.<br> - </li> - <li>בנוסף, אם נרצה לחלץ את כל התווים אחרי תו מסויים, אנחנו יכולים להשמיט את הארגומנט השני. כלומר אנחנו ניתן למתודה רק את מיקום התו שאיתו נתחיל את החילוץ. ראו את הקוד הבא: - <pre class="brush: js">browserType.slice(2);</pre> - קוד זה מחזיר את הערך "zilla" - מכיוון שהאות שבמיקום 2 היא האות z ומכיוון שהשמטנו את הארגומנט השני, המתודה חילצה את כל התווים עד סוף המחרוזת <code>browserType</code>.</li> -</ol> - -<div class="note"> -<p><strong>להזכירכם</strong>: הפרמטר השני של <code>()slice</code> הוא אופציונלי: אם נשמיט אותו, החיתוך יסתיים בסוף המחרוזת המקורית. יש גם אופציות נוספות. ראו בדף בנושא {{jsxref("String.prototype.slice()", "slice()")}} ללמוד על הנושא יותר.</p> -</div> - -<div class="note"> -<p><strong>להזכירכם</strong>: מתודות ומאפיינים אלו לא שומרות את התוצאה של המניפולציה או החישוב שהן ביצעו. על מנת לשמור את התוצאה, אנחנו צריכים לשמור אותה במשתנה חדש. כמו כן, שימו לב שמתודות ומאפיינים אלו לא שינו את מחרוזת המקור שעליה ביצענו את החישובים/מניפולציות השונות.</p> -</div> - -<h3 id="שינוי_אות_גדולה_לאות_קטנה_וההיפך">שינוי אות גדולה לאות קטנה, וההיפך</h3> - -<p>המתודות של מחרוזת {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} ו- {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} מאפשרות להמיר מחרוזת <strong>בשלמותה</strong> לאותיות גדולות או לאותיות קטנות, בהתאמה. זה יכול להיות מאוד שימוש כשנרצה לנרמל את כל הערכים שהמשתמש מכניס לפני שנעביר לשרת. להזכירכם - JavaScript היא case sensitive.</p> - -<p>נסו להכניס את הקוד הבא וראו מה התוצאה:</p> - -<pre class="brush: js">let radData = 'My NaMe Is MuD'; -radData.toLowerCase(); -radData.toUpperCase();</pre> - -<p>נסו לבדוק מה הערך של המשתנה <code>radData</code> והאם מתודות אלו שמרו בו את התוצאה של הפעלתן.</p> - -<h3 id="עדכון_חלקים_של_מחרוזת">עדכון חלקים של מחרוזת</h3> - -<p>אנחנו יכולים להחליף מחרוזת אחת במחרוזת אחרת באמצעות המתודה {{jsxref("String.prototype.replace()", "replace()")}}. מתודה זו עובדת בצורה פשוטה וברורה, למרות שניתן לבצע איתה דברים מורכבים יותר, אך לא ניכנס אליהם במדריך זה.</p> - -<p>מתודה זו מקבלת 2 ארגומנטים/פרמטרים - הראשון הוא המחרוזת שאנחנו רוצים להחליף והשני הוא המחרוזת שתיכנס במקום. נסו את הדוגמא הבאה:</p> - -<pre class="brush: js">browserType.replace('moz','van');</pre> - -<p>שימו לב שגם הפעם הערך שמוחזר לנו הוא המחרוזת החדשה שבוצעה בה ההחלפה, אך הערך הזה לא נשמר במחרוזת שעליה עשינו את ההחלפה. על מנת לקבל את המחרוזת החדשה במשתנה שלנו <code>browserType</code> אנחנו נצטרך לקבוע שהערך שלו יהיה התוצאה של ההפעלה של מתודה זו. כלומר - <code>browserType = browserType.replace('moz','van');</code></p> - -<h2 id="דוגמאות_ללמידה_עצמאית">דוגמאות ללמידה עצמאית</h2> - -<p>בחלק זה אנחנו נדריך אתכם לבצע כמה מניפוליות וחישובים על מחרוזות. בכל תרגיל המפורט למטה, יש לנו כמה מערכים של מחרוזות, ולולאה שמחשבת את הערך של כל איבר במערך ומציגה אותו ברשימה. אתם לא צריכים להבין כרגע מערכים או לולאות - אלו יוסברו בהמשך המדריך. אתם צריכים לכתוב בכל תרגיל קוד שיציג את התוצאה של המחרוזות הללו, בהתאם לתרגיל.</p> - -<p>כל דוגמא מגיע עם כפתור "Reset" על מנת לאתחל את הקוד במידה והוא השתבש וכן כפתור "Show solution" על מנת להציג את פתרון אפשרי במקרה ונתקעתם.</p> - -<h3 id="סינון_של_הודעות">סינון של הודעות</h3> - -<p>בתרגיל זה אנחנו מתחיל בתרגיל פשוט - יש לנו מערך של הודעה ברכה, אבל אנחנו רוצים למיין ולסנן רק את אלו שמכילות הודעה ברכה בהקשר של כריסמס. אנחנו רוצים שתכתוב משפט תנאי בתוך הקוד <code>( ... )if</code> אשר יבדוק כל מחרוזת וידפיס אותה לרשימה רק אם היא מכילה ברכה של כריסמס.</p> - -<ol> - <li>חשבו תחילה איך אנחנו יכולים לבדוק האם ההודעה בכל פעם היא הודעה הקשורה לכריסמס. איזה מחרוזת מוצגת בכל ההודעות האלו ואיזו מתודה יכולה לבדוק האם המחרוזת נמצאת בתוך ההודעה הזו (אשר גם היא מחרוזת).</li> - <li>אנחנו נלמד לכתוב משפט תנאי בתצורת <em>operand1 operator operand2</em>. האם הערך הנמצא מצד שמאל שווה לערך הנמצא מצד ימין? האם תוצאת הפעלת המתודה מצד שמאל, תהא שווה לערך בצד ימין לצד ימין? רמז - במקרה הנוכחי יהיה עדיף לבדוק האם תוצאת הפעלת המתודה בצד שמאל שונה מהערך בצד ימין.</li> -</ol> - -<div class="hidden"> -<h6 id="קוד_לתרגול">קוד לתרגול</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let greetings = ['Happy Birthday!', - 'Merry Christmas my love', - 'A happy Christmas to all the family', - 'You\'re all I want for Christmas', - 'Get well soon']; - -for (let i = 0; i < greetings.length; i++) { - let input = greetings[i]; - // Your conditional test needs to go inside the parentheses - הכניסו את הקוד שלכם כאן - בין הסוגריים המסולסלות של הלולאה - // in the line below, replacing what's currently there - בשורה מתחת - החליפו את מה שנמצא שם כרגע - if (greetings[i]) { - let listItem = document.createElement('li'); - listItem.textContent = input; - list.appendChild(listItem); - } -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet greetings = [\'Happy Birthday!\',' + -'\n \'Merry Christmas my love\',' + -'\n \'A happy Christmas to all the family\',' + -'\n \'You\\\'re all I want for Christmas\',' + -'\n \'Get well soon\'];' + -'\n' + -'\nfor (let i = 0; i < greetings.length; i++) {' + -'\n let input = greetings[i];' + -'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + -'\n let result = input;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n }' + -'\n}'; - -var solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="שינוי_אותיות_גדולות_וקטנות">שינוי אותיות גדולות וקטנות</h3> - -<p>בתרגיל זה יש לנו שמות של ערים בבריטניה, אך יש ערבוב של אותיות גדולות וקטנות בשמות הערים. אנחנו רוצים שתשנו את המחרוזות כך שכולן יהיו עם אותיות קטנות, למעט האות הראשונה שתהיה אות גדולה. דרך מומלצת לעשות זאת:</p> - -<ol> - <li>החליפו את כל המחרוזת שנמצאת משתנה <code>input</code> למחרוזת עם אותיות קטנות ואחסנו את התוצאה במשתנה חדש.</li> - <li>נסו לקבל את האות הראשונה של המחרוזת המאוחסנת במשתנה החדש שיצרתם ואחסנו את האות הראשונה במשתנה חדש נוסף.</li> - <li>השתמשו במשתנה זה כמשתנה המכיל את מחרוזת המשנה והחליפו את האות הראשונה לאות גדולה. אחסנו את התוצאה של ההחלפה במשתנה חדש.</li> - <li>שנו את הערך של המשתנה <code>result</code> כך שייה שווה לתוצאה הסופית ולא <code>input</code>.</li> -</ol> - -<div class="note"> -<p><strong>רמז</strong>: הפרמטרים של מתודות של מחרוזות לא חייבים להיות מחרוזות מפורשות אלא הם יכולים להיות גם משתנים וגם משתנים שמופעלים עליהן מתודות נוספות.</p> -</div> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; - -for (let i = 0; i < cities.length; i++) { - let input = cities[i]; - // write your code just below here - - let result = input; - let listItem = document.createElement('li'); - listItem.textContent = result; - list.appendChild(listItem); -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + -'\n' + -'\nfor (let i = 0; i < cities.length; i++) {' + -'\n let input = cities[i];' + -'\n let lower = input.toLowerCase();' + -'\n let firstLetter = lower.slice(0,1);' + -'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + -'\n let result = capitalized;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n' + -'\n}'; - -var solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="חילוץ_וחיבור_מחרוזות">חילוץ וחיבור מחרוזות</h3> - -<p>בתרגיל זה, יש לנו מערך שכולל מס׳ מחרוזות המכילות מידע על תחנות רכבת באנגליה. המחרוזות הן פריטי מידע המכילים 3 אותיות עם קוד התחנה, לאחר מכן מידע ממוחשב כלשהו ולאחריו הסימן <code>;</code> ולאחר מכן שם התחנה. לדוגמא:</p> - -<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> - -<p>אנו רוצים שתחלצו את קוד התחנה ואת שם התחנה, ותאחסנו אותה במחרוזת חדשה במבנה הבא:</p> - -<pre>MAN: Manchester Piccadilly</pre> - -<p>אנו ממליצים לכם לבצע זאת בצורה הבאה:</p> - -<ol> - <li>חלצו את שלושת האותיות שהן קוד התחנה ואחסנו אותן במשתנה חדש.</li> - <li>מצאו את האינדקס (מיקום) של התו <code>;</code>.</li> - <li>חלצו את שם התחנה באמצעות האינדקס של תו <code>;</code> כנקודת התחלה ואחסנו את התוצאה במשתנה חדש.</li> - <li>אחדו בין שני המשתנים ביחד עם מחרוזת רגילה למחרוזת אחת שלמה.</li> - <li>שנו את הערך של משתנה <code>result</code> שיהיה שווה לערך של המחרוזת החדשה ולא של <code>input</code>.</li> -</ol> - -<div class="hidden"> -<h6 id="קוד_נוסף_לתרגול">קוד נוסף לתרגול</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', - 'GNF576746573fhdg4737dh4;Greenfield', - 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', - 'SYB4f65hf75f736463;Stalybridge', - 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; - -for (let i = 0; i < stations.length; i++) { - let input = stations[i]; - // write your code just below here - - let result = input; - let listItem = document.createElement('li'); - listItem.textContent = result; - list.appendChild(listItem); -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + -'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + -'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + -'\n \'SYB4f65hf75f736463;Stalybridge\',' + -'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + -'\n' + -'\nfor (let i = 0; i < stations.length; i++) {' + -'\n let input = stations[i];' + -'\n let code = input.slice(0,3);' + -'\n let semiC = input.indexOf(\';\');' + -'\n let name = input.slice(semiC + 1);' + -'\n let result = code + \': \' + name;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n}'; - -var solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="לסיכום">לסיכום</h2> - -<p>היכולת שלנו לטפל בטקסט בדרכים שונות במהלך כתיבת הקוד שלנו היא חשובה מאוד וחשוב לשלוט בה - במיוחד ב - JavaScript שכן אתרי האינטרנט ויישומי האינטרנט נועדו לתקשורת בין אנשים. מאמר זה נועד להעניק לכם את הבסיס שאתם צריכים לדעת על מניפולציות של מחרוזת לעת עתה ויסייע לכם כשניכנס לדברים קצת יותר מורכבים. המאמר הבא יעסוק בסוג האחרון מבין סוגי המידע שנעבור עליהם כרגע - מערכים.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "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> diff --git a/files/he/learn/javascript/first_steps/variables/index.html b/files/he/learn/javascript/first_steps/variables/index.html deleted file mode 100644 index 3bed3e5bb3..0000000000 --- a/files/he/learn/javascript/first_steps/variables/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: אחסון המידע שאנחנו צריכים - משתנים וקבועים -slug: Learn/JavaScript/First_steps/Variables -translation_of: Learn/JavaScript/First_steps/Variables ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">לאחר קריאת המאמרים הקודמים, אתם אמורים לדעת כבה מהי JavaScript ומה היא יכולה לעשות עבורנו, כיצד אנו משתמשים ביחד עם טכנולוגיות web אחרות ומה המאפיינים העיקריים שלה ממעוף הציפור. במאמר זה אנחנו ניכנס לעומק של הבסיס של השפה ונסתכל על אחד מאבני הבניין של השפה - משתנים.</p> - -<table class="learn-box"> - <tbody> - <tr> - <th scope="row">ידע מוקדם:</th> - <td>הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.</td> - </tr> - <tr> - <th scope="row">מטרה:</th> - <td>לקבל הכרות עם הבסיס של המשתנים.</td> - </tr> - </tbody> -</table> - -<h2 id="כלים_נדרשים">כלים נדרשים</h2> - -<p>לאורך מאמר זה, תתבקשו להזין מספר שורות קוד בקונסולה על מנת לבדוק את ההבנה שלכם. אם אתם משתמשים בדפדפן במחשב, הדרך הכי טובה לבדוק את הקוד היא באמצעות הקונסולה של JavaScript. לפרטים נוספים אודות הקונסולה ראה <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a>.</p> - -<h2 id="מהו_משתנה">מהו משתנה?</h2> - -<p>משתנה הוא קופסאת אחסון או קונטיינר, לערך מסויים. כמו שאנחנו עשויים להשתמש במספר על מנת לסכום, או במחרוזת על מנת להציג טקסט. משהו מיוחד בנוגע למשתנים הוא שהערכים שלהם יכולים להשתנות. נסתכל על הדוגמא הבאה:</p> - -<pre class="brush: html"><button>Press me</button></pre> - -<pre class="brush: js">const button = document.querySelector('button'); - -button.onclick = function() { - let name = prompt('What is your name?'); - alert('Hello ' + name + ', nice to see you!'); -}</pre> - -<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>בדוגמא זו, לחיצה על הכפתור תריץ מספר שורות קוד. הקוד בשורה 4 מקפיץ הודעה על גבי המסך של המשתמש ומבקש ממנו להכניס את שמו ומאחסן את הערך שהוזן במשתנה שעונה לשם <code>name</code>. הקוד בשורה 5 מקפיץ לנו הודעה נוספת עם שמו של המשתמש, שנלקח מהערך של המשתנה <code>name</code>.</p> - -<p>על מנת להבין מדוע זה שימושי כל כך, נסו לחשוב על דרך לרשום את הדוגמא הזו, מבלי להשתמש במשתנה. זה עלול להיראות כמו הקוד הבא:</p> - -<pre class="example-bad">let name = prompt('What is your name?'); - -if (name === 'Adam') { - alert('Hello Adam, nice to see you!'); -} else if (name === 'Alan') { - alert('Hello Alan, nice to see you!'); -} else if (name === 'Bella') { - alert('Hello Bella, nice to see you!'); -} else if (name === 'Bianca') { - alert('Hello Bianca, nice to see you!'); -} else if (name === 'Chris') { - alert('Hello Chris, nice to see you!'); -} - -// ... and so on ...</pre> - -<p>אתם אולי לא מבינים עדיין את הסינטקס להצהרה על משתנה, אבל אתם מבינים את הרעיון - אם לא היו לנו משתנים, היינו צריכים לרשום כמויות עצומות של קוד, על מנת לבדוק האם השם אשר הוכנס על ידי המשתמש תואם למה שהגדרנו ואז להציג את ההודעה המתאימה. ברור ששימוש באופציה זו אינו יעיל בשום צורה ופשוט לא יעבוד שכן לא ניתן להכניס את האפשרויות בעולם.</p> - -<p>קיומם של משתנים הוא הגיוני ונדרש, וככל שנלמד יותר לעומק JavaScript אנחנו נתרגל לשימוש בהם באופן טבעי.</p> - -<p>דבר מיוחד נוסף לגבי משתנים הוא העובדה שהם יכולים להכיל כל דבר - לא רק מחרוזת או מספרים. משתנים יכולים להכיל גם מידע מורכב ואפילו פונקציות שלמות. נלמד על כך בהמשך.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אנחנו אומרים שמשתנים מכילים ערכים. זוהי אבחנה שחשוב לשים אליה. משתנים אינם ערכים בעצמם; הם רק קופסאות אחסון - קונטיינרים, בעבור ערכים. ניתן לדמיין זאת באמצעות התמונה הבאה:</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> - -<h2 id="Declaring_a_variable_-_הצהרה_על_משתנה">Declaring a variable - הצהרה על משתנה</h2> - -<p>על מנת לעשות שימוש במשתנה, אנחנו קודם כל צריכים ליצור אותו, או יותר מדוייק, אנחנו צריכים להצהיר עליו. על מנת להצהיר על משתנה אנחנו צריכים להשתמש במילה השמורה <code>var</code> <strong>או</strong> במילה השמורה <code>let</code> ולאחריהן השם שנרצה לתת למשתנה:</p> - -<pre class="brush: js">let myName; -let myAge;</pre> - -<p>כאן הצהרנו על שני משתנים שנקראים <code>myName</code> ו- <code>myAge</code>. נסו להזין את השורות האלו בקונסולה. לאחר מכן, נסו ליצור משתנה אחד או שניים בעצמכם.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ב- JavaScript, כל הוראת קוד (לא כל שורת קוד) צריכה להסתיים עם הסימן <code>;</code> - אם לא נכניס סימן זה, הקוד רוב הסיכויים יעבוד, אבל אם נכניס מספר שורות קוד ביחד, כנראה שלא. אנא התרגלו להוסיף <code>;</code> בעת שאתם כותבים את הקוד שלכם.</p> -</div> - -<p>אתם יכולים לבדוק האם הערכים האלו קיימים בסביבת ההרצה על ידי הדפסה של שמות המשתנים לקונסולה כפי שמתואר להלן:</p> - -<pre class="brush: js">myName; -myAge;</pre> - -<p>כרגע למשתנים אלו אין כל ערך. אנחנו רק הצהרנו עליהם ובכך הם נוצרו, אך הם כרגע מעין ״קופסאות ריקות״. כשאנחנו מזינים את שמות המשתנים בקונסולה, קיבלנו בקונסולה <code>undefined</code>. אם לא היינו מצהירים עליהם, היינו מקבלים הודעת שגיאה אחרת. נסו להבין מה ההבדל ביניהם.</p> - -<pre class="brush: js">scoobyDoo;</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אל תבלבלו בין משתנה שקיים אך לא מכיל ערך לבין משתנה שלא קיים כלל. אם נחשוב עליהם כקופסאות אחסון, משתנה שהוצהר אך לא נתנו לו ערך יצר לנו קופסא לאחסון, אך לא אחסנו בו כלום. כלומר הקופסא קיימת אך ריקה. במקרה כזה נקבל את הערך <code>undefined</code>.</p> - -<p>לעומת זאת, משתנה שלא הוצהר, זה כאילו לא יצרנו את קופסת האחסון מלכתחילה ולכן הודעת השגיאה שנקבל היא שהדפדפן לא מוצא את המשתנה, כלומר, הוא לא מוצא את קופסאת האחסון (כי לא יצרנו אותה).</p> -</div> - -<h2 id="השמת_ערך_למשתנה">השמת ערך למשתנה</h2> - -<p>ברגע שהצהרנו על משתנה, אנחנו יכולים לאתחל אותו עם ערך שנשים לו. אנחנו עושים זאת על ידי סימן ה-״שווה״ - <code>=</code>, ולאחריו הערך שאנחנו נרצה לשים במשתנה. לדוגמא:</p> - -<pre class="brush: js">myName = 'Chris'; -myAge = 37;</pre> - -<p>נסו להזין בקונסולה את הקוד הבא. אתם אמורים להראות שהערכים שהשמנו למשתנים מוחזרים לנו בקונסולה. שוב, אנחנו יכולים לקבל את הערך של משתנה על ידי הזנת שמו לקונסולה. ננסה זאת שוב:</p> - -<pre class="brush: js">myName; -myAge;</pre> - -<p>ניתן להצהיר על משתנה וכן להשים לו ערך באותו זמן:</p> - -<pre class="brush: js">let myDog = 'Rover';</pre> - -<p>זו ככל הנראה תהיה הדרך שבה נרשום משתנים - הצהרה והשמה באותה שורה שכן זוהי דרך מהירה יותר מאשר לרשום הצהרה בשורה אחת והשמה של ערך בשורה אחרת.</p> - -<h2 id="ההבדלים_בין_var_לבין_let">ההבדלים בין var לבין let</h2> - -<p>בשלב זה אתם בטח שואלים ״מדוע צריכים שתי מילים שמורות על מנת להגדיר משתנים?״ או ״למה יש לנו גם את <code>let</code> וגם את <code>var</code>?״</p> - -<p>הסיבות הן בעיקר היסטוריות. כאשר JavaScript רק נוצרה, היה קיים רק <code>var</code>. זה עבד במרבית המקרים, אבל היו לו סוגיות שונות בצורה ובדרך שבה הוא עבד. ההתנהגות שלו הייתה יכולה להיות מבלבלת וקצת מעצבנת. לכן, <code>let</code> נוצר בגרסאות מודרניות יותר של JavaScript, והציג מילה שמורה חדשה ליצירת משתנים, אשר פועלת בצורה אחרת מהמילה השמורה <code>var</code> ומתקנת את הסוגיות שהיו עם דרך ההגדרה הקודמת. סתם לידיעה - דרך זו של שימוש במילה השמורה <code>let</code> החלה בגרסת העדכון החשובה של JavaScript שנקראת ES2015 (ES6).</p> - -<p>אנו נגע במספר הבדלים פשוטים ביניהם, אך לא ניגע בכולם כרגע. אנו נבין את ההבדלים ביניהם בהמשך ככל שניכנס יותר לעומק של השפה. אם תרצו להרחיב בנושא - היכנסו לקישור <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let reference page</a>.</p> - -<p>נתחיל בכך שאם נרשום מספר שורות קוד שבהן נצהיר על משתנה ונשים בו ערך. אנחנו יכולים להצהיר על משתנה באמצעות שימוש במילה <code>var</code> גם לאחר שהשמנו בו ערך והתוכנית עדיין תעבוד. כלומר, המשתנה יהיה מוכר לדפדפן. לדוגמא:</p> - -<pre class="brush: js">myName = 'Chris'; - -function logName() { - console.log(myName); -} - -logName(); - -var myName;</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: קוד זה לא יעבוד כשננסה להכניס אותו שורה אחר שורה בקונסולה אלא רק כשנכניס את כל שורות קוד באמצעות JavaScript.</p> -</div> - -<p>זה עובד בגלל מנגנון שנקרא <strong>Hoisting. </strong>אם תרצו להרחיב על כך, ראו <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">קישור</a> לפרטים נוספים על הנושא. בקצרה המשמעות שלו היא שב-JavaScript הצהרות על משתנים (והצהרות בכללי) מבוצעות לפני שיתר הקוד רץ, כלומר, הצהרה על משתנה במקום מסויים בקוד תהיה זהה להצהרה שלו בתחילת הקוד. יחד עם זאת, חשוב לשים לב שמנגנון זה משפיע רק על הצהרה של משתנים ולא על השמה של ערכים אליהם. הערכים שלהם יושמו אליהם בהתאם לסדר ריצת הקוד. </p> - -<p>Hoisting לא מתבצע יותר עם המילה השמורה <code>let</code>. אם נשנה את <code>var</code> ל- <code>let</code> בדוגמא למעלה, זה יציג לנו שגיאה. זה דבר טוב כמובן - הצהרה על משתנה לאחר שאנחנו משימים לו ערך גורמת לבלבול ולקושי בקריאה והבנה של הקוד.</p> - -<p>בנוסף, כשאנחנו משתמשים ב- <code>var</code>, אנחנו יכולים להצהיר על המשתנה שיצרנו באמצעותו כמה פעמים שנרצה ואילו בעת שימוש ב- <code>let</code> אנחנו לא יכולים. הקוד הבא לדוגמא, יעבוד:</p> - -<pre class="brush: js">var myName = 'Chris'; -var myName = 'Bob';</pre> - -<p>אבל הקוד הבא יקפיץ לנו שגיאה בשורה השנייה:</p> - -<pre class="brush: js">let myName = 'Chris'; -let myName = 'Bob';</pre> - -<p>ולכן נצטרך לרשום אותו בצורה הבאה:</p> - -<pre class="brush: js">let myName = 'Chris'; -myName = 'Bob';</pre> - -<p>שוב, מדובר בכלל חשוב אשר נועד למנוע הצהרה חוזרת של משתנה. אנו ממליצים לבצע שימוש כמה שיותר ב- <code>let</code> מאשר ב-<code>var</code> . אין שום סיבה שנרצה להשתמש ב- <code>var</code>, אלא אם אנחנו צריכים לתמוך בגרסאות ישנות של אינטרנט אקספלורר (גרסאות ישנות אלו לא תומכות ב- <code>let</code> אלא רק החל מגרסה 11; הדפדפן אדג׳ לעומת זאת תומך במלואו ב-<code>let</code>).</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אנחנו בשלבים של עדכון הדוגמאות בקורס זה לשימוש ב- <code>let</code> במקום <code>var</code>.</p> -</div> - -<h2 id="עדכון_משתנה">עדכון משתנה</h2> - -<p>ברגע שמשתנה הוצהר והושם לו ערך, אנחנו יכולים לשנות (או לעדכן) את הערך שנמצא באותו משתנה, פשוט על ידי השמה של ערך אחר. נסו להזין את הקוד הבא בקונסולה:</p> - -<pre class="brush: js">myName = 'Bob'; -myAge = 40;</pre> - -<h3 id="מס׳_כללים_בנוגע_לשמות_משתנים">מס׳ כללים בנוגע לשמות משתנים</h3> - -<p>אנחנו יכולים לקרוא למשתנים שלנו כמעט בכל שם שנרצה, אבל ישנן מס׳ הגבלות. באופן כללי, היצמדו לשימוש באותיות לועזיות (0-9, a-z, A-Z) ולתו מסוג קו תחתון.</p> - -<ul> - <li>אל תשתמשו בתווים אחרים מכיוון שהם עלולים לגרום לשגיאות או שיהיה קשה להבין אותם - דמיינו שמתכנת צרפתי קורא למשתנים בשפה הצרפתית ומתכנת בריטי מנסה להבין מה פשר המשתנה.</li> - <li>אל תשימו קו תחתון בתחילת שמו של המשתנה - קו תחתון זה משמש במספר מבנים של JavaScript על מנת להצביע על דברים ספציפיים וזה עשוי לגרום לבלבול.</li> - <li>אל תשתמשו במספרים בתחילת השם של המשתנה. זה יגרום לשגיאה.</li> - <li>מוסכמה מקובלת היא להשתמש ב-<a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">״lower camel case"</a> - כאשר אנו קוראים למשתנה בשם המכיל מס׳ מילים, המילה הראשונה תתחיל באות קטנה, ואילו יתר המילים לאחר יתחילו באות גדולה.</li> - <li>אנא תנו למשתנים שלכם שמות הגיוניים ואינטואטיביים, על מנת לנסות לתאר כמה שניתן איזה מידע הם מכילים. אל תשתמשו באותיות או במספרים לבד. מצד שני, אל תקראו למשתנים בשמות ארוכים מדי.</li> - <li>משתנים הם case sensitive — כך לדוגמא המשתנה <code>myage</code> הוא משתנה שונה מהמשתנה <code>myAge</code>.</li> - <li>נסו להימנע משימוש במילים השמורים של JavaScript בתור שמות למשתנים. מילים שמורות אלו אותן מילים שמרכיבות את הסינטקס של השפה. כלומר, אנחנו לא יכולים להשתמש במילים כגון: <code>var</code>, <code>function</code>, <code>let</code>, וכן גם <code>for</code> כשמות למשתנים שלנו. הדפדפן יזהה אותם כרכיבי קוד אחרים, מה שעלול לגרום רוב הסיכויים לשגיאה.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ניתן למצוא את רשימת המילים השמורות של השפה ב- <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> -</div> - -<p>דוגמא למתן שמות למשתני בצורה נכונה:</p> - -<pre class="example-good">age -myAge -init -initialColor -finalOutputValue -audio1 -audio2</pre> - -<p>דוגמא למתן שמות למשתני בצורה לא נכונה:</p> - -<pre class="example-bad">1 -a -_12 -myage -MYAGE -var -Document -skjfndskjfnbdskjfb -thisisareallylongstupidvariablenameman</pre> - -<p>מילים שמורות:</p> - -<pre class="example-invalid">var -Document -</pre> - -<p>נסו ליצור מספר משתנים חדשים בהתאם לכללים שציינו למעלה.</p> - -<h2 id="סוגי_משתנים">סוגי משתנים</h2> - -<p>ישנם מס׳ סוגים של מידע שנוכל לאחסן במשתנים. בחלק הזה אנחנו נתאר אותם בקצרה. במאמרים הבאים אנו נלמד אותם לעומק.</p> - -<h3 id="Numbers_-_מספרים">Numbers - מספרים</h3> - -<p>אנחנו יכולים לאחסן מספרים כמשתנים, בין אם הם מספר שלם, כמו 30, או בין אם הם מספר עשרוני, כמו 2.456. ב- JavaScript אנחנו לא צריכים להצהיר על סוג המשתנה, בשונה מכמה שפות תכנות אחרות. כשאנחנו נותנים למשתנה ערך מסוג מספר, אנחנו <strong>לא</strong> משימים את הערך בין גרשיים. לדוגמא:</p> - -<pre class="brush: js">let myAge = 17;</pre> - -<h3 id="Strings_-_מחרוזות">Strings - מחרוזות</h3> - -<p>מחרוזות אלו חלקים של טקסט. כאשר אנחנו נותנים למשתנה ערך של מחרוזת, אנחנו צריכים לעטוף את המחרוזת בגרשיים כפולות <code>" "</code> או בגרש בודד <code>' '</code> אחרת JavaScript עלולה לנסות לפרש את הקוד כשם נוסף למשתנה. לדוגמא:</p> - -<pre class="brush: js">let dolphinGoodbye = 'So long and thanks for all the fish';</pre> - -<h3 id="Booleans_-_בוליאנים">Booleans - בוליאנים</h3> - -<p>בוליאנים אלו ערכי אמת או שקר. משתנים שמכילים ערך בוליאני יכולים לקבל 2 ערכים: או ערך אמת <code>true</code> או ערך שקר <code>false</code>. לדוגמא:</p> - -<pre class="brush: js">let iAmAlive = true;</pre> - -<p>בפועל, אנחנו נשתמש במשתנה מסוג בוליאני בדרך הבאה:</p> - -<pre class="brush: js">let test = 6 < 3;</pre> - -<p>כאן ביצענו שימוש באופרטור ״קטן מ-״ (<code><</code>) על מנת לבדוק האם 6 קטן מ-3. כפי שניתן לצפות, זה יחזיר לנו <code>false</code> מכיוון ש-6 לא קטן מ-3. נלמד יותר לעומק על אופרטורים אלו בהמשך הקורס.</p> - -<h3 id="Arrays_-_מערכים">Arrays - מערכים</h3> - -<p>מערך הוא בעצם אובייקט יחיד, המכיל מספר ערכים המתוחמים בתוך סוגריים מרובעות. נסו להכניס את הקוד הבא לתוך הקונסולה:</p> - -<pre class="brush: js">let myNameArray = ['Chris', 'Bob', 'Jim']; -let myNumberArray = [10, 15, 40];</pre> - -<p>ברגע שהמערכים האלו מוצהרים, אנחנו יכולים לגשת לכל איבר במערך באמצעות ציון המיקום שלו במערך. נסו את הקוד הבא:</p> - -<pre class="brush: js">myNameArray[0]; // should return 'Chris' -myNumberArray[2]; // should return 40</pre> - -<p>הסוגרים המרובעות מצביעות על האינדקס המתאים למיקום של האיבר שאנחנו רוצים שיוחזר. שימו לב שהמיקומים במערך מתחילים מ-0. כלומר, האיבר הראשון במערך הוא באינדקס 0.</p> - -<p>נרחיב על מערכים ב<a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">מאמר בהמשך הקורס</a>.</p> - -<h3 id="Objects_-_אובייקטים">Objects - אובייקטים</h3> - -<p>בתכנות, אובייקט הוא מבנה של קוד שמדמה אובייקט בעולם האמיתי. הוא מייצג מעין קופסא המכילה מידע על הגובה שלו, הרוחב שלו, האורך שלו או מאפיינים נוספים. אנחנו יכולים לדוגמא לייצר אובייקט שידמה אדם, ואובייקט זה יכיל מידע על שמו, גובה, משקל, שפה מדוברת וכד׳.</p> - -<p>הכניסו את הקוד הבא בקונסולה:</p> - -<pre class="brush: js">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre> - -<p>על מנת לאחזר מידע המאוחסן באובייקט, השתמשו בקוד הבא:</p> - -<pre class="brush: js">dog.name</pre> - -<p>אנו לא נעמיק בנושא אובייקטים כעת - אנו נלמד לעומק את הנושא ב<a href="/en-US/docs/Learn/JavaScript/Objects">מאמר</a> בהמשך.</p> - -<h2 id="השמת_משתנים_דינאמית">השמת משתנים דינאמית</h2> - -<p>JavaScript היא שפה דינאמית. שלא כמו שפות אחרת, ב- JavaScript אנחנו לא צריכים לציין איזה סוג של מידע יאוסן בתוך המשתנה (מספרים, מחרוזות, מערכים וכד׳).</p> - -<p>לדוגמא, אם אנחנו מצהירים על משתנה ונותנים לו ערך שעטוף בגרשיים, הדפדפן יתייחס אליו כמחרוזת:</p> - -<pre class="brush: js">let myString = 'Hello';</pre> - -<p>אם נכניס מספרים בתוך הגרשיים, הוא עדיין יהיה מחרוזת!</p> - -<pre class="brush: js">let myNumber = '500'; // oops, this is still a string -typeof myNumber; -myNumber = 500; // much better — now this is a number -typeof myNumber;</pre> - -<p>נסו להכניס את הקוד שלמעלה לקונסולה שורה אחר שורה, וראו התוצאות. אתם תשימו לב שאתם משתמשים באופטור מיוחד שנקרא <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> - אופרטור זה מחזיר לנו את סוג הערך המאוחסן במשתנה שהעברנו לו. הפעם הראשונה שהרצנו את האופרטור הזה, הוא החזיר <code>string</code>, שכן באותה נקודה, המשתנה <code>myNumber</code> מכיל מחרוזת, <code>'500'</code>. בדקו מה הקונסולה תחזיר כשנזין את שתי השורות האחרונות.</p> - -<h2 id="Constants_-_קבועים">Constants - קבועים</h2> - -<p>להרבה שפות תכנות יש את הקונספט של <em>constant</em> או <em>קבוע</em> — משתנה שברגע שהכנסו לו ערך, אותו ערך לא משתנה. ישנן הרבה סיבות מדוע נרצה להשתמש בהם, מסיבות אבטחה - (אם סקריפט של אתר אחר מנסה לשנות את הערכים זה עלול ליצור בעיות) עד לפתרון שגיאות של הקוד והבנה שלו (קשה יותר לשנות בטעות ערכים שלא אמורים להשתנות).</p> - -<p>בשלביה המוקדים של השפה, קבועים לא היו קיימים. כעת יש בשפה קבועים ואנו משתמשים במילה השמורה <code>const</code>, על מנת להצהיר עליהם ולהשים בערך ערך שלא ישתנה:</p> - -<pre class="brush: js">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; -const hoursInDay = 24;</span></span></span></span></pre> - -<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> עובד בדיוק כמו <code>let</code>, למעט העובדה שאנחנו לא יכולים לתת ל- <code>const</code> ערך חדש. בדוגמא הבאה, השורה השנייה תציג לנו שגיאה בקונסולה:</span></span></span></span></p> - -<pre class="brush: js">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; -daysInWeek = 8;</span></span></span></span></pre> - -<h2 id="לסיכום">לסיכום</h2> - -<p>במאמר זה למדנו אודות משתנים - מהם, כיצד ליצור אותם ומה ההבדל בינם לקבועים. במאמר הבא אנחנו נלמד אודות מתמתיקה בסיסית ב-JavaScript.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "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> diff --git a/files/he/learn/javascript/first_steps/what_is_javascript/index.html b/files/he/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index 4ad34985e7..0000000000 --- a/files/he/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,447 +0,0 @@ ---- -title: מה זה JavaScript? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -tags: - - API - - JavaScript - - דרכים להוסיף JavaScript לדף - - הסבר על JavaScript - - מדריך - - מה זה JavaScript? - - מתחילים -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -<div>{{LearnSidebar}} </div> - -<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">ברוך הבא לקורס JavaScript למתחילים של MDN. במאמר זה נסתכל על JavaScript ממעוף הציפור, ונענה על שאלות כגון ״מה זה JavaScript?״ ״מה ניתן לבצע איתה?״ ונוודא שאתם מרגישים בנוח עם מטרתה. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>ידע בסיסי בשימוש במחשב וכן הבנה בסיסית של HTML ו-CSS.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>להכיר מעט את JavaScript, מה היא יכולה לעשות, ואיך היא קשורה לאתר אינטרנט.</td> - </tr> - </tbody> -</table> - -<h2 id="הגדרה_ממבט_על">הגדרה ממבט על</h2> - -<p>JavaScript היא שפת תכנות (שפת סקריפט) אשר מאפשרת לכם ליישם דברים מורכבים על גבי דפי האינטרנט - בכל פעם שדף אינטרנט מבצע משהו דינאמי כגון עדכון תכנים באופן עיתי, הצגת מפה אינטרקאטיבית, אנימציות שונות דו ותלת מימדיות וכד׳ (בניגוד לדף אינטרנט סטטי שרק מציג תוכן ללא שינוי כלשהו בדף), ניתן להיות בטוח ש JavaScript לוקחת בכך חלק. JavaScript היא החלק השלישי ב-״עוגת״ טכנולוגיות ה-web כאשר את שתי הטכנולוגיות האחרות למדנו בחלקים אחרים של איזור הלמידה (<a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>). </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{glossary("HTML")}} היא שפת סימון תגיות (ואינה שפת תכנות) שאנו משתמשים בה על מנת לבנות את תוכן הדף ולהעניק לו משמעות, לדוגמא, הגדרת פסקאות, כותרות, טבלאות מידע, סרגל ניווט וכן הטמעת תמונות ווידאו באתר.</li> - <li>{{glossary("CSS")}} היא בעצם סט של כללים המאפשר לנו להחיל כללי עיצוב שונים על תוכן דף ה-HTML בדרכים שונות כגון: רקע, גופן, צורת הפריסה של התוכן על גבי הדף, וכד׳. </li> - <li>{{glossary("JavaScript")}} היא שפת התכנות אשר מאפשרת לנו ליצור באופן דינאמי תוכן, לעדכן תוכן באופן דינאמי, לשלוט במולטימדיה, להנפיש תמונות, ועוד ועוד. </li> -</ul> - -<p>שלושת השפות בנויות כשכבות אחת על גבי השנייה, כפי שניתן לראות באיור למעלה. ננסה להבין זאת באמצעות טקסט פשוט. נסמן את הטקסט באמצעות HTML, על מנת לתת לו מבנה ומטרה. בדוגמא הנוכחית למטה, סימנו את הטקסט באלמנט מסוג פסקה <code><p></code>.</p> - -<pre class="brush: html"><p>Player 1: Chris</p></pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> - -<p>לאחר מכן, נוסיף כמה כללי CSS על מנת לעצב את האלמנט בצורה מסויימת:</p> - -<pre class="brush: css">p { - font-family: 'helvetica neue', helvetica, sans-serif; - letter-spacing: 1px; - text-transform: uppercase; - text-align: center; - border: 2px solid rgba(0,0,200,0.6); - background: rgba(0,0,200,0.3); - color: rgba(0,0,200,0.6); - box-shadow: 1px 1px 2px rgba(0,0,200,0.4); - border-radius: 10px; - padding: 3px 10px; - display: inline-block; - cursor: pointer; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> - -<p>לבסוף, נוסיף קוד JavaScript על מנת להעניק דינאמיות והתנהגות מסוימת:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -} -</pre> - -<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>נסו ללחוץ על הגרסה האחרונה של הטקסט וראו מה קורה.אתם יכולים למצוא את קוד המקור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">כאן</a>, או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">דף אינטרנט</a>.</p> - -<p>JavaScript יכולה לבצע הרבה יותר - נעמיק בכך בהמשך הלמידה.</p> - -<h2 id="אז_מה_ניתן_לבצע_עם_JavaScript">אז מה ניתן לבצע עם JavaScript?</h2> - -<p>הבסיס של JavaScipt מכיל כמה ממאפייני התכנות הנפוצים, אשר מאפשרים לנו לבצע פעולות כגון: </p> - -<ul> - <li><strong>אחסון ערכים במשתנים</strong> - בדוגמא לעיל, ביקשנו מהמשתמש שיכניס את שמו ולאחר מכן, אחסנו את השם שהמשתמש הזין במשתנה בשם <code>name</code>.</li> - <li><strong>ביצוע פעולות שונות על טקסט (ובתכנות ״מחרוזת״) </strong>- בדוגמא לעיל, לקנו את המחרוזת ״:Player 1״ ועליה וחיברנו אותה (שורה 8) למשתנה <code>name</code>.</li> - <li><strong>הרצת קוד כתגובה לאירועים מסויימים המתרחשים על גבי דף האינטרנט </strong>- השתמשו באירוע (Event) מסוג {{Event("click")}} על מנת לאתר התרחשות של לחיצת עכבר, ובתגובה להתרחשות אירוע זה, הרצנו קוד אשר מעדכן את תוכן הטקסט.</li> - <li><strong>ועוד הרבה יותר. </strong></li> -</ul> - -<p>דבר מעניין נוסף הוא הפונקציונליות אשר בנויה על גבי הבסיס של שפת JavaScript. אותם API (<strong>Application Programming Interfaces</strong> ) מעניקים לנו אפשרויות משמעותיות אשר נוכל להשתמש בהם כאשר אנו כותבים את קוד ה-JavaScript שלנו. API בתרגום לעברית זה ״ממשק תכנות יישומים״. </p> - -<p>API אלו חלקי קוד מוכנים אשר מאפשרים לנו כמפתחים להטמיע תוכניות אשר בצורה אחרת היה קשה מאוד להטמיע או אף בלתי אפשרי. הם מאפשרים לנו את הנוחות בתכנות, כפי שרהיטים מוכנים להרכבה (לדוגמא: איקאה) מאפשרים את הנוחות (המסויימת) בעיצוב דירה. הרבה יותר נוח לקחת סט מוכן להרכבה של מדף המכיל פלטת עץ מוכנה, עם ברגים ומעמד על מנת ליצור מדף קיר, מאשר להתחיל מהבסיס: למצוא את העץ המתאים, לחתוך אותו לגודל המתאים, למצוא את הברגים המתאימים ועוד. </p> - -<p>באופן כללי, API מחולקים לשתי קטגוריות:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> - -<p><strong>API של הדפדפן</strong> (<strong>Browser APIs</strong>) - אלו API מובנים בתוך דפדפן האינטרנט, ומאפשרים לקבל מידע/נתונים מסביבת העבודה של המשתמש או לבצע דברים שימושים מורכבים. לדוגמא: </p> - -<ul> - <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} מאפשר לנו לבצע מניפולציות ופעולות שונות על HTML ו-CSS כגון יצירה, שינוי, מחיקה, עיצוב של דף האינטרנט באופן דינאמי וכד׳. כך, בכל פעם שאנו רואים חלונית קופצת על גבי דף, או תוכן חדש שמוצג בדף האינטרנט, זו פעולה של ה-DOM.</li> - <li>The {{domxref("Geolocation","Geolocation API")}}מאפשר לנו לקבל מידע גיאוגרפי. כך בעצם <a href="https://www.google.com/maps">Google Maps</a> מאתר את המיקום שלנו ומציג אותו על גבי המפה.</li> - <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs מאפשרים לנו ליצור גרפיקות מונפשות ואנימציות, דו מימדיות ותלת מימדיות. ניתן לראות דוגמאות מדהימות שאנשים יצרו באמצעותו. technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> כמו {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} מאפשרים לנו לבצע דברים מעניינים עם מולטימדיה, כגון להפעיל וידאו ואודיו בדף עצמו, או ליצור וידאו באמצעות שימוש במצלמה של המשתמש (או של משתמש אחר) ועוד. ראו דוגמא פשוטה על מנת להבין את הרעיון ב-<a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: הרבה מהדוגמאות אשר הובאו למעלה, לא יעבדו בדפדפנים ישנים - במהלך הניסוי והטעיה במהלך הקורס, אנו נצטרך לעשות שימוש בדפדפנים מתקדמים על מנת לעשות שימוש בדוגמאות אלו. דפדפנים אלו יכולים להיות כרום, פיירפוקס, אדג׳, אופרה.</p> - -<p>כמו כן, ככל ונתקדם בשלבי הפיתוח של הקוד, נצטרך לקחת בחשבון <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">בדיקת תאימות לדפדפנים השונים</a> יותר לעומק, על מנת שנוכל לאפשר ללקוח להשתמש בכל הפונקציונליות שהגדרנו. </p> -</div> - -<p><strong>API של צד שלישי</strong> לא בנויים בתוך הדפדפן כברירת מחדל, ובעיקרון אנחנו נצטרך לקבל את הקוד והמידע שלהם ממקום אחר באינטרט. לדוגמא:</p> - -<ul> - <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> מאפשר לנו לדוגמא להציג את הציוצים האחרונים שלנו באתר שלנו.</li> - <li><a href="https://developers.google.com/maps/">Google Maps API</a> וכן <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> מאפשרים לנו להטמיע מפות באתר שלנו וכן מתן הגדרות מסויימות למפות אלו.</li> -</ul> - -<div class="note"> -<p><strong>לתשומת לב</strong>: APIs אלו הם נושאים מתקדמים יחסית, ואנחנו לא נגע בהם במודול זה. ניתן למצוא מידע נוסף ב- <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> -</div> - -<p>כמובן שיש עוד המון אפשרויות!, יחד עם זאת, כנראה שלאחר למידה כה קצרה של JavaScript, עדיין לא ניצור את פייסבוק או גוגל הבאים, אך ככל שנתקדם במדריך ונבין לעומק הבסיס, נתקדם בדרך הנכונה. </p> - -<h2 id="מה_JavaScript_עושה_על_גבי_דף_האינטרנט">מה JavaScript עושה על גבי דף האינטרנט?</h2> - -<p>כאן אנו נתחיל להסתכל על קוד, ובזמן שנעשה זאת, ננסה להבין מה קורה בפועל, כאשר JavaScript רצה בדף האינטרנט.</p> - -<p>בוא נחזור בקצרה על מה בפועל קורה כשאנו מעלים דף אינטרנט בדפדפן. (דיברנו על כך במאמר <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">כיצד CSS עובד</a>). </p> - -<p>כאשר אנו מעלים דף אינטרנט בדפדפן, אנו מריצים את הקוד (HTML, CSS ו-JavaScript) בתוך סביבת הריצה (לשונית הדפדפן). ניתן לדמות את זה למפעל אשר מקבל אליו את חומרי הגלם (הקוד) ומייצר מכך מוצר מסויים (דף האינטרנט).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> - -<p>JavaScript מורצת על ידי מנוע JavaScript של הדפדפן עצמו, <u><strong>לאחר</strong></u> שה-HTML וה-CSS הורכבו והושמו בדף האינטרנט שלנו. דבר זה מאפשר לנו להבטיח שהמבנה והעיצוב של דף האינטרנט הושלם ונמצא במקומו בזמן ש-JavaScript תחל לרוץ. </p> - -<p>מכיוון ששימוש נפוץ ועיקרי ב-JavaScript הוא האפשרות להעניק דינאמיות ולשנות HTML ו-CSS באמצעות Document Object Model API, מדובר בדבר הכרחי על מנת לאפשר זאת, שכן אם JavaScript תרוץ לפני שרכיבי ה-HTML וכללי העיצוב של CSS נטענו במלואם, עלולים להתרחש שגיאות באותה דינאמיות שביקשנו להעניק באמצעות JavaScript.</p> - -<h3 id="אבטחה_בדפדפן">אבטחה בדפדפן</h3> - -<p>לכל לשונית בדפדפן יש מעין ״סל״ או מתחם נפרד להרצת הקוד - בשפה מקצועית סלים או מתחמים אלו נקראים ״סביבות הרצה״ - זאת אומרת, שברוב המקרים, קוד בכל לשונית ירוץ באופן נפרד לחלוטין מלשוניות אחרות בדפדפן, ולא יוכל לגשת או להשפיע על הקוד בלשונית אחרת. דבר זה הינו דבר חשוב בהיבטי אבטחה - שכן אחרת, זה היה פותח אפשרות נוספות להאקרים לפרוץ לאתרים או לגנוב מידע. </p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: יש דרכים להעביר קוד ומידע בין אתרים/לשוניות שונות בצורה בטוחה, אך נושאים אלו הינם מתקדמים ולא נדון בהם בקורס זה.</p> -</div> - -<h3 id="סדר_הריצה_של_JavaScript">סדר הריצה של JavaScript </h3> - -<p>כאשר הדפדפן נתקל בבלוק של קוד JavaScript, באופן כללי הוא יריץ את הקוד מלמעלה למטה. המשמעות היא שצריך לשים לב לסדר שבו אנו רושמים את הקוד. לדוגמא, בוא נחזור לבלוק הקוד שראינו בדוגמא הקודמת:</p> - -<pre class="brush: js">const para = document.querySelector('p'); - -para.addEventListener('click', updateName); - -function updateName() { - let name = prompt('Enter a new name'); - para.textContent = 'Player 1: ' + name; -}</pre> - -<p><u>שורה 1</u>: בקוד זה אנחנו בעצם מגדירים משתנה מסוג <code>const</code> (נרחיב עליו בהמשך) וקוראים לו בשם <code>para</code>, ובאמצעות ה-DOM אנחנו בוחרים את האלמנט HTML הראשון מסוג <code>p</code>.</p> - -<p><u>שורה 2:</u> אנו מצמידים למשתנה שהגדרנו מתודה בשם <code>event listener</code> (נרחיב על כך בהמשך) שבעצם ״תקשיב״ כאשר יתרחש אירוע מסוג לחיצה על ה-<code>para</code>, כלומר, על האלמנט <code>p</code>, קוד בלוק שנקרא <code>updateName</code> ירוץ. בלוק קוד זה הניתן לשימוש חוזר נקרא ״פונקציה״ והוא מוגדר בשורות 5-8. </p> - -<p>שורות 5-8: הגדרה של הפונקציה<code>updateName.</code> פונקציה זו מבקשת מהמשתמש להכניס את שמו ומשנה את התוכן של <code>para</code> לשמו של המשתמש ביחד עם המחרוזת ״:Player 1״. </p> - -<p>אם נשנה את הסדר של שורות הקוד, לדוגמא, נחליף בין שורות 1 ו-3, אנו נקבל שגיאה ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה של הדפדפן</a> מסוג: <code>TypeError: para is undefined</code>. זה אומר שכאשר אנו מבצעים להוסיף את <code>event listener</code>- האובייקט <code>para</code> עדין לא קיים ולכן לא נוכל להוסיף לו <code>event listener</code>.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: זוהי שגיאה מאוד נפוצה - חשוב לשים לב שהאובייקטים שאנו מנסים לגשת אליהם קיימים בטרם אנו מנסים לעשות איתם פעולות כלשהן. </p> -</div> - -<h3 id="קוד_מהודר_מול_קוד_מפורש">קוד מהודר מול קוד מפורש</h3> - -<p>יכול להיות שנתקלתם במושגים כגון <strong>שפה מפורשת</strong> או <strong>שפה מקומפלת/מהודרת</strong> בהקשר של תכנות ופיתוח תוכנה.</p> - -<p>בשפות שהינן שפות ״<strong>מפורשות</strong>״, הקוד רץ מלמעלה למטה, והתוצאה של הרצת הקוד תוחזר במיידי, אנו לא צריכים לעשות טרנספורמציה כלשהי לקוד או שינוי שלו לתבנית אחרת לפני שהדפדפן יריץ אותו. </p> - -<p>לעומת זאת, שפות ״<strong>מקומפלות</strong>״ או שפות ״<strong>מהודרות״</strong> נדרשות לבצע שינוי כלשהו לתבנית אחרת לפני שהן יוכלו לרוץ על ידי המחשב. לדוגמא, C/C++ מקומפלות לשפת assembly לפני הרצה על ידי המחשב. </p> - -<p>JavaScript היא שפה קלת-משקל ומעין מפורשת (בפועל, כן מבוצע קימפול, אך לא נרחיב על הנושא). לשני סוגי השפות יש יתרונות, אך לא נדון בהם כרגע. </p> - -<h3 id="קוד_צד-לקוח_מול_קוד_צד-שרת">קוד צד-לקוח מול קוד צד-שרת</h3> - -<p>ככל הנראה נתקלת במושגים קוד צד-לקוח (<strong>client-side</strong>) וקוד צד-שרת (<strong>server-side</strong>), במיוחד בהקשר של פיתוח Web. קוד צד-לקוח הוא קוד שרץ על גבי המחשב של המשתמש - כאשר צופים בדף אינטרנט, קוד צד-לקוח של דף האינטרנט יורד, מורץ ומוצג על ידי הדפדפן. במודול זה אנו נגע בעיקר ב- <strong>JavaScript של צד-לקוח.</strong></p> - -<p><strong>קוד צד-שרת</strong> מצד שני, רץ על גבי השרת, והתוצאה שלו מורדת ומוצגת בדפדפן. דוגמאות לשפות פיתוח קוד צד-שרת כוללות בין היתר את PHP, Python, Ruby, ASP.NET וגם...JavaScript. כן, JavaScript יכולה לשמש גם כשפת פיתוח עבור צד-שרת. לדוגמא, בסביבת הפיתוח הפופולרית Node.js. ניתן להרחיב את הלמידה על JavaScript כשפת קוד-שרת בנושא הייעודי שלנו <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>. </p> - -<h3 id="קוד_דינאמי_מול_קוד_סטאטי">קוד דינאמי מול קוד סטאטי</h3> - -<p>המושג <strong>דינאמיות</strong> (<strong>dynamic</strong>) משמש הן לתיאור קוד צד-לקוח והן לתיאור קוד צד-שרת והוא מתייחס לאפשרות לעדכן את התצוגה של דף אינטרנט או יישום אינטרנט כך שיוצגו דברים אחרים בנסיבות אחרות ויווצר תוכן חדש ככל שנדרש. </p> - -<p>קוד צד-שרת יוצר באופן דינאמי תוכן חדש על גבי השרת, לדוגמא, מייצא מידע מתוך מאגר הנתונים, ואילו קוד צד-לקוח מייצר תוכן חדש בתוך הדפדפן של המשתמש, לדוגמא, יוצר טבלת HTML חדשה וממלא אותה בנתונים שביקשנו מהשרת, ואז מציג למשתמש את הטבלה על גבי דף האינטרנט.</p> - -<p>המשמעות של דינאמיות היא מעט שונה בין צד לקוח לצד שרת, אך הן קשורות אחת לשנייה, ובדרך כלל, הן עובדות יחד. </p> - -<p>דף אינטרנט שאין לו שום דינאמיות או עדכוני תוכן מכונה כדף <strong>סטאטי</strong> - הוא מציג למשתמש את אותו תוכן כל הזמן. </p> - -<h2 id="כיצד_נוסיף_JavaScript_לדף_האינטרנט_שלנו">כיצד נוסיף JavaScript לדף האינטרנט שלנו?</h2> - -<p>JavaScript מוחלת על דף ה-HTML בדרך דומה לדרך שבה אנו מחילים את כללי ה-CSS.</p> - -<p>בעוד ש-CSS משתמש באלמנט {{htmlelement("link")}} על מנת להחיל גיליונות עיצוב חיצוניים ובאלמנט {{htmlelement("style")}} על מנת להחיל גיליונות עיצוב פנימיים, JavaScript צריכה אלמנט אחד - {{htmlelement("script")}}. נבין לעומק כיצד זה עובד: </p> - -<h3 id="Internal_JavaScript_(כאלמנט_בתוך_קובץ_ה-HTML)">Internal JavaScript (כאלמנט בתוך קובץ ה-HTML)</h3> - -<ol> - <li>אנא צרו העתק על גבי המחשב שלך של קובץ הדוגמא שלנו: <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>.</li> - <li>פתחו את הקובץ בדפדפן ובעורך הקוד. אתם תראו ש-HTML יצר דף אינטרנט פשוט המכיל כפתור שניתן ללחוץ עליו.</li> - <li>בעורך הקוד - הוסיפו את הקוד הבא בתוך ה-head, לפני התגית <code></head></code>:</li> - <li> - <pre class="brush: html"><script> - - // JavaScript goes here - -</script></pre> - </li> - <li>כעת, נוסיף קצת קוד JavaScript בתוך האלמנט {{htmlelement("script")}} על מנת שהדף יבצע משהו מעניין. לשם כך, הוסיפו את הקוד הבא מתחת לכיתוב: " :JavaScript goes here line //״</li> - <li> - <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); - } - - const buttons = document.querySelectorAll('button'); - - for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); - } -});</pre> - </li> - <li>שמרו את הקובץ ורעננו את הדפדפן - כעת אתם אמורים להבחין שכאשר אתם לוחצים על הכפתור, נוצרת כל פעם פסקה חדשה מתחת לפסקה הקודמת. </li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אם הדוגמא לעיל לא עובדת לכם, בדקו האם שמרתם את הקובץ בשם הנכון, האם יש לו סיומת <code>html</code>? האם הוספתם את האלמנט {{htmlelement("script")}} ישר לפני תגית הסגירה <code></head></code> ? להזכירכם, <strong>JavaScript היא case sensitive, וזה יכול להיות מאוד מסתכל. שימו לב לדקויות</strong><strong>.</strong></p> -</div> - -<div class="note"> -<p><strong>לתשומת לב</strong>: תוכלו לראות את הגרסה הזו גם ב- GitHub בקישור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">כדף אינטרנט</a>.</p> -</div> - -<h3 id="External_JavaScript_(קישור_קובץ_JavaScript_חיצוני)">External JavaScript (קישור קובץ JavaScript חיצוני)</h3> - -<p>הכנסת JavaScript בתוך קובץ ה-HTML עובד בסדר גמור, אך מה אם נרצה לשים את קוד ה-JavaScript בקובץ אחר? נראה כיצד עושים זאת. </p> - -<ol> - <li>ראשית, צרו קובץ חדש באותה תיקיה שבו נמצא ה-HTML בשם <code>script.js</code> - וודאו שיש לו את סיומת הקובץ js על מנת שהוא יזוהה כ-JavaScript.</li> - <li>החליפו את האלמנט {{htmlelement("script")}} עם האלמנט {{htmlelement("script")}} : - <pre class="brush: html"><script src="script.js" defer></script></pre> - </li> - <li>בתוך קובץ <code>script.js</code>, הוסיפו את הקוד הבא: - <pre class="brush: js">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - </li> - <li>שמרו ורעננו את הדפדפן. זה עובד בדיוק אותו דבר כמו JavaScript פנימי, רק שכעת JavaScript נמצאת בקובץ חיצוני. באופן כללי, שמירת קוד JavaScript בקובץ חיצוני עדיפה בהיבט ארגון הקוד ושימוש חוזר שלו בכמה קבצי HTML. בנוסף, זה מאפשר לנו לקרוא את ה-HTML בצורה ברורה יותר.</li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ניתן לראות את הגרסה הזו של הקוד בקישור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> וכ-<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">דף אינטרנט</a>.</p> -</div> - -<h3 id="Inline_JavaScript_handlers_(בתוך_אלמנט_ספציפי_בקובץ_ה-HTML)">Inline JavaScript handlers (בתוך אלמנט ספציפי בקובץ ה-HTML)</h3> - -<p>תשומת לב כי לפעמים אנחנו ניתקל בקוד JavaScript שכתוב בתוך אלמנט ספציפי בקובץ ה-HTML. זה נראה כך: </p> - -<div id="inline_js_example"> -<pre class="brush: js example-bad">function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -}</pre> - -<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> -</div> - -<p>ניתן את את הקוד הבא:</p> - -<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>לקוד זה יש את פונקציונליות זהה לקוד בשני החלקים הקודמים, כלומר, הוא מבצע בדיוק את אותו דבר, רק שאלמנט הכפתור - {{htmlelement("button")}} מכיל בתוכו <code>onclick</code> על מנת לאפשר לפונקציה לרוץ כשהכפתור נלחץ.</p> - -<p><strong>בבקשה לא לבצע שימוש בשיטה זו. </strong>זה נחשב ל-bad practice ״לזהם״ את קובץ HTML יחד עם JavaScript ולא יעיל, שכן בשיטה זו צריך להוסיף <code>()onclick=״createParagraph״ </code>לכל אחד מהכפתורים שיהיו בדף. </p> - -<p>לעומת זאת, שימוש ב-JavaScript בלבד, מאפשר לנו לבחור את כל הכפתורים באמצעות קוד פשוט וקצר. לדוגמא: </p> - -<pre class="brush: js">const buttons = document.querySelectorAll('button'); - -for(let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<p>ממבט ראשון זה אומנם נראה ארוך יותר מהאפשרות הראשונה, אך זה יעבוד לכל הכפתורים בדף, בכל כמות שהיא.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: נסו לשנות קצת את הגרסה של <code>apply-javascript.html</code> והוסיפו עוד כפתורים לקובץ. כשתרעננו את הדף, תראו שכל כפתור שנלחץ, יוצר פסקה. </p> -</div> - -<h3 id="שיטות_לטעינת_סקירפטים_(Script)">שיטות לטעינת סקירפטים (Script)</h3> - -<p>ישנן כמה סוגיות עם טעינה של סקריפטים באותו זמן. </p> - -<p>בעיה נפוצה היא שכל אלמנטי ה-HTML בדף מועלים בסדר שבה הם מוצגים/רשומים, מלמעלה למטה. אם אנחנו משתמשים ב-JavaScript על מנת לבצע מניפולציות באלמנטים על הדף (או יותר מדוייק, ב-DOM) הקוד שלנו לא יעבוד אם ה- JavaScript תיטען לפני שה-HTML שבו אנחנו מנסים לבצע מניפולציה ייטען בעצמו.</p> - -<p>בדוגמאות למעלה, ה-JavaScript הפנימי וקובץ ה-JavaScript החיצוני נטענו ורצו בראש המסמך, לפני שה-HTML הועבר. זה יכול ליצור שגיאה. על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript בתור אלמנט <code>script</code>, הוספנו את הקוד הבא: </p> - -<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { - ... -});</pre> - -<p>זהו ״<strong>מאזין לאירוע</strong>״ - <strong>event listener</strong>, אשר ״מקשיב״ לאירוע של הדפדפן בשם ״DOMContentLoaded״. אירוע זה מעיד על כך שגוף ה-HTML, כל תוכן שנמצא בתוך תגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);"><body></span></font> הועלה בשלמותו. כך, קוד JavaScript בתוך אותו בלוק לא ירוץ עד אשר האירוע יחל, ולכן השגיאה נמנעה. בהמשך הקורס, נרחיב על אירועים ומאזינים לאירועים. </p> - -<p>על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript באמצעות קובץ חיצוני, אנחנו משתמשים באפשרות יחסית חדשה של JavaScript, שהיא תכונה (attribute) בשם <code>defer</code>. שבעצם אומרת לדפדפן להמשיך לטעון את ה-HTML ברגע שהוא הגיע לתגית האלמנט <code><script></code>:</p> - -<pre class="brush: js"><script src="script.js" defer></script></pre> - -<p>בשני המקרים, ה-HTML ייטען במקביל והקוד יעבוד. </p> - -<div class="note"> -<p><strong>תשומת לב</strong>: במקרה של JavaScript הנטען מקובץ חיצוני, אנחנו לא השתמשנו באירוע <code>DOMContentLoaded</code> מכיוון שתכונת ה-<code>defer </code>פתרה את הבעיה. יחד עם זאת, ניתן להשתמש ב-<code>defer</code> ב-JavaScript חיצוני בלבד. </p> -</div> - -<p>דרך מקובלת (ואינה נדרשת יותר) לפתור את הבעיה הזו, הייתה לשים את אלמנט ה-<code>script</code> שלנו ישר מתחת לתגית הסגירה של body. כלומר ישר מתחת לתגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);"><body</span><span style="background-color: rgba(220, 220, 220, 0.498039);">/</span><span style="background-color: rgba(220, 220, 220, 0.498039);">></span></font>כך שראשית ייטען כל ה-<code>body</code>. הבעיה עם פתרון זה הוא שטעינה/העברה של הסקריפט חסום לחלוטין עד אשר ה-HTML DOM נטען באופן מלא. באתרים גדולים עם כמות גדולה של JavaScript, זה יכול ליצור בעית ביצועים אשר גורמת להאטת האתר.</p> - -<h4 id="async_and_defer">async and defer</h4> - -<p>בעיקרון יש דרכים נוספות לעקוף את סוגיית חסימת הסקריפט - באמצעות — <code>async</code> and <code>defer</code>.</p> - -<p>סקריפטים בעלי תכונה של <code>async</code> יורדו מבלי לחסום את הדף ויורצו ברגע שהסקריפט יסיים לרדת. אין בטחון שהסקריפטים ירוצו בסדר מסויים, אלא שהם פשוט לא יעצרו מיתר הדף מלהיות מוצג. דרך טובה להשתמש ב-<code>async</code> היא כאשר הסקריפטים בדף רצים באופן עצמאי אחד מהשני ולא תלויים בסקריפטים אחרים בדף.</p> - -<p>לדוגמא:</p> - -<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> - -<script async src="js/script2.js"></script> - -<script async src="js/script3.js"></script></pre> - -<p>לא ניתן להסתמך על כך שהסקריפטים ירוצו בסדר שבה הם הועלו. הראשון עלול להיטען אחרי השני או השלישי, ובמקרה הזה, כל פונקציה לדוגמא אשר מוגדרת באותם סקריפטים ותלויה בקובץ הראשון, תציג שגיאה כי הקובץ הראשון לא מוגדר בזמן שהסקריפט השני או השלישי רץ.</p> - -<p><code>defer</code> לעומת זאת, גורמת לכך שהסקריפטים ירוצו בסדר שבה הם מוצגים על גבי הדף ותריץ אותם ברגע שהסקריפט והתוכן יורדו:</p> - -<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> - -<script defer src="js/script2.js"></script> - -<script defer src="js/script3.js"></script></pre> - -<p>פה מה שיקרה הוא שכל הסקריפטים עם התכונה של <code>defer</code> ייטענו בסדר שבו הם מופיעים בדף. כך, אנחנו יכולים להיות בטוחים שהקובץ הראשון ייטען במלואו לפני שהקובץ השני יתחיל לרוץ וכך הלאה. </p> - -<p>לסיכום:</p> - -<ul> - <li>אם הסקריפטים שלנו לא צריכים לחכות לקבצי סקריפטים אחרים והם יכולים לרוץ עצמאית, נשתמש ב-<code>async</code>.</li> - <li>אם הסקריפטים צריכים לחכות לקבצי סקריפטים אחרים ותלויים בה, נשתמש ב-<code>defer</code> ונסדר את הסקריפטים בדף בסדר שבו אנו רוצים להריץ אותם. </li> -</ul> - -<h2 id="הערות_ב-JavaScript">הערות ב-JavaScript</h2> - -<p>כמו בשפות HTML ו-CSS, גם ב-JavaScript ניתן להוסיף הערות בקוד, אשר הדפדפן יתעלם מהן ונועדו על מנת לספק הוראות למפתחים אחרי כיצד הקוד עובד, וגם לכם, אפשרות לרענן את זכרונכם. <strong>הערות הן מאוד שימושיות</strong>, אנא בצעו בהם שימוש לעיתים קרובות, במיוחד עבור יישומים גדולים. </p> - -<p>יש שני סוגי הערות:</p> - -<ul> - <li><strong>הערת בת שורה אחת</strong>, ונכתבת באמצעות הוספת התווים<code> // </code>: - - <pre class="brush: js">// I am a comment</pre> - </li> - <li><strong>הערת רבת שורות,</strong> הנכתבת בין התווים <code>*/</code> לתווים <code>/*</code> : - <pre class="brush: js">/* - I am also - a comment -*/</pre> - </li> -</ul> - -<p>לדוגמא: </p> - -<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body. - -function createParagraph() { - let para = document.createElement('p'); - para.textContent = 'You clicked the button!'; - document.body.appendChild(para); -} - -/* - 1. Get references to all the buttons on the page in an array format. - 2. Loop through all the buttons and add a click event listener to each one. - - When any button is pressed, the createParagraph() function will be run. -*/ - -const buttons = document.querySelectorAll('button'); - -for (let i = 0; i < buttons.length ; i++) { - buttons[i].addEventListener('click', createParagraph); -}</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: באופן כללי - יותר הערות בדרך כלל עדיף מקצת מדי הערות, אבל צריך לשים לב לא למצוא את עצמנו מוסיפים יותר מדי הערות שמסבירות מהן המשתנים שהגדרנו (במקרה כזה יהיה עדיף כבר להשתמש בשם הגיוני) או הערות שמסבירים פעולות פשוטות ומובנות בקלות. </p> -</div> - -<h2 id="לסיכום">לסיכום</h2> - -<p>כעת עשינו את הצעד הראשון לתוך עולמה של JavaScript. התחלנו עם קצת תיאוריה על מנת להתחיל להתרגל להשתמש בה ולהבין מה הדברים שאנחנו יכולים לבצע איתה. בהמשך הדרך ראינו מספר דוגמאות קוד ולמדנו כיצד JavaScript משתלבת באתר האינטרנט שלנו, יחד עם רכיבים נוספים. </p> - -<p>JavaScript עלולה להיראות לנו קצת מלחיצה או לא ברורה בשלב זה, אבל אל דאגה, בקורס הזה אנחנו הולכים בצעדים קטנים אשר נבנים בצורה הגיונית. במאמר הבא אנחנו נעבור ליישום פרקטי ונתחיל בבניית דוגמאות JavaScript שלכם באופן עצמאי.</p> - -<ul> -</ul> - -<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "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> diff --git a/files/he/learn/javascript/first_steps/what_went_wrong/index.html b/files/he/learn/javascript/first_steps/what_went_wrong/index.html deleted file mode 100644 index 87d85d786c..0000000000 --- a/files/he/learn/javascript/first_steps/what_went_wrong/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -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"><p class="lowOrHi"></p></pre> - </li> - <li>כאן אנחנו רואים שאנחנו צריכים סלקטור של קלאס, אשר מתחיל עם (<code>.</code>), אבל הסלקטור שמועבר במתודה <code>()querySelector</code> בשורה 48 אינו מכיל נקודה. זו יכולה להיות הבעיה, נסו לשנות את <code>lowOrHi</code> ל- <code>.lowOrHi</code> וראו מה קורה.</li> - <li>שמרו ורעננו את הדף ו-<code>()console.log</code> אמור להחזיר את האלמנט <code><p></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> |