مدرسة البرمجة العربية

✨ التحكم في الصفحة بـ JavaScript – DOM وManipulation للأطفال

---

🎉 أهلاً يا أبطال!

الآن بعد أن تعلمنا كيف نستخدم الأحداث (Events) وloops، حان الوقت لنتعلم شيئاً ممتعاً: التحكم في الصفحة نفسها! DOM (Document Object Model) يسمح لنا بتغيير النصوص، الصور، وإضافة أو إزالة العناصر في الصفحة.

---

🖊️ تغيير النصوص في الصفحة

لنبدأ بتغيير نص عند الضغط على زر. تخيل أن لدينا جملة تقول "مرحباً بك!" ونريد أن تتحول إلى "أنت رائع!" عند الضغط على الزر:

// نختار العنصر الذي نريد تغييره
let message = document.getElementById("message");

// نضيف حدث عند الضغط على الزر
document.getElementById("changeBtn").addEventListener("click", function() {
    message.textContent = "أنت رائع!";
});

يمكنك أيضاً تغيير لون النصوص وحجمها:

message.style.color = "blue";
message.style.fontSize = "24px";

---

🖼️ تغيير الصور في الصفحة

مثلاً، لدينا صورة كوكب ونريد أن تتحول إلى نجمة عند الضغط على زر:

let image = document.getElementById("planet");

document.getElementById("imageBtn").addEventListener("click", function() {
    image.src = "star.png"; // تأكد أن لديك صورة star.png
    image.alt = "نجمة لامعة!";
});

كما يمكنك تعديل حجم الصورة:

image.style.width = "150px";
image.style.height = "150px";

---

➕ إنشاء عناصر جديدة

لنضيف نجوم صغيرة عند الضغط على زر:

document.getElementById("addStarBtn").addEventListener("click", function() {
    let newStar = document.createElement("span"); // إنشاء عنصر جديد
    newStar.textContent = "⭐"; // نجمة
    newStar.style.fontSize = "24px"; // حجم النجمة
    document.getElementById("gameArea").appendChild(newStar); // إضافة النجمة للصفحة
});

---

❌ إزالة عناصر من الصفحة

لنفرض أننا نريد زر يمسح كل النجوم:

document.getElementById("clearBtn").addEventListener("click", function() {
    document.getElementById("gameArea").innerHTML = ""; // مسح كل النجوم
});

أو إزالة آخر نجمة فقط:

let lastStar = document.getElementById("gameArea").lastChild;
if(lastStar) {
    lastStar.remove(); // إزالة آخر نجمة
}

---

🎮 لعبة النجوم – مثال كامل

صفحة كاملة يمكن للأطفال تجربتها مباشرة:

<div id="gameArea"></div>
<button id="addStarBtn">أضف نجمة</button>
<button id="clearBtn">امسح النجوم</button>

<script>
document.getElementById("addStarBtn").addEventListener("click", function() {
    let newStar = document.createElement("span");
    newStar.textContent = "⭐";
    newStar.style.fontSize = "24px";
    newStar.style.margin = "2px";
    document.getElementById("gameArea").appendChild(newStar);
});

document.getElementById("clearBtn").addEventListener("click", function() {
    document.getElementById("gameArea").innerHTML = "";
});
</script>

---

🌟 نصائح ممتعة للأطفال

• جرب إضافة عناصر بألوان مختلفة باستخدام style.color.
• جرب تحريك العناصر قليلاً باستخدام style.position وstyle.left/top.
• يمكنك دمج الأحداث والـ loops: أضف 10 نجوم في نفس الوقت بالضغط على زر!
• تجربة الأخطاء جزء من التعلم – إذا اختفت النجوم فجأة، هذا طبيعي! 😄

---

📝 الخلاصة

- DOM يسمح بالتحكم بكل عناصر الصفحة باستخدام JavaScript.
- يمكن تغيير النصوص والصور، إضافة أو إزالة عناصر.
- الأطفال يمكنهم تجربة أفكارهم وإضافة لمستهم الخاصة.
- بعد هذه المقالة، يمكنكم إنشاء ألعاب صغيرة ممتعة وتفاعلية! 🚀