שיעור 2
דף 6: דוגמא למערך אסוציאטיבי.
The Merry Monkey of Multimedia Gulch Phone Book
הדוגמא הזו היא מעט מעורבת, אז בוא נעבור עליה באטיות. ראשית, הבא נתבונן בספר הטלפונים עצמו. ספר הטלפונים, שמוגדר ב- header (phone_book) ובעל שבעה ערכים, נראה כך:
var phone_book = new Array();
phone_book["happy"] = "(203) 555-1234";
phone_book["sleepy"] = "(203) 555-2345";
phone_book["sneezy"] = "(203) 555-4321";
phone_book["sleazy"] = "(203) 555-3245";
phone_book["sneery"] = "(203) 555-3213";
phone_book["bleary"] = "(203) 555-2365";
phone_book["tweaked"] = "(203) 555-1664";
המפתח לכל אחד מהערכים הוא שמו של הגמד, והערכים עצמם הם מספרי הטלפון של כל אחד מהשמות בהתאמה. כשנרצה לדעת מה מספר הטלפון של הגמד החביב עלינו, נניח "sneezy", נכתוב:
var the_number = phone_book["sneezy"];
<form name="the_form">
<b>Name:</b>
<select onChange = "displayNumber(phone_book, this.options[selectedIndex].value);">
<option value="happy">Happy
<option value="sleepy">Sleepy
<option value="sneezy">Sneezy
<option value="sleazy">Sleazy
<option value="sneary">Sneery
<option value="bleary">Bleary
<option value="tweaked">Tweaked
</select>
<p>
<b>Number:</b>
<input type="text" name="number_box" value="">
</form>
שים לב, שלטופס ולאלמנטים שבתוכו יש שמות. דבר זה מאפשר לנו לקרוא ולכתוב מ/אל אלמנטים ספציפים בטופס.
כמו כן, שים לב ל- onChange handler בתווית ה- select. שורת קוד זו, למעשה מנחה את הדפדפן להפעיל את הפונקציה displayNumber כל אימת שמבוצע שינוי ב- select. הפונקציה, כמובן, מוגדרת בראש הדף. אם אני אבחר ב- "sneezy", הביטוי this.options[selectionIndex].value יחזיר "sneezy". אם אתה זקוק לרענון אודות פקודה זו, הבט במדריך הבסיסי - שיעור 5.
ברגע, שהבנו מה המשתמש בחר, קפצנו לפונקציה displayNumber שנראית כך:
function displayNumber(phone_book, entry)
{
var the_number = phone_book[entry];
window.document.the_form.number_box.value = the_number;
}
הפונקציה מקבלת שני פרמטרים – ספר טלפונים ושם – הנדרשים על מנת שהפונקציה תוכל לעבוד. השורה הראשונה בפונקציה,
var the_number = phone_book[entry];
מחפשת את השם בספר הטלפונים. והשורה השנייה,
window.document.the_form.number_box.value = the_number;
שמה את המספר בתוך האלמנט הקרוי number_box.
זהו. כפי שאתה רואה, מערכים אסוציאטיבים מהווים דרך טובה לקשר בין מחרוזת אחת לשנייה. הם שימושיים לקישור שמות למספרי טלפון, סיסמאות, תאריכי לידה ועוד כל מיני כאלה. בעוד מספר שיעורים אני אציג שימוש נוסף למערכים אסוציאטיבים, אז עדיין אל תשליך אותם לתוך בור העובדות-שכדאי-לשכוח.
ועכשיו, אם אתה מוכן לזאת, בוא לשחות בין העוגיות.
חזור לתחילת הדף
לדף הבא «--
|
