יצירת אלמנטים ב-Vanilla JavaScript

Vanilla JavaScript, למי שתוהה, הוא כינוי ל-JavaScript פשוט, בלי שום ספריה כמו jQuery או פריימוורק כמו MooTools. בעידן המודרני, יש לא מעט מפתחים שפשוט כבר לא זוכרים איך כותבים JavaScript פשוט. לא שזה מאד נורא, גם עבדכם הנאמן כבר לא כותב JavaScript טהור, ללא jQuery או MooTools. אבל לפעמים יש צורך ב-Vanilla JavaScript? מתי? בדרך כלל כאשר אנחנו כותבים ווידג’טים.
ווידג’טים אלו קטעי קוד קטנים, שאמורים להיות מועתקים ומשוכפלים באתרים שונים. הדוגמה הטובה ביותר היא פרסומות. מכירים את Google AdWords שרצים כמעט בכל בלוג? מדובר בעצם בוידג’טים. גם החלון שמציג את דף הפייסבוק של האתר הוא וידג’ט. וידג’טים עובדים בשתי דרכים עיקריות. הראשונה היא iFrame והשניה היא יצירת אלמנטים ב-JavaScript והזרקת תוכן אליהם מאתר מרוחק.

הדרך האהובה עלי ליצירת וידג’ט היא ליצור קובץ JavaScript דינמי שהוא אחראי על הוידג’ט. הקובץ הזה יוצר אלמנטים של HTML ויוצק לתוכם את התוכן. כל מה שבעל האתר צריך לעשות זה להכליל את קובץ ה-JavaScript ואלמנט HTML שאליו אצוק את התוכן. משהו בסגנון:

<div id="my_banner"></div>
<script src="http://MYSITE.COM/myScript.js"></script>

כאשר MYSITE.com הוא האתר שלי. כל מה שנותר לי לעשות זה ליצור את קובץ ה-JavaScript באופן דינמי ולגרום לו ליצוק את התוכן לתוך ה-div שאני רוצה. וכאן נכנס ה-Vanilla JavaScript לתןך הסיפור. אני לא יכול להיות בטוח שלמשתמש יש jQuery וגם אם כן, מאיזו גרסה. בגלל זה אני חייב להשתמש ב-JavaScript טהור.

הדוגמה שאביא היא יצירת באנר פשוט – יצירת image עם src ו-alt שיוקף בקישור עם href ו-title. כל זה יכנס לתוך ה-div ששמו הוא my_banner:

//create Image
var oImg=document.createElement("img");
oImg.setAttribute('src', '$banner_src');
oImg.setAttribute('alt', '$banner_title');
oImg.setAttribute('id', 'my_banner_img');

//create Anchor
var oAnc=document.createElement('a');
oAnc.setAttribute('href', '$banner_link');
oAnc.setAttribute('title', '$banner_title');
oAnc.setAttribute('target', '_blank');
oAnc.setAttribute('id', 'my_banner_anchor');

//append
document.getElementById('my_banner').appendChild(oAnc);
document.getElementById('my_banner_anchor').appendChild(oImg);

שני החלקים הראשונים של הקוד הם חשובים – שם אני יוצר את האלמנטים. שימו לב שכל החלקים שמתחילים בדולר הם בעצם משתנים (במקרה הזה של שפת סקריפט בצד השרת) אבל כמובן שאין מניעה שיהיה שם סתם טקסט. למשל במקום $banner_src יוצב הקישור לתמונה.

אני יוצר שני אלמנטים – תמונה וקישור. לכל אלמנט אני יוצר תכונות – מקור התמונה (src) במקרה של תמונה, alt וכן href לקישור ו-title.

שתי השורות האחרונות הן פשוטות. הראשונה מצמידה את אלמנט הקישור כילד של ה-div הריק my_banner והשני מצמידה את אלמנט התמונה כילד לאלמנט הקישור – מה שיוצר את הבאנר באתר.

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

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

אהבתם? לא אהבתם? דרגו!

(2 הצבעות, ממוצע: 4.50 מתוך 5)