תכנות הוא למעשה אוסף פקודות שאנחנו כותבים והמחשב צריך לתרגם לשפתו ולהוציא אל הפועל, המחשב לא באמת מבין את השפה בה אנו כותבים, לשם כך נועד התחביר התקני או Syntax.
הסינטקס והדפדפן:
הסינטקס נועד עבורנו המפתחים, הקוד שאנחנו כותבים נכתב בשפה המובנת לבני אדם, לעומתנו המחשב לא יודע לקרוא ולהבין את הקוד שאנחנו כותבים כיוון שהשפה בה המחשב מדבר היא שפת מכונה, שפת מכונה מורכבת מרצף של סיביות.
לסיבית שני מצבים אפשריים ועל כן ערכה מיוצג באמצעות הספרות אפס ואחת, כך שלמעשה השפה שהמחשב מבין היא שפה של 0 ו 1, כאן מגיע תפקידו של ה”מהדר” “קומפיילר” שעובר על הקוד שלנו ומתרגם אותו לשפת מכונה כדי שהמחשב יכול להוציא לפועל את הפקודות שהכתבנו לו.
אם לא נכתוב ע”פ הסינטקס התקני הקומפיילר לא ידע מה כתבנו ולמה לתרגם את זה ולכן נקבל שגיאה.
בדפדפן יש שלושה “תוכנות” שמעניינות אותנו, אחת היא ה’dom parser’ שלוקחת את מה שכתבנו ב-html וממירה את זה לתוכן ויזואלי באתר, עוד מנוע הוא css parser שעובר על המסמך ומוודא שהמערך תואם את חוקי הcss (שפת העיצוב של האינטרנט) יש עוד מנוע שמכונה לייאוט איינג’ן או רנדרינג אנג’יין שמשלב את הcss עם הhtml שכתבנו.
ה”מנוע” האחראי על הדינמיות והאינטרקטיביות בדפדפן הוא מנוע הג’אווה סקריפט – ‘javascript engine’ יש לו שמות שונים בדפדפנים שונים:
Firefox- spidermonkey
Google crome – spidermonkey
Safari – night pro
IE – chikara
השמות הם שונים אבל בסופו של יום כל מנועי ה – js בכל סוגי הדפדפנים מבצעים את אותה הפעולה והיא לקחת את הקוד שנכתב בסינטקס שקריא לבני אדם ולהמיר אותו לקוד מכונה שמורכב מאפס ואחת באמצעות המנוע שאחראי לפרש את הקוד שאנחנו כותבים לשה שמחשב יוכל להבין גם.
ה”קימפול” הזה כלומר המרת הקוד שאנחנו כתבנו לשפת מכונה וההוצאה של הקוד הזה אל הפועל מתבצעים במחשב של הגולש ולא בשרת ולכן js נקראת שפת צד לקוח (העיבוד נעשה אצל הלקוח – הגולש).
הצהרות – statements
תכנות מורכב מרשימה של הוראות שמיועדות להתבצע ע”י המחשב, בשפת תכנות הוראות אלה מכונות “הצהרות” – statements.
כל הצהרה בjs צריכה ע”פ הסינטקס התקני, התחביר התקני להסתיים בנקודה פסיק – semicolons, כך – ;
בדוגמת הקוד שלהן נוכל לראות שכל פקודה, הוראת תכנות או בשפת תכנות “הצהרה” מסתיימת בנקודה פסיק.
See the Pen Syntax demo by guerrilla.co.il (@guerilla) on CodePen.
נעבור קצת על ההצהרות שראינו בהתייחס לסינטקס התקני, לא נתעכב על כל הוראה כיוון שכל אחת ראויה לפוסט בפני עצמה, כרגע ניגע בנושא התחבירי בלבד.
כבר ציינו שכל הוראה מסתיימת בנקודה פסיק כפי שניתן לראות בכל הפקודות / הצהרות בדוגמא.
בשורה הראשונה אנחנו רואים שההצהרה alert – שהיא בעצם פוקדת על המחשב להקפיץ חלונית הודעה המכילה את הטקסט שרשמנו בתוך הסוגריים – פותחת בשני קווים נטויים “סלשים” תחביר כזה אומר למנוע להתעלם מההוראה ולא לבצע אותה, נוכל להשתמש בזה כדי “לשים בסוגריים” קוד שאנחנו רוצים להשאיר בהמתנה כי עוד לא החלטנו אם אנחנו מוחקים אותו או לא, או כדי לתעד את הקוד שלנו כלומר לכתוב מה אנחנו עושים בשורות הקוד הבאות בכדי שלאחר זמן שנחזור אל הקוד שכתבנו נבין מה כתבנו ולשם מה.
בשורה שלאחר מכן מופיעה ההצהרה alert שלא בהערה, כלומר המנוע כן יקרא אותה ויבצע אותה, הפקודה alert היא פונקציה, כחלק מהסינטקס של js פונקציה מופעלת ע”י הצבת סוגריים לאחר שם הפונקציה לכן אחרי המילה alert מופעים סוגריים מה שיגרום לכך שכשהסינטקס פרסר (המנוע שעובר על הקוד ובודק שהוא תואם לסינטקס התקני בjs) יעבור על הפקודה ויגיע לסוגריים הוא יבין שצריך להפעיל את הפונקציה או בשפה המקובלת “לקרוא לפונקציה”.
בשורה השלישית הרביעית והחמישית אנחנו פוגשים שלושה פקודות שלמעשה אומרות לדפדפן, למנוע הjs לפתוח תאים בזיכרון או “משתנים” בשפה אחרת ולהציב בתוכם ערכים מסוימים, במקרה הראשון והשני ערך מספרי ובשלישי את הערך של סכום שני המשתנים הקודמים.
שוב מגיע תפקידו של הסינטקס של התחביר התקני שקובע שפקודה לפתיחת משתנה / תא זיכרון חייבת להתחיל במילת המפתח var רק שהסינטקס פרסר עובר על המילה הזאת אות אות ‘v’ ואז ‘a’ ואז ‘r’ הוא אומר לעצמו “או יש כאן את מילת המפתח var זה אומר שאני צריך לפתוח תא בזיכרון” אח”כ הסינטקס מצפה למצוא את השם של המשתנה או התא בזיכרון ובמקרה שלנו a b ן c, כחלק מהסינטקס התקני שם המשתנה יופיע ללא גרשיים,
כמו כן הערכים המספריים שאנחנו מציבים לתוך המשתנים מופיעים ללא גרשיים כחלק מהסינטקס התקני אחרת המנוע יחשוב שמדובר בטקטס / מחרוזת תווים ולא בערך מספרי, אכן בדוגמה שלאחר מכן אנחנו מציבים בתוך המשתנה person מחרוזת כלומר טקסט ולכן פה הסינטקס יחייב את ההפך שהטקסט שאנחנו רושמים יהיה דווקא בתוך גרשיים אחרת נקבל שגיאה כי המנוע יחשוב שמדובר בשם של משתנה אחר (שלא קיים למעשה כי לא הצהרנו עליו) ולא בערך של מחרוזת תווים שאנחנו רוצים לשמור בתא person.
ההצהרה האחרונה היא למעשה פונקציה שמקושרת לאובייקט document אנחנו רואים שהחיבור בין הdocument לפונקציה write נעשה ע”י נקודה – dot, שוב נדגיש שלולא היינו שמים את הנקודה המנוע לא היה יודע שהוא צריך לחפש באובייקט document את הפונקציה write.
כעת נעבור על חוקי סיטנקס נפוצים בjs:
כפי שכבר הזכרנו כל “הצהרה” (פקודה או הוראה תכנותית) בjs מסתיימת בנקודה פסיק.
See the Pen semicolons by guerrilla.co.il (@guerilla) on CodePen.
מספרים ומחרוזות
מספרים בjs יכולים להיות שלמים או דצימליים, כלומר עם נקודה אך בכל מקרה לא בתוך גרשיים.
מחרוזות (רצף של תוים כלומר טקטס) לעומת זאת חייבים לבוא בתוך גרשיים (כפולות או בודדות).
See the Pen numbers and strings by guerrilla.co.il (@guerilla) on CodePen.
משתנים ואופרטור השמה
המשתנים בjs, באנגלית: variables, משמשים כתאי זיכרון לאחסון נתונים, הסינטקס מצריך להשתמש במילת המפתח var כדי להצהיר על משתנה ובאופרטור (אופרטורים הם למעשה פונקציות מוכנות מראש של js המשמשים לביצוע פעולות תכנותיות כמו חיבור וחיסור השמת נתונים במשתנים ועוד) שווה = כדי להכניס נתונים לתוך המשתנה.
See the Pen var keyword by guerrilla.co.il (@guerilla) on CodePen.
חיבור מחרוזות
js משתמשת באופרטורים מתמטיים כדי לחשב ערכים האופרטור שווה לעומת זאת משמש לביצוע השמה קרי, הכנסת נתונים לתוך משתנה.
האופרטור + בjs יכול לחבר לא רק בין מספרים אלא גם בין מחרוזות.
See the Pen Connection strings by guerrilla.co.il (@guerilla) on CodePen.
כפי שניתן לראות מהדוגמה בjs גם רווח ריק נחשב לתו במחרוזת ולכן כדי ליצור את השם עם רווח צריך להוסיף אותו במחרוזת.
מילות מפתח – keyword
בjs ישנם מילות מפתח, תפקידם של מילות המפתח הוא לספר למנוע מה הוא צריך לבצע למשל כדי להורות למחשב לפתוח תא בזיכרון נשתמש במילת המפתח var.
כדי להגדיר פונקציה נשתמש במילת המפתח function.
כדי לספר למחשב שכעת אנחנו מתחילים ביצוע של לולאה נשתמש במילת המפתח for
See the Pen JavaScript Keywords by guerrilla.co.il (@guerilla) on CodePen.
שמות מזהים
כדי שjs תוכל לדעת לאיזה תא בזיכרון לגשת כדי למצוא את הנתונים שאנחנו רוצים, או בכדי שהיא תדע לאיזה פונקציה אנחנו רוצים לקרוא (לקרוא לפונקציה פרושו להפעיל אותה) אנחנו צריכים לתת שמות מזהים למשתנים או לפונקציות לכן תמיד לאחר מילת המפתח var המצהירה על משתנה או function המצהירה על פונקציה יבוא שם מזהה למשתנה או לפונקציה.
שמות מזהים יכולים להתחיל באות קטנה או גדולה סימן הדולר $ או קו תחתון_ האותיות שלאחר מכן יכולים להכיל גם מספרים.
js לא מאפשרת לפתוח שמות מזהים במספרים כיוון שגם שמות מזהים וגם מספרים נכתבים ללא גרשיים כך שהמנוע צריך לדעת אם מה שהוא קורא זה מספר או שם מזהה.
See the Pen Identifier names by guerrilla.co.il (@guerilla) on CodePen.
הסינטקס של שמות מזהים לא מקבל רווח כדבר תקני ולכן ישנם שני אפשרויות לכתוב שם בעל שני מילים בjs.
האחד ע”י הפרדה של קו תחתון והשני ע”י פתיחת השם השני באות גדולה
See the Pen Camel Case by guerrilla.co.il (@guerilla) on CodePen.
רגישות תחבירית – Case Sensitive
בjs יש רגישות לאותיות קטנות וגדולות ולכן אם קראנו למשתנה בשם student למשל ולאחר זמן נרצה למשוך את הנתונים ששמנו בתוך student נהיה חייבים לכתוב את אותם התווים בדיוק שכתבנו בהתחלה, מה שאומר שSTUDENT student Student הם למעשה שלושה שמות שונים וניתן לפתוח שלושה תאים כאלה בזיכרון, שלושה משתנים כאלה והם לא ידרסו אחד את השני ולא ימחקו את הנתונים האחד של השני.
See the Pen Case Sensitive by guerrilla.co.il (@guerilla) on CodePen.