תנאים ולולאות ב-JavaScript

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

נושא השיעור: תנאים ולולאות ב-JavaScript

במהלך שיעור זה נלמד על שני עקרונות חשובים בתכנות עם JavaScript: תנאים (if, else) ו-לולאות (for, while). הבנה של תנאים ולולאות תעזור לנו לכתוב קוד שיכול לקבל החלטות ולבצע פעולות שחוזרות על עצמן.

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

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

1. תנאים (if, else) ב-JavaScript

מהו תנאי?

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

איך זה עובד?

תנאי ב-JavaScript נבנה באמצעות המילים if ו-else. השימוש במבנה זה אומר: "אם התנאי הזה מתקיים (true), אז בצע פעולה מסוימת, ואם לא – בצע פעולה אחרת".

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

let number = 10;

if (number > 5) {
    console.log("המספר גדול מ-5");
} else {
    console.log("המספר קטן או שווה ל-5");
}

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

הסבר:

• if: בודק את התנאי שמופיע בסוגריים. אם התנאי הזה מתקיים (true), הקוד בתוך הסוגריים המסולסלות יתבצע.
• else: זה החלק שמתבצע אם התנאי הראשון לא מתקיים.

אפשר גם להוסיף else if אם יש לך כמה תנאים לבדיקות. לדוגמה:

let age = 18;

if (age < 18) {
    console.log("אתה קטין");
} else if (age === 18) {
    console.log("ברוך הבא לבגרות");
} else {
    console.log("אתה מבוגר");
}

במקרה זה, אנחנו בודקים שלושה מצבים:

1. אם הגיל קטן מ-18.
2. אם הגיל שווה ל-18 בדיוק.
3. כל דבר אחר.

השוואות ב-JavaScript: ההבדל בין = ל-== ול-===

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

מה ההבדל בין השמה (=) להשוואה (== ו-===)?

• השמה (=): השמה משמשת להקצאת ערך למשתנה. לדוגמה:

let age = 18;

במשפט זה אנחנו נותנים למשתנה age את הערך 18. זהו לא השוואה, אלא הצבת ערך.

• השוואה שווה (==): השוואה זו בודקת אם שני ערכים שווים, אך היא מבצעת המרה אוטומטית בין סוגי הנתונים (type coercion). לדוגמה:

if (age == '18') {
    console.log("הגיל שווה ל-18");
}

למרות ש-age הוא מספר ו-'18' הוא מחרוזת, JavaScript ממירה את המחרוזת למספר ומשווה בין הערכים. לפעמים זה עלול לגרום לתוצאות לא צפויות.

• השוואה שווה ערך וסוג (===): השוואה זו בודקת גם את הערך וגם את סוג הנתון. כלומר, היא לא רק בודקת אם שני הערכים שווים, אלא גם אם הם מאותו הסוג. לדוגמה:

if (age === 18) {
    console.log("הגיל שווה ל-18 והוא מספר");
}

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

דוגמה מעמיקה:

let number = 18;

if (number == '18') {
    console.log("מספר שווה ל-18, אבל יכול להיות ממחרוזת");
} else {
    console.log("לא שווה");
}

if (number === '18') {
    console.log("שווה וסוג הנתונים זהה");
} else {
    console.log("המספר שונה כי סוג הנתונים שונה");
}

במקרה הזה, ההשוואה הראשונה (==) תתקבל כאמיתית כי JavaScript ממירה את המחרוזת למספר. ההשוואה השנייה (===) לא תתקבל, כי סוג הנתונים שונה (מספר מול מחרוזת).

תרגול:

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

2. לולאות (for, while) ב-JavaScript

מהי לולאה?

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

לולאת for

הסוג הראשון של לולאה הוא for. לולאת for חוזרת מספר מוגדר של פעמים, בהתאם לתנאי שנגדיר לה.

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

for (let i = 0; i < 5; i++) {
    console.log("המספר הוא " + i);
}

במקרה הזה, הלולאה תודפס את המספרים מ-0 עד 4. הנה מה שקורה:

• let i = 0: אנחנו מתחילים עם משתנה i שערכו הוא 0.
• i < 5: הלולאה תימשך כל עוד התנאי הזה נכון, כלומר כל עוד i קטן מ-5.
• i++: בכל פעם שהלולאה רצה, ערך i יגדל ב-1.

לולאת while

while היא לולאה שממשיכה לרוץ כל עוד תנאי מסוים מתקיים.

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

let count = 0;

while (count < 3) {
    console.log("המספר הוא " + count);
    count++;
}

במקרה הזה, כל עוד המשתנה count קטן מ-3, הלולאה תמשיך לרוץ ותדפיס את המספרים מ-0 עד 2.

הסבר:

• while בודקת את התנאי בסוגריים לפני שהיא מתחילה. אם התנאי מתקיים (true), היא תבצע את הקוד שבתוכה.
• count++ מגדיל את המשתנה count בכל פעם שהלולאה רצה, כך שהיא תוכל להפסיק כשיתקיים התנאי שמגדיר את סיום הלולאה.

תרגול:

כתבו לולאת for שמדפיסה את כל המספרים הזוגיים מ-0 עד 10, ולולאת while שמדפיסה את המספרים מ-10 עד 1 בסדר יורד.

3. תנאים ולולאות – שילוב לעבודה יעילה

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

דוגמה לשילוב:

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i + " הוא מספר זוגי");
    } else {
        console.log(i + " הוא מספר אי-זוגי");
    }
}

הסבר:

• for חוזרת על המספרים מ-1 עד 10.
• בתוך הלולאה, יש לנו תנאי שבודק האם המספר זוגי באמצעות i % 2 === 0 (בדיקה האם השארית מחלוקת ב-2 היא 0).
• אם המספר זוגי, תודפס הודעה מתאימה, ואם לא, תודפס הודעה אחרת.

4. לולאות עם תנאים מורכבים

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

דוגמה:

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log("מצאנו את המספר 5, עוצרים כאן!");
        break;
    }
    console.log("המספר הוא " + i);
}

הסבר:

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

תרגול מתקדם:

כתבו לולאת while שמבקשת מהמשתמש להזין מספרים, עד שהוא מזין את המספר 0. כל מספר שהמשתמש מזין יודפס למסך, ואם הוא מזין 0 – הלולאה תיעצר.

לולאות ב-JavaScript: פירוט מלא

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

לולאה בסיסית ללא הגדרות

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

console.log("התחלת הלולאה");

for (;;) {
    console.log("הדפסת הודעה");

    break; // עוצרים את הלולאה כדי להימנע מריצה אינסופית
}

console.log("סיום הלולאה");

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

המבנה המלא של לולאת for

לולאת for ב-JavaScript מורכבת משלושה חלקים בסיסיים שמופיעים בתוך הסוגריים:

for (הגדרת משתנה; תנאי בדיקה; עדכון משתנה) {
    // הקוד שרץ בכל סיבוב של הלולאה
}

בואו נבין את שלושת החלקים:

1. הגדרת משתנה: כאן אנחנו יוצרים משתנה, לרוב זה יהיה מספר שמתחיל מערך מסוים (לרוב 0 או 1). לדוגמה: let i = 1;

2. תנאי בדיקה: התנאי הזה בודק לפני כל סיבוב של הלולאה אם כדאי להמשיך. כל עוד התנאי מתקיים (true), הלולאה תמשיך לרוץ. לדוגמה: i <= 10 (זה אומר שהלולאה תמשיך כל עוד i קטן או שווה ל-10).

3. עדכון משתנה: בסוף כל סיבוב, אנחנו מעדכנים את המשתנה, כך שבפעם הבאה שהוא נבדק הוא יהיה שונה. במקרה שלנו נעלה את הערך של i ב-1 בכל סיבוב באמצעות i++.

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

for (let i = 1; i <= 10; i++) {
    console.log("המספר הוא " + i);
}

הסבר:

• let i = 1: אנחנו מגדירים משתנה שנקרא i, ומתחילים אותו ב-1.
• i <= 10: הלולאה תמשיך לרוץ כל עוד i קטן או שווה ל-10.
• i++: בכל פעם שהלולאה מסתיימת, אנחנו מוסיפים 1 ל-i.

לולאת for ללא השמה ועידכון

כדי להבין טוב יותר את המבנה של לולאת for, נוכל להראות דוגמה ללולאה שאין בה השמה או עדכון של המשתנה.

let i = 0;

for (; i < 3;) {
    console.log("i שווה ל-" + i);
    i++; // אנחנו מעדכנים את i ידנית
}

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

סיכום השיעור

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

קישורים

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