המדריך האולטימטיבי ל-JavaScript

🚀 מבוא וחיבור לדף

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

איך מוסיפים JS לדף HTML?

1. קובץ חיצוני (השיטה המומלצת)

יוצרים קובץ נפרד (למשל script.js) ומקשרים אליו מה-HTML, רצוי לפני תג סגירת ה-</body>.

<body>
    <!-- ... כל תוכן ה-HTML ... -->
    
    <script src="script.js" defer></script>
</body>

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

2. קוד פנימי (Internal Script)

ניתן לכתוב JS ישירות בתוך תג <script>, גם כן רצוי בסוף ה-<body>.

<body>
    <!-- ... כל תוכן ה-HTML ... -->
    
    <script>
        console.log('שלום עולם!');
    </script>
</body>

הכירו את ה"קונסול החי"

ברוב הדוגמאות הבאות, החלון הימני אינו מציג דף אינטרנט, אלא מדמה את ה-**Console** של הדפדפן. כל פקודת console.log() שתכתבו בקוד תודפס שם, וכן שגיאות שיתרחשו.

// זוהי תגובת "שלום עולם" ב-JavaScript
console.log('שלום עולם!');

// אפשר להדפיס מספרים
console.log(10 + 5);

// וגם אובייקטים
const user = {
  name: "משה",
  age: 30
};
console.log(user);

// כך נראית שגיאה
// myUndefinedFunction();

📦 יסודות: משתנים וטיפוסים

בניגוד ל-Java, ג'אווהסקריפט היא שפת **טיפוסים דינמית** (Dynamically Typed). אין צורך להכריז על `int` או `String`. המנוע מבין את הטיפוס בזמן ריצה.

`let`, `const`, ו-`var`

const: הדרך המועדפת. מגדיר קבוע (constant) שלא ניתן להקצות מחדש (re-assign). זהו **Block Scoped**. (הערה: אם הקבוע הוא אובייקט או מערך, *ניתן* לשנות את תוכנם הפנימי).
let: להגדרת משתנה שערכו עשוי להשתנות. גם הוא **Block Scoped**.
var: הדרך הישנה. **Function Scoped**. מומלץ להימנע משימוש בה בקוד מודרני בגלל התנהגות מבלבלת עם Hoisting.

טיפוסים פרימיטיביים

טיפוס	דוגמה	הערה (מול Java)
`Number`	`10`, `3.14`	אין הפרדה בין `int`, `double`, `float`. הכל `Number`.
`String`	`"שלום"`, `'עולם'`, `כאן ${name}`	מחרוזת. ניתן להשתמש ב-` (Backticks) להטמעת משתנים.
`Boolean`	`true`, `false`	זהה ל-Java.
`null`	`null`	ערך "ריק" מכוון. (מעניין: `typeof null` מחזיר 'object', באג היסטורי).
`undefined`	`undefined`	טיפוס של משתנה שטרם הוקצה לו ערך. (ייחודי ל-JS)
`Symbol`	`Symbol('id')`	מזהה ייחודי ובלתי ניתן לשינוי (פחות נפוץ).
`BigInt`	`100n`	למספרים שלמים גדולים מאוד (מסתיים ב-`n`).

קונסול חי: משתנים וטיפוסים

נסו לשנות את הערך של age ולראות את הפלט משתנה. נסו לשנות את name (שהוא const) ולראות את השגיאה בקונסול.

const name = "דוד"; // קבוע, לא ניתן לשינוי
let age = 25;       // משתנה, ניתן לשינוי
age = age + 1;

let isStudent = true;
let car = null; // אנחנו קבענו שאין לו רכב
let bike; // הערך הוא undefined

console.log("שם:", name, `(typeof: ${typeof name})`);
console.log("גיל:", age, `(typeof: ${typeof age})`);
console.log("סטודנט?", isStudent, `(typeof: ${typeof isStudent})`);
console.log("רכב:", car, `(typeof: ${typeof car})`);
console.log("אופניים:", bike, `(typeof: ${typeof bike})`);

// שימוש ב-Template Literal
console.log(`שלום, ${name}! אתה בן ${age}.`);

// נסו להסיר את ההערה משורה זו:
// name = "יוסי"; // זה ייצור שגיאה!

⚙️ אופרטורים

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

סוגי אופרטורים

סוג	אופרטורים	תיאור
חשבון	`+`, `-`, ``, `/`, `%` (מודולו), `*` (חזקה)	פעולות מתמטיות.
הקצאה	`=`, `+=`, `-=`, `*=`, `/=`	הקצאת ערכים למשתנים.
השוואה	`==`, `!=`, `===`, `!==`, `>`, `<`, `>=`, `<=`	השוואת ערכים. מומלץ תמיד להשתמש ב-`===` (השוואה קפדנית) שבודק גם טיפוס וגם ערך, ולא ב-`==` (השוואה רפויה).
לוגיים	`&&` (וגם), `\|\|` (או), `!` (לא)	צירוף תנאים בוליאניים.
טרנרי	`condition ? val1 : val2`	קיצור של `if...else`.
Nullish Coalescing	`??`	מחזיר את הערך הימני רק אם הערך השמאלי הוא `null` או `undefined`. (שימושי לערכי 0 או false שצריך לשמר).
Optional Chaining	`?.`	מאפשר לגשת למאפיינים מקוננים בבטחה. אם חוליה בשרשרת היא `null` או `undefined`, הביטוי מחזיר `undefined` במקום לזרוק שגיאה.

קונסול חי: אופרטורים מודרניים

// השוואה רפויה (==) מול קפדנית (===)
console.log("5 == '5':", 5 == '5');     // true (המרה אוטומטית)
console.log("5 === '5':", 5 === '5');   // false (טיפוסים שונים)
console.log("מומלץ תמיד להשתמש ב- === !");

// Nullish Coalescing (??)
let count = 0;
let items = count || 10; // 10 (כי 0 נחשב falsy)
let realItems = count ?? 10; // 0 (כי 0 הוא לא null או undefined)
console.log("שימוש ב- || :", items);
console.log("שימוש ב- ?? :", realItems);

// Optional Chaining (?.)
const user = {
  name: "משה",
  // address: { city: "תל אביב" }
};

// זה יזרוק שגיאה:
// console.log(user.address.city); 

// זה יחזיר undefined בבטחה:
console.log("עיר (בבטחה):", user?.address?.city);

🚦 בקרת זרימה

הלוגיקה הבסיסית של תנאים ולולאות. החלק הזה מאוד דומה ל-Java, עם תוספות כמו `for...of` ו-`for...in`.

קונסול חי: תנאים, Switch ולולאות

// if...else
let temperature = 28;
if (temperature > 30) {
  console.log("חם מאוד!");
} else {
  console.log("נעים.");
}

// switch
let day = "שני";
switch (day) {
  case "ראשון":
    console.log("יום ראשון");
    break;
  case "שני":
    console.log("יום שני");
    break; // אל תשכח break!
  default:
    console.log("יום אחר");
}

const arr = ['א', 'ב', 'ג'];
const obj = { a: 1, b: 2 };

// לולאת for...of (למערכים ואיטרבלים)
console.log("--- for...of (ערכים) ---");
for (const letter of arr) {
  console.log(letter);
}

// לולאת for...in (לאובייקטים - מפתחות)
console.log("--- for...in (מפתחות) ---");
for (const key in obj) {
  console.log(key, ":", obj[key]);
}

// do...while (רצה לפחות פעם אחת)
let i = 10;
do {
  console.log("רץ פעם אחת:", i);
  i++;
} while (i < 5);

פונקציות

פונקציות הן אבני הבניין של הלוגיקה ב-JS. ניתן להגדיר אותן בכמה דרכים, והן יכולות לקבל פונקציות אחרות כארגומנטים (Higher-Order Functions).

קונסול חי: הגדרת פונקציות, פרמטרים ופונקציות מסדר גבוה

// 1. הצהרת פונקציה (רגילה)
function greet(name = "אורח") { // פרמטר ברירת מחדל
  return `שלום, ${name}!`;
}
console.log(greet("משה"));
console.log(greet());

// 2. פונקציית חץ (Arrow Function)
const add = (a, b) => a + b;
console.log("חיבור:", add(5, 3));

// 3. פרמטרים: Rest (...)
// אוסף את *כל שאר* הארגומנטים למערך
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log("סכום (rest):", sum(1, 2, 3, 4));

// 4. אופרטור Spread (...)
// *פורס* מערך קיים לארגומנטים
const nums = [10, 20, 30];
console.log("סכום (spread):", sum(...nums));

// 5. פונקציה מסדר גבוה (Higher-Order Function)
// פונקציה שמקבלת פונקציה אחרת כפרמטר
function doOperation(a, b, operation) {
  return operation(a, b);
}
console.log("HOC:", doOperation(10, 5, add));
console.log("HOC:", doOperation(10, 5, (a, b) => a - b)); // פונקציה אנונימית

🔬 Scope & Closures

סקופ קובע את הנראות (visibility) של משתנים. Closure (סגור) הוא פונקציה ש"זוכרת" את הסביבה הלוקאלית שבה היא נוצרה, גם לאחר שהפונקציה החיצונית סיימה לרוץ.

סוגי סקופ

Global Scope: משתנה שמוגדר מחוץ לכל פונקציה. זמין בכל מקום.
Function Scope: משתנה שמוגדר עם `var` זמין *בכל* מקום בתוך הפונקציה שבה הוגדר.
Block Scope: משתנה שמוגדר עם `let` או `const` זמין *רק* בתוך הבלוק (`{...}`) שבו הוגדר (למשל, בתוך `if` או `for`).

קונסול חי: סקופ ו-Closure

// Block Scope (let/const)
if (true) {
  let blockVar = "אני בבלוק";
  const blockConst = "גם אני בבלוק";
  var functionVar = "אני בורח מהבלוק"; // var הוא Function Scoped
}
console.log(functionVar); // "אני בורח מהבלוק"
// console.log(blockVar); // ReferenceError: blockVar is not defined

// Closure (סגור)
function createCounter() {
  let count = 0; // 'count' נסגר בסביבה של הפונקציות הפנימיות

  return {
    increment: () => {
      count++;
      console.log(count);
    },
    getValue: () => {
      return count;
    }
  };
}

const counterA = createCounter();
console.log("--- מונה A ---");
counterA.increment(); // 1
counterA.increment(); // 2

// 'count' של מונה B הוא נפרד לחלוטין
const counterB = createCounter();
console.log("--- מונה B ---");
counterB.increment(); // 1
console.log("ערך A:", counterA.getValue()); // 2

מערכים ומתודות

מערכים ב-JS הם סופר-גמישים (בניגוד ל-Java). הם דינמיים ובעלי מתודות שימושיות רבות.

קונסול חי: מתודות מערכים

אלו המתודות הנפוצות ביותר לעבודה פונקציונלית עם מערכים.

const numbers = [10, 5, 20, 15, 30];

// push/pop (משנים את המערך המקורי)
numbers.push(40);
console.log("אחרי push:", numbers);
numbers.pop();
console.log("אחרי pop:", numbers);

// forEach - לביצוע פעולה על כל איבר
console.log("--- forEach ---");
numbers.forEach((num, index) => {
  console.log(`איבר ${index}: ${num}`);
});

// map - יצירת מערך חדש על בסיס הישן
const doubled = numbers.map(num => num * 2);
console.log("מערך חדש (map):", doubled);

// filter - יצירת מערך חדש רק עם פריטים שעונים לתנאי
const over15 = numbers.filter(num => num > 15);
console.log("מספרים מעל 15 (filter):", over15);

// reduce - צמצום המערך לערך בודד
const sum = numbers.reduce((total, num) => total + num, 0);
console.log("סכום (reduce):", sum);

// find - מציאת האיבר *הראשון* שעונה לתנאי
const firstOver10 = numbers.find(num => num > 10);
console.log("ראשון מעל 10 (find):", firstOver10); // 20

// some - בדיקה האם *לפחות איבר אחד* עונה לתנאי
const hasNegative = numbers.some(num => num < 0);
console.log("האם יש שלילי? (some):", hasNegative); // false

// every - בדיקה האם *כל האיברים* עונים לתנאי
const allPositive = numbers.every(num => num > 0);
console.log("האם כולם חיוביים? (every):", allPositive); // true

אובייקטים ומתודות

אובייקטים ב-JS הם אוספים דינמיים של מפתח-ערך. הצורה הנפוצה היא Object Literal (סוגריים מסולסלים).

קונסול חי: אובייקטים, Destructuring ומתודות

const person = {
  firstName: "יצחק",
  lastName: "לוי",
  age: 42,
  skills: ['Java', 'JavaScript', 'SQL']
};

// גישה למאפיינים
console.log("שם משפחה:", person.lastName);
console.log("גישה דינמית:", person['firstName']);

// Destructuring (פירוק מבנה)
const { firstName, age } = person;
console.log(`--- Destructuring ---`);
console.log(firstName); // "יצחק"
console.log(age);     // 42

// Computed Properties (מאפיין מחושב)
const dynamicKey = "country";
person[dynamicKey] = "ישראל";
console.log("אחרי Computed Property:", person);

// מתודות סטטיות של Object
console.log("--- Object Methods ---");
// Object.keys - קבלת מערך של מפתחות
const keys = Object.keys(person);
console.log("מפתחות:", keys);

// Object.values - קבלת מערך של ערכים
const values = Object.values(person);
console.log("ערכים:", values);

// Object.entries - קבלת מערך של [מפתח, ערך]
const entries = Object.entries(person);
console.log("זוגות:", entries);

מתודות מובנות (String, Number, Math)

לטיפוסים פרימיטיביים יש מתודות עזר שימושיות.

קונסול חי: מתודות שימושיות

// String methods
const str = "  שלום עולם!  ";
console.log("--- String ---");
console.log(str.toUpperCase()); // "  שלום עולם!  "
console.log(str.trim()); // "שלום עולם!"
console.log(str.includes("עולם")); // true
console.log(str.replace("עולם", "World")); // "  שלום World!  "
console.log("123".padStart(5, "0")); // "00123"

// Number methods
const num = 3.14159;
console.log("--- Number ---");
console.log(num.toFixed(2)); // "3.14" (מחרוזת)
const strNum = "25.5";
console.log(parseInt(strNum)); // 25 (מספר)
console.log(parseFloat(strNum)); // 25.5 (מספר)

// Math (אובייקט סטטי)
console.log("--- Math ---");
console.log(Math.random()); // מספר אקראי בין 0 ל-1
console.log(Math.max(10, 5, 20)); // 20
console.log(Math.floor(2.9)); // 2 (עיגול למטה)
console.log(Math.ceil(2.1)); // 3 (עיגול למעלה)

מבני נתונים (Set, Map)

מבני נתונים מודרניים שנוספו ב-ES6 ופותרים בעיות נפוצות.

Set: אוסף של ערכים ייחודיים (Unique). מצוין להסרת כפילויות ממערך.
Map: אוסף של מפתח-ערך. בניגוד לאובייקט רגיל, המפתחות יכולים להיות *כל* טיפוס (כולל אובייקטים או פונקציות), לא רק מחרוזות.

קונסול חי: Set ו-Map

// Set - הסרת כפילויות
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = new Set(numbers);
console.log("Set (ייחודיים):", uniqueNumbers);

// הפיכה חזרה למערך
const uniqueArray = [...uniqueNumbers];
console.log("מערך ייחודי:", uniqueArray);

uniqueNumbers.add(6);
uniqueNumbers.add(1); // לא יתווסף שוב
console.log("האם קיים 3? (has):", uniqueNumbers.has(3));

// Map - מפתחות מכל סוג
const myMap = new Map();
const objKey = { id: 1 };
const funcKey = () => {};

myMap.set(objKey, "זהו ערך של אובייקט");
myMap.set(funcKey, "זהו ערך של פונקציה");
myMap.set("stringKey", "ערך רגיל");

console.log("--- Map ---");
console.log(myMap.get(objKey));
console.log(myMap.size); // 3

🏛️ Classes ו-Prototype (תכנות מונחה עצמים)

בניגוד ל-Java שהיא Class-Based, ג'אווהסקריפט היא Prototypal. אובייקטים יורשים ישירות מאובייקטים אחרים. התחביר של `class` (מ-ES6) הוא "סוכר תחבירי" (Syntactic Sugar) מעל מנגנון הפרוטוטייפ.

1. הדרך הישנה: פונקציית בנאי (Constructor Function) ו-Prototype

כך בנו אובייקטים לפני ES6. כל פונקציה יכולה לשמש כבנאי עם `new`. מתודות משותפות מוסיפים ל-`prototype` כדי לחסוך בזיכרון.

// 1. פונקציית הבנאי
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 2. הוספת מתודה ל-prototype המשותף
Person.prototype.greet = function() {
  console.log(`שלום, אני ${this.name} ואני בן ${this.age}.`);
};

const person1 = new Person("משה", 50);
person1.greet(); // "שלום, אני משה ואני בן 50."

2. הדרך המודרנית: `class` (ES6)

תחביר נקי ומוכר יותר (במיוחד למי שבא מ-Java), שעושה את אותו הדבר מאחורי הקלעים.

קונסול חי: `class`, `extends`, `super`

class Person {
  // תכונה פרטית (תחביר חדש)
  #birthYear;

  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.#birthYear = new Date().getFullYear() - age;  // תוקן הנקודה
  }

  // מתודה
  greet() {
    console.log(`שלום, אני ${this.name} ואני בן ${this.age}.`);
  }
  
  // Getter
  get birthYear() {
    return this.#birthYear;
  }
  
  // Setter
  set newAge(age) {
    if (age > 0) {
      this.age = age;
      this.#birthYear = new Date().getFullYear() - age;
    }
  }
}

// ירושה (Inheritance)
class Student extends Person {
  constructor(name, age, major) {
    super(name, age); // קריאה לבנאי של Person
    this.major = major;
  }

  // דריסת מתודה (Method Overriding)
  greet() {
    console.log(`שלום, אני ${this.name}, סטודנט ל-${this.major}.`);
  }
}

const p1 = new Person("יעל", 30);
p1.greet();
p1.newAge = 31; // שימוש ב-Setter
console.log("שנת לידה:", p1.birthYear); // שימוש ב-Getter
// console.log(p1.#birthYear); // יזרוק שגיאה (פרטי)

const s1 = new Student("דני", 22, "מדעי המחשב");
s1.greet(); // מפעיל את המתודה הדורסת

הקונספט 'this'

אחד הנושאים המבלבלים ב-JS. הערך של `this` נקבע *בזמן הריצה* (דינמית), בהתאם ל*איך הפונקציה נקראה*.

4 כללי `this`

Default (Global): אם פונקציה נקראת רגיל (לא כמתודה, לא עם `new`, לא עם `bind`), `this` יצביע על האובייקט הגלובלי (window בדפדפן, או undefined ב-Strict Mode).
Implicit (Method): אם פונקציה נקראת כמתודה של אובייקט (obj.myMethod()), `this` יצביע על האובייקט ש*משמאל לנקודה* (obj).
New (Constructor): אם פונקציה נקראת עם `new` (new Person()), `this` יצביע על האובייקט החדש שנוצר.
Explicit (Bind, Call, Apply): ניתן *לכפות* את הערך של `this` באמצעות .call(), .apply(), או .bind().

חריג: פונקציות חץ (Arrow Functions)
לפונקציות חץ *אין `this` משלהן*. הן יורשות את `this` באופן לקסיקלי מה-Scope שבו הן הוגדרו. הן מתעלמות מ-4 הכללים.

קונסול חי: הדגמת `this`

const person = {
  name: "אליס",
  greetRegular: function() {
    // כלל 2 (Implicit): 'this' הוא 'person'
    console.log(`רגיל: שלום, ${this.name}`);
  },
  greetArrow: () => {
    // חריג (Arrow): 'this' הוא מה-Scope החיצוני (Global)
    console.log(`חץ: שלום, ${this?.name || 'גלובלי'}`);
  },
  greetDelayed() {
    setTimeout(function() {
      // פונקציה רגילה בתוך setTimeout מאבדת הקשר
      // כלל 1 (Default): 'this' הוא 'window'
      console.log(`רגיל מאוחר: ${this?.name || 'אבד ההקשר'}`);
    }, 500);

    setTimeout(() => {
      // פונקציית חץ שומרת על ההקשר של 'greetDelayed'
      // 'this' נשאר 'person'
      console.log(`חץ מאוחר: ${this.name}`);
    }, 1000);
  }
};

person.greetRegular();
person.greetArrow();
person.greetDelayed();

🌳 מניפולציית DOM ואירועים (Events)

ה-DOM (Document Object Model) הוא ה-API שמאפשר ל-JS לתקשר עם ה-HTML. אירועים (Events) הם הדרך להגיב לפעולות משתמש.

שיטות נפוצות

שיטה	תיאור
`document.getElementById(id)`	מוצא אלמנט לפי ה-ID הייחודי שלו.
`document.querySelector(selector)`	מוצא את האלמנט הראשון שתואם לסלקטור CSS.
`document.querySelectorAll(selector)`	מוצא את כל האלמנטים שתואמים לסלקטור CSS.
`element.textContent`	קורא או משנה את הטקסט הפנימי (בטוח).
`element.innerHTML`	קורא או משנה את ה-HTML הפנימי (פחות בטוח).
`element.style.color = 'red'`	משנה מאפיין CSS.
`element.classList.add('new')`	מוסיף קלאס CSS.
`element.addEventListener(event, func)`	מאזין לאירוע (כמו `'click'`) ומפעיל פונקציה.
`document.createElement('div')`	יוצר אלמנט חדש.
`parent.append(child)`	מוסיף אלמנט ילד בסוף ההורה.

מעבדת DOM אינטראקטיבית

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

HTML:

<h1 id="title">כותרת ראשית</h1>
<p class="content">זוהי פסקה.</p>
<button id="myButton">לחץ עליי!</button>
<div id="output"></div>
<a id="link" href="https://google.com">גוגל</a>

JavaScript:

// 1. מצא את האלמנטים
const titleElement = document.getElementById('title');
const buttonElement = document.getElementById('myButton');
const outputElement = document.getElementById('output');
const linkElement = document.getElementById('link');

// 2. שנה את הטקסט של הכותרת
titleElement.textContent = "כותרת שהשתנתה ע"י JS";
titleElement.style.color = "#00ff9d"; // ירוק ניאון

// 3. הוסף מאזין לאירוע לחיצה
buttonElement.addEventListener('click', () => {
  const newText = document.createElement('p');
  newText.textContent = `לחצת על הכפתור! ${new Date().toLocaleTimeString()}`;
  newText.style.color = "#ff7afc";
  outputElement.append(newText);
});

// 4. מניעת התנהגות ברירת מחדל
linkElement.addEventListener('click', (event) => {
  event.preventDefault(); // מונע את המעבר לגוגל
  console.log("מנעתי ממך לעבור לגוגל!");
  event.target.textContent = "נמנע מעבר";
});

תצוגה מקדימה חיה:

⚡ אסינכרוניות (Async)

הנושא החשוב ביותר ב-JS מודרני. JS פועלת ב-**Single Thread** עם **Event Loop**. היא לא "נתקעת" ומחכה לפעולות ארוכות (כמו קריאה לשרת), אלא ממשיכה הלאה ומטפלת בתשובה כשתגיע.

מכניקת ה-Event Loop

Call Stack (מחסנית קריאות): קוד סינכרוני נכנס לכאן ומבוצע (LIFO - אחרון נכנס, ראשון יוצא).
Web APIs (דפדפן): פעולות ארוכות (setTimeout, fetch, אירועי DOM) נשלחות לכאן. הדפדפן מטפל בהן "בצד".
Callback Queue (תור): כשפעולת Web API מסתיימת, ה-Callback שלה נשלח לתור (FIFO).
Event Loop: הלולאה שבודקת כל הזמן: "האם ה-Call Stack ריק?". אם כן, היא לוקחת את המשימה הראשונה מה-Callback Queue ודוחפת אותה ל-Call Stack כדי שתרוץ.

Microtask Queue: תור נוסף עם עדיפות גבוהה יותר (למשל, .then() של Promises). ה-Event Loop ירוקן *תמיד* את התור הזה לפני שהוא לוקח משהו מה-Callback Queue הרגיל.

קונסול חי: `setTimeout`, `Promise`, ו-`fetch`

שימו לב לסדר שבו ההודעות מופיעות בקונסול! "סוף" מופיע לפני שהתשובות האסינכרוניות חוזרות.

console.log("1. התחלה (סינכרוני)");

// 1. setTimeout (Macrotask)
setTimeout(() => {
  console.log("5. אחרי 1 שנייה (setTimeout)");
}, 1000);

// 2. Promise (Microtask)
Promise.resolve().then(() => {
  console.log("3. הבטחה (Promise) - Microtask");
});

// 3. fetch (Web API -> Microtask)
// נשתמש ב-jsonplaceholder לדוגמה
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => {
    console.log("4. תשובת fetch (Microtask):", data.title);
  });
  
// 4. קוד סינכרוני
console.log("2. סוף (סינכרוני)");

// פלט צפוי:
// 1. התחלה (סינכרוני)
// 2. סוף (סינכרוני)
// 3. הבטחה (Promise) - Microtask
// 4. תשובת fetch (Microtask): ...
// 5. אחרי 1 שנייה (setTimeout)

Async/Await (הדרך הנקייה ביותר)

תחביר מודרני (ES2017) שמאפשר לכתוב קוד אסינכרוני שנראה סינכרוני. זו פשוט "עטיפה" יפה סביב Promises.

קונסול חי: Async/Await

// פונקציה חייבת להיות מוכרזת כ-async
// כדי שנוכל להשתמש ב-await בתוכה
async function fetchTodo() {
  console.log("מתחיל לקרוא לשרת...");
  try {
    // await "עוצר" את ריצת הפונקציה (לא את הדפדפן!)
    // ומחכה שה-Promise יסתיים
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    
    console.log("המידע שהתקבל:", data.title);
  } catch (error) {
    console.error("אוי, הייתה שגיאה:", error);
  }
}

fetchTodo();
console.log("הקוד הזה רץ *מיד*, הוא לא מחכה ל-fetchTodo");

טיפול בשגיאות

קוד מקצועי חייב לדעת לטפל בשגיאות בחן, באמצעות try...catch...finally.

קונסול חי: `try...catch`

function riskyFunction(shouldThrow) {
  if (shouldThrow) {
    throw new Error("אוי לא! שגיאה מותאמת אישית!");
  }
  return "הכל תקין";
}

console.log("--- ניסיון ראשון (ייכשל) ---");
try {
  console.log("מנסה...");
  const result = riskyFunction(true);
  console.log("הצלחה:", result); // שורה זו לא תרוץ
} catch (error) {
  console.error("נתפסה שגיאה:", error.message);
} finally {
  console.log("בלוק finally רץ תמיד.");
}

console.log("--- ניסיון שני (יצליח) ---");
try {
  console.log("מנסה...");
  const result = riskyFunction(false);
  console.log("הצלחה:", result); // שורה זו כן תרוץ
} catch (error) {
  console.error("נתפסה שגיאה:", error.message);
} finally {
  console.log("בלוק finally רץ תמיד.");
}

JSON (JavaScript Object Notation)

פורמט טקסטואלי סטנדרטי להעברת נתונים. קל מאוד ל-JS לקרוא ולכתוב אותו.

קונסול חי: `JSON.stringify` ו-`JSON.parse`

// 1. אובייקט JavaScript
const user = {
  name: "דנה",
  id: 123,
  isActive: true
};
console.log("אובייקט מקורי:", user);

// 2. המרה לטקסט (JSON String)
// (למשל, כדי לשלוח לשרת)
const jsonString = JSON.stringify(user, null, 2); // 2 = הזחה יפה
console.log("--- מחרוזת JSON ---");
console.log(jsonString);

// 3. המרה חזרה לאובייקט
// (למשל, אחרי קבלה מהשרת)
const receivedString = '{"name":"משה","id":456,"city":"חיפה"}';
const userObject = JSON.parse(receivedString);

console.log("--- אובייקט מ-JSON ---");
console.log("שם:", userObject.name);
console.log("עיר:", userObject.city);

LocalStorage

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

הערה: הדוגמה הזו תכתוב ל-LocalStorage האמיתי של הדפדפן שלכם. תוכלו לראות את התוצאות בלחיצה על F12 -> Application -> Local Storage.

קונסול חי: `setItem`, `getItem`

// שמירת נתונים
localStorage.setItem('username', 'David');

const settings = {
  theme: 'dark',
  fontSize: 16
};
// חובה להפוך אובייקטים ל-JSON
localStorage.setItem('settings', JSON.stringify(settings));

console.log("נתונים נשמרו ב-LocalStorage.");

// קריאת נתונים
const username = localStorage.getItem('username');
console.log(`שלום, ${username}!`);

// קריאת אובייקט דורשת JSON.parse
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log("הגדרות שמורות:", savedSettings);
console.log("גודל גופן שמור:", savedSettings.fontSize);

// מחיקת נתון
// localStorage.removeItem('username');
// console.log("משתמש נמחק.");

// ניקוי הכל
// localStorage.clear();
// console.log("כל האחסון נוקה.");

📦 מודולים (Modules)

הדרך המודרנית (ES6) לארגן קוד בקבצים נפרדים. קובץ אחד מייצא (export) פונקציות/משתנים, וקובץ אחר מייבא (import) אותם.

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

קובץ: math.js (ייצוא)

// ייצוא מוגדר (Named Export)
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

// ייצוא ברירת מחדל (Default Export)
export default function multiply(a, b) {
  return a * b;
}

קובץ: main.js (ייבוא)

// ייבוא ברירת מחדל וייבוא מוגדר
import multiply, { add, PI } from './math.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

// כדי שזה יעבוד ב-HTML:
// <script type="module" src="main.js"></script>

ביטויים רגולריים (Regex)

תחביר מיוחד לחיפוש והחלפת תבניות בתוך מחרוזות. כלי חזק מאוד (ולעיתים מורכב).

קונסול חי: `test` ו-`match`

// ביטוי רגולרי לבדיקת אימייל (פשוט)
//  ^  - תחילת מחרוזת
//  .+ - כל תו, פעם אחת או יותר
//  @  - תו @
//  .+ - כל תו, פעם אחת או יותר
//  \. - נקודה (צריך לברוח עם \)
//  .+ - כל תו, פעם אחת או יותר
//  $  - סוף מחרוזת
const emailRegex = /^.+@.+\..+$/;

const email1 = "test@example.com";
const email2 = "not-an-email";

// 1. .test() - מחזיר true/false
console.log("בדיקת אימייל 1:", emailRegex.test(email1)); // true
console.log("בדיקת אימייל 2:", emailRegex.test(email2)); // false

// 2. .match() - מחזיר את ההתאמות
const text = "המספרים הם 123 ו-456";
const numberRegex = /\d+/g; // \d = ספרה, + = פעם אחת או יותר, g = חיפוש גלובלי

console.log(text.match(numberRegex)); // ["123", "456"]

🌐 Single Page Applications (SPA)

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

איך זה עובד?

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

יתרונות

מהירות: אחרי הטעינה הראשונית, המעברים בין "עמודים" הם כמעט מיידיים.
חווית משתמש: חוויה רציפה וזורמת ללא הבהובים של טעינת דפים.
הפחתת עומס על השרת: השרת שולח פחות מידע (רק נתונים, לא HTML מלא).

חסרונות

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

פריימוורקים פופולריים

רוב ה-SPAs נבנים באמצעות ספריות ופריימוורקים מודרניים:

React: ספרייה פופולרית מבית פייסבוק לבניית ממשקי משתמש.
Angular: פריימוורק מקיף מבית גוגל לבניית אפליקציות גדולות.
Vue.js: פריימוורק מתקדם וגמיש שקל יחסית ללמוד.

מעבדת DOM: דוגמת SPA בסיסית

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