عبارات شرطی در جاوا اسکریپت

بسیار از اوقات نیاز است تا در سورس کد خود بر اساس موقعیت های مختلف تصمیمات مختلفی بگیریم؛ برای این کار می توانید از عبارات شرطی استفاده کنید که در واقع موضوع بحث جلسه ی امروز ماست.

عبارات شرطی در جاوا اسکریپت

استفاده از دستور if: جهت اجرا شدن مجموعه ای خاص از کد ها در صورت برقراری یک شرط (true بودن شرط).
استفاده از دستور else: جهت اجرا شدن مجموعه ای خاص از کد ها در صورت عدم برقراری یک شرط (false بودن شرط).
استفاده از دستور else if: جهت تعریف یک شرط جدید، در صورتی که شرط قبلی false بوده باشد.
استفاده از دستور switch: جهت تعریف چندین مجموعه کد جداگانه برای شرایط مختلف.

دستور if

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

if (condition) {
  //  مجموعه کد هایی که در صورت صحیح بودن شرط اجرا خواهند شد.
}

نکته: توجه کنید که if با حروف کوچک نوشته شده است. استفاده از حروف بزرگ مانند If یا IF باعث بروز خطا در کد شما می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<p>Display "Good day!" if the hour is less than 18:00:</p>

<p id="demo">Good Evening!</p>

<script>
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = "Good day!";
}
</script>

</body>
</html>

کد بالا زمان حاضر را دریافت کرده و در صورتی که از 18 کمتر بود (از 6 عصر) به شما پیام "!Good day" را نمایش می دهد.

دستور else

از این دستور زمانی استفاده می کنیم که شرط قبلی (با دستور if) صحیح نباشد و کد داخل آن اجرا نشود. ساختار کلی این دستور به شکل زیر است:

if (condition) {
  //   مجموعه کد هایی که در صورت صحیح بودن شرط اجرا خواهند شد.
} else { 
  //   مجموعه کد هایی که در صورت غلط بودن شرط قبلی اجرا خواهند شد.
}

مثال از این دستور:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var hour = new Date().getHours(); 
  var greeting;
  if (hour < 18) {
    greeting = "Good day";
  } else {
    greeting = "Good evening";
  }
  document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>

کد بالا ابتدا زمان حال (ساعت) را دریافت کرده و اگر ساعت از 18 کمتر بود به شما پیام "Good day" را نمایش داده و اگر از 18 بیشتر بود پیام "Good evening" نمایان خواهد شد.

دستور else if

شما زمانی باید از دستور else if استفاده کنید که بخواهید در صورت غلط بودن شرط اول شرط جدیدی را تعریف کنید. ساختار کلی این دستور به شکل زیر است:

if (condition1) {
  //  اگر شرط اول صحیح باشد، کد های این قسمت اجرا خواهند شد.
} else if (condition2) {
  //  اگر شرط اول غلط و شرط دوم صحیح باشد، کد های این قسمت اجرا خواهند شد.
} else {
  //  اگر شرط اول و دوم هر دو غلط باشند، کد های این قسمت اجرا خواهند شد.
}

مثال استفاده:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var greeting;
  var time = new Date().getHours();
  if (time < 10) {
    greeting = "Good morning";
  } else if (time < 20) {
    greeting = "Good day";
  } else {
    greeting = "Good evening";
  }
  document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>

این کد می گوید اگر ساعت قبل از 10:00 است پیام "Good morning" را نشان بده و اگر از 20:00 کمتر بود پیام "Good day" را نشان بده و در غیر این صورت (اگر هیچ کدام از این شروط صحیح نبود) پیام "Good evening" را به نمایش در بیاور.

سوال: تفاوت else if با else چیست؟

پاسخ: در دستور else نمی توانستیم شرط جدیدی تعیین کنیم و فقط حالت "غیر از شرط اول" را داریم؛ یعنی هر چیزی به غیر از شرط اول اجرا می شد اما در else if باید شرط جدیدی را تعریف کنیم.

به طور مثال میگویم اگر کاربر بالای 18 سال است به او اجازه ی ثبت نام و مشاهده ی کامل محتوای سایت را بده و در غیر این صورت (else) به او بگو "شما اجازه ی ثبت نام ندارید". اگر این مثال را با دستور else if بیاورم باید شرط جدیدی تعیین کنم، به طور مثال اگر کاربر بالای 18 سال است به او اجازه ی ثبت نام و مشاهده ی کامل محتوای سایت را بده ولی اگر (else if) بالای 15 سال است تنها برخی از محتوا را به او نشان بده اما اگر (else if) بالای 10 سال است برای پدر و مادر او درخواست تاییدیه بفرست و در غیر این صورت (else - یعنی زمانی که هیچ کدام از شرط ها صحیح نبود) به او بگو "شما اجازه ی ثبت نام ندارید".

دستور switch

دستور switch جهت تعریف چندین مجموعه کد جداگانه برای شرایط مختلف به کار می رود. ساختار کلی این دستور به شکل زیر است:

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

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

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

بنده سعی می کنم درس های تاریخ و زمان را نیز با مبحث امروز ترکیب کنم تا جلسات قبل را فراموش نکنیم. می دانیم که متد ()getDay روز های هفته را به صورت عددی به ما بر میگرداند به شکلی که Sunday برابر 0 و Monday برابر 1 و Tuesday برابر 2 و ... است. حال ما با استفاده از دستور switch، این روز ها را به صورت حرفی (شنبه، یکشنبه و ...) دریافت می کنیم نه عددی.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

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

توضیح کد:

همانطور که می بینید ابتدا روز فعلی را دریافت کرده ایم (با تابع ()getDay).
سپس()getDay خروجی اش را به ما می دهد که یک عدد است و هر کدام از این اعداد مربوط به یک روز هفته اند.
در جلسات قبلی گفتیم که شروع هفته از Sunday (یکشنبه) است، بنابراین اعداد را از یکشنبه شروع می کنیم.
زمانی که خروجی ()getDay با عدد مقابل "case" یکی باشد، کد داخل آن اجرا می شود.

کلیدواژه ی `break`

حتما متوجه شده اید که در کد بالا پس از هر شرط کلمه ی break آمده است. زمانی که جاوا اسکریپت به کلمه ی break برسد از دستور switch خارج می شود. حال چرا پس از هر شرط از این کلیدواژه استفاده می کنیم؟

هشدار!

اگر بعد از هر case از کلیدواژه ی break استفاده نکنیم چه می شود؟ در این وضعیت، دستور switch مانند حالت عادی کار می کند و اولین case ای را که مطابق با ورودی باشد اجرا می کند اما case های بعدی را نیز اجرا می کند و دیگر نمی ایستد.
اگر تنها در آخرِ دستور switch از break استفاده نکنیم چه می شود؟ دستور switch پس از آخرین case پایان می یابد بنابراین استفاده از break پس از آخرین case الزامی نیست چرا که کد خود به خود تمام می شود اما حالت استاندارد این است که همه را بنویسید.

کلیدواژه ی `default`

اگر می خواهید حالت پیش فرضی (default) تعیین کنید تا در صورت عدم تطابق هیچ کدام از case ها با ورودی، به طور پیش فرض اجرا شود از کلیدواژه ی default استفاده می کنیم.

به طور مثال در کد زیر میگوییم اگر امروز شنبه (عدد 6) و یا یکشنبه (عدد 1) نیست، پیام پیش فرض "Looking forward to the Weekend" را نشان بده که به معنی "مشتاق رسیدن آخر هفته هستم" است:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
var text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

همانطور که گفتیم آخرین case نیازی ندارد که به break ختم شود. به این مسئله توجه کنید که ترتیب case ها دلخواه ماست و اگر جای آن ها را عوض کنیم تاثیری روی این قانون (عدم نیاز به break در آخرین case) نمی گذارد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
var text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

به طور مثال در کد بالا به این خاطر که default دیگر آخرین مورد ما نیست، باید پس از آن از break استفاده کنیم.

گروه های کد مشترک

برخی اوقات می خواهیم در بیشتر از یک موقعیت (دو یا سه یا ...) از یک گروه کد استفاده کنیم. در این حالت می توانیم از ساختار زیر استفاده کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
var text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

همانطور که مشاهده می کنید، case های 4 و 5 و همینطور case های 0 و 6 از کد های مشترکی استفاده می کنند. حتما به استفاده از دونقطه (:) به جای نقطه ویرگول (;) توجه کنید.

نکات تکمیلی

اگر case های مختلفی با مقدار ورودی تطابق داشته باشند، اولین مورد اجرا خواهد شد.
اگر هیچ کدام از case ها با ورودی تطابق نداشته باشند، بلوک default اجرا خواهد شد.
اگر هیچ کدام از case ها با ورودی تطابق نداشته باشند و بلوک default را نیز تعریف نکرده باشیم، دستور switch اجرا نمی شود و جاوا اسکریپت به سراغ بقیه ی کد ها می رود.
دستور switch از اپراتور === استفاده می کند بنابراین علاوه بر مقدار داده، نوع داده را نیز چک می کند و اگر میخواهید کد های case اجرا شوند باید نوع داده ی ورودی با مقدار case یکی باشد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
var x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

خروجی این کد عبارت "No value found" به معنی "هیچ مقداری پیدا نشد" می باشد.

همانطور که می بینید دستور switch، به عنوان یک دستور تنها، ریزه کاری های نسبتا زیادی داشت اما تصور نکنید که استفاده از آن سخت یا بی فایده است. این دستور از کارآمد ترین دستور هایی است که بعد ها با آن کار خواهید کرد. به هر حال امیدوارم از این قسمت لذت برده باشید.