الشروط (if / else) في JavaScript

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

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

الكثير من المبتدئين يشعرون أن البرمجة مجرد كتابة أوامر متتالية، لكن الحقيقة أن أي برنامج حقيقي لا يمكن أن يعمل بدون شروط. المواقع، التطبيقات، الألعاب، وحتى أبسط النماذج تعتمد على if / else لتحديد ما الذي يجب أن يحدث في كل حالة.

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

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

ما هي الشروط في JavaScript؟

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

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

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

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

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

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

أول شرط if بسيط

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

طريقة قراءة if تشبه القراءة الطبيعية للجملة. أنت تقول للغة: إذا تحقق هذا الأمر، افعل كذا. JavaScript لا تفكر ولا تفسر، بل تفحص الشرط فقط. إن كانت النتيجة true تنفذ، وإن كانت false تتجاوز الكود.

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

<!--
let age = 20;

if (age >= 18) {
    console.log("مسموح لك بالدخول");
}
-->

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

لاحظ أن الكود داخل if لا يُنفذ دائمًا. وجوده لا يعني أنه سيعمل في كل الحالات. هذا هو الفرق الجوهري بين البرمجة العادية والبرمجة المعتمدة على المنطق.

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

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

استخدام else

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

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

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

<!--
let age = 16;

if (age >= 18) {
    console.log("مسموح لك بالدخول");
} else {
    console.log("غير مسموح لك بالدخول");
}
-->

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

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

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

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

الشروط مع المقارنات

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

المقارنات تُرجع دائمًا نتيجة منطقية، إما true أو false. هذه النتيجة هي ما تعتمد عليه if لاتخاذ القرار. عندما تكتب شرطًا، فإنك في الحقيقة تكتب سؤالًا، وJavaScript تجيب عليه ثم تقرر التنفيذ.

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

<!--
let score = 75;

if (score >= 60) {
    console.log("ناجح");
} else {
    console.log("راسب");
}
-->

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

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

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

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

الشروط مع المتغيرات

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

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

في الحياة الواقعية، القرارات دائمًا تعتمد على معلومات متغيرة. العمر يختلف من شخص لآخر، النقاط تختلف من طالب لآخر، والرصيد يختلف من مستخدم لآخر. JavaScript تتعامل مع هذه الحالات من خلال المتغيرات داخل الشروط.

<!--
let balance = 120;

if (balance >= 100) {
    console.log("يمكنك إتمام عملية الشراء");
} else {
    console.log("الرصيد غير كاف");
}
-->

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

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

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

في الفصل القادم، سننتقل إلى التعامل مع أكثر من حالة باستخدام else if، ونرى كيف تبني منطقًا يحتوي على عدة مسارات مختلفة.

أكثر من شرط (else if)

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

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

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

<!--
let grade = 85;

if (grade >= 90) {
    console.log("ممتاز");
} else if (grade >= 75) {
    console.log("جيد جدًا");
} else if (grade >= 60) {
    console.log("جيد");
} else {
    console.log("ضعيف");
}
-->

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

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

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

مع فهم else if، تصبح قادرًا على بناء منطق متعدد الحالات، وهو ما يُستخدم في أغلب البرامج الواقعية، من تقييمات المستخدمين إلى أنظمة الصلاحيات.

أخطاء شائعة عند استخدام if / else

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

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

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

<!--
let age = 18;

if (age = 18) {
    console.log("العمر 18");
}
-->

في هذا المثال، الشرط لا يقوم بالمقارنة، بل يقوم بتغيير قيمة المتغير. JavaScript لا تمنع هذا السلوك، لكن النتيجة تكون مختلفة عن المتوقع. الانتباه لعلامات المقارنة أمر أساسي لتجنب هذا النوع من الأخطاء.

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

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

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

الشروط داخل الشروط

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

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

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

<!--
let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn) {
    if (isAdmin) {
        console.log("مرحبًا أيها المدير");
    } else {
        console.log("مرحبًا أيها المستخدم");
    }
}
-->

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

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

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

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

كيف تتدرب على الشروط بشكل صحيح؟

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

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

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

<!--
let temperature = 30;

if (temperature > 25) {
    console.log("الجو حار");
} else {
    console.log("الجو معتدل");
}
-->

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

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

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

الخاتمة: الشروط هي عقل البرنامج

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

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

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

الخطوة التالية بسيطة وواضحة: استمر في التدريب. اطرح أسئلة، وحاول الإجابة عنها باستخدام if / else. لا تخف من الخطأ، لأن كل خطأ هو خطوة إضافية نحو الفهم الحقيقي.

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