آموزش جاوا اسکریپت مبتدی : تصمیمگیری در کد شما - شرطها
در هر زبان برنامهنویسی، کد باید بسته به ورودیهای مختلف، تصمیمگیری کند و اقدامات لازم را انجام دهد. برای مثال، در یک بازی، اگر تعداد جانهای بازیکن ۰ باشد، بازی تمام میشود. در یک برنامه آب و هوا، اگر در صبح به آن نگاه میشود، یک تصویر طلوع خورشید را نشان میدهد؛ اگر شب است، ستارهها و ماه را نشان میدهد. در این مقاله، ما بررسی خواهیم کرد که چگونه عبارات شرطی در جاوا اسکریپت کار میکنند.
انسانها (و سایر حیوانات) همیشه تصمیماتی میگیرند که بر زندگیشان تأثیر میگذارد، از کوچک ("آیا باید یک کلوچه بخورم یا دو کلوچه؟") گرفته تا بزرگ ("آیا باید در کشور خودم بمانم و در مزرعه خانوادهام کار کنم، یا باید به آمریکا نقل مکان کنم و اخترفیزیک بخوانم؟")
جملههای شرطی به ما این امکان را میدهند که چنین تصمیمگیریهایی را در جاوا اسکریپت نمایش دهیم، از انتخابی که باید انجام شود (مثلاً "یک کلوچه بخورم یا دو کلوچه") تا نتیجه حاصل از آن انتخابها (شاید نتیجه "یک کلوچه خوردم" ممکن است "هنوز احساس گرسنگی میکنم" باشد، و نتیجه "دو کلوچه خوردم" ممکن است "احساس سیری میکنم، اما مامان به خاطر خوردن همه کلوچهها مرا سرزنش کرد".)
بیایید نگاهی به رایجترین نوع دستور شرطی که در جاوا اسکریپت استفاده خواهید کرد بیندازیم - دستور سادهی .
سینتکس اولیه به این شکل است:
در اینجا داریم:
۱- کلمه کلیدی if و به دنبال آن چند پرانتز.
۲- شرطی برای بررسی، که درون پرانتز قرار میگیرد (معمولاً "آیا این مقدار از این مقدار دیگر بزرگتر است؟" یا "آیا این مقدار وجود دارد؟"). این شرط از عملگرهای مقایسهای که قبلاً در ماژول در مورد آنها بحث کردیم استفاده میکند و مقدار true یا false را برمیگرداند.
۳- مجموعهای از آکولادها، که درون آنها کدی داریم - این میتواند هر کدی باشد که دوست داریم، و فقط در صورتی اجرا میشود که شرط true باشد.
۴- کلمه کلیدی else.
۵- مجموعه دیگری از آکولادها، که درون آنها کد بیشتری داریم - این میتواند هر کدی باشد که دوست داریم، و فقط در صورتی اجرا میشود که شرط true نباشد - یا به عبارت دیگر، شرط false باشد.
این کد کاملاً برای انسان قابل خواندن است - میگوید "اگر شرط true را برگرداند، کد A را اجرا کن، در غیر این صورت کد B را اجرا کن"
باید توجه داشته باشید که لازم نیست else و بلوک آکولاد دوم را وارد کنید - کد زیر نیز کاملاً قانونی است:
با این حال، باید در اینجا مراقب باشید - در این حالت، بلوک دوم کد توسط عبارت شرطی کنترل نمیشود، بنابراین همیشه اجرا میشود، صرف نظر از اینکه شرط مقدار درست یا نادرست را برگرداند. این لزوماً چیز بدی نیست، اما ممکن است چیزی نباشد که شما میخواهید - اغلب میخواهید یک بلوک کد یا بلوک دیگر را اجرا کنید، نه هر دو را.
به عنوان نکته آخر، اگرچه توصیه نمیشود، اما گاهی اوقات ممکن است عبارات را بدون آکولادهای مجعد ببینید:
این سینتکس کاملاً معتبر است، اما اگر از آکولاد برای جدا کردن بلوکهای کد استفاده کنید و از چندین خط و تورفتگی استفاده کنید، درک کد بسیار آسانتر میشود.
برای درک بهتر این سینتکس، بیایید یک مثال واقعی را در نظر بگیریم. تصور کنید کودکی توسط مادر یا پدرش در انجام کارهای خانه از او کمک خواسته میشود. والدین ممکن است بگویند: «سلام عزیزم! اگر در خرید به من کمک کنی، مقداری پول توجیبی اضافی به تو میدهم تا بتوانی اسباببازی مورد نظرت را بخری.» در جاوا اسکریپت، میتوانیم این را به این صورت نمایش دهیم:
همانطور که نشان داده شده است، این کد همیشه منجر به این میشود که متغیر shoppingDone مقدار false را برگرداند، که به معنای ناامیدی برای فرزند بیچاره ماست. این به ما بستگی دارد که مکانیزمی برای والد فراهم کنیم تا در صورت انجام خرید توسط فرزند، متغیر shoppingDone را روی true تنظیم کند.
مثال آخر دو انتخاب یا نتیجه به ما ارائه داد - اما اگر بیش از دو تا بخواهیم چه؟
راهی برای اتصال انتخابها/نتایج اضافی به شما وجود دارد - با استفاده از . هر انتخاب اضافی نیاز به یک بلوک اضافی برای قرار دادن بین و دارد - به مثال پیچیدهتر زیر که میتواند بخشی از یک برنامه ساده پیشبینی آب و هوا باشد، نگاهی بیندازید:
1- در اینجا ما یک عنصر در HTML داریم که به ما امکان میدهد انتخابهای آب و هوایی مختلفی داشته باشیم و یک پاراگراف ساده.
2- در جاوا اسکریپت، ما یک ارجاع به هر دو عنصر و ذخیره میکنیم و یک شنونده رویداد به عنصر اضافه میکنیم تا وقتی مقدار آن تغییر میکند، تابع اجرا شود.
3- وقتی این تابع اجرا میشود، ابتدا متغیری به نام choice را روی مقدار فعلی انتخاب شده در عنصر تنظیم میکنیم. سپس از یک عبارت شرطی برای نمایش متن متفاوت در داخل پاراگراف بسته به مقدار choice استفاده میکنیم. توجه کنید که چگونه همه شرایط در بلوکهای آزمایش میشوند، به جز اولین مورد که در بلوک آزمایش میشود.
4- آخرین انتخاب، درون بلوک ، اساساً یک گزینه "آخرین راه حل" است - کد داخل آن در صورتی اجرا میشود که هیچ یک از شرایط درست نباشند. در این حالت، اگر چیزی انتخاب نشده باشد، مثلاً اگر کاربر تصمیم بگیرد گزینهی «--انتخاب کن--» که در ابتدا نشان داده شده است را دوباره انتخاب کند، متن را از پاراگراف خالی میکند.
نکتهای در مورد اپراتورهای مقایسهای
عملگرهای مقایسهای برای آزمایش شرایط درون عبارات شرطی ما استفاده میشوند. ما ابتدا در مقاله «ریاضیات پایه در جاوا اسکریپت - اعداد و عملگرها» به عملگرهای مقایسهای نگاهی انداختیم. انتخابهای ما عبارتند از:
- === و !== - بررسی میکنند که آیا یک مقدار با مقدار دیگر یکسان است یا خیر.
- < و > - بررسی میکنند که آیا یک مقدار از مقدار دیگر کوچکتر یا بزرگتر است یا خیر.
- <= و >= - بررسی میکنند که آیا یک مقدار کوچکتر یا مساوی یا بزرگتر یا مساوی مقدار دیگری است یا خیر.
ما میخواستیم به طور ویژه به آزمایش مقادیر بولی (true/false) و یک الگوی رایج که بارها و بارها با آن مواجه خواهید شد، اشاره کنیم. هر مقداری که false، undefined، null، 0، NaN یا رشته خالی ('') نباشد، در واقع هنگام آزمایش به عنوان یک عبارت شرطی مقدار true را برمیگرداند، بنابراین میتوانید از نام یک متغیر به تنهایی برای آزمایش اینکه آیا درست است یا حتی وجود دارد (یعنی undefined نیست) استفاده کنید. به عنوان مثال:
و با بازگشت به مثال قبلیمان در مورد انجام کارهای روزمره توسط کودک برای والدینش، میتوانید آن را به این شکل بنویسید:
کاملاً اشکالی ندارد که یک دستور را درون یک دستور دیگر قرار دهیم - به صورت تو در تو. برای مثال، میتوانیم برنامه پیشبینی آب و هوای خود را بهروزرسانی کنیم تا بسته به دما، مجموعهای از انتخابهای دیگر را نشان دهیم:
اگرچه همه کدها با هم کار میکنند، اما هر دستور کاملاً مستقل از دیگری عمل میکند.
عملگرهای منطقی: AND، OR و NOT
اگر میخواهید چندین شرط را بدون نوشتن دستورات تو در تو بررسی کنید، عملگرهای منطقی میتوانند به شما کمک کنند. وقتی در شرطها استفاده میشوند، دو عملگر اول موارد زیر را انجام میدهند:
- && — AND; به شما امکان میدهد دو یا چند عبارت را به هم زنجیر کنید تا همه آنها به صورت جداگانه به true ارزیابی شوند تا کل عبارت مقدار true را برگرداند.
- || — OR; به شما امکان میدهد دو یا چند عبارت را به هم زنجیر کنید تا یک یا چند مورد از آنها به صورت جداگانه به true ارزیابی شوند تا کل عبارت مقدار true را برگرداند.
برای ارائه یک مثال AND، قطعه مثال قبلی را میتوان به این صورت بازنویسی کرد:
بنابراین برای مثال، اولین بلوک کد فقط در صورتی اجرا میشود که و مقدار true را برگردانند.
بیایید به یک مثال سریع OR نگاهی بیندازیم:
آخرین نوع عملگر منطقی، NOT، که توسط عملگر ! بیان میشود، میتواند برای منفی کردن یک عبارت استفاده شود. بیایید آن را با OR در مثال بالا ترکیب کنیم:
در این قطعه کد، اگر عبارت OR مقدار true را برگرداند، عملگر NOT آن را منفی میکند تا کل عبارت false را برگرداند.
شما میتوانید هر تعداد عبارت منطقی که میخواهید را با هر ساختاری با هم ترکیب کنید. مثال زیر کد داخل آن را فقط در صورتی اجرا میکند که هر دو عبارت OR مقدار true را برگردانند، به این معنی که کل عبارت AND مقدار true را برمیگرداند:
یک اشتباه رایج هنگام استفاده از عملگر منطقی OR در عبارات شرطی این است که سعی کنید متغیری را که مقدار آن را بررسی میکنید، یک بار مشخص کنید و سپس لیستی از مقادیری که میتوانند مقدار true را برگردانند، ارائه دهید و آنها را با اپراتورهای (OR) از هم جدا کنید. برای مثال:
در این حالت، شرط داخل همیشه درست ارزیابی میشود زیرا 7 (یا هر مقدار غیر صفر دیگری) همیشه درست ارزیابی میشود. این شرط در واقع میگوید "اگر x برابر با 5 باشد، یا 7 درست است - که همیشه همینطور است". منطقاً این چیزی نیست که ما میخواهیم! برای اینکه این کار عملی شود، باید یک بررسی کامل در هر دو طرف هر عملگر OR مشخص کنید:
دستورات کار فعال کردن کد شرطی را به خوبی انجام میدهند، اما بدون معایب هم نیستند. آنها عمدتاً برای مواردی مناسب هستند که چند انتخاب دارید و هر کدام نیاز به مقدار معقولی کد برای اجرا دارند و/یا شرایط پیچیده هستند (مثلاً چندین عملگر منطقی). برای مواردی که فقط میخواهید یک متغیر را روی یک مقدار خاص تنظیم کنید یا یک دستور خاص را بسته به یک شرط چاپ کنید، این سینتکس میتواند کمی دست و پا گیر باشد، به خصوص اگر تعداد زیادی انتخاب داشته باشید.
در چنین حالتی، دستورات switch دوست شما هستند - آنها یک عبارت/مقدار واحد را به عنوان ورودی میگیرند و سپس چندین انتخاب را بررسی میکنند تا گزینهای را پیدا کنند که با آن مقدار مطابقت داشته باشد و کد مربوطه را که همراه آن است اجرا میکنند. در اینجا چند شبه کد دیگر برای ایده گرفتن شما آورده شده است:
در اینجا داریم:
کلمه کلیدی switch، و به دنبال آن مجموعهای از پرانتزها.
یک عبارت یا مقدار درون پرانتز.
کلمه کلیدی case، و به دنبال آن یک انتخاب که عبارت/مقدار میتواند باشد، و به دنبال آن یک دونقطه.
کدی که در صورت مطابقت انتخاب با عبارت اجرا میشود.
یک دستور break، و به دنبال آن یک نقطه ویرگول. اگر انتخاب قبلی با عبارت/مقدار مطابقت داشته باشد، مرورگر اجرای بلوک کد را در اینجا متوقف میکند و به هر کدی که در زیر دستور switch ظاهر میشود، ادامه میدهد.
هر تعداد حالت دیگر (قلمهای ۳ تا ۵) که دوست دارید.
کلمه کلیدی default، و به دنبال آن دقیقاً همان الگوی کد یکی از حالتها (قلمهای ۳ تا ۵) میآید، با این تفاوت که default بعد از آن انتخابی ندارد و شما به دستور break نیازی ندارید زیرا به هر حال چیزی برای اجرا بعد از این در بلوک وجود ندارد. این گزینه پیشفرض است که اگر هیچ یک از انتخابها مطابقت نداشته باشند، اجرا میشود.
لازم نیست بخش default را وارد کنید - اگر هیچ احتمالی وجود ندارد که عبارت با یک مقدار ناشناخته برابر شود، میتوانید با خیال راحت آن را حذف کنید. با این حال، اگر احتمال این وجود دارد، باید آن را برای رسیدگی به موارد ناشناخته لحاظ کنید.
بیایید نگاهی به یک مثال واقعی بیندازیم - ما برنامه پیشبینی آب و هوای خود را بازنویسی میکنیم تا به جای آن از یک دستور switch استفاده کنیم:
قبل از اینکه با چند مثال شروع کنیم، میخواهیم یک بخش پایانی از سینتکس را به شما معرفی کنیم. عملگر سهتایی یا شرطی بخش کوچکی از سینتکس است که یک شرط را بررسی میکند و در صورت درست بودن یک مقدار/عبارت و در صورت نادرست بودن مقدار دیگری را برمیگرداند. این میتواند در برخی موقعیتها مفید باشد و اگر دو انتخاب داشته باشید که از طریق یک شرط درست/نادرست انتخاب میشوند، میتواند کد بسیار کمتری نسبت به بلوک اشغال کند. شبهکد به این شکل است:
بنابراین بیایید به یک مثال نگاه کنیم:
در اینجا ما متغیری به نام isBirthday داریم - اگر این مقدار درست باشد، به مهمان خود پیام تبریک تولد میدهیم؛ در غیر این صورت، تبریک روزانه استاندارد را به او میدهیم.
عملگر سهتایی فقط برای تنظیم مقادیر متغیرها نیست؛ شما میتوانید توابع یا خطوط کد را نیز اجرا کنید - هر چیزی که دوست دارید. مثال زنده زیر یک انتخابگر قالب ساده را نشان میدهد که در آن استایلبندی سایت با استفاده از یک عملگر سهتایی اعمال میشود.
در اینجا ما یک عنصر برای انتخاب تم (مشکی یا سفید) داریم، به علاوه یک h1 ساده برای نمایش عنوان وبسایت. همچنین تابعی به نام داریم که دو رنگ را به عنوان پارامتر (ورودی) دریافت میکند. رنگ پسزمینه وبسایت روی اولین رنگ ارائه شده و رنگ متن آن روی دومین رنگ ارائه شده تنظیم میشود.
در نهایت، یک شنونده رویداد onchange نیز داریم که برای اجرای تابعی حاوی یک عملگر سهتایی عمل میکند. این تابع با یک شرط آزمایشی شروع میشود - . اگر این مقدار true را برگرداند، تابع را با پارامترهای سیاه و سفید اجرا میکنیم، به این معنی که در نهایت رنگ پسزمینه سیاه و رنگ متن سفید خواهد بود. اگر false را برگرداند، تابع را با پارامترهای سفید و سیاه اجرا میکنیم، به این معنی که رنگهای سایت معکوس میشوند.
