Dev-Time

JavaScript Core – קצת על הליבה של השפה הפופולרית

הקדמה

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

דרישות ידע קודם:

HTML & CSS – ידע בסיסי

JavaScript – אובייקט,מערכים,משתנים. רקע בסיסי.

סביבת הרצה – דפדפן

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

אז מה זה אומר? ניקח לדוגמא את Google-Chrome – הדפדפן מרנדר את הHTML&CSS  , אבל כשמגיע לJavaScript, הדפדפן משתמש במנוע בשם V8, פיתוח של גוגל, זה מנוע שפותח בC++ שמריץ JavaScript ומתרגם את הקוד שלנו לשפה שהמחשב מבין, המנוע בנוי על חוקי השפה המקוריים שרשומים בECMAScript שזה בעצם החלטה מאוגדת איך אובייקט מתנהג, מערך, פונקציה וכדומה.

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

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

עכשיו נוכיח את זה !

נפתח תיקיה בשולחן העבודה בשם sandbox, ונפתח תיקיה עבור הפרויקט הראשון. משהו כזה : Desktop -> SandBox -> FirstJs .

בתיקיה החדשה ניצור קובץ index.html. ונוסיף תגיות בסיסיות בלבד.

נריץ את דף הindex.html בדפדפן chrome. ונפתח את ה- Developer Tools (f12), בלשונית console.

אני מזכיר לא כתבנו בכלל JavaScript ואפילו לא יצרנו קובץ.

נכתוב בConsole – את הדבר הבא: window ונלחץ enter.

לא כתבנו שורת קוד אחד של JavaScript אבל יש לנו אובייקט window שלא אנחנו יצרנו, מאיפה הוא מגיע?

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

ברגע שנתחיל לכתוב קוד הדפדפן בזמן טעינת הדף רואה את הקוד שלנו מעביר אותו למנוע הV8 הוא מריץ את הקוד נותן לקוד שלנו אובייקטים ויכולות(API) של הדפדפן ,

מתרגם את הקוד לשפה שמחשב יוכל להבין ומבצע את הקוד. מה זה אומר?!

כשנכתוב var a = 2; כתבנו קוד שלא משתמש ביכולות של הדפדפן וזה קוד טהור.

אבל שנכתוב משהו כזה – document.getElementById אנחנו משתמשים בפונקציה שלא קיימת בJavaScript הטהור(ECMAscript). המנוע של הדפדפן נותן לנו את היכולות האלה כשאנחנו מריצים את הקוד שלנו בסביבת דפדפן. ו

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

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

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

לידור אביטן – FullStack Developer

ליצירת קשר שלחו הודעה פרטית בלינקדאין

לידור אביטן

מפתח FullStack בחברת Intel-Security

3 comments

  • מדריך נחמד. אני לא יודע אם המאמרים שלכם עוברים הגהה לשונית, כך או כך שימו לב שחסרים קווים מפרידים – “ה-HTML”, והאקדמיה ללשון קבעה שהמילה “דוגמה” נכתבת באות ה’ בלבד (בדומה למילים אחרות שמקורן מארמית).

Follow

Get every new post delivered to your Inbox

Join other followers