جاوا اسکریپت به زبان ساده - جلسه هشتم - مقایسهگرها و if و else
پیش از آغاز مقاله، بهجهت تأخیر پیشآمده از شما کاربران عزیز زومیت عذرخواهی میکنیم. یکی از دلایل تاخیر در روند انتشار مقالات، تغییرات ساختاری در جهت بهبود کیفیت مقالات و آموزشها بوده است. در این فرصت به وجود آمده تلاش کردیم تا حد امکان با آوردن مثالهای بیشتر و سادهتر، روند یادگیری را بهبود ببخشیم، کیفیت مطالب را بهبود دهیم و در حد توان، آموزشی درخور کاربران زومیتی تهیه کنیم. امیدواریم بهبود کیفیت آموزشهای پیش رو جبرانی بر تاخیر به وجود آمده باشد. با زومیت همراه باشید.
مقایسهگرها:
قبل از شروع آموزش باید با اهمیت و نیازی که به مقایسهگرها داریم، آشنا شویم. همانطور که از نام مقایسهگر پیداست، وظیفهی آن، مقایسهی بین متغیرها است؛ بهعنوان مثال، در متغیرهای عددی ببینید کدام عدد از کدام عدد بزرگتر یا کوچکتر است. همین که بدانید عدد ۲ از ۳ در جاوا اسکریپت کوچکتر است، در بسیاری از موارد کمک شایانی به شما خواهد کرد!
مقایسه در جاوا اسکریپت انواع بسیاری دارد. نه تنها مقدار متغیرها، بلکه نوع متغیرها نیز قابل مقایسه است؛ بهعنوان مثال، شما میتوانید علاوهبر مقدار (مثلا ۲ بزرگتر است یا ۴)، نوع متغیرها (استرینگ یا عدد) را نیز مقایسه کنید یا متغیر دلخواهی را از نظر نوع و میزان با متغیر دیگر یکی است یا نه کلی به کمکتان میآید.
۱) مساوی '='
دربارهی علامت = قبلا هم صحبت کردهایم و یاد گرفتهایم! از مساوی تنها برای اختصاص دادن یک مقدار به یک متغیر استفاده میشود و به هیچوجه قدرت مقایسه ندارد.
۲) دو مساوی '=='
وقتی دو مساوی قرار بدهیم، جاوا اسکریپت اینطور برداشت میکند که باید دو متغیر را از نظر میزان با هم مقایسه کند. مثلا متغیر x=5 را در نظر بگیرید. در نتیجه این مقایسه دو حالت پیش میآید. یا مقدار دو طرف مساوی برابر است و مرورگر true بر میگرداند یا این تساوی اشتباه است و مرورگر false بر میگرداند.
برای مثال فرض کنید یک متغیر با نام x داریم! وقتی x == 5 بنویسیم یعنی چک میکنیم که آیا ایکس با ۵ برابر است یا نه! اگر جواب صحیح باشد، مرورگر true بر میگرداند و اگر متغیر با مقدار آن سمت مساوی برابر نباشد مرورگر false بر میگرداند.
مثال:
var numberOne = 3
console.log(numberOne == 3) //مرورگر true بر میگرداند
console.log(numberOne == 6) //مرورگر false بر میگرداند
۳) سه مساوی '==='
وقتی از سه مساوی کنار هم استفاده کنیم، یعنی میخواهیم دو متغیر را هم از نظر مقدار و هم از نظر نوع، با یکدیگر مقایسه کنیم. در این حالت باید هر دو طرف مساوی از نظر نوع و مقدار یکسان باشند (یعنی هر دو استرینگ یا هر دو عدد باشند و مقدار آنها نیز یکی باشد).
مثال:
var x = 4
var y = 4
var z = "4"
console.log(x===4)//true
console.log(x===y) //true
console.log(x===z)//false
دو عبارت اول صحیح بود چرا که هم از نظر مقدار و هم از نظر نوع با هم برابر بودند (هر دو عدد هستند) ولی عبارت سوم اشتباه از آب در آمد. چرا؟ چون هر چند مقدار هر دو تای آنها ۴ است ولی از نظر نوع با یکدیگر یکسان نیستند و هر کدام یک مدل داده هستند! یکی عدد و یکی استرینگ (به کوتیشن دور عدد ۴ در متغیر y دقت کنید تا متوجه شوید که ۴ استرینگ است!) پس مرورگر false بر میگرداند.
۴) !=
وقتی میخواهیم ببینیم که فلان عبارت با فلان عبارت مساوی نیست از این اپراتور استفاده میکنیم! این دقیقا نقطه بر عکس == تنها است. در این حالت میخواهیم چک کنیم که دادههای دو طرف مساوی نباشند! در این حالت هم به اینکه هر کدام از طرفین استرینگ هستند یا عدد کاری نداریم و فقط مقدارها را با هم مقایسه میکنیم.
var x = 7;
var y = 8;
console.log(x != 8) //true
console.log(x != y) //true
5) !==
زمانی که دو مساوی و یک علامت تعجب داشته باشیم یعنی نه تنها از نظر مقداری بلکه از نظر نوع نیز دادهها را میخواهیم مقایسه کنیم! پس در این حالت دو طرف وقتی از نظر نوع یکی نباشند هم نتیجه عوض میشود.
var x = 5
var y = "5"
var z = 6
console.log(x !== 5) // false
console.log(x !== y) // true برمیگردد چون از نظر مقدار یکی هستند ولی یکی استرینگ و یکی عدد است پس مخالف هم محسوب میشوند.
console.log(x !== z) // true برمیگردد چون از نظر مقدار یکی نیستند .
اپراتورهای منطقی:
منظور از اپراتورهای منطقی همان علامتهای بزرگتر و کوچکتر است که از دوران مدرسه و ریاضیات ابتدایی با آن آشنا هستیم.
بزرگتر
وقتی علامت بزرگتر قرار دهیم یعنی میخواهیم ببینیم عبارت سمت چپ از عبارت سمت راست بزرگتر است یا خیر. مثلا:
console.log(6>5) //true
console.log(7>8) //false
همچنین باید بدانید که این گونه مقایسهها فقط برای اعداد قابل استفاده هستند و دو رشته متنی را نمیتوانیم اینگونه مقایسه کنیم.
کوچکتر
وقتی علامت کوچکتر > قرار دهیم یعنی میخواهیم ببینیم عبارت سمت چپ از عبارت سمت راست کوچکتر است یا خیر. مثلا:
console.log(6<5) //true
console.log(7<8) //false
بزرگتر یا مساوی =<
وقتی علامت =< قرار دهیم یعنی نه تنها میخواهیم بدانیم عبارت سمت چپ از عبارت سمت راست کوچکتر است، بلکه میخواهیم بدانیم که این عبارت مساوی آن نیز هست یا خیر. یعنی حتی اگر این دو عبارت مساوی باشند نیز شرط ما را در بر میگیرند. مثلا:
console.log(6 >= 5) //true
console.log(7>= 8) //false
console.log(6 >= 6) //true
کوچکتر یا مساوی =>
وقتی علامت => قرار دهیم یعنی نه تنها میخواهیم بدانیم عبارت سمت چپ از عبارت سمت راست بزرگتر است یا خیر، بلکه میخواهیم بدانیم که این عبارت مساوی آن نیز هست یا خیر. یعنی حتی اگر این دو عبارت مساوی باشند نیز شرط ما را در بر میگیرند. مثلا:
console.log(6 <= 5) //false
console.log(7<=8) //true
console.log(8<=8) //true
تمرین:
حالا که با متغیرهای عددی، اعمال روی آنها و نحوه مقایسه آنها آشنا شدهایم وقت آن رسیده تا چند تمرین ساده برای آشنایی بیشتر انجام دهیم:
تمرین شماره ۱: دو متغیر استرینگی بسازید! سپس با کمک دستور length تعداد کاراکترهای آنها را پیدا کرده و مقایسه کنید که کدام یک از این جملات طولانیتر هستند!
تمرین شماره ۲: با کمک دستور ساخت عدد رندوم، دو عدد به صورت رندوم و تصادفی بسازید و با کمک مقایسهگرها آنها را مقایسه کنید.
پاسخ تمرین:
ابتدا دو متغیر خالی تعریف میکنیم! اگر یادتان باشد همیشه بر اساس منطقی که در برنامه داریم میتوانیم متغیرها را در ابتدا به صورت خالی تعریف کنیم یا آنها را از همان ابتدا دارای مقدار در نظر بگیریم. این موضوع کاملا به سیستمی که قصد تولید آن را دارید، بستگی دارد!
var stringOne,stringTwo;
اینجا هم یادآوری میکنیم که نیازی نیست در پشت متغیرها هر بار یک کلمه var نوشت و با نوشتن یکباره این کلمه پشت متغیر اول و قرار دادن علامت , بین متغیرهای دیگر میتوانیم سریعتر و راحتتر متغیرهایمان را به یکباره تعریف کنیم.
در همین مثال، میتوانستیم از همان ابتدا نیز نوع متغیرها را مشخص کنیم:
var stringOne = "";
var stringTwo = "";
وقتی علامت سینگل ' ' یا دابل کوتیشن "" را در روبهروی متغیرها مینویسیم در واقع به جاوا اسکریپت میگوییم که نوع متغیر ما استرینگ بوده و ما یک استرینگ خالی تعریف کردهایم!
خب به ادامه پاسخ تمرین اول بر میگردیم. در این مثال قرار شد که دو متغیر استرینگی را از نظر طول مقایسه کنیم. با فرض اینکه هیچ کار دیگری در برنامه انجام نمیشود، متغیرهای استرینگی را با متن جدید پر میکنیم.
stringOne = "hello,we want to learn JavaScript";
stringTwo = "hi, we want to learn Js";
حالا از یک متد جدید در استرینگها به نام length استفاده میکنیم. length یا طول همانطور که از نامش پیداست اندازه و تعداد کمی را بیان میکند. وقتی بعد از یک متغیر استرینگی کلمه .length نوشته میشود در واقع متد دریافت طول کاراکترهای نوشته اجرا میشود.
برای مثال طول متغیر stringOne را اینگونه میسنجیم:
stringOne.length
اگر این مقدار را در یک متغیر جدید بریزیم یا مستقیما در کنسول چاپ کنیم عدد نمایش داده شده همان تعداد کاراکترهای استرینگی این متغیر خواهد بود.
حالا برای اتمام این تمرین آنها را توسط مقایسهگر کوچکتر میسنجیم:
console.log(stringOne.length <= stringTwo.length) //کوچکتر یا مساوی با متغیر استرینگ ۲ است یا نه stringOne مقایسه اینکه آیا متغیر
console.log(stringOne.length === stringTwo.length) // مقایسه متغیرها از نظر نوع و تعداد
console.log(stringOne.length == stringTwo.length) // مقایسه متغیرها فقط از نظر تعداد و اندازه
lf و else:
یکی از بنیانهای هر زبان برنامهنویسی استفاده از شرطها است. در واقع منطق بسیاری از اعمال ما را if و else تشکیل میدهد. مثلا وقتی میخواهیم برای رفتن به یک سفر برنامهریزی کنیم، میگوییم اگر فلان روز تعطیل شد فلان کار را میکنم و اگر تعطیل نشد آن یکی کار را انجام میدهم و اگر هیچکدام نشد کار دیگری میکنم و الی آخر. این موضوع عینا در دنیای برنامه نویسی نیز صدق میکند.
به همان پروژه سادهای که در جلسات اول صحبت شد بر میگردیم. میخواهیم این بار کاری کنیم که اگر یک مشتری ویژه داشتیم درصد تخفیف بیشتری را برای وی لحاظ کند. این کار به سادگی هر چه تمامتر امکانپذیر است.
فرض کنید متغیری به نام specialCustomer داریم. این متغیر وقتی true باشد یعنی مشتری ما مشتری ویژه است و زمانی که false باشد یعنی مشتری ما ویژه نیست. برای چک کردن این موضوع سراغ if و else ساده میرویم:
if( specialCustomer == true) {
totalPrice -= 100;
}
همانطور که در بالا مشاهده میکنید ما چک کردهایم که اگر مشتری ما ویژه بود، ۱۰۰ تومان از مبلغ کل سفارش وی کسر شود. یعنی (totalPrice -= 100).
میتوانید به if خود یک else نیز اضافه کنید. else زمانی اتفاق میافتد که شرایط مد نظر شما در شرط if به هر دلیلی مورد قبول واقع نشود. بدین ترتیب شما وارد else میشود و کد else شما اجرا خواهد شد.
با استفاده از if حالتهای مختلفی را تعیین میکنید و به مرورگر میگویید تا در هر شرایط چه تصمیمی بگیرد و چه کاری را انجام دهد. برای نوشتن شرطها ابتدا کلمه if را با دو پرانتز در کنار آن مینویسیم و یک آکولاد جلوی آن باز و بسته میکنیم.
if(شرطهای ما برای چک کردن شرایط) {
اتفاقی که قرار است در صورت درست بودن شرایط این If اتفاق بیفتد
}
else {
در هر حالت دیگری به غیر از حالت بالا این اتفاقات رخ خواهد داد
}
اضافه کردن شرطهای دیگر
گاهی پیش میآید شما میخواهید حالتهای بیشتری را نیز چک کنید. مثلا میخواهید بدانید اگر عدد مورد نظر ۰ بود فلان کار را انجام بده، اگر عدد ۱ بود، فلان کار و اگر ۲ بود کار دیگر و الی آخر... برای این کار دو روش پیش روی داریم که با هم مرور میکنیم.
روش اول: استفاده از چند if پشت سر هم:
در این حالت جاوا اسکریپت از بالا به پایین حرکت میکند.
مثال:
var x = 0;
if (x == 1) {
// اگر این شرط درست بود این شرط اجرا میشد ولی درست نیست و سراغ شرط بعدی خواهیم رفت
}
if (x == 2) {
// این شرط هم درست نیست و سراغ شرط بعدی خواهیم رفت
}
if (x == 0) {
// این شرط درست است و کدهای در داخل این بلاک کد اجرا خواهد شد
}
if(x == 4) {
//با اینکه شرط درست را در حالت قبلی پیدا کردهایم ولی باز هم جاوا اسکریپت به چک کردن کدها ادامه میدهد
}
if(x == 0) {
//بار دیگر این شرط نیز درست است و کدهای داخل این بلاک هم مجددا اجرا میشوند.
}
else {
//اگر هیچکدام از شرایط بالا درست نبود این بلاک کد اجرا خواهد شد
}
همانطور که دیدید وقتی چند If پشت هم باشد تک تک آنها چک شده و در صورت درست بودن کد درون آنها اجرا خواهد شد. ولی گاهی اوقات این اتفاق خوشایند نیست! شاید ما بخواهیم بلافاصله بعد از اینکه به شرایط درست رسیدیم، حالت دیگری چک نشود! یعنی به محض اینکه به نتیجه درست رسیدیم قید هرگونه شرط و شروطی را بزنیم و به کار خود ادامه دهیم! اینجاست که حالت دوم یعنی با else if میرسیم.
مثال زیر را ببینید:
var y = 0;
if (y == 1) {
// اگر این شرط درست بود این شرط اجرا میشد ولی درست نیست و سراغ شرط بعدی خواهیم رفت
}
else if (y == 2) {
// این شرط هم درست نیست و سراغ شرط بعدی خواهیم رفت
}
else if (y == 0) {
// این شرط درست است و کدهای در داخل این بلاک کد اجرا خواهد شد و دیگر شروط پایینتر صرف نظر از درست یا غلط بودنشان چک نخواهند شد. تنها یکبار درست بودن یک شرط برای اجرای کدهای داخل آن کافیست
}
else if(y == 0) {
//بار دیگر این شرط نیز درست است ولی کدهای داخل این بلاک دیگر اجرا نمیشوند. چون یک بار شرط درست در بالاتر اجرا شده و از این مقطع از کد خارج شدهایم..
}
else {
//اگر هیچکدام از شرایط درست نبود این بلاک کد اجرا خواهد شد
}
استفاده از && و ||
یکی دیگر از ابزارهای مهم در شرطگذاری جاوا اسکریپت && و || هستند. کاربرد این دو چیست؟ یک مثال میزنیم! فرض کنید میخواهید چک کنید آیا عدد ۴ بین ۵ و ۶ هست یا خیر. برای این کار به سادگی میتوانیم از && استفاده کنیم. دو علامت & در کنار هم در شرطهای ما به معنای آن است که بگوییم هم شرط اول برقرار باشد هم شرط دوم!
مثلا:
if(x > 4 && x<6) {
//تنها در صورتی که ایکس بزرگتر از ۴ و همچنین کوچکتر از ۶ باشد این شرط برقرار خواهد بود
}
مثال دیگری را در مورد همان پروژه مدیریت رستوران با هم مرور میکنیم. فرض کنید سه نوع کاربر دارید! کاربری که بالای هزار تومان خرید دارد. کاربری که ویژه است و کاربری که دارای امتیاز بالای ۱۰۰ است! (یا هر نوع دیگری!) میخواهید در صورتی که کاربری وجود داشته باشد که هر سه نوع این امتیازها را همزمان دارد و شما بخواهید برای وی کاری کنید چه کار میکنید؟ مطمئنا یک شرط با استفاده از && میگذارید و برای وی هر کاری خواستید انجام میدهید. مثال:
if(specialUser && moreThanThousands && moreThenHundred ) {
//اگر هر سه تا شرط بالا به صورت همزمان برقرار باشند این بلاک کد اجرا خواهد شد ولی در صورتی که هر یک از آنها صدق نکند این بلاک اجرا نخواهد شد
}
حتی اگر یکی از شرایط برقرار نباشد، بلاک داخل این شرط اجرا نخواهد شد. && به زبان خودمان همان همچنین میشود. یعنی هم این شرط و هم آن شرط باید برقرار شود.
استفاده از ||
دو خط موازی ایستاده که در کنار هم قرار بگیرند در جاوا اسکریپت معنای یا میدهند. یعنی یا شرط اول یا شرط دوم برقرار بود بلاک کد آن اجرا میشود. یعنی فرقی نمیکند شرط اول غلط است یا درست ! حتی اگر یکی از موارد نیز درست باشند کد ما اجرا خواهد شد. مثال زیر را ببینید.
x= 2
if( x==0 || x==1 || x==2) {
// این کد اجرا خواهد شد
}
در این حالت چون x با یکی از حالتهای if ما برابری میکند، بلاک کد if ما اجرا خواهد شد!
حالا که هم با مقایسهگرها آشنا شدهایم و هم ساختار شرط و شروطگذاری را میدانیم یک تمرین جالبتر انجام دهیم!
حالا میخواهیم یک تمرین ساده دیگر برای تکمیل این جلسه انجام دهیم.
فرض کنید صاحب یک مغازه سوپرمارکت هستید و میخواهید یک سیستم مدیریت مشتریان ایجاد کنید که افرادی که خرید بالای دو هزار تومان انجام دهند یک تخفیف ویژه ۱۰۰ تومانی بگیرند و افرادی که بیشتر از ۲۵۰۰ تومان خرید کنند ۲۰۰ تومان تخفیف بگیرند!
قبل از شروع بد نیست کمی این موضوع را تحلیل کنیم! برای ایجاد چنین پروژهای به یک متغیر با نام سبد خرید نیاز داریم! یک سری متغیر برای قیمت محصولات مختلف و یک درصد تخفیف مشخص که به کمک آن قیمت نهایی سبد خرید مشتریان ویژه را کاهش دهیم.
برای این کار ابتدا یک متغیر به نام سبد خرید ایجاد میکنیم.
var basket;
سپس تعدادی محصول را به صورت دلخواه و با متغیرهای مختلف اضافه میکنیم:
var productOne = 1000;
var productTwo = 400;
var productThree = 950;
حالا فرض میکنیم که مشتری ما سه آیتم به سبد خرید خود اضافه کرده باشد. در این صورت قیمت نهایی سبد خرید وی مجموع قیمت محصولات انتخابی است.
var basket = productOne + productTwo + productThree;
حالا میخواهیم به سراغ آموختههای جلسهای که گذراندهایم برویم! در مرحله آخر باید چک کنیم که میزان خریدهای مشتری ما آیا به حد نصاب رسیده است یا خیر! و این تخفیف چقدر خواهد بود!
یک راه همانطور که گفتیم استفاده از چند if پشت سر هم است:
if(basket <= 2000) {
// تخفیفی ندارد چون مقدار خرید به حد نصاب نرسیده است!
}
if(basket > 2000 && bakset < 3000) {
basket -= 100
}
if (basket >= 3000) {
basket -= 200
}
else {
// اگر کاربر خریدی انجام نداده باشد و متغیر بسکت وی خالی باشد به این بلاک خواهیم رسید
}
یک تمرین دیگر نیز با هم مرور میکنیم. فرض کنید یک متغیر با نام x داریم!
x = 0;
if(x==0) {
alert("پیغام اول")
x = 1 //در اینجا مقدار متغیر x را به یک تغییر میدهیم
}
if(x ==1) {
alert( "پیغام دوم")
//چون مقدار متغیر ایکس به ۱ تغییر پیدا کرده پس این شرط نیز درست از آب در میآید
}
if (x == 0) {
alert("پیغام سوم")
// دیگر این شرط درست نیست چون مقدار ایکس تغییر کرده است
}
else {
alert("وارد آخرین شرط شدیم")
}
وقتی این فایل را اجرا کنیم هم بلاک اول و هم بلاک دوم اجرا میشود! چرا که مرورگر با وجود رسیدن به شرط درست در بلاک اول باز هم به جستجو در ifهای دیگر ادامه میدهد و همه آنها را اجرا میکند. از آنجا که ما در بلاک اول مقدار متغیر ایکس را تغییر دادهایم پس ساختار شرطهایمان نیز تغییر کرده است!
حالا همین مثال را با کمک else if اجرا می کنیم:
x =0;
if(x==0) {
alert("شرط اول")
x = 1 //در اینجا مقدار متغیر x را به یک تغییر میدهیم
}
else if(x ==1) {
alert( "شرط دوم")
//چون مقدار متغیر ایکس به ۱ تغییر پیدا کرده پس این شرط نیز درست از آب در میآید
}
else if (x == 0) {
alert("شرط سوم")
// دیگر این شرط درست نیست چون مقدار ایکس تغییر کرده است
}
else {
alert("آخرین شرط")
}
اگر این کد را اجرا کنید خواهید دید که تنها یک بار و در بلاک اول کد ما اجرا شد! در واقع else if تنها یک بار اجرا میشود و مرورگر در صورت پیدا کردن شرایط درست دیگر سراغ دیگر شرط و شروط نخواهد رفت!
سخن پایانی:
در این جلسه با مفهوم اصلی برای مقایسه بین متغیرها و اعداد آشنا شدیم. همچنین با ساختار شرط گذاری و if و else ها در جاوا اسکریپت آشنا شدیم. امیدواریم در جلسات آینده نیز همراه ما باشید.