הרצת JavaScript במסוף

Kayce Basques

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

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

סקירה

המסוף הוא REPL, הוא קורא את קוד ה-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;
   }
   

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

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) מחזירה מערך שמכיל את המפתחות של האובייקט שצוין.

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