عبارات شرطی - ساختار if

محور این قسمت از آموزش جاوا اسکریپت، توضیح و معرفی ساختارهای شرطی و حلقه‌های تکرار است.

در برنامه‌هایی که می‌نویسید، اغلب با شرایط مختلفی روبرو می‌شوید که لازم است برنامه بسته به نتایج محاسبات، ورودی‌های کاربر و رویدادهای سند HTML عملکرد متفاوتی انجام دهد؛ مثلاً اگر کاربر در یک کادر محاوره‌ای یک کلمه خاص وارد کند، برنامه یک دسته کد مشخص را اجرا کند و اگر کلمه دیگری وارد شد، کدهای دیگری را اجرا کند. برای پیاده‌سازی این حالت‌ها باید از عبارات شرطی (Conditional statements) استفاده می‌شود.

یکی از پراستفاده‌ترین این عبارات شرطی، ساختار شرطی if است. شما به کمک این ساختار تصمیم می‌گیرید که «اگر» یک شرط مشخص برقرار بود (یعنی مقدار آن عبارت شرطی معادل true بود)، یک دسته کد مشخص اجرا شود، و «در غیر این صورت» اگر شرط دیگری برقرار بود، کدهای دیگری اجرا شوند و می‌توانید در ادامه چندین بلوک شرطی دیگر هم ایجاد کنید. اگر هیچ‌کدام از شرط‌ها برقرار نبود، یک دسته کد پیش‌فرض اجرا می‌شود. در این ساختار که گاهی منجر به یک زنجیره if و else می‌شود، فقط نوشتن بلوک شرطی اول اجباری است و اضافه کردن بلوک‌های بعدی به الگوریتم برنامه شما بستگی دارد.

در این قسمت با حل یک مثال ساده، با ساختار if و زنجیره if else آشنا می‌شوید. همچنین برای درک بهتر محتوای این قسمت و بخش‌های بعدی این فصل از اموزش جاوا اسکریپت، بهتر است درس «عملگرها» را دوباره مرور کنید.

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

ساختارهای کنترلی در جاوا اسکریپت

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

• عبارات شرطی
• حلقه‌های تکرار

در دو جلسه نخست از فصل ساختارهای کنترلی در جاوا اسکریپت، تمرکز ما بر عبارات شرطی خواهد بود. موضوع این جلسه به‌طور خاص، آموزش عبارت شرطی if در جاوا اسکریپت است و در جلسه بعد آموزش عبارت شرطی switch را خواهیم داشت.

عبارت شرطی if

عبارت if یکی از رایج‌ترین ساختارهای شرطی در زبان‌های برنامه‌نویسی محسوب می‌شود و تقریباً در تمامی زبان‌ها وجود دارد. کارکرد این ساختار به این صورت است که اگر شرطی در برنامه برقرار باشد، یک بخش از کد اجرا می‌شود و اگر شرط دیگری برقرار باشد، بخش متفاوتی از کد اجرا خواهد شد. این ویژگی امکان کنترل جریان اجرای برنامه را بر اساس شرایط مختلف فراهم می‌کند.

برای درک بهتر تصور کنید می‌خواهیم تابعی بنویسیم که هنگام کلیک روی یک دکمه اجرا شود و نام کاربر را از او بپرسد. هدف این است که بسته به ورودی کاربر، واکنش مناسب نشان دهیم:

• اگر کاربر نام صحیح وارد کرد (یعنی شامل حروف بود)، پیام خوش‌آمدگویی نمایش دهیم.
• اگر هیچ مقداری وارد نکرد، به او اعلام کنیم که «لطفاً نام خود را وارد کنید».
• اگر عدد وارد کرد، به او تذکر دهیم که «ورودی شما عدد است».

در واقع، مسئله ما سه حالت دارد:

1. ورودی صحیح (نام)
2. ورودی عددی
3. ورود نکردن هیچ مقداری

و قصد داریم برای هر کدام، یک واکنش مشخص با استفاده از ساختار شرطی if در جاوا اسکریپت ارائه دهیم.

برای اینکه برنامه بتواند بر اساس هر یک از این حالت‌ها تصمیم‌گیری کند و اقدام مناسبی انجام دهد، نیازمند استفاده از عبارت شرطی if هستیم. برای شروع، یک تابع با نام getName تعریف می‌کنیم. در این تابع پارامتر خاصی نیاز نداریم. اولین کاری که انجام می‌دهیم این است که نام کاربر را با متد prompt از او دریافت کنیم.

function getName() {
  const userName = prompt("Enter your name:");
  if () {
    
  }
)

ساختار نوشتاری دستور if به این شکل است:

1. ابتدا می‌نویسیم if ؛
2. سپس یک جفت پرانتز () قرار می‌دهیم؛
3. شرط مورد نظر داخل پرانتز نوشته می‌شود؛
4. در ادامه، یک جفت آکولاد {} () داریم؛
5. کدی که قرار است در صورت برقرار بودن شرط اجرا شود را داخل {} می‌نویسیم.

به بیان دیگر:

if (شرط) {
   // کدی که در صورت برقرار بودن شرط اجرا می‌شود
}

وقتی می‌گوییم شرط برقرار باشد، یعنی شرط داخل پرانتز از نظر منطقی درست (true) ارزیابی شده باشد؛ زیرا در نهایت، هر چیزی که داخل پرانتز دستور if نوشته شود، به یک مقدار بولین (true یا false) تبدیل می‌شود. در ادامه:

• اگر شرط true باشد، کد داخل آکولاد اجرا می‌شود.
• اگر شرط false باشد، کد داخل آکولاد نادیده گرفته شده و اجرای برنامه به خط بعد از آکولاد منتقل می‌شود.

می‌توانید در شرط if:

• مستقیماً مقدار true یا false بنویسید.
• یا از عبارات مقایسه‌ای استفاده کنید، مثلاً بررسی کنید که آیا مقدار یک متغیر (username) برابر با مقداری خاص است یا خیر.

به عنوان مثال:

if (userName === "Ali") {
    // اگر مقدار userName برابر با "Ali" بود، این کد اجرا می‌شود
}

همانطور که می‌دانید، این عملگر مقایسه‌ای یک مقدار بولین برمی‌گرداند. در جاوا اسکریپت، شرط‌های داخل if تنها محدود به true یا false نیستند؛ بلکه بسیاری از مقادیر می‌توانند به‌طور ضمنی بولین تفسیر شوند. مقادیری که false در نظر گرفته می‌شوند عبارتند از:

• null
• undefined
• 0
• رشته خالی ""

و مقادیری که true در نظر گرفته می‌شوند:

• !null
• !0
• !" " (رشته غیرخالی)

این نکته مهم است که شرطی که داخل if می‌نویسید معنی‌دار باشد و مشخص کند برنامه چه کاری انجام می‌دهد.

فرض کنید می‌خواهیم بررسی کنیم که کاربر در باکس ورودی نام، مقداری وارد کرده باشد. بنابراین اولین شرطی که بررسی می‌کنیم این است که ورودی کاربر خالی نباشد. برای این کار می‌توانیم بنویسیم:

if (userName !== "") {
    alert("Welcome " + userName);
}

در این مثال:

• اگر کاربر چیزی وارد کرده باشد (رشته خالی نیست)، برنامه وارد بلاک if می‌شود و یک پیام خوش‌آمدگویی نمایش داده می‌شود.
• پیام شامل متن "Welcome" و نام کاربر خواهد بود، به این صورت کاربر بلافاصله نتیجه عملکرد برنامه را مشاهده می‌کند.

بعد از زدن دکمه و نوشتن اسم، نتیجه می‌شود:

تدریس کامل در ویدیو آموزش.