ملخص HTML وJavaScript: جعل صفحة الويب تفاعلية — أولى ثانوي

مقدمة

الوحدة الثالثة عشرة: الذكاء الاصطناعي التوليدي — الموضوع 13-3

تضغط زر “أعجبني” فيتغير لونه فورًا، وتختار إجابة في اختبار إلكتروني فتظهر النتيجة. الصفحة هنا لا تكتفي بالعرض بل تستجيب لك. هذه التفاعلية تصنعها لغة JavaScript. في هذا الدرس نجعل صفحة التعريف بالنفس تتغير عند الضغط على زر.

أهداف التعلم

أن تشرح دور JavaScript في صفحات الويب.
أن تحدد عنصر HTML بمعرّف id وتصل إليه بالدالة document.getElementById.
أن تغير نص عنصر بالخاصية textContent.
أن تنفذ إجراءً عند نقر زر، مثل تغيير النص أو حجم الخط أو لونه.

شرح الدرس

ما JavaScript؟

JavaScript: لغة برمجة تعمل داخل متصفحات الويب. وبدمجها في صفحة الويب نحولها إلى صفحة تفاعلية (Interactive) تتغير وتستجيب لإجراءات المستخدم (User Action) مثل النقر والكتابة.

اللغة	دورها
HTML	الهيكل والمحتوى (العناوين والنصوص)
CSS	التصميم (الألوان والخطوط)
JavaScript	التحكم والتفاعل (التحريك والتكبير والتغيير)

الوصول إلى عنصر وتغيير نصه

نعطي العنصر في HTML معرّفًا فريدًا بالخاصية id، مثل <h1 id="name">.
نصل إليه في JavaScript بالدالة document.getElementById("name").
نغير النص المكتوب داخله بالخاصية textContent.

document.getElementById("name").textContent = "Omar";

الفرق بين id وclass: قيمة id فريدة لعنصر واحد في الصفحة، أما class فيمكن أن تتكرر لعدة عناصر.

الاستجابة لنقر زر

الوسم <button> ينشئ زرًّا.
نحدد ما يحدث عند النقر بكتابة دالة في الخاصية onclick للزر.
الكلمة const تعرّف متغيرًا لا تتغير قيمته (هنا يحفظ العنصر حتى نستخدمه).

تغيير الشكل بالخاصية style

يمكن لـ JavaScript أن تغيّر تنسيق العنصر مباشرة، مثل:

element.style.fontSize = "50px"; لتغيير حجم الخط.
element.style.color = "red"; لتغيير لون النص.
document.body.style.backgroundColor = "lightyellow"; لتغيير لون خلفية الصفحة.

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

مثال 1: تغيير الاسم عند فتح الصفحة

<h1 id="name">Adam</h1>

document.getElementById("name").textContent = "Omar";

النتيجة: يظهر الاسم Omar بدلًا من Adam.

مثال 2: تغيير النص عند الضغط على زر

<p id="msg">Hello</p>
<button id="btn">Change Text</button>

const p = document.getElementById("msg");
const btn = document.getElementById("btn");

btn.onclick = () => {
  p.textContent = "Welcome!";
};

النتيجة: تظهر كلمة Hello، وعند الضغط على الزر تتحول فورًا إلى Welcome!.

مثال 3: تكبير الخط وتلوينه معًا عند الضغط

const text = document.getElementById("msg");
const btn = document.getElementById("btn");

btn.onclick = () => {
  text.style.fontSize = "50px";
  text.style.color = "red";
};

مثال 4: التبديل بين لونين في كل ضغطة (يجمع ما تعلمته عن التفرع):

btn.onclick = () => {
  if (text.style.color === "red") {
    text.style.color = "blue";
  } else {
    text.style.color = "red";
  }
};

في كل ضغطة يختبر البرنامج اللون الحالي: إذا كان أحمر يجعله أزرق، وإلا يجعله أحمر.

ملاحظات مهمة

يجب أن تتطابق قيمة id في HTML مع الاسم المكتوب في getElementById تمامًا، بما في ذلك الحروف الكبيرة والصغيرة؛ فـ "Name" تختلف عن "name".
في JavaScript تنتهي الأوامر غالبًا بفاصلة منقوطة ;، والأوامر التي تنفذ عند النقر تُكتب بين القوسين المعقوصين { }.
الخاصية textContent تغيّر النص فقط، والخاصية style تغيّر الشكل.
في JavaScript تُستخدم === للمقارنة، كما تُستخدم == في Python.

المفاهيم الأساسية

JavaScript: لغة تعمل في المتصفح وتضيف التفاعلية.
id: معرّف فريد للعنصر، وdocument.getElementById للوصول إليه.
textContent: لتغيير النص داخل العنصر.
onclick: لتنفيذ إجراء عند نقر الزر، وstyle لتغيير التنسيق.

ملخص الدرس

تضيف لغة JavaScript التفاعلية إلى صفحات الويب فتجعلها تستجيب لإجراءات المستخدم. نعطي العنصر معرّفًا فريدًا id، ونصل إليه بالدالة document.getElementById، ونغير نصه بالخاصية textContent، أو شكله بالخاصية style. وبالحدث onclick نحدد ما يحدث عند نقر زر، ويمكن استخدام if وelse للتبديل بين حالتين.

أسئلة للتدريب

ما دور كل من HTML وCSS وJavaScript في صفحة الويب؟
ما الفرق بين id وclass؟
اكتب سطر JavaScript يغيّر نص العنصر الذي معرّفه title إلى “مرحبًا”.
اكتب كود زر يجعل لون خلفية الصفحة أصفر عند الضغط عليه.
لماذا قد لا يعمل الكود إذا كتبت getElementById("Btn") والعنصر معرّفه btn؟