אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » יצירת אלמנטים ב-Vanilla JavaScript

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

רן בר-זיק יולי 8, 2012 7:47 am אין תגובות

דוגמה של קוד שיוצר וידג'ט עם הסבר מקיף על צד הפרונט אנד ואיך עשיתי וידג'ט שמציג באנרים באתרים שמטמיעים את הקוד שלו.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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 של הסקריפט מגיע מהשרת שלי ואני בעצם יכול לעשות בשרת המארח כל מה שבא לי כל עוד אני נשאר בגבולות הסקריפט שלי.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד