دورة JavaScript – المستوى الرابع

في هذه الحلقة، أراجع معك أهم ما درسته في المراحل السابقة، من أساسيات JavaScript وربطها بـ HTML، إلى التعامل مع البيانات، والمصفوفات، والكائنات، والتحكم في عناصر الصفحة باستخدام DOM، حتى تتأكد أنك مستعد للانتقال بدون فجوات.

بعد ذلك، أهيّئك للدخول في المستوى الرابع، وأوضح لك المحاور الأساسية التي سنبني عليها المرحلة القادمة، لتبدأ في تحويل كل ما تعلمته إلى تطبيقات عملية أكثر احترافية.

في هذه الحلقة، أشرح لك مفهوم الـ API من خلال مثال عملي، وكيف تعتمد التطبيقات المختلفة على مصدر بيانات واحد مشترك، ولماذا يُستخدم كوسيط بين الـ Frontend والـ Backend، مع توضيح شكل البيانات (JSON) ودور كل طرف في دورة حياة المشروع.

بعد ذلك، أعرّفك بأنواع الطلبات الأساسية مثل GET وPOST وDELETE وPUT/PATCH، وكيف يمكن استخدام بيانات تجريبية أثناء التطوير، ثم أشرح لك الفرق بين الكود المتزامن وغير المتزامن، وكيف يتم تنفيذ العمليات دون تعطيل واجهة المستخدم.

في هذه الحلقة، أبدأ معك التطبيق العملي لاستدعاء البيانات من API خارجي باستخدام XMLHttpRequest، وأشرح لك خطوات إنشاء الطلب بالكامل، من تهيئته وإرساله، إلى متابعة حالته والتأكد من نجاحه.

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

في هذه الحلقة، أشرح لك فكرة إصدارات جافا سكريبت، ولماذا جاء ES6 كنقطة تحول في طريقة كتابة الكود، ثم أركز معك على مشكلات var من حيث استهلاك الذاكرة وعدم احترامها لنطاق الكود، وما قد يسببه ذلك من أخطاء.

بعد ذلك، أعرّفك بالبدائل الحديثة let و const، وكيف تساعدك على كتابة كود أكثر تنظيمًا وأمانًا، مع توضيح الفرق بين المتغيرات والثوابت. وفي النهاية، أوضح لك أهمية استخدام "use strict" لفرض قواعد أكثر صرامة وتجنب الأخطاء الشائعة.

في هذه الحلقة، أشرح لك واحدة من أهم إضافات ES6 في التعامل مع النصوص، وهي Template Literals، وأوضح لك المشكلة التي تواجهك عند استخدام علامات التنصيص التقليدية، خاصة عند كتابة النصوص على أكثر من سطر.

بعد ذلك، أعرّفك بطريقة استخدام Backticks، وكيف تتيح لك كتابة نصوص متعددة الأسطر بدون أخطاء، بالإضافة إلى دمج المتغيرات داخل النص بسهولة باستخدام ${} بدلًا من الطريقة التقليدية المعتمدة على علامة الجمع.

في هذه الحلقة، أشرح لك مفهوم الدوال السهمية، وأوضح الفرق بينها وبين الدوال التقليدية من حيث طريقة الكتابة، مع تحويل الدالة من الشكل القديم باستخدام function إلى الشكل الحديث باستخدام =>.

بعد ذلك، أعرّفك بالقواعد الأساسية لكتابة الدوال السهمية، مثل تبسيطها في حالة وجود بارامتر واحد، أو عند كتابة الدالة في سطر واحد، ومتى تحتاج لاستخدام الأقواس عند تعدد البارامترات. وفي النهاية، أوضح لك متى نستخدم هذا النمط الجديد أثناء كتابة الكود في الدروس القادمة.

في هذه الحلقة، أشرح لك مفهوم الكلمة this، وأنها ليست قيمة ثابتة بل تتغير حسب مكان استخدامها داخل الكود، لتشير دائمًا إلى السياق الذي يتم فيه التنفيذ.

أوضح لك كيف تتصرف this في النطاق العام، وماذا تشير إليه عند استخدامها داخل دالة عادية، ثم ننتقل لرؤية الفرق عند استخدامها داخل كائن، وكيف تبدأ في الإشارة إلى هذا الكائن نفسه بدلًا من النافذة العامة. وفي النهاية، أضع لك القاعدة الأساسية لفهم this قبل الانتقال لمفاهيم أكثر تقدّمًا.

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

بعد ذلك، أعرّفك بالطريقة الحديثة باستخدام Fetch مع Async و Await، وكيف تُمكّنك من التحكم في توقيت تنفيذ الكود وانتظار البيانات قبل إكمال باقي الخطوات، بدلًا من التعقيد الموجود في XMLHttpRequest.

في هذه الحلقة، أشرح لك مفهوم البرمجة الكائنية (OOP)، وكيف تقوم على تمثيل العناصر ككائنات لها صفات، مع توضيح أنها منهجية لتنظيم الكود وليست لغة مستقلة، والهدف منها تسهيل بناء مشاريع كبيرة وقابلة لإعادة الاستخدام.

بعد ذلك، أوضح لك الفرق بين الكائن العادي والـ Class، وكيف نستخدم القالب البرمجي لإنشاء أكثر من كائن، ثم نطبق ذلك عمليًا باستخدام Constructor، مع شرح دور this في ربط البيانات، وكيفية إنشاء نسخ جديدة باستخدام new، بالإضافة إلى فكرة القيم الافتراضية داخل القالب.

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

بعد ذلك، أعرّفك بدالة constructor، وكيف تعمل تلقائيًا عند إنشاء كائن جديد باستخدام new، ودورها في تهيئة البيانات وربطها بالكائن باستخدام this، مع تطبيق عملي يوضح ترتيب تنفيذ الكود عند إنشاء الكائن.

في هذه الحلقة، أشرح لك كيفية التحكم في زمن تنفيذ الأكواد داخل JavaScript، من خلال الدالتين setTimeout و setInterval، وتتعرف على الفرق بين تنفيذ الكود مرة واحدة بعد مدة محددة، وتنفيذه بشكل متكرر على فترات زمنية.

أوضح لك أيضًا أن التعامل مع الوقت يكون بالمللي ثانية، وكيف تستخدم هذه الأدوات لبناء عناصر تفاعلية تعتمد على الزمن. وفي نهاية الكورس، أوجّهك لما تحتاج التركيز عليه في المرحلة القادمة قبل الانتقال إلى React.