صعوبة في بناء مشاريع جافاسكريبت من الصفر

جزئية حتى أراه وافهم شرحه بحاجة إلى توضيح، هل المقصود رؤية تصميم للمشروع مثلاً أي رؤية كيف يبدوا شكله؟ واستيعاب المطلوب؟ أم تحتاج إلى شرح كامل لما عليك فعله؟

اقصد على سبيل المثال اريد انشاء تطبيق باستخدام جافا سكريبت  وليكن تطبيق إدارة مهام

هنا انا لا استطيع فعل اي شيء حتى أراه شرح لهذه المشروع كي استطيع فعله ولكن من نفسي لا

أيضا صحيح احتاج الى شرح كامل للمشروع كي استطيع فعله 

في البداية ذلك طبيعي لا مشكلة به، ولا تتوقع أن تقوم بتنفيذ مشروع كامل دفعة واحدة ما لم تتدرج في التطبيق العملي، بمعنى تصعد السلم درجة درجة وليس القفز، وللعلم ذلك يسمى فخ الدروس التعليمية أو Tutorial Hell، بمعنى أنت تعرف أساسيات اللغة أو الأدوات (المتغيرات، الحلقات، الدوال، الشروط)، ولكنك لا تعرف كيف تبني بيتًا باستخدامها.

ولديك مشكلة في مهارة تجزئة المشكلة  وهي المهارة الأهم في البرمجة، فعند رؤية مشروع تطبيق إدارة مهام مثلاً، عقلك يراه ككتلة واحدة ضخمة ومخيفة، الصحيح أن تراه كمجموعة من المشاكل الصغيرة جدًا والقابلة للحل.

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

يجب تخطي ذلك الحاجز شيئًا فشيئًا، أولاً تعلمت الأساسيات لنقم بالتطبيق عليها بتمارين بسيطة، قمت بذلك؟ جميل، بعدها مشاريع صغيرة متدرجة الصعوبة.

1. أولاً مولد اقتباسات العشوائية للتدرب على التعامل مع الـ DOM والأحداث، المطلوب هو صفحة تحتوي على اقتباس وزر. عند الضغط على الزر، يظهر اقتباس عشوائي جديد.
2. المشروع الثاني هو  عداد الأحرف من خلال حقل نصي <textarea> يعرض للمستخدم عدد الأحرف التي كتبها بشكل مباشر.
3. المشروع الثالث تغيير لون الخلفية بشكل عشوائي عن طريق  زر عند الضغط عليه، تتغير خلفية الصفحة إلى لون عشوائي.

بعدها قم بتطبيق مشروع إدارة المهام.

وللتوضيح، ستقوم بالتفكير في المشروع أولاً قبل تنفيذه، بالتطبيق على المشروع الأول، فكر به ككل أولاً فعقلك سيرى واجهة بسيطة بها مكان لعرض الاقتباس، ومكان لعرض اسم القائل، وزر به كلمة اقتباس جديد لتوليد اقتباس آخر.

بعدها تبدأ بالتجزئة، وأولاً التجزئة الوظيفية أي ماذا سيفعل التطبيق أو المشروع، كأننا نصف التطبيق لمستخدم عادي، كالتالي:

1. يعرض المشروع اقتباس مبدئي، عندما تفتح الصفحة لأول مرة، يجب أن يظهر اقتباس ما.
2. عندما يضغط المستخدم على زر "اقتباس جديد"، يجب أن يتم استبدال الاقتباس الحالي باقتباس آخر عشوائي.

بعدها التجزئة التقنية وهي كيف سنبني كل وظيفة؟ علينا إذن ترجمة الوظائف السابقة إلى مكونات تقنية HTML, CSS, JavaScript.

في هيكل الصفحة HTML ما هي العناصر التي أحتاجها على الشاشة؟ ستكتب التالي:

1. حاوية رئيسية (div) لتنظيم كل شيء في المنتصف وإعطائه شكل بطاقة.
2. عنصر لعرض نص الاقتباس، من الممكن أن استخدم فقرة <p> أو عنصر اقتباس <blockquote>، وسأعطيه id مميز مثل quote-text لأجده بسهولة.
3. عنصر لعرض اسم القائل من خلال فقرة صغيرة <p> أو <span> وسأعطيه id مميز مثل quote-author.
4. زر لتوليد اقتباس جديد بواسطة عنصر زر <button>) وسأعين له id مميز مثل new-quote-btn.

بالنسبة لخطوة لتنسيقات قم بتأجيلها حتى النهاية للتركيز على الأهم.

بالنسبة لمنطق التطبيق وهو الأهم من خلال جافاسكريبت، بعد التفكير من المفترض أن تتوصل لبعض أو كل التالي:

• [JS - Data] في ملف script.js، سأنشئ مصفوفة من كائنات الاقتباسات.
• [JS - DOM] ساختار عناصر HTML الثلاثة (نص الاقتباس، القائل، الزر) وأخزنها في متغيرات.
• [JS - Logic] ساكتب دالة generateQuote التي:
  • تختار رقماً عشوائياً.
  • تستخدم الرقم للحصول على اقتباس من المصفوفة.
  • تُحدث محتوى عناصر HTML (النص والقائل) بالاقتباس المختار.
• [JS - Event] سأضيف addEventListener للزر ليستدعي دالة generateQuote عند النقر عليه.
• [JS - Initial] ساستدعي دالة generateQuote() مرة واحدة في نهاية الملف لتعيين الاقتباس الأول.

بالطبع كل جزئية بها تفاصيل، أي عند العمل على ما سبق قم بتجزئته إلى أجزاء أصغر واعمل على حلها، مثلاً جزئية تختار رقماً عشوائياً كيف ستقوم بحلها؟ فكر أولاً ثم البحث ثم تستطيع السؤال للحصول على مساعدة لو واجهت صعوبة.

عامًة المنطق الذي ستتوصل إليه هو:

• أحتاج إلى رقم عشوائي بين 0 وطول المصفوفة ناقص واحد.
• سأستخدم Math.random() لتوليد رقم بين 0 و 1.
• سأضربه في طول المصفوفة quotes.length
• سأستخدم Math.floor() لأحصل على عدد صحيح لأنه يمثل فهرس index المصفوفة.

بعد أن يعمل منطق المشروع بشكل سليم، فكر في التنسيقات، اجعل الأمر بسيط أنشئ ملف style.css لتوسيط المحتوى وتنسيق بسيط للنصوص والزر.