1step2learn

פונקציות והפעלה שלהן בלחיצת כפתור ב-HTML

/ טכנולוגיה
תוכנה
הנהלת האתר
·
דק' קריאה
Thumbnail
 
 
 
 
יצירת פונקציות פשוטות ב-JavaScript והפעלתן על ידי לחיצה על כפתורים ב-HTML.

קורס טכנולוגיות אינטרנט

נושא מספר 11 ב-קורס תכנות לילדים.

תיאור השיעור:

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

מטרות השיעור:

  • להבין מהי פונקציה ב-JavaScript ולמה היא חשובה.
  • ללמוד איך ליצור ולהפעיל פונקציה.
  • ללמוד איך להוסיף כפתור ב-HTML ולהשתמש בו כדי להפעיל פונקציה ב-JavaScript.
  • לתרגל יצירת פונקציות והפעלתן עם כפתורים.

מהלך השיעור:

1. מהי פונקציה ב-JavaScript?

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

למה חשוב להשתמש בפונקציות?

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

דוגמה לפונקציה פשוטה:

function sayHello() {
    console.log("שלום עולם!");
}

כאן יצרנו פונקציה בשם sayHello שמבצעת פעולה פשוטה – היא מדפיסה "שלום עולם!" בקונסולה. כדי להפעיל את הפונקציה, נרשום את שם הפונקציה עם סוגריים:

sayHello();  // מפעיל את הפונקציה ומדפיס "שלום עולם!" בקונסולה

2. יצירת פונקציה ב-JavaScript

כשאנחנו רוצים ליצור פונקציה, אנחנו משתמשים במבנה קוד פשוט. נתחיל במילת המפתח function, לאחר מכן נבחר שם לפונקציה, ונרשום סוגריים. בתוך הסוגריים יכולים להיות משתנים שנעביר לפונקציה (מה שנקרא "פרמטרים"), אבל במקרה הבסיסי אפשר להשאיר את זה ריק. לאחר מכן, בתוך סוגריים מסולסלים {}, נכתוב את הפעולות שהפונקציה תבצע.

דוגמה ליצירת פונקציה שמבצעת חישוב:

function addNumbers() {
    let number1 = 5;
    let number2 = 10;
    let sum = number1 + number2;
    console.log(sum);  // יציג 15 בקונסולה
}

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

3. הוספת כפתור להפעלת פונקציה ב-HTML

בשלב הזה, נלמד איך אפשר להפעיל פונקציה כשמשתמש לוחץ על כפתור בדף HTML. לשם כך, נוסיף כפתור לדף ה-HTML ונקשר אותו לפונקציה שכתבנו ב-JavaScript.

איך נראה כפתור ב-HTML?

כפתור ב-HTML נוצר בעזרת התגית <button>. בתוך התגית אפשר לכתוב את הטקסט שיופיע על הכפתור.

<button>לחץ עלי</button>

איך מפעילים פונקציה בלחיצה על כפתור?

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

<button onclick="sayHello()">לחץ כאן</button>

כאן, כשמשתמש ילחץ על הכפתור, הפונקציה sayHello() תופעל ותדפיס את ההודעה "שלום עולם!" בקונסולה.

4. דוגמאות לשימוש בפונקציות עם כפתורים

דוגמה 1: פונקציה שמציגה הודעה בקונסולה

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>פונקציה עם כפתור</title>
</head>
<body>
    <button onclick="sayHello()">לחץ כאן לברך</button>

    <script>
        function sayHello() {
            console.log("שלום עולם!");
        }
    </script>
</body>
</html>

בדוגמה זו, כשמשתמש ילחץ על הכפתור, תופיע ההודעה "שלום עולם!" בקונסולה של הדפדפן.

דוגמה 2: פונקציה שמחשבת חיבור של שני מספרים

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>חישוב עם כפתור</title>
</head>
<body>
    <button onclick="addNumbers()">לחץ לחישוב</button>

    <script>
        function addNumbers() {
            let number1 = 5;
            let number2 = 3;
            let sum = number1 + number2;
            console.log("התוצאה היא: " + sum);
        }
    </script>
</body>
</html>

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

5. שימוש בפרמטרים לפונקציות

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

דוגמה לפונקציה עם פרמטרים:

function addNumbers(number1, number2) {
    let sum = number1 + number2;
    console.log(sum);
}

במקרה הזה, הפונקציה addNumbers מקבלת שני פרמטרים (number1 ו-number2) ומבצעת את החיבור ביניהם.

הפעלת הפונקציה עם פרמטרים:

<button onclick="addNumbers(8, 12)">לחץ לחישוב</button>

כאן, אנחנו מפעילים את הפונקציה addNumbers ומעבירים לה את המספרים 8 ו-12. התוצאה תהיה 20, שתודפס בקונסולה.

6. תרגילים

תרגיל 1: פונקציה פשוטה עם כפתור

  1. צרו פונקציה ב-JavaScript שמדפיסה את ההודעה "היי! לחצת על כפתור!".
  2. הוסיפו כפתור בדף HTML שמפעיל את הפונקציה כשלוחצים עליו.

תרגיל 2: פונקציה שמבצעת חישוב

  1. צרו פונקציה שמקבלת שני פרמטרים – מספרים.
  2. הפונקציה תחשב את ההפרש בין המספרים ותדפיס את התוצאה בקונסולה.
  3. הוסיפו כפתור ב-HTML שמפעיל את הפונקציה ומעביר לה שני מספרים.

תרגיל 3: פונקציה עם הודעה מותאמת אישית

  1. צרו פונקציה שמקבלת פרמטר של שם.
  2. הפונקציה תדפיס הודעה מותאמת אישית, לדוגמה: "שלום, תומר!".
  3. הוסיפו כפתור שמפעיל את הפונקציה ומעביר לה את השם.

7. סיכום השיעור

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

קישורים

  1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.