الدرس الخامس: الموقع الإلكتروني التفاعلي (٣)

يقوم هذا الدرس على جعل الموقع الإلكتروني تفاعلياً باستخدام لغة جافا سكربت وربطها بملفات لغة تصميم صفحات الويب، بحيث يستجيب الموقع لأفعال المستخدم مثل النقر على الأزرار أو عرض صناديق التنبيه وتغيير محتوى النصوص تلقائياً. تعتمد الفكرة على كتابة أوسم البرمجة داخل الوسم المخصص لذلك، أو استدعاء دوال برمجية عند حدوث حدث معين مثل onclick، وتعديل عناصر الصفحة باستخدام دوال الوصول للعناصر عبر معرفاتها مثلgetElementById لتغيير الخصائص مثل innerHTML. انظر إلى مثال نافذة التنبيه التي تظهر عند الضغط على زر في الصفحة، حيث يعرض المتصفح رسالة منبثقة تنبه المستخدم لمعلومة معينة أو تعرض التاريخ والوقت.

الفكرة الأساسية

تدور الفكرة حول تحويل صفحات الويب الثابتة إلى صفحات تفاعلية تستجيب لتصرفات المستخدم باستخدام لغة جافا سكربت، من خلال إدراج الأكواد داخل أوسم البرمجة، وربط الأحداث بأزرار التفاعل، واستخدام الدوال لتعديل عناصر الصفحة وعرض التنبيهات.

الشرح

لكتابة أكواد جافا سكربت داخل صفحة الويب، تستخدم الوسم الذي يكتب بين علامتي التمساح، ولعرض رسالة تنبيه منبثقة للمستخدم تستخدم الدالة window.alert مع وضع النص المراد عرضه بين قوسين وعلامتي تنصيص متبوعة بفاصلة منقوطة. إذا أردت تغيير محتوى عنصر معين في الصفحة مثل فقرة النص، تستخدم الدالة document.getElementById بين قوسين مع تحديد معرف العنصر، ثم تربطها بالخاصية innerHTML لتغيير النص المكتوب داخل ذلك العنصر إلى نص جديد. لإنشاء دالة برمجية خاصة بك، تبدأ بكلمة function ثم اسم الدالة وقوسين فارغين، وتضع الأوامر البرمجية داخل أقواس مجموعة، ثم تستدعي هذه الدالة في أي مكان تريد تنفيذها فيه.

مثال محلول خطوة بخطوة

لنفترض أن لديك فقرة نصية تحمل المعرف p1 وتريد تغيير محتواها إلى عبارة صباح الخير عند تنفيذ أمر ما. الخطوة الأولى: اكتب الدالة المسؤولة عن الوصول للعنصر هكذا document.getElementById("p1"). الخطوة الثانية: أضف الخاصية لتحديد المحتوى الداخلي لتصبح document.getElementById("p1").innerHTML. الخطوة الثالثة: اسند القيمة الجديدة للخاصية بإضافة علامة التساوي والنص الجديد بين علامتي التنصيص لتصبح الجملة الكاملة document.getElementById("p1").innerHTML = "صباح الخير."; وتنهيها بفاصلة منقوطة.

أخطاء شائعة

من الخطأ كتابة اسم الدالة بحروف غير مطابقة تماماً لحالة الأحرف مثل كتابة الحروف الكبيرة بحروف صغرى، أو نسيان الفاصلة المنقوطة في نهاية السطر البرمجي. ومن الأخطاء المتكررة أيضاً كتابة معرف العنصر بشكل خاطئ داخل دالة البحث عن العناصر، مما يمنع المتصفح من التعرف على العنصر المطلوب وتغييره.

سؤالان للتدريب مع الإجابة

السؤال الأول: ما هي الدالة الصحيحة لعرض نافذة تنبيه منبثقة تحتوي على جملة مرحباً؟ الإجابة: window.alert("مرحباً");. السؤال الثاني: كيف تستدعي دالة برمجية تحمل الاسم sayHello؟ الإجابة: sayHello();.