Get Adobe Flash player
דף הבית תחביר בסיסי תיבות מידע

שפת JavaScript יודעת ליצור שלוש תיבות מידע: אזהרה, אישור ובקשת תגובה מיידית

תיבת אזהרה (Alert Box)

בתיבת האזהרה תעשה שימוש כעת שברצונך ליידע את המשתמש באירוע ו/או מידע חשוב כלשהו.

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

תחביר:

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

דוגמא:

הדוגמא שלפניך משלבת כפתור הנמצא ב <body> של דף ה HTML, ופונקצית JavaScript להפעלת התיבה. על פונקציות תלמד בשיעור הבא.

<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("זוהי תיבת אזהרה");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="הצג תיבת אזהרה" />
</body>
</html>

לחיצה על הכפתור, תקפיץ למסך הודעת אזהרה בה כתוב: "זוהי תיבת אזהרה"

תיבת אישור (Confirm Box)

בתיבה מסוג זה משתמשים לרוב כאשר מבקשים "אישור" מהמשתמש.

כאשר התיבה קופצת למסך, על הגולש ללחוץ על "אישור" או על "בטל". התיבה מחזירה true אחרי לחיצה על "אישור" ו "false" אחרי הלחיצה על "בטל".

 

תחביר:

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

דוגמא:

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("לחץ על אחד הכפתורים");
    if (r==true)
    {
      alert("לחצת על אישור");
    }
    else
    {
      alert("לחצת על בטל");
    } 
}
</script>
</head>
<body onload="show_confirm()">
</body>
</html>

בדוגמא שלמעלה, נכתבה פקודת ה- confirm כערך של המשתנה r. הלחיצה על "אישור" תקצה למשתנה r את הערך true והלחיצה על "בטל" את הערך false.

עם טעינת הדף (onload), מופעלת הפונקציה show_confirm. כתוצאה, תופיע תיבת אישור בה כתוב "לחץ על אחד הכפתורים". לחיצה על "אישור", תחזיר true, ואז משפט התנאי (if) יפעיל את הקוד ויציג את ההודעה הנכונה באמצעות תיבת אזהרה.

טיפ

הפעלת תיבות המידע אינה מחייבת הגדרת script. בדוגמא הבאה, תיפתח הודעת אזהרה בעת מעבר העכבר מעל המילה "עבור":

<body>
<span onmouseover="alert('עברת מעל הטקסט המזהיר שלא לעבור')" color="#ff0000">
אין מעבר</span>
</body>

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

תיבה לבקשת תגובה מיידית (Prompt Box)

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

תחביר:

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

prompt("טקסט הסבר","ערך ברירת מחדל")

דוגמא:

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
  var name=prompt("כתוב את סוג המזון שאתה מעדיף","מרק ירקות");
     if (name!=null && name!="")
     {
      document.write("הי חבר, בחרת " + name + " בתיאבון!");
     }
     else
    {
     document.write("לא בחרת");
    }
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="לחץ כדי לבחור מזון" />
</body>
</html>

הסבר:

תיבת המידע תחזיר למשתנה name את אחד מהערכים הבאים:

  • לאחר ההקשה על "אישור", את הערך שיוקלד.
  • לאחר ההקשה על "אישור" אך מחיקת הטקסט שבתיבה, הערך שיוחזר יהיה מחרוזת הריקה: "".
  • לאחר הקשה על "בטל", יוחזר למשתנה הערך null. 

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

בכל מצב אחר (בטל, או מחיקת המידע) הפונקציה תציג על המסך: "לא בחרת" 

 

אל השיעור הקודם אל השיעור הבא