המדריך האולטימטיבי ל-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: הדרך המועדפת. מגדיר קבוע שלא ניתן להקצות מחדש. Block Scoped. (אם הקבוע הוא אובייקט או מערך, ניתן לשנות את תוכנם הפנימי).
let: להגדרת משתנה שערכו עשוי להשתנות. גם הוא Block Scoped.
var: הדרך הישנה. Function Scoped. מומלץ להימנע משימוש בה בקוד מודרני בגלל התנהגות מבלבלת עם Hoisting.

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

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

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

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})`);

console.log(`שלום, ${name}! אתה בן ${age}.`);

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

⚙️ אופרטורים

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

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

סוג	אופרטורים	תיאור
חשבון	`+`, `-`, ``, `/`, `%`, `*`	פעולות מתמטיות.
הקצאה	`=`, `+=`, `-=`, `*=`, `/=`	הקצאת ערכים למשתנים.
השוואה	`==`, `!=`, `===`, `!==`, `>`, `<`, `>=`, `<=`	השוואת ערכים. מומלץ תמיד להשתמש ב-`===` (השוואה קפדנית).
לוגיים	`&&`, `\|\|`, `!`	צירוף תנאים בוליאניים.
טרנרי	`condition ? val1 : val2`	קיצור של `if...else`.
Nullish Coalescing	`??`	מחזיר את הערך הימני רק אם הערך השמאלי הוא `null` או `undefined`.
Optional Chaining	`?.`	גישה בטוחה למאפיינים מקוננים – מחזיר `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: "משה" };
console.log("עיר (בבטחה):", user?.address?.city);

🚦 בקרת זרימה

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

// 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;
  default:      console.log("יום אחר");
}

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

console.log("--- for...of (ערכים) ---");
for (const letter of arr) console.log(letter);

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. פונקציית חץ
const add = (a, b) => a + b;
console.log("חיבור:", add(5, 3));

// 3. Rest (...)
function sum(...numbers) { return numbers.reduce((t, n) => t + n, 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, op) { return op(a, b); }
console.log("HOC:", doOperation(10, 5, add));
console.log("HOC:", doOperation(10, 5, (a, b) => a - b));

🔬 Scope & Closures

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

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

if (true) {
  let blockVar = "אני בבלוק";
  var functionVar = "אני בורח מהבלוק";
}
console.log(functionVar);
// console.log(blockVar); // ReferenceError

// Closure
function createCounter() {
  let count = 0;
  return {
    increment: () => { count++; console.log(count); },
    getValue:  () => count,
  };
}
const a = createCounter();
a.increment(); a.increment();
const b = createCounter();
b.increment();
console.log("ערך A:", a.getValue());

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

מערכים ב-JS גמישים מאוד - דינמיים ועשירים במתודות פונקציונליות.

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

numbers.push(40); console.log("push:", numbers);
numbers.pop();    console.log("pop:",  numbers);

numbers.forEach((num, i) => console.log(`איבר ${i}: ${num}`));

const doubled = numbers.map(n => n * 2);
console.log("map:", doubled);

const over15 = numbers.filter(n => n > 15);
console.log("filter > 15:", over15);

const sum = numbers.reduce((t, n) => t + n, 0);
console.log("reduce sum:", sum);

console.log("find > 10:",  numbers.find(n => n > 10));
console.log("some < 0:",   numbers.some(n => n < 0));
console.log("every > 0:",  numbers.every(n => n > 0));

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

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

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

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

const { firstName, age } = person;
console.log(firstName, age);

const dynamicKey = "country";
person[dynamicKey] = "ישראל";
console.log(person);

console.log("keys:",    Object.keys(person));
console.log("values:",  Object.values(person));
console.log("entries:", Object.entries(person));

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

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

const num = 3.14159;
console.log("--- Number ---");
console.log(num.toFixed(2));
console.log(parseInt("25.5"));
console.log(parseFloat("25.5"));

console.log("--- Math ---");
console.log(Math.random());
console.log(Math.max(10, 5, 20));
console.log(Math.floor(2.9));
console.log(Math.ceil(2.1));

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

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

const numbers = [1, 2, 2, 3, 4, 4, 5];
const unique = new Set(numbers);
console.log("Set:", unique);

const uniqueArr = [...unique];
console.log("מערך ייחודי:", uniqueArr);

unique.add(6); unique.add(1);
console.log("האם 3 קיים?", unique.has(3));

const myMap = new Map();
const objKey = { id: 1 };
myMap.set(objKey, "ערך של אובייקט");
myMap.set("stringKey", "ערך רגיל");
console.log(myMap.get(objKey));
console.log("size:", myMap.size);

🏛️ Classes ו-Prototype

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

הדרך הישנה: Constructor Function ו-Prototype

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`שלום, אני ${this.name} ואני בן ${this.age}.`);
};
const p1 = new Person("משה", 50);
p1.greet();

קונסול חי: 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}.`); }
  get birthYear() { return this.#birthYear; }
  set newAge(age) {
    if (age > 0) {
      this.age = age;
      this.#birthYear = new Date().getFullYear() - age;
    }
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
  greet() { console.log(`שלום, אני ${this.name}, סטודנט ל-${this.major}.`); }
}

const p1 = new Person("יעל", 30);
p1.greet();
p1.newAge = 31;
console.log("שנת לידה:", p1.birthYear);

const s1 = new Student("דני", 22, "מדעי המחשב");
s1.greet();

הקונספט 'this'

הערך של this נקבע בזמן הריצה, בהתאם לאיך הפונקציה נקראה.

4 כללי this

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

חריג: לפונקציות חץ אין this משלהן. הן יורשות את this לקסיקלית מה-Scope שבו הוגדרו.

const person = {
  name: "אליס",
  greetRegular: function() { console.log(`רגיל: שלום, ${this.name}`); },
  greetArrow: () => { console.log(`חץ: שלום, ${this?.name || 'גלובלי'}`); },
  greetDelayed() {
    setTimeout(function() {
      console.log(`רגיל מאוחר: ${this?.name || 'אבד ההקשר'}`);
    }, 500);
    setTimeout(() => {
      console.log(`חץ מאוחר: ${this.name}`);
    }, 1000);
  }
};
person.greetRegular();
person.greetArrow();
person.greetDelayed();

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

ה-DOM (Document Object Model) הוא ה-API שמאפשר ל-JS לתקשר עם ה-HTML.

שיטות נפוצות

שיטה	תיאור
`document.getElementById(id)`	מוצא אלמנט לפי ה-ID.
`document.querySelector(selector)`	מוצא את האלמנט הראשון שתואם ל-CSS selector.
`document.querySelectorAll(selector)`	מוצא את כל האלמנטים שתואמים.
`element.textContent`	קורא/משנה את הטקסט הפנימי (בטוח).
`element.innerHTML`	קורא/משנה את ה-HTML הפנימי (פחות בטוח).
`element.style.color = 'red'`	משנה מאפיין CSS.
`element.classList.add('new')`	מוסיף קלאס.
`element.addEventListener(event, fn)`	מאזין לאירוע.
`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:

const titleElement = document.getElementById('title');
const buttonElement = document.getElementById('myButton');
const outputElement = document.getElementById('output');
const linkElement = document.getElementById('link');

titleElement.textContent = "כותרת שהשתנתה ע\"י JS";
titleElement.style.color = "#c9a96e";

buttonElement.addEventListener('click', () => {
  const newText = document.createElement('p');
  newText.textContent = `לחצת על הכפתור! ${new Date().toLocaleTimeString()}`;
  newText.style.color = "#745a27";
  outputElement.append(newText);
});

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

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

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

JS פועלת ב-Single Thread עם Event Loop. היא לא "נתקעת" ומחכה לפעולות ארוכות.

מכניקת ה-Event Loop

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

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

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

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

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

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

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(r => r.json())
  .then(data => console.log("4. תשובת fetch:", data.title));

console.log("2. סוף (סינכרוני)");

Async/Await

async function fetchTodo() {
  console.log("מתחיל לקרוא לשרת...");
  try {
    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.

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

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

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

JSON

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

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

const jsonString = JSON.stringify(user, null, 2);
console.log("--- מחרוזת JSON ---");
console.log(jsonString);

const receivedString = '{"name":"משה","id":456,"city":"חיפה"}';
const userObject = JSON.parse(receivedString);
console.log("שם:", userObject.name);
console.log("עיר:", userObject.city);

LocalStorage

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

הדוגמה תכתוב ל-LocalStorage האמיתי של הדפדפן. F12 → Application → Local Storage כדי לראות.

localStorage.setItem('username', 'David');

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
console.log("נתונים נשמרו ב-LocalStorage.");

const username = localStorage.getItem('username');
console.log(`שלום, ${username}!`);

const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log("הגדרות שמורות:", savedSettings);

// localStorage.removeItem('username');
// localStorage.clear();

📦 מודולים

הדרך המודרנית (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)

תחביר מיוחד לחיפוש והחלפת תבניות בתוך מחרוזות.

const emailRegex = /^.+@.+\..+$/;

console.log("test 1:", emailRegex.test("test@example.com")); // true
console.log("test 2:", emailRegex.test("not-an-email"));     // false

const text = "המספרים הם 123 ו-456";
const numberRegex = /\d+/g;
console.log(text.match(numberRegex)); // ["123", "456"]

🌐 Single Page Applications (SPA)

אפליקציית עמוד-יחיד טוענת דף HTML יחיד וכל התוכן העתידי נטען באופן דינמי, ללא טעינה מחדש.

איך זה עובד?

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

יתרונות

מהירות: מעברים בין "עמודים" מיידיים.
חווית משתמש: חוויה רציפה ללא הבהובי טעינה.
פחות עומס על השרת: פחות מידע ברשת.

חסרונות

טעינה ראשונית איטית: טוענים את כל הקוד מראש.
אתגרי SEO: תוכן דינמי קשה יותר לאינדוקס.
תלות ב-JS: אם JS מושבת, האתר לא יעבוד.

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

React - ספרייה פופולרית מבית פייסבוק.
Angular - פריימוורק מקיף מבית גוגל.
Vue.js - פריימוורק גמיש שקל ללמוד.

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