צעדים ראשונים בג׳אווהסקריפט

תכנות · לכיתות ו׳–ט׳

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

שפה שנכתבה בעשרה ימים

ב־1995 ביקשה חברת דפדפנים ממתכנת בשם ברנדן אייך ליצור שפה קטנה שתרוץ בתוך דפי אינטרנט. לפי הסיפור המוכר, הוא כתב את הגרסה הראשונה בכעשרה ימים. השם ״ג׳אווהסקריפט״ נבחר בעיקר משיקולי שיווק, כי שפה אחרת בשם ג׳אווה הייתה אז מפורסמת מאוד — אבל שתי השפות שונות לגמרי. אומרים בצחוק שג׳אווה וג׳אווהסקריפט קשורות כמו ״מכונית״ ו״מכוניתון״ — רק בשם.

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

שורות ראשונות

בג׳אווהסקריפט, הדרך הפשוטה להציג משהו היא console.log("שלום"). הפלט מופיע בקונסולה — חלון מיוחד לכלי המפתחים של הדפדפן, שמתכנתים משתמשים בו לבדיקות. console.log(2 + 3) מציג 5. כמו בפייתון, יש הבדל בין מספרים לטקסט: "5" + 5 נותן ״55״, כי ג׳אווהסקריפט מדביקה טקסט ומספר כשמחברים ביניהם.

משתנה יוצרים עם המילה let: let score = 0; ואחר כך score = score + 1;. שימו לב לנקודה־פסיק בסוף השורה — בג׳אווהסקריפט נהוג לסיים בה הוראות. ותנאי נכתב עם סוגריים: if (score > 10) { console.log("ניצחת!"); }. התנאי בסוגריים עגולים, וההוראות שמתבצעות — בתוך סוגריים מסולסלים. זה ההבדל הבולט מפייתון, שם משתמשים בנקודתיים ובהזחה.

מחברים את הקוד לדף

הכוח האמיתי של ג׳אווהסקריפט הוא שהיא יכולה לשנות את הדף בזמן אמת. בדף HTML אפשר לשים כפתור, ולהגדיר שכשלוחצים עליו תופעל פונקציה: <button onclick="sayHi()">לחצו</button>. בקוד מגדירים את הפונקציה: function sayHi() { alert("שלום!"); }. עכשיו, כל לחיצה מקפיצה חלונית עם ״שלום!״. זה אירוע — בדיוק כמו בסקראץ׳.

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

איך מתאמנים בבטחה

כדי להתאמן, אפשר ליצור קובץ HTML במחשב ולהוסיף לו קוד ג׳אווהסקריפט בתוך התגית <script>. פותחים את הקובץ בדפדפן, ואת הפלט של console.log רואים בכלי המפתחים. יש גם אתרי לימוד שבהם כותבים קוד ורואים את התוצאה מיד. כמו תמיד, באישור של מבוגר.

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

✅ חידון: צעדים ראשונים בג׳אווהסקריפט

1. מה ג׳אווהסקריפט עושה באתרים?

2. מי יצר את ג׳אווהסקריפט?

3. האם ג׳אווהסקריפט היא גרסה של ג׳אווה?

4. באיזו מילה יוצרים משתנה בג׳אווהסקריפט?

5. איפה מופיע הפלט של ⁦console.log⁩?

6. מה נותן "5" + 5 בג׳אווהסקריפט?

7. איך מסמנים בלוק של תנאי בג׳אווהסקריפט?

8. מה עושים כשזר שולח קוד ומבקש להדביק אותו בקונסולה?

🖨️ דף עבודה להדפסה

8 שאלות, שאלות לחשיבה ודף תשובות עם הסברים.

📘 מושגים מהשיעור

💬 שאלות לשיחה

  1. מצאו באתר שאתם מכירים שלושה דברים שמגיבים ללחיצה או להקלדה. איך לדעתכם הם עובדים?
  2. מה דומה ומה שונה בין תנאי בפייתון לתנאי בג׳אווהסקריפט?
  3. למה לדעתכם מסוכן להריץ קוד שאתם לא מבינים?

📖 קטע קריאה בנושא: 🍏 יומן המשחק הראשון שלי

יום ראשון. היום בחוג התחלנו לעבוד בסקראץ׳. זו תכנות שפותחה במכון הטכנולוגי של מסצ׳וסטס (MIT), ובמקום להקליד פקודות, מחברים בלוקים צבעוניים כמו לגו. החלטתי לבנות משחק: חתול שתופס תפוחים שנופלים מהשמיים.

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

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

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

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

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

📖 מילון הקטע
  • סביבת — מקום או כלי שעובדים בו
  • חינמית — בלי תשלום
  • אירוע — משהו שקורה ומפעיל פעולה
  • אקראי — במקרה, בלי סדר קבוע
  • משתנה — מקום בזיכרון ששומר ערך שיכול להשתנות
  • ניקוד — מספר הנקודות במשחק
  • קלאסי — טיפוסי, מוכר מאוד

שאלות

1. מה הרעיון של המשחק שבנה כותב היומן?
2. למה בפעם הראשונה כל התפוחים נפלו באותו מקום?
3. למה הניקוד קפץ ב־30 בבת אחת?
4. מה אפשר להבין מהתגובה של האח הקטן?
5. מהי המסקנה החשובה ביומן?
6. האח הקטן ביקש תפוחים מקולקלים שמורידים נקודות. תארו במילים מה צריך להוסיף למשחק כדי לבנות את זה.

עוד שיעורים בתכנות

לכל 16 השיעורים בתכנות ←

חוברת ומבחן לדוגמה לכיתה

שאלות נפוצות

מה עדיף ללמוד קודם — פייתון או ג׳אווהסקריפט?

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

איך פותחים את כלי המפתחים בדפדפן?

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

האם ג׳אווהסקריפט עובדת רק בדפדפן?

לא. היום מריצים אותה גם בשרתים, באפליקציות לטלפון ולמחשב ובמשחקים. אבל המקום שבו היא נולדה, ושבו רוב האנשים פוגשים אותה, הוא הדפדפן.

שווה להסתכל גם על תכנות לילדים, ולומדים.

האם זה עזר?
חדש בעוגה בוגה: מבקשים — ואנחנו מכינים ✨חסר לכם דף עבודה, חוברת או משחק? ספרו לנו, בחינם.
לבקשת דף ←או בוואטסאפ