أمثلة وتطبيقات

مثال 1: تغيير لون الخلفية بين عدة ألوان

<h1>أهلًا بك في صفحتي</h1>
<button id="colorBtn">غيّر اللون</button>
<script src="script.js"></script>

const colors = ["white", "lightblue", "lightgreen", "lightyellow"];
let index = 0;
const colorBtn = document.getElementById("colorBtn");

colorBtn.addEventListener("click", () => {
  index = (index + 1) % colors.length;
  document.body.style.backgroundColor = colors[index];
});

الفكرة:

• colors مصفوفة ألوان (كالقوائم في Python)، وcolors.length عدد عناصرها وهو 4.
• let تعرّف متغيرًا يمكن أن تتغير قيمته، بخلاف const.
• (index + 1) % colors.length يزيد الرقم ثم يعيده إلى 0 بعد آخر لون: 1، 2، 3، 0، 1، … وهذا استخدام ذكي لباقي القسمة.

مثال 2: صفحة أخبار يتغير فيها المقال عند النقر على عنوانه

أمر توجيهي: “اكتب صفحة إخبارية بسيطة باستخدام HTML وCSS وJavaScript، واجعل النص الرئيسي يتغير عند النقر على أحد العناوين”.

<button class="headline" data-text="فاز فريق المدرسة بالبطولة.">الرياضة</button>
<button class="headline" data-text="افتُتح معمل الحاسب الجديد.">المدرسة</button>
<p id="article">اختر عنوانًا لقراءة الخبر.</p>

const article = document.getElementById("article");
const headlines = document.querySelectorAll(".headline");

headlines.forEach((h) => {
  h.addEventListener("click", () => {
    article.textContent = h.dataset.text;
  });
});

• querySelectorAll(".headline") تحدد كل العناصر التي لها الفئة headline.
• forEach تمر على كل عنوان (مثل for في Python)، وتضيف له مستمعًا للنقر.
• عند النقر يُعرض نص الخبر المخزن في الخاصية data-text للعنوان.

تطوير مقترح: أضف مقالات أخرى، أو اجعل لون الخلفية يتغير حسب المقال المعروض. وإذا صادفت أمرًا لا تعرفه (مثل querySelectorAll) فدوّنه واسأل عنه؛ فالذكاء الاصطناعي يساعدك على اكتشاف تقنيات تتجاوز معرفتك الحالية.

العرض التقديمي لموقع الويب (الموضوع 13-6)

لخّص عملك في عرض أمام مجموعتك وفق هذه النقاط:

1. موضوع الموقع: مثل “موقع عن هواياتي” أو “موقع عن كرة القدم”.
2. ما تعلمته في HTML: مثل ربط CSS وJavaScript بالوسمين <link> و<script>، وإعطاء الزر id للتحكم فيه.
3. ما تعلمته في CSS: مثل تعيين لون الخلفية للمحدد body، وتنسيق الأزرار.
4. ما تعلمته في JavaScript: مثل تحديد العناصر بـ document.getElementById، وكتابة ما يحدث عند النقر بـ addEventListener.