צור קשר
מאמרים אחרונים
הטמעת קוד ג'אווה סקריפט בדפי HTML
קוד ג'אווה סקריפט יכול להשתלב בקוד ה-HTML בחלק של ה-head ובחלק של ה-body.
בחלק של ה-head נטמיע הגדרות בלבד: הגדרות של פונקציות והכרזה על קבועים ומשתנים גלובאליים.
בחלק של ה-body נטמיע קוד ביצועי: הפעלה של הפונקציות השונות.
הטמעת הקוד (ב-head או ב-body) יכולה להיות ישירה או באמצעות קובץ.
הטמעת קוד ג'אווה סקריפט בצורה ישירה
הטמעת הקוד תבוצע באמצעות תגיות script.
דוגמה להטמעת קוד:
<!DOCTYPE html>
<html>
<head>
<script>
function min(a,b) {
return a < b ? a : b;
}
</script>
</head>
<body>
<script>
document.write(min(5,8));
</script>
</body>
</html>בחלק של ה-head, הטמענו את הגדרת הפונקציה min שמחשבת ערך מינימום בין 2 מספרים.
בחלק של ה-body, הטמענו קטע קוד שעושה שימוש בפונקציה הזו ומדפיס את התשובה על המסך.
בשני המקרים, השתמשנו בהטמעה ישירה של קוד ג'אווה סקריפט.
הטמעת קוד ג'אווה סקריפט באמצעות שימוש בקובץ חיצוני
ניתן "להוציא" קטעי קוד ג'אווה סקריפט לקובץ חיצוני שמסתיים בסיומת js ובכך להפרידם מעמוד ה-HTML.
נראה איך מפרידים בין קוד ה-JS לעמוד ה-HTML מהדוגמה הקודמת.
עמוד ה-HTML יראה כך:
<!DOCTYPE html>
<html>
<head>
<script src="min.js"></script>
</head>
<body>
<script>
document.write(min(5,8));
</script>
</body>
</html>
הקובץ min.js יראה כך:
function min(a,b) {
return a < b ? a : b;
}
למעשה, יכולנו להפריד גם את הקריאה לפונקציה שנמצאת בחלק של ה-body לקובץ חיצוני, אך לא עשינו כך.
מתי כדאי להשתמש בקובץ js חיצוני?
בכל פעם שנכנסים לעמוד אינטרנט באתר אינטרנט כלשהו, קבצי ה-HTML נטענים מחדש ובאופן מלא. לעומתם, קבצי JS וקבצי CSS נטענים פעם אחת בלבד (בפעם הראשונה בהם הם נדרשים) ונשמרים בעוגיות (בקוקיז) של הדפדפן. בגלישה באתר ובמעבר מעמוד זה לאחר, הדפדפן אינו טוען מחדש את קבצי ה-JS וקבצי ה-CSS מהשרת, אלא עושה שימוש בקבצים שכבר נטענו קודם לכן ונמצאים במטמון של הדפדפן (זכרון "ההיסטוריה" של הדפדפן).
מטרת ההתנהגות הזו של הדפדפן היא האצת הטעינה של אתרי האינטרנט. טעינת קבצים מהמטמון מהירה הרבה יותר מאשר טעינתם מהשרת.
לכן, ברוב המקרים, כדאי שכל חלק ההגדרות שנמצא ב-head תמיד ישב בקובץ או במספר קבצי JS חיצוניים. משיקולי מהירות, במקרים מיוחדים בהם ישנם קטעי JS קצרים במיוחד, לעיתים נעדיף דווקא ההיפך, שקוד ה-JS יוטמע ישירות ב-HTML ולא בקובץ חיצוני.
את קטעי ה-JS שנמצאים ב-body רצוי לצמצם למינימום על ידי העברת הקטעים הביצועיים לפונקציות שישולבו בקובץ ה-JS החיצוני שנטען ב-head.
הטמעות JS בשיטה הישנה
תגיות script משמשות לטעינה של קטעי קוד בשפות שונות, ולאו דווקא בשפת ג'אווה סקריפט. לכל תגית script שמשולבת ב-HTML, ניתן להוסיף מאפיין type שהערך שלה יגדיר את השפה של הקוד שמשלבים.
לפני שהוגדר הסטנדרט HTML5, מאפיין ה-type של התגית script היה מאפיין חובה, ולציון השפה ג'אווה סקריפט היו נותנים למאפיין את הערך text/javascript.
דוגמה לשימוש במאפיין type:
<script type="text/javascript">
function min(a,b) {
return a < b ? a : b;
}
</script>
החל מסטנדרט HTML5, מאפיין ה-type הפך להיות מאפיין רשות שאין חובה לציינו, ואם הוא אינו מצויין, ברירת המחדל תהיה שפת ג'אווה סקריפט.
אנו ממליצים שלא לעשות שימוש במאפיין type אם שפת הקוד המשולבת בתגית script היא ג'אווה סקריפט, וזאת על מנת לשמור על עמוד HTML קצר יותר, ולכן, גם קריא יותר וגם נטען מהר יותר.
שילוב קוד ג'אווה סקריפט inline
מעבר ל-2 הצורות הבסיסיות שהצגנו קודם, ניתן לשלב קטעי קוד בשפת ג'אווה סקריפט בתוך תגיות HTML.
הדבר נעשה בעיקר כשמשתמשים באירועים (events). אירועים אלו מצבים שמתרחשים כשמשהו קורה (לחצו על העכבר, לחצו על מקש, הזיזו את העכבר, התמונה נטענה וכן הלאה).
דוגמה לשימוש inline בקוד ג'אווה סקריפט:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div onclick="alert('INLINE JS CALL');">Click here</div>
</body>
</html>על המסך יוצג הכיתוב "Click here" שהקלקה עליו תקפיץ הודעה "INLINE JS CALL".
גם במקרים של אירועים, קיימות שיטות לבצע הפרדה של חלק ה-JS מה-HTML, אבל זה כבר למתקדמים (אולי במדריך הבא).
