رحلتك نحو احتراف JavaScript: دورة بناء التطبيقات الشاملة في 28 جزءًا

هل تجد صعوبة في تحديد المهارات الأساسية في لغة JavaScript التي تحتاجها لبناء تطبيقات عملية وواقعية؟ نقدم لك هذه الدورة المكثفة والمليئة بالأمثلة، والتي تزودك بالمفاهيم الجوهرية للغة JavaScript اللازمة لتصبح منتجًا وفعالًا عند العمل مع مكتبات مثل React، Angular، و Vue. إذا كنت تطمح لبناء تطبيقات ويب قوية واحترافية، فإن JavaScript هي اللغة الأمثل لتحقيق ذلك. ولكن ما هي المهارات الدقيقة التي تحتاجها لبناء التطبيقات بفعالية؟

تتوفر العديد من الدورات التدريبية حول JavaScript عبر الإنترنت، لكن القليل منها يركز على ما يرغب العديد من المطورين في معرفته: ما هي مهارات JavaScript الضرورية لبناء تطبيقاتك الخاصة؟ هناك فجوة واضحة بين تعلم JavaScript الخام (vanilla JavaScript) وبين تعلم مكتبة أو إطار عمل مثل React، Angular، و Vue لإنشاء تطبيقات الصفحة الواحدة (single-page applications). لقد قمت بتصميم هذه الدورة المتكاملة بهدف مساعدتك على سد هذه الفجوة.

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

نظرة عامة على الدورة التدريبية

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

المتغيرات (Variables) والسلاسل النصية (Strings)

سنبدأ باللبنات الأساسية لأي برنامج JavaScript: المتغيرات (variables). أولاً، سنتناول كيفية تعريف المتغيرات باستخدام let و const، وكيف تمثل هذه الكلمات المفتاحية تحسينًا كبيرًا على صيغة var القديمة. سنتعلم مفاهيم مثل نطاق الكتلة (block scoping)، وتظليل المتغيرات (variable shadowing)، والمنطقة الزمنية الميتة (temporal dead zone). وسنكتشف أيضًا كيف يمكن لهذه الكلمات المفتاحية الجديدة أن تجعل شيفرتنا البرمجية أسهل في المعالجة والفهم.

على سبيل المثال، لماذا يصبح المتغير salePrice في الصورة أدناه أكثر قابلية للقراءة عندما نعلنه باستخدام const بدلاً من let أو var.

انقر لمشاهدة هذه المحاضرة.

نظرًا لأننا نعلن المتغير كثابت (constant)، فإننا نعلم أنه لن يتم تعيين قيمة مختلفة له لاحقًا. هذا يجعل شيفرتنا أسهل في الفهم لكل من المطورين الآخرين ولأنفسنا. أخيرًا، في هذا القسم، سنتطرق إلى القوالب الحرفية (template literals)، وكيف أنها تحسن السلاسل النصية داخل JavaScript من جميع النواحي تقريبًا، بدءًا من تنسيق النص وصولاً إلى إدراج قيم ديناميكية والمزيد.

الأنواع (Types) والجمل الشرطية (Conditionals)

بعد ذلك، سنتناول الأنواع (types) والجمل الشرطية (conditionals)، اللذين يسيران جنبًا إلى جنب. سنلقي نظرة أولاً على جزء غريب (وغالبًا ما يُساء فهمه) في JavaScript يُسمى تحويل الأنواع القسري (type coercion)، والذي يعني كيفية تحويل الأنواع من قيمة إلى أخرى. يمكن أن تتغير الأنواع ضمنيًا عندما نكتب جملًا شرطية، وهذا يعني أننا يجب أن نعرف عن القيم الحقيقية (truthy values) والقيم الزائفة (falsy values)، وهي قيم يتم تحويلها بمهارة إلى القيم المنطقية true و false على التوالي.

سنرى كيف يمكننا استخدام القيم الحقيقية والزائفة لصالحنا من خلال إنشاء جمل شرطية أقصر باستخدام العاملين && (and) و || (or). تُعرف هذه الحيلة باسم الدائرة القصيرة (short-circuiting)، وهي الأساس الذي تعتمد عليه مكتبات JavaScript مثل React لعرض أو إخفاء العناصر.

انقر لمشاهدة هذه المحاضرة.

بعد ذلك، سنرى كيفية اختصار الجمل الشرطية if-else باستخدام عامل التشغيل الثلاثي (ternary operator)، وكيف تكون مفيدة في المواقف التي نرغب فيها في تعيين قيمة متغير بشكل شرطي.

الدوال (Functions)

بعد ذلك، سنتعمق في الدوال (functions)، وهي المحرك الأساسي لأي تطبيق JavaScript. سنزيل الغموض عن ميزة حاسمة في الدوال تُسمى الإغلاقات (closures). سنفهم ماهية الإغلاق من خلال إنشاء مثال عملي، مما سيمكننا من رؤية سبب أهمية معرفة الإغلاقات وكيف يمكنها تحسين شيفرة JavaScript الخاصة بنا من خلال تتبع القيم بين استدعاءات الدوال:

انقر لمشاهدة هذه المحاضرة.

سنتناول نوعًا من الدوال ستجده في كل تطبيق JavaScript حديث، وهي دوال الأسهم (arrow functions). باستخدام دوال الأسهم، يمكننا تقليل حجم شيفرتنا بشكل كبير، حيث سنتعرض لجميع الحيل المتاحة لجعلها موجزة قدر الإمكان. أخيرًا، سنتطرق إلى القيم الافتراضية (default values) في الدوال وكيف يمكنها جعل شيفرتنا أكثر موثوقية، خاصة إذا لم يتم توفير وسيط متوقع (argument).

الكائنات (Objects)

من أنواع البيانات الأولية (primitive data types)، سنتقل إلى الكائنات (objects). لا يمكن فهم مفاهيم بناء التطبيقات الأساسية مثل التغييرات (mutations) وعدم القابلية للتغيير (immutability) دون معرفة الفرق بين الأنواع الأولية وأنواع الكائنات في JavaScript. سنغطي هذا الاختلاف بالتفصيل ونرى مباشرة لماذا يهم ذلك لموثوقية شيفرتنا.

سنتناول مجموعة متنوعة من الأنماط العملية للحصول على بيانات كائناتنا بسهولة أكبر من خلال تفكيك الكائنات (object destructuring)، كما ترى أدناه:

انقر لمشاهدة هذه المحاضرة.

بعد تفكيك كائناتنا، سنرى كيفية تجميعها بشكل أفضل. باستخدام عامل انتشار الكائنات (object spread operator)، يمكننا دمج كائنات متعددة بسلاسة بطريقة غير قابلة للتغيير (immutable fashion).

المصفوفات (Arrays)

المصفوفات (arrays) ضرورية لأي قائمة بيانات نعرضها في تطبيقاتنا، ونحن بحاجة إلى معرفة كيفية التعامل معها بسهولة. سنغطي كيفية تنفيذ الإجراءات على جميع العناصر في المصفوفات من خلال دوال المصفوفات ذات الترتيب الأعلى (higher-order array functions) مثل map و filter لتحويل عناصرنا أو إزالتها من مصفوفتنا. بالإضافة إلى ذلك، سنستخدم دوال مثل find للحصول على عناصر فردية بناءً على شروط معينة:

انقر لمشاهدة هذه المحاضرة.

بعد ذلك، سنتناول أهم دالة مصفوفة، وهي reduce، وسنرى قوتها في تحويل بيانات المصفوفة الخاصة بنا إلى أي نوع بيانات نريده تقريبًا.

برمجة الكائنات في JavaScript (Object-Oriented JavaScript)

بعد ذلك، سنبدأ ببرمجة الكائنات (object-oriented programming) وسنغطي الفكرة الأساسية وراءها التي تجعل برمجة الكائنات في JavaScript ممكنة: دالة المُنشئ (constructor function). تتيح دوال المُنشئ إعطاء كائناتنا سلوكًا مشتركًا (دوال) من خلال ما يُسمى سلسلة النموذج الأولي (prototype chain).

من خلال ميزة أحدث في JavaScript تُسمى الفئات (classes)، سنتناول كيفية وراثة الوظائف بسهولة من خلال ما يُعرف بالوراثة النموذجية (protypotical inheritance) وتوسيع فئاتنا لمشاركة الميزات بينها.

انقر لمشاهدة هذه المحاضرة.

جافاسكريبت غير المتزامنة (Async JavaScript)

بعد ذلك، سنتقل إلى JavaScript غير المتزامنة (async JavaScript)، وهي مهارة ضرورية لامتلاكها وفهمها إذا كنت ترغب في إنشاء برامج JavaScript متطورة من أي نوع. سنبدأ بمناقشة ماهية الشيفرة غير المتزامنة وكيف تم التعامل معها في الماضي باستخدام دوال الاستدعاء الخلفي (callback functions)، وكيف يخلق هذا مشاكل في شيفرتنا (مثل ‘جحيم الاستدعاءات الخلفية’ أو callback hell).

لحسن الحظ، سنقوم بإصلاح بعض المشاكل الكامنة في استخدام الاستدعاءات الخلفية من خلال ميزة ES6 تُسمى الوعد (Promise). سنكتسب خبرة في استخدام الوعود بطريقة عملية من خلال التعرف على واجهة برمجة تطبيقات الجلب في المتصفح (browser's Fetch API)، والتي تتيح لنا إجراء طلبات HTTP وجلب البيانات الخارجية إلى تطبيقاتنا. ثم، والأفضل من ذلك كله، سنتطرق إلى كيفية جعل وعودنا تعمل وتبدو تمامًا مثل الشيفرة المتزامنة (synchronous code) حتى نتمكن من فهمها بسهولة بمساعدة بناء الجملة الجديد async-await للدوال.

انقر لمشاهدة هذه المحاضرة.

مواضيع أساسية ومتقدمة

سنختتم الدورة ببعض المهارات الأساسية اللازمة لبدء بناء مشاريع JavaScript كاملة. أولاً وقبل كل شيء، سنتعمق في وحدات ES Modules، وهي ميزة من ES6 تتيح لنا مشاركة شيفرة JavaScript الخاصة بنا عبر الملفات.

سنتناول قضايا شائكة مثل الكلمة المفتاحية this من خلال تغطية قائمة من القواعد المحددة التي يجب اتباعها لتحديد قيمتها في أي سياق، مثل في معالج حدث DOM:

انقر لمشاهدة هذه المحاضرة.

وأخيرًا، سنختتم الدورة بمناقشة عامة حول الشيفرة الأمرية (imperative code) مقابل الشيفرة التصريحية (declarative code)، وهو ما يجب أن تسعى إليه في مسيرتك المهنية في البرمجة، ولماذا. شاهد الدورة الآن.

التحق بهذه الدورة، وفي غضون يوم أو يومين، ستتعلم مفاهيم ستنمي مهاراتك في JavaScript بشكل كبير وتمكنك من التعامل مع مكتبات الواجهة الأمامية (front-end libraries) القوية مثل React، Angular، Svelte، Vue، وغيرها بثقة. استمتع!

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

انقر للبدء.

ريد. اقرأ المزيد من المنشورات. إذا كان هذا المقال مفيدًا، شاركه. تعلم البرمجة مجانًا. ساعد منهج freeCodeCamp مفتوح المصدر أكثر من 40,000 شخص في الحصول على وظائف كمطورين. ابدأ.

الخلاصة التقنية

تُعد هذه الدورة المكونة من 28 جزءًا خريطة طريق ممتازة لأي مطور يسعى لإتقان JavaScript والانتقال من المفاهيم الأساسية إلى بناء تطبيقات ويب احترافية باستخدام أحدث الأطر والمكتبات. تتميز الدورة بتركيزها العملي على سد الفجوة المعرفية بين JavaScript الأساسية وأطر عمل مثل React و Angular و Vue، مما يجعلها قيمة حقيقية للمتعلمين. إن التغطية المتعمقة لمفاهيم مثل الإغلاقات، والبرمجة غير المتزامنة، والتعامل مع الكلمة المفتاحية this، تضمن فهمًا شاملاً يمكن للمطورين البناء عليه بثقة في مشاريعهم المستقبلية.