جلسه سیزدهم

سلام

سلام دوباره به همه دوستانی که منو در پایگاه قبلی، همراهی کردند. چه میشه کرد؛ سال جدید و خونه تکونی. امان از درد مستاجری. اونجا صابخونه ما رو جواب کرد. دنبال یک جای مناسب می‌گشتم. اومدم بنگاه بلاگفا که خونه بگیرم؛ اما چشمتون روز بد نبینه. اتاق خالی نداشت. همه پر بودند. البته خالی بود ولی در شان ما نبود. آخه وبلاگ آشپزی به چه کار من میاد. برای همین مجبور شدم، آدرسم رو کمی تغییر بدم. به جای 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 است و در مورد اسکرول، می‌تواند به جای آن قرار گیرد.

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