מה זה JavaScript?

 

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

Prerequisites: ידע בסיסי בשימוש במחשב וכן הבנה בסיסית של HTML ו-CSS.
Objective: להכיר מעט את JavaScript, מה היא יכולה לעשות, ואיך היא קשורה לאתר אינטרנט.

הגדרה ממבט על

JavaScript היא שפת תכנות (שפת סקריפט) אשר מאפשרת לכם ליישם דברים מורכבים על גבי דפי האינטרנט - בכל פעם שדף אינטרנט מבצע משהו דינאמי כגון עדכון תכנים באופן עיתי, הצגת מפה אינטרקאטיבית, אנימציות שונות דו ותלת מימדיות וכד׳ (בניגוד לדף אינטרנט סטטי שרק מציג תוכן ללא שינוי כלשהו בדף), ניתן להיות בטוח ש JavaScript לוקחת בכך חלק. JavaScript היא החלק השלישי ב-״עוגת״ טכנולוגיות ה-web כאשר את שתי הטכנולוגיות האחרות למדנו בחלקים אחרים של איזור הלמידה (HTML and CSS).   

  • HTML היא שפת סימון תגיות (ואינה שפת תכנות) שאנו משתמשים בה על מנת לבנות את תוכן הדף ולהעניק לו משמעות, לדוגמא, הגדרת פסקאות, כותרות, טבלאות מידע, סרגל ניווט וכן הטמעת תמונות ווידאו באתר.
  • CSS היא בעצם סט של כללים המאפשר לנו להחיל כללי עיצוב שונים על תוכן דף ה-HTML בדרכים שונות כגון: רקע, גופן, צורת הפריסה של התוכן על גבי הדף, וכד׳. 
  • JavaScript היא שפת התכנות אשר מאפשרת לנו ליצור באופן דינאמי תוכן, לעדכן תוכן באופן דינאמי, לשלוט במולטימדיה, להנפיש תמונות, ועוד ועוד. 

שלושת השפות בנויות כשכבות אחת על גבי השנייה, כפי שניתן לראות באיור למעלה. ננסה להבין זאת באמצעות טקסט פשוט. נסמן את הטקסט באמצעות HTML, על מנת לתת לו מבנה ומטרה. בדוגמא הנוכחית למטה, סימנו את הטקסט באלמנט מסוג פסקה <p>.

<p>Player 1: Chris</p>

לאחר מכן, נוסיף כמה כללי CSS  על מנת לעצב את האלמנט בצורה מסויימת:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

לבסוף, נוסיף קוד JavaScript על מנת להעניק דינאמיות והתנהגות מסוימת:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

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

JavaScript יכולה לבצע הרבה יותר - נעמיק בכך בהמשך הלמידה.

אז מה ניתן לבצע עם JavaScript?

הבסיס של JavaScipt מכיל כמה ממאפייני התכנות הנפוצים, אשר מאפשרים לנו לבצע פעולות כגון: 

  • אחסון ערכים במשתנים - בדוגמא לעיל, ביקשנו מהמשתמש שיכניס את שמו ולאחר מכן, אחסנו את השם שהמשתמש הזין במשתנה בשם name.
  • ביצוע פעולות שונות על טקסט (ובתכנות ״מחרוזת״) - בדוגמא לעיל, לקנו את המחרוזת ״:Player 1״ ועליה וחיברנו אותה (שורה 8) למשתנה  name.
  • הרצת קוד כתגובה לאירועים מסויימים המתרחשים על גבי דף האינטרנט - השתמשו באירוע (Event) מסוג  click על מנת לאתר התרחשות של לחיצת עכבר, ובתגובה להתרחשות אירוע זה, הרצנו קוד אשר מעדכן את תוכן הטקסט.
  • ועוד הרבה יותר. 

דבר מעניין נוסף הוא הפונקציונליות אשר בנויה על גבי הבסיס של שפת JavaScript. אותם API (Application Programming Interfaces ) מעניקים לנו אפשרויות משמעותיות אשר נוכל להשתמש בהם כאשר אנו כותבים את קוד ה-JavaScript שלנו. API בתרגום לעברית זה ״ממשק תכנות יישומים״.  

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

באופן כללי, API מחולקים לשתי קטגוריות:

API של הדפדפן (Browser APIs) - אלו API מובנים בתוך דפדפן האינטרנט, ומאפשרים לקבל מידע/נתונים מסביבת העבודה של המשתמש או לבצע דברים שימושים מורכבים. לדוגמא: 

  • The DOM (Document Object Model) API מאפשר לנו לבצע מניפולציות ופעולות שונות על HTML ו-CSS כגון יצירה, שינוי, מחיקה, עיצוב של דף האינטרנט באופן דינאמי וכד׳. כך, בכל פעם שאנו רואים חלונית קופצת על גבי דף, או תוכן חדש שמוצג בדף האינטרנט, זו פעולה של ה-DOM.
  • The Geolocation APIמאפשר לנו לקבל מידע גיאוגרפי. כך בעצם  Google Maps מאתר את המיקום שלנו ומציג אותו על גבי המפה.
  • The Canvas and WebGL APIs מאפשרים לנו ליצור גרפיקות מונפשות ואנימציות, דו מימדיות ותלת מימדיות. ניתן לראות דוגמאות מדהימות שאנשים יצרו באמצעותו.  technologies —see Chrome Experiments and webglsamples.
  • Audio and Video APIs כמו HTMLMediaElement and WebRTC  מאפשרים לנו לבצע דברים מעניינים עם מולטימדיה, כגון להפעיל וידאו ואודיו בדף עצמו, או ליצור וידאו באמצעות שימוש במצלמה של המשתמש (או של משתמש אחר) ועוד.  ראו דוגמא פשוטה על מנת להבין את הרעיון ב-Snapshot demo.

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

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

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

  • Twitter API מאפשר לנו לדוגמא להציג את הציוצים האחרונים שלנו באתר שלנו.
  • Google Maps API וכן OpenStreetMap API מאפשרים לנו להטמיע מפות באתר שלנו וכן מתן הגדרות מסויימות למפות אלו.

לתשומת לב: APIs אלו הם נושאים מתקדמים יחסית, ואנחנו לא נגע בהם במודול זה. ניתן למצוא מידע נוסף ב- Client-side web APIs module.

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

מה JavaScript עושה על גבי דף האינטרנט?

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

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

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

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

מכיוון ששימוש נפוץ ועיקרי ב-JavaScript הוא האפשרות להעניק דינאמיות ולשנות HTML ו-CSS באמצעות Document Object Model API, מדובר בדבר הכרחי על מנת לאפשר זאת, שכן אם JavaScript תרוץ לפני שרכיבי ה-HTML וכללי העיצוב של CSS נטענו במלואם, עלולים להתרחש שגיאות באותה דינאמיות שביקשנו להעניק באמצעות JavaScript.

אבטחה בדפדפן

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

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

סדר הריצה של JavaScript 

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

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

שורה 1: בקוד זה אנחנו בעצם מגדירים משתנה מסוג const (נרחיב עליו בהמשך) וקוראים לו בשם para, ובאמצעות ה-DOM אנחנו בוחרים את האלמנט HTML הראשון מסוג p.

שורה 2: אנו מצמידים למשתנה שהגדרנו מתודה בשם event listener (נרחיב על כך בהמשך) שבעצם ״תקשיב״ כאשר יתרחש אירוע מסוג לחיצה על ה-para, כלומר, על האלמנט p, קוד בלוק שנקרא updateName ירוץ. בלוק קוד זה הניתן לשימוש חוזר נקרא ״פונקציה״ והוא מוגדר בשורות 5-8. 

שורות 5-8: הגדרה של הפונקציהupdateName. פונקציה זו מבקשת מהמשתמש להכניס את שמו ומשנה את התוכן של para לשמו של המשתמש ביחד עם המחרוזת ״:Player 1״. 

אם נשנה את הסדר של שורות הקוד, לדוגמא, נחליף בין שורות 1 ו-3, אנו נקבל שגיאה בקונסולה של הדפדפן מסוג:  TypeError: para is undefined. זה אומר שכאשר אנו מבצעים להוסיף את  event listener- האובייקט para עדין לא קיים ולכן לא נוכל להוסיף לו event listener.

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

קוד מהודר מול קוד מפורש

יכול להיות שנתקלתם במושגים כגון שפה מפורשת או שפה מקומפלת/מהודרת בהקשר של תכנות ופיתוח תוכנה.

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

לעומת זאת, שפות ״מקומפלות״ או שפות ״מהודרות״ נדרשות לבצע שינוי כלשהו לתבנית אחרת לפני שהן יוכלו לרוץ על ידי המחשב. לדוגמא,  C/C++ מקומפלות לשפת assembly לפני הרצה על ידי המחשב. 

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

קוד צד-לקוח מול קוד צד-שרת

ככל הנראה נתקלת במושגים קוד צד-לקוח (client-side) וקוד צד-שרת (server-side), במיוחד בהקשר של פיתוח Web. קוד צד-לקוח הוא קוד שרץ על גבי המחשב של המשתמש - כאשר צופים בדף אינטרנט, קוד צד-לקוח של דף האינטרנט יורד, מורץ ומוצג על ידי הדפדפן. במודול זה אנו נגע בעיקר ב- JavaScript של צד-לקוח.

קוד צד-שרת מצד שני, ​​רץ על גבי השרת, והתוצאה שלו מורדת ומוצגת בדפדפן. דוגמאות לשפות פיתוח קוד צד-שרת כוללות בין היתר את PHP, Python, Ruby, ASP.NET וגם...JavaScript. כן, JavaScript יכולה לשמש גם כשפת פיתוח עבור צד-שרת. לדוגמא, בסביבת הפיתוח הפופולרית Node.js. ניתן להרחיב את הלמידה על JavaScript כשפת קוד-שרת בנושא הייעודי שלנו Dynamic Websites – Server-side programming

קוד דינאמי מול קוד סטאטי

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

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

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

דף אינטרנט שאין לו שום דינאמיות או עדכוני תוכן מכונה כדף סטאטי - הוא מציג למשתמש את אותו תוכן כל הזמן.  

כיצד נוסיף JavaScript לדף האינטרנט שלנו?

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

בעוד ש-CSS משתמש באלמנט <link> על מנת להחיל גיליונות עיצוב חיצוניים ובאלמנט <style> על מנת להחיל גיליונות עיצוב פנימיים, JavaScript צריכה אלמנט אחד - <script>. נבין לעומק כיצד זה עובד: 

Internal JavaScript (כאלמנט בתוך קובץ ה-HTML)

  1. אנא צרו העתק על גבי המחשב שלך של קובץ הדוגמא שלנו:  apply-javascript.html.
  2. פתחו את הקובץ בדפדפן ובעורך הקוד. אתם תראו ש-HTML יצר דף אינטרנט פשוט המכיל כפתור שניתן ללחוץ עליו.
  3. בעורך הקוד - הוסיפו את הקוד הבא בתוך ה-head, לפני התגית </head>:
  4. <script>
    
      // JavaScript goes here
    
    </script>
  5. כעת, נוסיף קצת קוד JavaScript בתוך האלמנט <script> על מנת שהדף יבצע משהו מעניין. לשם כך, הוסיפו את הקוד הבא מתחת לכיתוב:  " :JavaScript goes here line //״
  6. document.addEventListener("DOMContentLoaded", function() {
      function createParagraph() {
        let para = document.createElement('p');
        para.textContent = 'You clicked the button!';
        document.body.appendChild(para);
      }
    
      const buttons = document.querySelectorAll('button');
    
      for(let i = 0; i < buttons.length ; i++) {
        buttons[i].addEventListener('click', createParagraph);
      }
    });
  7. שמרו את הקובץ ורעננו את הדפדפן - כעת אתם אמורים להבחין שכאשר אתם לוחצים על הכפתור, נוצרת כל פעם פסקה חדשה מתחת לפסקה הקודמת. 

לתשומת לב: אם הדוגמא לעיל לא עובדת לכם, בדקו האם שמרתם את הקובץ בשם הנכון, האם יש לו סיומת html? האם הוספתם את האלמנט  <script>  ישר לפני תגית הסגירה </head> ? להזכירכם, JavaScript היא case sensitive, וזה יכול להיות מאוד מסתכל. שימו לב לדקויות.

לתשומת לב: תוכלו לראות את הגרסה הזו גם ב- GitHub בקישור  apply-javascript-internal.html  או כדף אינטרנט.

External JavaScript (קישור קובץ JavaScript חיצוני)

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

  1. ראשית, צרו קובץ חדש באותה תיקיה שבו נמצא ה-HTML בשם script.js - וודאו שיש לו את סיומת הקובץ js על מנת שהוא יזוהה כ-JavaScript.
  2. החליפו את האלמנט <script>  עם האלמנט  <script> :
    <script src="script.js" defer></script>
  3. בתוך קובץ script.js, הוסיפו את הקוד הבא:
    function createParagraph() {
      let para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
    
    const buttons = document.querySelectorAll('button');
    
    for(let i = 0; i < buttons.length ; i++) {
      buttons[i].addEventListener('click', createParagraph);
    }
  4. שמרו ורעננו את הדפדפן. זה עובד בדיוק אותו דבר כמו JavaScript פנימי, רק שכעת JavaScript נמצאת בקובץ חיצוני. באופן כללי, שמירת קוד JavaScript בקובץ חיצוני עדיפה בהיבט ארגון הקוד ושימוש חוזר שלו בכמה קבצי HTML. בנוסף, זה מאפשר לנו לקרוא את ה-HTML בצורה ברורה יותר.

לתשומת לב: ניתן לראות את הגרסה הזו של הקוד בקישור  apply-javascript-external.html וכ-דף אינטרנט.

Inline JavaScript handlers (בתוך אלמנט ספציפי בקובץ ה-HTML)

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

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

ניתן את את הקוד הבא:

לקוד זה יש את פונקציונליות זהה לקוד בשני החלקים הקודמים, כלומר, הוא מבצע בדיוק את אותו דבר, רק שאלמנט הכפתור - <button>  מכיל בתוכו onclick  על מנת לאפשר לפונקציה לרוץ כשהכפתור נלחץ.

בבקשה לא לבצע שימוש בשיטה זו. זה נחשב ל-bad practice ״לזהם״ את קובץ HTML יחד עם JavaScript ולא יעיל, שכן בשיטה זו צריך להוסיף ()onclick=״createParagraph״ לכל אחד מהכפתורים שיהיו בדף. 

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

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

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

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

שיטות לטעינת סקירפטים (Script)

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

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

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

document.addEventListener("DOMContentLoaded", function() {
  ...
});

זהו ״מאזין לאירוע״  - event listener, אשר ״מקשיב״ לאירוע של הדפדפן בשם ״DOMContentLoaded״. אירוע זה מעיד על כך שגוף ה-HTML, כל תוכן שנמצא בתוך תגית <body>  הועלה בשלמותו. כך, קוד JavaScript בתוך אותו בלוק לא ירוץ עד אשר האירוע יחל, ולכן השגיאה נמנעה. בהמשך הקורס, נרחיב על אירועים ומאזינים לאירועים. 

על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript באמצעות קובץ חיצוני, אנחנו משתמשים באפשרות יחסית חדשה של JavaScript, שהיא תכונה (attribute) בשם defer. שבעצם אומרת לדפדפן להמשיך לטעון את ה-HTML ברגע שהוא הגיע לתגית האלמנט <script>:

<script src="script.js" defer></script>

בשני המקרים, ה-HTML ייטען במקביל והקוד יעבוד. 

תשומת לב: במקרה של JavaScript הנטען מקובץ חיצוני, אנחנו לא השתמשנו באירוע DOMContentLoaded  מכיוון שתכונת ה-defer פתרה את הבעיה. יחד עם זאת, ניתן להשתמש ב-defer ב-JavaScript חיצוני בלבד. 

דרך מקובלת (ואינה נדרשת יותר) לפתור את הבעיה הזו, הייתה לשים את אלמנט ה-script שלנו ישר מתחת לתגית הסגירה של body. כלומר ישר מתחת לתגית <body/>כך שראשית ייטען כל ה-body. הבעיה עם פתרון זה הוא שטעינה/העברה של הסקריפט חסום לחלוטין עד אשר ה-HTML DOM נטען באופן מלא. באתרים גדולים עם כמות גדולה של JavaScript, זה יכול ליצור בעית ביצועים אשר גורמת להאטת האתר.

async and defer

בעיקרון יש  דרכים נוספות לעקוף את סוגיית חסימת הסקריפט - באמצעות — async and defer.

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

לדוגמא:

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

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

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

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

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

לסיכום:

  • אם הסקריפטים שלנו לא צריכים לחכות לקבצי סקריפטים אחרים והם יכולים לרוץ עצמאית, נשתמש ב-async.
  • אם הסקריפטים צריכים לחכות לקבצי סקריפטים אחרים ותלויים בה, נשתמש ב-defer ונסדר את הסקריפטים בדף בסדר שבו אנו רוצים להריץ אותם. 

הערות ב-JavaScript

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

יש שני סוגי הערות:

  • הערת בת שורה אחת, ונכתבת באמצעות הוספת התווים // :
    // I am a comment
  • הערת רבת שורות, הנכתבת בין התווים */  לתווים  /* :
    /*
      I am also
      a comment
    */

לדוגמא: 

// Function: creates a new paragraph and appends it to the bottom of the HTML body.

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page in an array format.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

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

לסיכום

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

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

במודול זה