دستورات شرطی در JavaScript

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

پیش نیازها: سواد اولیه کامپیوتر، درک اولیه از HTML و CSS، اولین مراحل جاوا اسکریپت.

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

شما می توانید آن را به یک شرط داشته باشید!

انسانها (و سایر حیوانات) همیشه تصمیماتی می گیرند که بر زندگی آنها تأثیر می گذارد، از کوچک («یک کلوچه بخورم یا دو تا؟») تا بزرگ («آیا در کشور خود بمانم و در مزرعه پدرم کار کنم، یا آیا باید به آمریکا بروم و اخترفیزیک بخوانم؟)

عبارات مشروط به ما اجازه می‌دهند که چنین تصمیم‌گیری را در جاوا اسکریپت نشان دهیم، از انتخابی که باید انجام شود (مثلاً “یک یا دو کوکی”)، تا نتیجه حاصل از آن انتخاب‌ها (شاید نتیجه “یک کوکی خورد” ممکن است باشد. “هنوز احساس گرسنگی می کنم” و نتیجه “دو تا کلوچه خورد” ممکن است “احساس سیری شود، اما مامان مرا به خاطر خوردن همه کلوچه ها سرزنش کرد.”)

if…else statements

بیایید به رایج‌ترین نوع دستورات شرطی که در جاوا اسکریپت استفاده می‌کنید نگاهی بیندازیم ، عبارت if…else !
نحو اساسی if…else به شکل زیر است:

if (condition) {

  /* code to run if condition is true */

} else {

  /* run some other code instead */

}

در اینجا ما داریم:

1. کلمه کلیدی if با چند پرانتز دنبال شود.
2. یک شرط برای آزمایش، در داخل پرانتز قرار می گیرد (معمولا “این مقدار بزرگتر از این مقدار دیگر است؟” یا “آیا این مقدار وجود دارد؟”). شرط از عملگرهای مقایسه ای که در ماژول گذشته بحث کردیم استفاده می کند و true یا false را برمی گرداند.
3.مجموعه‌ای از بریس‌های فرفری، که درون آن‌ها مقداری کد داریم،این می‌تواند هر کدی باشد که ما دوست داریم، و فقط در صورتی اجرا می‌شود که شرط true باشد.
4.کلمه کلیدی else.
5.مجموعه دیگری از بریس‌های فرفری که در داخل آن کد بیشتری داریم – این می‌تواند هر کدی باشد که دوست داریم، و فقط در صورتی اجرا می‌شود که شرط true نباشد یا به عبارت دیگر، شرط false است.

این کد کاملاً برای انسان قابل خواندن است – می گوید “اگر شرط درست است، کد A را اجرا کنید، در غیر این صورت کد B را اجرا کنید.”

باید توجه داشته باشید که مجبور نیستید else و بلوک فرفری دوم را وارد کنید.کد زیر نیز کاملاً قانونی است:

if (condition) {

  /* code to run if condition is true */

}

/* run some other code */

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

به عنوان آخرین نکته، اگرچه توصیه نمی شود، ممکن است گاهی اوقات ببینید که آیا عبارات دیگری بدون پرانتز نوشته شده است یا خیر:

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

یک مثال واقعی:

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

letshoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
childsAllowance = ۱۰;
} else {
childsAllowance = ۵;
}

این کد همانطور که نشان داده شده است همیشه باعث می شود که متغیر false ، shoppingDone برگرداند که به معنای ناامیدی برای فرزند بیچاره ما است. این به ما بستگی دارد که مکانیزمی را برای والدین فراهم کنیم که در صورتی که فرزند خرید را انجام دهد، متغیر shoppingDone را روی true تنظیم کند.

else if

مثال آخر دو انتخاب یا نتیجه را در اختیار ما قرار داد ، اما اگر بیش از دو نتیجه بخواهیم چه؟

راهی برای زنجیره‌ای کردن انتخاب‌ها یا نتایج اضافی به if…else شما وجود دارد،با استفاده از other if. هر انتخاب اضافی نیاز به یک بلوک اضافی برای قرار دادن بین { }()if و {}else دارد؛مثال زیر را که می تواند بخشی از یک برنامه ساده پیش بینی آب و هوا باشد، بررسی کنید:

<label for=”weather“>Select the weather type today: </label>

<select id=”weather“>

  <option value=””>–Make a choice–</option>

  <option value=”sunny“>Sunny</option>

  <option value=”rainy“>Rainy</option>

  <option value=”snowing“>Snowing</option>

  <option value=”overcast“>Overcast</option>

</select>

<p></p>

const select = document.querySelector(‘select’);

const para = document.querySelector(‘p’);

select.addEventListener(‘change’, setWeather);

function setWeather() {

  const choice = select.value;

  if (choice === ‘sunny’) {

    para.textContent =‘It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.’;

  } else if(choice ===‘rainy’) {

   para.textContent = ‘Rain is falling outside; take a rain coat and an umbrella, and don’t stay out for too long.’;

  } else if (choice ===‘snowing’) {

    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.’;

  } else if (choice ===‘overcast’) {

    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.’;

  } else {

    para.textContent = ”;

  }

}

1.در اینجا ما یک عنصر <HTML<select داریم که به ما امکان انتخاب آب و هوای مختلف را می دهد و یک پاراگراف ساده.

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

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

4.آخرین انتخاب، در داخل بلوک {}else ، اساساً یک گزینه “آخرین راه حل” است؛اگر هیچ یک از شرایط درست نباشد، کد داخل آن اجرا خواهد شد. در این مورد، اگر چیزی انتخاب نشده باشد، متن را از پاراگراف خالی می‌کند، برای مثال، اگر کاربر تصمیم بگیرد گزینه مکان‌نمای «–Make a Choice–» را که در ابتدا نشان داده شده است، دوباره انتخاب کند.

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

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

=== و ==! تست کنید که آیا یک مقدار با مقدار دیگر یکسان است یا نه.
< و > تست کنید که آیا یک مقدار کمتر یا بزرگتر از مقدار دیگر است.
=> و =< تست کنید که آیا یک مقدار کمتر یا مساوی یا بزرگتر یا مساوی با مقدار دیگر است یا خیر.

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

let cheese = ‘Cheddar’;

if (cheese) {

console.log(‘Yay! Cheese available for making cheese on toast.’);

} else {

console.log(‘No cheese on toast for you today.’);

}

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

let shoppingDone = false;

let childsAllowance;

// We don’t need to explicitly specify ‘shoppingDone === true’

if (shoppingDone) {

childsAllowance = ۱۰;

} else {

childsAllowance = ۵;

}

لانه سازی if…else

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

if (choice === ‘sunny’) {

if (temperature < ۸۶) {

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.`;

} else if (temperature >= ۸۶) {

para.textContent = `It is ${temperature}degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;

}

}

حتی اگر کد همه با هم کار می کند، هر دستور if…else کاملا مستقل از دیگری کار می کند.

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

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

&& — AND؛ به شما این امکان را می دهد که دو یا چند عبارت را به صورت زنجیره ای به هم متصل کنید تا همه آنها به صورت جداگانه به درستی ارزیابی شوند تا کل عبارت true باشد.
|| – OR؛ به شما این امکان را می دهد که دو یا چند عبارت را به صورت زنجیره ای به هم متصل کنید تا یک یا چند مورد از آنها به صورت جداگانه به درستی ارزیابی شوند تا کل عبارت true باشد.
برای ارائه یک مثال AND، قطعه مثال قبلی را می توان به این شکل بازنویسی کرد:

if (choice === ‘sunny’&& temperature < ۸۶) {

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.`;

} else if (choice === ‘sunny’ && temperature >= ۸۶) {

para.textContent = `It is ${temperature}degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;

}

بنابراین برای مثال، اولین بلوک کد تنها در صورتی اجرا می‌شود که انتخاب === ‘sunny’ و دمای 86> به درستی برگردد.

بیایید به یک مثال سریع OR نگاه کنیم:

if (iceCreamVanOutside || houseStatus === ‘on fire’) {

console.log(‘You should leave the house quickly.’);

} else {

console.log(‘Probably should just stay in then.’);

}

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

if (!(iceCreamVanOutside || houseStatus === ‘on fire’)) {

console.log(‘Probably should just stay in then.’);

} else {

console.log(‘You should leave the house quickly.’);

}

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

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

if ((x === ۵ || y > ۳|| z <= ۱۰) && (loggedIn || userName === ‘Steve’)) {

// run the code

}

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

در این مورد، شرط داخل ()if همیشه درست ارزیابی می شود زیرا 7 (یا هر مقدار غیر صفر دیگری) همیشه درست ارزیابی می شود. این شرط در واقع می گوید “اگر x برابر با 5 باشد، یا 7 درست است، که همیشه همینطور است”. منطقاً این چیزی نیست که ما می خواهیم! برای انجام این کار باید یک تست کامل در دو طرف هر عملگر OR مشخص کنید:

if (x === ۵ || x === ۷ || x ===۱۰ || x === ۲۰) {

  // run my code

}

سوییچ عبارات

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

در چنین حالتی، دستورهای سوئیچ دوست شما هستند! آنها یک عبارت یا مقدار واحد را به عنوان ورودی می گیرند، و سپس چندین گزینه را بررسی می کنند تا زمانی که یکی را پیدا کنند که با آن مقدار مطابقت دارد، کد مربوطه را که همراه با آن است اجرا می کند. در اینجا چند شبه کد دیگر وجود دارد تا به شما ایده بدهد:

در اینجا ما داریم:

1.کلید واژه switch، به دنبال مجموعه ای از پرانتز.

۲.یک عبارت یا مقدار در داخل پرانتز.

3.کلمه کلیدی case، به دنبال آن انتخابی که عبارت یا مقدار می تواند باشد، و به دنبال آن یک دونقطه.

۴.در صورتی که انتخاب با عبارت مطابقت داشته باشد، مقداری کد اجرا می شود.

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

۶.موارد دیگر (گلوله های ۳-۵) به اندازه دلخواه شما.

7.کلمه کلیدی default، و به دنبال آن دقیقاً همان الگوی کد یکی از موارد (گلوله‌های 3-5) است، با این تفاوت که default پس از آن انتخابی ندارد، و شما به عبارت break نیازی ندارید زیرا چیزی برای اجرا وجود ندارد؛ به هر حال این در بلوک است. این گزینه پیش فرض است که در صورتی اجرا می شود که هیچ یک از گزینه ها مطابقت نداشته باشند.

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

یک مثال switch

بیایید به یک مثال واقعی نگاهی بیندازیم!ما برنامه پیش بینی آب و هوای خود را بازنویسی می کنیم تا به جای آن از عبارت switch استفاده کنیم:

<label for=”weather“>Select the weather type today: </label>

<select id=”weather“>

  <option value=””>–Make a choice–</option>

  <option value=”sunny“>Sunny</option>

  <option value=”rainy“>Rainy</option>

  <option value=”snowing“>Snowing</option>

  <option value=”overcast“>Overcast</option>

</select>

<p></p>

const select = document.querySelector(‘select’);

constpara = document.querySelector(‘p’);

select.addEventListener(‘change’, setWeather);

functionsetWeather() {

  const choice = select.value;

  switch(choice) {

    case ‘sunny’:

      para.textContent = ‘It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.’;

      break;

    case ‘rainy’:

      para.textContent = ‘Rain is falling outside; take a rain coat and an umbrella, and don’t stay out for too long.’;

      break;

    case ‘snowing’:

      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.’;

      break;

    case ‘overcast’:

      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.’;

      break;

    default:

      para.textContent = ‘ ‘;

  }

}

پس بیایید به یک مثال ساده نگاه کنیم:

const greeting = isBirthday

 ?‘Happy birthday Mrs. Smith — we hope you have a great day!’

  : ‘Good morning Mrs. Smith.’;

در اینجا یک متغیر به نام isBirthday داریم که اگر این درست باشد، به مهمان خود پیام تبریک تولد می دهیم. اگر نه، ما به او سلام استاندارد روزانه می دهیم.

مثال اپراتور سه تایی

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

<label for=”theme“>Select theme: </label>

<select id=”theme“>

  <optionvalue=”white“>White</option>

  <option value=”black“>Black</option>

</select>

<h1>This is my website</h1>

const select = document.querySelector(‘select’);

const html = document.querySelector(‘html’);

document.body.style.padding =’10px’;

function update(bgColor, textColor) {

  html.style.backgroundColor = bgColor;

 html.style.color = textColor;

}

select.addEventListener(‘change’, ()=> select.value ===‘black’

  ? update(‘black’, ‘white’)

 : update(‘white’, ‘black’)

);

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

در نهایت، ما همچنین یک شنونده رویداد onchange داریم که برای اجرای یک تابع حاوی یک عملگر سه تایی خدمت می کند. با یک شرط آزمایشی شروع می شود ‘select.value === ‘black ، اگر این مقدار true باشد، تابع ()update را با پارامترهای سیاه و سفید اجرا می کنیم، به این معنی که در نهایت یک رنگ پس زمینه سیاه و یک رنگ متن سفید داریم. اگر false را برگرداند، تابع ()update را با پارامترهای سفید و سیاه اجرا می کنیم، به این معنی که رنگ های سایت معکوس هستند.

یادگیری فعال: یک تقویم ساده

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

یک عنصر <select> که به کاربر اجازه می دهد بین ماه های مختلف یکی را انتخاب کند.

یک کنترل کننده رویداد onchange برای تشخیص اینکه چه زمانی مقدار انتخاب شده در منوی <select> تغییر می کند.

تابعی به نام ()createCalendar که تقویم را ترسیم می کند و ماه صحیح را در عنصر <h1> نمایش می دهد.

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

1.به ماه انتخاب شده نگاه کنید (ذخیره شده در متغیر انتخاب. این مقدار عنصر <select> پس از تغییر مقدار خواهد بود، به عنوان مثال “ژانویه”).

2.متغیری به نام days را با تعداد روزهای ماه انتخاب شده برابر تنظیم کنید. برای این کار باید تعداد روزهای هر ماه از سال را جستجو کنید. برای اهداف این مثال می توانید سال های کبیسه را نادیده بگیرید.

نکات:

1.به شما توصیه می شود از OR منطقی برای گروه بندی چندین ماه با هم در یک شرط واحد استفاده کنید. بسیاری از آنها تعداد روزهای مشابهی دارند.
۲.به این فکر کنید که کدام تعداد روز رایج ترین است و از آن به عنوان مقدار پیش فرض استفاده کنید.

اگر اشتباهی مرتکب شوید، همیشه می توانید با دکمه “Reset” مثال را بازنشانی کنید. اگر واقعاً گیر کرده اید، برای مشاهده راه حل، «Show solution» را فشار دهید.

مهارت های خود را بیازمایید!

شما به پایان این مقاله رسیده اید، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟ می‌توانید آزمایش‌های بیشتری برای تأیید اینکه این اطلاعات را قبل از ادامه کار حفظ کرده‌اید پیدا کنید.

در پایان

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