הרצת JavaScript במסוף

קייס באסקית

Twitter GitHub Glitch

המדריך האינטראקטיבי הזה מראה איך להריץ JavaScript במסוף כלי הפיתוח ל-Chrome. במאמר תחילת העבודה עם Logging Messages מוסבר איך לרשום הודעות במסוף. קראו את המאמר תחילת העבודה עם ניפוי באגים ב-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. איך ה-Play Console נראה אחרי הערכת הביטוי שלמעלה.

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

מריצים JavaScript שרירותי שלא קשור לדף

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

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

3. צריך להקליד את הקוד הבא במסוף. נסו להקליד אותה, תו אחר תו, ולא להעתיק אותה ולהדביק אותה בהדבקה.

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

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

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

   add(25);
   

   

   איור 4. איך ה-Play Console נראה אחרי הערכה של הביטויים שלמעלה.

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

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

השלבים הבאים

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

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

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

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

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

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