הרצת קטעי קוד של JavaScript

קייס בסקית
קייס בסקית
Twitter GitHub תקלה
סופיה אמליאנובה
סופיה אמליאנובה
GitHub

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

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

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

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

זהו קוד המקור של קטע הקוד שמתעד הודעה כלשהי ומחליף את גוף ה-HTML של דף הבית ברכיב <p> שמכיל את ההודעה:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

כשלוחצים על הלחצן הפעלה. הפעלה, חלונית ההזזה של Console נפתחת ומציגה את ההודעה Hello, Snippets! על כך שיומני הטקסט והתוכן של הדף משתנים.

דף הבית לאחר הפעלת קטע הקוד.

פתיחת חלונית קטעי הקוד

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

  1. עוברים אל מקורות > עוד כרטיסיות. > קטעי קוד.

    תפריט הכרטיסיות &#39;עוד&#39; בחלונית &#39;מקורות&#39;.

  2. מתפריט הפקודות:

    1. מקישים על Control+Shift+P (Windows/Linux) או Command+Shift+P (Mac) כדי לפתוח את תפריט Command.
    2. מתחילים להקליד Snippets, בוחרים באפשרות הצגת קטעי טקסט ומקישים על Enter.

    בוחרים באפשרות &#39;הצגת קטעי קוד&#39; בתפריט הפקודות.

בחלונית מקורות>קטעי טקסט מוצגת רשימה של קטעי טקסט ששמרתם. הם ריקים בדוגמה זו.

חלונית קטעי מידע ריקה.

יצירת נכסי מידע מובנה

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

החלונית קטעי טקסט ממיינת את קטעי הטקסט לפי סדר אלפביתי.

יצירת תקציר בחלונית 'מקורות'

  1. פותחים את החלונית קטעי טקסט.
  2. לוחצים על קטע קוד חדש. קטע קוד חדש.

  3. מזינים שם לקטע הקוד ומקישים על Enter כדי לשמור אותו.

    מתן שם לקטע קוד.

יצירת קטע קוד מתפריט הפקודות

  1. מתמקדים במקום כלשהו בתוך כלי הפיתוח.
  2. מקישים על Control+Shift+P (Windows/Linux) או Command+Shift+P (Mac) כדי לפתוח את תפריט Command.

  3. מתחילים להקליד Snippet, בוחרים באפשרות יצירת קטע קוד חדש ומקישים על Enter כדי להריץ את הפקודה.

    בוחרים באפשרות &#39;יצירת קטע קוד חדש&#39; בתפריט הפקודה.

אם רוצים לתת לקטע הקוד החדש שם מותאם אישית, צריך לעיין בקטע שינוי שם של קטעי טקסט.

עריכה של קטעי טקסט

  1. פותחים את החלונית קטעי טקסט.

  2. בחלונית קטעי מידע, לוחצים על שם קטע הקוד שרוצים לערוך. החלונית מקורות פותחת אותה בעורך הקוד.

    קטע טקסט נפתח בעורך הקוד.

  3. משתמשים בעורך הקוד כדי לערוך את הקוד בקטע הקוד. כשמופיעה כוכבית ליד השם של קטע הטקסט, סימן שעדיין לא שמרתם את השינויים.

    כוכבית ליד שם קטע הקוד שמציינת קוד שלא נשמר.

  4. כדי לשמור, מקישים על Control+S (Windows/Linux) או Command+S (Mac).

הרצת קטעי קוד

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

הרצת קטע טקסט בחלונית 'מקורות'

  1. פותחים את החלונית קטעי טקסט.
  2. לוחצים על השם של קטע הקוד שרוצים להפעיל. החלונית מקורות פותחת אותה בעורך הקוד.

  3. לוחצים על הפעלה. Run בסרגל הפעולות שבתחתית העורך, או מקישים על Control+Enter (ב-Windows או ב-Linux) או Command+Enter (ב-Mac).

    הלחצן &#39;הפעלה&#39;.

מריצים קטע טקסט מתפריט הפקודות

  1. מתמקדים במקום כלשהו בתוך כלי הפיתוח.
  2. לוחצים על Control+O (Windows/Linux) או Command+O (Mac) כדי לפתוח את תפריט Command.

  3. מקלידים את התו ! ואחריו את השם של קטע הקוד שרוצים להפעיל.

    הפעלת קטע טקסט מתוך התפריט &#39;פתיחה&#39;.

  4. מקישים על Enter כדי להפעיל את קטע הקוד.

שינוי השמות של קטעי הקוד

  1. פותחים את החלונית קטעי טקסט.
  2. לוחצים לחיצה ימנית על שם הקטע ובוחרים באפשרות שינוי שם.

מחיקת קטעי הטקסט

  1. פותחים את החלונית קטעי טקסט.
  2. לוחצים לחיצה ימנית על שם קטע הקוד ובוחרים באפשרות הסרה.