إضافة التفاعل الحقيقي مع المستخدم بـ JavaScript: معالجة الأحداث والتحكم في العناصر

HTML تبني الهيكل، وCSS تضع الألوان، لكن JavaScript هي العقل الذي يجعل الموقع حياً ويتفاعل مع نقرات الزائر. فتح القوائم المنسدلة، تغيير الوضع الليلي، وتأكيد الإرسال كلها وظائف تعتمد على لغة JavaScript.

كثير من المبتدئين يخشون الجافاسكريبت ويظنون أنها شديدة التعقيد، لكن في الواقع الأساسيات التي تحتاجها لبناء مواقع تفاعلية جذابة للعملاء واضحة ومحددة: تحديد عنصر، الاستماع لحدث (Click)، وتعديل كلاس في الـ CSS.

في هذا الدرس سنربط أول ملف برمجي، نبني زراً يغير مظهر الصفحة أو يفتح قائمة منسدلة، ونتعلم التعامل مع واجهة الـ DOM دون مكتبات خارجية ثقيلة.

1. أنشئ ملفاً جديداً باسم 'main.js' داخل مجلد 'assets/js' واربطه بنهاية صفحة HTML قبل إغلاق : . شو رح تشوف على الشاشة: سطر استدعاء السكربت يوضع بنهاية الصفحة لضمان اكتمال تحميل عناصر الـ HTML قبل تشغيل الكود. إذا ما ظهرلك: وضع السكربت في نهاية body يمنع أخطاء محاولة البحث عن عناصر لم يتم رسمها بعد.
2. اكتب أول سطر في main.js للتأكد من الربط: console.log('السكربت يعمل بنجاح'); وافتح تبويب Console في F12. شو رح تشوف على الشاشة: الرسالة تظهر في وحدة التحكم بالمتصفح بلون أسود أو أبيض وتؤكد نجاح الربط. إذا ما ظهرلك: إذا لم تظهر، راجع مسار الملف النسبي وتأكد من حفظ كلا الملفين.
3. أضف زراً في الترويسة للوضع الليلي: 🌙 الوضع الداكن. شو رح تشوف على الشاشة: زر تفاعلي يظهر بجانب روابط الترويسة جاهز للبرمجة. إذا ما ظهرلك: إعطاء العنصر معرّفاً فريداً id يسهل التقاطه مباشرة بالبرمجة.
4. في ملف main.js، التقط الزر عبر: const themeBtn = document.querySelector('#themeToggle');. شو رح تشوف على الشاشة: متغير برمجياً يحمل المرجع المباشر للزر داخل ذاكرة المتصفح. إذا ما ظهرلك: استخدم querySelector دائماً لأنه يدعم جميع محددات CSS الحديثة.
5. أضف مستمعاً لنقر المستخدم: themeBtn.addEventListener('click', function() { document.body.classList.toggle('dark-theme'); });. شو رح تشوف على الشاشة: عند النقر على الزر، يضاف كلاس 'dark-theme' إلى وسم body، وإذا كان موجوداً يحذفه (Toggle). إذا ما ظهرلك: خاصية classList.toggle هي الطريقة الأسرع والأكثر كفاءة لتبديل الحالات التفاعلية.
6. في ملف style.css، عرّف تنسيق الوضع الداكن: body.dark-theme { background: #1a1a1a; color: #f0f0f0; }. شو رح تشوف على الشاشة: بمجرد النقر، تنقلب خلفية الصفحة للون الداكن والنصوص للفاتح فوراً. إذا ما ظهرلك: أضف transition: background 0.3s, color 0.3s على body لتجعل الانتقال ناعماً وأنيقاً.
7. حدّث نص الزر برمجياً ليعكس الحالة الجديدة: if (document.body.classList.contains('dark-theme')) { themeBtn.textContent = '☀️ الوضع الفاتح'; } else { themeBtn.textContent = '🌙 الوضع الداكن'; }. شو رح تشوف على الشاشة: الرمز والنص على الزر ينقلبان مع كل نقرة ليعلما الزائر بالوضع الحالي. إذا ما ظهرلك: التغذية البصرية الراجعة للزر تعزز وضوح تجربة الاستخدام.
8. احفظ التفضيل في ذاكرة المتصفح (localStorage) ليبقى الوضع مفضلاً عند تحديث الصفحة: localStorage.setItem('theme', 'dark');. شو رح تشوف على الشاشة: المتصفح يحتفظ باختيار الزائر حتى لو أغلق النافذة وعاد في اليوم التالي. إذا ما ظهرلك: هذه التفاصيل البسيطة هي التي تجعل موقعك يبدو كبرنامج احترافي متقن وليس مجرد تمرين هواة.