פורום אטרף - [שיעור מס' 17] JavaScript

הקדמה

בשיעור הקודם למדנו מספר דברים:

האובייקט navigator.
האובייקט location.

מתחילים

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

יש אפשרות טובה מאוד, לרוב משמשים בה בפונקציות או בשליחת טפסים.
האפשרות הזאת היא אפשרות של ידיעת דברים על כל אובייקט בנפרד (ערך, שם וכ'ו) בעזרת מודל ה-DOM.
DOM - Document Object Model.

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

נשמע מוכר לא?
מכיוון שאנו משתמשים בזה בכל דבר, למשל בשביל לעשות הודעה קופצת אנו רושמים:

קוד PHP:


window.alert();

ש-alert, היא שיטה בתוך האובייקט window.

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

קוד 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)

(נוסיף את זה בנוסף לשורת קוד של פתיחת תג הטופס form, אמור לצאת משהו כזה:

קוד HTML:

<form name="Test" method="post" onsubmit="window.alert(window.document.Test.FName)">

כך אמור להיות לכם, אם אין אז תוסיפו.)

נלחץ על הכפתור ויש לנו הודעה קופצת. אבל די מוזרה:

ההודעה אומרת שזהו אובייקט מסוג Input, כפתור טקסט.

עכשיו, לאחר שיש לנו את האובייקט. אפשר להתחיל לדעת עליו דברים.
לדוגמה, בואו נבדוק מה המשתמש רשם בתיבת טקסט.
בשביל זה, נוסיף לאחר האובייקט את האפשרות "value"(נקודה לאחר שם האובייקט.
למשל באירוע השליחה של הטופס, נרשום כך:

קוד PHP:


window.alert(window.document.Test.FName.value)

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

יש עוד כמה אפשרויות שאפשר לרשום במקום 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";

שבמקום "NewLocation" נרשום את המיקום החדש של התמונה.

כנ"ל לצבעים או כל מאפיין אחר של CSS:

קוד PHP:


window.document.Image.style.width = 100px;

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

[שיעור מס\' 17] JavaScript

הודעת מערכת

עוד באטרף