קראו בכותר - מבוא לתכנות בסביבת האינטרנט בשפת Java
263
5 . 6 טיפול באירועים שפת JavaScript היא שפה מונחית-אירועים , כלומר היא יודעת להגיב על אירועים המתרחשים כתגובה לפעולות המשתמש , כגון לחיצה על כפתור , סגירת חלון , הקלקה על העכבר , וכן לאירועים המתרחשים כתגובה לפעולת שעון . תגובה לאירוע מפעילה את המתפעל אירועים ( handler-event ) אשר יכול לזמן פונקציה או לבצע תסריט שמטרתם לטפל באירוע שנוצר . לפניכם רשימה חלקית של אירועים : 2 הפונקציה isNaN היא פונקציה גלובלית וניתן להשתמש בה עם כל אחד מהעצמים המובנים בשפת . JavaScript פונקציה שימושית נוספת ( שהיא אינה פעולה של העצם String אך היא מוכרת על-ידי כל 2 העצמים ) היא הפונקציה . isNaN ( x ) פונקציה זו מקבלת ערך מחרוזתי או מספרי , ומחזירה את הערך ' אמת ' ( true ) אם הערך מחרוזתי ולא מספרי , ואת הערך ' שקר ' ( false ) בכל מקרה אחר . ( N ot a N umber ) לדוגמה , הפלט של התסריט הזה : /< script > document . write ( isNaN ( ״ 2005 / 12 / 12 ״ ) + ״ < br >/ ״ ;) document . write ( isNaN ( ״Hello״ ) + ״ < br >/ ״ ;) document . write ( isNaN ( 123 ) + ״ < br >/ ״ ;) < script type = text״ / ״javascript > הוא : true true false false
טבלה 1-5 רשימת אירועים לדוגמה , נסתכל על הדף הבא . הדף מכיל כותרת מרמה , 1 שלוש פסקאות ותמונה מתחלפת . כאשר נעביר את העכבר מעל הפסקה הראשונה , צבע הרקע של הפסקה יהפוך לאדום ויישאר במצב הזה . כאשר נעביר את העכבר מעל הפסקה השנייה , צבע הרקע של הפסקה יהפוך לאדום , אך כאשר נזיז את העכבר אל מחוץ לתחום הפסקה , יחזור הרקע לצבעו הקודם . כאשר נעביר את העכבר על התמונה , תתחלף התמונה . אבל כאשר נזיז את העכבר אל מחוץ לשטח התמונה , תחזור התמונה המקורית . נדגיש כי בכדי שאפשר יהיה לגשת לעצם התמונה ולשנות אותו יש לתת לעצם שם ולגשת אליו דרך שמו , לכן בדוגמה הבאה רשמנו את השם name = whiteCat״ ״ כחלק מהתג . img כמו כן , בתוכנית זו אנו מבצעים שינויים בתוכן של הדף , ולכן נרשום את התסריטים בתוך האזור התחום על ידי התג . BODY < html xmlns = http״ : // www . w 3 . org / 1999 / ״xhtml > !< Events-- . --htm >
< div > < form id = form״ 1 ״ > < body dir = ״rtl״ style = color-background״ : Green ; color : Yellow ; ״ > /< head > < title > Events Samples /< title > < head > /< h 1 > הדגמת אירועים < p style = size-font״ : medium ; color : ״Blue < h 1 style = color״ : ״Red > onmouseover = style״ . backgroundColor = 'red' ; ״ > onmouseover < br >/ פסקה זו תדגים את האירוע onmouseover בעת העברת העכבר על הפסקה , ישתנה צבע הרקע של הפסקה לאדום /< p > < br >/ onmouseout = style״ . backgroundColor = 'green' ; ״ > onmouseover = style״ . backgroundColor = 'red' ; ״ < p style = size-font״ : medium ; color : ״Yellow העברת עכבר על הפסקה הקודמת שינתה את צבע הרקע של הפסקה , < br >/ אך הצבע לא חזר לצבעו המקורי עם הזזת העכבר אל מחוץ לאזור הפסקה . < br >/ פסקה זו מפעילה שני אירועים . האחד < br >/ onmouseover והשני onmouseout אשר ידאג להחזרת הצבע המקורי . < br >/ < p > /< p > ניתן כמובן להחליף תמונה בעת העברת העכבר . לפניכם הדוגמה , רק זכרו להחזיר את התמונה המקורית לאחר הזזת העכבר onmousemove = document״ . whiteCat . src = Images' / cat 2 . 'jpg ; ״ < img name = whiteCat״ ״ src = Images״ / cat 1 . ״jpg alt = cat״ ״changes < br >/ /< html > /< body > /< form > /< div > /< p > onmouseout = document״ . whiteCat . src = Images' / cat 1 . 'jpg ; ״ >/