מדריך JavaScript מקיף

יסודות JavaScript

💡 מה זה JavaScript?

JavaScript היא שפת התכנות של האינטרנט! כל אתר אינטראקטיבי משתמש בה.
לא להתבלבל: JavaScript ≠ Java (שפות שונות לחלוטין!)
איפה רץ? בדפדפן (Chrome, Firefox) ובשרת (Node.js)
למה ללמוד? חיונית לפיתוח web, אפליקציות מובייל (React Native), ואפילו שרתים!
טיפ: אפשר לפתוח את ה-Console בדפדפן (F12) ולהתנסות בקוד מיד!

הדפסה ל-Console

הדפסה בסיסית:

console.log("Hello, World!"); console.log("JavaScript", "is", "awesome!");

סוגי הדפסה שונים:

console.log("רגיל"); // הדפסה רגילה console.warn("אזהרה"); // אזהרה (צהוב) console.error("שגיאה"); // שגיאה (אדום) console.info("מידע"); // מידע console.table([1, 2, 3]); // טבלה

הערות

הערות בקוד:

// הערה בשורה אחת /* הערה מרובת שורות */ /** * הערת תיעוד (JSDoc) * @param {string} name - שם המשתמש */

הוספת JavaScript לדף HTML

בתוך ה-HTML:

קובץ חיצוני:

מומלץ לשים את ה-script בסוף ה-body או להשתמש ב-defer

משתנים (Variables)

💡 מה זה משתנה?

משתנה - קופסה שמחזיקה מידע. אפשר לשנות את התוכן שלה.
3 דרכים להגדיר:
• let - המודרני והמומלץ (ניתן לשינוי)
• const - קבוע (לא ניתן לשינוי)
• var - הישן (לא מומלץ להשתמש)
כלל אצבע: תמיד השתמשו ב-const, אלא אם צריך לשנות את הערך - אז let

הגדרת משתנים

let - משתנה שניתן לשינוי:

let name = "Alice"; let age = 25; let isStudent = true; // שינוי ערך age = 26; name = "Bob";

const - קבוע:

const PI = 3.14159; const MAX_USERS = 100; const API_KEY = "abc123"; // PI = 3.14; // ❌ שגיאה! לא ניתן לשינוי

הגדרה מרובה:

let x = 5, y = 10, z = 15; const a = 1, b = 2;

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

✅ חוקי:
• מתחיל באות, $ או _
• יכול להכיל אותיות, מספרים, $ ו-_
• רגיש לאותיות גדולות/קטנות (name ≠ Name)

❌ לא חוקי:
• מתחיל במספר (1name)
• מכיל רווחים (my name)
• מילות שמורות (let, const, if)

דוגמאות:

// ✅ טוב let userName = "Alice"; let user_age = 25; let $price = 100; let _temp = 0; // ❌ רע // let 1user = "Bob"; // let user-name = "Alice"; // let let = 5;

טיפוסי נתונים (Data Types)

💡 טיפוסי נתונים ב-JavaScript

JavaScript היא "dynamically typed" - לא צריך להגדיר טיפוס, הוא משתנה אוטומטית!
7 טיפוסים פרימיטיביים:
1. Number - מספרים (5, 3.14, -10)
2. String - טקסט ("Hello")
3. Boolean - true/false
4. Undefined - לא הוגדר
5. Null - ריק במכוון
6. Symbol - ייחודי
7. BigInt - מספרים ענקיים
+ Object - מבנה נתונים מורכב

Number - מספרים

מספרים שלמים ועשרוניים:

let integer = 42; let float = 3.14; let negative = -10; let scientific = 2.5e6; // 2,500,000 // מספרים מיוחדים let infinity = Infinity; let notANumber = NaN; // Not a Number

פעולות מתמטיות:

let sum = 5 + 3; // 8 let diff = 10 - 4; // 6 let product = 4 * 5; // 20 let quotient = 20 / 4; // 5 let remainder = 10 % 3; // 1 (שארית) let power = 2 ** 3; // 8 (חזקה)

String - מחרוזות

יצירת מחרוזות:

let single = 'Hello'; let double = "World"; let backtick = `Hello World`; // Template literal // חיבור מחרוזות let greeting = "Hello" + " " + "World"; let name = "Alice"; let message = `Hello, ${name}!`; // Template literal

Boolean - ערכי אמת

true ו-false:

let isActive = true; let isLoggedIn = false; // השוואות מחזירות Boolean let isEqual = 5 === 5; // true let isGreater = 10 > 5; // true let isLess = 3 < 2; // false

Undefined ו-Null

הבדל בין undefined ל-null:

let x; // undefined (לא הוגדר) let y = undefined; // undefined (במפורש) let z = null; // null (ריק במכוון) console.log(x); // undefined console.log(z); // null

undefined - המשתנה קיים אבל אין לו ערך
null - אנחנו מגדירים במפורש שהערך ריק

בדיקת טיפוס

typeof operator:

console.log(typeof 42); // "number" console.log(typeof "Hello"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" (באג ידוע!) console.log(typeof {}); // "object" console.log(typeof []); // "object"

המרות טיפוסים

המרה למספר:

Number("123"); // 123 parseInt("123"); // 123 parseFloat("3.14"); // 3.14 +"123"; // 123 (קיצור דרך) Number("abc"); // NaN (לא מספר)

המרה למחרוזת:

String(123); // "123" (123).toString(); // "123" 123 + ""; // "123" (קיצור דרך)

המרה ל-Boolean:

Boolean(1); // true Boolean(0); // false Boolean("text"); // true Boolean(""); // false !!value; // המרה ל-Boolean (קיצור דרך)

אופרטורים (Operators)

💡 מה זה אופרטור?

אופרטור - סימן שמבצע פעולה על ערכים.
חשוב! JavaScript יש == ו-===. תמיד השתמשו ב-=== (השוואה מדויקת)!
== vs ===:
• == משווה ערכים (עם המרה אוטומטית)
• === משווה ערכים וטיפוסים (מומלץ!)

אופרטורי השוואה

השוואות:

// שווה (עם המרה) 5 == "5" // true // שווה מדויק (ללא המרה) - מומלץ! 5 === "5" // false 5 === 5 // true // לא שווה 5 != "5" // false 5 !== "5" // true // גדול/קטן 10 > 5 // true 10 < 5 // false 10 >= 10 // true 5 <= 3 // false

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

AND, OR, NOT:

// AND (&&) - שניהם צריכים להיות true true && true // true true && false // false // OR (||) - לפחות אחד צריך להיות true true || false // true false || false // false // NOT (!) - הפוך !true // false !false // true // דוגמה מעשית let age = 25; let hasLicense = true; let canDrive = age >= 18 && hasLicense; // true

אופרטורי השמה

קיצורי דרך:

let x = 10; x += 5; // x = x + 5 → 15 x -= 3; // x = x - 3 → 12 x *= 2; // x = x * 2 → 24 x /= 4; // x = x / 4 → 6 x %= 4; // x = x % 4 → 2 x **= 3; // x = x ** 3 → 8 // הגדלה והקטנה x++; // x = x + 1 x--; // x = x - 1 ++x; // הגדלה לפני --x; // הקטנה לפני

אופרטורים מיוחדים

Ternary operator (תנאי בשורה אחת):

let age = 20; let status = age >= 18 ? "מבוגר" : "קטין"; // אם age >= 18 אז "מבוגר", אחרת "קטין" // דוגמה נוספת let score = 85; let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

Nullish coalescing (??):

let name = null; let displayName = name ?? "אורח"; // "אורח" let count = 0; let value = count ?? 10; // 0 (לא 10!) // ?? בודק רק null/undefined, לא 0 או false

Optional chaining (?.):

let user = { name: "Alice" }; console.log(user?.address?.city); // undefined (לא שגיאה!) // ללא optional chaining // console.log(user.address.city); // ❌ שגיאה!

מחרוזות (Strings)

💡 עבודה עם טקסט

מחרוזת - רצף של תווים (טקסט).
3 דרכים ליצור: 'single', "double", `backtick`
Template Literals (backticks) - המודרני והנוח ביותר!
Immutable - לא ניתן לשנות מחרוזת, רק ליצור חדשה.
טיפ: מחרוזות ב-JS הן אובייקטים עם מתודות רבות!

יצירת מחרוזות

Template Literals - המומלץ:

מתודות מחרוזת

אורך וגישה:

let str = "JavaScript"; str.length; // 10 (אורך) str[0]; // "J" (תו ראשון) str[str.length - 1]; // "t" (תו אחרון) str.charAt(4); // "S"

שינוי רישיות:

let text = "Hello World"; text.toUpperCase(); // "HELLO WORLD" text.toLowerCase(); // "hello world"

חיפוש:

let str = "Hello World"; str.includes("World"); // true str.startsWith("Hello"); // true str.endsWith("World"); // true str.indexOf("o"); // 4 (מיקום ראשון) str.lastIndexOf("o"); // 7 (מיקום אחרון)

חיתוך והחלפה:

let str = "JavaScript"; str.slice(0, 4); // "Java" str.slice(4); // "Script" str.slice(-6); // "Script" (מהסוף) str.substring(0, 4); // "Java" str.replace("Java", "Type"); // "TypeScript" str.replaceAll("a", "A"); // "JAvaScript" → "JAvAScript"

פיצול וחיבור:

let csv = "apple,banana,orange"; let fruits = csv.split(","); // ["apple", "banana", "orange"] let words = ["Hello", "World"]; let sentence = words.join(" "); // "Hello World"

הסרת רווחים:

let str = " Hello World "; str.trim(); // "Hello World" str.trimStart(); // "Hello World " str.trimEnd(); // " Hello World"

מערכים (Arrays)

💡 מה זה מערך?

מערך - רשימה מסודרת של ערכים. כמו מחברת עם דפים ממוספרים.
אינדקס - מיקום האיבר במערך (מתחיל מ-0!)
Dynamic - אפשר להוסיף ולהסיר איברים בקלות.
Mixed Types - מערך יכול להכיל טיפוסים שונים (מספרים, מחרוזות, אובייקטים).
טיפ: למערכים יש המון מתודות שימושיות - map, filter, reduce ועוד!

יצירת מערכים

דרכים ליצור מערך:

// מערך ריק let empty = []; // מערך עם ערכים let numbers = [1, 2, 3, 4, 5]; let fruits = ["apple", "banana", "orange"]; let mixed = [1, "hello", true, null]; // מערך מקונן let matrix = [[1, 2], [3, 4], [5, 6]]; // Array constructor let arr = new Array(5); // מערך עם 5 מקומות ריקים

גישה ושינוי

גישה לאיברים:

let fruits = ["apple", "banana", "orange"]; fruits[0]; // "apple" (ראשון) fruits[1]; // "banana" fruits[fruits.length - 1]; // "orange" (אחרון) fruits.at(-1); // "orange" (דרך מודרנית) // שינוי ערך fruits[1] = "mango"; // ["apple", "mango", "orange"]

הוספה והסרה

הוספה בסוף ובהתחלה:

let arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] - הוספה בסוף arr.push(5, 6); // [1, 2, 3, 4, 5, 6] arr.unshift(0); // [0, 1, 2, 3, 4, 5, 6] - הוספה בהתחלה

הסרה מהסוף ומההתחלה:

let arr = [1, 2, 3, 4, 5]; arr.pop(); // מסיר 5, מחזיר 5 arr.shift(); // מסיר 1, מחזיר 1 // arr הוא עכשיו [2, 3, 4]

splice - הוספה/הסרה במיקום ספציפי:

let arr = [1, 2, 3, 4, 5]; // הסרה arr.splice(2, 1); // מסיר 1 איבר ממיקום 2 → [1, 2, 4, 5] // הוספה arr.splice(2, 0, 3); // מוסיף 3 במיקום 2 → [1, 2, 3, 4, 5] // החלפה arr.splice(1, 2, 10, 20); // מחליף 2 איברים → [1, 10, 20, 4, 5]

מתודות חיפוש

חיפוש איברים:

let arr = [1, 2, 3, 4, 5, 3]; arr.includes(3); // true arr.indexOf(3); // 2 (מיקום ראשון) arr.lastIndexOf(3); // 5 (מיקום אחרון) arr.find(x => x > 3); // 4 (איבר ראשון שעונה לתנאי) arr.findIndex(x => x > 3); // 3 (אינדקס של האיבר)

מתודות מערך חשובות

map - יצירת מערך חדש:

let numbers = [1, 2, 3, 4, 5]; // כפל כל מספר ב-2 let doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10] // המרה למחרוזות let strings = numbers.map(x => `Number: ${x}`);

filter - סינון:

let numbers = [1, 2, 3, 4, 5, 6]; // רק מספרים זוגיים let evens = numbers.filter(x => x % 2 === 0); // [2, 4, 6] // רק מספרים גדולים מ-3 let large = numbers.filter(x => x > 3); // [4, 5, 6]

reduce - צמצום לערך אחד:

let numbers = [1, 2, 3, 4, 5]; // סכום let sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15 // מכפלה let product = numbers.reduce((acc, curr) => acc * curr, 1); // 120

forEach - לולאה:

let fruits = ["apple", "banana", "orange"]; fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`); }); // 0: apple // 1: banana // 2: orange

sort - מיון:

let numbers = [3, 1, 4, 1, 5, 9, 2]; // מיון מספרים numbers.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 9] // מיון הפוך numbers.sort((a, b) => b - a); // [9, 5, 4, 3, 2, 1, 1] // מיון מחרוזות let fruits = ["banana", "apple", "orange"]; fruits.sort(); // ["apple", "banana", "orange"]

מתודות נוספות

שילוב וחיתוך:

let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; // שילוב let combined = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6] let spread = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] // חיתוך let arr = [1, 2, 3, 4, 5]; let sliced = arr.slice(1, 4); // [2, 3, 4] // הפיכה arr.reverse(); // [5, 4, 3, 2, 1] // חיבור לmחרוזת arr.join(", "); // "5, 4, 3, 2, 1"

אובייקטים (Objects)

💡 מה זה אובייקט?

אובייקט - אוסף של זוגות key-value (מפתח-ערך). כמו מילון.
למה זה שימושי? מאפשר לארגן מידע קשור יחד (שם, גיל, כתובת של אדם).
הכל אובייקט! ב-JS כמעט הכל הוא אובייקט - מערכים, פונקציות, תאריכים...
טיפ: אובייקטים הם mutable - אפשר לשנות אותם גם אם הוגדרו עם const!

יצירת אובייקטים

Object literal - הדרך הנפוצה:

גישה למאפיינים

שתי דרכים לגשת:

let person = { name: "Alice", age: 25 }; // Dot notation (מומלץ) person.name; // "Alice" person.age; // 25 // Bracket notation (שימושי למפתחות דינמיים) person["name"]; // "Alice" let key = "age"; person[key]; // 25 // גישה למקונן user.address.city; // "Jerusalem"

הוספה, שינוי ומחיקה

עדכון אובייקט:

let person = { name: "Alice" }; // הוספה person.age = 25; person["city"] = "Tel Aviv"; // שינוי person.name = "Bob"; // מחיקה delete person.city; console.log(person); // { name: "Bob", age: 25 }

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

פונקציות בתוך אובייקט:

Object methods

מתודות שימושיות:

Destructuring

חילוץ ערכים מאובייקט:

פונקציות (Functions)

💡 מה זו פונקציה?

פונקציה - בלוק קוד שאפשר להפעיל שוב ושוב. כמו מתכון.
למה זה חשוב? מונע כפילות קוד, הופך את הקוד לקריא ומאורגן.
3 דרכים להגדיר: function declaration, function expression, arrow function
Arrow Functions - הדרך המודרנית והקצרה ביותר!
טיפ: פונקציות ב-JS הן "first-class citizens" - אפשר להעביר אותן כפרמטרים!

הגדרת פונקציות

Function Declaration:

function greet(name) { return `Hello, ${name}!`; } greet("Alice"); // "Hello, Alice!" // ללא return function sayHi() { console.log("Hi!"); } // מחזיר undefined

Function Expression:

const greet = function(name) { return `Hello, ${name}!`; }; greet("Bob"); // "Hello, Bob!"

Arrow Function - המודרני:

// תחביר מלא const greet = (name) => { return `Hello, ${name}!`; }; // קיצור - return אוטומטי const greet = name => `Hello, ${name}!`; // ללא פרמטרים const sayHi = () => "Hi!"; // פרמטר אחד - ללא סוגריים const double = x => x * 2; // מספר פרמטרים const add = (a, b) => a + b;

פרמטרים

פרמטרים עם ברירת מחדל:

function greet(name = "Guest") { return `Hello, ${name}!`; } greet(); // "Hello, Guest!" greet("Alice"); // "Hello, Alice!"

Rest parameters (...):

function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } sum(1, 2, 3); // 6 sum(1, 2, 3, 4, 5); // 15

Callback Functions

פונקציה כפרמטר:

function processArray(arr, callback) { return arr.map(callback); } let numbers = [1, 2, 3, 4, 5]; let doubled = processArray(numbers, x => x * 2); // [2, 4, 6, 8, 10] // דוגמה נפוצה setTimeout(() => { console.log("After 2 seconds"); }, 2000);

Higher-Order Functions

פונקציה שמחזירה פונקציה:

function multiplier(factor) { return x => x * factor; } const double = multiplier(2); const triple = multiplier(3); double(5); // 10 triple(5); // 15

בקרת זרימה (Control Flow)

💡 קבלת החלטות בקוד

בקרת זרימה - איך התוכנית מחליטה מה לעשות.
if/else - "אם... אז... אחרת..."
switch - בחירה מתוך אפשרויות רבות
טיפ: השתמשו ב-=== ולא ב-== בתנאים!

if/else

תנאים בסיסיים:

תנאים מורכבים:

let age = 25; let hasLicense = true; if (age >= 18 && hasLicense) { console.log("יכול לנהוג"); } if (age < 18 || !hasLicense) { console.log("לא יכול לנהוג"); }

switch

בחירה מרובה:

let day = "Monday"; switch (day) { case "Monday": console.log("תחילת שבוע"); break; case "Friday": console.log("סוף שבוע"); break; case "Saturday": case "Sunday": console.log("סופש"); break; default: console.log("יום רגיל"); }

Truthy ו-Falsy

ערכים שנחשבים false:

// Falsy values (נחשבים false) false 0 "" (מחרוזת ריקה) null undefined NaN // כל השאר הם Truthy! if ("hello") { // true console.log("Truthy!"); } if (0) { // false console.log("לא יודפס"); }

לולאות (Loops)

💡 חזרה על פעולות

לולאה - חזרה על קוד מספר פעמים.
for - כשיודעים כמה פעמים
while - כשלא יודעים כמה פעמים
for...of - לולאה על מערכים (מומלץ!)
for...in - לולאה על מפתחות אובייקט
טיפ: זהירות מלולאות אינסופיות!

for loop

לולאה קלאסית:

// הדפסת 0 עד 4 for (let i = 0; i < 5; i++) { console.log(i); } // לולאה על מערך let fruits = ["apple", "banana", "orange"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); }

for...of - המודרני

לולאה על מערכים:

for...in

לולאה על מפתחות:

let person = { name: "Alice", age: 25, city: "Tel Aviv" }; for (let key in person) { console.log(`${key}: ${person[key]}`); } // name: Alice // age: 25 // city: Tel Aviv

while ו-do...while

while loop:

let i = 0; while (i < 5) { console.log(i); i++; } // do...while - רץ לפחות פעם אחת let j = 0; do { console.log(j); j++; } while (j < 5);

break ו-continue

שליטה בלולאה:

// break - יציאה מהלולאה for (let i = 0; i < 10; i++) { if (i === 5) break; console.log(i); // 0, 1, 2, 3, 4 } // continue - דילוג על איטרציה for (let i = 0; i < 5; i++) { if (i === 2) continue; console.log(i); // 0, 1, 3, 4 }

DOM Manipulation

💡 מה זה DOM?

DOM - Document Object Model. עץ של כל האלמנטים בדף HTML.
למה זה חשוב? זה מה שהופך את JavaScript לאינטראקטיבי! שינוי תוכן, סגנון, הוספת אלמנטים.
טיפ: תמיד בדקו שהאלמנט קיים לפני שמשנים אותו!
מודרני: השתמשו ב-querySelector במקום getElementById

בחירת אלמנטים

דרכים לבחור אלמנטים:

// לפי ID let element = document.getElementById("myId"); // לפי Class (ראשון) let element = document.querySelector(".myClass"); // לפי Class (כולם) let elements = document.querySelectorAll(".myClass"); // לפי Tag let paragraphs = document.querySelectorAll("p"); // CSS Selector מורכב let element = document.querySelector("div.container > p.text");

שינוי תוכן

עדכון טקסט ו-HTML:

let element = document.querySelector("#myDiv"); // שינוי טקסט element.textContent = "טקסט חדש"; // שינוי HTML element.innerHTML = "טקסט מודגש"; // קריאת ערך מ-input let input = document.querySelector("#myInput"); let value = input.value;

שינוי סגנון

CSS דרך JavaScript:

let element = document.querySelector("#myDiv"); // שינוי סגנון ישיר element.style.color = "red"; element.style.backgroundColor = "yellow"; element.style.fontSize = "20px"; // הוספת/הסרת class element.classList.add("active"); element.classList.remove("hidden"); element.classList.toggle("visible"); // בדיקה אם יש class if (element.classList.contains("active")) { console.log("האלמנט פעיל"); }

יצירה והוספת אלמנטים

יצירת אלמנטים חדשים:

// יצירת אלמנט let newDiv = document.createElement("div"); newDiv.textContent = "אלמנט חדש"; newDiv.classList.add("my-class"); // הוספה לסוף document.body.appendChild(newDiv); // הוספה לפני אלמנט let parent = document.querySelector("#parent"); let child = document.querySelector("#child"); parent.insertBefore(newDiv, child); // הסרת אלמנט newDiv.remove();

Attributes

עבודה עם תכונות:

let img = document.querySelector("img"); // קריאה let src = img.getAttribute("src"); let alt = img.alt; // קיצור דרך // שינוי img.setAttribute("src", "new-image.jpg"); img.alt = "תמונה חדשה"; // הסרה img.removeAttribute("title"); // בדיקה if (img.hasAttribute("alt")) { console.log("יש alt"); }

Events (אירועים)

💡 מה זה Event?

Event - משהו שקורה בדף: לחיצה, הקלדה, גלילה...
Event Listener - "מאזין" שמחכה לאירוע ומגיב אליו.
למה זה חשוב? זה מה שהופך את האתר לאינטראקטיבי!
טיפ: תמיד השתמשו ב-addEventListener, לא ב-onclick!

Event Listeners

הוספת מאזין לאירוע:

אירועים נפוצים

סוגי אירועים:

// עכבר element.addEventListener("click", handler); element.addEventListener("dblclick", handler); element.addEventListener("mouseenter", handler); element.addEventListener("mouseleave", handler); // מקלדת input.addEventListener("keydown", handler); input.addEventListener("keyup", handler); input.addEventListener("keypress", handler); // טופס form.addEventListener("submit", handler); input.addEventListener("input", handler); input.addEventListener("change", handler); input.addEventListener("focus", handler); input.addEventListener("blur", handler); // חלון window.addEventListener("load", handler); window.addEventListener("resize", handler); window.addEventListener("scroll", handler);

Event Object

מידע על האירוע:

button.addEventListener("click", (event) => { console.log(event.type); // "click" console.log(event.target); // האלמנט שנלחץ console.log(event.clientX); // מיקום X של העכבר console.log(event.clientY); // מיקום Y של העכבר }); // מניעת התנהגות ברירת מחדל form.addEventListener("submit", (e) => { e.preventDefault(); // מונע שליחת טופס console.log("טופס נשלח!"); }); // עצירת התפשטות element.addEventListener("click", (e) => { e.stopPropagation(); // עוצר את האירוע מלהתפשט });

הסרת Event Listener

הסרת מאזין:

function handleClick() { console.log("נלחץ!"); } // הוספה button.addEventListener("click", handleClick); // הסרה button.removeEventListener("click", handleClick);

Async/Await ו-Promises

💡 מה זה Asynchronous?

Asynchronous - קוד שלא רץ מיד, אלא מחכה (לשרת, לקובץ, לטיימר).
Promise - הבטחה שמשהו יקרה בעתיד (הצלחה או כישלון).
async/await - דרך נוחה לכתוב קוד אסינכרוני שנראה סינכרוני.
למה זה חשוב? רוב הפעולות באינטרנט הן אסינכרוניות!
טיפ: תמיד השתמשו ב-try/catch עם async/await!

Promises

יצירת Promise:

async/await - המודרני

פונקציה אסינכרונית:

async function fetchData() { try { let response = await fetch("https://api.example.com/data"); let data = await response.json(); console.log(data); } catch (error) { console.error("שגיאה:", error); } } // קריאה לפונקציה fetchData(); // Arrow function const getData = async () => { let data = await fetch("url"); return data.json(); };

Fetch API

בקשות HTTP:

// GET request async function getData() { let response = await fetch("https://api.example.com/users"); let data = await response.json(); return data; } // POST request async function postData() { let response = await fetch("https://api.example.com/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Alice", age: 25 }) }); let data = await response.json(); return data; }

Promise.all

ריצה מקבילה:

async function fetchMultiple() { try { let [users, posts, comments] = await Promise.all([ fetch("api/users").then(r => r.json()), fetch("api/posts").then(r => r.json()), fetch("api/comments").then(r => r.json()) ]); console.log(users, posts, comments); } catch (error) { console.error(error); } }

ES6+ Features

💡 מה זה ES6?

ES6 (ECMAScript 2015) - גרסה מודרנית של JavaScript עם תכונות חדשות.
למה זה חשוב? הופך את הקוד לקצר, קריא ויעיל יותר.
תכונות עיקריות: let/const, arrow functions, template literals, destructuring, spread/rest
טיפ: כל הדפדפנים המודרניים תומכים ב-ES6!

Spread Operator (...)

פיזור מערכים ואובייקטים:

// מערכים let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] // העתקה let copy = [...arr1]; // אובייקטים let person = { name: "Alice", age: 25 }; let updated = { ...person, city: "Tel Aviv" }; // { name: "Alice", age: 25, city: "Tel Aviv" } // העברה לפונקציה let numbers = [1, 2, 3, 4, 5]; Math.max(...numbers); // 5

Destructuring

חילוץ ערכים:

// מערכים let [a, b, c] = [1, 2, 3]; let [first, ...rest] = [1, 2, 3, 4, 5]; // first = 1, rest = [2, 3, 4, 5] // אובייקטים let { name, age } = { name: "Alice", age: 25 }; // בפרמטרים של פונקציה function greet({ name, age }) { console.log(`${name} is ${age} years old`); } greet({ name: "Bob", age: 30 });

Default Parameters

ערכי ברירת מחדל:

function greet(name = "Guest", greeting = "Hello") { return `${greeting}, ${name}!`; } greet(); // "Hello, Guest!" greet("Alice"); // "Hello, Alice!" greet("Bob", "Hi"); // "Hi, Bob!"

Optional Chaining (?.)

גישה בטוחה למאפיינים:

let user = { name: "Alice", address: { city: "Tel Aviv" } }; // ללא optional chaining // let zip = user.address.zip.code; // ❌ שגיאה! // עם optional chaining let zip = user.address?.zip?.code; // undefined (לא שגיאה!) // עם מתודות user.greet?.(); // לא יקרה כלום אם greet לא קיים

Nullish Coalescing (??)

ערך ברירת מחדל:

let name = null; let displayName = name ?? "Guest"; // "Guest" let count = 0; let value = count ?? 10; // 0 (לא 10!) // הבדל מ-|| let value1 = 0 || 10; // 10 let value2 = 0 ?? 10; // 0

Modules (מודולים)

💡 מה זה Module?

Module - קובץ JavaScript שמייצא ומייבא קוד.
למה זה חשוב? מאפשר לארגן קוד גדול לקבצים קטנים ומנוהלים.
export/import - הדרך המודרנית לשתף קוד בין קבצים.
טיפ: צריך להוסיף type="module" ל-script tag!

Export ו-Import

ייצוא מקובץ:

// utils.js export function add(a, b) { return a + b; } export const PI = 3.14159; export class Calculator { multiply(a, b) { return a * b; } } // ייצוא ברירת מחדל export default function greet(name) { return `Hello, ${name}!`; }

ייבוא לקובץ:

// main.js import greet from "./utils.js"; // ברירת מחדל import { add, PI, Calculator } from "./utils.js"; // named imports // ייבוא הכל import * as utils from "./utils.js"; utils.add(2, 3); // שינוי שם import { add as sum } from "./utils.js";

שימוש ב-HTML:

JSON ו-APIs

💡 מה זה JSON?

JSON - JavaScript Object Notation. פורמט להעברת נתונים.
למה זה חשוב? כמעט כל API באינטרנט משתמש ב-JSON!
דומה לאובייקט JS - אבל המפתחות בגרשיים כפולים.
טיפ: JSON.parse() ו-JSON.stringify() הם החברים הכי טובים שלכם!

JSON Methods

המרה בין JSON למחרוזת:

// אובייקט JS let person = { name: "Alice", age: 25, hobbies: ["reading", "coding"] }; // המרה למחרוזת JSON let jsonString = JSON.stringify(person); // '{"name":"Alice","age":25,"hobbies":["reading","coding"]}' // המרה חזרה לאובייקט let parsed = JSON.parse(jsonString); console.log(parsed.name); // "Alice"

עבודה עם APIs

דוגמה מלאה:

// קבלת נתונים מ-API async function getUsers() { try { let response = await fetch("https://jsonplaceholder.typicode.com/users"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } let users = await response.json(); console.log(users); return users; } catch (error) { console.error("Error:", error); } } // שליחת נתונים ל-API async function createUser(userData) { try { let response = await fetch("https://jsonplaceholder.typicode.com/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(userData) }); let newUser = await response.json(); return newUser; } catch (error) { console.error("Error:", error); } } // שימוש getUsers(); createUser({ name: "Alice", email: "alice@example.com" });

Local Storage

שמירת נתונים בדפדפן:

// שמירה localStorage.setItem("username", "Alice"); // שמירת אובייקט let user = { name: "Alice", age: 25 }; localStorage.setItem("user", JSON.stringify(user)); // קריאה let username = localStorage.getItem("username"); // קריאת אובייקט let savedUser = JSON.parse(localStorage.getItem("user")); // מחיקה localStorage.removeItem("username"); // מחיקת הכל localStorage.clear();