حلقه ها در جاوا اسکریپت

امروز از سری مقالات تیک4 قصد داریم شما را بیشتر با حلقه ‌ها در جاوا اسکریپت آشنا کنیم. باما همراه باشید…

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

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

به طور کلی ۲ نوع حلقه در جاوا اسکریپت داریم:

حلقه for: در این نوع حلقه ، مجموعه دستورالعمل ها به تعداد معلوم و مورد نیاز ، تکرار خواهد شد.

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

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

for

while

do … while

for … in

۱ ) حلقه for:

از حلقه for، زمانی استفاده می شود که می خواهیم مجموعه دستورالعمل های حلقه به تعداد دفعات معینی انجام شود.

این حلقه در هنگام تعریف ۳ پارامتر اصلی دارد:

مقدار اولیه متغیر : به وسیله این مقدار ، مقدار اولیه برای شروع شمارنده حلقه تعیین می شود.

عبارت کنترلی : در این قسمت یک عبارت کنترلی مرتبط با شمارنده حلقه تعیین می شود ، که در هر بار اجرای مجدد حلقه ، شرط عبارت کنترل شده و در صورت برقرار بودن شرط ، دستورات حلقه اجرا می شود.

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

نحوه عملکرد این حلقه به صورت زیر است:

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

شکل کلی تعریف یک حلقه for به صورت زیر است:

for   ( گام افزایش یا کاهش  ; تعیین عبارت کنترلی   ; تعیین مقدار اولیه متغیر )

{

دستورات بدنه حلقه

}

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

مثال: در مثال زیر یک حلقه ساده در اسکریپت زیر ایجاد شده است . شمارنده این حلقه که متغیری به نام n است با مقدار اولیه ۱ مقدار دهی شده و شرط حلقه کوچکتر یا مساوی بودن شمارنده حلقه از ۵ تعیین شده است . گام افزایش این حلقه نیز ۱+ در نظر گرفته شده است . این حلقه در هر بار اجرا مقدار متغیر n را بر روی صفحه چاپ می کند . به خروجی آن دقت کنید:

< script type="text/javascript" >

  var n ;

  for ( n = 1 ; n <= 5 ; n++ )

    {

      document.write ("Line number is " + n + "<br />") ;

    }

< /script >

مثال ۲: همانطور که گفتیم می توان قسمت پارامترهای مقدار اولیه و گام افزایش یا کاهش را در یک حلقه for خالی گذاشته و مقدار اولیه را قبل از تعریف حلقه و گام حلقه را در درون بلاک کد حلقه تعیین کرد . مثال شماره ۱ را به این صورت نیز می توان نوشت:

< script type="text/javascript" >

  var n = 1;

  for (   ; n <= 5 ;   )

    {

      document.write ("Line number is " + n + "<br />") ;

      n++ ;

    }

< /script >

نکته و مثال ۳: گام یک حلقه می تواند منفی یا کاهشی نیز باشد . در مثال زیر شمارنده حلقه با هر بار اجرای حلقه یک واحد کاهش می یابد:

< script type="text/javascript" >

  var n ;

  for ( n = 5 ; n >= 1 ; n-- )

    {

      document.write ("Line number is " + n + "<br />") ;

    }

< /script >

یک برنامه کاربردی:

در این قسمت یک برنامه ساده را با جاوا اسکریپت طراحی کرده ایم . این برنامه از طریق ۲ کادر متن ، دو عدد را به عنوان ورودی دریافت کرده و عدد اول را به توان عدد دوم می رساند.

توضیح : در ابتدا یک متغیر به نام sum برای نگهداری جواب را با مقدار اولیه ۱ تعریف می کنیم . سپس مقدار کادر اول در متغیر n و مقدار کادر دوم را در متغیر i ذخیره می کنیم . از عدد دوم به عنوان شمارنده حلقه استفاده شده که با هر بار اجرای حلقه ، عدد اول یکبار در خود ضرب شده و یک واحد از شمارنده حلقه نیز کم می شود ، تا به ۱ برسد . در این حالت اجرای حلقه متوقف شده و نتیجه خروجی بر روی صفحه چاپ می شود:

< script type="text/javascript" >

  function multiple ( )

    {

      var sum = 1 ;

      var n = Num1.value ;

      for ( var i = Num2.value ; i > 0 ; i-- )

       {

         sum = sum * n ;

       }



      document.write ( sum ) ;

    }

< /script >

< input type="text" id="Num1" />

< input type="text" id="Num2" />

< input type="button" id="Btnclick" value=" Click for Multipe" onclick="multiple( )" / >

حلقه while در جاوا اسکریپت:

از حلقه while در جاوا اسکریپت ، برای اجرای دستورالعمل های مورد نظر تا زمانی که شرط یا شروط تعیین شده برای حلقه درست باشند ، استفاده می شود.

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

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

شکل کلی تعریف یک حلقه while به صورت زیر است:

while   ( شرط یا شروط حلقه )

{

دستوراالعمل های مورد نظر حلقه

}

مثال: مثال اول قسمت آموزش حلقه for را در اینجا با حلقه while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد:

< script type="text/javascript" >

  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه

  while ( n <= 5 )

    {

      document.write ("Line number is " + n + "<br />") ;

      n++ ;           گام افزایشی متغیر کنترلی حلقه

    }

< /script >

مثال ۲: در این مثال برنامه کاربردی که یک عدد را به توان عدد دیگری می رساند را که با حلقه for نوشته بودیم ، را با حلقه while باز نویسی کرده ایم . به تفاوت های این دو ساختار دقت کنید :

< script type="text/javascript" >

  function multiple ( )

    {

      var sum = 1 ;

      var n = Num1.value ;

      var i = Num2.value ;

      while ( i > 0 )

       {

         sum = sum * n ;

         i-- ;

       }



      document.write ( sum ) ;

    }

< /script >



< input type="text" id="Num1" />

< input type="text" id="Num2" />

< input type="button" id="Btnclick" value=" Click for Multipe" onclick="multiple( )" / >

حلقه do … while :

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

مزیت این حلقه نسبت به حلقه while این است که ، در حلقه while در صورت عدم برقراری شرط حلقه دستورات آن هیچگاه اجرا نخواه شد . اما در حلقه do … while، حتی در صورت غلط بودن و عدم برقراری شرط حلقه ، دستورات آن حداقل یکبار اجرا خواهد شد.

شکل کلی تعریف یک حلقه do … while به صورت زیر است:

do

{

دستورات حلقه

}

while  ( شرط یا شروط حلقه )

مثال: مثال اول قسمت آموزش حلقه while را در اینجا با حلقه do … while باز نویسی کرده ایم . در این حلقه از متغیر n به عنوان متغیر شمارنده و کنترل کننده حلقه استفاده شده است . اجرای حلقه تا زمانی که شرط آن درست است ، ادامه دارد:

< script type="text/javascript" >

  var n = 1 ;           تعریف و مقدار دهی متغیر کنترلی حلقه

  do

    {

      document.write ("Line number is " + n + "<br />") ;

      n++ ;           گام افزایشی متغیر کنترلی حلقه

    }

  while ( n <= 5 )

< /script >

مثال: در مثال زیر یک حلقه do … while تعریف شده که شرط اجرای دستورات آن کوچکتر بودن متغیر c از ۵ است . اما قبل از حلقه متغیر c با مقدار ۸ مقدار دهی شده است . می بینیم که با وجود اشتباه بودن و عدم برقراری شرط حلقه دستورات آن حداقل یکبار اجرا شده و خروجی تولید کرده است ، ولی سری دوم اجرای حلقه به دلیل عدم برقراری شرط آن اجرا نشده است:

< script type="text/javascript" >

  var c = 8 ;           تعریف و مقدار دهی متغیر کنترلی حلقه

  do

    {

      document.write ("Line number is " + c + "<br />") ;

      c++ ;          

    }

  while ( c <= 5 )

< /script >

حلقه for…in در جاوا اسکریپت:

از حلقه for … in در جاوا اسکریپت ، برای حرکت در درون اعضای یک آرایه یا مجموعه خواص یک شی استفاده می شود . به ازای خواندن هر یک از اعضا آرایه یا یکی از خواص شی مورد نظر ، یکبار دستورات درون حلقه اجرا خواهد شد.

تعداد دفعات تکرار دستورات حلقه ، برابر با تعداد اعضای آرایه و یا تعداد خواص شی مورد نظر است . در این حلقه معمولا از یک متغیر به عنوان شمارنده یا اندیس آرایه استفاده می شود.

شکل کلی تعریف یک حلقه for…in به صورت زیر است:

for   ( متغیر   in   نام یک آرایه / مجموعه خواص یک شی )

{

دستورات بدنه حلقه

}

مثال: در مثال زیر ابتدا یک آرایه به نام Lesson برای نگهداری نام دروس کامپیوتر با ۵ عضو ایجاد و مقدار دهی شده است . وظیفه حلقه for…in حرکت در درون اعضای آرایه Lesson و چاپ نام تک تک آنها به عنوان خروجی است . به کد مثال دقت کنید:

< script type="text/javascript" >

  var n = 0 ;

  var i = 1 ;

  var Lessons = new Array( 5 ) ;

  Lessons[0] = "HTML" ;

  Lessons[1] = "CSS" ;

  Lessons[2] = "Visual Basic" ;

  Lessons[3] = "Java Script" ;

  Lessons[4] = "ASP.NET" ;

  for ( n   in   Lessons )

    {

      document.write ( "Lesson " + i + " = " + Lessons [n] + "<br / >") ;

      i++ ;

    }

< /script >

– یک مثال مرتبط با دستور continue و حلقه for…in

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

< script type="text/javascript" >

  var n = 0 ;

  var i = 1 ;

  var Lessons = new Array( 5 ) ;

  Lessons[0] = "HTML" ;

  Lessons[1] = "CSS" ;

  Lessons[2] = "Visual Basic" ;

  Lessons[3] = "Java Script" ;

  Lessons[4] = "ASP.NET" ;

  for ( n   in   Lessons )

    {

      if ( n % 2 != 0 ) continue ;

      document.write ( "Lesson " + i + " = " + Lessons [n] + "<br / >") ;

      i++ ;

    }

< /script >