الكلمة الرئيسية: JavaScript للمبتدئين | Slug: /javascript-basics-beginners | الكلمات الثانوية: تعلم JavaScript بالعربي، DOM manipulation، ES6، أحداث JavaScript

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

JavaScript هي اللغة الوحيدة التي تعمل في المتصفح وتجعل مواقع الويب تفاعلية. في هذا الدليل ستتعلم الأساسيات مع أمثلة تطبيقية مباشرة.

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

[إعلان AdSense — بعد المقدمة]

المتغيرات — 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

[إعلان AdSense — منتصف المقال]

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));

[إعلان AdSense — قبل الخاتمة]

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

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

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

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

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

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

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

جرّب الآن!

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