יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
17/09/2024 12:49
הכירו את פורמטי המדיה המתקדמים, וידאו ותמונה, שנחוצים בכל בניית חנות וירטואלית ואתר אינטרנט חדשים: A...
15/09/2024 17:03
במדריך זה נכיר את מנגנון הטעינה העצלה שבפיתוח אתרי אינטרנט. נציג את הרעיון שעומד מאחורי המנגנון, יתר...
17/07/2024 20:18
שלב אחר שלב, כך תגדירו קמפיין גוגל עם מודעות חיפוש דינמיות. מדריך טכני מקיף שיכוון אתכם מההתחלה ועד ...

הטמעת JavaScript בקוד HTML

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. הטמעת JavaScript בקוד HTML
איך מטמיעים קוד ג'אווה סקריפט באתרי אינטרנט.

הטמעת קוד ג'אווה סקריפט בדפי 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, אבל זה כבר למתקדמים (אולי במדריך הבא).

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: