מבוא ל-JavaScript והשתלבות בדף HTML
נושא מספר 9 ב-קורס תכנות לילדים.
תיאור השיעור:
בפרק זה נבצע היכרות עם JavaScript, שפת התכנות שמשתמשים בה כדי להפוך דפי אינטרנט לדינמיים ואינטראקטיביים. נלמד איך להוסיף קוד JavaScript לדף HTML, נכתוב את קוד התכנות הראשון שלנו, ונבין את מבני הנתונים הבסיסיים של השפה.
מטרות השיעור:
- להבין מהי JavaScript וכיצד היא משתלבת עם HTML.
- ללמוד איך לשלב קוד JavaScript בדף HTML באמצעות תגית
<script>. - לכתוב קוד JavaScript ראשון ולבצע פעולות פשוטות.
- להכיר את מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות.
מהלך השיעור:
1. מה זה JavaScript?
JavaScript היא שפת תכנות שנועדה להוסיף אינטראקטיביות לאתרים. בלעדיה, דפי אינטרנט היו סטטיים – כל מה שהמשתמש היה יכול לראות הוא טקסטים ותמונות, אבל לא יכול היה ללחוץ על כפתורים או לקבל תגובות מיידיות מהדף.
JavaScript מאפשרת לנו ליצור אתרים מגיבים ודינמיים – לדוגמה:
- כפתורים שמשתנים כשעוברים עליהם עם העכבר.
- טפסים ששולחים נתונים בלי לרענן את הדף.
- שינויים מיידיים בתוכן הדף בהתאם לפעולות של המשתמש.
2. איך לשלב JavaScript בדף HTML?
כדי להשתמש ב-JavaScript בדף HTML, אנחנו משתמשים בתגית מיוחדת שנקראת <script>. כל קוד JavaScript שנרצה להריץ יופיע בתוך התגית הזו, בדרך כלל בסוף המסמך כדי לוודא שכל האלמנטים בדף נטענו לפני הרצת הקוד.
דוגמה:
נראה איך אפשר להוסיף קוד JavaScript לדף HTML פשוט:
<!DOCTYPE html>
<html>
<head>
<title>שילוב JavaScript</title>
</head>
<body>
<h1>ברוכים הבאים לאתר שלנו!</h1>
<script>
alert("שלום! זהו קוד JavaScript הראשון שלך!");
</script>
</body>
</html>כאן, כשהדף ייטען, תיפתח הודעה (Popup) עם המילים "שלום! זהו קוד JavaScript הראשון שלך!". זו דוגמה ראשונית לכך ש-JavaScript מאפשרת לנו לתקשר עם המשתמשים.
3. כתיבת קוד JavaScript ראשון
אחד הדברים הראשונים שאנחנו לומדים ב-JavaScript הוא איך להשתמש בפעולה שנקראת alert. זו פונקציה שמציגה הודעה על המסך. בואו נבצע ניסוי קטן:
דוגמה:
<script>
alert("זה הקוד הראשון שלי!");
</script>כאן, כאשר תפעילו את הדף, תופיע הודעת ברכה על המסך. הפקודה alert עוזרת לנו להבין שאנחנו יכולים לגרום לדף לתקשר עם המשתמשים בצורה פשוטה.
4. מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות
עכשיו, כשאנחנו יודעים להכניס JavaScript לדף HTML ולהריץ קוד, בואו נתחיל להכיר את החלקים הבסיסיים של השפה: משתנים, מספרים ו-מחרוזות.
4.1 מהו משתנה?
משתנה הוא כמו קופסה בזיכרון המחשב שבו אנחנו שומרים מידע. אפשר לחשוב על זה כמו מדף שבו אנחנו שמים ספר (הספר הוא המידע). ב-JavaScript, אנחנו מכריזים על משתנה באמצעות המילה let או const.
דוגמה:
let age = 12;
const name = "דני";כאן, יצרנו שני משתנים:
- משתנה
ageשבו שמרנו את המספר 12 (גיל). - משתנה
nameשבו שמרנו את המחרוזת "דני" (שם פרטי).
4.2 מה זה מספר?
ב-JavaScript אפשר לעבוד עם מספרים כמו שעובדים במתמטיקה. אפשר לעשות חישובים כמו חיבור, חיסור, כפל וחילוק.
דוגמה:
let x = 5;
let y = 3;
let result = x + y; // התוצאה תהיה 8כאן, חיברנו את המשתנים x ו-y ושמרנו את התוצאה במשתנה חדש בשם result.
4.3 מהי מחרוזת?
מחרוזת היא סדרה של תווים, למשל מילה או משפט. אנחנו כותבים מחרוזות בתוך גרשיים (" או ').
דוגמה:
let greeting = "שלום!";
let name = "דני";
let message = greeting + " " + name; // התוצאה תהיה "שלום! דני"כאן חיברנו בין מחרוזת ברכה ("שלום!") לבין שם ("דני") וקיבלנו את המחרוזת המלאה "שלום! דני".
5. תרגול בסיסי
כדי להבין יותר טוב את מה שלמדנו, בואו נבצע כמה תרגולים.
תרגיל 1:
צרו משתנה שנקרא myName ושמרו בו את השם שלכם. לאחר מכן, השתמשו בפונקציה alert כדי להציג הודעה שאומרת "שלום, [השם שלכם]!".
תרגיל 2:
הכריזו על שני משתנים עם ערכים מספריים, וחברו ביניהם כדי לקבל תוצאה. השתמשו ב-alert כדי להציג את התוצאה.
סיכום השיעור
למדנו מהי JavaScript, איך להוסיף אותה לדף HTML, וכתבנו את הקוד הראשון שלנו. הכרנו גם את מבני הנתונים הבסיסיים: משתנים, מספרים ומחרוזות. בפעם הבאה נעמיק עוד יותר ונלמד על תנאים ולולאות, שמאפשרים לנו ליצור קוד חכם ודינמי יותר.
קישורים
- בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.