JavaScript/טפסים

JavaScript

התחלת העבודה מושגי יסוד שילוב במסמך HTML שורות קוד ראשונות הערות משתנים מחרוזת טקסט מספר הוראת תנאי התנאי if תנאי מורכב if-else הוראת switch אופרטורים תרגילים לחזרה אובייקטים אובייקט פונקציה בנאית וקלאסים מערכים מערך חד מימדי חיפוש ומיונים לולאות לולאת for לולאת while לולאת do-while לולאות מקוננות שימוש בפקודות break ו-continue זהירות מלולאה אין סופית פונקציות פונקציה שאינה מחזירה ערך פונקציה שמחזירה ערך פונקציה אנונימית וחץ אירועים אובייקט המסמך מבוא אובייקט המסמך אובייקט החלון אובייקט הכתובת אוביקטים נוספים אובייקט תאריך אובייקט Math JavaScript למתקדמים אסינכרוני - קולבק ופרומיס עבודה עם טפסים תסריטים עוגיות מערכים אסוציאטיבים ספריות מבוא לספריות מבוא לספריית Ext JS בינה מלאכותית TensorFlow.js גרסה להדפסה

רצוי לחזור תחילה על HTML/טפסים.

בדיקת טופס

סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from). הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript). אין מנוס מעבודה בצד-שרת, ולכן דרושות גם שפות לצד זה (PHP, ASP, וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. יתרה מכך, מדובר לא רק על נכונות הנתונים, אלא גם על בטיחות השרת. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.

נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:

• שלב א' - תחילה יש לבנות טופס, HTML/טפסים.

נפתח דף חדש, נקרא לו index.html ובתוכו -

<form method="post" action="" onsubmit="return validate( this )">
	<!-- Username input -->
    Username: <input type="text" name="username" id="username" maxlength="24" />
	<!-- Submit button -->
    <input type="submit" value="Submit" />
</form>

שימו לב לתכונת האירוע - התכונה onSubmit שעושה בדיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא מחזירה בעזרת מילת המפתח return את הנתונים לפונקציה שנקראת validate ( ) בעזרת מילת המפתח this (לא חובה). אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס. למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית.

לסיכום שלב א' - בניית טופס ב-HTML ובתוכו לקרוא לפונקציה בעזרת onSubmit.

• שלב ב' - כעת יש לתכנן את הפונקציה validate ( ) ובתוכה בדיקת הטופס.

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

בקטע הקוד הבא, פונקציה בשם validate מקבלת ארגומנט (ערך) מהטופס שבנינו בשלב קודם. על ידי המילה this אנו שולחים את כל האלמנטים בטופס (שדות, כפתורי בחירה ורדיו, ועוד'):

<script type="text/javascript">
  function validate( element ) {
  // ... Statements ...
  }
</script>

כעת נוכל לפנות לכל אלמנט בטופס בעזרת הארגומנט element, שמקבל את הערכים ששלחנו בעזרת מילת המפתח this. מכאן - הכל תלוי בכם. ניתן לערוך, לחתוך ולבדוק כל מחרוזת שמתקבלת דרך הטופס, לדוגמה:

<script type="text/javascript">
  function validate( element ) {
    // Get element value ...
    var un = element.username.value;
    // Validate element's value ...
    if ( un == null || un == "" ) {
    alert("אנא הכנס ערך בשדה שם משתמש.");
    submit.username.focus(); 
    return false;
    }
    // Validate restricted characters ...
    if (un.indexOf("%")>-1 || un.indexOf("<")>-1 || un.indexOf(">")>-1 || un.indexOf("\\")>-1 || un.indexOf("/")>-1) {
    alert("שם המשתמש לא תקין.");
    submit.username.focus();
    return false;
    } 
  }
</script>

הפונקציה בודקת האם שם המשתמש (Username) מכיל תווים והאם יש תויים לא חוקיים כמו <, >, ', \, /, %. בעזרת הפונקציה indexOf ( ) אנו בודקים אם קיים תו מסוים כלומר אם האינדקס שלו גדול מ- $1-$ אז הוא קיים. שימו לב לצורה שבא פונים לאלמנט (שדה טקסט במקרה הזה) var un = element.username.value;.