MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

עכשיו כשלמדתם קצת על התיאוריה של JavaScript, אנחנו יכולים להיכנס לעומק יותר ולצדדים הפרקטיים. אנחנו נבנה יחד משחק ״נחש את המספר״, צעד אחד צעד. 

ידע מוקדם: הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.
מטרה: להתנסות בכתיבת קוד JavaScript ולהבין כיצד לנסות לעשות זאת.

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

הרבה מהמאפיינים והאפשרויות ב-JavaScript זהים לשפות תכנות אחרות - כמו לדוגמא לולאות, פונקציות וכד׳. הסינטקס אולי שונה, אבל הרעיונות בגדול דומים.

לחשוב כמו מתכנת או מתכנתת

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

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

דוגמא — משחק ״נחש את המספר״

במאמר זה אנחנו נראה לך כיצד ליצור משחק פשוט:

נסו לשחק עם הקוד קצת, הכירו את המשחק לפני שאתם ממשיכים הלאה.

תדמיינו שהבוס שלכם נתן את התיאור הקצר ליצירת המשחק הזה:

הבוס: ״אני רוצה שתצרו משחק פשוט של ״נחש את המספר״. 

הוא אמור ליצור מספר בין 1 ל-100, כאשר המשתתף צריך לנחש את המספר בכפולות של 10. 

אחרי כל פעם שהמשתתף ניחש את המספר, המשחק יגיד לו אם הוא טעה או צדק, אם הוא טעה, הוא יגיד לו האם הניחוש היה גבוה מדי או נמוך מדיץ בנוסף, המשחק צריך להגיד למשתתף כמה ניחושים הוא ביצע כבר. המשחק יסתיים ברגע שהמשתתף ינחש נכונה את המספר האקראי או ברגע שנגמרו לו הנסיונות. כשהמשחק הסתיים, המשתמש צריך לקבל אפשרות להתחיל את המשחק מחדש. 

עכשיו, ננסה להפוך את למשימות פשוטות, בצורה מתוכננת כמה שאפשר: 

  1. צור מספר בין 1 ל-100.
  2. שמור את הניסיון של המשתתף. תתחיל במספר 1 שכן זהו הניסיון הראשון.
  3. ספק למשתמש דרך לנחש את המספר האקראי.
  4. ברגע שהמתשמש ניחש, שמור את הניחוש שלו כדי שתוכל להציג לו את הניחושים הקודמים.
  5. בדוק האם המשתמש ניחש את המספר האקראי.
  6. אם ניחש נכונה:
    1. הצג הודעת זכייה. 
    2. תמנע מהמשתמש להזין ניחושים נוספים.
    3. תציג למשתמש אפשרות לאתחל את המשחק.
  7. אם המשתמש לא ניחש נכונה ונותרו לו הנסיונות :
    1. תציג למשתמש שהוא טעה.
    2. תאפשר לו לנחש שוב.
    3. תעלה את מספר הנסיונות שלו ב-1.
  8. אם המשתמש לא ניחש נכונה ונגמרו לו הנסיונות:
    1. תציג למשתמש שהמשחק נגמר.
    2. תמנע מהמשתמש להזין ניחושים נוספים.
    3. תציג למשתמש אפשרות לאתחל את המשחק.
  9. ברגע שהמשחק אותחל מחדש, תוודא שהלוגיקה והנראות של המשחק מאותחלים לחלוטין וחזור לצעד מספר 1.

כעת נראה כיצד ניתן להפוך את רשימת המשימות הזו לקוד של JavaScript.

הגדרות ראשונות

על מנת להתחיל את המדריך, צרו עותק מקומי של הקובץ number-guessing-game-start.html או ראו כדף אינטרנט.

פתחו אותו גם בעורך הקוד וגם בדפדפן. בנקודה זו אתם תראו כותרת, פסקת הוראות וטופס להכניס ניחוש, אבל הטופס לא עובד כראוי. 

אנחנו נכניס את הקוד שלנו בתוך האלמנט <script> בתחתית קובץ ה-HTML:

<script>

  // Your JavaScript goes here

</script>

הוספת משתנים לשם אחסון המידע

ראשית, הכניסו את השורות הבאות תוך האלמנט <script> :

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;

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

אנו יוצרים משתנה באמצעות שימוש במילה שמורה של JavaScript בשם letאו var ולאחר מכן בשם שאנחנו רוצים להעניק למשתנה שלנו. (אנחנו נלמד על ההבדלים ביניהם במאמר בהמשך).

קבועים לעומת זאת, אלו מעין קופסאות אחסון שנועדו לאחסן ערכים שאנחנו לא נרצה לשנות, ואותם אנחנו יוצרים באמצעות מילה שמורה בשם  const. במקרה שלנו אנחנו משתמשים בקבועים על מנת לאחסן את ההפניות לאלמנטים בדף ה-html, כלומר לממשק המשתמש. אמנם יכול להיות שהתוכן שלהם ישתנה, אבל ההפניה לאותו אלמנט תישאר קבועה לאורך התוכנית.

על מנת לשים ערך מסויים במשתנה או בקבוע מסויים, אנחנו משתמשים בסימן ״שווה״ (=), ולאחר מכן הערך שאנחנו רוצים להשים באותו משתנה או קבוע.

בדוגמא שלנו :

  • המשתנה הראשון — randomNumber — הושם לו ערך אקראי בין  1 ל- 100, באמצעות שימוש במתודה אשר נמצאת ב-JavaScript.
  • שלושת הקבועים הראשונים נועדו על מנת לאחסן או להשים את ההפנייה לפסקאות הרלוונטיות ב-html אליהם אשר התוכן שלהם ימולא בערכים שיינתו להם בהמשך: 
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
  • שני הקבועים הבאים נועדו לאחסן הפנייה לקלט של הטופס ולכפתור השליחה ונועדו לשם שליטה בניחוש שביצע המשתמש.
  • <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
    <input type="submit" value="Submit guess" class="guessSubmit">
  • שני המשתנים האחרונים שלנו נועדו לאחסן את מס׳ הניחושים וכן להוות הפנייה לכפתור הריסט, שאינו קיים לבינתיים.

לתשומת לב: אתם תלמדו עוד על משתנים וקבועים בהמשך הקורס, החל מהמאמר הבא.

פונקציות

הוסיפו את הקוד הבא, מתחת לקוד הקיים שלכם:

function checkGuess() {
  alert('I am a placeholder');
}

פונקציות הם בעצם חלקי קוד הניתנים לשימוש חוזר, אותם ניתן לרשום פעם אחת, ולהריץ שוב ושוב. זה מאוד שימושי. יש כמה דרכים להגדיר פונקציה אבל כעת אנחנו נתמקד בצורה פשוטה אחת. 

כאן אנחנו הגדרנו את הפונקציה באמצעות שימוש במילה שמורה function ולאחר מכן שם הפונקציה וסוגריים (). לאחר מכן, הוספנו סוגריים מסולסלים {}. כל מה שנמצא בתוך הסוגריים המסולסלים זה הקוד שנרצה שירוץ בכל פעם שנקרא לפונקציה. 

כשנרצה להריץ את הקוד, אנחנו פשוט נקליד את שם הפונקציה ובצמוד לה נשים סוגריים (). שמרו את הקובץ ורענן את הדף בדפדפן. לאחר מכן, הזן בקונסולה, את השורה הבאה:  

checkGuess();

לאחר שנלחץ על  Return/Enter, אנחנו אמורים לראות שקפצה הודעה שרשמה "I am a placeholder".

הגדרנו פונקציה שמקפיצה הודעה למשתמש בכל פעם שנקרא לה.

לתשומת לב: אתם תלמדו עוד על פונקציות בהמשך הקורס.

אופרטורים (Operators)

אופרטורים של JavaScript מאפשרים לנו לבצע מבחנים מסויימים, חישובים מתמטיים, חיבור מחרוזות ודברים נוספים רבים. 

אם לא עשיתם זאת עד עכשיו, שמרו את הקוד, ורעננו את הדף. לאחר מכן, פתחו את הקונסולה. נסו להזין את הדוגמאות המפורטות למטה בעמודת ״דוגמא״, בדיוק בצורה שבה הן מופיעות ולאחר מכן לחצו Return/Enter  וראו את התוצאות. 

נתחיל עם אופרטורים מתמטיים:

אופרטור שם דוגמא
+ חיבור 6 + 9
- חיסור 20 - 15
* כפל 3 * 7
/ חילוק 10 / 5

ניתן להשתמש בסימן החיבור + על מנת לחבר מחרוזות ביחד (בתכנות, בשפה האנגלית זה נקרא: concatenation).

נסו להזין את השורות הבאות בקונסולה, אחת בכל פעם:

let name = 'Bingo';
name;
let hello = ' says hello!';
hello;
let greeting = name + hello;
greeting;

יש גם כמה קיצורים לאופרטורים מתמטיים, לדוגמא, אם אנחנו פשוט רוצים להוסיף מחרוזת טקסט חדשה למחרוזת טקסט קיימת ולהחזיר את המחרוזת המחוברת של שתיהן, נוכל לבצע את הדבר הבא: 

name += ' says hello!';

זה זהה בתוצאה לדבר הבא:

name = name + ' says hello!';

כשאנחנו מריצים מבחני אמת/שקר (לדוגמא, בתוך תנאים), אנחנו משתמשים באופרטורים השוואתיים

אופרטור שם דוגמא
=== האם זהה לחלוטין?
5 === 2 + 4 // false
'Chris' === 'Bob' // false
5 === 2 + 3 // true
2 === '2' // false; number versus string
!== האם לא זהה?
5 !== 2 + 4 // true
'Chris' !== 'Bob' // true
5 !== 2 + 3 // false
2 !== '2' // true; number versus string
< קטן מ-
6 < 10 // true
20 < 10 // false
> גדול מ-
6 > 10 // false
20 > 10  // true

משפטי תנאי

נחזור לפונקציית  ()checkGuess שלנו. אנחנו נרצה שהיא תעשה יותר מאשר להוציא הודעה פשוטה למשתמש. אנחנו רוצים לבדוק האם הניחוש של המשתמש היה נכון או לא  ולהגיב ובהתאם. 

 בנקודה זו, החלף את הפונקציה ()checkGuess עם הקוד הבא: 

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();
}

נעבור על כל חלק בקוד על מנת להסביר אותו: 

  • בשורה 2 אנחנו מצהירים על משתנה בשם userGuess ומשימים לו את הערך שיהיה הערך אשר מוכנס על ידי המשתמש לתוך תיבת הקלט. אנחנו מריצים את הערך שהוכנס על ידי המשתמש במתודה מובנית בשפה בשם ()Number  מנת לוודא שאכן המספר שהמשתמש הזין, הוא מספר ולא טקסט.
  • בשורות 3-5, אנחנו מזינים לראשונה את משפט התנאי שלנו. משפט תנאי מאפשר לנו להריץ קוד באופן סלקטיבי, כאשר הקוד ירוץ בהתבסס על התקיימות תנאי כלשהו או היעדר התקיימותו. הצורה הפשוטה ביותר של משפט תנאי תתחיל במילה השמורה if ולאחר מכן סוגריים רגילים () ואז סוגריים מסולסלות {}. בתוך הסוגריים הרגילים אנחנו נזין את התנאי/מבחן. אם התנאי יתקיים, כלומר תוצאת המבחן היא אמת, אז הקוד בתוך הסוגריים המסולסלות ירוץ. אם לא, אנחנו לא נריץ את הקוד בסוגריים המסולסלים והתוכנית תמשיך הלאה. 
  • במקרה הזה, התנאי/המבחן בודק האם המשתנה userGuess שווה באופן מוחלט ל-1, כלומר האם זה התור הראשון של המשתתף במשחק: 
    guessCount === 1
    אם כן, אנחנו נציג לו הודעה כזו באמצעות שינוי הטקסט בתוכן של הפסקה למלל הבא:   "Previous guesses:"   ואם לא, לא. 
  • שורה 6 מוסיפה את התוכן הנוכחי של ניחוש המשתמש (userGuess ) לסוף הפסקה guesses בצירוף רווח מסויים בין הניחושים.
  • שורות 8-24 מבצעות מספר בדיקות:
    • התנאי הראשון { }()ifבודק האם הניחוש של המשתמש (userGuess) הוא שווה למספר האקראי (randomNumber) שהוגדר בתחילת הקוד שלנו.
      • אם כן, המשתתף ניחש נכונה את המספר, וניצח במשחק. 
      • נציג לו הודעת זכייה בצבע ירוק.
      • נמחק את התוכן של הפסקה שמציינת האם הניחוש היה גדול/קטן. 
      • נריץ פונקציה שנקראת ()setGameOver אשר נדון בה מאוחר יותר. 
    • אם התנאי הראשון לא התקיים, נריץ מבחן נוסף באמצעות שימוש בביטוי  { } () else if. מבחן זה בודק האם זהו התור האחרון של המשתתף ואם כן, ירוץ קוד זהה לקוד שנמצא בבלוק הקודם, למעט כך שתוקפץ הודעה שהמשחק נגמר ולא הודעת זכייה. 
    • התנאי האחרון בשרשרת, אותו הגדרנו באמצעות הביטוי {} else מתפקד כמו ברירת מחדל. הוא מכיל קוד שירוץ רק אם אף אחד מהתנאים לעיל לא התקיים, כלומר לא החזיר ערך אמת true. במקרה כזה, נודיע למשתמש שהוא טעה, ונבצע בדיקת תנאי נוספת (שורות 19-23) לבדוק האם הניחוש של המשתתף במשחק היה גבוה או נמוך מהמספר האקראי, וכן נודיע לו בהתאם. 
  • שורות 26-28 של הפונקציה מבצעות הכנה לניחוש הבא של המשתתף - אנו מגדילים את המשתנה guessCount ב-1 על מנת לעדכן את כמות הניחושים של המשתתף, ומרוקנים את הערך של הקלט, על מנת שהמשתמש יזין את הניחוש החדש. לבסוף אנו מריצים מתודה על האובייקט המכיל את אלמנט הקלט מהמשתמש שמאפשרת לנו לגרום לכך שהפוקוס של המסך יהיה באלמנט הקלט. 

אירועים

בשלב זה הגדרנו את פונקציית ()checkGuess אבל היא לא תעשה כלום כי לא קראנו לה עדיין. באופן אידיאלי, אנחנו רוצים ״לקרוא״ (Invoke) לפונקציה כאשר המשתמש ילחץ על לחצן ״Submit guess" ועל מנת לבצע זאת אנחנו צריכים לעשות שימוש באירוע (Event). אירועים אלו דברים המתרחשים בתוך הדפדפן - כפתור נלחץ, דף נטען, וידאו מתנגן וכד׳ - ובהתאם, אנחנו יכולים להריץ בלוקים של קוד. הקונסטרקטור (בעברית: הבנאי), שמאזין לאותו אירוע שמתרחש בדפדפן נקרא מאזין אירוע (event listeners), ואילו בלוק הקוד שרץ בתגובה לאותו אירוע נקרא מטפל אירוע (event handlers).

הוסף את הקוד הבא מתחת לפונקציית ()checkGuess :

guessSubmit.addEventListener('click', checkGuess);

כאן אנו מוסיפים event listener לכפתור guessSubmit. מתודה זו מקבלת 2 ערכים (שנקראים ״ארגומנטים״) - הראשון הוא סוג האירוע שאנחנו רוצים להאזין לו (במקרה, אירוע מסוג  click), ואותו נזין כמחרוזת, עטוף בגרשיים, לאחר מכן פסיק, ואז את event handlers, שהוא בעצם הקוד שנרצה שירוץ ברגע שהתרחש האירוע (במקרה זה, פונקציית ()checkGuess ). תשומת לב כי אנחנו לא צריכים להכניס סוגריים כאשר אנחנו רושמים את הפונקציה checkGuess בתוך המתודה addEventListener().

נסו לשמור ולרען את הדף כעת - הדוגמא אמורה לעבוד, עד נקודה מסויימת. הבעיה היחידה היא שכאשר המשתתף ינחש נכון או המשחק הסתיים כי נגמרו לו הנסיונות, המשחק יסתיים בצורה לא רצויה, מכיוון שלא הגדרנו את הפונקציה ()setGameOver שאמורה לרוץ ברגע שהמשחק יסתיים (הן אם המשתתף ניחש נכון והן אם למשתתף נגמרו הנסיונות).

כעת נוסיף את הקוד החסר ונשלים את הפונקציונליות של המשחק.  

השלמת הפונקציונליות של המשחק

כעת נוסיף את הפונקציה ()setGameOver מתחת לקוד הנוכחי: 

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);
}
  • שתי השורות הראשונות משנות את guessField ושל guessSubmit לבלתי זמין - זאת באמצעות שינוי המאפיין של אובייקטים אלו ל-disabled. זה הכרחי על מנת למנוע מהמשתמש להזין ניחושים נוספים. 
  • שלושת השורות הבאות מייצרות לנו אלמנט <button> חדש, ומוסיפות אותו בתחתית ה-html הנוכחי שלנו. 
  • השורה האחרונה מוסיפה event listner לכפתור החדש, ש-״מאזין״ לאירוע של הקלקה על הכפתור, וכשזה קורה, מריץ את הפונקציה שנקראת ()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;
}

קוד זה מאתחל הכל לאיך שהוא היה בתחילת המשחק: 

  • משים ערך של 1 במשתנה guessCount. (שורה 2)
  • מרוקן את כל תוכן הטקסט בפסקאות. (שורות 4-7)
  • מוחק את כפתור האתחול. (שורה 9)
  • הופך את guessField ו- guessSubmit לזמינים שוב. (שורות 11-12)
  • מרוקן מתוךguessField כל טקסט שנמצא בתוכו. (שורה 13) 
  • מזיז את הפוקוס במסך ל-guessField. (שורה 14) 
  • משנה את הרקע של פסקת lastResult. (שורה 16)
  • לבסוף, יוצר שוב מספר אקראי, חדש, על מנת שלא ננחש שוב את אותו מספר. 

בשלב זה - יש לנו משחק שעובד במלואו. פשוט יחסית, אך עובד.  

כעת נדבר על אפשרויות נוספות שראינו, ואולי לא שמנו לב. 

לולאות

חלק מתוך הקוד למעלה שנרצה להתעמק בו הוא לולאת מסוג for.

לולאות הן עקרון מאוד חשוב בתכנות, ומאפשרות לנו להריץ קוד שוב ושוב, עד שתנאי מסויים יתרחש. 

על מנת להתחיל, פתח את הקונסולה שוב, והכנס את הקוד הבא: 

for (let i = 1 ; i < 21 ; i++) { console.log(i) }

מה קרה?

המספרים 1 עד 20 הודפסו לקונסולה. זה מכיוון שהשתמשנו בלולאה מסוג for. לולאה מסוג for מקבלת 3 ערכים (ארגומנטים):

  1. ערך ראשון (Starting Value) - במקרה זה אתחלנו את המונה ל-1, אך אנו יכולים להתחיל בכל מספר שנרצה. כמו כן, את שם המשתנה i ניתן להחליף בכל שם שנרצה. אנו מבצעים שימוש ב-i כי זה קצר ונוח לזכור. 
  2. תנאי יציאה (An exit condition) - כאן הגדרנו שתנאי היציאה מהלולאה, כלומר מתי הלולאה תפסיק לרוץ יהיה כל עוד i < 21. כלומר הלולאה תרוץ כל זמן ש-i יהיה קטן מ-21. ברגע ש-i יהיה שווה ל-21, הלולאה תפסיק לרוץ.
  3. המוסיף (An incrementor) - כאן הגדרנו i++ כלומר נעלה את הערך של i  ב-1 בכל פעם שהקוד שנמצא בתוך הסוגריים המסולסלות {} מסיים לרוץ (כל איטרציה-iteration), עד אשר i יגיע לערך 21. במקרה הזה אנחנו פשוט מדפיסים לקונסולה את הערך של i בכל איטרציה (iteration), באמצעות console.log().

בוא נסתכל כעת על הלולאה במשחק הניחוש שבנינו בתוך פונקציית ()resetGame:

let resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0 ; i < resetParas.length ; i++) {
  resetParas[i].textContent = '';
}

קוד זה יוצר משתנה מסוג מערך (נדבר עליו בהמשך) בשם resetParas המכיל רשימה של כל האלמנטים מסוג p הנמצאים בתוך אלמנט עם class בשם resultParas (במקרה שלנו זה האלמנט הבא: <div class="resultParas">). 

resetParas נוצר באמצעות שימוש במתודה querySelectorAll()

לאחר מכן, הוא עובר באמצעות לולאה על כל איבר במערך, ומסיר את התוכן טקסט של כל איבר. 

דיון קצר על אובייקטים

נוסיף שיפור נוסף לפני שנמשיך בדיון : הוסיפו את הקוד הבא, מתחת לקוד זה: let resetButton; הנמצא בראש הדף, ולאחר מכן שמרו את הקובץ: 

guessField.focus();

קוד זה עושה שימוש במתודה בשם focus() על מנת לשים את סמן העבר בתוך הטקסט של תיבת הקלט <input> ברגע שהדף נטען, כך שהמשתמש יוכל הזין את הניחוש הראשון שלו ישר כשהדף נטען, ללא צורך ללחוץ על תיבת הקלט. זוהי אמנם תוספת קטנה, אך היא משפרת השימוש של המשתמש ומאפשרת לו להבין באופן ויזואלי איך לשחק את המשחק.

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

במקרה הנוכחי, יצרנו תחילה קבוע בשם guessField אשר אחסן בתוכן הפנייה לתיבת קלט הטקסט ב-html - השורה הבאה יכולה להימצא באזור שבו הצרנו על המשתנים/קבועים בתחילת הקוד שלנו: 

const guessField = document.querySelector('.guessField');

על מנת לקבל את ההפניה הזו, השתמשנו במתודה  querySelector() של האובייקט document. דוגמא נוספת היא למתודה של אובייקט זה היא  ()querySelector אשר מקבלת מידע אחד מסוג סלקטור של CSS - ואותו סלקטור בוחר את האלמנט שאנחנו רוצים להפנות אליו. 

מכיוון ש-guessField מכיל כעת הפנייה לאלמנט <input>, הוא יכול כעת לגשת למספר מאפיינים (properties) ומתודות (methods). באופן עקרוני, properties אלו משתנים המאוחסנים בתוך אובייקט, וחלקם לא יכולים לשנות את ערכם, ואילו methods אלו פונקציות המאוחסנות בתוך אובייקט. מתודה אחת אשר זמינה לאלמנט <input>, היא ()focus, כך שאנחנו יכולים להשתמש בקוד למטה, על מנת לבצע פוקוס לתיבת קלט הטקסט: 

guessField.focus();

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

לשחק ולנסות את האובייקטים של הדפדפן

בואו נשחק טיפה עם האובייקטים של הדפדפן.

  1. פתחו תוכנית בדפדפן.
  2. פתחו את browser developer tools ווודאו שהקונסולה מופיעה. 
  3. רשמו guessField והקונסולה תציג לכם את המשתנה המכיל את האלמנט <input>. אתם תבחינו שהקונסולה גם משלימה את השמות של האובייקטים שקיימים בסביבת ההרצה, כולל משתנה. 
  4. כעת הזינו את הקוד הבא: 
  5. guessField.value = 'Hello';
    המאפיין (property) בשם value מייצג את הערך שהוזן לתוך שדה הטקסט. ניתן לראות שעם הזנת הקוד לעיל, אנחנו משנים את הטקסט בשדה הטקסט. 
  6. נסו לרשום בקונסולה guesses. הקונסולה תראה לכם שהוא מכיל אלמנט מסוג<p>.
  7. כעת הזן את הקוד הבא:
  8. guesses.value
    הקונסולה תחזיר את הערך undefined מכיוון שאלמנט מסוג <p> לא מקבל מאפיין מסוג value.
  9. על מנת לשנות את הטקסט בתוך <p> , אנחנו צריכים להשתמש במאפיין בשם  textContent
  10. כעת הזינו את הקוד הבא:
  11. guesses.textContent = 'Where is my paragraph?';
  12. כעת ננסה לשנות עיצוב באמצעות גישה ל-properties של האובייקט:
    guesses.style.backgroundColor = 'yellow';
    guesses.style.fontSize = '200%';
    guesses.style.padding = '10px';
    guesses.style.boxShadow = '3px 3px 6px black';
    כל אלמנט שנמצא בדף מכיל מאפיין בשם style אשר הוא בעצמו אובייקט המכיל את כללי ה-CSS ה-inline שהוחלו על אותו אובייקט (ואף ניתן להחיל עליו כללי CSS או למחוק את הכללים הנוכחיים או להחליפם באחרים) . זה מאפשר לנו לשנות באופן דינמי את העיצוב של האובייקט באמצעות JavaScript.

לסיכום

סיימנו לבנות את הדוגמא. בדקו את הקוד הסופי שלכם וודאו שהוא עובד כראוי, או שתוכלו לשחק עם הגרסה הסופית פה אם אתם לא מצליחים לגרום לקוד שלכם לעבוד, נסו להשוות אותו אל מול קוד המקור

במודול זה

Document Tags and Contributors

Contributors to this page: ItzikDabush
Last updated by: ItzikDabush,