הקדמה
- האובייקט navigator.
- האובייקט location.
מתחילים
גישות לאובייקטיםעד כה, עשינו דברים סטטיים:
הודעות קופצות, מערכים וכ'ו.
יש אפשרות טובה מאוד, לרוב משמשים בה בפונקציות או בשליחת טפסים.
האפשרות הזאת היא אפשרות של ידיעת דברים על כל אובייקט בנפרד (ערך, שם וכ'ו) בעזרת מודל ה-DOM.
DOM - Document Object Model.
שאלה: אז איך הולך ה-DOM הזה?
תשובה: האמת שזה די פשוט. הולכים לאובייקט החלון, אחריו לאובייקט המסמך.. וכן הלאה בהיררכיה זו. בין כל אובייקט יש להפריד בנקודה.
נשמע מוכר לא?
מכיוון שאנו משתמשים בזה בכל דבר, למשל בשביל לעשות הודעה קופצת אנו רושמים:
קוד PHP:
window.alert();
אז בוא נעשה תרגיל קטן.
לאן יתאים התיבת טקסט הזאת. כלומר מה היררכיה
שאנו צריכים לרשום בכדי להגיע לזה.
הקוד:
קוד HTML:
<!DOCOTYPE html> <html> <head> <title>JavaScript - DOM example</title> </head> <body> <form name="Test" method="post"> First Name: <input type="text" name="FName" /> <input type="submit" value="Send!" /> </form> </body> </html>

כלומר, אנו גשים לאובייקט הראשי, ואז לאובייקט שמתחתיו עד שנגיע לאובייקט שנרצה.
התחלנו מאובייקט החלון (window), אח"כ לאובייקט המסמך (document), אז לאובייקט הטופס (Test - לפי השם שאנו קובעים!)
ולבסוף לאובייקט התיבת טקסט המבוקש (FName - לפי השם שאנו קובעים!).
כלומר, צריך לגשת לאובייקט החלון (window) והמסמך (document), ומשם להמשיך לפי התגים שאנו מציינים בשם (name) או ב-ID.
לדוגמה, אם רשמתי שהשם (name) של הטופס הוא "Test", אז ניגש אליו כ-Test.
בואו נבחן זאת.
נוסיף לטופס אירוע שליחה (onsubmit).
ונרשום את הקוד הבא בתוך האירוע:
קוד PHP:
window.alert(window.document.Test.FName)
קוד HTML:
<form name="Test" method="post" onsubmit="window.alert(window.document.Test.FName)">
נלחץ על הכפתור ויש לנו הודעה קופצת. אבל די מוזרה:
ההודעה אומרת שזהו אובייקט מסוג Input, כפתור טקסט.
עכשיו, לאחר שיש לנו את האובייקט. אפשר להתחיל לדעת עליו דברים.
לדוגמה, בואו נבדוק מה המשתמש רשם בתיבת טקסט.
בשביל זה, נוסיף לאחר האובייקט את האפשרות "value"(נקודה לאחר שם האובייקט.
למשל באירוע השליחה של הטופס, נרשום כך:
קוד PHP:
window.alert(window.document.Test.FName.value)
יש עוד כמה אפשרויות שאפשר לרשום במקום value:
id - זה יראה את ה-id של האובייקט.
name יראה את שם האובייקט.
type - יראה את סוג האובייקט (רק בכפתורים).
אני מבין שזה די ברור, כל מאפיין שיש אפשר לראות דרך השיטה הזאת.
אם שמתם לב (או שלא), אם אנחנו רוצים לדעת מאפיין שעשינו ב-CSS, אי אפשר לרשום את המאפיין CSS.
בשביל זה, צריך להגדיר קודם את אובייקט style, ולאח"כ את שם המאפיין.
לדוגמה, אם יש לנו כפתור בצבע כחול.
אני לא ארשום כך:
קוד PHP:
window.document.Test.FName.color
קוד PHP:
window.document.Test.FName.style.color
בנוסף, אי אפשר רק לדעת פרטים על אובייקטים. אפשר גם לשנותם.
לדוגמה, יש לי תמונה בשם "Image". אני רוצה שברגע שילחצו עליה זה ישנה קישור לתמונה אחרת.
נעשה את זה באפשרות המאפיין src:
קוד PHP:
window.document.Image.src = "NewLocation";
כנ"ל לצבעים או כל מאפיין אחר של CSS:
קוד PHP:
window.document.Image.style.width = 100px;
הודעת מערכת