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

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

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. למה לדעתכם מסוכן להריץ קוד שאתם לא מבינים?

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

טוענים את הקטע…

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

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

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

שאלות נפוצות

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

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

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

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

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

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

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

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