פרק 22: האובייקט FORM

· הקדמה

· התכונות

· המתודות

· טיפול באירועים

· טופס E-MAIL

· תרגילים

הקדמה

מרכיבי ה-FORM במסמך ה-HTML, כפי שוודאי שמת לב בדוגמאות השונות, מהווים מעין חוליה מקשרת בין פקודות ה-javaScript למרכיבי ה-GUI שנוצרו במסמך באמצעות תגיות HTML. כאשר מסמך מועלה אל הדפדפן נוצרים אובייקטים מסוג Form אשר מייצגים את מרכיבי ה-Form שמופיעים במסמך ה-HTML. ה-references לאובייקטים מסוג FORM שנוצרים מוחזקים בתוך משתנים שמהווים תכונות באובייקט ה-document אשר מייצג את המסמך. השמות של כל אחת מהתכונות האלה זהים בהתאמה לשמות שניתנו למרכיבי ה-Form במסמך ה-HTML באמצעות התכונה NAME.

כפי שניתן לראות בתרשים שמתאר את היררכית האובייקטים שנוצרת, מתחת לאובייקט ה-Form יכולים להיווצר אובייקטים מסוגים שונים אשר מייצגים את מרכיבי ה-GUI השונים (כפתורים, שדות טקסט, כפתורי רדיו וכדומה..). אובייקטים אלה, כאשר הם נוצרים – ה-references אליהם מוחזקים בתוך תכונות שקיימות באובייקט ה-Form.

כאשר כותבים מסמך HTML אשר כולל בתוכו גם פקודות ב-javaScript, ניתן לעשות שימוש במילה this מתוך מרכיבי ה-HTML שמייצגים את מרכיבי ה-GUI (כגון המרכיב INPUT אשר יכול לייצג שדה טקסט, כפתור וכו'). כך למשל, כאשר מוסיפים אל תוך תגית ה-<INPUT> את אחת התכונות אשר משמשות לקביעת הטיפול ב-event שנוצר (כגון onClick) ניתן להשתמש במילה this כ-reference למרכיב ה-GUI ובדרך זו, למעשה, לשלוח אל הפונקציה שמפעילים reference לאובייקט שנוצר בדפדפן כדי לייצג את אותו מרכיב GUI (המרכיב אשר נוצר באמצעות תגיות HTML). כך למשל, בדוגמא הבאה ניתן לראות כיצד מופעלת המתודה checkData כדי לבדוק את הטקסט שהוכנס אל תוך שדה הטקסט כאשר מישהו משנה אותו (תגובה לאירוע change), וכיצד נשלח אל המתודה reference לאוביקט שמייצג את שדה הטקסט. כמו כן, ניתן לראות כיצד בהגדרת המתודה, נעשה שימוש ב-reference זה כדי לקבל את תוכנו של שדה הטקסט.

.

.

.

<INPUT TYPE="text" SIZE="40" onChange="checkDate(this)">

.

.

.

<SCRIPT LANGUAGE="javaScript1.2">

function checkData(str)

{

if (this.value<0 || this.value>0)

window.alert("This is an Illegal value !");

}

</SCRIPT>

התכונות שקיימות באובייקט

בחלק זה אסקור את התכונות שקיימות באובייקט FORM.

התכונה action

תכונה זו מכילה את הערך שניתן לתת לתכונה ACTION, אשר ניתן להוסיף אל תוך התגית <FORM> במסמך ה-HTML. הערך שתכונה זו מקבלת הוא ה-URL שאליו נשלחת האינפורמציה כאשר מדובר בטופס e-mail או כאשר מדובר בטופס שנתוניו נשלחים לתכנית CGI שנמצאת בשרת לצורך עיבוד הנתונים.

תכונה זו איננה read-only. את הערך של תכונה זו ניתן לשנות על פי הצורך. בדרך זו, ניתן באמצעות פקודותscript מתאימות לשנות את ערכה של התכונה כך שתכיל URL אחר, וזאת בהתאם לפעולותיו של המשתמש.

תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה elements

תכונה זו מהווה מערך אשר כולל בתור איבריו references לכל אחד מהאובייקטים אשר מייצגים את מרכיבי ה-GUI השונים בטופס. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה encoding

ערכה של תכונה זו הוא מחרוזת תווים שערכה הוא הערך שמכילה התכונה ENCTYPE אשר ניתנת להוספה אל תוך התגית <FORM>. התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה method

תכונה זו מכילה את אחד משני הערכים המחרוזתיים הבאים: "GET" או "POST". הערך שתכונה זו מכילה זהה לערכה של התכונה METHOD אשר ניתנת להוספה אל תוך התגית <FORM>. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה name

תכונה זו מכילה ערך מחרוזתי אשר זהה לערכה של התכונה NAME אשר הוספה אל התגית <FORM> במסמך ה-HTML. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה target

תכונה זו מכילה את ערכה של התכונה TARGET אשר ניתן להוסיף אל תוך התגית <FORM> במסמך ה-HTML כדי לציין את שם החלון שבו יופיע דף ה-HTML אשר מגיע בחזרה מהשרת (לא אחת מגיע מהשרת דף HTML כתשובה לפניה שנעשתה). כך למשל קורה כאשר מפעילים מנוע חיפוש מתוך מסמך HTML באמצעות יצירת טופס פניה למנוע החיפוש. הערך שיש לתת לתכונה זו הוא שמו של window או של frame אשר בו יוצג המסמך אשר הגיע בחזרה מהדפדפן. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

המתודות

בחלק זה ייסקרו המתודות אשר ניתן להפעיל על אובייקט ה-Form.

המתודה handleEvent()

מתודה זו נתמכת רק על ידי Netscape Nevigator החל מגרסה 4, והיא פועלת בדומה למתודה handleEvent() אשר ניתן להפעיל על האובייקטים window ו- document. מתודה זו איננה מחזירה אף ערך.

המתודה reset()

באמצעות הפעלת מתודה זו גורמים לכל מרכיבי ה-GUI שמופיעים בתוך ה-FORM לחזור למצבם ההתחלתי (למצבם ההתחלתי כפי שהיה כאשר המסמך נטען, לראשונה, אל תוך הדפדפן). מתודה זו לא מקבלת אף ערך בעת הפעלתה, וגם לא מחזירה אף ערך בחזרה. מתודה זו נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4. הדוגמא הבאה מציגה הדגמה להפעלתה של מתודה זו.

<!-- file name : resetForm.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>resetForm.html</TITLE>

<SCRIPT LANGUAGE="javaScript1.2">

function clearForm(ob)

{

ob.reset();

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of the reset method</H1>

<HR>

<FORM>

<BR><LABEL>name:<INPUT TYPE="text" SIZE="20" NAME="nameTf"></LABEL>

<BR><LABEL>age:<INPUT TYPE="text" SIZE="4" NAME="ageTf"></LABEL>

<BR><INPUT TYPE="button" VALUE="PRESS TO CLEAR" onClick="clearForm(this.form)">

</FORM>

</BODY>

</HTML>

המתודה submit()

פעולתה של מתודה זו דומה לפעולה שמתרחשת כאשר המשתמש לוחץ על כפתור ה-"SUBMIT" . כאשר מפעילים מתודה זו מתוך אובייקט מסוג Form גורמים לאינפורמציה, שנמצאת בתוך מרכיבי ה-GUI השונים ששייכים אליו, להישלח אל תכנית ה-CGI (או אל ה-e-mail המתאים) בהתאם לערכן של התכונות של אותו אובייקט Form (כפי שהוספו אל תוך התגית<FORM> בעת יצירת הטופס במסמך ה-(HTML.

יש להימנע מלהוסיף פקודות ב-javaScript אחרי הפעלתה בתוך מקטע פקודות ב-javaScript כיוון שזה עלול לגרום לביטול פעולתה של המתודה. מתודה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

טיפול באירועים

בחלק זה ייסקרו התכונות אשר ניתן להוסיף אל תוך מרכיב ה-FORM כדי לטפל ב-events השונים שיכולים להיווצר באובייקט.

onReset

כאשר לוחצים על כפתור RESET כדי להחזיר את הטופס למצבו ההתחלתי נוצר האירוע Reset "חלקיק השניה" לפני שהטופס מוחזר למצבו ההתחלתי. באמצעות הוספת תכונה onReset אל תוך התגית <FORM> ניתן לקבוע שפקודות מסוימות תתבצענה כתגובה להיווצרות האירוע האמור. כך למשל, ניתן להיעזר באפשרות זו כדי להציג למשתמש הודעה אשר תבקש את אישורו הסופי למחיקת הטופס. בדומה ל-event handlers: onMouseOver ו- onMouseOver גם בשימוש ב-onReset יש לקבוע את ערכה כך שהפקודה האחרונה שתתבצע תחזיר את הערך true כדי שפעולת החזרת מרכיבי הטופס למצבם ההתחלתי אכן תתבצע. בדרך זו ניתן, למשל, לקבוע את ערכה של התכונה onReset כך שיהיה שווה להפעלה של המתודה confirm מתוך window, ובהתאם לערך שהיא תחזיר (true או false) לגרום להחזרת מרכיבי הטופס למצבם ההתחלתי. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

onSubmit

כאשר לוחצים על כפתור SUBMIT כדי לגרום לתוכנו של הטופס להישלח אל כתובת URL מסוימת נוצר האירוע Submit "חלקיק השניה" לפני שתוכנו של הטופס אכן נשלח. באמצעות הוספת התכונה onSubmit אל תוך התגית <FORM> וקביעת ערכה כך שיהיה שווה לקבוצה של פקודות ב-javaScript ניתן לקבוע שהפקודות הללו תתבצענה לפני שתוכנו של הטופס יישלח. בדרך זו ניתן לבצע בדיקה לנתונים שהוכנסו לשדות הטופס כדי לוודא את נכונותם לפני שהטופס נשלח. יש לשים לב לכך שהאירוע submit נוצר אך ורק כתגובה ללחיצה על כפתור SUBMIT המקורי, והוא איננו נוצר כתגובה להפעלת המתודה submit() אשר הוצגה לפני כן. ה-eventHandler: onSubmit נתמך על ידי Netscape Nevigator החל מגרסה 3, וגם על ידי Inernet Explorer החל מגרסה 4. בדומה ל-onReset, גם כאן, כדי שפעולת ה-submit תושלם יש לקבוע את ערכה של התכונה onSubmit כך שיהיה שווה לסדרה של פקודות ב-javaScript כשהפקודה האחרונה שמתבצעת מחזירה את הערך true . אם הפקודה האחרונה מבין הפקודות שהושמו אל תוך התכונה onSubmit לא מחזירה את הערך true וערכה גם לא שקול ל-true אז פעולת ה-submit (שליחת תוכנו של הטופס לתכנית CGI או ל-e-mail) לא תתבצע.

התכנית הבאה מדגימה את אפשרות השימוש בתכונות onReset ו- onSubmit.

<!-- file name : onSubmitOnResetDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>onSubmitOnResetDemo.html</TITLE>

<SCRIPT LANGUAGE="javaScript1.2">

{

function isSubmitOk()

{

return window.confirm("are you sure about sending this FORM ?");

}

function isResetOk()

{

return window.confirm("are you sure about clearing this FORM ?");

}

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of the onSubmit and the onReset Event handlers</H1>

<HR>

<FORM name="myForm" onSubmit="return isSubmitOk()"

onReset="return isResetOk()" METHOD="POST" ACTION="mailto:haim_michael@yahoo.com">

<BR><LABEL>name:<INPUT TYPE="text" SIZE="20" NAME="nameTf"></LABEL>

<BR><LABEL>age:<INPUT TYPE="text" SIZE="4" NAME="ageTf"></LABEL>

<BR><LABEL>address:<INPUT TYPE="text" SIZE="40" NAME="address"></LABEL>

<HR>

<BR><INPUT TYPE="RESET">

<BR><INPUT TYPE="SUBMIT">

</FORM>

</BODY>

</HTML>

טופס E-MAIL

כפי שכבר הוזכר קודם לכן, ניתן לייצור טופס (FORM) אשר תוכנו יישלח אל כתובת דואר אלקטרוני. כדי לעשות זאת יש להוסיף אל תוך התגית <FORM> שלוש תכונות:

1. יש להוסיף את התכונה METHOD ולקבוע את ערכה כך שיהיה שווה ל-"POST".

2. יש להוסיף את התכונה ACTION ולקבוע את ערכה כך שיהיה שווה לכתובת ה-URL של הדואר האלקטרוני שאליו יישלח תוכנו של הטופס. כדי לקבל את ה-URL של כתובת הדואר האלקטרוני יש להוסיף לפניה את המחרוזת: "mailto:". בהמשכה של הכתובת ניתן להוסיף סימן שאלה כשאחריו מצוין הנושא באמצעות המילה subject, סימן שיוויון אחד אחריה ואחריו הנושא.

3. התכונה ENCTYPE כשערכה הוא סוג ה-MIME של הנתונים שנשלחים

כך, לדוגמא, תיראה התגית <FORM> כשהיא מציינת את תחילתו של טופס אשר נתוניו אמורים להישלח לכתובת הדואר האלקטרוני: haim_Michael@yahoo.com:

<FORM NAME="entryData" METHOD="POST" ACTION="mailto:haim_michael@yahoo.com?subject=scripts" ENCTYPE="text/plain">

תרגילים

1. כתוב/כתבי מסמך HTML אשר כולל בתוכו טופס הזמנת פריטים מהסופרמרקט, וכפתור לחיץ אשר לחיצה עליו גורמת לחישוב עלות הקניה. כל שורה בטופס תכלול את שם המוצר, את מחירו ושדה טקסט נוסף אשר בו תוכנס הכמות המבוקשת. כל המסמך ייווצר באמצעות פקודות ב-javaScript אשר ייצרו, בנוסף, גם מערכים אשר יכילו את מחירי המוצרים השונים ואת שמותיהם.

2000 © All the rights reserved to Haim Michael & Zindell Publishing House Ltd.

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect