ما هي JavaScript ولماذا هي ضرورية؟

JavaScript هي لغة البرمجة التي تجعل صفحات الويب حية وتفاعلية. HTML يبني الهيكل، CSS يضيف الجمال، و JavaScript يضيف السلوك والتفاعل. بدونها، صفحات الويب ستكون مجرد مستندات ثابتة.

في هذا الدليل ستتعلم أساسيات JavaScript من الصفر مع تطبيقات عملية تبنيها خطوة بخطوة.

كيف تبدأ مع JavaScript

<!-- أضف JavaScript في نهاية body -->
<body>
  <h1 id="title">مرحباً</h1>
  <button id="btn">اضغط هنا</button>
  
  <script src="app.js"></script>
</body>

<!-- أو مباشرة -->
<script>
  console.log("مرحباً بالعالم!");
  alert("أول سكربت لي!");
</script>

المتغيرات وأنواع البيانات

// النصوص (Strings)
const name = "فاطمة";
const greeting = `مرحباً ${name}`; // Template literal

// الأرقام (Numbers)
const age = 25;
const price = 99.99;

// القيم المنطقية (Booleans)
const isStudent = true;
const isAdmin = false;

// المصفوفات (Arrays)
const colors = ["أحمر", "أزرق", "أخضر"];
const numbers = [1, 2, 3, 4, 5];

// الكائنات (Objects)
const user = {
  name: "أحمد",
  age: 30,
  city: "الرياض",
  skills: ["HTML", "CSS", "JS"]
};

// الوصول للبيانات
console.log(colors[0]);      // "أحمر"
console.log(user.name);      // "أحمد"
console.log(user.skills[1]); // "CSS"

العمليات والشروط

// العمليات الحسابية
const total = 100 + 50;   // 150
const tax = total * 0.15;  // 22.5
const remainder = 10 % 3;  // 1

// المقارنات
console.log(5 === 5);   // true (مساواة صارمة)
console.log(5 === "5");  // false
console.log(5 > 3);     // true
console.log(5 !== 3);   // true

// الشروط
const grade = 85;

if (grade >= 90) {
  console.log("ممتاز 🌟");
} else if (grade >= 75) {
  console.log("جيد جداً 👍");
} else if (grade >= 60) {
  console.log("جيد");
} else {
  console.log("يحتاج تحسين");
}

// Ternary operator (اختصار)
const status = age >= 18 ? "بالغ" : "قاصر";

الحلقات (Loops)

// for loop
for (let i = 0; i < 5; i++) {
  console.log(`العدد: ${i}`);
}

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

// forEach (الأكثر استخداماً)
fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});

// while loop
let count = 0;
while (count < 3) {
  console.log(`العد: ${count}`);
  count++;
}

الدوال (Functions)

// تعريف دالة
function greet(name) {
  return `مرحباً ${name}!`;
}
console.log(greet("سارة")); // "مرحباً سارة!"

// دالة سهمية (Arrow Function)
const add = (a, b) => a + b;
const square = n => n * n;

// دالة مع قيم افتراضية
function createUser(name, role = "مستخدم") {
  return { name, role };
}
createUser("أحمد");         // {name: "أحمد", role: "مستخدم"}
createUser("سارة", "مدير"); // {name: "سارة", role: "مدير"}

// تطبيق عملي: حاسبة خصم
function calculateDiscount(price, discount = 10) {
  const discountAmount = price * (discount / 100);
  const finalPrice = price - discountAmount;
  return {
    original: price,
    discount: discountAmount,
    final: finalPrice
  };
}

const result = calculateDiscount(200, 15);
console.log(result); // {original: 200, discount: 30, final: 170}

التعامل مع DOM: جعل الصفحة تفاعلية

DOM (Document Object Model) هو كيف يفهم JavaScript بنية صفحة HTML:

// اختيار العناصر
const title = document.getElementById('title');
const buttons = document.querySelectorAll('.btn');
const firstCard = document.querySelector('.card');

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

// تعديل التنسيق
title.style.color = '#e94560';
title.style.fontSize = '2rem';

// إضافة وإزالة classes
title.classList.add('active');
title.classList.remove('hidden');
title.classList.toggle('dark-mode');

// الأحداث (Events)
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  alert('تم الضغط!');
});

// أحداث شائعة
// click, dblclick, mouseover, mouseout
// keydown, keyup, keypress
// submit, change, input, focus, blur

تطبيق عملي 1: عداد تفاعلي

<!-- HTML -->
<div class="counter">
  <button id="decrease">-</button>
  <span id="count">0</span>
  <button id="increase">+</button>
  <button id="reset">إعادة</button>
</div>

// JavaScript
let count = 0;
const countDisplay = document.getElementById('count');

document.getElementById('increase').addEventListener('click', () => {
  count++;
  countDisplay.textContent = count;
  countDisplay.style.color = count > 0 ? 'green' : count < 0 ? 'red' : 'black';
});

document.getElementById('decrease').addEventListener('click', () => {
  count--;
  countDisplay.textContent = count;
  countDisplay.style.color = count > 0 ? 'green' : count < 0 ? 'red' : 'black';
});

document.getElementById('reset').addEventListener('click', () => {
  count = 0;
  countDisplay.textContent = 0;
  countDisplay.style.color = 'black';
});

تطبيق عملي 2: قائمة مهام

<!-- HTML -->
<div class="todo-app">
  <input type="text" id="todoInput" placeholder="أضف مهمة...">
  <button id="addBtn">إضافة</button>
  <ul id="todoList"></ul>
  <p>المهام: <span id="todoCount">0</span></p>
</div>

// JavaScript
const input = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const list = document.getElementById('todoList');
const countEl = document.getElementById('todoCount');
let todos = [];

function render() {
  list.innerHTML = '';
  todos.forEach((todo, i) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span style="${todo.done ? 'text-decoration:line-through;opacity:0.5' : ''}">
        ${todo.text}
      </span>
      <button onclick="toggleTodo(${i})">${todo.done ? '↩️' : '✅'}</button>
      <button onclick="deleteTodo(${i})">🗑️</button>
    `;
    list.appendChild(li);
  });
  countEl.textContent = todos.filter(t => !t.done).length;
}

addBtn.addEventListener('click', () => {
  const text = input.value.trim();
  if (text) {
    todos.push({ text, done: false });
    input.value = '';
    render();
  }
});

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addBtn.click();
});

function toggleTodo(index) {
  todos[index].done = !todos[index].done;
  render();
}

function deleteTodo(index) {
  todos.splice(index, 1);
  render();
}

التخزين المحلي (localStorage)

// حفظ بيانات في المتصفح (تبقى حتى بعد إغلاقه)
localStorage.setItem('username', 'أحمد');
localStorage.setItem('todos', JSON.stringify(todos));

// جلب البيانات
const username = localStorage.getItem('username');
const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];

// حذف
localStorage.removeItem('username');
localStorage.clear(); // حذف الكل

ملخص المهارات المكتسبة

المتغيرات وأنواع البيانات: strings, numbers, arrays, objects
الشروط والحلقات: if/else, for, forEach
الدوال: تعريفها واستخدامها مع معاملات وقيم إرجاع
التعامل مع DOM: اختيار العناصر وتعديلها والاستماع للأحداث
مشاريع عملية: عداد تفاعلي وقائمة مهام
localStorage: حفظ البيانات في المتصفح

الخطوة التالية: تعلم JavaScript الحديث (ES6+) ثم انتقل لـ React لبناء تطبيقات ويب متقدمة.

تعلّم JavaScript من الصفر: أساسيات البرمجة التفاعلية للويب