حسنًا، هل تريد أن تكون مطور ويب؟

يمكنك مشاهدة 50 ساعة من الدروس التعليمية، أو يمكنك بناء شيء ما.

أداة عداد النقرات هي المشروع "الأولى القياسية" لمطوري الواجهة الأمامية. ويغطي جميع الأساسيات: المتغيرات، والدوال، وسماعات الأحداث، ومعالجة DOM.

في هذا الدليل، لن نقدم لك كود النسخ واللصق. سنشرح المنطق لكيفية عمل عداد النقر من الداخل.

التدفق المنطقي

يقوم تطبيق عداد بثلاثة أشياء:

1. الحالة: يتذكر رقمًا (مثل `count = 0`). 1. حدث: ينتظر أن تنقر على زر. 1. تحديث: عند النقر عليه، فإنه يقوم بـ `count = count + 1` ويحدث الشاشة.

الخطوة 1: HTML (الهيكل العظمي)

تحتاج إلى مكان لعرض الرقم وزرًا للنقر.

```

0

هذا كل شيء. إنه قبيح، ولكنه موجود.

الخطوة 2: JavaScript (الدماغ)

هنا حيث تحدث السحر.

نحن بحاجة لإخبار الحاسوب: "مرحبًا، ابحث عن الزر هذا. عندما يضغطه شخص ما، احصل على الرقم، وأضف 1، واعرضه مرة أخرى."

يبدو منطق الكود كالتالي:

``` let count = 0; // الحالة

function increase() { count++; // أضف 1 document.getElementById("number").innerText = count; // Update Screen } ```

الخطوة 3: LocalStorage (الذاكرة)

المشكلة في الكود أعلاه؟ إذا قمت بإعادة تحميل الصفحة، فإن العدد يعود إلى 0.

لجعل عداد مفيد (مثل تاسبيح أو عداد الصفوف)، يجب أن يتذكر.

تستخدم المتصفحات قاعدة بيانات صغيرة تسمى `localStorage`.

• احفظ: في كل مرة نضغط فيها، نخبر المتصفح: "احفظ 'count' بشكل دائم."
• تحميل: عندما يتم تحميل الصفحة، نسأل: "هل لديك رقم محفوظ؟" إذا كانت الإجابة نعم، ابدأ منه.

لماذا تهم هذه المشاريع

بناء عداد النقر يعلمك المفهوم الأساسي لإدارة الحالة.

سواء كنت تبني قائمة مهام أو عربة تسوق أو فيسبوك، فإنه كله مجرد إصدارات متطورة من عداد النقرات.

• زر الإعجاب على فيسبوك؟ هذا عداد نقرات.
• عدد إعادة نشر تويتر؟ هذا عداد نقرات.
• عدد عناصر عربة التسوق على أمازون؟ هذا عداد لمسة.

الخلاصة

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