פרק לדוגמה

‫נושא ‪8‬‬
‫הגדרה‬
‫מהו טופס?‬
‫נציג כאן שתי הגדרות שישרתו את המטרות של כתיבת הפרק‪:‬‬
‫הגדרה ‪ :1‬הטופס הוא כלי לאיסוף נתונים הבנוי משדות אותם הגולש ממלא ושולח למנהל האתר‬
‫או למאגר נתונים )הרחבה ראה בנושא ‪ :9‬טפסים – עמוד ‪.(59‬‬
‫הגדרה ‪ :2‬הטופס הוא אובייקט השייך לאובייקט מסמך שנגזר מאובייקט חלון )ראה תרשים‬
‫בנושא ‪ :2‬אובייקט חלון בעמוד ‪.(85‬‬
‫שתי ההגדרות יתנו מענה הולם להתייחסות לטופס‪ ,‬הן מבחינת הגולש )שממלא את הנתונים בטופס‬
‫או בוחר אותם מתוך רשימה( והן מבחינת המתכנת שבונה את הטופס וצריך לבדוק את תקינותו‪.‬‬
‫‪ ...íòô‬בעבר כאשר הלקוח היה ממלא טפסים‪ ,‬בדיקת אימות הנתונים של הטופס הייתה מתבצעת‬
‫בשרת‪ .‬הלקוח היה ממלא את הטופס ושולח‪ ,‬בשרת היו מתבצעות בדיקות כגון האם מולאו כל‬
‫השדות‪ ,‬האם כתובת הדואר חוקית וכו'‪ .‬תוצאות הבדיקה היו חוזרות ללקוח עם דרישה לתיקון‪.‬‬
‫הליך זה היה מאט את קצב העבודה אצל הלקוח וגורם עומס מיותר על השרת‪.‬‬
‫‪ ...íåéë‬לפני שליחת הנתונים נהוג לבדוק במחשב הלקוח את הערכים שהוקלדו בטופס ולבדוק‬
‫שהטופס מולא כנדרש ככל שניתן‪ .‬הבדיקות מתבצעות בעזרת הוראות ב‪.JavaScript -‬‬
‫בדיקת שדות טופס ואימות נתונים לשם מה?‬
‫טופס הוא כלי חשוב ושכיח לאיסוף נתונים מהגולשים ומשתמשים באתרי אינטרנט רבים‪.‬‬
‫דוגמאות לבדיקות בטופס‬
‫‬
‫בשדה ת‪.‬ז‪ – .‬האם נרשם ערך המורכב מ‪ 9 -‬תווים‪.‬‬
‫‬
‫בשדה ד‪.‬אלקטרוני – האם כתובת הדואר חוקית )למשל האם הכתובת מכילה @(‪.‬‬
‫‬
‫בשדה מיקוד – האם מספר הספרות ‪.5‬‬
‫בחלק ב של הספר‪ html :‬למדנו כיצד לבנות טפסים ולשלבם בדפי האתר‪.‬‬
‫בחלק ג )הנוכחי( של הספר‪ JavaScript :‬נלמד כיצד לבדוק את הטפסים שמילאו הגולשים בעזרת‬
‫פנייה לערכים שבשדות הטופס‪ .‬הפנייה מתבצעת בעזרת תחביר הנקודה‪ .‬שם שדה‪.‬שם טופס‪document .‬‬
‫)הערה ‪ :‬התחביר המלא הוא ‪...-‬שם שדה‪.‬שם טופס‪(windows. document .‬‬
‫בפרק הבא נראה כיצד ניתן לבצע על הערכים בדיקת מורכבות יותר בעזרת פונקציות של מחרוזות‪.‬‬
‫‪..............................................................................................................................‬‬
‫‪................................................................................................................................................‬‬
‫‪128‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪èñ÷è äãù ú÷éãá‬‬
‫שדה טקסט הוא שדה בו הגולש מקליד מחרוזת תווים‪ .‬את הערך בשדה טקסט ניתן לשלוף‬
‫ולהתייחס אליו כאל מחרוזת טקסט ולבצע עליו את כל הפעולות שביצענו על טקסט כגון‪ :‬השוואה‪,‬‬
‫הדפסה‪ ,‬השמה במשתנה וכו'‪.‬‬
‫מבנה הפנייה לערך שדה טקסט בטופס‬
‫פנייה לשדה טקסט‬
‫השמת ערך בשדה טקסט‬
‫‪.value‬שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫ערך =‪.value‬שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫‪form_a.html‬‬
‫‪èñ÷è äãù :1 äøåúô äîâåã‬‬
‫בנה טופס בו הגולש יקליד את צבע הרקע של המסמך או יקליד קוד הקסדצימלי לצבע‪.‬‬
‫לאחר האירוע של לחיצת כפתור‪ ,‬צבע הרקע ישתנה בהתאם לערך שהוקלד‪.‬‬
‫התוצאה בדפדפן‬
‫בניית טופס המכיל שדה טקסט וכפתור‬
‫הטופס לאחר הקלדת צבע‬
‫רקע‪:‬‬
‫דוגמה‬
‫פתורה‬
‫> ‪<html‬‬
‫>‪<head‬‬
‫>‪ </title‬טפסים >‪<title‬‬
‫>"‪<script language="javascript‬‬
‫‪<!-‬‬‫)(‪function MYbg_color‬‬
‫{‬
‫הפונקציה ‪ MYbgcolor‬משנה את‬
‫הרקע במסמך בהתאם לערך שיוקלד‬
‫בשדה‪ .‬הפונקציה מכילה הוראה‬
‫הבודקת האם הוקלד ערך‪ :‬אם לא‬
‫הוקלד ערך יופיע חלון ובו כתוב "הכנס‬
‫צבע"‪ ,‬אם כן משנה את צבע הרקע‬
‫בהתאם לערך שהתקבל מהטופס‪.‬‬
‫הטופס כפי שמוצג לגולש‪:‬‬
‫‬
‫לקבלת הערך שהוקלד בשדה הטקסט‬
‫)""==‪if (document.change.color.value‬‬
‫)"הכנס צבע"(‪alert‬‬
‫‪else‬‬
‫{‬
‫;‪document.bgColor=document.change.color.value‬‬
‫"בוצע"=‪document.change.color.value‬‬
‫}‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬
‫> ‪</head‬‬
‫>‪<body‬‬
‫לאחר הלחיצה על הכפתור‪:‬‬
‫הקש שם של צבע או ערך הקסדצימלי‬
‫>"‪<form name="change‬‬
‫>‪<input type="text" name="color" size=10 ><br‬‬
‫"לחץ לשנות צבע "=‪<input type="button" value‬‬
‫>‪onclick="MYbg_color()"> <br> <br‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫לכפתור הוספנו הוראה לזמן‬
‫> ‪</ html‬‬
‫ולהפעיל את הפונקציה לשינוי צבע‬
‫)לאחר האירוע ‪.(OnClick‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪129‬‬
‫‪åéãø äãù ú÷éãá‬‬
‫שדה רדיו הוא שדה בו הגולש מסמן אחת מבין מספר אפשרויות המוצגות לפניו ככפתורי רדיו ‬
‫בטופס המכיל כפתורי רדיו יש לכל האיברים )כפתורי הרדיו באותו הבלוק( שם זהה‪ .‬זהו למעשה‬
‫מערך* בעל שם אחד המכיל ערכים שונים‪ .‬ניתן לגשת לכל אחד מערכי המערך באמצעות מיקומם‪.‬‬
‫* מערך הוא אוסף ערכים מאותו טיפוס שהגישה אליהם ע"י ציון שם המערך ומיקום האיבר‬
‫מבנה הפניה לערך שדה רדיו בטופס‬
‫‪].value‬מיקום הכפתור במערך[שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫‪åéãø éøåúôë :2 äøåúô äîâåã‬‬
‫‪form_b.html‬‬
‫בנה טופס בו הגולש מסמן אחת מתוך ‪ 3‬אפשרויות המציינות את השעה שהגיע לבית המלון‪.‬‬
‫לאחר אירוע של לחיצת כפתור תוצג בחלון הודעה עם הבחירה‪.‬‬
‫התוצאה בדפדפן‬
‫‬
‫דוגמה‬
‫פתורה‬
‫קוד התכנית ‪ -‬בניית טופס המכיל שדה רדיו וכפתור‬
‫)הסבר מפורט ראה עמוד הבא(‬
‫>"‪< html dir="rtl‬‬
‫> ‪< head‬‬
‫> ‪ </ title‬כפתורי רדיו ‪-‬טפסים > ‪< title‬‬
‫הטופס כפי שמוצג‬
‫לגולש‪:‬‬
‫>"‪<script language="javascript‬‬
‫הפונקציה מזהה את כפתור הרדיו‬
‫‪<!-‬‬‫שהגולש בחר ומציגה את בחירתו בחלון‪.‬‬
‫)(‪function bdika‬‬
‫{‬
‫)‪for(i=0;i<document.hotel.reaching.length;i++‬‬
‫הטופס לאחר‬
‫בחירת כפתור‪:‬‬
‫)‪if(document.hotel.reaching[i].checked==true‬‬
‫{‬
‫;)‪alert(document.hotel.reaching[i].value‬‬
‫;‪break‬‬
‫}‬
‫שם הטופס "‪ "hotel‬והוא מכיל ‪ 3‬כפתורי רדיו‪.‬‬
‫לכל כפתורי הרדיו יש שם זהה ‪ .reaching -‬כל‬
‫אחד מהכפתורים מכיל ערך אחר‪, morning :‬‬
‫‪.evening , noon‬‬
‫לאחר הלחיצה על‬
‫הכפתור "בדיקה"‪:‬‬
‫‪130‬‬
‫}‬
‫>‪//--‬‬
‫> ‪</ script‬‬
‫>‪</head‬‬
‫> ‪<body‬‬
‫>"‪<form name="hotel‬‬
‫>‪ <br‬בחר שעת הגעה‬
‫>‪ <br‬שעות הבוקר >"‪<input type="radio" name="reaching" value="morning‬‬
‫>‪ <br‬שעות הצהריים >"‪<input type="radio" name="reaching" value="noon‬‬
‫>‪ <br‬שעות הערב >"‪<input type="radio" name="reaching" value="evening‬‬
‫>")(‪" onclick="bdika‬בדיקה"=‪<input type="button" value‬‬
‫<‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫הסבר‪:‬‬
‫‪ .1‬איך ניתן לדעת כמה כפתורי רדיו יש?‬
‫לאוסף כפתורי הרדיו יש מאפיין שנקרא ‪) length‬אורך( המאפשר לדעת כמה כפתורים הוגדרו‪.‬‬
‫)‪ alert(document. hotel. reaching.length‬נקבל את המספר ‪ ,3‬יש ‪ 3‬אברים‪.‬‬
‫אם נרשום‬
‫מאפיין אורך‬
‫‪.2‬‬
‫‪.3‬‬
‫כיצד נדע מה הגולש בחר ?‬
‫לכל כפתור רדיו יש מאפיין שנקרא ‪ .checked‬ערכו של מאפיין ‪ checked‬הוא ‪ true‬אם הכפתור‬
‫נבחר וערכו ‪ false‬אם הכפתור לא נבחר‪ .‬כדי לדעת אם כפתור נבחר יש לעבור על כל הכפתורים‬
‫ולבדוק עבור כל כפתור את ערך המאפיין ‪ .checked‬הכפתור שעבורו המאפיין ‪ checked‬הוא‬
‫‪ true‬הוא הנבחר‪.‬‬
‫כיצד נגיע לערך של כל איבר?‬
‫מערך כפתורי הרדיו מכיל ‪ 3‬איברים‪ .‬האיברים ממוקמים מהמקום ה‪ 0 -‬עד מקום ‪.2‬‬
‫הערך‬
‫‪morning‬‬
‫‪noon‬‬
‫‪evening‬‬
‫מיקום‬
‫‪0‬‬
‫‪1‬‬
‫‪2‬‬
‫נוכל להגיע ולהציג את ערכו של כל איבר על‪-‬ידי ציון מיקומו ושימוש במאפיין ‪ .value‬למשל‪:‬‬
‫‪document.hotel.reaching[0].value‬‬
‫‪document.hotel.reaching[1].value‬‬
‫‪.4‬‬
‫לולאת ה‪ for -‬לסריקת כפתורי הרדיו ומציאת הערך שסומן ‪:‬‬
‫הלולאה צריכה להתבצע החל מ‪) 0 -‬מיקום האיבר הראשון( ועד למיקום האיבר האחרון‪.‬‬
‫במהלך הלולאה נבדק ערכו של המאפיין ‪ .checked‬אם ערכו ‪ true‬אז מצאנו את הכפתור‬
‫הנבחר ונציג את ערכו בחלון‪.‬‬
‫ניתן לסיים את הלולאה ולא להמשיך לבצעה כאשר מצאנו את הכפתור )הערך( באמצעות‬
‫הוראת ה‪ .break -‬הוראה זו אינה חובה אך מאפשרת לתכנית להיות יעילה יותר‪.‬‬
‫‪úììâð äîéùø äãù ú÷éãá‬‬
‫רשימה נגללת היא שדה המאפשר לגולש לבחור אחד או כמה מבין הפריטים הרשומים בה‪.‬‬
‫מבנה הפנייה לערך של שדה ברשימה נגללת בטופס‬
‫מיקום האיבר הנבחר מהרשימה‬
‫‪.selectedIndex‬שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫ערך האיבר הנבחר מהרשימה‬
‫‪].value‬מיקום [‪.options‬שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪131‬‬
‫‬
‫דוגמה‬
‫פתורה‬
‫‪form_c.html‬‬
‫‪úììâð äîéùø :3 äøåúô äîâåã‬‬
‫בנה טופס המכיל רשימה נגללת עם שלושה שמות‪ .‬לאחר אירוע של לחיצת כפתור יוצג בחלון השם‪.‬‬
‫בניית טופס המכיל רשימה נגללת וכפתור‬
‫התוצאה בדפדפן‬
‫>"‪<html dir="rtl‬‬
‫>‪<head‬‬
‫>"‪<script language="javascript‬‬
‫‪<!-‬‬‫)(‪function bdika‬‬
‫; ‪{ var mikum‬‬
‫; ‪mikum = document.tofes.MYlist.selectedIndex‬‬
‫מיקום=)אינדקס( הערך שנבחר מתיבת הבחירה ‪//‬‬
‫; )‪alert(document.tofes.MYlist.options[mikum].value‬‬
‫הטופס כפי שמוצג‬
‫לגולש‪:‬‬
‫הטופס לאחר פתיחת‬
‫הרשימה‪:‬‬
‫הערך= )תוכן( הנבחר בתיבת בחירה ‪//‬‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬
‫>‪</head‬‬
‫> ‪<body‬‬
‫>"‪<form name="tofes‬‬
‫> "‪<select name="MYlist‬‬
‫>‪ </option‬רון >"‪<option value="Ron‬‬
‫>‪ </option‬בן >"‪<option value="Ben‬‬
‫>‪ </option‬בר >"‪<option value="Bar‬‬
‫>‪</select‬‬
‫>")(‪" onclick="bdika‬בדיקה"=‪<input type="button" value‬‬
‫>‪</form‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫לאחר הלחיצה על‬
‫הכפתור "בדיקה"‪:‬‬
‫הסבר‪:‬‬
‫‪ .1‬כיצד נדע מיקום האיבר הנבחר מהרשימה?‬
‫לרשימה נגללת יש מאפיין שנקרא ‪ .selectedIndex‬המאפיין מכיל את מיקומו של הערך הנבחר‬
‫למשל‪ :‬אם נבחר האיבר הראשון ערכו של המאפיין יהיה ‪ .0‬נוכל להשים את הערך המתקבל‬
‫במשתנה‪ .‬למשל‪.mikum=document.tofes.MYlist.selectedIndex :‬‬
‫‪ .2‬כיצד נגיע לערך של כל איבר? בדוגמה יש ‪ 3‬איברים המסודרים כמערך‪ .‬האיברים ממוקמים‬
‫החל מהמקום ה‪ 0 -‬עד מקום ‪ .2‬נוכל להגיע למיקום הערך הנבחר ע"י ציון מקומו והמאפיין‪.‬‬
‫הערך‬
‫‪Ron‬‬
‫‪Ben‬‬
‫‪Bar‬‬
‫מיקום‬
‫‪0‬‬
‫‪1‬‬
‫‪2‬‬
‫ערך מוצג‬
‫רון‬
‫בן‬
‫בר‬
‫נוכל לקבל את ערכו של כל איבר על‪-‬ידי ציון מיקומו ושימוש במאפיין ‪ value‬באופן הבא‪:‬‬
‫מיקום במערך‬
‫שם השדה‬
‫שם הטופס‬
‫‪document.tofes.MYlist.options[mikum].value‬‬
‫נוכל להציג את הערך ולבצע עליו פעולות‪ ,‬למשל‪:‬‬
‫)‪alert(document.tofes.MYlist.options[mikum].value‬‬
‫‪132‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪úììâð äîéùø :4 äøåúô äîâåã‬‬
‫‪form_d.html‬‬
‫בנה טופס המכיל אפשרויות לבחור בין ‪ 3‬סוגי סרטים‪ .‬הבחירה הראשונה בטופס תציג‬
‫ערך "בחר סוג"‪ .‬לאחר בחירת הסרט‪ ,‬יוצג למשתמש שם הסרט שבחר‪ .‬אם לא נבחר‬
‫סרט תרשם הודעה "בחר סוג"‪.‬‬
‫‬
‫דוגמה‬
‫פתורה‬
‫דרך א‪ :‬בחירה באחת האפשרויות המוצגות ברשימה תזמן את פונקצית הבדיקה‬
‫>"‪<html dir="rtl‬‬
‫>‪<head‬‬
‫הטופס כפי שמוצג לגולש‪:‬‬
‫>"‪<script language="javascript‬‬
‫הטופס לאחר פתיחת‬
‫הרשימה‪:‬‬
‫לאחר הלחיצה על הכפתור‬
‫"בדיקה"‪:‬‬
‫‪<!-‬‬‫הפונקציה ‪ bdika‬בודקת את‬
‫מיקום הערך הנבחר‪ .‬אם מיקומו‬
‫)(‪function bdika‬‬
‫‪ 0‬אזי לא נבחר סוג‪ ,‬אחרת יוצג‬
‫{‬
‫סוג הסרט בחלון‪.‬‬
‫; ‪var mikum‬‬
‫; ‪mikum = document.tofes. movie.selectedIndex‬‬
‫מיקום=)אינדקס( הערך שנבחר מתיבת הבחירה ‪//‬‬
‫)‪if (mikum ==0‬‬
‫אם ערך הבחירה ‪ 0‬אז נבחרה האפשרות הראשונה שבה לא הצבנו ערך ‪//‬‬
‫)"בחר סוג סרט"( ‪alert‬‬
‫‪else‬‬
‫; )‪alert (document.tofes. movie.options[mikum].value‬‬
‫הערך= )תוכן( הנבחר בתיבת בחירה ‪//‬‬
‫}‬
‫>‪//--‬‬
‫>‪</script‬‬
‫>‪<title‬‬
‫>‪</title‬‬
‫>‪</head‬‬
‫לחיצה על אחת מאפשרויות הבחירה‬
‫>‪<body‬‬
‫הכפתור תזמן פונקציה )(‪bdika‬‬
‫>"‪<div align="rtl‬‬
‫נסה לשנות בחירתך‪ ,‬בחר סוג סרט‬
‫>"‪<form name="tofes‬‬
‫>")(‪<select name="movie" dir="rtl" onchange="bdika‬‬
‫>‪-- </option‬בחר סוג‪<option value="no_select" > --‬‬
‫>‪ </option‬קומדיה > "‪<option value="comedy‬‬
‫>‪ </option‬דרמה >"‪<option value="drama‬‬
‫>‪ </option‬דוקומנטרי >"‪<option value="documentary‬‬
‫>‪</select‬‬
‫>‪</form‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫דרך ב'‪ :‬יש להגדיר כפתור "בדיקה"‪ .‬לאחר הבחירה באחת האפשרויות המוצגות ברשימה יש ללחוץ על‬
‫הכפתור לזימון פונקצית הבדיקה‪.‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪133‬‬
‫‪checkbox - ïåîéñ úáéú äãù ú÷éãá‬‬
‫בתיבת סימון ניתן לסמן מספר ערכים‪ .‬לכל תיבה שם שונה וערך שונה‪.‬‬
‫לבדיקת הערכים שבחר המשתמש נבדוק אם השדה נבחר ורק אח"כ נציג את הערך‪.‬‬
‫בדיקה האם שדה מסוים נבחר‪ ,‬ערך המאפיין ‪ checked‬הוא ‪true‬‬
‫מבנה פנייה לערך בתיבת סימון ‪checkbox‬‬
‫ערך איבר כלשהו מהרשימה‬
‫‪.checked ==true‬שם השדה בטופס‪.‬שם הטופס‪document.‬‬
‫‪form_e.html‬‬
‫‪ïåîéñ úáéú :5 äøåúô äîâåã‬‬
‫בבית מלון צריך לקוח לסמן אילו ארוחות ברצונו לקבל‪.‬‬
‫נתון טופס המכיל ‪ 4‬תיבות סימון וכפתור‬
‫בניית טופס המכיל תיבת סימון וכפתור‬
‫התוצאה בדפדפן‬
‫>"‪<form name="hotel‬‬
‫>‪ <br‬ציין אילו ארוחות ברצונך לקבל‬
‫>‪ <br‬בוקר >"‪<input name="cbox1" type="checkbox" value="meal1‬‬
‫>‪ <br‬צהריים >"‪<input name="cbox2" type="checkbox" value="meal2‬‬
‫>‪ <br‬ערב >"‪<input name="cbox3" type="checkbox" value="meal3‬‬
‫>‪ <br‬לילה >"‪<input name="cbox4" type="checkbox" value="meal4‬‬
‫>")(‪" onclick="bdika‬בדיקה"= ‪<input type="button" value‬‬
‫>‪</form‬‬
‫כתוב פונקציה המציגה את הארוחות שסימן הלקוח )את הפונקציה זמן בלחיצת כפתור(‪.‬‬
‫פתרון א'‪:‬‬
‫לכל אחד מהכפתורים שם שונה‪ cbox1:‬מייצג ארוחת בוקר וערכו ‪ meal1‬וכו'‪..‬‬
‫אם נרצה להציג את כל הערכים שנבחרו‪ ,‬נבדוק עבור כל שדה האם הוא נבחר‪ ,‬אם כן נציג את ערכו‬
‫מבנה הבדיקה עבור כל שדה‪:‬‬
‫אם )הערך נבחר(‬
‫הצג את ערכו‬
‫) (‪function bdika‬‬
‫{‬
‫‪if (document.hotel.cbox1.checked)= =true‬‬
‫;)‪alert(document. hotel.cbox1.value‬‬
‫‪if (document.hotel.cbox2.checked)= =true‬‬
‫;)‪alert(document. hotel.cbox2.value‬‬
‫‪if (document.hotel.cbox3.checked)= =true‬‬
‫;)‪alert(document. hotel.cbox3.value‬‬
‫‪if (document.hotel.cbox4.checked)= =true‬‬
‫;)‪alert(document.hotel.cbox4.value‬‬
‫}‬
‫פתרון ב'‪ :‬ניתן בטופס לתת לכל האיברים של תיבות הסימון שם זהה ואז נוצר אוסף תיבות סימון‬
‫שפנייה אליהם כמו אל אברי מערך*‪ ,‬ואז הסריקה מתבצעת בלולאה כמו בכפתורי רדיו ע"י ציון‬
‫מיקומם!!‬
‫* מערך הוא אוסף ערכים מאותו טיפוס שהגישה אליהם ע"י ציון שם המערך ומיקום האיבר‬
‫מיקום‬
‫שם המערך‬
‫‪document.hotel.cbox[0].value‬‬
‫‪134‬‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪íéñôè :àùåðá íéìéâøú‬‬
‫את התרגילים הבאים שמור בתיקיה ‪ .js10_ form‬הוסף עבור כל תרגיל קישור מהדף הראשי ‪js‬‬
‫תרגיל ‪ :1‬שדה טקסט‬
‫‪form1a.html‬‬
‫א‪ .‬צור את הטופס הבא‬
‫ בדוק שהשם המוקלד הוא שמך‪.‬‬
‫ אם לא הצג בתיבת הטקסט הודעה " נסה שוב!"‪ .‬אם השם תקין רשום ברכה בחלון ‪.alert‬‬
‫‪form1b.html‬‬
‫ב‪ .‬צור טופס עם שני כפתורים ותיבת טקסט‪.‬‬
‫ רשום פונקציה )המופעלת בלחיצת כפתור( המקבלת תרגיל מתיבת הטקסט ומחזירה‬
‫את תוצאת התרגיל בתיבת הטקסט‪ .‬הנחייה‪ :‬השתמש בשיטה ) (‪, eval‬ראה עמוד ‪.90‬‬
‫ לחיצה על הכפתור השני תנקה את תיבת הטקסט‪.‬‬
‫תרגיל ‪ :2‬מקצועות בחירה‪ -‬רשימה נגללת‬
‫‪form2.html‬‬
‫תלמיד הנרשם לבית הספר "עתיד" צריך לבחור שני מקצועות בחירה‬
‫שונים‪.‬‬
‫צור טופס המכיל שתי רשימות מקצועות וכפתור בדיקה )ראה איור(‬
‫ בדוק האם נבחרו שני מקצועות שונים‪.‬‬
‫ הצג את המקצועות שנבחרו‪.‬‬
‫‪form3.html‬‬
‫תרגיל ‪ :3‬זכר או נקבה ‪ -‬כפתורי רדיו‬
‫צור טופס המכיל שני כפתורי רדיו לסימון מגדר )זכר או נקבה(‪ .‬בדוק שאחד הכפתורים סומן‪ .‬אם‬
‫לא הצג הודעה‪.‬‬
‫תרגיל ‪ :4‬תרגילי חשבון ‪ -‬כפתורי רדיו‬
‫‪form4.html‬‬
‫בנה טופס המציג ‪ 4‬תרגילי חשבון‪ .‬לכל תרגיל ‪ 3‬תשובות אפשריות‪ .‬בחירת התשובה נכונה תתבצע‬
‫בעזרת כפתורי רדיו‪.‬‬
‫הטופס מכיל בנוסף כפתור "בדיקה"‪ .‬לאחר מילוי השאלות לחיצה על כפתור הבדיקה תציג את‬
‫התשובות הנכונות והציון‪.‬‬
‫‪form5.html‬‬
‫תרגיל ‪ :5‬תיבת סימון‬
‫בנה את הטופס הבא ובדוק את העלות הכוללת של הארוחות שנבחרו‪ ,‬ראה מחירון בטבלה‪.‬‬
‫מחירון‬
‫מחיר‬
‫ארוחה‬
‫‪40‬‬
‫בוקר‬
‫צהריים ‪100‬‬
‫‪80‬‬
‫ערב‬
‫‪40‬‬
‫לילה‬
‫‪JavaScript – èðøèðéà úáéáñá úåðëúì àåáî‬‬
‫©‬
‫‪'úåðåìçì èáî'ì úåøåîù úåéåëæä ìë‬‬
‫‪135‬‬