וובמאסטר - תיכנות ובניית אתרים

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

RiU/‏ 15 ינואר, 2003
F+
F-
הערה: גם שינוי ה-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 יש רק ליישם כמו שצריך בכל אלה. כמו שאמרתי זה רק נושא של זכרון מפה והלאה ולכן אני יכול לשער שמידי פעם תחזרו לפה לרענן את הזכרון לגבי אובייקט מסויים ולכן השתדלתי לתרגם כמה שיותר מאפיינים ושיטות לכל אובייקט בצורה הפשוטה והכי מובנת שאפשר.
תגיות: JS‏  /  Javascript‏  /  DHTML‏  /  DOM‏  /  Dynamic‏  /  דינמי‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות