הרשמה לעדכונים
הירשמו לקבלת עדכונים על קורסים חדשים, מבצעים והנחות.
מבטיחים לא לשלוח ספאם!
JavaScript
קורס תכנות בשפת JavaScript
הקורס כולל את יסודות שפת התכנות, פונקציות ולולאות
מרצה
צוות Ai Top
- תיאור
- רשימת שיעורים
מה זה JavaScript?
בנינו את השלד של הבית עם HTML, עיצבנו אותו יפה עם CSS. עכשיו הגיע הזמן להוסיף קסם! דמיינו שאתם רוצים שהדלת תיפתח בלחיצת כפתור, שהאורות יידלקו כשנכנסים לחדר, או שהטלוויזיה תגיב לשלט. זה בדיוק מה ש-JavaScript עושה לאתר שלנו – הוא הופך אותו לאינטראקטיבי וחי!
JavaScript (או בקיצור JS) היא שפת תכנות שמאפשרת לאתרים לעשות דברים מגניבים: להגיב ללחיצות עכבר, להציג הודעות, לשנות תמונות, ליצור משחקים קטנים ועוד המון דברים. היא גורמת לאתר “לחשוב” ולפעול לפי מה שהמשתמש עושה.
שיעור 1: הכפתור הקסום הראשון שלי!
כדי לכתוב קוד JavaScript, אנחנו משתמשים בתגית מיוחדת שנקראת <script>. בדרך כלל, נשים אותה בסוף החלק <body> של קובץ ה-HTML שלנו, לפני תגית הסגירה </body>. כך, כל תוכן ה-HTML ייטען קודם, ורק אז נתחיל להפעיל את הקוד של JavaScript.
בואו נכיר כמה פקודות חשובות ב-JavaScript:
-
alert()– הודעה קופצת:-
זו פקודה שגורמת להודעה קופצת להופיע על המסך.
-
דוגמה:
alert("היי, ברוכים הבאים לאתר האינטראקטיבי שלי!"); -
הטקסט שאתם רוצים שיופיע בהודעה צריך להיות בתוך גרשיים (
"") ובתוך סוגריים (()).
-
-
console.log()– הדפסה למסוף:-
זו פקודה סופר שימושית למתכנתים! היא מדפיסה הודעות בחלון מיוחד שנקרא “קונסול” (Console) בדפדפן. אתם לא תראו את זה באתר עצמו, אבל זה עוזר לנו לבדוק שהקוד שלנו עובד כמו שצריך.
-
כדי לפתוח את הקונסול, לחצו קליק ימני בעכבר על דף אינטרנט ובחרו “בדיקה” (Inspect) או “בדוק אלמנט” (Inspect Element), ואז לכו ללשונית “Console”.
-
דוגמה:
console.log("הקוד שלי עובד!");
-
-
גישה לאלמנטים ב-HTML:
-
כדי ש-JavaScript יוכל לשנות דברים באתר, הוא צריך למצוא את האלמנטים הספציפיים ב-HTML.
-
הדרך הכי קלה למצוא אלמנט היא לתת לו “תעודת זהות” מיוחדת שנקראת
id(מזהה) בתגית ה-HTML. -
ב-JavaScript, כדי למצוא אותו:
document.getElementById("myParagraph")
-
-
שינוי תוכן של אלמנט:
-
אחרי שמצאנו אלמנט, אנחנו יכולים לשנות את הטקסט שמופיע בתוכו.
-