תיבת טקסט שמרגישה כמו עורך קוד אמיתי
תלמידים מקלידים קוד בתיבה פשוטה. הפכנו אותה לעורך קוד קטן, כדי ש־Visual Studio Code או כל עורך אחר לא יהיו חדשים כשיגיעו אליהם.
2 דקות קריאה
בכל תרגיל בשפי לומדה יש תיבה שמקלידים בה קוד. היא יכלה להיות תיבת טקסט פשוטה. במקום זה היא עורך קוד קטן, רק החלק של הטקסט, עם המראה והעזרים שעורכים מקצועיים נותנים.
בקצרה
- הסיבה: תלמידים שפוגשים כאן את המראה והעזרים של עורך אמיתי לא יופתעו כשיעברו ל־Visual Studio Code, לעורך של JetBrains או לכל עורך אחר.
- זה רק המקום שבו מקלידים.
- יש בו מספרי שורות, צבעים לחלקי הקוד, סוגריים שנסגרים לבד, אזהרות בעברית או באנגלית והשלמה אוטומטית ל־JavaScript.
- ההשלמה האוטומטית מגיעה מ־TypeScript, שעובד בעוזר ברקע (Worker). היא התווספה ב־19 ביולי 2026.
למה לא תיבה פשוטה
לתלמידים יש מספיק מה ללמוד. בפעם הראשונה שפותחים עורך אמיתי, היינו רוצים שהצבעים, מספרי השורות וההשלמות שקופצות ייראו כמו חברים ותיקים. אז התיבה שמקלידים בה כבר כוללת אותם.
מה יש בתיבה
העורך בנוי עם CodeMirror (נפתח בלשונית חדשה), ויש בו:
- מספרי שורות וצבעים שמראים מה כל חלק בקוד;
- צבעים כהים, כמו אלה של עורכים מקצועיים רבים;
- סוגריים תואמים שמוארים, וסוגריים שנסגרים לבד;
- אפשר לכווץ קטע קוד ארוך לשורה אחת, ויש חיפוש;
- ב־HTML וב־CSS, קיצורי Emmet (נפתח בלשונית חדשה), שמרחיבים כמה תווים לקטע שלם של קוד, עם חלון עזרה שמסביר אותם;
- ב־JavaScript, השלמה אוטומטית תוך כדי הקלדה, שמגיעה מ־TypeScript שעובד בעוזר ברקע (Worker).
מה זה TypeScript?
TypeScript היא שפת תכנות שנבנתה על JavaScript ומוסיפה כמה כללים נוספים. עורכי קוד יכולים להשתמש בכללים האלה כדי לנחש מה עומדים להקליד ולזהות טעויות מוקדם.
מה זה עוזר ברקע?
עוזר ברקע (Worker) הוא תוכנה קטנה שהדפדפן מריץ בנפרד מהדף שאתם רואים, כדי שעבודה כבדה לא תקפיא את הדף. אין לו גישה לדף עצמו.
אזהרות בשפה של התלמיד
ב־JavaScript העורך מסמן כמה דברים תוך כדי הקלדה ומסביר אותם בעברית או באנגלית. הוא מסמן שלושה דברים: טעות כתיבה שמשבשת את הקוד (שגיאת תחביר), משתנה שלא הוצהר, והמילה הישנה var, שמקבלת אזהרה כי הקורס מלמד קודם const ו־let.
מה זה משתנה?
משתנה (Variable) הוא שם לערך שהתוכנה רוצה לזכור, כמו צנצנת עם תווית על מדף. להצהיר על משתנה פירושו להודיע לתוכנה שהצנצנת קיימת לפני שמשתמשים בה. “משתנה שלא הוצהר” הוא צנצנת שהקוד מושיט אליה יד בלי שמישהו הניח אותה על המדף.
מה השארנו בחוץ
בעורך אמיתי יש גם קבצים, תיקיות, תפריטים וטרמינל, החלון שמקלידים בו פקודות. את כל זה השארנו בחוץ. התיבה היא רק המקום שבו כותבים את הקוד, כי שם התלמיד מבלה את רוב הזמן.
עוד דבר שהקורס מלמד
במסלול ה־JavaScript יש פרק על כלים, עם שיעור על עורכים שמזכיר את Visual Studio Code ומציע תוסף שמצביע על בעיות סגנון לפני שמריצים את הקוד. כך התיבה והשיעור אומרים אותו דבר משני הצדדים.
מה זה לינטר?
לינטר (Linter) הוא עוזר שקורא את הקוד בלי להריץ אותו ומצביע על טעויות ועל הרגלים לא מסודרים, כמו בודק איות שמסמן מילים בקו. תוסף הוא תוכנה קטנה שמוסיפים לעורך כדי לתת לו יכולת חדשה, והתוסף שהשיעור מציע הוא לינטר לסגנון.
שום דבר בסיפור הזה לא מתאים לחיפוש.
עוד סיפורי מקרה לקריאה
משיחות וידאו לקורס שלומדים בו לבדהתחלנו ללמד אדם אחד בשיחות וידאו. הפורמט לא התאים, אז בנינו משהו שקוראים, מנסים, בודקים וממשיכים הלאה, בקצב של מי שלומד.
בודקים את התשובה במכשיר של התלמידכשלוחצים על הכפתור, הדפדפן בודק את הקוד בתוך המרחב המבודד שלו. ראינו שאפשר, בנינו מנוע בדיקות משלנו, ובנינו אותו מחדש כשגילינו שהוא סימן תשובות נכונות כשגויות.