מהי שפת JavaScript? מדריך מקיף לפי נושאים

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

שפת ההתנהגות של עולם הווב

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

עם שפת המבנה שפת HTML נגדיר, בדרך כלל, מבנים בדפי ווב, עם שפת JavaScript נגדיר, בדרך כלל, התנהגות למבנים כאלה בדפי ווב ועם שפת CSS נגדיר, בדרך כלל, עיצוב למבנים כאלה בדפי ווב.

פיתוח שפת JavaScript

שפת JavaScript פותחה בהשראת שפת C. לשפת JavaScript ליבה בשם EcmaScript המתעדכנת תדיר ובהתאם לכך לקסיקון ותחביר השפה מתעדכנים תדיר. אין קשר משמעותי בין שפת JavaScript לשפת Java והביטוי "Java" בתוך הביטוי "JavaScript" נבחר מטעמים שיווקיים כדי למשוך עניין בשפה אחרי שיצרו אותה לראשונה; אם כבר היה פחות מבלבל לקרוא לשפה EcmaScript על שם הליבה/מנוע שלה והקהילה המפתחת אותו.

שימושים בשפת JavaScript

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

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

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

הרצת קוד JavaScript

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

בכל הנוגע לפיתוח תוכנות ישירות על דף ווב (או אתר ווב), קוד מקור JavaScript יכול לרוץ בכל שלושת המצבים הכלליים (או השלבים) של דף ווב:

שלב הפירסור (parsing)
שלב הרינדור (rendering)
שלב המוכנות (הדף מוכן לגמרי לשימוש משתמש) ; זהו למעשה איוונט המוכנות

מאפיינים בולטים של שפת JavaScript

מאפיינים בולטים של שפת JavaScript הם למשל:

מערכת טיפוסים נרחבת
הבחנה בין טיפוס מערך לבין טיפוס אובייקט ג'אווהסקריפט (שני טיפוסים בעלי התנהגות דומה לעתים)
תכנות במגוון פרדיגמות
הבחנה נרחבת בין תכונות (properties) ומתודות (methods)
מתודות הדומות ללולאות
שליטה נרחבת על פלט בצד משתמש (בעיקר בדפדפן ווב)

לשפה מגוון ספריות המרחיבות את השפה בין היתר דרך פקודות המהוות קיצורי דרך לפקודות שבתחביר JavaScript רגיל ("ונילי" ← vanilla) היה ארוך משמעותית לכתובן אם כי באופן כללי ככל שמנוע EcmaScript משתכלל ומכיל בעצמו קיצורי דרך כאלה ספריות קיצורי דרך נעשות פחות רלוונטיות (דוגמה טובה היא ספריית jQuery שעם השנים הפכה פחות ופחות רלוונטית בהקשר זה).

לימודי פיתוח תוכנה בשפת JavaScript

המורה הראשון שלי ל JavaScipt היה Dave Mcfarland דרך המכללה האינטרנטית Treehouse ואני ממליץ על הקורסים שלו, של Joel Kraft ושל Guil Hernandez שם.

אני ממליץ ללמוד פיתוח בשפת JavaScript דרך מכללה אינטרנטית כגון Treehouse וכן להיעזר, במידת הצורך, בספר Eloquent JavaScipt מאת Marijn Haverbeke וכן בספרי מבוא מאת ד"ר אקסל ראושמאייר (Dr. Axel Rauschmayer).

מונחים חשובים בשיח על שפת JavaScript

ישנם כמה מונחים הזמינים במגוון רחב של שפות מחשב ואשר יש להם יישום נרחב גם בשפת JavaScript:

DOM
משתנה
השמה
תחום
השוואה
מערך
אובייקט
סינכרוניות
תכונה
מתודה
תכונת innerHTML
מתודת document.write()‎
כמו עם שפות רבות אחרות בשפה זו הבדל נוקשה בין השמה (=) לבין השוואה רפה (==) והשוואה נוקשה (===)

מה זה DOM בהקשר שפת JavaScript

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

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

נהוג להמשיל את ה DOM למעין עץ לוגי של מידע (מסמך הכולל לעתים גם מידע התנהגות קדמית ומידע עיצוב בנוסף לכך)

מה זה node של DOM?

המונח node משמש לתאר כל דבר שניתן לערוך ב DOM עצמו.
דוגמאות לדברים כאלה הן למשל:

אלמנט HTML
אטריבוט HTML (ואפשר שגם ערך שלו)
התכונה שנקראת textContent של אלמנט HTML מסוים
הערת HTML (כלומר מה שנקרא HTML comment)

מוטציית DOM

בפיתוח אתרי ווב בכלל ושפת JavaScript בפרט, מוטציית DOM אני מגדיר ככל שינוי ב DOM לאחר שזה נוצר (לאחר איוונט DOMContentLoaded).

ניתן "להאזין" או "לצפות" להתרחשות "מוטציות" כאלה (ואז להגיב בהתאם) עם רכיב תוכנה מובנה בשפת JavaScript המכונה MutationObserver אך גם בדרכים אחרות (כגון בדיקה אם התרחש איוונט מוגדר לאחר X זמן עם setTimeout() ועם addEventListener() ולהכין תגובה בתוך רכיב event handler.

מצב, איוונט ותגובה הם מונחים חשובים בשיח על התנהגות תוכנה ← כל איוונט הוא מצב אך לא כל מצב הוא איוונט שכן תוכנה עשויה להתחיל במצב מסוים שאיננו "איוונט" במובן הנפוץ של המונח

איך להריץ סקריפטיי JavaScript לצורך שינוי דף ווב

קוד JavaScript הוא בדרך כלל קוד "קדמי"; כלומר, כזה שמיועד לשנות את ההופעה או את ההתנהגות, למשל, של דף ווב באתר ווב כפי שהעמוד מופיע למשתמש לאחר טעינתו (מידע מקדימה לאחר טעינה של מידע מאחורה).

קוד JavaScript ניתן להריץ בשתי דרכים עיקריות:

הרצה דרך הקונסולה של דפדפן ווב (הקונסולה היא כלי הרצת פקודות שהוא למעשה חלק ממערך רחב יותר של כלי פיתוח מובנה דפדפן-ווב)
הרצה דרך תוסף דפדפן (כמו Tampermonkey ל-Chrome או Greasemonkey ל-Firefox)

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

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

שפת jQuery

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

השפה מכילה כמה פקודות המהוות "קיצורי דרך" לפקודות שב JavaScript (הפקודה ב jQuery היא אם כך מעין "קריאה" לקוד JavaScript מקורי ← "ונילי" ארוך יותר שנמצא ברקע, בקוד מקור של שפת jQuery).

נכון לשנת 2021 השימוש ב jQuery בדעיכה מתקדמת ← מכיוון ששפת JavaScript עצמה הולכת ונעשית יותר מופשטת, יעילה ונוחה לשימוש, jQuery הופכת מיותרת בהדרגה. להערכתי עד שנת 2025 השימוש ב jQuery אולי ידעך לחלוטין ויוחלף כללית ב JavaScript טהור ("ונילי").

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

סקריפט חסימת אתר ווב

סקריפט חסימת אתר ווב הינו סקריפט בשפת JavaScript המאפשר חסימת אתר לפי פקודת // @match לכדי תאימת כל ה URLs של אתר ווב נתון.

הסקריפט מתאים לדפדפן כרום נכון לשנת 2020.

// ==UserScript==
// @name         blocksite
// @match        *://*.example.com/*

// ==/UserScript==

(function() {
    'use strict';
    window.open("https://google.com/", "_self");
})();

הערות לפרק

ניתן להוסיף עוד פקודות // @match בכדי לתאום עוד אתרים מלבד "example.com" שכמובן מוטב להחליף ל domain אחר בכדי לחסום את כל דפיו

מה היא מתודת document.write()‎ בשפת JavaScript

המונח מתודת document.write()‎ משמש לתאר מתודת שפת JavaScript דרכה כותבים מידע למסמך DOM (כלומר, DOM document) חדש ← באותו חלון דפדפן ווב (כלומר, חלון דפדפן הווב עצמו לא ישתנה לאחר.
חלון דפדפן בהקשר זה יכול להיות עם טאב (tab) או ללא טאב.

מתודת document.write()‎ מפעילה את מתודת document.open()‎ שמנקה מסמך קיים ולכן מסמך ה DOM שעליו נעבוד, שהוא באופן כללי "סגור" (טעון עד תום) יינוקה ויוחלף במסמך החדש שתוכנו יהיה זה שעברנו כארגומנט ל document.write()‎.

תג

פיתוח תוכנה

שפת JavaScript