הרצת JavaScript במסוף

Kayce Basques

במדריך האינטראקטיבי הזה נסביר איך להריץ JavaScript במסוף כלי פיתוח ל-Chrome. במאמר איך מתחילים לרשום הודעות ביומן מוסבר איך לרשום הודעות ביומן במסוף. במאמר תחילת העבודה עם ניפוי באגים ב-JavaScript מוסבר איך להשהות קוד JavaScript ולעבור עליו שורה אחר שורה.

איור 1. המסוף.

סקירה כללית

המסוף הוא REPL, כלומר Read, Evaluate, Print, and Loop (קריאה, הערכה, הדפסה ולולאה). הוא קורא את ה-JavaScript שמקלידים בו, מעריך את הקוד, מדפיס את התוצאה של הביטוי ואז חוזר לשלב הראשון.

הגדרת כלי הפיתוח

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

1. מקישים על Command+Option+J (ב-Mac) או על Control+Shift+J (ב-Windows, ב-Linux וב-ChromeOS) כדי לפתוח את המסוף, ממש כאן בדף הזה.

   

   איור 2. ההדרכה הזו בצד שמאל וכלי הפיתוח בצד ימין.

הצגה ושינוי של JavaScript או DOM בדף

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

1. שימו לב לטקסט שמופיע בכפתור שלמטה.

   שלום עולם!

2. מקלידים document.getElementById('hello').textContent = 'Hello, Console!' במסוף ומקישים על Enter כדי להעריך את הביטוי. שימו לב איך הטקסט בתוך הלחצן משתנה.

   

   איור 3. כך נראה המסוף אחרי הערכת הביטוי שלמעלה.

   מתחת לקוד שהערכתם, מופיע הסמל "Hello, Console!". נזכרים ב-4 השלבים של REPL: קריאה, הערכה, הדפסה, לולאה. אחרי שהקוד מוערך, REPL מדפיס את התוצאה של הביטוי. לכן, "Hello, Console!" חייב להיות התוצאה של החישוב של document.getElementById('hello').textContent = 'Hello, Console!'.

הפעלת JavaScript שרירותי שלא קשור לדף

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

1. מקלידים 5 + 15 במסוף. התוצאה 20 תופיע מתחת לביטוי (אלא אם חישוב הביטוי ייקח יותר מדי זמן).
2. מקישים על Enter כדי להעריך את הביטוי. התוצאה של הביטוי מודפסת במסוף מתחת לקוד. איור 4 שלמטה מראה איך המסוף אמור להיראות אחרי הערכת הביטוי הזה.

3. מקלידים את הקוד הבא במסוף. כדאי להקליד אותו, תו אחר תו, במקום להעתיק ולהדביק אותו.

   function add(a, b=20) {
     return a + b;
   }
   

4. עכשיו, מפעילים את הפונקציה שהגדרתם.

   add(25);
   

   

   איור 4. כך נראה המסוף אחרי הערכת הביטויים שלמעלה.

   הפונקציה add(25) מחזירה את הערך 45 כי כשקוראים לפונקציה add בלי ארגומנט שני, ערך ברירת המחדל של b הוא 20.

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

השלבים הבאים

במאמר הרצת JavaScript מוסבר על תכונות נוספות שקשורות להרצת JavaScript במסוף.

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

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

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

• במקום להקליד document.querySelector() כדי לבחור אלמנט, אפשר להקליד $(). התחביר הזה מבוסס על jQuery, אבל הוא לא jQuery. זה רק כינוי לכתובת document.querySelector().
• debug(function) בעצם מגדיר נקודת עצירה בשורה הראשונה של הפונקציה.
• ‫keys(object) מחזירה מערך שמכיל את המפתחות של האובייקט שצוין.

כדי לראות את כל הפונקציות הנוחות, אפשר לעיין בהפניה ל-Console Utilities API.