الإعلام الآلي — جافا سكريبت: التعامل مع DOM والأحداث — الثالثة ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري

جافا سكريبت: التعامل مع DOM والأحداث

جافا سكريبت (JavaScript) هي لغة برمجة تمكن من إضافة التفاعلية إلى صفحات الويب. تتعامل JS مع كائنات الصفحة عبر DOM (Document Object Model) وتستجيب لأحداث المستخدم.

ماهو DOM؟

DOM (نموذج كائن المستند) هو تمثيل شجري (Arbre DOM) لصفحة HTML. كل عنصر HTML يصبح عقدة (Node) في الشجرة يمكن الوصول إليها وتعديلها بواسطة JavaScript.

الوصول إلى العناصر

// الوصول بواسطة ID
let titre = document.getElementById("titre");

// الوصول بواسطة class
let elements = document.getElementsByClassName("ma-classe");

// الوصول بواسطة sélecteur CSS
let premier = document.querySelector(".ma-classe");
let tous = document.querySelectorAll("p");

تعديل المحتوى والخصائص

// تغيير النص
document.getElementById("demo").innerHTML = "نص جديد";
document.getElementById("demo").textContent = "نص آخر";

// تغيير الخصائص
document.getElementById("image").src = "image2.jpg";

// تغيير CSS
document.getElementById("boite").style.color = "red";
document.getElementById("boite").classList.add("active");

التعامل مع الأحداث (Events)

الأحداث هي تفاعلات المستخدم مع الصفحة (نقر، ضغط زر، تحريك الفأرة):

// باستخدام addEventListener
document.getElementById("btn").addEventListener("click", function() {
    alert("تم النقر!");
});

// أحداث شائعة
element.addEventListener("click", fct);      // نقرة
element.addEventListener("mouseover", fct); // تحريك الفأرة
element.addEventListener("keydown", fct);   // ضغط زر
element.addEventListener("submit", fct);    // إرسال نموذج

تمارين تطبيقية

التمرين 1: اكتب صفحة HTML مع زر يغير لون الخلفية عند النقر عليه.

التمرين 2: اكتب دالة JavaScript تضيف عنصراً جديداً إلى قائمة عند النقر على زر "إضافة".

التمرين 3: اكتب نموذجاً يتحقق من صحة البريد الإلكتروني عند الإرسال باستخدام JavaScript.

للمزيد من المعلومات، راجع درس الخوارزميات المتقدمة ودرس الذكاء الاصطناعي وتعلم الآلة.

📍 دروس مشابهة

• الإعلام الآلي — لغة C: المصفوفات ثنائية البعد — الثانية ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري
• الإعلام الآلي — HTML5: إدراج الوسائط المتعددة (الصوت والفيديو) — الثانية ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري