JavaScript للمبتدئين: تعلم أساسيات JavaScript وDOM في المتصفح

هل تريد تعلم JavaScript للمبتدئين من الصفر بالعربي؟ JavaScript هي اللغة الوحيدة التي تعمل في المتصفح مباشرة، وتُمكّنك من بناء مواقع ويب تفاعلية. في هذا الدليل الشامل ستتعلم أساسيات JavaScript و DOM مع أمثلة تطبيقية مباشرة.

هذا المقال جزء من سلسلة تعلم البرمجة — راجع الدليل الشامل لتعلم البرمجة من الصفر كخلفية مساعدة.

المتغيرات — let و const و var

let userName = "محمد";
userName = "أحمد"; // يمكن تغييره

const PI = 3.14159;
// PI = 3; // خطأ!

console.log(userName); // أحمد

الدوال في JavaScript

function greet(name) {
    return "مرحباً " + name + "!";
}

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

console.log(greet("سلمى")); // مرحباً سلمى!
console.log(add(5, 3));      // 8

DOM Manipulation — التحكم في عناصر الصفحة

DOM هو واجهة JavaScript للتفاعل مع HTML. راجع توثيق MDN للـ DOM.

const title = document.getElementById("main-title");
title.textContent = "عنوان جديد!";
title.style.color = "blue";

const newDiv = document.createElement("div");
newDiv.innerHTML = "<h3>بطاقة جديدة</h3>";
document.body.appendChild(newDiv);

الأحداث (Events) في JavaScript

const btn = document.getElementById("myBtn");

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

// أنواع الأحداث: click, mouseover, keydown, submit, load

Fetch API — جلب البيانات من السيرفر

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => {
    console.log(data);
    displayUsers(data);
  })
  .catch(error => console.error("خطأ:", error));

مقالات ذات صلة

• تعلم البرمجة من الصفر — الدليل الشامل (المقال المحوري)
• HTML وCSS: بناء أول موقع من الصفر
• تطوير الويب الخلفي — Node.js للمبتدئين

الأسئلة الشائعة

ما الفرق بين JavaScript وJava؟

لا علاقة بينهما! JavaScript للويب، Java للتطبيقات الضخمة والـ Android.

هل أحتاج تثبيت برنامج لتشغيل JavaScript؟

لا! افتح Developer Tools في Chrome بـ F12 واكتب كودك مباشرة في Console.

جرّب الآن!

افتح Chrome، اضغط F12، اذهب لـ Console، واكتب: console.log("Hello World")