מדריך DHTML

  • מדריך DHTML – הקדמה
  • מדריך DHTML – שינוי עיצוב ו-CSS
  • מדריך DHTML – עבודה מול ה-DOM
  • מדריך DHTML – מטפלי ארועים
  • מדריך DHTML – אובייקט Window
  • מדריך DHTML – אובייקט Navigator
  • מדריך DHTML – אובייקט Event
  • מדריך DHTML – אוספים (Collections)
  • מדריך DHTML – אובייקט Document
  • מדריך DHTML – טפסים (Forms)
  • מדריך DHTML – אובייקט Input
  • מדריך DHTML – אובייקט Select
  • מדריך DHTML – אובייקט Textarea
  • מדריך DHTML – אובייקט Table
  • מדריך DHTML – אובייקט Frameset
  • מדריך DHTML – דברי סיכום

    • מדריך DHTML – עבודה מול ה-DOM

    הערה:
    גם שינוי ה-CSS זה חלק מ-DHTML DOM אבל חשבתי שדרך יותר טובה להתחיל את המדריך הזה זה בצורה פשוטה ומוכרת (אני עדיין חושב ככה).

    SRC

    באותה צורה ששינינו את הסגנון נוכל לשנות למשל מקור של התמונה (SRC) בצורה הבאה:

    <img id="theImage" src="image1.jpg" alt="">
<script type="text/javascript">
    theImage.src="image2.jpg"
</script>

    innerHTML/innerTEXT

    השימוש נעשה בצורה הבאה: "idName.innerHTML="value

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

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

    function loading()
{
    myDiv.innerHTML="Loading, Hold on!"
}

    ניצור עוד פונקציה שמשנה את הטקסט כאשר ההורדה של המסמך הסתיימה:

    function finished()
{
    myDiv.innerHTML="All done!"
}

    עכשיו בעזרת DHTML נקרא בתגית ה-BODY לפונקציה הראשונה כשהמסמך עוד לא עלה, ולשניה כאשר המסמך כולו עלה:
    אגב, אנחנו גולשים לנושא הבא שלנו (Event Handlers) אבל זה חשוב בשביל להמחיש את ה-innerHTML אז אני מקווה שתסלחו לי.

    <body onBeforeLoad="javascript:loading()" onLoad="javascript:finished()">

    פה נוסיף את ה- DIV שאותו אנחנו רוצים לשנות:

    <div id="myDiv"></div>

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

    בחלק הבא אני אשתדל לכתוב כמה שפחות כדי לא להרדים את הקוראים… מפה והלאה זה עניין של זכרון של אובייקטים מאפיינים ושיטות של DHTML לכן דיי חסר טעם להרחיב
    בנושא, בנושאים שיראו לי קצת מסובכים אני ארחיב ואתן דוגמאות קצרות אבל את רוב המידע שתקבלו, תקבלו בטבלאות עם הסבר קצרצר על איך להשתמש באובייקט (בדרך
    כלל זה רק object.property) וישר פירוט של כל המאפיינים שלו(או שיטות). כל החומר המובא מפה והלאה חסר טעם לשימוש באתר כמות שהוא, בשביל באמת סקריפטים שיעיפו
    את המשתמש מהנעליים שלו צריך להשתמש בכ-ל מה שיש בג'אווה סקריפטת CSS ו HTML ידע, את ה-DHTML יש רק ליישם כמו שצריך בכל אלה. כמו שאמרתי זה רק נושא של
    זכרון מפה והלאה ולכן אני יכול לשער שמידי פעם תחזרו לפה לרענן את הזכרון לגבי אובייקט מסויים ולכן השתדלתי לתרגם כמה שיותר מאפיינים ושיטות לכל אובייקט בצורה
    הפשוטה והכי מובנת שאפשר.

    תגיות: , , , , ,

    RiU

    מאמרים נוספים של RiU

    עוד בנושא זה

      תגובות בפייסבוק

      תגיות

      .net ASP ASP.Net ASP.NET MVC C# CMS CSHTML CSS Database DB DHTML DOM Dynamic HTML HTML5 JavaScript JS PHP Reference SEO SilverLight SQL VBS Visual Studio W3C WAP WebMatrix Windows Phone wml WPF בניית אתרים בסיס נתונים דינמי דרופל הרצאות בוידאו וורדפרס מדריך סלולארי פורום צד לקוח פורום צד שרת פיתוח צד לקוח צד שרת קידום קידום אתרים