מדריך שגרירים לבניית אתרים - javascript - חלונות קופצים

חלונות קופצים - pop ups

שמתם לב לחלון שקפץ ברגע שהדף עלה? אם לא, אתם מוזמנים לרענן את הדף ולשים לב אליו.

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

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

ישנם שלושה סוגים של הודעות קופצות:

alert boxes - התראה

הסוג הראשון הוא הסוג שראיתם כשהדף עלה. הוא מיועד להסב את תשומת הלב של הגולש ל... מה שאתם רוצים שהוא ישים לב אליו.

איך יוצרים alert box?

alert("my message to you")

את השורה הזאת אפשר לכתוב במגוון מקומות:

בתג ה-body, כדי שיופעל כשהדף עולה:

<body onLoad="alert('my message to you')">
כחלק מפונקציה, כדי להודיע על ביצוע או אי-ביצוע של פעולה.
בכל מקום בו הדמיון שלכם יכול לחשוב עליו.

confirm boxes - אישור

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

זה הקוד להודעת אישור:

confirm("my message to you")

יכולתם לבטל או לאשר. במקרה זה, לא הייתה לזה שום חשיבות, כי לא עשיתי שום דבר עם התשובה שלכם.

אז איך כן משתמשים בתשובה של המשתמש?

צריך להכניס את התשובה לתוך משתנה: הדפדפן יחזיר לכם אחת מתוך שתי תשובות אפשריות: true או false. אם המשתמש לוחץ על "אישור", התשובה תהיה true, ואם הוא לוחץ על "ביטול", התשובה תהיה false.

הערה: בנוסף למשתנים שמכילים מספרים או מחרוזות טקסט, ישנו גם משתנה בוליאני (boolean). משתנה בוליאני מקבל רק שני ערכים: true או false.

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

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

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

את תוצאות השאלה המהפכנית שלנו נציג בהודעת התראה (הודעה מהסוג הראשון שראינו).

נתחיל בכתיבת הלינק שיפעיל את התהליך על ידי הפעלת פונקציה בשם green:

עכשיו נכתוב את הפונקציה (בין תגי script בראש הדף, כמובן):

function green()
{
var agree = confirm("ירוק זה צבע יפה - לחץ *אישור* אם אתה מסכים, ו*ביטול* אם אינך מסכים")
alert("התשובה שלך הייתה: לחץ *אישור* כדי לראות את התשובה")
alert(agree)
}

והרי התוצאה (לחצו כדי לראות את מה שתכנתנו בפעולה):

מה דעתך?

prompt boxes - בקשת מידע

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

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

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

שימו לב! אין להשתמש בשיטה הזאת לאימות סיסמאות רגישות, כי ניתן לפרוץ בקלות ע"י "view source".

כך נכתוב הודעת בקשת מידע:

prompt("my question","default value")

לחצו כאן כדי לראות דוגמה בפעולה

"איך עשית את זה?"

את הלינק אנחנו כבר יודעים לעשות: קוראים לפונקציה בשם whatname().

<a href="javascript://" onClick="whatname()">
לחצו כאן כדי לראות דוגמה בפעולה
</a>

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

function whatname()
{
var myname = prompt("what is your name?","I do not remember")
myname="שלום, " + myname
alert(myname)
}

עוד הערה קטנה:

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

אם תנסו ללחוץ על הלינק הנ"ל ואז לסגור את החלונית, תקבלו הודעה של "שלום, null".

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

מעברי שורה וגרשיים בהודעות קופצות

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

בשביל לעבור שורה, כתבו \n .

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

לדוגמה:

לחצו עליי!

למעבר לנושא הבא - פתיחת חלון חדש - pop ups למתקדמים - לחצו כאן.

חזרה לדף javascript הראשי...