سلام دوباره به همه دوستاني كه منو در پايگاه قبلي، همراهي كردند. چه ميشه كرد؛ سال جديد و خونه تكوني. امان از درد مستاجري. اونجا صابخونه ما رو جواب كرد. دنبال يك جاي مناسب مي‌گشتم. اومدم بنگاه بلاگفا كه خونه بگيرم؛ اما چشمتون روز بد نبينه. اتاق خالي نداشت. همه پر بودند. البته خالي بود ولي در شان ما نبود. آخه وبلاگ آشپزي به چه كار من مياد. براي همين مجبور شدم، آدرسم رو كمي تغيير بدم. به جاي JavaScript (كه فعلا در اختيار دوست عزيزم در پايگاه ايران جاوا اسكريپت است)، شده JScript.

باور كنيد اين مقاله رو خيلي وقته كه نوشتم و آماده كردم؛ ولي امان از دست اين آمريكاي چيزخوار. چشم نداره كه پيشرفت ما رو ببينه. هي ميزنه پرشين بلاگ رو خراب ميكنه و نميذاره مطلب جديد بنويسم. منم كه ديدم اين جوريه، گفتم به كوري چشم آمريكا، بايد يك جاي مناسب پيدا كنم. يكي از جاهايي كه مناسب ديدم، همين جاست كه الان واستاديم. شايد هم برم جاي ديگه. نه به اون روز كه هيچ جا نداشتيم كه بنويسيم، نه به امروز كه ... .

تغييرات:
1- در همين درس، تغييراتي داده شده.
2- واژه نامه در "يك پروژه" كاملتر شد.
3- جلسه 6، شرط، كاملتر شد.
 

حلقه (زنجيره)

 • در زندگي، بعضي چيزها تكرار مي‌شوند؛ هر روز و هر شب؛ و گاهي هر لحظه؛ مثل نفس كشيدن. كارهايي كه حلقه وار انجام مي‌شوند يا انتها و عمر محدودي دارند، و يا بي‌انتها و نامحدودند؛ مانند شب و روز. چون برنامه‌نويسي، اقتباسي از زندگي انسان است، و قرارست در خدمت ما باشد، از اين قاعده مستثني نيست.
 

تعريف حلقه

 • « يكي ديگر از ويژگيهاي مفيد جاوا اسكريپت و همچنين ساير زبانهاي برنامه نويسي، توانايي ايجاد حلقه‌هاي تكرار، يا اجراي گروهي از دستورالعملها به صورت تكراري است. اين، يكي از كارهايي است كه رايانه‌ها قادرند تا به خوبي آنها را انجام دهند، و آن چيزي نيست جز انجام كارهاي تكراري با دقت بالا. در برنامه‌هاي اسكريپت، از حلقه‌هاي تكرار به عنوان يك ابزار قوي و مهم، استفاده‌هاي فراواني مي‌شود. » كتاب "خود آموز جاوا اسكريپت در 24 ساعت"
 

ادات حلقه

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

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>

• براي ديدن نمونه عملي آن، اينجا كليك كنيد.

واژه نامه: اين اصطلاحات را به خاطر داشته باشيد؛ چون در برنامه نويسي، كاربرد دارد.

Table = جدول. <table>
Row = سطر، ستون افقي. <tr>
Cell = سلول، خانه‌هاي جدول. <td>
window = شي صفحه است، كه داراي  متدهاي مختلفي است.
window.scroll = متد اسكرول صفحه. داخل پرانتز، دو پارامتر دارد كه دو عدد هستند كه موقعيت صفحه را نشان مي‌دهند. اولي، موقعيت فعلي صفحه؛ دومي، موقعيتي كه بايد به آنجا برسد.
window.scrollTo - window.scrollBy = دو متد ديگر از parent هستند. با تمرين، به دست آورديد كه چه كاري انجام مي‌دهند.
parent = معادل window است و در مورد اسكرول، مي‌تواند به جاي آن قرار گيرد.

به اميد ديدار
خدانگهدار