شرح JavaScript وتمارين إضافية

اجعل صفحتك تستجيب للمستخدم

أصبح لصفحتك محتوى وتنسيق. باستخدام JavaScript، تختار عنصراً وتغيّره عند ضغط المستخدم. في المثال، نختار الزر greet وننتظر ضغطة عليه. التعامل مع عناصر الصفحة بهذه الطريقة يُسمّى التعامل مع DOM.

document.getElementById("greet").addEventListener("click", () => {
  document.getElementById("message").textContent = "Hello!";
});

2. احفظ قيمة وغيّرها

تحفظ let قيمة يمكن تغييرها. يبدأ العدّاد هنا من صفر. تضيف كل ضغطة واحداً، ثم تعرض textContent القيمة. أضف إلى HTML زراً يحمل id=count وفقرة تحمل id=total.

let clicks = 0;
document.getElementById("count").addEventListener("click", () => {
  clicks = clicks + 1;
  document.getElementById("total").textContent = clicks;
});

3. أظهر قسماً أو أخفه

تكون hidden مساوية لـ true عندما يكون العنصر مخفياً. وتعكس ! هذه القيمة. أضف زراً يحمل id=toggle وقسماً يحمل id=details وخاصية hidden. يبدّل الكود ظهوره مع كل ضغطة.

document.getElementById("toggle").addEventListener("click", () => {
  const details = document.getElementById("details");
  details.hidden = !details.hidden;
});

أضف قسماً تفاعلياً إلى موقعك

1. غيّر رسالة الترحيب في المحرّر. شغّل الكود وتأكد أنها تظهر بعد الضغط.
2. أضف العنصرين count وtotal، ثم استخدم مثال العدّاد. اضغط ثلاث مرات؛ يجب أن تظهر القيمة 3.
3. أضف قسماً للتفاصيل عنك وزراً لتبديل ظهوره. جرّب إظهاره وإخفاءه عدة مرات.

مشروعك: أضف هذا التفاعل إلى موقعك الذي بنيته في HTML وCSS. نفّذه في ملفاتك، وتأكد أن أسماء id تطابق الكود، ثم جرّبه بلوحة المفاتيح والفأرة. احتفظ به للمرحلة التالية.

إذا واجهتك مشكلة

احفظ عملك، ثم جرّب أصغر خطوة تُظهر المشكلة. قارن ما توقّعت حدوثه بما حدث فعلاً. اقرأ رسالة الخطأ وراجع آخر تعديل. يمكنك الرجوع إلى أحد المصادر أعلاه لفهم النقطة التي صعبت عليك.

هل تفهم كيف يعمل التفاعل؟