קוד HTML:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> <title>Form</title> <script language="JavaScript" type="text/javascript"> function write() { var Fname = window.document.MyForm.fname.value; var Lname = window.document.MyForm.lname.value; if ((Fname.length >= 2) && (Lname.length >= 1)) { window.document.getElementById("divn").innerHTML = "Hello, <b>" + Fname + " " + Lname + "</b> welcome to my web site!"; } else { window.alert("Please enter a name!"); } } </script> <noscript>Your browser does not support JavaScript!</noscript> </head> <body> <div id="divn"> <form name="MyForm" method="get" action="javascript:write()"> <b>First name: </b><input type="text" id="fname" /> <br /> <b>Last name: </b><input type="text" id="lname" /> <br /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </form> </div> </body></html>
ש. מה רשמנו פה?
ת.קודם כל הכנו פונקציה בשם
write() אח"כ הכנסנו לתוכה שני משתנים.
המשתנה Fname הוא המשתנה של השם הפרטי והמשתנה Lname הוא המשתנה של השם הסופי.
ש. אבל איך הם יודעים את הערכים?
ת. הם יודעים בגלל שהגדרנו להם להיכנס לטופס אח"כ לתיבת טקסט ואז לערך שרשמו.
אז בואו נעשה סדר, אנחנו אמרנו להיכנס למשתנה החלון (window) אז למשתנה המסמך (document) אז למשתנה הטופס (MyForm) אז למשתנה של השם הפרטי (fname) ואז לערך (value)
כך עשינו גם בשם משפחה שבמקום לרשום fname רשמנו lname.
ש.לא רשמתי כלום וזה עושה לי הודעה, למה?
ת. זה עושה זאת מכיוון שהגדרנו שאם עורך המחרוזת בשם פרטי קטן משתי אותיות
ושם משפחה קטן מאות אחת, אז זה ירשום הודעה:
ש. מה זה innerHTML ו-getElementById("divn")?
ת. שרשמנו getElementById("divn") בתרגום חופשי זה אומר "למצוא אלמנט באמצעות כתובת" כלומר במקום לרשום את כל הדרך הארוכה כמו שהגדרנו במשתנה Fname ו-Lname אפשר לקצר את זה, יכולנו לכתוב במקום:
window.document.getElementById("fname").value
וזה יעשה אותו דבר.
וכשרשמנו innerHTML אמרנו להיכנס לתוך ערך ה-HTML, ואז רשמנו מה לכתוב במקום אם כל הפעולות יצליחו.