מבוא ל-JavaScript

למרות שמו, JavaScript קשור ל-Java בלבד בכך ששניהם חולקים כמה דמיון תחבירי. התחביר של JavaScript בפיתוח הראשוני שלו היה בהשראת התחביר של Java הוא נקרא 'LiveScript' בפעם הראשונה נשלח בגרסת בטא של Netscape Navigator ב-1995, כדי להתאים של Netscape הצעות אחרות בעלות שם וכרמז לעובדה שהיא פועלת "בשידור חי" בדפדפן. Microsoft השיקה פתרון משלה של JavaScript, "JScript," זמן קצר לאחר מכן באמצעות Internet Explorer 3.0.

Netscape שלח עבודה מוקדמת זו אל Ecma International, ארגון מפתחת ומפרסמת תקנים טכניים, כדי לקבוע באופן רשמי ולציין איך שפת כתיבת סקריפטים צריכה להיות מובנת לדפדפנים אחרים. ב-1997, Ecma אישור ECMA-262 שהופץ בינלאומי, כתקן לגרסה הראשונה של סקריפט שנקראת ECMAScript. ECMAScript הוא התקן שמיידע את היצירה. בשפות סקריפטים ספציפיות יותר, כמו למשל העבודה של Microsoft JScript, ה-ActionScript של Adobe ו-JavaScript עצמו שכבר לא פעילים.

הבחנה זו חשובה כאשר דנים בהיבטים ספציפיים ובתכונות של JavaScript. 'ES5' מתייחס לגרסה הראשית של תקן ECMAScript ב-2009, לאחר שנים של פיתוח חלקי יותר. 'ES6' (או "ES2015") הוא קיצור של הסטנדרטים שנקבעו על ידי המהדורה השישית של ECMAScript, שהושק ב-2015. אחרי ES6, מהדורות חדשות של ECMAScript של מהדורת Standard מופצת מדי שנה, כשהשינויים והתוספות שלה בכל מהדורה נקרא לפי שנה כ-"ES2016" או ES2017.

הכללים הבסיסיים

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

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

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

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

ברמה הכללית, יישומי JavaScript מורכבים מהצהרות ביטויים.

הצהרות

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

let myVariable = 4;

myVariable;
> 4

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

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

חסימת דפי חשבון

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

לרוב יופיעו הצהרות חסימה לצד בהצהרות תהליכי בקרה, כמו if:

if ( x === 2 ) {
  //some behavior;
}

הבעות

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

2 + 2;
> 4

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

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

הקלדה חלשה

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

לדוגמה, אם תוסיפו מספר לערך מחרוזת בשפה חזקה מאוד, למשל Python, התוצאה היא שגיאה:

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

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

"1" + 1;
> "11"

אפשר גם לאלץ את סוגי הנתונים באופן מפורש. הדוגמה הבאה מאלצת הערך המספרי 100 לערך מחרוזת של "100" באמצעות הערך המובנה של JavaScript אמצעי תשלום toString:

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

תלות באותיות רישיות (Case sensitivity)

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

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function

const myVariable = 2;

myvariable;
> Uncaught ReferenceError: myvariable is not defined

myVariable;
> 2

רווח לבן

JavaScript הוא לא רגיש לרווחים. זה אומר שהתרגום מתעלם הכמות והסוג (טאבים או רווחים) של רווח לבן בשימוש.

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

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

let x;

[אסימונים: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[אסימונים: [letx] ]

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

let           x                             =                           2;

[אסימונים: [let] [x] [=] [2] ]

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

let x
=
2;

[אסימונים: [let] [x] [=] [2] ]

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

let x = 1;
let y = 2;

בעוד שהצהרות מסוימות בדרך כלל משתמשות בכמה שורות:

if ( x == 2 ) {
  //some behavior;
}

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

let x=1;let y=2;

if(x==2){}

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

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

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

בדיקת ההבנה