Facebook
Twitter
RSSמדריך ארועים – פונקציות
פונקציה היא הוראה, או מספר הוראות, בעלת תחום פעולה מוגבל בדרך כלל – ביצוע פעולה מוגדרת – והיא אינה נמצאת ברצף הפקודות של התוכנית. כבר הכרת פונקציות אחדות בשפת JavaScript שנקראות שיטות (methods). שיטה היא למעשה פונקציה בנויה מראש שהיא חלק מה-DOM וכדי להיות יותר ספציפי היא חלק מאחד האובייקטים של ה-DOM כמו window, document וכדומה. למשל, השיטה write() של אובייקט document מציגה את הערך שנשלח אליה בדף המוצג בדפדפן. היא לא מעלה בריבוע, מוציאה שורש או משנה את סדר התווים – היא מציגה ערך בדף המוצג בחלון הדפדפן.
בהמשך תלמד לבנות פונקציה משלך, שלמרבה הפליאה תהפוך להיות חלק מהDOM- לפרק הזמן בו הדף בו רשומה הפונקציה "חי" במערכת (בפרק 9 תראה כמה זה נוח שהפונקציה שלך היא חלק מה-DOM).
כדי לגרום לביצוע ההוראות הכלולות במסגרת הפונקציה, צריך להפעיל אותה על ידי פנייה מפורשת אליה, פעולת "קריאה" (call).
תחביר הפונקציה:
function colorChange()
ההצהרה שהקוד שייך לפונקציה נעשית על ידי המילה השמורה function ואחריה שם הפונקציה וסוגריים ריקים. בסוגריים תשתמש, בשלב מאוחר יותר, להעברת נתונים (פרמטרים) אל הפונקציה.
את ההוראות הנכללות בפונקציה יש לתחום בין סוגריים מסולסלים:
function colorChange()
{
document.bgColor = 'Orange' ;
}
מיקום הפונקציות בתוכנית
את הפונקציות אפשר לכתוב בכל מקום בין פקודות התוכנית, ובלבד שהן תיכתבנה בין תגית <script> לתגית </script>. עם זאת, כדי למנוע מצב בו תתבצע קריאה לפונקציה שעוד לא נטענה אל הדפדפן, רצוי מאוד לכתוב את הפונקציות במסגרת התגית <script> הנמצאת בין תגית <head>.
הקוד הבא ( 06.html) מכיל שתי פונקציות. אין ממה לחשוש, ממילא הפונקציות האלה לא יופעלו!
<html>
<head>
<script language="JavaScript">
function switchItOver() {
window.document.myPic.src = 'images/bluePlane.gif';
}
function switchItOut() {
window.document.myPic.src = 'images/yellowPlane.gif';
}
</script>
</head>
<body>
<p>
<a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
onmouseover="document.bgColor='Orange';"
onmouseout="document.bgColor='white';">
נותנים לך יד(ע) להצלחה
</a>
</p>
<img name="myPic" src="images/yellowPlane.gif" border="0" />
</body>
</html>
תוכל להפעיל את קובץ 06.html
, להזיז את הסמן מעל לאובייקטים (הקישור והתמונה). כאשר סמן העכבר נמצא מעל אובייקט הקישור וכאשר הוא מוסט ממנו משתנה הרקע ואילו כאשר סמן העכבר נע מעל אובייקט התמונה – שום דבר לא קרה! אבל מדוע, הרי נכתבו פונקציות (לא אחת אלא שתיים) שתפקידם לשנות את תמונת המטוס?
הסיבה היא שאמנם נכתבו פונקציות, אבל איך ידע הדפדפן מתי להפעיל אותן? כאשר כתבת משפטי JavaScript במסגרת האירועים onmouseover ו- onmouseout בתגית <a> היה ברור לדפדפן שהוא יפעיל את משפטי JavaScript שהאירועים האלה יתרחשו במסגרת התגית <a>. עכשיו כשיש שתי פונקציות, מתי יש להפעיל אותן.
זה המקום להתקדם הלאה ולכרוך שלושה דברים יחד: אובייקט, אירוע ו- פונקציה.
כריכת קוד לאירוע באמצעות פונקציה
נחזור לדוגמת המטוס. יש אובייקט תמונה הנקרא myPic יש אירועים (onmouseover, onmouseout) ויש פונקציות (switchItOver(), switchItOut()). איך מקשרים את כל אלה? דרך התגית, בצורה הבאה:
<img name="myPic" src="images/yellowPlane.gif" border="0"
onmouseover="switchItOver();"
onmouseout="switchItOut();" />
כאשר יתרחש האירוע onmouseover באובייקט myPic תופעל הפונקציה switchItOver() וכאשר יתרחש האירוע onmouseout באובייקט myPic תופעל הפונקציה switchItOut().
את מה שנעשה במסגרת קובץ 05.html
ניתן לעשות גם עם פונקציה, ראה קובץ 07.html
:
<html>
<head>
<script language="JavaScript">
function switchItOver() {
window.document.myPic.src = 'images/bluePlane.gif';
}
function switchItOut() {
window.document.myPic.src = 'images/yellowPlane.gif';
}
</script>
</head>
<body>
<p>
<a href="http://www.hod-ami.co.il" title="אתר הוד-עמי"
onmouseover="document.bgColor='Orange';"
onmouseout="document.bgColor='white';">
נותנים לך יד(ע) להצלחה
</a>
</p>
<img name="myPic" src="images/yellowPlane.gif" border="0"
onmouseover="switchItOver();"
onmouseout="switchItOut();" />
</body>
</html>
כתיבה זו מקילה על קריאות הקוד. הפונקציה יכולה להכיל יותר ממשפט ביצוע אחד. זו יכולה להיות פונקציה שתכיל מספר רב של שורת קוד לבדיקת נכונות טופס ו/או ביצוע של כל פעילות אחרת על האובייקטים שבמסמך.
בקוד 07.html
יש שתי בעיות: האחת, הפונקציות switchItOver() ו- switchItOut() "תפורות" רק לאובייקט בשם myPic וכזה יכול להיות רק אובייקט אחד בכל דף HTML. משמעות הדבר היא שאם תוסיף עוד אובייקט מסוג תמונה לאותו דף HTML וגם את התמונה שלו תרצה לשנות במעבר עכבר, יהיה עליך לכתוב שתי פונקציות נוספות. הבעייה השנייה היא לא בדיוק בעיה, אבל אם לא שמת לב חזרנו לכתוב window.document.myPic – ארוך ומייגע.
תגובות בפייסבוק