البيانات الشرطية
البيانات الشرطية (Conditional Statements) هي أساس التحكم في تدفق البرمجيات في جافاسكربت (JavaScript). تخيل أنك تقوم ببناء منزل، حيث تحتاج إلى اتخاذ قرارات في كل خطوة: هل نضع هذه الحجرة هنا أم هناك؟ هل نستخدم هذه المادة أم تلك؟ البيانات الشرطية تمنحك القدرة على اتخاذ قرارات مماثلة في البرامج. إنها تسمح للبرنامج بتحديد أي مسار يتبعه بناءً على شروط محددة، مما يجعل تطبيقك أكثر ديناميكية وذكاء.
في مواقع الأخبار، يمكنك استخدام البيانات الشرطية لتغيير المحتوى المعروض بناءً على نوع المستخدم أو تصنيفات الأخبار. في مواقع التجارة الإلكترونية، يمكنك تحديد ما إذا كان العميل مؤهلاً للحصول على خصم معين أو عرض خاص. على صفحة شخصية، يمكن للبيانات الشرطية تخصيص تجربة المستخدم، مثل عرض رسالة ترحيب مختلفة حسب الوقت من اليوم. أما في البوابات الحكومية، فهي تساعد في عرض معلومات محددة بناءً على حالة المستخدم، مثل البيانات المتاحة للمواطن أو الموظف.
في هذا الدرس، ستتعلم كيفية استخدام if و else و else if و switch لاتخاذ القرارات في الكود، بالإضافة إلى دمج العمليات المنطقية لمزيد من التحكم الدقيق. سنستخدم أمثلة عملية وقابلة للتنفيذ تساعدك على ربط المفاهيم بحالات الحياة الواقعية، مثل إدارة الأخبار، التحقق من العروض، أو تخصيص الرسائل، تمامًا كما تنظم مكتبة ضخمة لتسهيل الوصول إلى الكتب المفضلة.
مثال أساسي
javascript// مثال أساسي للتحقق من حالة المستخدم
let userRole = "admin"; // دور المستخدم يمكن أن يكون admin أو editor أو guest
if (userRole === "admin") {
console.log("مرحبًا، يمكنك إدارة كل المحتوى."); // رسالة للمسؤول
} else if (userRole === "editor") {
console.log("مرحبًا، يمكنك تعديل المحتوى."); // رسالة للمحرر
} else {
console.log("مرحبًا، يمكنك قراءة المحتوى فقط."); // رسالة للزائر
}في المثال أعلاه، نبدأ بتعريف متغير userRole الذي يحدد دور المستخدم. يستخدم if للتحقق مما إذا كان الدور هو "admin"، وفي هذه الحالة يعرض رسالة ترحيبية للمسؤول. إذا لم يكن الشرط الأول صحيحًا، ينتقل البرنامج إلى else if للتحقق مما إذا كان المستخدم محررًا. إذا لم يتحقق أي من الشرطين السابقين، يتم تنفيذ else، والتي تعمل كخطة افتراضية لأي دور آخر، مثل الزائر.
تركيب if-else يتيح لك معالجة سيناريوهات متعددة بطريقة منظمة، مما يسهل فهم الكود وصيانته. كما أن استخدام === بدلًا من == يمنع المقارنات غير الدقيقة بين القيم، وهو من ممارسات البرمجة الجيدة. من منظور تطبيقي، هذا النمط من البيانات الشرطية يتيح لك تخصيص تجربة المستخدم بشكل ديناميكي، سواء على موقع إخباري حيث تحتاج إلى تمييز محرر عن زائر، أو في بوابة حكومية حيث تختلف الصلاحيات حسب الدور.
باستخدام هذه الأساليب، يمكنك دمج عمليات منطقية أكثر تعقيدًا، مثل استخدام && و ||، للتحكم في الوصول بشكل أدق، أو التعامل مع بيانات متعددة لتحديد المسار الأنسب في الكود. هذه المهارات تجعل تطبيقاتك أكثر مرونة واحترافية.
مثال عملي
javascript// مثال عملي لتطبيق خصومات في موقع تجارة إلكترونية
let userType = "vip"; // أنواع المستخدم: regular, vip
let purchaseAmount = 250; // مبلغ الشراء بالدولار
if (userType === "vip" && purchaseAmount > 200) {
console.log("تهانينا! لقد حصلت على خصم 20٪."); // خصم للمستخدم المميز
} else if (userType === "vip") {
console.log("يمكنك الحصول على خصم 10٪ على مشترياتك القادمة."); // خصم أقل
} else if (purchaseAmount > 200) {
console.log("لقد حصلت على شحن مجاني."); // عرض خاص للشراء الكبير
} else {
console.log("تسوق أكثر لتستفيد من العروض."); // رسالة تحفيزية للمستخدم العادي
}في هذا المثال، استخدمنا البيانات الشرطية لتطبيق نظام خصومات متنوع يعتمد على نوع المستخدم ومقدار الشراء. الشرط الأول يتحقق من أن المستخدم VIP وأن مبلغ الشراء أكبر من 200 دولار، ومن ثم يمنحه خصمًا كبيرًا. الشرط الثاني يتحقق من كون المستخدم VIP فقط، ليعطيه خصمًا أقل. الشرط الثالث يعتمد على مبلغ الشراء وحده، لتقديم شحن مجاني. وأخيرًا، else تعمل كخطة افتراضية لتشجيع المستخدم العادي على زيادة مشترياته.
لاحظ كيف جمعنا بين && (و) للتحقق من شرطين معًا. هذا يعكس القدرة على التحكم الدقيق في تدفق البرنامج. في تطبيق عملي، مثل مواقع التجارة الإلكترونية، هذه الطريقة تسمح بتخصيص العروض لكل مستخدم بشكل ذكي، وتحسين تجربة التسوق وزيادة المبيعات. كما أن كتابة التعليقات بالعربية تساعد المبتدئين على فهم الكود بسرعة، ويمثل نموذجًا جيدًا للتوثيق الداخلي للكود.
أفضل الممارسات تشمل استخدام المقارنات الصارمة (=== و !==) لتجنب الأخطاء المنطقية، كتابة التعليقات لتوضيح الهدف من كل شرط، وفصل الشروط المعقدة إلى دوال صغيرة لتسهيل الصيانة وإعادة الاستخدام. من المهم أيضًا التعامل مع الأخطاء بطريقة مناسبة، مثل التحقق من قيم المتغيرات قبل استخدامها لتجنب الأخطاء في وقت التشغيل.
أما الأخطاء الشائعة فتشمل: إنشاء حلقات شرطية غير منتهية، استخدام == بدلاً من === مما يؤدي لمقارنات غير دقيقة، عدم التعامل مع جميع الحالات الممكنة، واستخدام متغيرات غير معرفة داخل الشروط. لتصحيح هذه الأخطاء، يفضل استخدام أدوات التصحيح (Debugger) و console.log لفهم تدفق البرنامج، واختبار جميع السيناريوهات المحتملة قبل نشر الكود.
باستخدام هذه الممارسات، يمكنك كتابة كود نظيف وآمن وفعال، مع تقليل الأخطاء وتحسين الأداء، مما يعزز تجربة المستخدم في التطبيقات العملية مثل المواقع الإخبارية أو بوابات الحكومة الإلكترونية.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| if | تتحقق من شرط محدد وتنفذ الكود عند صحته | if(userAge >= 18){console.log("بالغ")} |
| else if | تتحقق من شرط إضافي إذا فشل الشرط السابق | else if(userAge >= 13){console.log("مراهق")} |
| else | تنفذ الكود إذا لم تتحقق أي شروط سابقة | else{console.log("طفل")} |
| switch | تستخدم لتحديد مسار البرنامج بناءً على قيمة متغير | switch(day){case "Mon": ...} |
| && | عامل "و" المنطقي للتحقق من شرطين | if(isVIP && amount>200){...} |
| عامل "أو" المنطقي للتحقق من شرط واحد على الأقل | if(isVIP | amount>200){...} |
ملخص الدرس والخطوات القادمة: البيانات الشرطية تمنحك القدرة على التحكم في تدفق البرنامج واتخاذ القرارات بناءً على شروط متعددة، وهو أمر أساسي لأي تطبيق تفاعلي. تعلمت كيفية استخدام if و else و else if و switch، وكذلك كيفية دمج العمليات المنطقية لتعزيز التحكم في الكود.
هذه المهارات تتكامل مع التعامل مع HTML DOM، حيث يمكن تعديل عناصر الصفحة ديناميكيًا بناءً على شروط معينة، ومع البرمجة الخلفية للتحقق من الصلاحيات أو تطبيق العروض حسب قواعد محددة. للخطوة التالية، يمكن دراسة الدوال (Functions) للتعامل مع الشروط المتكررة، وأيضًا التعرف على الأحداث (Events) للتحكم في تفاعل المستخدم.
الاستمرار في ممارسة هذه الأمثلة العملية، مثل تخصيص العروض أو تعديل المحتوى بناءً على شروط المستخدم، سيزيد من فهمك للبرمجة الديناميكية، ويعزز قدرتك على كتابة كود متقدم وآمن.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى