JavaScript هي لغة البرمجة الأكثر استخداماً في العالم. كل موقع ويب تفاعلي يعمل بها. لنبدأ من الصفر!
💡 JavaScript تعمل في المتصفح
لا تحتاج لتثبيت أي شيء. افتح Chrome، اضغط F12، واكتب JavaScript مباشرة في Console.
1. المتغيرات
// ثلاث طرق للمتغيرات
let name = "أحمد"; // يمكن تغييره
const PI = 3.14159; // لا يمكن تغييره
var oldStyle = "قديم"; // قديم، تجنبه
// أنواع البيانات
let text = "مرحبا"; // String
let number = 42; // Number
let isTrue = true; // Boolean
let nothing = null; // Null
let unknown; // Undefined
2. الدوال
// دالة عادية
function greet(name) {
return `مرحباً ${name}!`;
}
// Arrow Function
const add = (a, b) => a + b;
// دالة مجهولة
const double = function(n) { return n * 2; };
console.log(greet("سارة")); // مرحباً سارة!
console.log(add(5, 3)); // 8
3. المصفوفات والكائنات
// Array
const fruits = ["تفاح", "موز", "برتقال"];
fruits.push("مانجو");
console.log(fruits.length); // 4
console.log(fruits[0]); // تفاح
// دوال مصفوفات مفيدة
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);
// Object
const person = {
name: "محمد",
age: 25,
greet() { return `أنا ${this.name}`; }
};
4. التعامل مع DOM
// اختيار العناصر
const title = document.getElementById("title");
const buttons = document.querySelectorAll(".btn");
const firstItem = document.querySelector("li");
// تغيير المحتوى
title.textContent = "عنوان جديد";
title.style.color = "red";
title.classList.add("active");
// إنشاء عناصر جديدة
const newDiv = document.createElement("div");
newDiv.textContent = "محتوى جديد";
document.body.appendChild(newDiv);
5. الأحداث Events
const btn = document.querySelector("#myBtn");
btn.addEventListener("click", function(event) {
console.log("تم الضغط على الزر!");
event.target.style.background = "green";
});
// كلمة مفتاحية
document.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
console.log("تم الضغط على Enter");
}
});
6. fetch والـ APIs
// جلب بيانات من API
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);
}
}
getData();
✅ الخطوة التالية
بعد إتقان JavaScript الأساسية، تعلم React أو Vue لبناء واجهات مستخدم احترافية، أو Node.js للعمل على السيرفر.