יסודות JavaScript

מאמר זה מסביר את יסודות JavaScript.

YouTube Video

הרצת Hello World!

סקירה כללית על JavaScript

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

משתנים ב-JavaScript

משתנים ב-JavaScript הם כמו מכולות המשמשות לאחסון ושימוש חוזר בנתונים. באמצעות משתנים, ניתן לשמור ולתמרן ערכים בתוכנית.

הצהרת משתנים

ב-JavaScript ישנם שלושה מילות מפתח להצהרת משתנים.

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

1var x = 10;

• let: הוצג ב-ES6 ומהווה שיטה להצהרת משתנים עם תחום בלוק. ניתן לשנות אותו, אך לא ניתן להצהיר עליו מחדש באותו התחום.

1let y = 20;

• const: משמש להכרזה על משתנים שאינם ניתנים לשינוי (קבועים). יש לו תחום בלוק, והוא אינו ניתן לשיוך מחדש או להכרזה מחדש לאחר ההכרזה.

1const z = 30;

תחום

למשתנים יש את הקונספט של תחום.

תחום גלובלי

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• משתנים בעלי תחום גלובלי נגישים מכל מקום. משתנים שהוכרזו באמצעות var הם בעלי תחום גלובלי או תחום פונקציה, אך let ו-const הם בעלי תחום בלוק.

תחום בלוק

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• תחום בלוק: משתנים שהוכרזו באמצעות let או const תקפים רק בתוך {} (סוגריים מסולסלים).

• מתרחשת שגיאה כאשר ניגשים מבחוץ ל-{} (סוגריים מסולסלים).

תחום פונקציה

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• תחום פונקציה: משתנים ופונקציות שהוגדרו בתוך פונקציה אינם נגישים מחוץ לפונקציה. משתנים שהוכרזו בתוך פונקציה באמצעות var שייכים לתחום זה.

• בדוגמה זו, ניתן לגשת למשתנה functionVar מחוץ ל-{} (סוגריים מסולסלים) כל עוד הוא נמצא בתחום הפונקציה. מצד שני, גישה למשתנה functionScoped מחוץ לתחום הפונקציה תגרום לשגיאה.

לכן, משתנים שהוכרזו באמצעות var הם בעלי תחום פונקציה בלבד וללא תחום בלוק, מה שמהווה סיכון לשימוש בטווחים בלתי צפויים. מומלץ להשתמש ב-const עבור משתנים שאינם משתנים ובעיקר להשתמש ב-let, ולהימנע משימוש ב-var ככל האפשר.

סוגי נתונים

משתנים ב-JavaScript יכולים לאחסן ערכים מסוגי נתונים שונים. יש string לטיפול בטקסט ו-number לטיפול בערכים מספריים.

סוגי הנתונים העיקריים הם כדלקמן:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• סוגי פרימיטיביים:
  • number: מטפל בערכים מספריים (שלמים ומספרים עשרוניים).
  • string: מטפל במחרוזות תווים.
  • boolean: מטפל בערכי בוליאני true או false.
  • null: מייצג באופן מפורש ערך של 'כלום'.
  • undefined: ערך שמוקצה אוטומטית למשתנים שלא אותחלו.
  • Symbol: סוג נתונים המשמש ליצירת ערכים ייחודיים.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• סוגי אובייקטים:
  • אובייקט: מבנה נתונים עם מספר מאפיינים.
  • Array: רשימה המכילה מספר ערכים.
  • Function: אובייקט פונקציה.

השמה ושינוי השמה למשתנים

משתנים שהוגדרו עם let או var ניתנים לשינוי השמה, אך const אינו ניתן לשינוי השמה לאחר שהוגדר.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

הרמת משתנים

ב-JavaScript קיימת תופעה שבה הכרזות משתנים 'מועלות' לראש תחום השימוש שלהן. משתנים שהוגדרו עם var מורמים, אך שימוש ב-let או const לפני ההגדרה יגרום לשגיאה.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• במקרה זה, משתנים המוכרזים עם var מועלים (hoisted), והערכים שלהם מוצגים.

1console.log(b); // ReferenceError
2let b = 20;

• משתנים שהוכרזו עם let אינם מועלים (hoisted), מה שגורם לשגיאה.

שימוש נכון במשתנים

יש לשקול את הנקודות הבאות לשימוש נכון במשתנים.

• העדיפו להשתמש ב-const והימנעו משימוש ב-var.
• הקפידו על כללי שמות למשתנים.
  • השתמשו ב-camelCase, כמו userName או totalPrice.
  • הימנעו משמות מעורפלים כמו data או value, והשתמשו בשמות משמעותיים לשיפור הקריאות.
  • שם משתנה אינו יכול להתחיל במספר, ולכן שמות כמו 1variable אינם מותרים.
• שימוש מופרז במשתנים גלובליים יכול לגרום לאי-בהירות בתחום ולהוביל לבאגים, לכן הימנעו משימוש בהם ככל שניתן.

סיכום

• var: שיטת הגדרה ישנה למשתנים שיש לה תחום שימוש של פונקציה.
• let: משתנה בשליטת תחום בלוק שניתן לשנות את ההשמה שלו.
• const: משתנה בשליטת תחום בלוק שלא ניתן לשנות את ההשמה שלו (קבוע).
• חשוב להשתמש במשתנים בהתאם לסוגי הנתונים שלהם ולשים לב לתחום השימוש שלהם.

מה הם תווי בריחה ב-JavaScript?

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

דוגמאות לשימוש בתווי בריחה

להלן מספר דוגמאות קוד המשתמשות בתווי בריחה.

בריחת מרכאות כפולות ומרכאות בודדות

השתמש בתווי בריחה כדי לייצג מרכאות כפולות או בודדות בתוך מחרוזת.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

בריחת קווים נטויים לאחור

כדי להוסיף קו נטוי לאחור בעצמו במחרוזת, ברח אותו באמצעות \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

בריחת ירידות שורה וטאבים

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

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

בריחת תווי Unicode

שימוש ברצף בריחת Unicode מאפשר לייצג תווים מסוימים באמצעות קודים הקסדצימליים.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

הערות

שימוש יתר בתווי בריחה עלול לפגוע בקריאות

שימוש יתר בתווי בריחה יכול להפחית את הקריאות של הקוד שלך. חשוב במיוחד להשתמש בתווי בריחה בצורה מושכלת במחרוזות ארוכות.

שקול להשתמש במחרוזות תבנית (template literals)

ב-JavaScript, מחרוזות תבנית (template literals) שמשתמשות בטילדות מאפשרות לכלול ירידות שורה או ביטויים מוטבעים ללא תווי בריחה.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

סיכום

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

גרסאות JavaScript

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

• ES3 (1999)

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

• ES5 (2009)

  הוצג strict mode ונוספו תכונות חדשות כמו Array.prototype.forEach, Object.keys, ועוד.

• ES6 / ES2015 (2015)

  בוצע עדכון משמעותי ל-JavaScript. הוצגו הרבה תכונות המהוות בסיס ל-JavaScript המודרנית, כגון let, const, arrow functions, classes, promises, modules, ועוד.

• ES7 / ES2016 (2016)

  התוספו Array.prototype.includes ואופרטור העלאה בחזקה (**).

• ES8 / ES2017 (2017)

  הוצגו async/await, המקלים על כתיבת תהליכים אסינכרוניים.

• ES9 / ES2018 (2018)

  התווספו איטרטורים אסינכרוניים ו-Rest/Spread Properties.

• ES10 / ES2019 (2019)

  התוספו flatMap ו-Object.fromEntries.

• ES11 / ES2020 (2020)

  התוספו Optional Chaining (?.) ו-Nullish Coalescing Operator (??), אשר מאפשרים לכתוב קוד בצורה פשוטה ובטוחה יותר.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll ו-Promise.any, בין היתר, נוספו.

• ES13 / ES2022 (2022)

  Array.prototype.at ושדות private במחלקה (#field), בין היתר, נוספו.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted ו-Symbol.prototype.description, בין היתר, נוספו.

• ES15 / ES2024 (2024)

  Promise.withResolvers לניהול קל יותר של Promise ו-ArrayBuffer ניתן לשינוי גודל, בין היתר, נוספו.

JavaScript העדכנית מתעדכנת מדי שנה, ותכונות חדשות מתווספות אף בגרסה האחרונה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video