כיצד להשתמש במקראת הפיתוח של JavaScript

מדריכים
JavaScript

הקדמה

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

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

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

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

עבודה עם המסוף בדפדפן

פיירפוקס

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

בחרו כלים נוספים. עם זאת, לחצו על פריט כלים לפיתוח רשת.

לאחר שתעשו כן, תפתח מגש בחלק התחתון של חלון הדפדפן שלכם:

ניתן גם להיכנס לתיבת הכלים באמצעות הקיצור במקלדת CTRL + SHIFT + K בלינוקס ווינדוס, או COMMAND + OPTION + K בmacOS.

עכשיו שפתחתם את תיבת הכלים, תוכלו להתחיל לעבוד בה ב-JavaScript.

כרום

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

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

תוכל גם להיכנס לקונסולת JavaScript באמצעות הקיצור דרך במקלדת CTRL + SHIFT + J בלינוקס או בווינדוס, או COMMAND + OPTION + J במערכת ההפעלה macOS, וזה יביא את המוקד מיידית לקונסולה.

עכשיו שהגעת לקונסולה, אתה יכול להתחיל לעבוד בתוכה ב-JavaScript.

עבודה בקונסולה

בתוך הקונסולה, תוכל להקליד ולבצע קוד JavaScript.

התחל עם התראה שמדפיסה את המחרוזת Hello, World!: 

  1. alert("Hello, World!");

כאשר אתה לוחץ על מקש ENTER לאחר שורת ה-JavaScript שלך, חלון התראה יופיע בדפדפן שלך:

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

במקום הופעת ההתראות הקופצות שעליך ללחוץ מחוצה, אתה יכול לעבוד עם JavaScript על ידי התחברות לקונסול עם console.log.

כדי להדפיס את מחרוזת Hello, World!, הקלד את הפקודה הבאה בקונסול: 

  1. console.log("Hello, World!");

בתוך הקונסול, תקבל את הפלט הבא: 

Output
Hello, World!

אתה יכול גם לבצע חישובים חשבוניים בקונסול: 

  1. console.log(2 + 6);



Output
8

אתה יכול גם לנסות חישובים מורכבים יותר: 

  1. console.log(34348.2342343403285953845 * 4310.23409128534);



Output
148048930.17230788

בנוסף, אתה יכול לעבוד עם שורות מרובות עם משתנים: 

  1. let today = new Date();

  2. console.log("Today's date is " + today);



Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

אם נדרש לך לשנות פקודה שהעברת דרך הקונסול, אתה יכול להקליד את החץ למעלה (↑) במקלדת כדי לאחזר את הפקודה הקודמת. זה יאפשר לך לערוך את הפקודה ולשלוח אותה שוב.

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

עבודה עם קובץ HTML

באפשרותך לעבוד בהקשר של קובץ HTML או דף שנוצר דינמית בקונסול. זה מספק לך הזדמנות לנסות קוד JavaScript בהקשר של HTML, CSS, ו-JavaScript קיימים.

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

קח מסמך HTML, כמו הקובץ index.html הבא, כדי להבין איך להשתמש בקונסול כדי לשנות אותו. בעורך טקסט המועדף עליך, צור קובץ index.html והוסף את השורות הבאות של HTML:

index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

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

פתח את הקונסול והתחל לעבוד עם JavaScript כדי לשנות את הדף. התחל על ידי שימוש ב-JavaScript כדי להכניס כותרת ל-HTML.

  1. let today = new Date();

  2. document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

תקבל את הפלט הבא בקונסול:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

הדף שלך צריך להיות דומה לדוגמא הבאה:

אתה יכול לשנות את הסגנון של הדף, כמו צבע הרקע:

  1. document.body.style.backgroundColor = "lightblue";



Output
"lightblue"

כמו גם את צבע הטקסט על הדף:

  1. document.body.style.color = "white";



Output
"white"

עכשיו הדף שלך אמור לחשוף משהו דומה לזה:

מכאן, תוכל ליצור אלמנט פסקה <p>:

  1. let p = document.createElement("P");

עם האלמנט הזה שנוצר, תוכל להמשיך וליצור צומת טקסט שיכול להיות מוסף לפסקה:

  1. let t = document.createTextNode("Paragraph text.");

הוסף את צומת הטקסט על ידי הוספתו למשתנה p:

  1. p.appendChild(t);

וסופסוף, הוסף את p עם אלמנט הפסקה <p> שלו וצומת הטקסט המוסף אל המסמך:

  1. document.body.appendChild(p);

כאשר תסיים את השלבים הללו, הדף ה-HTML שלך index.html יכלול את האלמנטים הבאים:

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

הבנת כלי פיתוח אחרים

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

DOM – מודל אובייקט של מסמך

כל פעם שעמוד אינטרנט מוטען, הדפדפן שבו הוא נוצר יוצר מודל אובייקט של המסמך, או DOM.
D O M (מודל אובייקט של מסמך), או DOM, של העמוד.

ה-DOM הוא עץ של אובייקטים ומציג את הרכיבים של HTML בתצוגה היררכית. עץ ה-DOM זמין לצפייה בתוך חלון המאתר ב־Firefox או בחלון הרכיבים ב־Chrome.

הכלים הללו מאפשרים לך לבדוק ולערוך אלמנטי DOM וגם לזהות את ה-HTML הקשור לאספקט מסוים של דף מסוים. ה-DOM יכול לספק לך מידע אם קטע טקסט או תמונה כוללים מאפיין ID ויכול לעזור לך לקבוע מהו ערך המאפיין הזה.

הדף ששינית למעלה יציג תצוגת DOM דומה לזו לפני טעינה מחדש של הדף:

בנוסף, תראה סגנונות CSS בפאנל צד או מתחת לפאנל DOM, שמאפשר לך לראות אילו סגנונות מיושבים במסמך HTML או דרך גיליון סגנונות CSS. לדוגמה, שים לב מה כולל סגנון ה-BODY בדף הדוגמה שלך ב-Inspector של Firefox:

כדי לערוך אלמנט DOM בזמן אמת, עשה קליק כפול על אלמנט נבחר ובצע שינויים. לדוגמה, תוכל לשנות תגית <h1> ולהפוך אותה לתגית <h2>.

כמו עם ה-Console, אם תטען מחדש את הדף תחזור למצב המקורי של מסמך ה-HTML ששמרת.

רשת

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

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

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

עיצוב רגיש

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

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

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

מסקנה

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

כדי ללמוד עוד על JavaScript, ניתן לקרוא על סוגי נתונים, או על ספריות jQuery או D3.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console