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