آموزش جاوا اسکریپت - مقایسه‌گرها و if و else

[mesterweb]

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

مقایسه‌گرها:

قبل از شروع آموزش باید با اهمیت و نیازی که به مقایسه‌گرها داریم، آشنا شویم. همان‌طور که از نام مقایسه‌گر پیداست، وظیفه‌ی آن، مقایسه‌ی بین متغیرها است؛ به‌عنوان مثال، در متغیرهای عددی ببینید کدام عدد از کدام عدد بزرگتر یا کوچکتر است. همین که بدانید عدد ۲ از ۳ در جاوا اسکریپت کوچکتر است، در بسیاری از موارد کمک شایانی به شما خواهد کرد!

مقایسه در جاوا اسکریپت انواع بسیاری دارد. نه تنها مقدار متغیرها، بلکه نوع متغیرها نیز قابل مقایسه است؛ به‌عنوان مثال، شما می‌توانید علاوه‌بر مقدار (مثلا ۲ بزرگتر است یا ۴)، نوع متغیرها (استرینگ یا عدد) را نیز مقایسه کنید یا متغیر دلخواهی را از نظر نوع و میزان با متغیر دیگر یکی است یا نه کلی به کمکتان می‌آید.

۱)  مساوی '=' 

درباره‌ی علامت =  قبلا هم صحبت کرده‌ایم و یاد گرفته‌ایم! از مساوی تنها برای اختصاص دادن یک مقدار به یک متغیر استفاده می‌شود و به هیچ‌وجه قدرت مقایسه ندارد.

۲)‌ دو مساوی '==' 

وقتی دو مساوی قرار بدهیم، جاوا اسکریپت این‌طور برداشت می‌کند که باید دو متغیر را از نظر میزان با هم مقایسه کند. مثلا متغیر x=5 را در نظر بگیرید. در نتیجه این مقایسه دو حالت پیش می‌آید. یا مقدار دو طرف مساوی برابر است و مرورگر true بر می‌گرداند یا این تساوی اشتباه است و مرورگر false بر می‌گرداند.

برای مثال فرض کنید یک متغیر با نام x داریم! وقتی x == 5 بنویسیم یعنی چک‌ می‌کنیم که آیا ایکس با ۵ برابر است یا نه! اگر جواب صحیح باشد، مرورگر true بر می‌گرداند و اگر متغیر با مقدار آن سمت مساوی برابر نباشد مرورگر false بر می‌گرداند. 

مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

۳) سه مساوی '==='

وقتی از سه مساوی کنار هم استفاده کنیم، یعنی می‌خواهیم دو متغیر را هم از نظر مقدار و هم از نظر نوع، با یکدیگر مقایسه کنیم. در این حالت باید هر دو طرف مساوی از نظر نوع و مقدار یکسان باشند (یعنی هر دو استرینگ یا هر دو عدد باشند و مقدار آن‌ها نیز یکی باشد).

مثال: 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

دو عبارت اول صحیح بود چرا که هم از نظر مقدار و هم از نظر نوع با هم برابر بودند (هر دو عدد هستند) ولی عبارت سوم اشتباه از آب در آمد. چرا؟ چون هر چند مقدار هر دو تای آن‌ها ۴ است ولی از نظر نوع با یکدیگر یکسان نیستند و هر کدام یک مدل داده هستند! یکی عدد و یکی استرینگ (به کوتیشن دور عدد ۴ در متغیر y دقت کنید تا متوجه شوید که ۴ استرینگ است!) پس مرورگر false بر می‌گرداند.

 

۴) !=

وقتی می‌خواهیم ببینیم که فلان عبارت با فلان عبارت مساوی نیست از این اپراتور استفاده می‌کنیم! این دقیقا نقطه بر عکس == تنها است. در این حالت می‌خواهیم چک کنیم که داده‌های دو طرف مساوی نباشند! در این حالت هم به اینکه هر کدام از  طرفین استرینگ هستند یا عدد کاری نداریم و فقط مقدارها را با هم مقایسه می‌کنیم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

5) !==

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اپراتورهای منطقی:

منظور از اپراتورهای منطقی همان علامت‌های بزرگتر و کوچکتر است که از دوران مدرسه و ریاضیات ابتدایی با آن آشنا هستیم. 

بزرگتر

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همچنین باید بدانید که این گونه مقایسه‌ها فقط برای اعداد قابل استفاده هستند و دو رشته متنی را نمی‌توانیم اینگونه مقایسه کنیم.

کوچکتر

وقتی علامت کوچکتر > قرار دهیم یعنی می‌خواهیم ببینیم عبارت سمت چپ از عبارت سمت راست کوچکتر است یا خیر. مثلا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

بزرگتر یا مساوی =<

وقتی علامت =< قرار دهیم یعنی نه تنها می‌خواهیم بدانیم عبارت سمت چپ از عبارت سمت راست کوچکتر است، بلکه می‌خواهیم بدانیم که این عبارت مساوی آن نیز هست یا خیر. یعنی حتی اگر این دو عبارت مساوی باشند نیز شرط ما را در بر‌ می‌گیرند.  مثلا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کوچکتر یا مساوی =>

وقتی علامت => قرار دهیم یعنی نه تنها می‌خواهیم بدانیم عبارت سمت چپ از عبارت سمت راست بزرگتر است یا خیر، بلکه می‌خواهیم بدانیم که این عبارت مساوی آن نیز هست یا خیر. یعنی حتی اگر این دو عبارت مساوی باشند نیز شرط ما را در بر می‌گیرند. مثلا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تمرین:

حالا که با متغیرهای عددی، اعمال روی آن‌ها و نحوه مقایسه آن‌ها آشنا شده‌ایم وقت آن رسیده تا چند تمرین ساده برای آشنایی بیشتر انجام دهیم:

تمرین شماره ۱: دو متغیر استرینگی بسازید! سپس با کمک دستور length تعداد کاراکترهای آن‌ها را پیدا کرده و مقایسه کنید که کدام یک از این جملات طولانی‌تر هستند! 

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

پاسخ تمرین: 

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اینجا هم یادآوری می‌کنیم که نیازی نیست در پشت متغیرها هر بار یک کلمه var  نوشت و با نوشتن یکباره این کلمه پشت متغیر اول و قرار دادن علامت ,  بین متغیرهای دیگر می‌توانیم سریع‌تر و راحت‌تر متغیرهایمان را به یکباره تعریف کنیم.

در همین مثال، می‌توانستیم از همان ابتدا نیز نوع متغیرها را مشخص کنیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

وقتی علامت سینگل  ' '  یا دابل کوتیشن  ""   را در روبه‌روی متغیرها می‌نویسیم در واقع به جاوا اسکریپت می‌گوییم که نوع متغیر ما استرینگ بوده و ما یک استرینگ خالی تعریف کرده‌ایم!

خب به ادامه پاسخ تمرین اول بر می‌گردیم. در این مثال قرار شد که دو متغیر استرینگی را از نظر طول مقایسه کنیم. با فرض اینکه هیچ کار دیگری در برنامه انجام نمی‌شود، متغیرهای استرینگی را با متن جدید پر می‌کنیم.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

برای مثال طول متغیر stringOne را این‌گونه می‌سنجیم: 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

حالا برای اتمام این تمرین آن‌ها را توسط مقایسه‌گر کوچک‌تر می‌سنجیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

lf و else:

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

به همان پروژه ساده‌ای که در جلسات اول صحبت شد بر می‌گردیم. می‌خواهیم این بار کاری کنیم که اگر یک مشتری ویژه داشتیم درصد تخفیف بیشتری را برای وی لحاظ کند. این کار به سادگی هر چه تمام‌تر امکان‌پذیر است.

فرض کنید متغیری به نام specialCustomer داریم. این متغیر وقتی true باشد یعنی مشتری ما مشتری ویژه است و زمانی که false باشد یعنی مشتری ما ویژه نیست. برای چک کردن این موضوع سراغ if و else ساده می‌رویم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همانطور که در بالا مشاهده می‌کنید ما چک کرده‌ایم که اگر مشتری ما ویژه بود، ۱۰۰ تومان از مبلغ کل سفارش وی کسر شود. یعنی (totalPrice -= 100).

می‌توانید به if خود یک else نیز اضافه کنید. else زمانی اتفاق می‌افتد که شرایط مد نظر شما در شرط if به هر دلیلی مورد قبول واقع نشود. بدین ترتیب شما وارد else می‌شود و کد else شما اجرا خواهد شد.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اضافه کردن شرط‌های دیگر

گاهی پیش می‌آید شما می‌خواهید حالت‌های بیشتری را نیز چک کنید. مثلا می‌خواهید بدانید اگر عدد مورد نظر ۰ بود فلان کار را انجام بده، اگر عدد ۱ بود، فلان کار و اگر ۲ بود کار دیگر و الی آخر... برای این کار دو روش پیش روی داریم که با هم مرور می‌کنیم.

روش اول:‌ استفاده از چند if پشت سر هم‌:

در این حالت جاوا اسکریپت از بالا به پایین حرکت می‌کند.

مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

مثال زیر را ببینید:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

استفاده از && و || 

یکی دیگر از ابزارهای مهم در شرط‌گذاری جاوا اسکریپت &&  و  ||  هستند. کاربرد این دو چیست؟‌ یک مثال می‌زنیم! فرض کنید می‌خواهید چک کنید آیا عدد ۴ بین ۵ و ۶ هست یا خیر. برای این کار به سادگی می‌توانیم از && استفاده کنیم. دو علامت & در کنار هم در شرط‌های ما به معنای آن است که بگوییم هم شرط اول برقرار باشد هم شرط دوم! 

مثلا: 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثال دیگری را در مورد همان پروژه مدیریت رستوران با هم مرور می‌کنیم. فرض کنید سه نوع کاربر دارید!‌ کاربری که بالای هزار تومان خرید دارد. کاربری که ویژه است و کاربری که دارای امتیاز بالای ۱۰۰ است! (یا هر نوع دیگری!) می‌خواهید در صورتی که کاربری وجود داشته باشد که هر سه نوع این امتیازها را همزمان دارد و شما بخواهید برای وی کاری کنید چه کار می‌کنید؟ مطمئنا یک شرط با استفاده از && می‌گذارید و برای وی هر کاری خواستید انجام می‌دهید.

مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

حتی اگر یکی از شرایط برقرار نباشد، بلاک داخل این شرط اجرا نخواهد شد. && به زبان خودمان همان همچنینمی‌شود. یعنی هم این شرط و هم آن شرط باید برقرار شود.

استفاده از || 

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در این حالت چون x با یکی از حالت‌های if ما برابری می‌کند، بلاک کد if ما اجرا خواهد شد!‌

حالا که هم با مقایسه‌گرها آشنا شده‌ایم و هم ساختار شرط‌ و شروط‌گذاری را می‌دانیم یک تمرین جالب‌تر انجام دهیم!

حالا می‌خواهیم یک تمرین ساده دیگر برای تکمیل این جلسه انجام دهیم. 

فرض کنید صاحب یک مغازه سوپرمارکت هستید و می‌خواهید یک سیستم مدیریت مشتریان ایجاد کنید که افرادی که خرید بالای دو هزار تومان انجام دهند یک تخفیف ویژه ۱۰۰ تومانی بگیرند و افرادی که بیشتر از ۲۵۰۰ تومان خرید کنند ۲۰۰ تومان تخفیف بگیرند! 

قبل از شروع بد نیست کمی این موضوع را تحلیل کنیم! برای ایجاد چنین پروژه‌ای به یک متغیر با نام سبد خرید نیاز داریم! یک سری متغیر برای قیمت محصولات مختلف و یک درصد تخفیف مشخص که به کمک آن قیمت نهایی سبد خرید مشتریان ویژه را کاهش دهیم.

برای این کار ابتدا یک متغیر به نام سبد خرید ایجاد می‌کنیم. 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

سپس تعدادی محصول را به صورت دلخواه و با متغیرهای مختلف اضافه می‌کنیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

حالا می‌خواهیم به سراغ آموخته‌های جلسه‌ای که گذرانده‌ایم برویم! در مرحله آخر باید چک کنیم که میزان خرید‌های مشتری ما آیا به حد نصاب رسیده است یا خیر! و این تخفیف چقدر خواهد بود!

یک راه همانطور که گفتیم استفاده از چند if پشت سر هم است: 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

یک تمرین دیگر نیز با هم مرور می‌کنیم. فرض کنید یک متغیر با نام x داریم! 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

وقتی این فایل را اجرا کنیم هم بلاک اول و هم بلاک دوم اجرا می‌شود! چرا که مرورگر با وجود رسیدن به شرط درست در بلاک اول باز هم به جستجو در ifهای دیگر ادامه می‌دهد و همه آن‌ها را اجرا می‌کند. از آنجا که ما در بلاک اول مقدار متغیر ایکس را تغییر داده‌ایم پس ساختار شرط‌هایمان نیز تغییر کرده است!

حالا همین مثال را با کمک else if اجرا می کنیم: 

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اگر این کد را اجرا کنید خواهید دید که تنها یک بار و در بلاک اول کد ما اجرا شد! در واقع  else if  تنها یک بار اجرا می‌شود و مرورگر در صورت پیدا کردن شرایط درست دیگر سراغ دیگر شرط و شروط نخواهد رفت!