دورة أساسيات JavaScript

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

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

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

الهدف من الحلقة أن تتعلّم كيف تجهّز مشروعك بشكل سليم، وتتأكد أن JavaScript متصلة بالصفحة وجاهزة للاستخدام قبل الدخول في كتابة الأكواد فعليًا.

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

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

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

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

وفي النهاية نتعرّف على طريقة عرض النتائج مباشرة داخل صفحة الويب، لتكون الصورة مكتملة لديك عن وسائل التواصل مع المستخدم، ومتى تختار كل طريقة بحسب هدفك من الكود.

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

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

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

في هذه الحلقة أجيب معك عن سؤال أساسي: كيف تتعرّف JavaScript على نوع القيمة التي نضعها داخل المتغير؟ سأوضح لك لماذا لا نحتاج في هذه اللغة إلى تحديد نوع المتغير مسبقًا، وكيف تعتمد JavaScript على شكل القيمة نفسها لتحديد ما إذا كانت رقمًا أو نصًا.

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

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

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

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

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

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

سنرى معًا كيف يتم تنظيم الخصائص داخل الكائن، وكيف تظهر هذه الخصائص عند التعامل معها أو طباعتها، لتفهم الفرق بينه وبين الأنواع الأخرى من البيانات التي تعرّفت عليها سابقًا.

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

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

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

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

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

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

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

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

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

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

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

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

الهدف من هذه الحلقة أن تكون واعيًا بالفارق بين الطريقتين، ومستعدًا لتطبيقه بشكل عملي في الأمثلة القادمة.

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

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

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

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

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

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

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

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

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

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

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

في نهاية الحلقة أربط كل ما سبق باستخدام ملف JavaScript خارجي، وأؤكد لك أن فهم الحلقات بهذه الصورة هو أساس أي تطبيق ويب حقيقي سنبني عليه في الحلقات القادمة.

في هذه الحلقة أشرح لك أهم مفهوم في JavaScript، وهو الدوال، ولماذا تُعد من أكثر موضوعات المقابلات الوظيفية شيوعًا. سنبدأ بالسؤال الأساسي: لماذا نستخدم الدوال؟ ثم أوضح لك الفرق بينها وبين الحلقات، ومتى نحتاج كل واحدة منهما.

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

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