הרצת JavaScript במסוף

Kayce Basques

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

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

סקירה כללית

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

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

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

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 של המסוף לשימוש.