ראשי > dhtml חוצה דפדפנים > טלאי תחביר

   טלאי תחביר

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

גישה אלטרנטיבית לפיצול כאשר התחביר מהווה מכשלה, נקראת "טלאי תחביר" או syntax patching. גישה זו קל יותר להדגים מאשר להסביר, אולם נתחיל בהבהרת נקודת המפתח. ב-JavaScript, שהיא השפה שמשמשת לתפעול DHTML, יש שיטה שידועה בשם eval(). שיטה זו מקבלת פרמטר מחרוזת ומחזירה את המחרוזת כהצהרת JavaScript. הטבלה למטה מדגימה כמה שימושים של eval():

eval("alert('Testing');"); תבצע את alert('Testing');

הפקודה תקפיץ תפריט נשלף
eval("hello"); תבצע את hello

הפקודה תיצור טעות
obj = "layer";
eval("document." + obj + "['id']");		 תבצע את document.layer['id']

תחביר נטסקייפ להתייחסות לבלוק טקסט

דרך הבנת השימושים של eval(), נוכל להבין את הטכניקות שמודגמות למטה:

<SCRIPT LANGUAGE = "JavaScript">
if (document.all) //MSIE
{ obj = "document.all";
bgcolor = ".style.backgroundColor";
left = ".style.pixelLeft";
top = ".style.pixelTop";
width = ".style.pixelWidth"; }
else //Netscape
{ obj = "document.layers";
bgcolor = ".bgColor";
left = ".left";
top = ".top";
width = ".clip.width";}

//Move object named 'block' to Y coordinate 100 and set background color to white
objName = "['block']";
eval(obj + objName + top + " = 100;");
eval(obj + objName + bgcolor + " = 'white';");
</SCRIPT>

גם אם הדוגמה נראית מפחידה, היא לא נוראה כל כך במבט מקרוב. אנו מתעסקים עם חלקים במטרה לבנות אוצר מילים חדש לשימוש עם ה-DOM של שני הדפדפנים. החצי הראשון של הסקריפט נמצא בתוך סעיף של else…if. הפיצול המור יוצר שני קטעים: קטע אחד עבור  הדפדפן שתומך בעצם all, כלומר אינטרנט אקספלורר, וקטע שני (else) עבור נטסקייפ. בשני המקרים, אנו מגדירים את אוצר המילים החדש של הקואורדינטות עם תחביר מתאים עבור ה-DOM של הדפדפן. הגדרנו חמש מילות מפתח: obj, bgcolor, left, top, width. כל אחת מהמילים מכילה מחרוזת ובה תחביר מתאים עבור כל DOM.

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

הפקודה באינטרנט אקספלורר

    
eval(obj + objName + top + " = 100;"); תיצור את document.all['block'].style.pixelTop = 100;
eval(obj + objName + bgcolor + " = 'white';"); תיצור את document.all['block'].style.backgroundColor = 'white';

הפקודה בנטסקייפ

    
eval(obj + objName + top + " = 100;"); תיצור את document.layers['block'].top = 100;
eval(obj + objName + bgcolor + " = 'white';"); תיצור את document.layers['block'].bgColor = 'white';

היתרון העיקרי בשימוש בשיטת "טלאי תחביר" הוא שאתה לא צריך לפצל כל פעולת DHTML לשתי גרסאות. במקום זה, אתה משתמש בפיצול בתחילת הקוד כדי ליצור אוצר מילים נפוצות. כאשר אוצר המילים מוכן, אתה פשוט משתמש ב-eval() לעבודה עם המילים, לא משנה באיזה דפדפן העמוד נמצא. הגמישות של גישה זו תלויה בטיב אוצר המילים שאתה יוצר; כלומר, כמה מה-DOM אוצר המילים מכסה. בדוגמה כיסינו את מלוא התכונות. ה-DOM כולו עשוי להכיל מאות תכונות של עשרות עצמים, כך שהגדרת אוצר מילים עבור כל ה-DOM אינה סבירה. בדרך כלל תשתמש באוצר מילים שיכסה את כל התכונות של העצמים שעמם הקוד שלך יעבוד. למשל, העברה של בלוק ממקום אחד לשני בדף דורשת הגדרת אוצר מילים  עבור העצמים layer ו-style, כפי שראינו בדוגמה.

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

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

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