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

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

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