הטמעת קוד ג'אווה סקריפט inline
הדרך הפשוטה ביותר להטמיע קוד ג'אווה סקריפט בתוך HTML, היא בשיטת inline, כלומר, ישירות בקוד עצמו.
דוגמה:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Script Example</title>
<script>
// JavaScript function defined in the head
function showMessage() {
alert('Hello from inline script!');
}
</script>
</head>
<body>
<h1>Hello, World!</h1>
<!-- Call the JavaScript function from the body -->
<script>
showMessage();
</script>
</body>
</html>ניתן לראות בדוגמה זו, כי קוד ה-JavaScript מוטמע ישירות בתוך תגי script בתוך מסמך ה-HTML.
בחלק של ה-head ב-HTML הגדרנו את הפונקציה showMessage שמציגה הודעת alert ובחלק של ה-body הפעלנו את הפונקציה.
כאשר הדפדפן נתקל בתגית script (בין אם בחלק של ה-head או של ה-body), הוא מבצע את קוד ה-JavaScript באופן מיידי.
אנו הפרדנו בין הלוגיקה של הקוד (שנמצאת ב-head) לבין הקריאה לביצוע של הקוד בפועל (שנמצאת ב-body). ההפרדה נועדה לשמירה על HTML מסודר ונוח יותר לתחזוקה, אך אין חובה לבצע את ההפרדה באופן הזה וניתן למעשה להכניס את כל הקוד כולו לחלק של ה-body.
הפעלת קוד ג'אווה סקריפט מקובץ חיצוני
ניתן לשמור קוד JavaScript בקבצים עם סיומת js ולהפעילם מה-HTML באמצעות התגית source.
דוגמה:
ניצור קובץ בשם script.js שיכלול את הקוד הבא:
// Function defined in the external JavaScript file
function greet() {
alert('Hello from external script!');
}קובץ ה-HTML שלנו יראה כך:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Script Example</title>
<!-- Include the external JavaScript file -->
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<!-- Call the function from the external script -->
<script>
// Execute the function from the external script
greet();
</script>
</body>
</html>נשים לב, כי בחלק של ה-head אנו טוענים את קובץ ה-JavaScript החיצוני, ובחלק של ה-body אנו מבצעים בפועל את הקריאה לפונקציה greet שבקובץ ה-JavaScript.
ברוב המקרים, נמליץ על הפרדת בין קוד HTML לקוד ה-JavaScript, כלומר, שפונקציות JavaScript ישמרו תמיד בקובץ חיצוני כמו בדוגמה זו. הפרדה זו תורמת לסדר ולארגון של הקוד והיא גם מקילה על תחזוקת הקוד ושדרוגו בעתיד. יתרה מכך, בניגוד לקבצי HTML שאינם נשמרים בזכרון המטמון של הדפדפן, קבצי JavaScript כן נשמרים בזכרון המטמון של הדפדפן, ולכן, הוצאה של קוד ה-JavaScript מה-HTML לקובץ js חיצוני משפרת את מהירות טעינת דף האינטרנט.
יצירת אירועים שמקושרים לאלמנטים ב-HTML
ניתן לשייך קוד JavaScript לרכיבי HTML ספציפיים ולאירועי DOM באמצעות Event Handler. ה-Event Handler הוא פונקציה המופעלת עם הפעלה של אירוע כלשהי, לדוגמה: onclick, onmouseover, onssubmit וכו'.
דוגמה:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Example</title>
</head>
<body>
<button id="myButton" onclick="alert('Button clicked')">Click Me</button>
</body>
</html>יכולנו להציג את הדוגמה גם באופן הבא:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handler Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
// JavaScript code attached to event handler
document.getElementById('myButton').onclick = function() {
alert('Button clicked');
};
</script>
</body>
</html>בשני קטעי הקוד, שייכנו קוד JavaScript שמציע הודעת alert בנוסח "Button clicked" באמצעות Event Handler מסוג onclick (כלומר, הפעלה בעת הקלקה) לכפתור.
בשיטה הראשונה, הפרדנו בין קוד ה-JavaScript מה-HTML. בשיטה השניה, הכנסנו את ה-Event Handler ישירות בקוד ה-HTML. בפרקים בהמשך נרחיב עוד בנושא הטיפול באירועים.
הפעלת קוד ג'אווה סקריפט מהקונסול
קונסולת הדפדפן מאפשרת למפתחים להפעיל קוד JavaScript ישירות בתוך כלי המפתחים של הדפדפן. פתרון זה משמש בדרך כלל לניפוי באגים, בדיקה וניסוי עם קוד JavaScript.
כך תוכל לגשת למסוף הדפדפן:
- פתח את כלי המפתחים של הדפדפן (בדרך כלל על ידי לחיצה על F12 או לחיצה ימנית ובחירה באפשרות "בדוק" או "Inspect").
- נווט אל הכרטיסייה Console.
- הזן קוד JavaScript ישירות לבקשת המסוף.
