گزاره های شرطی در جاوا اسکریپت – راهنمای جامع

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

پیش‌نیازها

• سواد مقدماتی رایانه
• درک ابتدایی از HTML و CSS
• آشنایی با مراحل اولیه جاوا اسکریپت

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

نوع بشر و حتی حیوانات به طور مداوم مشغول تصمیم‌گیری هستند. این تصمیم‌ها روی زندگی ما تأثیر می‌گذارند و از تصمیم‌های ساده‌ای مانند «باید یک شیرینی بخورم یا دوتا؟» تا تصمیم‌های بزرگی مانند «باید در شهرستان بمانم و روی مزرعه پدری کار بکنم یا به کشور دیگری سفر کرده و نجوم اختری بخوانم؟» متفاوت هستند.

گزاره‌های شرطی امکان نوشتن چنین تصمیم‌گیری‌هایی را در جاوا اسکریپت فراهم می‌سازد. این مراحل شامل انتخاب گزینه‌ها (برای مثال انتخاب یک یا دو شیرینی) و نتیجه حاصل این تصمیم‌ها نیز کدنویسی می‌شوند. برای نمونه در صورت انتخاب دو شیرینی نتیجه این است که «بله احساس سیری می‌کنم؛ اما مادرم مرا سرزنش خواهد کرد».

گزاره‌های if…else

با فاصله زیادی، یکی از پراستفاده‌ترین انواع گزاره‌های شرطی رایج در جاوا اسکریپت گزاره if..else است.

ساختار مقدماتی if…else

ساختار مقدماتی if..esle شبیه یک شبه کد است:

1if (condition) {
2  code to run if condition is true
3} else {
4  run some other code instead
5}

در کد فوق موارد زیر را داریم:

1. کلیدواژه if و سپس پرانتز وجود دارد.
2. یک شرط تست می‌شود که درون پرانتزها قرار گرفته است. این شرط معمولاً به صورت بررسی بزرگ‌تر بودن یک مقدار از دیگری یا وجود یا عدم وجود یک مقدار مربوط است. این مقایسه به کمک عملگرهای مقایسه‌ای که قبلاً بررسی کردیم صورت می‌گیرد و مقدار true یا flase بازگشت می‌یابد.
3. در ادامه یک جفت آکولاد وجود دارد که درون آن کدهایی نوشته شده است. این کد می‌تواند هر چیزی باشد و تنها در صورتی اجرا خواهد شد که نتیجه شرط به صورت true باشد.
4. سپس کلیدواژه false ارائه شده است.
5. در ادامه یک جفت آکولاد دیگر وجود دارد که درون آن نیز کدی نوشته شده است. این کد در صورتی که شرط true نباشد اجرا خواهد شد.

این کد کاملاً خوانا است و اعلام می‌کند که اگر شرط مقدار true بازگرداند، باید کد A اجرا شود، و در غیر این صورت کد B اجرا می‌شود. باید دقت کنید که نیازی نیست که کد else را بگنجانید و بلوک آکولاد دوم بدون آن نیز کاملاً معتبر خواهد بود:

1if (condition) {
2  code to run if condition is true
3}
4
5run some other code

با این وجود، باید دقت کنید، زیرا در این حالت بلوک دوم کد از سوی گزاره شرطی کنترل نمی‌شود و از این رو صرف‌نظر از این که شرط مقدار true یا false بازگشت دهد، همواره اجرا خواهد شد. این وضعیت لزوماً بد نیست؛ اما ممکن است آن چه ما می‌خواهیم نباشد، چون در اغلب موارد می‌خواهیم یک بلوک کد یا بلوک دیگر اجرا شود و نه این که هر دو بلوک اجرا شوند.

به عنوان نکته آخر باید اشاره کنیم که برخی اوقات گزاره‌های if…else را می‌بینید که بدون آکولاد و با سبک خلاصه زیر نوشته شده‌اند:

1if (condition) code to run if condition is true
2else run some other code instead

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

یک مثال واقعی

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

1var shoppingDone = false;
2
3if (shoppingDone === true) {
4  var childsAllowance = 10;
5} else {
6  var childsAllowance = 5;
7}

همان طور که می‌بینید کد فوق در همه موارد مقدار False برای shoppingDone بازمی‌گرداند و از این رو فرزند کم‌پول داستان ما نمی‌تواند اسباب‌بازی مورد علاقه خود را بخرد. در ادامه سعی می‌کنیم ساز و کاری طراحی کنیم که والدین بتوانند در صورتی که فرزندشان در کار خرید منزل کمک کرده باشد، مقدار shoppingDone را به صورت true تعیین کنند.

کد کامل این وضعیت به صورت زیر خواهد بود:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Allowance updater example</title>
6  </head>
7  <body>
8    <label for="shopping-check">Has the shopping been done? </label>
9    <input type="checkbox" id="shopping-check">
10
11    <p></p>
12
13    <script>
14      var checkBox = document.querySelector('input');
15      var para = document.querySelector('p');
16      var shoppingDone = false;
17      checkBox.addEventListener('change',function() {
18        checkBox.disabled = true;
19        shoppingDone = true;
20        updateAllowance();
21      });
22      function updateAllowance() {
23        if(shoppingDone === true) {
24          var childsAllowance = 10;
25        } else {
26          var childsAllowance = 5;
27        }
28        para.textContent = 'Child has earned $' + childsAllowance + ' this week.';
29      }
30      updateAllowance();
31    </script>
32  </body>
33</html>

Else if

در کد مثال اخیر با یک سناریوی دو وضعیتی و با دو خروجی مواجه بودیم، اما در صورتی که چندین وضعیت و چندین خروجی وجود داشته باشند، چه می‌توان کرد؟ روش الحاق وضعیت‌های بیشتر به کد if…else استفاده از دستور else if است. هر گزینه بیشتر نیازمند یک بلوک کد اضافی است که بین{ ... } ()if و  { ... } else قرار می‌گیرد. برای این که بهتر متوجه شوید مثال پیچیده‌تر زیر را ملاحظه کنید. این مثال می‌تواند بخشی از یک اپلیکیشن پیش‌بینی هواشناسی باشد.

1<label for="weather">Select the weather type today: </label>
2<select id="weather">
3  <option value="">--Make a choice--</option>
4  <option value="sunny">Sunny</option>
5  <option value="rainy">Rainy</option>
6  <option value="snowing">Snowing</option>
7  <option value="overcast">Overcast</option>
8</select>
9
10<p></p>

1var select = document.querySelector('select');
2var para = document.querySelector('p');
3
4select.addEventListener('change', setWeather);
5
6function setWeather() {
7  var choice = select.value;
8
9  if (choice === 'sunny') {
10    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
11  } else if (choice === 'rainy') {
12    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
13  } else if (choice === 'snowing') {
14    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
15  } else if (choice === 'overcast') {
16    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
17  } else {
18    para.textContent = '';
19  }
20}

در کد فوق ما یک عنصر HTML به نام <select> داریم که به ما امکان می‌دهد انتخاب‌های هواشناسی مختلفی داشته باشیم و یک پاراگراف ساده نیز داریم.

در بخش جاوا اسکریپت یک ارجاع به هر دو عنصر <select> و <p> نگهداری می‌کنیم و یک «شنونده رویداد» (event listener) نیز به عنصر event listener اضافه می‌کنیم تا زمانی که مقدار آن تغییر می‌یابد، تابع ()setWeather اجرا شود.

زمانی که این تابع اجرا می‌شود، ابتدا یک متغیر به نام choice را برابر با مقدار انتخاب شده کنونی در عنصر <select> تعیین می‌کنیم. سپس از یک گزاره شرطی برای نمایش متن‌های متفاوت درون پاراگراف بسته به مقدار choice استفاده می‌کنیم. به چگونگی روش تست شدن همه شرایط در بلوک‌های {...} ()else if به جز مورد نخست که در یک بلوک {...} ()if تست می‌شود، دقت کنید.

آخرین انتخاب که درون بلوک {...} else صورت می‌گیرد، اساساً یک گزینه «آخرین چاره» محسوب می‌شود یعنی کدی که در این بخش قراردارد تنها در صورتی اجرا خواهد شد که هیچ یک از شرایط دیگر برقرار نباشند. در این حالت، این کد اقدام به خالی کردن متن‌ از پاراگراف در صورت عدم انتخاب هیچ حالت می‌کند. برای نمونه اگر کاربر تصمیم بگیرد که گزینه اولیه «--Make a choice--» را مجدداً انتخاب کند این گزینه پاراگراف از متن‌های دیگر خالی می‌کند.

نکته‌ای در مورد عملگرهای مقایسه‌ای

عملگرهای مقایسه‌ای جهت تست کردن شروط درون گزاره‌های شرطی استفاده می‌شوند. ما ابتدا نگاهی به یکی از مقاله‌های این سری مقالات به نام «عملیات ریاضی در جاوا اسکریپت — راهنمای مقدماتی» می‌پردازیم. در آن مقاله گفتیم که عملگرهای مقایسه‌ای شامل موارد زیر هستند:

• === و ===!  --- این دو عملگر بررسی می‌کنند که آیا یک مقدار یا مقدار دیگر برابر است یا نیست.
• < و > --- این دو عملگر بزرگ یا کوچک‌تر بودن یک مقدار از مقدار دیگر را بررسی می‌کنند.
• <= و >=  --- این عملگرها کوچک‌تر مساوی یا بزرگ‌تر مساوی بودن یک مقدار از مقدار دیگر را بررسی می‌کنند.

در ادامه اشاره‌ای به تست کردن مقادیر بولی (true/false) می‌کنیم و یک الگوی رایج که ممکن است بارها با آن مواجه شوید را معرفی می‌کنیم. در جاوا اسکریپت هر مقداری که false ،undefined ،null ،0 ،NaN و یا رشته خالی (‘’) نباشد در هنگام تست شدن به عنوان یک گزاره شرطی مقدار true بازگشت می‌دهد. از این رو می‌توانیم به سادگی نام متغیر را مورد تست شرطی قرار دهیم تا ببینیم آیا true است یا نه و این که آیا کلاً وجود دارد یا نه. برای نمونه به کد زیر نگاه کنید:

1var cheese = 'Cheddar';
2
3if (cheese) {
4  console.log('Yay! Cheese available for making cheese on toast.');
5} else {
6  console.log('No cheese on toast for you today.');
7}

و اگر به مثال قبلی خود در مورد فرزندی که در امور منزل به والدینش کمک می‌کند بازگردیم، می‌توانیم آن را به صورت زیر بنویسیم:

1var shoppingDone = false;
2
3if (shoppingDone) { // don't need to explicitly specify '=== true'
4  var childsAllowance = 10;
5} else {
6  var childsAllowance = 5;
7}

If…else تو در تو

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

1if (choice === 'sunny') {
2  if (temperature < 86) {
3    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
4  } else if (temperature >= 86) {
5    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
6  }
7}

با این که این کد به طور کامل کار می‌کند؛ اما هر یک از بلوک‌های if…else مستقل از دیگری عمل می‌کند.

عملگرهای منطقی: AND ،OR و NOT

اگر بخواهید چندین شرط را بدون نوشتن گزاره‌های if…else تست کنید، می‌توانید از عملگرهای منطقی استفاده کنید. زمانی که از عملگرهای منطقی در شرط‌ها استفاده می‌کنیم، وضعیت به صورت زیر خواهد بود:

• && (AND) – این عملگر امکان زنجیره‌سازی دو یا چند عبارت را با هم می‌دهد، به طوری که همه آن‌ها باید به طور منفرد true باشند تا کل عبارت مقدار true داشته باشد.
• || (OR) – این عملگر امکان زنجیره‌سازی دو یا چند عبارت را به هم می‌دهد به طوری که برای اینکه کل عبارت true باشد، کافی است یک یا چند مورد از عبارت‌های آن true باشند.

برای این که مثال‌هایی از عملگر AND داشته باشید، قطعه کد قبلی را می‌توانیم به صورت زیر بنویسیم:

1if (choice === 'sunny' && temperature < 86) {
2  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
3} else if (choice === 'sunny' && temperature >= 86) {
4  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
5}

بنابراین برای نمونه بلوک اول کد تنها زمانی اجرا خواهد شد که 'choice === 'sunny باشد و شرط temperature < 86 نیز مقدار true بازگرداند. در ادامه مثال کوچکی برای عملگر OR ارائه شده است:

1if (iceCreamVanOutside || houseStatus === 'on fire') {
2  console.log('You should leave the house quickly.');
3} else {
4  console.log('Probably should just stay in then.');
5}

آخرین نوع از عملگر منطقی یعنی NOT به وسیله کاراکتر! ارائه می‌شود. این عملگر برای منفی ساختن یک عبارت استفاده می‌شود. برای نمونه در کد زیر آن را با OR ترکیب کرده‌ایم تا کد فوق را معکوس کنیم:

1if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
2  console.log('Probably should just stay in then.');
3} else {
4  console.log('You should leave the house quickly.');
5}

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

شما می‌توانید هر چند تعداد گزاره منطقی را که می‌خواهید با هر ساختاری با هم ترکیب کنید. در مثال زیر کد درون بلوک تنها زمانی اجرا خواهد شد که گزاره‌های OR مقدار true بازگشت دهند، یعنی گزاره کلی AND به صورت true باشد:

1if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
2  // run the code
3}

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

1if (x === 5 || 7 || 10 || 20) {
2  // run my code
3}

در این حالت، شرط درون بلوک (…) if همواره به صورت true خواهد بود، چون 7 یا هر مقدار غیر صفر دیگر همواره به صورت true ارزیابی می‌شوند. این شرط در واقع اعلام می‌کند که «اگر ایکس برابر با 5 بود یا اگر 7 برابر با true بود». که می‌دانیم گزاره دوم همواره true است. این وضعیت منطقاً آن چیزی که ما می‌خواستیم نیست. برای این که این کد به درستی کار کند، باید دو طرف شرط‌ها را در هر عملگر OR بررسی کنیم یعنی:

1if (x === 5 || x === 7 || x === 10 ||x === 20) {
2  // run my code
3}

گزاره‌های سوئیچ

گزاره‌های if...else به خوبی از عهده وظیفه کدنویسی شرطی برمی‌آیند؛ اما خالی از عیب نیز نیستند. این گزاره‌ها به طور عمده برای مواردی مناسب هستند که چندین گزینه در اختیار دارید و هر یک از آن‌ها نیازمند مقدار معقولی از کد است که باید اجرا شوند و/یا دارای شروطی هستند که پیچیده محسوب می‌شوند. برای نمونه چندین عملگر منطقی با هم ترکیب شده‌اند. اما در مواردی که می‌خواهیم یک متغیر را بسته به‌ شرایط خاص برابر با مقدار معینی قرار دهیم یا گزاره خاصی را نمایش دهیم، این ساختار به خصوص در مورد تعداد گزینه‌های زیاد، می‌تواند کمی گیج‌کننده باشد.

در این موارد بهتر است از «گزاره‌های سوئیچ» (switch statements) استفاده کنیم. این گزاره‌ها یک عبارت/مقدار منفرد را به عنوان ورودی می‌گیرند و سپس چندین گزینه ممکن را بررسی می‌کنند تا مورد مطابق را بیابند و بر اساس آن کد متناظر را اجرا می‌کنند. در ادامه یک شبه کد ارائه شده است تا ایده بهتری از این نوع گزاره‌ها بیابید:

1switch (expression) {
2  case choice1:
3    run this code
4    break;
5
6  case choice2:
7    run this code instead
8    break;
9    
10  // include as many cases as you like
11
12  default:
13    actually, just run this code
14}

در شبه کد فوق موارد زیر را داریم:

1. کلیدواژه switch قبل از یک جفت پرانتز آمده است.
2. یک عبارت یا مقدار درون پرانتز ارائه شده است.
3. کلیدواژه case و سپس یک گزینه آمده است که نشان می‌دهد آن عبارت/مقدار چه می‌تواند باشد و سپس یک دونقطه (:) آمده است.
4. کدی که در صورت مطابقت متغیر باید اجرا شود آمده است.
5. یک عبارت break و در ادامه نقطه‌ویرگول (;) آمده است. اگر گزینه قبلی با عبارت/مقدار مطابقت داشته باشد، مرورگر اجرای کد را در این بلوک کد متوقف می‌کند و به کدهایی که در خارج از گزاره سوئیچ قرار دارند مراجعه می‌کند.
6. شما می‌توانید هر تعداد موارد دیگر که دوست دارید داشته باشید.
7. در ادامه کلیدواژه default به همراه کد متناظر ارائه شده است، به جز این که default پس از خود گزینه انتخابی دیگری ندارد و لازم نیست از عبارت break استفاده کنید، چون پس از آن دیگر چیزی وجود ندارد که اجرا شود. این گزینه پیش‌فرض است و در صورتی که هیچ گزینه‌ای مطابقت نیابد، اجرا خواهد شد.

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

یک مثال برای سوئیچ

در ادامه یک مثال عملی را بررسی می‌کنیم. بدین ترتیب اپلیکیشن پیش‌بینی هوای خود را برای استفاده از گزاره سوئیچ به‌روزرسانی می‌کنیم:

1<label for="weather">Select the weather type today: </label>
2<select id="weather">
3  <option value="">--Make a choice--</option>
4  <option value="sunny">Sunny</option>
5  <option value="rainy">Rainy</option>
6  <option value="snowing">Snowing</option>
7  <option value="overcast">Overcast</option>
8</select>
9
10<p></p>

1var select = document.querySelector('select');
2var para = document.querySelector('p');
3
4select.addEventListener('change', setWeather);
5
6
7function setWeather() {
8  var choice = select.value;
9
10  switch (choice) {
11    case 'sunny':
12      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
13      break;
14    case 'rainy':
15      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
16      break;
17    case 'snowing':
18      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
19      break;
20    case 'overcast':
21      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
22      break;
23    default:
24      para.textContent = '';
25  }
26}

عملگر سه‌تایی

آخرین ساختار شرطی که در این مقاله معرفی خواهیم کرد، عملگر سه‌تایی است. این عملگر یک ساختار فشرده است که بک شرط را بررسی می‌کند و در صورت true بودن یک عبارت/مقدار و در غیر این صورت عبارت/مقدار دیگر را بازمی‌گرداند. این عملگر در برخی موارد که تنها دو گزینه برای انتخاب بین حالت‌های true/false داریم، و بهتر است کدنویسی فشرده‌ای داشته باشیم، مفید خواهد بود. شِبه کد آن به صورت زیر است:

1(condition)? run this code: run this code instead

در ادامه مثالی از این عملگر سه‌تایی را مشاهده می‌کنید:

1var greeting = (isBirthday)? 'Happy birthday Mrs. Smith — we hope you have a great day!': 'Good morning Mrs. Smith.';

در این کد متغیری به نام isBirthday داریم. اگر این متغیر true باشد، یک پیام تبریک تولد به کاربر داده می‌شود و در غیر این صورت یک خوشامدگویی عادی صورت می‌گیرد.

مثالی از عملگر سه‌تایی

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

1<label for="theme">Select theme: </label>
2<select id="theme">
3  <option value="white">White</option>
4  <option value="black">Black</option>
5</select>
6
7<h1>This is my website</h1>

1var select = document.querySelector('select');
2var html = document.querySelector('html');
3document.body.style.padding = '10px';
4
5function update(bgColor, textColor) {
6  html.style.backgroundColor = bgColor;
7  html.style.color = textColor;
8}
9
10select.onchange = function() {
11  ( select.value === 'black' ) ? update('black','white') : update('white','black');
12}

در این مثال ما یک عنصر <select> برای انتخاب یک قالب (سیاه یا سفید) به علاوه یک عنصر <h1> ساده داریم که به وسیله آن عنوان یک وب‌سایت را نمایش می‌دهیم. همچنین یک تابع به نام ()update داریم که دو رنگ را به عنوان پارامتر ورودی می‌گیرد. رنگ پس‌زمینه وب‌سایت بر اساس رنگ اولی که ارائه شده تعیین می‌شود و رنگ متن نیز بر اساس پارامتر دوم تعیین می‌شود.

در نهایت یک شنونده رویداد به نام onchange داریم که جهت اجرای یک تابع که در عملگر سه‌تایی ارائه شده استفاده می‌شود. این کد با یک تست شرط به صورت زیر آغاز می‌شود:

select.value === 'black'

اگر این کد مقدار true بازگرداند، تابع ()update با پارامترهای سیاه و سفید بازگشت می‌یابد، یعنی در انتها رنگ سیاه برای زمینه و رنگ سفید را برای متن خواهیم داشت. اگر مقدار false بازگشت یابد، تابع ()update با استفاده از پارامترهای سفید و سیاه اجرا می‌شود، یعنی رنگ زمینه سفید و رنگ متن سیاه خواهد بود.

یادگیری با استفاده از مثال‌های عملی: تقویم ساده

در مثالی که در این بخش ارائه می‌کنیم یک تقویم ساده خواهیم ساخت. در این کد موارد زیر را داریم:

• یک عنصر <select> که به کاربر اجازه می‌دهد بین ماه‌های مختلف انتخاب کند.
• یک شنونده رویداد onchange که برای تشخیص زمان تغییر یافتن گزینه انتخابی در منوی <select> استفاده می‌شود.
• یک تابع به نام ()createCalendar که تقویم را رسم می‌کند و ماه صحیح را در عنصر <h1> نمایش می‌دهد.

ما باید گزاره شرطی را درون تابع دستگیره onchange و درست زیر کامنت ADD CONDITIONAL HERE// بنویسیم. این گزاره شرطی به صورت زیر خواهد بود:

1. به ماه انتخاب شده یعنی مقدار ذخیره‌شده در متغیر choice نگاه می‌کند. این مقدار پس از تغییر یافتن مقدار <select> تعیین می‌شود. برای مثال می‌تواند «January» باشد.
2. یک متغیر به نام days تعیین می‌شود که باید برابر با تعداد روزهایی که در ماه انتخابی قرار دارد باشد. به این منظور باید به تعداد روزهای هر ماه سال نگاه کنیم. در این مورد می‌توانیم وضعیت سال کبیسه را نادیده بگیریم.

پیشنهاد می‌کنیم:

• برای پیاده‌سازی این وضعیت از عملگر OR برای گروه‌بندی ماه‌های مختلف در یک شرط مشابه استفاده کنید، چون بسیاری از آن‌ها تعداد روزهای یکسانی دارند.
• ماهی که بیشتری فراوانی روز دارد را به عنوان گزینه default انتخاب کنید.

اگر اشتباهی رخ داد همواره می‌توانید با زدن دکمه reset کد را به وضعیت اول بازگردانید. اگر واقعاً دچار بن‌بست شدید از گزینه «Show solution» برای نمایش راه‌حل این مثال استفاده کنید.

یادگیری با استفاده از مثال‌های عملی: گزینه‌های رنگی بیشتر

در این مثال می‌خواهیم از مثال عملگر سه‌تایی که قبل‌تر دیدیم برای تبدیل عملگر سه‌تایی به گزاره سوئیچ استفاده کنیم تا بتوانیم گزینه‌های رنگی بیشتری برای طراحی یک وب‌سایت ساده داشته باشیم. می‌بینیم که این بار عنصر <select> به جای دو گزینه دارای پنج انتخاب است. بدین ترتیب برای مدیریت این وضعیت به یک گزاره سوئیچ نیاز داریم که درست زیر کامنت ADD SWITCH STATEMENT// درج می‌شود:

• این گزاره سوئیچ یک متغیر choice را به عنوان عبارت ورودی خود می‌پذیرد.
• در هر حالت، گزینه انتخابی باید با یکی از مقادیر ممکن که می‌توان انتخاب کرد یعنی white ،black ،purple ،yellow یا psychedelic برابر باشد. دقت کنید که مقادیر مختلف، حساس به حروف کوچک/بزرگ هستند و باید برابر با مقادیر value در عنصر <option> و نه برچسب‌های بصری باشند.
• در هر حالت تابع ()update اجرا می‌شود و دو مقدار رنگ به آن ارسال می‌شود که مقدار اول رنگ پس‌زمینه و رنگ دوم رنگ متن است. به خاطر داشته باشید که مقادیر رنگ به صورت رشته‌ای هستند و از این رو باید درون گیومه قرار داشته باشند.

اگر اشتباهی رخ داد همواره می‌توانید با زدن دکمه reset به حالت اولیه بازگردید. اگر واقعاً متوجه شدید نمی‌توانید کد را بنویسید، می‌توانید با زدن «Show solution» راه‌حل را مشاهده کنید.

سخن پایانی

در این نوشته همه مواردی که باید در مورد ساختارهای شرطی در جاوا اسکریپت بدانید را ارائه کردیم. مطمئن هستیم که این مفاهیم را درک می‌کنید و می‌توانید تمرین‌ها را به طور کامل انجام دهید. اگر هر گونه سؤال یا پیشنهادی داشته باشید، می‌توانید در بخش نظرات با ما و دیگر خوانندگان فرادرس در میان بگذارید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است،‌ آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• آموزش JavaScript ES6 (جاوا اسکریپت)
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)
• جاوا اسکریپت چیست؟ — به زبان ساده
• آموزش جاوا اسکریپت - مجموعه مقالات جامع وبلاگ فرادرس

==