تعلم JavaScript للمبتدئين: دليل شامل لفهم JavaScript من الصفر مع أمثلة عملية

1. يعني إيه JavaScript؟

أين تُستخدم JavaScript؟

• Front-End: التفاعل مع صفحات الويب (أزرار، قوائم، حركات، تحقق من البيانات).
• Back-End: بناء سيرفرات باستخدام Node.js.
• Mobile Apps: باستخدام React Native أو Ionic.
• Desktop Apps: باستخدام Electron.

HTML وCSS وJavaScript — إيه دور كل واحدة؟

هل JavaScript هي نفسها Java؟

لا. JavaScript وJava لغتان مختلفتان تمامًا في التصميم والاستخدام. الاسم المتشابه سببه تاريخي فقط.

مثال بسيط

// عند الضغط على الزر، تظهر رسالة
document.querySelector("#myBtn").addEventListener("click", function() {
  alert("مرحبًا بك في JavaScript!");
});

هذا الكود يبحث عن زر بـ id="myBtn"، ولما المستخدم يضغط عليه، تظهر رسالة ترحيبية.

2. الفرق بين var وlet وconst

جدول مقارنة

أمثلة

// const — ثابت، لا يتغير
const PI = 3.14;
// PI = 3.15; // ❌ Error

// let — متغير، يمكن تغييره
let score = 0;
score = 10; // ✅ شغال

// var — قديم، تجنبه
var name = "Ahmed";
var name = "Ali"; // ✅ شغال (وده مشكلة!)

💡 القاعدة: استخدم const دائمًا. لو احتجت تغيّر القيمة، استخدم let. لا تستخدم var في المشاريع الحديثة.

3. الفرق بين == و===

أمثلة

// == (Loose Equality) — يحول النوع تلقائيًا
5 == "5"     // true  ← حوّل "5" لرقم ثم قارن
0 == false   // true  ← حوّل false لـ 0 ثم قارن
null == undefined // true

// === (Strict Equality) — يقارن القيمة + النوع
5 === "5"    // false ← رقم ≠ نص
0 === false  // false ← رقم ≠ boolean
null === undefined // false

مقارنة

💡 القاعدة: استخدم === دائمًا، إلا إذا كنت متأكدًا إنك محتاج == لسبب محدد.

4. يعني إيه Function؟

Function Declaration

// تعريف Function
function greet(name) {
  return "مرحبًا يا " + name + "!";
}

// استدعاء Function
const message = greet("Ahmed");
console.log(message); // "مرحبًا يا Ahmed!"

Function Expression

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

console.log(add(5, 3)); // 8

المفاهيم الأساسية

ليه نستخدم Functions؟

• إعادة الاستخدام: تكتب الكود مرة واحدة وتستدعيه وقت ما تحتاج.
• تنظيم الكود: تقسّم المشروع لأجزاء صغيرة ومفهومة.
• تقليل التكرار: بدل ما تكرر نفس الكود 10 مرات، تكتبه مرة في Function.

5. الفرق بين Function وArrow Function

المقارنة

// Regular Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

// Arrow Function (سطر واحد = return ضمني)
const double = (n) => n * 2;

جدول المقارنة

💡 نصيحة: استخدم Arrow Functions في Callbacks (مثل map, filter, addEventListener). استخدم Regular Functions كـ Methods داخل Objects أو Classes.

6. يعني إيه Array؟

إنشاء Array

const users = ["Ali", "Ahmed", "Mohamed"];

// الوصول إلى عنصر — Index يبدأ من 0
console.log(users[0]); // "Ali"
console.log(users[1]); // "Ahmed"
console.log(users[2]); // "Mohamed"

// عدد العناصر
console.log(users.length); // 3

7. إزاي أضيف عنصر للـ Array؟

إضافة عناصر

const fruits = ["Apple", "Banana"];

// إضافة في النهاية
fruits.push("Orange");
// ["Apple", "Banana", "Orange"]

// إضافة في البداية
fruits.unshift("Mango");
// ["Mango", "Apple", "Banana", "Orange"]

// إضافة في موضع محدد (Index 2)
fruits.splice(2, 0, "Grape");
// ["Mango", "Apple", "Grape", "Banana", "Orange"]

حذف عناصر

const colors = ["Red", "Green", "Blue", "Yellow"];

// حذف من النهاية
colors.pop();       // يحذف "Yellow"

// حذف من البداية
colors.shift();     // يحذف "Red"

// حذف من موضع محدد (Index 1, عنصر واحد)
colors.splice(1, 1); // يحذف "Blue"

ملخص سريع

8. الفرق بين map وfilter وforEach

جدول المقارنة

أمثلة عملية (نفس الـ Array)

const numbers = [1, 2, 3, 4, 5, 6];

// map — مضاعفة كل رقم
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10, 12]

// filter — الأرقام الزوجية فقط
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

// forEach — طباعة كل رقم
numbers.forEach(n => console.log(n));
// 1, 2, 3, 4, 5, 6

9. يعني إيه Object؟

مثال

const user = {
  name: "Ahmed",
  age: 22,
  job: "Developer",
  skills: ["HTML", "CSS", "JavaScript"],
  greet: function() {
    return "مرحبًا، أنا " + this.name;
  }
};

// الوصول بـ Dot Notation
console.log(user.name);    // "Ahmed"
console.log(user.age);     // 22

// الوصول بـ Bracket Notation
console.log(user["job"]);  // "Developer"

// استدعاء Method
console.log(user.greet()); // "مرحبًا، أنا Ahmed"

المفاهيم الأساسية

10. إيه هو DOM؟

كيف يعمل DOM؟

لما المتصفح يحمّل صفحة HTML، بيحوّلها لـ شجرة (Tree) من الكائنات. كل عنصر HTML بيبقى كائن (Node) في الشجرة. JavaScript بتتعامل مع الشجرة دي — مش مع كود HTML مباشرة.

أساسيات التعامل مع DOM

// اختيار عنصر واحد
const title = document.querySelector("h1");
const btn = document.querySelector("#myBtn");
const card = document.querySelector(".card");

// اختيار كل العناصر المطابقة
const items = document.querySelectorAll(".item");

// اختيار بـ ID
const header = document.getElementById("header");

أشهر Methods للتعامل مع DOM

11. إزاي أغير محتوى HTML بـ JavaScript؟

المقارنة

مثال

const title = document.querySelector("h1");

// تغيير النص فقط
title.textContent = "مرحبًا بك في JavaScript!";

// تغيير HTML كامل
title.innerHTML = "مرحبًا بك في <strong>JavaScript</strong>!";

⚠️ ملاحظة أمنية: لا تستخدم innerHTML لعرض بيانات من المستخدم مباشرة — لأنها ممكن تنفذ أكواد ضارة (XSS Attack). استخدم textContent للبيانات اللي مصدرها المستخدم.

12. إزاي أغير CSS بـ JavaScript؟

الطريقة الأولى: style (مباشرة)

const box = document.querySelector(".box");
box.style.backgroundColor = "#667eea";
box.style.color = "#fff";
box.style.padding = "20px";

الطريقة الثانية: classList (الأفضل ✅)

const box = document.querySelector(".box");

// إضافة class
box.classList.add("active");

// حذف class
box.classList.remove("active");

// تبديل class (إضافة لو مش موجود، حذف لو موجود)
box.classList.toggle("active");

// التحقق من وجود class
box.classList.contains("active"); // true أو false

💡 نصيحة: استخدم classList دائمًا لأنها تفصل بين JavaScript وCSS. حدد التنسيقات في ملف CSS بـ class، واستخدم JavaScript فقط لتبديل الـ class.

13. إزاي أعمل Event في JavaScript؟

أشهر Events

مثال: addEventListener

const button = document.querySelector("#myBtn");

button.addEventListener("click", function() {
  console.log("تم الضغط على الزر!");
});

// أو باستخدام Arrow Function
button.addEventListener("click", () => {
  console.log("تم الضغط على الزر!");
});

14. الفرق بين onclick وaddEventListener

مقارنة

// onclick — حدث واحد فقط
button.onclick = function() {
  console.log("الأول");
};
button.onclick = function() {
  console.log("الثاني"); // ← يُلغي الأول!
};

// addEventListener — أكثر من حدث
button.addEventListener("click", () => console.log("الأول"));
button.addEventListener("click", () => console.log("الثاني"));
// الاتنين هيشتغلوا!

15. إزاي أعمل Dark Mode بـ JavaScript؟

HTML

<button id="darkBtn">🌙 Dark Mode</button>

CSS

body {
  background-color: #fff;
  color: #1a1a2e;
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  background-color: #1a1a2e;
  color: #f5f5f5;
}

JavaScript

const darkBtn = document.querySelector("#darkBtn");

darkBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
});

حفظ الاختيار بـ localStorage

const darkBtn = document.querySelector("#darkBtn");

// تحميل الاختيار المحفوظ
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

darkBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  // حفظ الاختيار
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

16. إزاي أعمل Calculator بـ JavaScript؟

Architecture بسيطة

Input (ضغط زر) → Event (addEventListener) → JavaScript Logic (حساب) → Result (عرض النتيجة)

HTML (مبسط)

<div class="calculator">
  <input type="text" id="display" disabled>
  <div class="buttons">
    <button class="num">7</button>
    <button class="num">8</button>
    <button class="num">9</button>
    <button class="op">+</button>
    <button class="num">4</button>
    <button class="num">5</button>
    <button class="num">6</button>
    <button class="op">-</button>
    <button class="num">1</button>
    <button class="num">2</button>
    <button class="num">3</button>
    <button class="op">*</button>
    <button class="num">0</button>
    <button id="clear">C</button>
    <button id="equals">=</button>
    <button class="op">/</button>
  </div>
</div>

JavaScript (بدون eval)

const display = document.querySelector("#display");
let firstNum = "";
let operator = "";
let secondNum = "";

// أزرار الأرقام
document.querySelectorAll(".num").forEach(btn => {
  btn.addEventListener("click", () => {
    if (operator === "") {
      firstNum += btn.textContent;
      display.value = firstNum;
    } else {
      secondNum += btn.textContent;
      display.value = secondNum;
    }
  });
});

// أزرار العمليات
document.querySelectorAll(".op").forEach(btn => {
  btn.addEventListener("click", () => {
    operator = btn.textContent;
  });
});

// زر المساواة
document.querySelector("#equals").addEventListener("click", () => {
  const a = parseFloat(firstNum);
  const b = parseFloat(secondNum);
  let result = 0;

  switch(operator) {
    case "+": result = a + b; break;
    case "-": result = a - b; break;
    case "*": result = a * b; break;
    case "/": result = b !== 0 ? a / b : "Error"; break;
  }

  display.value = result;
  firstNum = result.toString();
  operator = "";
  secondNum = "";
});

// زر المسح
document.querySelector("#clear").addEventListener("click", () => {
  firstNum = "";
  operator = "";
  secondNum = "";
  display.value = "";
});

⚠️ لماذا لا نستخدم eval()؟ لأنها تنفذ أي كود كـ JavaScript، وده خطر أمني كبير خصوصًا لو فيه بيانات من المستخدم. الأفضل كتابة المنطق يدويًا.

17. إزاي أعمل To-Do List بـ JavaScript؟

HTML

<div class="todo-app">
  <h2>قائمة المهام</h2>
  <div class="input-group">
    <input type="text" id="taskInput" placeholder="أضف مهمة جديدة...">
    <button id="addBtn">إضافة</button>
  </div>
  <ul id="taskList"></ul>
</div>

JavaScript

const taskInput = document.querySelector("#taskInput");
const addBtn = document.querySelector("#addBtn");
const taskList = document.querySelector("#taskList");
let tasks = [];

// إضافة مهمة
function addTask() {
  const text = taskInput.value.trim();
  if (text === "") return;

  tasks.push({ text, completed: false });
  taskInput.value = "";
  renderTasks();
}

// عرض المهام
function renderTasks() {
  taskList.innerHTML = "";

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.textContent = task.text;

    if (task.completed) {
      li.style.textDecoration = "line-through";
      li.style.opacity = "0.6";
    }

    // زر إكمال
    li.addEventListener("click", () => {
      tasks[index].completed = !tasks[index].completed;
      renderTasks();
    });

    // زر حذف
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "✕";
    deleteBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      tasks.splice(index, 1);
      renderTasks();
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);
  });
}

// Events
addBtn.addEventListener("click", addTask);
taskInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") addTask();
});

💡 تطوير المشروع: يمكن إضافة localStorage لحفظ المهام بعد إعادة تحميل الصفحة:

// حفظ
localStorage.setItem("tasks", JSON.stringify(tasks));

// تحميل
tasks = JSON.parse(localStorage.getItem("tasks")) || [];

18. ليه JavaScript مش شغال؟ (Troubleshooting Guide)

أشهر 12 سببًا

1. Syntax Error: قوس ناقص أو فاصلة منقوطة غلط.
2. ملف JS غير مربوط: نسيت <script src="script.js">.
3. Path خاطئ: مسار الملف غلط.
4. Selector خاطئ: querySelector مش لاقي العنصر.
5. اسم Variable خاطئ: حالة الأحرف (Case Sensitivity) مهمة.
6. استخدام Variable قبل تعريفها: ReferenceError.
7. Scope Problem: المتغير معرّف في Scope مختلف.
8. Event غير مربوط: addEventListener مش متحط.
9. Console Error: فيه Error لكن مش بتقرأه.
10. DOM مش محمّل: الكود بيتنفذ قبل ما العناصر تتحمل. الحل: ضع <script> قبل </body> أو استخدم defer.
11. نوع بيانات خاطئ: مثلاً بتجمع String + Number وبتتوقع نتيجة عددية.
12. Function لا تُستدعى: عرّفتها بس نسيت تنادي عليها.

كيف تستخدم DevTools Console

1. اضغط F12 أو Right-click → Inspect.
2. روح لتبويب Console.
3. اقرأ Error Message — بيقولك نوع الخطأ.
4. شوف Line Number — بيوديك للسطر المشكلة.
5. استخدم console.log() لطباعة قيم المتغيرات والتأكد منها.

Checklist سريعة

• ☑️ افتح Console — هل فيه Error؟
• ☑️ اقرأ Error Message + Line Number.
• ☑️ هل ملف JS مربوط بـ <script>؟
• ☑️ هل Path صحيح؟
• ☑️ هل Selector صحيح؟
• ☑️ هل المتغير معرّف؟
• ☑️ هل Event مربوط صح؟
• ☑️ هل الكود بيتنفذ بعد تحميل DOM؟

19. يعني إيه undefined؟

أمثلة

// متغير بدون قيمة
let x;
console.log(x); // undefined

// Property غير موجودة
const user = { name: "Ahmed" };
console.log(user.age); // undefined

// Function بدون return
function sayHi() {
  console.log("Hi");
}
const result = sayHi();
console.log(result); // undefined

20. يعني إيه null؟

مثال

let selectedUser = null; // لا يوجد مستخدم مختار حاليًا

// لاحقًا...
selectedUser = { name: "Ahmed" }; // تم اختيار مستخدم

الفرق بين undefined وnull

21. يعني إيه Scope؟

أمثلة

// Global Scope — متاح في كل مكان
const globalVar = "أنا عالمي";

function example() {
  // Function Scope — متاح داخل الـ Function فقط
  const funcVar = "أنا داخل Function";

  if (true) {
    // Block Scope — متاح داخل الـ {} فقط
    const blockVar = "أنا داخل Block";
    console.log(blockVar);   // ✅ شغال
  }

  // console.log(blockVar);  // ❌ Error — مش متاح هنا
  console.log(funcVar);      // ✅ شغال
}

// console.log(funcVar);     // ❌ Error — مش متاح هنا

الربط بـ var وlet وconst

💡 ليه Scope مهم؟ فهم Scope يمنع أخطاء شائعة مثل تعديل متغير بالخطأ من مكان غير متوقع، ويساعد في تنظيم الكود.

22. يعني إيه Closure؟

مثال عملي

function createCounter() {
  let count = 0; // متغير خاص

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count مش متاح من بره — محمي بـ Closure!

شرح المثال خطوة بخطوة

1. createCounter() أنشأت متغير count = 0.
2. رجّعت Function جديدة — هي اللي بنحفظها في counter.
3. createCounter() خلصت تنفيذها... لكن الـ Function المرجّعة لسه "فاكرة" count!
4. كل مرة نستدعي counter()، بتزود count بـ 1 وترجعه.
5. المتغير count محمي — مفيش حاجة تانية تقدر توصله مباشرة.

💡 ليه Closures مهمة؟ تُستخدم في Data Privacy، Callbacks، Event Handlers، وكتير من JavaScript Patterns.

23. يعني إيه Promise؟

لماذا نحتاج Promises؟

JavaScript بطبيعتها Single-Threaded — تنفذ أمر واحد في المرة. لكن عمليات زي جلب بيانات من سيرفر أو قراءة ملف بتاخد وقت. Promises تسمح لنا بالتعامل مع هذه العمليات بدون ما الصفحة "تقف".

الحالات الثلاثة

مثال بسيط

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("تمت العملية بنجاح! ✅");
  } else {
    reject("حدث خطأ ❌");
  }
});

myPromise
  .then(result => console.log(result))   // "تمت العملية بنجاح! ✅"
  .catch(error => console.log(error))     // لو فشلت
  .finally(() => console.log("انتهى")); // دائمًا يتنفذ

24. يعني إيه Async/Await؟

مثال

// باستخدام Promise Chaining
function getData() {
  fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));
}

// باستخدام Async/Await (أسهل في القراءة ✅)
async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

مقارنة

💡 ملاحظة: await يُستخدم فقط داخل async function. وasync/await مش بديل لـ Promises — ده مجرد طريقة أنظف لكتابتها.

25. إيه هو API؟

كيف تعمل API؟

Frontend → HTTP Request → API (Server) → Database → Response (JSON) → Frontend يعرض البيانات

أشهر HTTP Methods

مثال: جلب بيانات بـ fetch()

async function getUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    users.forEach(user => {
      console.log(user.name);
    });
  } catch (error) {
    console.log("Error:", error);
  }
}

getUsers();

ما هو JSON؟

JSON (JavaScript Object Notation) هي صيغة نصية لتبادل البيانات. تبدو مثل Object في JavaScript:

{
  "name": "Ahmed",
  "age": 22,
  "skills": ["HTML", "CSS", "JavaScript"]
}

مشروع JavaScript يجمع كل ما تعلمناه

بعد ما غطّينا 25 مفهوم من أساسيات JavaScript، حان الوقت تطبّقهم كلهم في مشروع واحد.

مشروع مقترح: Smart To-Do Dashboard

🎯 الهدف: المشروع ده بيجمع كل المفاهيم اللي شرحناها في مكان واحد. كمان هتقدر تضيفه لـ Portfolio بتاعك كأول مشروع JavaScript حقيقي.

ماذا أتعلم بعد JavaScript؟

⚠️ ملاحظة: اختيار Framework يعتمد على هدفك. React أشهر في سوق العمل عالميًا. Angular قوي في Enterprise Applications. Vue أسهل في البداية. لكن الأساس هو JavaScript — لو فهمتها صح، أي Framework هيبقى أسهل.

الخلاصة

1. JavaScript هي لغة التفاعل في الويب — بدونها الموقع "ثابت".
2. استخدم const كخيار أول وlet عند الحاجة. تجنب var.
3. الـ Functions هي أساس تنظيم الكود — اتعلم كمان Arrow Functions.
4. Arrays وObjects هما الطريقة الأساسية لتخزين البيانات.
5. DOM هو الجسر بين JavaScript وصفحة الويب.
6. Events هي اللي بتخلي الموقع يتفاعل مع المستخدم.
7. ابني مشاريع من أول يوم — Calculator وTo-Do List بداية ممتازة.
8. Promises وAsync/Await ضروريين للتعامل مع APIs.
9. لما حاجة مش شغالة — Console هو صديقك الأول.
10. بعد JavaScript، الخطوة التالية هي TypeScript ثم Framework.

الأسئلة الشائعة (FAQ)