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

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

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

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