פרק 10: חלונות קופצים (Pop-up Boxes) ב-JavaScript

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

1. alert() – מציג הודעה למשתמש.
2. confirm() – מבקש מהמשתמש לאשר או לבטל פעולה.
3. prompt() – מבקש מהמשתמש להכניס קלט.

1. חלון הודעה (alert())

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

התחביר:

alert("הודעה למשתמש");

דוגמה לשימוש ב-alert():

alert("Welcome to my website!");

הסבר:

• כאשר קוראים לפונקציה alert(), מופיע חלון עם ההודעה שהוזנה בתוכה (במקרה הזה "Welcome to my website!").
• המשתמש צריך ללחוץ על כפתור "אישור" כדי לסגור את החלון ולהמשיך.

2. חלון אישור (confirm())

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

• אם המשתמש לוחץ על "אישור", הפונקציה מחזירה true.
• אם המשתמש לוחץ על "ביטול", הפונקציה מחזירה false.

התחביר:

let result = confirm("האם אתה בטוח?");

דוגמה לשימוש ב-confirm():

let isConfirmed = confirm("Do you want to delete this file?");

if (isConfirmed) {
    console.log("File deleted");
} else {
    console.log("File not deleted");
}

הסבר:

• הפונקציה confirm() מציגה שאלה כמו "Do you want to delete this file?".
• אם המשתמש לוחץ על "אישור", יופיע בקונסולה "File deleted".
• אם המשתמש לוחץ על "ביטול", יופיע "File not deleted".

3. חלון קלט (prompt())

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

התחביר:

let input = prompt("הכנס את שמך:");

דוגמה לשימוש ב-prompt():

let userName = prompt("What is your name?");

if (userName) {
    alert("Hello, " + userName + "!");
} else {
    alert("Hello, Guest!");
}

הסבר:

• הפונקציה prompt() מציגה חלון קופץ עם בקשה להזין את שם המשתמש.
• אם המשתמש מזין שם ולוחץ על "אישור", ההודעה "Hello, [שם המשתמש]!" תוצג.
• אם המשתמש לוחץ על "ביטול" או לא מכניס שם, תוצג ההודעה "Hello, Guest!".

4. דוגמה: שימוש בכל החלונות הקופצים

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

// שלב 1: הצגת הודעת ברוך הבא
alert("Welcome to the survey!");

// שלב 2: בקשת אישור מהמשתמש להמשיך
let proceed = confirm("Do you want to participate in the survey?");

if (proceed) {
    // שלב 3: בקשת שם מהמשתמש
    let name = prompt("What is your name?");
    
    if (name) {
        alert("Thank you, " + name + ", for participating!");
    } else {
        alert("Thank you, Guest, for participating!");
    }
} else {
    alert("Maybe next time!");
}

הסבר:

• שלב 1: מציגים הודעת ברוך הבא עם alert().
• שלב 2: שואלים את המשתמש אם הוא רוצה להשתתף עם confirm(). אם הוא לוחץ "אישור", עוברים לשלב הבא.
• שלב 3: מבקשים מהמשתמש להכניס את שמו עם prompt(), ואם הוא מכניס שם, מודים לו באופן אישי. אם לא, מודים לו כברירת מחדל כ-"Guest".

5. הבנת הפונקציות alert, confirm, ו-prompt

5.1 הפונקציה alert():

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

5.2 הפונקציה confirm():

• מציגה שאלה עם אפשרות בחירה בין "אישור" ו-"ביטול".
• מחזירה ערך בוליאני (true או false).
• מתאימה כאשר נדרש אישור מהמשתמש לפני ביצוע פעולה (כמו מחיקת קובץ).

5.3 הפונקציה prompt():

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

דוגמה מורכבת: שאלון אינטראקטיבי

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

// שאלה 1: ברוך הבא
alert("Welcome to the JavaScript Quiz!");

// שאלה 2: שאלת אישור
let ready = confirm("Are you ready to start the quiz?");

if (ready) {
    let score = 0;
    
    // שאלה 3: שאלה ראשונה עם prompt
    let answer1 = prompt("What is the result of 2 + 2?");
    if (answer1 === "4") {
        score++;
    }
    
    // שאלה 4: שאלה שנייה עם prompt
    let answer2 = prompt("What is the capital of France?");
    if (answer2.toLowerCase() === "paris") {
        score++;
    }
    
    // סיום השאלון
    alert("Quiz finished! Your score is: " + score + "/2");
} else {
    alert("Maybe next time!");
}

הסבר:

• שלב 1: מציגים הודעה עם alert כדי לפתוח את השאלון.
• שלב 2: שואלים את המשתמש אם הוא מוכן להתחיל עם confirm. אם הוא לוחץ "אישור", ממשיכים.
• שלב 3: מציגים שתי שאלות עם prompt, והשחקן עונה עליהן. אנו משתמשים בתנאים כדי לבדוק אם התשובות נכונות ומחשבים את הניקוד.
• שלב 4: בסוף, מציגים את הניקוד הסופי בעזרת alert.

סיכום

בפרק זה למדנו על:

1. alert(): הצגת הודעות פשוטות למשתמש.
2. confirm(): קבלת אישור או ביטול מהמשתמש והחזרת ערך בוליאני.
3. prompt(): קבלת קלט מהמשתמש והחזרת הערך שהוזן.
4. שילוב החלונות הקופצים לבניית אינטראקציה עם המשתמש, כמו שאלונים וקבלת החלטות.

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