ساختارهای شرطی در جاوا اسکریپت

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

توجه :   * 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 >
خروجی : 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 >

 ۲ )   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 >
خروجی : This Number is bigger than 10

در حالت دوم به دلیل کوچکتر بودن عدد 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 >
خزروجی : This Number is smaller than 10

دستور 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 >

 

منبع: sitedesign-co.com