المراجعة الشاملة لـ JavaScript

// ✅ الطريقة الحديثة const gameName = "Valorant"; // لا تتغير أبداً let playerScore = 0; // ستتغير أثناء اللعب let isLoggedIn = false; // قيمة منطقية // ❌ محاولة تغيير const تسبب خطأ // gameName = "CS2"; → TypeError! // إعادة الإعلان بـ let لاحقاً playerScore = 500; isLoggedIn = true;

const name = "Ahmed"; const level = 42; // الطريقة القديمة (Concatenation) console.log("مرحباً يا " + name + "، مستواك: " + level); // الطريقة الحديثة — Template Literals (Backticks) console.log(`مرحباً يا ${name}، مستواك: ${level}`); console.log(`ضعف المستوى: ${level * 2}`); // يمكن كتابة تعابير داخل ${} // Template Literals تدعم الأسطر المتعددة const msg = ` اللاعب: ${name} المستوى: ${level} الحالة: نشط `;

// String → Number const strNum = "42"; Number(strNum) // → 42 parseInt("42.9px") // → 42 (يأخذ الجزء الصحيح) parseFloat("3.14") // → 3.14 +"100" // → 100 (اختصار) // Number → String (42).toString() // → "42" String(42) // → "42" // أي قيمة → Boolean Boolean(0) // → false (Falsy) Boolean("") // → false (Falsy) Boolean("hello") // → true (Truthy) Boolean([]) // → true (Truthy — مصفوفة فارغة!)

// 1. Function Declaration — يمكن استدعاؤها قبل تعريفها (Hoisting) function greet(name = "ضيف") { // Default Parameter return `أهلاً يا ${name}!`; } greet("Ahmed"); // → "أهلاً يا Ahmed!" greet(); // → "أهلاً يا ضيف!" // 2. Function Expression — مخزنة في متغير const square = function(n) { return n * n; }; // 3. Arrow Function — الأكثر استخداماً في الكود الحديث const multiply = (a, b) => a * b; // سطر واحد const add = (a, b) => { return a + b; }; // أو مع block // دالة تقبل دالة أخرى (Higher-Order Function) function applyTwice(fn, value) { return fn(fn(value)); } applyTwice(n => n * 2, 3); // → 12 (3→6→12)

const games = ["Roblox", "Minecraft", "Fortnite"]; // الوصول — الفهرس يبدأ من 0 games[0] // "Roblox" games[games.length-1] // "Fortnite" (آخر عنصر) games.at(-1) // "Fortnite" (الطريقة الحديثة) // إضافة وحذف games.push("Valorant") // أضف للآخر games.unshift("GTA") // أضف للأول games.pop() // احذف الأخير games.shift() // احذف الأول games.splice(1, 1) // احذف من index 1 عنصراً واحداً // البحث games.indexOf("Minecraft") // 1 games.includes("FIFA") // false // نسخ ودمج const copy = [...games]; // Spread للنسخ const all = ["CS2", ...games, "FIFA"]; // دمج const sliced = games.slice(0, 2); // أول عنصرين

const player = { name: "Ahmed", level: 42, skills: ["Sniper", "Driver"], stats: { kills: 1200, deaths: 300 }, getKD() { return (this.stats.kills / this.stats.deaths).toFixed(2); } }; // الوصول player.name // "Ahmed" player["level"] // 42 (مفيد للمفاتيح المتغيرة) player.getKD() // "4.00" // Destructuring — استخراج القيم بذكاء const { name, level, stats: { kills } } = player; console.log(name, level, kills); // Ahmed 42 1200 // إضافة وتعديل وحذف خصائص player.rank = "Gold"; // إضافة player.level = 50; // تعديل delete player.rank; // حذف // Object Methods Object.keys(player) // ["name", "level", ...] Object.values(player) // ["Ahmed", 42, ...] Object.entries(player) // [["name","Ahmed"], ...] // نسخ Object (Spread) const updated = { ...player, level: 55 }; // نسخة جديدة مع تغيير

// ─── اختيار العناصر ─── const el = document.getElementById("myId"); const el2 = document.querySelector(".myClass"); // أول مطابق const all = document.querySelectorAll("p"); // NodeList // ─── تعديل المحتوى ─── el.innerText = "نص جديد"; // نص فقط el.innerHTML = "<b>نص غامق</b>"; // يدعم HTML el.textContent = "نص بدون تنسيق"; // أسرع وأأمن // ─── تعديل الـ CSS ─── el.style.backgroundColor = "#ff0"; el.style.display = "none"; // ─── الـ classList ─── el.classList.add("active"); el.classList.remove("hidden"); el.classList.toggle("dark-mode"); el.classList.contains("active"); // true/false // ─── الـ Attributes ─── el.setAttribute("href", "#"); el.getAttribute("id"); el.dataset.userId; // يقرأ data-user-id // ─── إنشاء وحذف عناصر ─── const div = document.createElement("div"); div.innerHTML = "<p>محتوى جديد</p>"; document.body.appendChild(div); // إضافة div.remove(); // حذف

const btn = document.querySelector("#myBtn"); // الطريقة الصحيحة للاستماع للأحداث btn.addEventListener("click", (event) => { event.preventDefault(); // منع السلوك الافتراضي (مثل submit) console.log("تم الضغط!", event.target); }); // أهم الأحداث: // click / dblclick — النقر // mouseover / mouseout — تمرير الفأرة // keydown / keyup — لوحة المفاتيح // input / change — تغيير حقل النص // submit — إرسال نموذج // load / DOMContentLoaded — تحميل الصفحة // scroll — التمرير // Event Delegation — استمع على الأب بدلاً من كل ابن document.querySelector("#gameList").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("ضغطت على:", e.target.textContent); } });

// ─── Promise الأساسية ─── const myPromise = new Promise((resolve, reject) => { const success = true; if (success) resolve({ data: "نجح الطلب" }); else reject("حدث خطأ"); }); // ─── Async/Await — الطريقة المحترفة ─── async function fetchPlayerData(playerId) { try { // 1. إرسال الطلب const res = await fetch(`https://api.game.com/players/${playerId}`); // 2. التحقق من نجاح الاستجابة if (!res.ok) throw new Error(`HTTP Error: ${res.status}`); // 3. تحويل الرد إلى JSON const player = await res.json(); // 4. استخدام البيانات console.log(`اللاعب: ${player.name}، الرتبة: ${player.rank}`); return player; } catch (error) { console.error("فشل جلب البيانات:", error.message); return null; } } // ─── POST Request — إرسال بيانات للسيرفر ─── async function saveScore(score) { const res = await fetch("https://api.game.com/scores", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ score, timestamp: Date.now() }) }); return res.json(); } // ─── Promise.all — تنفيذ طلبات متعددة بالتوازي ─── const [players, maps, rankings] = await Promise.all([ fetch("/api/players").then(r => r.json()), fetch("/api/maps").then(r => r.json()), fetch("/api/rankings").then(r => r.json()) ]); // كلها تُنفَّذ معاً — أسرع بكثير

// ─── math.js ─── export const add = (a, b) => a + b; export const PI = 3.14159; export default function calculate() { /* ... */ } // ─── main.js ─── import calculate, { add, PI } from "./math.js"; import * as MathUtils from "./math.js"; // استيراد الكل

// ─── الـ Class الأساسية ─── class Character { // Private Fields (خاصة لا تُرى من الخارج) #health; constructor(name, hp) { this.name = name; this.#health = hp; } // Getter — للوصول للقيم الخاصة get hp() { return this.#health; } attack(target, damage) { console.log(`${this.name} attacks ${target.name} for ${damage}!`); target.takeDamage(damage); } takeDamage(dmg) { this.#health = Math.max(0, this.#health - dmg); } // Static — يُستدعى على الـ Class مباشرة static create(name) { return new Character(name, 100); } toString() { return `${this.name} (HP: ${this.hp})`; } } // ─── الوراثة (Inheritance) ─── class Warrior extends Character { constructor(name) { super(name, 150); // استدعاء Constructor الأب this.armor = 30; } // تجاوز (Override) دالة الأب takeDamage(dmg) { const reduced = Math.max(0, dmg - this.armor); super.takeDamage(reduced); // استدعاء دالة الأب } } const hero = new Warrior("Ahmed"); const boss = Character.create("Dragon"); boss.attack(hero, 50); // Warrior يمتص 30 درع → يأخذ 20 ضرر فقط