שיעור 5
דף 3: מניפולציות על ערך שדה הטקסט.
העבר את העכבר מעל הקישורים (Links) מטה, וראה מה יקרה.
הקסם נעשה ע"י שינוי הערך של שדה הטקסט. הטופס יראה כמו זה מהדוגמא האחרונה:
<form name="first_form">
<input type="text" name="first_text" value="Are you happy?">
</form>
הקישורים (Links) שמשנים את הטקסט הם:
<a href="#" onMouseOver="window.document.first_form.first_text.value='Clap clap!';">Yes, and I know it.</a>
<a href="#" onMouseOver="window.document.first_form.first_text.value='Sour puss!';">No!</a>
אלו הם מעברי סמן נורמלים; החלק החשוב הוא:
windows.document.first_form.first_text.value=Clap clap!
כלומר: "מצא את הטופס שנקרא: first_form במסמך, מצא את אלמנט הטופס: first_text והצב בו את הערך 'Clap clap!'." השורה השניה עובדת באותו אופן. הדבר דומה מאוד לשינוי ב- SRC של התמונה. במקום ה- SRC, לשדה הטקסט יש ערך.
עוד כמה סוגים של שדות טפסים עשויים להיות מושפעים ע"י שינוי הערכים שלהם. לדוגמא:
הטפסים והלינקים כאן מאד דומים לאלה שבדוגמא למעלה , הטופס הוא:
<form name="form_two">
<textarea name="the_textarea" rows=10 cols=60>
Mouse over below to see the first verse of
The Webmonkey song, adapted from
"I Wanna Be Like You" (The Monkey Song)
from Walt Disney's The Jungle Book
written by Richard M. Sherman and Robert B. Sherman
</textarea>
</form>
כעיקרון הלינקים הם בערך כמו שדה הטקסט בדוגמא:
<a href="#" onMouseOver="window.document.form_two.the_textarea.value=first_part;">Part 1</a>
<a href="#" onMouseOver="window.document.form_two.the_textarea.value=second_part;">Part 2</a>
ההבדל היחידי הוא שבמקום להקצות מחרוזת לערך של אזורי הטקסט אני מקצה משתנים שאני מגדיר בתוך ה- Header. הבט בקוד המקור על מנת לראות שהם שם. אני עשיתי זאת רק למטרת הסדר, על מנת להוציא את אותן מחרוזות ארוכות מקוד ה-HTML "קוף מטופח הוא קוף שמח". הנה דוגמא לאחת המחרוזות:
var first_part = "Now I'm the king of the swingers\n
Oh, the jungle VIP\n
I've reached the top and had to stop\n
And that's what botherin' me";
שים לב לתו 'n\' – זוהי דרך המחשב הסטנדרטית לסימון שורות חדשות. באופן כללי, בגלל שאתה עובד עם קוד HTML, השורה החדשה אינה חשובה כל כך. אבל אם אתה כותב משהו בתוויות <Pre>, או אם אתה כותב באיזור הטקסט אז ה-'n\' בא לשימוש.
בנוסף לשינוי הערכים של אלמנטים בטופס, javascript נותנת לך את האפשרות לזהות אירועים שמתרחשים בתוכם. דוגמא, בדף הבא.
חזור לתחילת הדף
לדף הבא «--
|
