בפרק זה נלמד לכתוב תוכניות פשוטות ב JavaScript, נראה כיצד להגדיר משתנים, מבני בקרה ופונקציות.

1. JavaScript כשפת תכנות

בשנת 1995 חברת Netscape הציבה חזון שהקדים את זמנו: פיתוח תוכנה מלא בתוך הדפדפן, כך שהדפדפן יחליף את מערכת ההפעלה, ושפת התכנות לכתיבת יישומים תהיה JavaScript. כיום, 20 שנים מאוחר יותר, חזון זה מתחיל להתממש. יכולות חדשות של HTML5 מאפשרות כתיבה וקריאה בקלות של מידע על הדיסק, תקשורת זמן-אמת ואף מיקבול תהליכים. שפת התכנות שמפעילה את כל היכולות הללו, ומהווה את הבסיס לכל יישום HTML5 שנרצה לפתח הינה JavaScript.

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

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

JavaScript הינה שפה מבוססת מפענח (Interpreter), כאשר המפענח הפופולרי היום נקרא V8 והוא נמצא בשימוש בדפדפן כרום ובפרויקט כרומיום, אך הוא ממש אינו היחיד. דפדפן Firefox משתמש במפענח שנקרא Spider Monkey ולספארי יש את Nitro. השורות מתבצעות בסדר בו הן נכתבו, פרט להגדרת פונקציה שם קוד הפונקציה יבוצע כאשר הפונקציה תקרא, כמו בשפות אחרות.

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

אנו טוענים קוד JavaScript באמצעות תגית <script> בתוך קובץ ה HTML שלנו. ניתן לטעון מספר קבצי JavaScript מאותו קובץ HTML, והם ייטענו ויבוצעו באותו הסדר בו נכתבו תגיות ה script. מומלץ לכתוב את כל תגיות ה script בתחתית אלמנט ה body בקובץ ה HTML. הסיבה היא ביצועים: הדפדפן קורא את קובץ ה HTML תגית אחר תגית ומציג את התוכן על המסך. הרצת קובץ JavaScript מעכבת את המשך טעינת הדף, ולכן נרצה לשים את התגית אחרי שהעמוד כבר הוצג.

בסביבת העבודה שלנו בקורס ניתן להריץ קוד JavaScript באמצעות כתיבת קובץ עם סיומת js והכללתו בעמוד ה HTML באמצעות תגית script, או לצורך תרגול אפשר להשתמש באתר jsbin.com בו אתם יכולים לכתוב קוד JavaScript ולקבל שערוך וביצוע מיידי שלו.

איתור שגיאות בתוכנית (Debugging) מבוצע מתוך הדפדפן באמצעות כלי הפיתוח המובנים בדפדפני Chrome או Firefox. בדוגמאות אני אשתמש לרוב בדפדפן כרום מאחר וכלי הפיתוח שלו קצת יותר נוחים לשימוש. אפשר לקרוא בהרחבה על כל הפיתוח של Chrome ושימוש בהם לצרכי Debug בקישור:
https://developer.chrome.com/devtools/docs/javascript-debugging
מומלץ מאוד לנסות להפעיל את כלי הפיתוח כבר מהצעדים הראשונים שלכם בשפה. זה מאוד עוזר להבין איך הקוד רץ ומה קורא למה, כך שתוכלו גם למצוא את השגיאה וגם ללמוד דבר או שניים על JavaScript בתהליך.

 

2. משתנים ותוכנם

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

1. מספרים
2. מחרוזות
3. אובייקט
4. מערך
5. null
6. undefined
7. true / false

כל המספרים נשמרים בתור Double, כך שפעולות שתוצאתן מספר לא שלם מחזירות תוצאה עם נקודה עשרונית. דרך קלה לכתוב פקודות JavaScript ולראות את התוצאות במהירות על המסך היא באמצעות שימוש בכלי הפיתוח של הדפדפן. אם אתם בדפדפן כרום תוכלו ללחוץ על כפתור העכבר הימני, לבחור Inspect Elements וכך לפתוח את מסך כלי הפיתוח.
מסך זה מורכב ממספר טאבים, כל טאב עם היכולות שלו. הטאב שיעניין אותי כאן נקרא Console, ובו ניתן לכתוב שורות JavaScript שיופעלו באופן מיידי.
נסו להכנס לכלי הפיתוח לטאב Console והקלידו שם את השורות הבאות לפי הסדר (לא חייבים להקליד את סימן הנקודה-פסיק בסוף שורה כשאנו כותבים ישירות לתוך ה Console):

var x = 10;
var y = 20;

var z = y / x;

console.log('z = ' + z);
console.log('z/4 = ' + z / 4);

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

var lang = "JavaScript";
var desc = ' and the rest of us';

console.log(lang + desc);

console.log(lang.toUpperCase());

var idx = desc.indexOf('t');
console.log('idx = ' + idx);

 

3. תנאים

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

var lang = "JavaScript";

if ( lang.indexOf('a') >= 0 ) {
  console.log('Found chracter: a');
} else {
  console.log("No a's found");
}

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

if ( 2 == "2" ) {
  console.log('The number 2 == the string 2');
}

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

if ( 2 === "2" ) {
  console.log('this line is not printed');
}

 

4. לולאות

את לולאות for ו while אתם מכירים משפות אחרות. כך הן נראות ב JavaScript:

for (var i=0; i < 10; i++) {
  console.log('i = ' + i);
}

var count=10;
while (count > 0) {
  count--;
  console.log('count = ' + count);
}

 

5. פונקציות ותחום הגדרה

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

function count_till(count) {
  for (var i=0; i<count; i++) {
    console.log('i = ' + i);
  }
  console.log('Done!');
}

אנו מפעילים פונקציה באמצעות ציון שמה והעברת הפרמטרים בסוגריים באופן הבא:

count_till(10);

פונקציה יכולה להחזיר ערך באמצעות המילה השמורה return ואז הערך המוחזר מתקבל מהפעלת הפונקציה (פונקציה ללא return מחזירה את הערך undefined). כך נראית פונקציה שמחזירה ערך:

function count_till(val) {
  var result = 0;

  for (var i=0; i<=val; i++) {
    result += i;
  }

  return result;
}

var sum_until_10 = count_till(10);
console.log('sum = ' + sum_until_10);

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