مقالات طراحی وب جاوا اسکریپت ساختارهای شرطی در جاوا اسکریپت

از ساختارهای شرطی در زمانی استفاده می شود که بخواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه دیگری از دستورات اجرا شوند.

بر حسب شرایط می توان از یکی از ساختارهای دستوری زیر استفاده کرد:

توجه:  Condition  =  شرط یا شروط         Statment  =  دستور یا دستورات

۱)  if   ( Condition )   Statment:

از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی یکسری دستورات خاص اجرا شوند ، استفاده می شود . در این حالت در صورت عدم بر قراری شرط های تعیین شده ، هیچ دستوری اجرا نخواهد شد.

شکل کلی استفاده از این ساختار به صورت زیر است:

مثال: در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، هیچ خروجی چاپ نشود . به مثال دقت کنید:

در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی بر روی صفحه چاپ می شود.

در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، هیچ پیغام خروجی بر روی صفحه چاپ نمی شود.

۲) if   ( Condition )   Statment 1   else   Statment 2:

از این ساختار در مواقعی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات و در صورت عدم بر قراری آن شروط ، گروهی دیگر از دستورات اجرا شوند.

شکل کلی استفاده از این ساختار به صورت زیر است:

مثال: در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، پیغام “This Number is smaller than 10” چاپ شود . به مثال دقت کنید:

در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی قسمت if بر روی صفحه چاپ می شود.

در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، پیغام قسمت else بر روی صفحه چاپ می شود.

عملگر شرطی:

دستور if تک شرطی را مانند یک عملگر می توان به صورت زیر نیز نوشت.

در این حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار ۱ و در صورت درست نبودن آن مقدار ۲ را به متغیر نسبت می دهد.

شکل کلی استفاده از این ساختار به سورت زیر است:

نام متغیر = ( شرط ) ؟    مقدار ۱:   مقدار ۲

variable name = ( condition ) ? value 1 : value 2;

در مثال بالا اگر مقدار متغیر x از ۱۰ بیشتر باشد ، مقدار متغیر name برابر sam و در صورت کوچکتر بودن مقدار x از ۱۰ ، name برابر david می شود.

۳) if   ( Condition 1 )   Statment 1   else if   ( Condition 2 )   Statment 2   else   Statment 3:

از این ساختار زمانی استفاده می شود که حالت های شروط مورد نظر بیش از یک حالت مختلف است ، که در صورت بر قرار بودن هر گروه از شرط های مورد نظر ، می خواهیم دستورات خاص آن شرط ها اجرا شوند.

در این ساختار ، شرط اول در دستور if ابتدا تعریف شده و هر یک از گروه شرط های دیگر به وسیله یک دستور else if تعیین می شود . در آخر نیز واژه کلیدی else و دستورات مربوط با آن قرار می گیرد ، که در صورت عدم بر قراری تمام گروه شرط های تعیین شده ، دستورات قسمت else اجرا می شوند.

در این ساختار چنانچه هر یک از شرط های یک دستور if یا else if درست باشند ، دستورات مربوط به آن اجرا شده و برنامه از کنترل و اجرای سایر شرط های دیگر خودداری می کند . چنانچه هیچ یک از گروه شرط های تعیین شده درست نباشند ، دستورات بخش else در پایان ساختار اجرا می شوند.

شکل کلی استفاده از این ساختار به صورت زیر است:

نکته ۱: به تعداد مورد نیاز می توان در این ساختار به وسیله دستور else if شرط و دستورات جدید تعریف کرد.

نکته ۲: استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بیش از یک خط هستند ، ضروری است.

نکته ۳: تعیین قسمت else در ساختار فوق اختیاری بوده و می تواند تعریف نشود.

نکته ۴: در زمانی که تعداد حالت های شروط بسیار زیاد هستند ، بهتر است از ساختار Switch استفاده کرد.

مثال: در مثال زیر یک کادر متن و یک دکمه فرمان قرار داده شده است . کادر متن ورودی را از کاربر دریافت کرده و. با کلیک بر روی دکمه فرمان ، خروجی را در کادر آبی رنگ می بینیم.

شکل عملکرد این مثال به صورت زیر است:

رویداد کلیک دکمه فرمان تابع ( ) ifclause را که در قسمت < head > قرار دارد ، را فراخوانی می کند . در این تابع یک دستور if سه شرطی قرار داده شده است ، که مقدار متغیر matn را ارزیابی کرده و در صورتی که مقدار آن برابر ۱ باشد ، عبارت one ، در صورت ۲ بودن عبارت two ، در صورت ۳ بودن عبارت three و در صورتی که مقدار آن به غیر از یکی از موارد فوق باشد ، عبارت bigger than 3 را نمایش می دهد.

نکات مهم : نکات زیر در مثال با شماره مشخص شده اند.

خاصیت value در یک کادر متن به متن موجود در آن کنترل اشاره می کند . در اینجا ما متن موجود در کنترل txtinput را در متغیر matn ذخیره کرده ایم.

رویداد onclick رویدادی است که در هنگام کلیک بر روی یک کنترل فعال می شود . برای فراخوانی یک تابع توسط یک کنترل ، نام آن تابع را در رویداد onclick کنترل قرار می دهیم.

ساختارهای شرطی در جاوا اسکریپت
به این مطلب رای دهید
Telegram Facebook WhatsApp +Google Twitter LinkedIn

دیدگاه خود را بیان کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.