ראשי > מבוא > הכנסת דינמיות ל-dhtml

הכנסת דינמיות ל-DHTML

לאחר שמיקמת  בלוק תוכן בעמוד בעזרת שימוש בתג <div> ב-HTML, תוכל להשתמש ב-JavaScript כדי לשנות את תכונות הבלוק. תוכל להזיז את הבלוק כולו למעלה, למטה, לימין או לשמאל. תוכל לשנות את צבע הרקע שלו, או לגרום לחלק אחד או יותר מהבלוק להיות בלתי נראה. אם דיברנו על מראה, תוכל אפילו להחביא או להציג את הבלוק כולו כהרף עין, דרך תכונות הראות שלו.

כיצד, אם כן, יש ל-JavaScript גישה לתכונות העיצוב של בלוק התוכן? התשובה מורכבת מ-2 חלקים:

1. נניח שאתה בקיא ב-JavaScript, אתה יודע שמבני נתונים מיוצגים כעצמים, ולכל עצם יש סט של תכונות. משפטי JavaScript יכולים לקרוא או לכתוב לתכונות העצם.

2. בלוקים של תוכן שנכללים בין תגי <div> נחשפים ל-JavaScript כעצמים, ע"י מודל העצמים (ה-DOM). כלומר, ע"י מעקב אחר העצם ופירוט תכונותיו, כפי שמוגדרים ע"י ה-DOM, JavaScript יכולה לגשת לתכונות העיצוב של בלוק התוכן.

הבה ונחזור לדוגמה של בלוק התוכן, mailblock, בצורתו הפשוטה:

<DIV ID="mailblock"
STYLE="position:absolute;
width:auto;
height:auto;
left:400px; top:50px;
background-color:white">
<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>
<IMG SRC = "mailbox.gif"
width = 30
height = 15
alt = "Mailbox"
>
</DIV>

...ניתן ללחוץ כאן כדי לראות את הקוד בפעולה

מכיוון שנטסקייפ ומיקרוסופט לא חולקות ביניהן DOM-ים תואמים, הבלוק בדוגמה נחשף לעצמים שונים בכל דפדפן. לעת עתה, נתייחס לכל דפדפן בנפרד—מאמר עתידי יסתכל על הבעיה מנקודת מבט של DHTML משותפת לשני הדפדפנים.

ב-DOM של נטסקייפ, כל תג <div> תופס את הצורה של עצם מסוג רובד (layer). כל בלוק נחשף כעצם div, שמחזיק בעצם עיצוב (style), שתכונותיו משקפות תכונות עיצוב מוכרות. זה אולי נשמע מבלבל, אך הכל עניין של תחביר. בוא ונשקול כיצד תבנה התייחסות של JavaScript ל-mailblock. תשתמש במזהה שהוגדר בתכונה ID:

מיקרוסופט:  

Document.all.mailblock  

נטסקייפ:  

Document.layers["mailblock"]  

כעת, בוא ונחשוב על תכונת צבע רקע עבור mailblock. תכונת גיליון הסגנון עבור צבע הרקע היא “background color”, כמו שצוין בתג <div>. לפי מה שמשתקף מה-DOM, תכונה זו מקבלת שם שונה בכל דפדפן:  

מיקרוסופט:

Document.all.mailblock.style.backgroundColor

נטסקייפ:  

Document.layers["mailblock"].bgColor

עם ידיעה זו, נוכל ליצור בקלות הצהרת JavaScript שתשנה את צבע הרקע של mailblock לירוק.

מיקרוסופט:  

Document.all.mailblock.style.backgroundColor="green";

נטסקייפ:

Document.layers["mailblock"].bgcolor="green";  

בצורה דומה, נוכל לשנות את התכונות top ו-left, שתגרומנה לתזוזת הבלוק על המסך. כך, ברגע שידועות לנו הגדרות ה-DOM עבור תכונת left של גיליון הסגנון, נוכל להזיז את הבלוק ישירות לקצה השמאלי העליון של העמוד:

מיקרוסופט:  

Document.all.mailblock.style.left="0px";

או Document.all.mailblock.style.pixelLeft=0;

נטסקייפ:  

Document.layers["mailblock"].left=0;

תוכל לשאול כיצד אתה אמור לדעת אילו תכונות עיצוב מוגדרות ב-DOM עבור כל דפדפן. שני מקורות זמינים ברשת מספקים את המידע הרלוונטי: Netscape's Using JavaScript with Positionet Content (טבלה 9.1) נותן רשימה של תכונות עצמי הרובד, ו- Microsoft's Style Object Reference נותן רשימה של התכונות הרלוונטיות לעצם עיצוב (style object) של מיקרוסופט. במאמץ לעשות את החיים קלים יותר, אנו מספקים טבלה מהודרת, שמסכמת אילו תכונות עיצוב של גיליונות סגנון ממופות לכל DOM של כל דפדפן.

אורות! מצלמה!

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

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

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

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

אם כל זה נשמע מרתיע, העבודה האמיתית היא בקוד ה-JavaScript. התכונות למעלה מבהירות כיצד לשנות בלוקים של תוכן, אבל קוד ה-JavaScript שמבצע את השינויים דורש לפעמים לולאות מורכבות כדי להפיק אפקטים מסובכים.  

  לעמוד הקודם      לעמוד הראשי        לעמוד הבא