از ساختارهای شرطی در زمانی استفاده می شود که بخواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه دیگری از دستورات اجرا شوند.
بر حسب شرایط می توان از یکی از ساختارهای دستوری زیر استفاده کرد:
توجه: Condition = شرط یا شروط Statment = دستور یا دستورات
۱) if ( Condition ) Statment:
از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی یکسری دستورات خاص اجرا شوند ، استفاده می شود . در این حالت در صورت عدم بر قراری شرط های تعیین شده ، هیچ دستوری اجرا نخواهد شد.
شکل کلی استفاده از این ساختار به صورت زیر است:
if ( شرط یا شروط )
{
دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
}
مثال: در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، هیچ خروجی چاپ نشود . به مثال دقت کنید:
در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی بر روی صفحه چاپ می شود.
< script type="text/javascript" >
var IntNum = ۱۸
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
< /script >
در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، هیچ پیغام خروجی بر روی صفحه چاپ نمی شود.
< script type="text/javascript" >
var IntNum = ۸
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
< /script >
۲) if ( Condition ) Statment 1 else Statment 2:
از این ساختار در مواقعی استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات و در صورت عدم بر قراری آن شروط ، گروهی دیگر از دستورات اجرا شوند.
شکل کلی استفاده از این ساختار به صورت زیر است:
if ( شرط یا شروط )
{
دستوراتی که در صورت بر قرار بودن شرط یا شروط اجرا می شوند
}
else
{
دستوراتی که در صورت عدم بر قراری شرط یا شروط اجرا می شوند
}
مثال: در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، پیغام “This Number is smaller than 10” چاپ شود . به مثال دقت کنید:
در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی قسمت if بر روی صفحه چاپ می شود.
< script type="text/javascript" >
var IntNum = ۱۸
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
else
{
document.write ("This Number is smaller than 10")
}
< /script >
در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، پیغام قسمت else بر روی صفحه چاپ می شود.
< script type="text/javascript" >
var IntNum = ۸
if ( IntNum > 10 )
{
document.write (" This Number is bigger than 10 ")
}
else
{
document.write ("This Number is smaller than 10")
}
< /script >
عملگر شرطی:
دستور if تک شرطی را مانند یک عملگر می توان به صورت زیر نیز نوشت.
در این حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار ۱ و در صورت درست نبودن آن مقدار ۲ را به متغیر نسبت می دهد.
شکل کلی استفاده از این ساختار به سورت زیر است:
نام متغیر = ( شرط ) ؟ مقدار ۱: مقدار ۲
variable name = ( condition ) ? value 1 : value 2;
var name = ( x > 10 ) ? sam : david
در مثال بالا اگر مقدار متغیر 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 در پایان ساختار اجرا می شوند.
شکل کلی استفاده از این ساختار به صورت زیر است:
if ( گروه شرط های شماره ۱ )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های ۱ اجرا می شوند
}
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 کنترل قرار می دهیم.
< html >
< head >
< title > عنوان صفحه < /title >
< script type="text/javascript" >
function ifclause ( ) ابتدای تعریف تابع
{
var matn ; تعریف متغیر
۱ var matn = txtinput.value ; قرار دادن متن کادر متن در متغیر
if (matn == '1')
document.write ("one")
else if ( matn =='2')
document.write ( "two" )
else if ( matn == '3' )
document.write ( "three" )
else
document.write ( "Bigger than three" )
}
< /script >
< /head >
< body >
< input type="text" id="txtinput" / > تعریف کادر متن
۲ < input type="button" id="btnclick" onclick="ifclause( )" value="click me" / > تعریف دکمه فرمان
< /body >
< /html >