حلقه for

حلقه for (تکرار به تعداد مشخص)

حلقه for کدهای شما رو تا زمانی که یک شرط خاص غلط (false) بشه، پشت سر هم تکرار میکنه. اگر قبلاً با زبان‌های جاوا یا C کار کرده باشی، ظاهر این حلقه برات کاملاً آشناست.

ساختار کلی یک حلقه for به این صورت هست:

for (initialization; condition; afterthought) {
  // کدهایی که باید تکرار بشن
}

وقتی جاوااسکریپت به یک حلقه for می‌رسه، این مراحل رو به ترتیب قدم‌به‌قدم اجرا میکنه:

1. مقداردهی اولیه (initialization): این بخش فقط یک‌بار در شروع حلقه اجرا میشه. معمولاً اینجا یک یا چند متغیر برای شمارش تعداد دورهای حلقه می‌سازیم (مثلاً let i = 0).

2. بررسی شرط (condition): قبل از اینکه کدهای داخل حلقه اجرا بشن، این شرط چک میشه. اگر درست (true) باشه، کدها اجرا میشن. اگر غلط (false) باشه، حلقه همین‌جا متوقف میشه و کامپیوتر میره سراغ خط‌های بعدی برنامه. (اگر این بخش رو خالی بگذاری، سیستم فرض میکنه شرط همیشه درسته).

3. اجرای کدها (statement): کدهای داخل آکلواد اجرا میشن.

4. گام حرکت یا پس‌اندازه (afterthought): بعد از اینکه کدهای داخل حلقه تموم شد، این تیکه کد اجرا میشه که معمولاً برای اضافه کردن به شمارنده است (مثلاً ++i).

5. بازگشت به قدم ۲: دوباره شرط بررسی میشه و این چرخه انقدر ادامه پیدا میکنه تا شرط غلط بشه.

یک مثال واقعی و کاربردی

فرض کن یک فرم HTML داری که کاربر می‌تونه چندین سبک موسیقی رو هم‌زمان انتخاب کنه:

<form name="selectForm">
  <label for="musicTypes">چندتا از سبک‌های موسیقی زیر رو انتخاب کن و دکمه رو بزن:</label>
  <select id="musicTypes" name="musicTypes" multiple>
    <option selected>R&amp;B</option>
    <option>Jazz</option>
    <option>Blues</option>
    <option>New Age</option>
    <option>Classical</option>
    <option>Opera</option>
  </select>
  <button id="btn" type="button">چندتا انتخاب شده؟</button>
</form>

حالا می‌خوایم با جاوااسکریپت و یک حلقه for، تک‌تکِ گزینه‌ها رو چک کنیم و ببینیم کاربر کلاً چندتا گزینه رو تیک زده:

function countSelected(selectObject) {
  let numberSelected = 0; // یک شمارنده برای تعداد انتخاب‌ها
  
  // حلقه از صفر شروع میشه و تا زمانی که به تعداد کل گزینه‌ها برسه، یکی‌یکی جلو میره
  for (let i = 0; i < selectObject.options.length; i++) {
    // اگر گزینه شماره i توسط کاربر انتخاب شده بود:
    if (selectObject.options[i].selected) {
      numberSelected++; // یکی به شمارنده اضافه کن
    }
  }
  return numberSelected;
}

// وصل کردن تابع به دکمه سایت
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  const musicTypes = document.selectForm.musicTypes;
  console.log(`شما ${countSelected(musicTypes)} گزینه را انتخاب کرده‌اید.`);
});

توی این حلقه دقیقاً چه اتفاقی افتاد؟

• let i = 0: شمارنده حلقه از صفر (گزینه اول لیست) شروع میشه.

• i < selectObject.options.length: حلقه تا زمانی ادامه پیدا میکنه که i از تعداد کل گزینه‌های منو کوچکتر باشه.

• ++i: هر بار که یک گزینه چک میشه، یکی به i اضافه میشه تا در دور بعدی گزینه بعدی بررسی بشه.