JavaScript · الدرس ٢ من ٤

احسب ضغطات الزر

تحفظ let عدداً يمكنك تغييره. نزيده مع كل ضغطة، ثم نعرضه في الصفحة. يبدأ العدّاد من الصفر عند تشغيل الكود من جديد.

جرّب الآن

غيّر الزيادة من 1 إلى 2. شغّل الكود واضغط الزر ثلاث مرات. ما العدد الذي يظهر؟

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        JavaScript · script.jslet clicks = 0;
document.getElementById("count")
  .addEventListener("click", () => {
    clicks = clicks + 1;
    document.getElementById("total")
      .textContent = clicks;
  });
        عدّل HTML وCSS لمشروعك
            HTML · index.html<h1>عدّاد الضغطات</h1>
<button id="count">أضف ضغطة</button>
<p id="total">0</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

ظهر العدد 6؟ أعد الزيادة إلى 1 وجرّب مرة أخرى، ثم انتقل إلى إظهار التفاصيل.

التالي: إظهار التفاصيل

أحتاج مساعدة

غيّر العدد في clicks + 1، واترك clicks = 0 كما هو. زر «شغّل الكود» يعيد العدّاد إلى البداية؛ زر النتيجة يزيده.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك