הסבר פשוט על alert, prompt ו-confirm ב-JavaScript

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

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

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

1. ()alert – הצגת הודעה

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

alert("Welcome to the JavaScript interaction tutorial!");

כאשר הקוד הזה ירוץ, הדפדפן יציג הודעה קופצת עם כפתור אישור (OK).

טיפ: הימנעו משימוש ב-alert() ב production. השתמשו בה בעיקר לצורכי בדיקות ולמידה.

2. ()prompt – קבלת קלט מהמשתמש

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

const name = prompt("What is your name?");
alert("Hello, " + name + "!");

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

דוגמה עם ערך ברירת מחדל

const color = prompt("What's your favorite color?", "Blue");
console.log("User's favorite color is:", color);

טיפול בערך המוחזר

חשוב לזכור ש-prompt() תמיד מחזירה מחרוזת (string) – גם כשהמשתמש מקליד מספר. אם המשתמש לוחץ על Cancel, הפונקציה מחזירה null, שזה שונה ממחרוזת ריקה (לחיצה על OK בלי להקליד כלום).

const age = prompt("How old are you?");

if (age === null) {
  console.log("User cancelled the dialog.");
} else if (age === "") {
  console.log("User clicked OK but entered nothing.");
} else {
  const ageNum = Number(age);
  console.log("User's age as a number:", ageNum);
}

3. ()confirm – בקשת אישור

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

const isSure = confirm("Are you sure you want to delete this item?");
if (isSure) {
  console.log("Item deleted.");
} else {
  console.log("Action cancelled.");
}

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

בדוגמה הזו נעשה שימוש ב-alert, prompt ו-confirm יחד כדי לדמות תהליך פשוט של הרשמה לניוזלטר. שימו לב לשימוש ב-template literals (`${}`) במקום שרשור מחרוזות לקוד נקי יותר.

alert("Welcome to our website!");
const user = prompt("What's your username?");

if (user !== null && user !== "") {
  alert(`Hello, ${user}!`);

  const wantsNewsletter = confirm("Would you like to subscribe to our newsletter?");
  if (wantsNewsletter) {
    alert("Thank you for subscribing!");
  } else {
    alert("No problem. Enjoy your visit!");
  }
} else {
  alert("You need to enter a username to continue.");
}

הערות חשובות

• השיטות האלו עוצרות את ממשק המשתמש בדפדפן עד שהמשתמש מגיב. שום קוד JavaScript אחר לא ירוץ כל עוד הדיאלוג פתוח.
• לא ניתן להתאים את העיצוב שלהן. לדיאלוגים מעוצבים, השתמשו במודאלים מותאמים אישית שנבנים עם HTML, CSS ו-JavaScript.
• רוב הדפדפנים המודרניים מאפשרים למשתמשים לחסום תיבות דיאלוג חוזרות. אם הקוד שלכם מפעיל הרבה alerts ברצף, הדפדפן עשוי להציע תיבת סימון "prevent this page from creating additional dialogs".
• שלוש הפונקציות הן methods של האובייקט window. כתיבת alert() היא קיצור של window.alert().

תאימות לדפדפנים: כל הדפדפנים המודרניים תומכים ב-alert, prompt ו-confirm. עם זאת, הן עשויות להיות מוגבלות בהקשרים מסוימים כמו iframes מ-origin שונה או service workers.

שאלות נפוצות

סיכום

שימוש בפונקציות alert(), prompt() ו-confirm() מאפשר לכם להוסיף אינטראקציה מהירה בין המשתמש לדף מבלי לבנות ממשק מסובך. למרות הפשטות, הן מהוות בסיס חשוב להבנת ניהול קלט מהמשתמש.

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