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


  • [שיעור מס\' 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), אז לאובייקט הטופס (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 ופורסם ע"י -Smoxer- צפה בהודעה המקורית
    תגובות 1 תגובה אחת
    1. האוואטר של ido8780
      ido8780 -
      תודה
  • עוד באטרף



כל הזמנים הם לפי GMT +3. השעה כרגע היא 18:55.
מופעל על ידי vBulletin™ © גרסה 4.1, 2011 vBulletin Solutions, Inc. כל הזכויות שמורות.
פעילות הגולשים
אומנות וגרפיקה
מוזיקה
ספורט
סדרות טלוויזיה
סרטים וקולנוע
קנייה ומכירה
רשתות חברתיות
הבורר 3
פורומי פנאי ובידור
סרטים
סדרות
משחקים
דיבורים
אקטואליה
בעלי חיים
בדיחות והומור
משחקי ספורט
הבורר
מחשבים וטכנולוגיה
תמיכה טכנית
חומרה ומודינג
תוכנות להורדה
סלולארי וגאדג'טים
רקעים למחשב
ציוד הקפי למחשב
אבטחת מידע
תכנות ובניית אתרים
כסף ברשת
אייפון
בריאות ואורח חיים
כושר ופיתוח גוף
דיאטה
צבא וגיוס
יעוץ מיני
מה שבלב
אומנות הפיתוי
יהדות
מיסטיקה ורוחניות
אתאיזם ודתות

נושאים: 1,311,934 | הודעות: 6,996,762 | משתמשים: 305,891 | המשתמש החדש ביותר: LouisTig | עיצוב גרפי: סטודיו עודד בביוף | קידוד: rellect