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

מה זה JavaScript?

JavaScript היא שפת תכנות רב-תכליתית וחזקה המשמשת בעיקר ליצירת דפי אינטרנט אינטראקטיביים. בפרק זה, נחקור מהו JavaScript, כיצד הוא עובד עם HTML ו-CSS וכיצד לבצע קוד JavaScript בדפדפן. אנו גם נספק דוגמה פשוטה של "Hello World" הן ב-HTML והן ב-JavaScript, ונפרט כל רכיב כדי להבין כיצד הוא עובד.

קדימה, מתחילים...

JavaScript היא שפת תכנות מבוססת מפרש (interpreter) ברמה גבוהה שפותחה בתחילה להוספת אינטראקטיביות לדפי אינטרנט. זוהי טכנולוגיית ליבה של ה-World Wide Web לצד HTML ו-CSS. בניגוד ל-HTML ו-CSS, שהן שפות סימון המשמשות למבנה ולעיצוב תוכן אינטרנט בהתאמה, JavaScript היא שפת תכנות המאפשרת התנהגות דינמית בדפי אינטרנט.

ניתן להשתמש ב-JavaScript למגוון מטרות, לדוגמה:

הוספת אינטראקטיביות לדפי אינטרנט, כגון אימות טפסים, טיפול באירועים
מניפולציה של HTML ו-CSS לעדכון דינמי של תוכן
יצירת יישומים מבוססי אינטרנט כגון, משחקים, יישומי צ'אט
תקשורת עם שרתים, כדי להביא או לשלוח נתונים באופן אסינכרוני (AJAX)

איך JavaScript עובד עם HTML ו-CSS

HTML (שפת סימון היפרטקסט) משמשת להגדרת המבנה של דפי אינטרנט, בעוד ש-CSS (Cascading Style Sheets) משמשת לעיצוב ופריסה של האלמנטים על המסך. JavaScript מקיים אינטראקציה עם HTML ו-CSS על ידי מניפולציה של מודל אובייקט המסמך (DOM), המייצג את המבנה של דף האינטרנט כעץ של אובייקטים.

JavaScript יכול:

לגשת ולשנות אלמנטים ותכונות HTML
לשנות באופן דינמי סגנונות CSS
להשיב לאירועי משתמש כגון הקלקות על קישורים או כפתורים, תנועות עכבר ועוד

נראה קטע קוד לדוגמה, המשלב HTML, CSS ו-JavaScript להלן:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Changer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Background Color Changer</h1>
    <button id="colorButton">Change Color</button>

    <script>
        // Select the button element
        var colorButton = document.getElementById('colorButton');

        // Add click event listener to the button
        colorButton.addEventListener('click', function() {
            // Generate a random color
            var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
            
            // Change the background color of the body
            document.body.style.backgroundColor = randomColor;
        });
    </script>
</body>
</html>

הסבר:

קטע הקוד הזה מציג כפתור שכתוב עליו Change Color. כאשר לוחצים על הכפתור, צבע הרקע של דף האינטרנט ישתנה לצבע אקראי חדש.

HTML: יש לנו אלמנט button עם המזהה "colorButton" ואלמנט h1, כדי להציג כותרת.

CSS: יש לנו עיצוב CSS בסיסי שנועד למרכז את התוכן ולעצב את הכפתור לקריאה טובה יותר.

JavaScript: אנו בוחרים את רכיב הכפתור באמצעות document.getElementById('colorButton') ומוסיפים לו "מאזין" (listener) של אירוע הקלקה באמצעות הפונקציה addEventListener. כאשר לוחצים על הכפתור, פונקציית המאזין מייצרת קוד צבע אקראי באמצעות Math.random ומשנה את צבע הרקע של האלמנט body באמצעות document.body.style.backgroundColor.

הפעלת קוד JavaScript בדפדפן

ישנן מספר דרכים להפעיל קוד JavaScript בדפדפן אינטרנט:

סקריפט מוטבע - ניתן לכתוב קוד JavaScript ישירות בתוך תגיות script במסמך HTML.
סקריפט חיצוני - ניתן לאחסן קוד JavaScript בקובצי js חיצוניים ולכלול אותו במסמכי HTML באמצעות תכונת src של תג script.
מטפלי אירועים - ניתן להפעיל קוד JavaScript בתגובה לאירועים ספציפיים, כגון לחיצות על כפתורים או הגשת טופס, באמצעות תכונות של מטפל באירועים כמו onclick או onssubmit.
מסוף הדפדפן - מפתחים יכולים גם להפעיל קוד JavaScript ישירות בקונסולת המפתחים של הדפדפן למטרות בדיקה וניפוי באגים.

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

תוכנת Hello World ב-JavaScript

נדגים תוכנית "Hello World" כדי להראות כיצד JavaScript עובד עם HTML.

ניצור קובץ HTML שכולל את הקוד הבא:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>

    <script src="script.js"></script>
</body>
</html>

כמו כן, ניצור קובץ JavaScript בשם script.js שכולל את הקוד הבא:

// Select the h1 element with the id "greeting"
var greetingElement = document.getElementById('greeting');

// Change the text content of the h1 element
greetingElement.textContent = 'Hello, JavaScript!';

הסבר:

בקובץ ה-HTML, יש לנו אלמנט h1 עם המזהה "greeting", שמציג בתחילה "Hello, World!".

אנו כוללים תג script בקצה הגוף כדי לקשר את קובץ ה-JavaScript החיצוני script.js.

בקובץ ה-JavaScript, אנו משתמשים בשיטת document.getElementById, כדי לבחור ברכיב h1 עם המזהה "greeting".

לאחר מכן אנו משתמשים במאפיין textContent, כדי לשנות את תוכן הטקסט של האלמנט h1 ל-"Hello, JavaScript!".

לימודי קורס JavaScript למתחילים

מה זה JavaScript?

איך JavaScript עובד עם HTML ו-CSS

הפעלת קוד JavaScript בדפדפן

תוכנת Hello World ב-JavaScript