جاوا اسکریپت به زبان ساده: جلسه پانزدهم

در جلسه گذشته با آرایه‌ها آشنا شدیم. در این جلسه می‌خواهیم به شما نکات ناگفته جدیدی از آرایه‌ها را نشان دهیم. مثلا اگر بخواهید تمامی آیتم‌های یک آرایه را به‌صورت یکسان تغییر دهید، چکار می‌کنید؟ اگر دنبال یک آیتم خاص در یک آرایه بگردید چه کار انجام می‌دهید؟ تمامی این‌ها سؤالاتی هستند که در این جلسه می‌خواهیم بدان‌ها پاسخ دهیم. با ما همراه شوید.

تعریف کلی از حلقه (loop) 

سؤال اول: چرا باید از حلقه‌ استفاده کنیم؟ جواب این سؤال را با چند مثال می‌دهیم. فرض کنید می‌خواهیم یک کار تکراری را روی تمامی آیتم‌ها یک آرایه انجام دهیم. مثلا یک آرایه داریم که آیتم‌های آن اعداد زوج از ۲ تا ۱۰ هستند! اگر بخواهیم این آرایه را تبدیل به اعداد فرد کنیم چه کار می‌کنیم؟ آیا پیشنهادتان این است که تک‌تک آیتم‌های آرایه را جداگانه بنویسیم و به آن مقدار جدید فرد بدهیم؟ مسلما این پیشنهاد خوبی نیست. هر چند در یک آرایه کوچک و مشخص می‌تواند عمل کند؛ ولی در یک آرایه که از سمت سرور با حجم اطلاعات زیاد به سمت شما می آید، مطرح کردن چنین پیشنهاداتی حتی خنده‌دار خواهد بود! اینجا است که پیشنهاد شما نوشتن یک حلقه خواهد بود. ولی حلقه چیست و چه کار می‌کند؟ 

حلقه‌ها بر اساس نوع کاربردشان دارای چند تعریف متفاوت هستند و به‌طور کلی به چند نوع تقسیم می‌شوند: 

for:  حلقه for وقتی استفاده می‌شود که بخواهیم یک کار مشخص و تکراری را برای آیتم‌های یک آرایه، تکرار کنیم. در ضمن می‌توانیم هر بار که این کار را تکرار می‌کنیم، یک مقدار جدید بدان اضافه کنیم.

for/in – این نوع حلقه مشابه حلقه for است؛ با این تفاوت که در آبجکت‌ها مورد استفاده می‌گیرد.

while – این حلقه تا وقتی که مقدار یک شرط برابر true باشد، کار مشخصی را تکرار می‌کند. 

do/while – مشابه حالت قبل تا زمانی که مقدار یک شرط برابر true باشد، یک کار مشخص را تکرار می‌کند.

در این دوره ما تنها حلقه for و حلقه while را به علت کاربرد بیشترشان توضیح می‌دهیم. برای خواندن دیگر حلقه‌ها می‌توانید به منابع آموزش دیگر مراجعه کنید.

توضیح حالت اول – حلقه for در آرایه‌ها:

فرض کنید یک آرایه از انواع متغیرها داریم و می‌خواهیم تمامی متغیرها را به ترتیب در یک المان اچ‌تی‌ام‌ال نمایش دهیم. یک راه حل کاملا عجیب(!) این است که تک تک آیتم‌های آرایه را جداگانه در صفحه بنویسیم که این کار بسته به تعداد آیتم‌های آرایه ممکن است سال‌ها به طول بینجامد! یک راه حل اصولی‌تر این است که برای این کار تکراری (نوشتن نام پیتزاها در اچ‌تی‌ام‌ال) یک حلقه بسازیم تا  کار نمایش آن‌ها را تکرار کند.برای نوشتن یک حلقه for به‌طور کلی طبق قاعده زیر پیش خواهیم رفت:

for(var i = 0 ;   i =  arrayName.length ;  i++) {

//تغییراتی که مي‌خواهیم روی آرایه انجام شود

}

این عبارت به‌طور خلاصه چه معنا است؟ یعنی از ابتدای حلقه (i=0) شروع کن و تا جایی که حلقه ادامه دارد (i کوچک‌تر از طول حلقه یا i arrayName.length) شماره به شماره جلو بیا (++i )… یعنی از صفر به یک و از یک به دو و الی آخرین شماره از حلقه.

پارامتر اول var i=0

نوع: باید عدد باشد

در اینجا ما درون پرانتز for ابتدا یک متغیر به نام i تعریف کرده و مقدار آن را مساوی با صفر قرار داده‌ایم  (var i=0). این متغیر در واقع نمایانگر وضعیت شمارش آیتم‌ها و تعداد دفعات تکرار حلقه ما است. می‌توانیم به جای i هر اسم دیگری را به‌عنوان متغیر در اینجا بنویسیم. همچنین اگر بخواهیم از اولین آیتم آرایه، یعنی آیتم شماره صفر (یادآوری می‌کنیم که آرایه‌ها از شماره صفر شروع می‌شوند) کار حلقه شروع شود مقدار آن را مساوی صفر قرار مي‌دهیم و اگر بخواهیم از آیتم شماره دوم شروع شود، مقدار آن را مساوی ۲ و الی آخر…

for( var i=3  ;  i =  arrayName.length ;  i++) {

//تغییراتی که هر بار مي‌خواهیم روی آرایه انجام شود از آیتم سوم آرایه(با احتساب صفر) شروع خواهد شد

}

پارامتر دوم arrayName.length 

نوع: باید عدد باشد

پارامتر بعدی که بعد از علامت ; و بعد از تعریف متغیر i نشان داده شده است، تعداد دفعاتی را نشان می‌دهد که می‌خواهیم این کار روی آرایه تکرار شود.در این قسمت ما عبارت arrayName.length را نوشته‌ایم. یعنی تعداد دفعات را برابر طول آیتم‌های آرایه قرار داده‌ایم تا بدین ترتیب تا زمانی که آیتمی در آرایه باقی مانده است این کار تکرار شود.می‌توانستیم در اینجا یک عدد دیگر (لزوما باید کمتر از طول آرایه باشد) بنویسیم. مانند زیر:‌

for( var i=2; i= 5 ;  i++) {

// تغییراتی که هر بار مي‌خواهیم روی آرایه انجام شود از آیتم دوم آرایه(با احتساب صفر) شروع خواهد شد و تا آیتم ۵ ادامه خواهد داشت

}

نکته: اگر به جای علامت کوچک‌تر مساوی در عبارت i= 5 از علامت (کوچک‌تر) استفاده می‌کردیم چه اتفاقی می‌افتاد!‌ در واقع در حالت فعلی و استفاده از علامت کوچک‌تر مساوی شماره ۵ آرایه یا آیتم آخر آرایه در دستور (arrayName.length) نیز جزو آیتم‌های مورد استفاده در حلقه قرار می‌گیرد؛ ولی در صورت استفاده از علامت کوچک‌تر تنها، آیتم آخر حلقه به حساب نخواهد امد. برای مثال حلقه زیر را ببینید:

for(var i=0 ; i 5;  i++) {

// تغییراتی که هر بار مي‌خواهیم روی آرایه انجام شود از آیتم صفرم آرایه(با احتساب شروع آرایه‌ها از شماره صفر) شروع خواهد شد و تا قبل از رسیدن به آیتم ۵ (یعنی تا آیتم ۴) ادامه خواهد داشت

}

پارامتر سوم – ++I 

سومین پارامتر در حلقه‌های جاوا اسکریپت نحوه جلو رفتن در آرایه است. اگر خاطرتان باشد، علامت ++ یعنی هر بار یکی به مقدار متغیر اضافه کن. پس اینجا هم منظورمان این است که مقدار i را یکی اضافه کن. این مقدار دقیقا تا جایی که در پارامتر قبلی شرط کرده‌ایم ادامه پیدا می‌کند. یعنی مثلا تا طول حلقه یا عدد ۵ در مثال قبلی ادامه پیدا خواهد کرد.

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

var menu = [“pizzaPeperoni”,”specialPizza”,”tandoriPizza”]

for (i = 0; i menu.length;  i++ ) { 

    text += menu[i] + 

    “br”;

}

حلقه While

گاهی مي‌خواهیم تا زمانی که یک شرایط خاص برقرار است فرآیند مشخصی نیز انجام شود. مثلا یک برنامه داریم که در آن میخواهیم تا زمانی که اشتباهات کاربر به ۱۰۰ نرسیده است به وی حق ادامه بازی را بدهیم.

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

while (numberOfWrongTurns 10) {

    text += ” The number is “ + numberOfWrongTurns;

      numberOfWrongTurns++;

}

در نوشتن حلقه while دقت کنید که عددی را که در شرط از آن استفاده کرده‌اید، حتما درون حلقه اضافه کنید؛ اگر این کار را نکنید، حلقه هیچوقت به پایان نمی‌رسد؛ یعنی هیچوقت به شرط اولیه‌ای که گفتیم نخواهد رسید و سبب کرش کردن مرورگر می‌شود.

حلقه for و while شباهت‌های بسیاری از نظر کاربرد به یکدیگر دارند. حلقه while خصوصا زمانی استفاده می‌شود که با شرایط نامشخصی سر و کار دارید. مثلا یک متغیر در ابتدای صفحه تعریف کرده‌اید و این متغیر بعدا (مثلا چند دقیقه بعد) در حین اجرای کد تغییر میکند و شما میخواهید تا زمانی که این متغیر به شرط دلخواه می‌رسد، کاری توسط حلقه while انجام شود. بدین ترتیب حلقه while تا زمان رسیدن به شرایط مناسب خودش تکرار می‌کند.

در مثال زیر حلقه cars تا زمانی که آرایه ما ادامه دارد (یعنی carsا[i] وجود دارد) خودش را تکرار می‌کند و همان کار را انجام می‌دهد.

var cars = [“BMW”, “Volvo”, “Saab”, “Ford”];

var i = 0;

var text = “”;

while (cars[i]) {

    text += cars[i] + “br”;

    i++;

}

استفاده از حلقه در المان‌های اچ‌تی‌ام‌ال

اگر خاطرتان باشد در چند جلسه گذشته، نحوه انتخاب المان‌های اچ‌تی‌ام‌ال را آموختیم. در آنجا نحوه انتخاب المان‌های اچ‌تی‌ام‌ال توسط نام تگ یا نام کلاس را به جلسات بعدی و بعد از یادگیری آرایه‌ها واگذار کردیم. حالا وقت آن رسیده است تا این مبحث را با کمک آموخته‌هایمان از آرایه‌ها تکمیل کنیم. 

فرض کنید می‌خواهیم تمامی پاراگراف‌های یک متن را تغییر دهیم. برای این کار ابتدا به کمک انتخابگر تگ، کل تگ‌های پاراگراف را انتخاب میکنیم. به‌صورت پیش‌فرض نتیجه این انتخاب به‌صورت یک آرایه خواهد بود مثال:

var paragraphs = document.getElementByTagName(“p”);�

for (var i=0; i= paragraphs.length ; i++) {

paragraphs[i].innerHTML = “new Text”;

}

سخن پایانی:‌

حلقه در جاوا اسکریپت کاربردهای فراوانی دارد. بنابراین آموخته‌های این جلسه را به همراه تمرین‌های بیشتر در ذهنتان تثبیت کنید. در جلسات بعدی سراغ مباحث جذاب‌تری از جمله event های جاوا اسکریپتی خواهیم رفت.