שיעור 5
דף 10: ה- onChange באלמנטי טופס הבחירה.
התנסה עם הדוגמא הבאה ורק אז קרא את תיאור הקוד, שורה אחר שורה, מטה.
My favorite animal is ...
יחסית, זהו קוד JavaScript מורכב מאוד, ולכן נעבור באיטיות על החומר. קודם כל בוא נתמקד בטופס עצמו:
<form name="the_form">
<select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);">
<option selected>Dogs
<option>Fish
<option>Birds
</select>
<select name="the_examples" multiple>
<option>poodle
<option>puli
<option>greyhound .
</select>
</form>
לטופס הנ"ל יש שני אלמנטים, אלמנט ה- pulldown select ואלמנט ה- list select. ל-pulldown select יש אחראי (handler) ל- onChange שנקרא בשם פונקציית ה- ()swapOptions. פונקציה זו מוגדרת ב- header, ובעלת פרמטר אחד: בחירת סוג החיה.
עכשיו, נבדוק את ה- header. הדבר הראשון שאעשה הוא להגדיר מערכים חדשים:
var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");
שים לב שהמערכים הינם כשמות החיות בתוך בחירת תפריט ה- pulldown. בקרוב תבין מדוע. עכשיו, נתמקד בפונקציה שמתרחשת כאשר תפריט בחירת ה-pulldown משתנה:
function swapOptions(the_array_name)
{
var numbers_select = window.document.the_form.the_examples;
var the_array = eval(the_array_name);
setOptionText(window.document.the_form.the_examples, the_array);
}
בהגדרת הפונקציות נכלל פרמטר אחד: the_array_name. אם תגרור למטה את בחירת ה- pulldown לבחירה "דג", שם the_array ישתווה ל-"דג".
השורה הראשונה בגוף הפונקציה מציבה את המשתנה שייתחס לאלמנט הטופס השני, רשימת הבחירות.
השורה השנייה מציגה משהו חדש: eval(). פונקציית eaval() קצת מסובכת ולכן נלמד עליה בשיעורים הבאים. התוצאה הסופית של השורה השנייה היא שהמשתנה the_array ישתווה לערכים שהוגדרו קודם. אם שם המערך: the_array_name נקרא "דג", אז ה-the_array ישתווה למערך של ה"דג".
השורה השלישית בפונקציה מפעילה פונקציה אחרת שנקראת: setOptionText(). פונקציה זו מציבה את הערכים של רשימת הבחירות לתוכן של the_array. הנה דוגמא:
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
הפונקציה מקבלת שני פרמטרים, התייחסות לאלמנט הבחירה ולמערך. השורה הראשונה של הפונקציה גורמת ללולאה, שעוברת על כל האפשרויות באלמנטי הבחירה. זכור, שהתכונות של האפשרויות באלמנטי הבחירה הן מערך של כל אפשרויות הבחירה. לכן, אתה יכול לברר כמה אפשרויות יש בבחירה ע"י שימוש באורך במערך. כך הלולאה עובדת.
בפעם הראשונה שאתה לוחץ על הלולאה, המשתנה של הלולאה שווה ל- 0. אז גוף השורה מפעיל:
the_select.options[0].text = the_array[0];
אם תבחר ב-"דג" בתפריט ה- pulldown, the_array[0] יהפוך לדג "טרוטה", כך שהשורה הזו תשנה את האשפרות הראשונה ברשימת הבחירה ל"טרוטה". בפעם הבאה שתהיה לולאה, ערך משתנה הלולאה יהיה 1, ואז האפשרות השנייה ברשימת הבחירה תשתווה לערך של "מקרל".
ישנה אזהרה חשובה אחת לתהליך זה. כאשר אתה משנה את טקסט האפשרויות, הגודל של הבחירה לא ישתנה. כך שאם תרצה לשנות את אפשרויות הטקסט למשהו מאד ארוך, רוב הסיכויים שיחתך באמצע.
דרך אחת לעקוף את הבעיה, היא ע"י מתיחת הבחירה כאשר אתה ניגש אליה לראשונה. אני, למשל, עשיתי כך:
"<option>greyhound ."
(הרווחים בכוונה).
שים לב לנקודה שהשתמשתי על מנת למתוח את תיבת הבחירה שלי. זה מתחכם, אבל עובד. עכשיו, כשאתה מבין איך הדוגמא הזאת עובדת, אתה יודע המון על JavaScript, לא יהיה לך שום קושי לבצע את עבודת הבית המוטלת עליך לשיעור זה. ברגע שתסיים אותה, המשך לסקירת השיעור של היום.
חזור לתחילת הדף
לדף הבא «--
|
