שימוש ב- JavaScript ובטפסים

Javascript חובש כובעים רבים. אתה יכול להשתמש ב- JavaScript כדי ליצור אפקטים מיוחדים. אתה יכול להשתמש ב- JavaScript כדי להפוך את דפי ה- HTML שלך ל"חכמים יותר "על ידי ניצול יכולות קבלת ההחלטות שלו. ותוכלו להשתמש ב- JavaScript כדי לשפר טפסי HTML. יש חשיבות מיוחדת ליישום אחרון זה. מבין כל הכובעים ש- JavaScript יכול לחבוש, תכונות עיבוד הטפסים שלה הן בין המבוקשות והמשומשות ביותר.

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

עם JavaScript לצדך, אתה יכול לעבד טפסים פשוטים מבלי להזמין את השרת. וכאשר יש צורך בהגשת הטופס לתוכנית CGI, תוכל לקבל JavaScript לדאוג לכל הדרישות המקדימות, כגון אימות קלט על מנת להבטיח שהמשתמש מנוקד כל i. בעמודה זו נבחן מקרוב את חיבור הטופס של JavaScript, כולל כיצד להשתמש באובייקט הטופס של JavaScript, כיצד לקרוא ולהגדיר תוכן טופס וכיצד להפעיל אירועי JavaScript על ידי מניפולציה על פקדי הטופס. אנו נסקור גם כיצד להשתמש ב- JavaScript כדי לאמת קלט טופס ולרכז את הטופס לתוכנית CGI.

לימוד JavaScript

מאמר זה הוא חלק מארכיון התוכן הטכני של JavaWorld. תוכלו ללמוד הרבה על תכנות JavaScript על ידי קריאת מאמרים בסדרת JavaScript , רק קחו בחשבון שחלק מהמידע עשוי להיות מיושן. ראה "שימוש באובייקטים המובנים ב- JavaScript" וב"תיקון ניפוי באגים ב- JavaScript "לקבלת מידע נוסף על תכנות באמצעות JavaScript.

יצירת הטופס

ישנם מעט הבדלים בין טופס HTML ישר לטופס משופר ב- JavaScript. העיקרי הוא שטופס JavaScript מסתמך על מטפל אירועים אחד או יותר, כגון onClick או onSubmit. אלה קוראים לפעולה של JavaScript כאשר המשתמש עושה משהו בצורה, כמו לחיצה על כפתור. מטפלי האירועים, שממוקמים עם שאר התכונות בתגי הטופס HTML, אינם נראים לדפדפן שאינו תומך ב- JavaScript. בגלל תכונה זו, לעתים קרובות אתה יכול להשתמש בטופס אחד הן עבור דפדפני JavaScript והן עבור דפדפנים שאינם JavaScript.

אובייקטים אופייניים לבקרת טופס - המכונים גם "ווידג'טים" - כוללים את הדברים הבאים:

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

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

הצורה האופיינית נראית כך. שים לב שסיפקתי תכונות NAME = לכל פקדי הטופס, כולל הטופס עצמו:

 Enter something in the box:

  • FORM NAME = "myform" מגדיר את הטופס ושמו . במקום אחר ב- JavaScript ניתן להתייחס לטופס זה בשם myform . השם שאתה נותן את הטופס תלוי בך, אך הוא צריך לעמוד בכללי שמות המשתנה / פונקציה הסטנדרטיים של JavaScript (ללא רווחים, ללא תווים מוזרים למעט קו תחתון וכו ').
  • ACTION = "" מגדיר כיצד ברצונך שהדפדפן יטפל בטופס כאשר הוא מוגש לתוכנית CGI הפועלת בשרת. מכיוון שהדוגמה הזו לא נועדה להגיש שום דבר, כתובת ה- URL של תוכנית CGI מושמעת.
  • METHOD = "GET" מגדיר את נתוני השיטה המועברים לשרת בעת הגשת הטופס. במקרה זה atttibute הוא נפוח יותר כיוון שטופס הדוגמה אינו מגיש דבר.
  • INPUT TYPE = "טקסט" מגדיר את אובייקט תיבת הטקסט. זהו סימון HTML סטנדרטי.
  • INPUT TYPE = "כפתור" מגדיר את אובייקט הכפתור. זהו סימון HTML רגיל למעט המטפל ב- onClick.
  • onClick = "testResults (this.form)" הוא מטפל באירועים - הוא מטפל באירוע, במקרה זה לחיצה על הכפתור. כאשר לוחצים על הכפתור, JavaScript מבצע את הביטוי בתוך המרכאות. הביטוי אומר לקרוא לפונקציית testResults במקום אחר בדף ולהעביר אליו את אובייקט הטופס הנוכחי.

קבלת ערך מאובייקט טופס

בואו נתנסה בקבלת ערכים מאובייקטים טופסיים. טען את הדף ואז הקלד משהו בתיבת הטקסט. לחץ על הלחצן, ומה שהקלדת מוצג בתיבת ההתראה.

רישום 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

כך עובד התסריט. JavaScript קורא לפונקציה testResults כאשר אתה לוחץ על הכפתור בטופס. הפונקציה testResults מועברת לאובייקט הטופס באמצעות התחביר this.form (מילת המפתח הזו מתייחסת לפקד הכפתור; הטופס הוא מאפיין של פקד הכפתור ומייצג את אובייקט הטופס). נתתי את האובייקט בצורת שם הטופס בתוך פונקצית testResult, אבל אתה כל יכול לתת לך שמות כמו.

הפונקציה testResults פשוטה - היא רק מעתיקה את תוכן תיבת הטקסט למשתנה בשם TestVar. שימו לב כיצד הוזכרה תוכן תיבת הטקסט. הגדרתי את אובייקט הטופס שרציתי להשתמש בו (נקרא טופס ), את האובייקט בתוך הטופס שרציתי (נקרא תיבת קלט ) ואת המאפיין של אותו אובייקט שרציתי ( מאפיין הערך ).

עוד מ- JavaWorld

רוצה עוד מדריכי תכנות וחדשות? קבל את עלון JavaWorld Enterprise Java שנשלח לתיבת הדואר הנכנס שלך.

הגדרת ערך באובייקט טופס

מאפיין הערך של תיבת הקלט, המוצג בדוגמה לעיל, הוא קריא וניתן לכתב. כלומר, אתה יכול לקרוא את כל מה שמקלידים בתיבה, ואתה יכול לכתוב נתונים חזרה לתוכו. תהליך קביעת הערך באובייקט טופס הוא בדיוק ההפך מקריאתו. הנה דוגמה קצרה להדגמת הגדרת ערך בתיבת טקסט טופס. התהליך דומה לדוגמא הקודמת, אלא שהפעם ישנם שני כפתורים. לחץ על כפתור "קרא" והתסריט קורא בתיבת הטקסט את מה שהקלדת. לחץ על כפתור "כתוב" והתסריט כותב ביטוי מגושם במיוחד לתיבת הטקסט.

רישום 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • כאשר תלחץ על כפתור "קרא", JavaScript קורא לפונקציה readText, הקוראת ומציגה את הערך שהזנת בתיבת הטקסט.
  • כשלוחצים על כפתור "כתוב", JavaScript קורא לפונקציית writeText, שכותבת "שיהיה לך יום נעים!" בתיבת הטקסט.

קריאת ערכי אובייקט צורה אחרים

תיבת הטקסט היא אולי אובייקט הטופס הנפוץ ביותר שתקרא (או תכתוב) באמצעות JavaScript. עם זאת, אתה יכול להשתמש ב- JavaScript כדי לקרוא ולכתוב ערכים ממרבית האובייקטים האחרים (שים לב שכרגע לא ניתן להשתמש ב- JavaScript לקריאה או כתיבה של נתונים באמצעות תיבת הטקסט של הסיסמה). בנוסף לתיבות טקסט, ניתן להשתמש ב- JavaScript עם:

  • תיבת טקסט מוסתרת (TYPE = "מוסתר").
  • לחצן בחירה (TYPE = "רדיו")
  • תיבת סימון (TYPE = "תיבת סימון")
  • אזור טקסט ()
  • רשימות ()

שימוש בתיבות טקסט נסתרות

מנקודת מבט של JavaScript, תיבות טקסט נסתרות מתנהגות בדיוק כמו תיבות טקסט רגילות, ומשתפות באותן מאפיינים ושיטות. מנקודת מבט של משתמש, תיבות טקסט מוסתרות "אינן קיימות" מכיוון שהן אינן מופיעות בצורה. במקום זאת, תיבות טקסט נסתרות הן האמצעי באמצעותו ניתן להעביר מידע מיוחד בין השרת ללקוח. הם יכולים לשמש גם לאחסון נתונים זמניים שאולי תרצה להשתמש בהם מאוחר יותר. מכיוון שתיבות טקסט נסתרות משמשות כמו תיבות טקסט רגילות, דוגמה נפרדת לא תובא כאן.

שימוש בכפתורי רדיו

כפתורי רדיו משמשים כדי לאפשר למשתמש לבחור פריט אחד, ורק אחד, מתוך קבוצת אפשרויות. כפתורי רדיו משמשים תמיד בכפולות; אין טעם הגיוני שיש רק כפתור בחירה אחד בטופס, מכיוון שברגע שאתה לוחץ עליו, אינך יכול לסלק אותו. אם ברצונך לבחור קליק / לחיצה פשוטה השתמש בתיבת סימון במקום זאת (ראה להלן).

כדי להגדיר כפתורי רדיו עבור JavaScript, ספק לכל אובייקט את אותו השם. JavaScript ייצור מערך באמצעות השם שסיפקת; לאחר מכן אתה מפנה לכפתורים באמצעות אינדקסי המערך. הכפתור הראשון בסדרה ממוספר 0, השני ממוספר 1, וכן הלאה. שים לב שהמאפיין VALUE הוא אופציונלי עבור טפסים בלבד של JavaScript. עם זאת, תרצה לספק ערך אם תגיש את הטופס לתוכנית CGI הפועלת בשרת.

להלן דוגמה לבדיקת איזה כפתור נבחר. לולאת ה- for בפונקציית testButton עוברת בין כל הלחצנים בקבוצת "rad". כאשר הוא מוצא את הכפתור שנבחר, הוא פורץ מהלולאה ומציג את מספר הכפתור (זכרו: החל מ- 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

הגדרת בחירת לחצני בחירה בשוק ה- HTML היא פשוטה. אם ברצונך שהטופס יופיע בתחילה עם לחצן בחירה נתון שנבחר, הוסף את התכונה CHECKED לסימון ה- HTML עבור אותו כפתור:

ניתן גם להגדיר את בחירת הלחצנים באופן תכנותי עם JavaScript, באמצעות המאפיין המסומן. ציין את האינדקס של מערך כפתורי הבחירה שברצונך לבדוק.

form.rad[0].checked = true; // sets to first button in the rad group

שימוש בתיבות סימון

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

אזורי טקסט משמשים להזנת טקסט מרובה שורות. גודל ברירת המחדל של תיבת הטקסט הוא שורה אחת על 20 תווים. ניתן לשנות את הגודל באמצעות התכונות COLS ו- ROWS. הנה דוגמה טיפוסית לאזור טקסט עם תיבת טקסט ברוחב 40 תווים בשבע שורות:

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