تعلم جافاسكربت من الصفر - الدليل الكامل للمبتدئين 2026

جافاسكربت هي اللغة الأكثر استخداماً في تطوير الويب. بحسب استطلاع Stack Overflow 2026، يستخدمها أكثر من 65% من المطورين حول العالم. في هذا الدليل الشامل، ستتعلم جافاسكربت من الألف إلى الياء.

لماذا جافاسكربت؟

الحقائق والأرقام:

• أكثر لغة برمجة استخداماً في العالم لمدة 11 عاماً متتالياً
• أكثر من 1.8 مليار موقع ويب يستخدمها
• أكثر من 17 مليون مطور جافاسكربت حول العالم
• متوسط الراتب: 4000-10000 دولار شهرياً في المنطقة العربية

أين تُستخدم جافاسكربت؟

الفرونت إند: React, Vue.js, Angular, Svelte

الباك إند: Node.js, Deno, Bun

تطبيقات الموبايل: React Native, Ionic

سطح المكتب: Electron

الذكاء الاصطناعي: TensorFlow.js

الألعاب: Phaser, Three.js

الأساسيات

المتغيرات:

// const - ثابت لا يتغير (الخيار الافتراضي)
const PI = 3.14159;
const siteName = "CodeVista";

// let - متغير قابل للتغيير
let score = 0;
score = 100; // ✅ مسموح

// var - طريقة قديمة (تجنبها)
var oldWay = "لا تستخدمني"; // ❌

أنواع البيانات:

// String - نص
const name = "أحمد";
const greeting = مرحباً ${name}; // Template Literals

// Number - رقم
const age = 25;
const price = 99.99;

// Boolean - منطقي
const isActive = true;

// Array - مصفوفة
const colors = ["أحمر", "أزرق", "أخضر"];

// Object - كائن
const user = {
  name: "سارة",
  age: 22,
  hobbies: ["قراءة", "برمجة"]
};

// null و undefined
const empty = null;
let notDefined; // undefined

العمليات:

// حسابية
console.log(10 + 5);  // 15
console.log(10 - 5);  // 5
console.log(10 * 5);  // 50
console.log(10 / 3);  // 3.333...
console.log(10 % 3);  // 1
console.log(2 ** 10); // 1024

// مقارنة
console.log(5 === 5);   // true (مساواة صارمة)
console.log(5 == "5");   // true (مساواة مرنة - تجنبها)
console.log(5 !== "5");  // true

// منطقية
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

الجمل الشرطية

const grade = 85;
let result;

if (grade >= 90) {
  result = "ممتاز";
} else if (grade >= 80) {
  result = "جيد جداً";
} else if (grade >= 70) {
  result = "جيد";
} else {
  result = "يحتاج تحسين";
}

console.log(result);

// Ternary Operator
const status = grade >= 60 ? "ناجح" : "راسب";

// Switch
const day = "الأحد";
switch (day) {
  case "الأحد": console.log("بداية الأسبوع"); break;
  case "الجمعة": console.log("عطلة!"); break;
  default: console.log("يوم عادي");
}

الحلقات التكرارية

// for
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for...of (للمصفوفات)
const fruits = ["تفاح", "موز", "برتقال"];
for (const fruit of fruits) {
  console.log(fruit);
}

// for...in (للكائنات)
const person = { name: "أحمد", age: 25 };
for (const key in person) {
  console.log(${key}: ${person[key]});
}

// while
let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

// forEach
fruits.forEach((fruit, index) => {
  console.log(${index}: ${fruit});
});

الدوال

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

// Arrow Function (الأكثر شيوعاً في 2026)
const multiply = (a, b) => a * b;

// Default Parameters
const greet = (name = "زائر") => مرحباً ${name}!;

// Rest Parameters
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4, 5)); // 15

// Destructuring
const { name: userName, age: userAge } = user;
const [first, ...rest] = colors;

المصفوفات المتقدمة

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// map - تحويل كل عنصر
const doubled = numbers.map(n => n * 2);

// filter - تصفية
const evens = numbers.filter(n => n % 2 === 0);

// reduce - تجميع
const total = numbers.reduce((sum, n) => sum + n, 0);

// find - البحث عن عنصر
const found = numbers.find(n => n > 5);

// some / every
const hasEven = numbers.some(n => n % 2 === 0); // true
const allPositive = numbers.every(n => n > 0);    // true

// spread operator
const moreNumbers = [...numbers, 11, 12, 13];

// chaining
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 3)
  .reduce((sum, n) => sum + n, 0);

Async/Await و Promises

// Promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: "بيانات من الخادم" });
    }, 1000);
  });
};

// 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.error("حدث خطأ:", error);
  }
}

// Promise.all
const [users, posts] = await Promise.all([
  fetch("/api/users").then(r => r.json()),
  fetch("/api/posts").then(r => r.json())
]);

التعامل مع DOM

// اختيار عناصر
const title = document.getElementById("title");
const buttons = document.querySelectorAll(".btn");
const form = document.querySelector("form");

// تعديل المحتوى
title.textContent = "عنوان جديد";
title.innerHTML = "عنوان جديد";

// تعديل الأنماط
title.style.color = "blue";
title.classList.add("active");
title.classList.toggle("hidden");

// الأحداث
buttons.forEach(btn => {
  btn.addEventListener("click", (e) => {
    console.log("تم النقر!", e.target);
  });
});

// إنشاء عناصر
const newDiv = document.createElement("div");
newDiv.textContent = "عنصر جديد";
document.body.appendChild(newDiv);

ES2026 الميزات الحديثة

// Optional Chaining
const city = user?.address?.city ?? "غير محدد";

// Nullish Coalescing
const value = null ?? "قيمة افتراضية";

// Top-level Await
const data = await fetch("/api/data").then(r => r.json());

// Record & Tuple (ES2026)
const point = #{ x: 1, y: 2 };
const coords = #[1, 2, 3];

// Pattern Matching (ES2026)
// قريباً في المتصفحات

مشاريع عملية

1. تطبيق قائمة مهام:

class TodoApp {
  constructor() {
    this.todos = [];
  }
  
  add(text) {
    this.todos.push({ id: Date.now(), text, done: false });
  }
  
  toggle(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.done = !todo.done;
  }
  
  remove(id) {
    this.todos = this.todos.filter(t => t.id !== id);
  }
  
  getAll() {
    return this.todos;
  }
}

الخطوات التالية

React أو Vue.js: لبناء واجهات مستخدم حديثة

Node.js: لتطوير الخوادم

TypeScript: لكتابة كود أكثر أماناً

Next.js: لبناء تطبيقات ويب كاملة

ابدأ رحلتك مع مسار جافاسكربت على CodeVista الآن!