تعريف حلقه :

 • « يكي ديگر از ويژگيهاي مفيد جاوا اسكريپت و همچنين ساير زبانهاي برنامه نويسي،

 توانايي ايجاد حلقه‌هاي تكرار،

 يا اجراي گروهي از دستورالعملها به صورت تكراري است.

 اين، يكي از كارهايي است كه رايانه‌ها قادرند تا به خوبي آنها را انجام دهند،

 و آن چيزي نيست جز انجام كارهاي تكراري با دقت بالا.

 در برنامه‌هاي اسكريپت، از حلقه‌هاي تكرار به عنوان يك ابزار قوي و مهم،

 استفاده‌هاي فراواني مي‌شود.

ادات حلقه :

 • از روشهاي مختلفي براي ايجاد حلقه، استفاده مي‌شود.

1. for
2. While
3. do ... while

معروفترين ابزار حلقه، for است.

ساختمان حلقه for :

 • ساختمان حلقه، شبيه يك زنجير است كه از تعدادي حلقه، ساخته شده است.

for (Counter; Condition Expression; step)
{Code}

حلقه for، از چهار جزء، تشكيل شده است.

 همانطور كه مي‌بينيد، داراي سه پارامتر است كه داخل پرانتز ( ) قرار گرفته‌اند

و با سمي كالن (;) از هم جدا مي‌شوند ،

 و يك جواب، كه حاوي كد مورد نظر ما بوده، و داخل يك كروشه { } قرار مي‌گيرد.

1. ابتداي حلقه:a = 0. اين عدد، شروع و ابتداي حلقه را معيّن مي‌كند.

2. انتهاي حلقه: a < 10. اين عدد، حداكثر و انتهاي حلقه - به عبارت ديگر، تعداد تكرار دستورات - را مشخص مي‌كند.

3. افزايش يا كاهش: اين پارامتر، مشخص مي‌كند كه حلقه، در هر بار اجرا، يك واحد زياد شود يا كم.

4. جواب حلقه: حلقه، بي شباهت به شرط نيست. به عبارت ديگر: اگر متغير ما (a)، از 0 تا 10 تداوم داشت، نمايش پيام، ادامه داشته باشد.

نكته: اگر حلقه، تنها شامل يك جواب باشد ، نيازي نيست كه آن را درون علامت كروشه { } قرار دهيم.

مثال : دستورالعمل زير، پيامي را 10 مرتبه ، جهت توجه بيشتر كاربر، نمايش مي‌دهد:

for (a = 0; a < 10; a++)
{
    document.write ("پيام" + a); // جواب حلقه
}

ساختمان حلقه while :

حلقه while از لحاظ اجزاء تشيكل دهنده، فرقي با حلقه for نداري؛ اما از لحاظ تركيب و محل قرار گرفتن آنها، متفاوت است.

var a = 0;
while (a < 10)
{
document.write ("پيام",a ,"<br>");
a++;
}

همانطور كه مي‌بينيد، متغير، قبل از while، تعريف شده، و داخل پرانتز، يك پارامتر قرار گرفته.

 پارامتر افزايش هم بعد از كد، نوشته شده. به محل قرار گيري اين پارامتر دقت كنيد ،

 چون اگر قبل از دستور، نوشته شود، معناي ديگري مي‌دهد و كمي در نتيجه كار، تغيير ايجاد مي‌كند.

ساختمان حلقه do ... while :

var a = 0;
do
{
document.write ("پيام",a );
a++;
}
while (a < 10);

توجه داريد كه براي درك راحت اين مفاهيم، فقط اسكلت و شكل ساده آنها را نوشته‌ام.

اهميت حلقه :

اگر به شباهت حلقه و شرط دقت كنيد، متوجه اهميت آن نيز خواهيد شد.

حداقل فايده حلقه، اختصار در كدنويسي است.

 مثلا به جاي اينكه ده مرتبه يك عبارت را بنويسيد،

 اينكار را با دستور ساده حلقه، به راحتي مي‌توانيد انجام دهيد.

مثال عملی1 : ساخت جدول ضرب، با حلقه

ابتدا لازم است بدانيد كه چگونه يك جدول (Table) در اچ ‌تي‌ام‌ال ساخته مي‌شود.

ساختمان جدول با کد های اچ تی ام ال :

جدول، تشكيل شده از ستون افقي و ستون عمودي.

 تگ اصلي جدول به اين صورت است:<table> </table>.

 مابين اين دو، تگ ستون افقي <tr> </tr> و عمودي <td> </td> قرار مي‌گيرد.

<table border="1" bordercolor="#000000" width="150" height="100" bgcolor="black ">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

همانطور كه مي‌بينيد، تگ جدول، چند پارامتر دارد كه

مشخصات آن را (اندازه، حاشيه، رنگ و ...) مشخص مي‌كند.

كد:

<script>
function funFor()
{
            document.writeln("<Table Border=1>");
            for(a= 1;a <= 10; a++)
            {
                document.writeln("<TR>")
                for(b= 1;b <= 10; b++)
                {
                   if ((a+b)%2)
                    {
                        document.writeln("<TD bgcolor=blue>"+ a * b + " </TD>")
                    }
                   else {
                           document.writeln("<TD>"+a * b +" </TD>")
                    }
                }
                document.writeln("</TR>");
            }
            document.writeln("</Table>");
}
funFor();
</script>

مثال عملی2: اسكرول صفحه (حركت صفحه از بالا به پايين)

شرح عمليات: ساخت اين برنامه، بسيار ساده و راحت است.

. مواد لازم براي آن، يك حلقه، و يك متد اسكرول صفحه است، كه در يك تابع قرار مي‌دهيم.

. يك تابع (funDown) براي پايين رفتن، و يك تابع (funUp) براي بالا آمدن.

 اين توابع، به صورت مستقل، اجرا‌ مي‌شوند.

. در قسمت بدنه، دو دكمه (يا چيزي شبيه آن) قرار مي‌دهيم.

يكي براي فعال كردن تابع اول، و ديگري براي تابع دوم.

 به هنگام كليك بر روي دكمه‌ها، توابع، اجرا مي‌شوند؛ يعني بايد از رويداد onClick استفاده كنيم.

كد:

<script>
function funDown() // تابعي كه صفحه را به طرف پايين مي‌برد
{
            for (a = 1; a <= 600; a++) // حلقه‌اي كه افزايش دارد
            {
            window.scroll (1,a); // متد اسكرول صفحه
            }
}
function funUp() // تابعي كه صفحه را به طرف بالا مي‌برد
{
            for (a = 600; a >= 1; a--) // حلقه‌اي كه كاهش دارد
            {
            window.scroll (600, a);
           }
}
</script>