משתנים והדפסת תוצאות בדפדפן ב-JavaScript

נושא מספר 10 ב-קורס תכנות לילדים.

תיאור השיעור:

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

מטרות השיעור:

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

מהלך השיעור:

1. מהו משתנה?

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

איך מכריזים על משתנה?

כדי ליצור משתנה ב-JavaScript, אנחנו משתמשים במילה let או const, תלוי אם אנחנו רוצים שהערך של המשתנה יוכל להשתנות או לא. לאחר מכן נותנים שם למשתנה, ומגדירים לו ערך ראשוני.

דוגמה בסיסית:

let age = 10;  // יצירת משתנה ושמירת הערך 10 בתוכו
const name = "תומר";  // יצירת משתנה ששומר מחרוזת (טקסט)

במקרה הזה:

• המשתנה age שומר את המספר 10, והוא יכול להשתנות בהמשך התוכנית.
• המשתנה name שומר את המחרוזת "תומר", והוא לא יכול להשתנות כי הכרזנו עליו עם const.

2. סוגי משתנים

ל-JavaScript יש כמה סוגים עיקריים של משתנים שבהם נשתמש הרבה בתוכנית שלנו. הנה כמה מהסוגים החשובים:

2.1 מספרים (Numbers)

מספרים הם פשוטים – הם יכולים להיות מספרים שלמים כמו 10 או שברים כמו 2.5.

let price = 25.99;

2.2 מחרוזות (Strings)

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

let greeting = "שלום עולם!";

2.3 ערכים בוליאניים (Booleans)

בוליאן הוא משתנה שיכול להיות רק אמת (true) או שקר (false). סוג זה של משתנה נפוץ מאוד כשאנחנו בודקים תנאים בקוד.

let isStudent = true;

3. איך להדפיס תוצאות ב-JavaScript עם console.log

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

ב-JavaScript יש לנו כלי שימושי מאוד שנקרא console (קונסולה). הקונסולה היא מקום שבו אפשר לראות הודעות מהקוד שלנו בזמן אמת. אנחנו משתמשים בפקודה console.log כדי להדפיס מידע בקונסולה.

דוגמה להדפסת משתנה:

let age = 12;
console.log(age);  // יציג את הערך 12 בקונסולה

כדי לראות את הקונסולה, נפתח את דפדפן האינטרנט (לדוגמה, Google Chrome), נלחץ על מקש ימני בעכבר ונבחר באפשרות "Inspect" (או "בדיקה"). בלשונית "Console" נראה את התוצאה של console.log.

4. דוגמאות לעבודה עם משתנים ו-console.log

4.1 דוגמה עם מספרים:

let number1 = 5;
let number2 = 7;
let sum = number1 + number2;  // חיבור של שני המספרים
console.log(sum);  // יציג 12

כאן, יצרנו שני משתנים ששומרים מספרים, חיברנו אותם ושמרנו את התוצאה במשתנה sum. לאחר מכן השתמשנו ב-console.log כדי להדפיס את התוצאה בקונסולה.

4.2 דוגמה עם מחרוזות:

let firstName = "תומר";
let lastName = "כהן";
let fullName = firstName + " " + lastName;  // חיבור של שתי המחרוזות
console.log(fullName);  // יציג "תומר כהן"

כאן, חיברנו שני משתנים שמכילים מחרוזות וקיבלנו את השם המלא.

5. תרגילים

תרגיל 1: יצירת משתנים והדפסתם בקונסולה

1. הכריזו על משתנה בשם age ושמרו בו את הגיל שלכם.
2. השתמשו ב-console.log כדי להציג את הגיל בקונסולה.

תרגיל 2: עבודה עם מספרים

1. צרו שני משתנים בשם number1 ו-number2 ושמרו בהם שני מספרים.
2. חברו את שני המספרים ושמרו את התוצאה במשתנה sum.
3. הדפיסו את התוצאה בקונסולה.

תרגיל 3: חיבור מחרוזות

1. צרו שני משתנים ששומרים את השם הפרטי ושם המשפחה שלכם.
2. חברו אותם למחרוזת אחת שנקראת fullName.
3. הדפיסו את השם המלא בקונסולה.

סיכום השיעור

בשיעור הזה למדנו על משתנים ב-JavaScript: איך להכריז עליהם, איך לשמור בהם מידע ואיך להציג את המידע הזה בקונסולה בעזרת console.log. הבנה של משתנים היא אחד הצעדים החשובים ביותר בתכנות, כי הם הבסיס של כל התוכניות שנכתוב בהמשך.

קישורים

1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.