מדריכים ל-JavaScript - חלק א' | מבוא ל-JavaScript

יושב אהלים

שלום וברכה, להלן חלק א’ במדריך JavaScript.

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

אז ראשית, מה זה JavaScript?
JavaScript נוצר בתחילה כדי “להפוך את דפי האינטרנט לחיים יותר”.

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

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

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

למה זה נקרא Java Script?
כאשר JavaScript נוצר, בהתחלה היה לו שם אחר: “LiveScript”. אבל ג’אווה הייתה מאוד פופולרית באותה תקופה, אז הוחלט שמיקום שפה חדשה כ"אח צעיר" של ג’אווה יעזור.
אך ככל שג’אווה סקריפט התפתחה, JavaScript הפכה לשפה עצמאית לחלוטין עם מפרט משלה הנקרא ECMAScript , ועכשיו אין לה שום קשר לג’אווה בכלל.

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

V8 - בכרום ובאופרה.
SpiderMonkey - בפיירפוקס.
ישנם שמות קוד נוספים כמו “צ’אקרה” עבור “JavaScriptCor”, “ניטרו” ו-“SquirrelFish” לספארי וכו’.

כדאי לזכור את המונחים שלמעלה מכיוון שהם משמשים במאמרי מפתחים באינטרנט. גם אנחנו נשתמש בהם. לדוגמה, אם “תכונה X נתמכת על ידי V8”, אז זה כנראה עובד בכרום ובאופרה.

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

אז מה JavaScript בדפדפן יכול לעשות?
JavaScript מודרני היא שפת תכנות יחסית “בטוחה”. היא אינה דורשת גישה ברמה נמוכה לזיכרון או למעבד, מכיוון שהיא נוצרה בתחילתה עבור דפדפנים שאינם דורשים זאת.
היכולות של JavaScript תלויות מאוד בסביבה שבה היא פועלת. לדוגמה, Node.js תומך בפונקציות המאפשרות ל-JavaScript לקרוא/לכתוב קבצים פרטיים ומידע אישי, לבצע בקשות רשת וכו’.
JavaScript בדפדפן יכול לעשות כל מה שקשור למניפולציה של דפי אינטרנט, אינטראקציה עם המשתמש ושרת האינטרנט.
לדוגמה, JavaScript בדפדפן מסוגל ל:

הוספת HTML חדש לעמוד, שינוי התוכן הקיים, שינוי סגנונות.
להגיב לפעולות המשתמש, לרוץ בלחיצת עכבר, לעקוב אחר תנועות עכבר, לחיצות מקשים במקלדת וכד’.
לשלוח בקשות דרך הרשת לשרתים מרוחקים, להוריד ולהעלות קבצים (מה שנקרא טכנולוגיות AJAX ו- COMET ).
לקבל לשלוח ולנתח קוקיז (Cookies), לשאול שאלות את המבקרים באתר, להציג הודעות.
לזכור את הנתונים בצד הלקוח לגלישה הבאה שלו (“באמצעות ה-אחסון מקומי”).

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

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

בדרך כלל אין תיאום בין כרטיסיות/חלונות שונים כשתיהם משתמשים ב-JavaScript אבל לפעמים הם עושים את זה, למשל כאשר חלון אחד משתמש ב- JavaScript כדי לפתוח את השני. אך גם במקרה זה, JavaScript מדף אחד אינו יכול לגשת לשני אם הוא בא מאתרים שונים (מתחום (דומיין), פרוטוקול (בדרך כלל HTTP/S) או פורטמט (בדר"כ 443\80)), כדי לתקשר בין שתי הדפים\החלונות, שני הדפים חייבים להסכים לחילופי נתונים, זה נקרא “מדיניות זהה מקור”. והם חייבים להכיל קוד JavaScript מיוחד לתקשורת בין 2 חלונות. נסקור את זה במדריך.
מגבלה זו היא, שוב, לבטיחות המשתמש.
JavaScript יכול לתקשר בקלות דרך הרשת לשרת שממנו הגיע הדף הנוכחי. אבל היכולת שלו לקבל נתונים מאתרים/דומיינים אחרים מוגבלת. למרות שזה אפשרי, אבל זה דורש הסכמה מפורשת (המבוטאת בכותרות HTTP) מהצד המרוחק. שוב, זו מגבלה בטיחותית.
מגבלות כאלה אינן קיימות אם נעשה שימוש ב-JavaScript מחוץ לדפדפן, למשל בשרת. דפדפנים מודרניים מאפשרים גם תוספים/הרחבות שעשויים לבקש הרשאות מורחבות.

מה מייחד את JavaScript?
ישנם לפחות שלושה דברים מדהימים ב- JavaScript:

אינטגרציה (שילוב) מלאה עם HTML/CSS.
קל ופשוט ויכול לבצע דברים גדולים
מציע תמיכה בכל הדפדפנים הגדולים (כגון: כרום, פיירפוקס, ספארי, אדג וכד’) ומופעל כברירת מחדל.
JavaScript היא שפת התכנות היחידה שמשלבת את שלושת הדברים הללו.
וזה מה שמייחד את JavaScript. ולכן זה הכלי הנפוץ ביותר ליצירת ממשקי דפדפן.
עם זאת, JavaScript מאפשרת גם ליצור שרתים, יישומים ניידים וכו '.

שפות חיצוניות שמשתלבות JavaScript:
התחביר של JavaScript אינו מתאים לצרכים של כולם. אנשים שונים רוצים תכונות שונות. וזה צפוי, כי יש פרויקטים ודרישות שונות עבור כל אחד.
אז לאחרונה הופיעו שפע של שפות חדשות, שמועברות (מומרות) ל-JavaScript לפני שהן פועלות בדפדפן.
כלים מודרניים הופכים את הטרנספילציה למהירה ושקופה, ולמעשה מאפשרים למפתחים לקודד בשפה אחרת ולהמיר אותו אוטומטית “מתחת למכסה המנוע”.
דוגמאות לשפות כאלה:
CoffeeScript הוא “סוכר תחבירי” עבור JavaScript. הוא מציג תחביר קצר יותר, ומאפשר לכתוב קוד ברור ומדויק יותר…
TypeScript מתרכז בהוספת “הקלדת נתונים קפדנית” כדי לפשט את הפיתוח והתמיכה של מערכות מורכבות. זה פותח על ידי מיקרוסופט.
Flow מוסיף גם הקלדת נתונים, אך בצורה אחרת. פותח על ידי פייסבוק.
Dart היא שפה עצמאית שיש לה מנוע משלה שפועל בסביבות שאינן דפדפנים (כמו אפליקציות לנייד), אך גם ניתנת להעברה ל-JavaScript. פותח על ידי גוגל.
Brython הוא Transpiler Python ל-JavaScript המאפשר כתיבת יישומים ב-Python ללא JavaScript.
Kotlin היא שפת תכנות מודרנית, תמציתית ובטוחה שיכולה לכוון לדפדפן או ל-Node.
יש עוד. כמובן שגם אם נשתמש באחת השפות שהועברו, עלינו לדעת גם JavaScript כדי להבין באמת מה אנו עושים.

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

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

שלמה

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