فرادرسدستورات شرطی در جاوا اسکریپت – آموزش به زبان ساده با مثال
در برنامه نویسی، اغلب موقعیتهایی پیش می‌آید که نیاز به اجرای کدهای خاصی بر اساس ورودی کاربر یا شرایط خاص وجود دارد. به عنوان مثال، در بیشتر فرم‌های موجود در در صفحات وب تنها زمانی می‌توانیم آن فرم را ارسال کنیم که تمام فیلدهای ضروری آن فرم را پرکرده باشیم و در غیر این صورت فرم ارسال نخواهد شد. برای رسیدگی به چنین سناریوهایی، از عبارات یا دستورات شرطی استفاده میشود که اجزای اساسی موجود در همه زبان‌های برنامه نویسی هستند. در مطلب پیشِ رو از مجله فرادرس این بار قرار است که دستورات شرطی در جاوا اسکریپت را با رویکردهایی کاملاً عملی مورد بررسی و بازبینی قرار دهیم. در این مطلب، ابتدا دستورات شرطی را معرفی میکنیم و سپس، دستور if، دستور Else و دستور شرطی Else if را بررسی میکنیم. در انتهای این مطلب نیز عملگرهای سه‌گانه در جاوا اسکریپت را توضیح می‌دهیم. پس اگر می‌خواید به طور کامل با دستورات شرطی در جاوا اسکریپت آشنا شوید، این مطلب را تا انتها مطالعه کنید چراکه در پایان مطالعه این مطلب کاربران درک نسبتاً درستی از عبارات شرطی در زبان برنامه نویسی جاوا اسکریپت خواهند داشت.
دستورات شرطی در جاوا اسکریپت
دستورات شرطی در جاوا اسکریپت برای انجام اقداماتی خاص بر اساس درست یا نادرست بودن شرطی خاص استفاده میشود. آن‌ها اجزای تصمیم‌گیرنده کدهای کاربران هستند.
در فهرست زیر چند نمونه از دستورات شرطی در جاوا اسکریپت آورده شده است:
- مکان جغرافیایی کاربر تعیین و زبان مناسب بر اساس کشور او نمایش داده شود. برای مثال اگر مکان کاربر ایران باشد، زبان او فارسی انتخاب شود.
- زمانی که کاربر روی دکمه ارسال کلیک میکند، فرمی ارسال شود یا اخطارهایی را در کنار فیلدهای الزامی که پر نشده‌اند، نشان داده شود.
- فرم رزرو هتل نمایش داده شود مگر اینکه هتل از قبل به طور کامل رزرو شده باشد.
عبارات شرطی را به عنوان منطق یا بخش تصمیمگیری یک برنامه کامپیوتری یا فلوچارت باید در نظر گرفت. در ادامه این آموزش، عبارات شرطی در زبان جاوا اسکریپت را بررسی کرده که کلمات کلیدی مانند if ، else و else if را شامل میشود. همچنین در آخرسر عملگرهای سه‌تایی را به عنوان بخشی از این فرآیند یادگیری معرفی خواهیم کرد.
دستور شرطی IF در جاوا اسکریپت چیست؟
یکی از ابزارهای اساسی در برنامه نویسی برای تصمیمگیری، عبارت IF است. این عبارت درست یا نادرست بودن شرطی معین را ارزیابی میکند و بلوک کد خاص را تنها در صورتی اجرا خواهد کرد که شرط درست باشد. اگر شرط نادرست باشد، برنامه کد مربوطه را رد کرده و به قسمت بعدی میرود. در اینجا سینتکس از دستور شرطی if در جاوا اسکریپت آورده شده است:
1if (condition) {
2 // code to run if the condition is true
3}در ساختار شرطی فوق، شرط در داخل پرانتز قرار می‌گیرد و کدی که باید اجرا شود در {} قرار خواهد گرفت. برای درک بهتر این موضوع مثالی می‌زنیم. تصور بر این است اپلیکیشن خریدی وجود دارد و کاربری میخواهد به صورت آنلاین با استفاده از این اپلیکیشن کالایی بخرد. این برنامه بررسی میکند که آیا موجودی حساب کاربر برای خرید کافی است یا خیر که قطعه کد انجام این کار به صورت زیر است:
1// Set balance and price of the item
2const balance = 500;
3const jeansPrice = 40;
4
5// Check if there are enough funds to purchase the item
6if (jeansPrice <= balance) {
7 console.log("You have enough money to purchase the item!");
8}در مثال بالا، موجودی ۵۰۰ است و کاربر میخواهد شلوار جین را به قیمت ۴۰ بخرد. شرط « jeansPrice <= balance » درست ارزیابی میشود، بنابراین کد داخل {} اجرا شده و پیام زیر در کنسول نمایش داده میشود.
You have enough money to purchase the item!
حال، سناریوی مدنظر است که در آن کاربر میخواهد کالای گران‌تری بخرد که قطعه کد انجام این کار به صورت زیر است:
1// Set balance and price of the item
2const balance = 500;
3const phonePrice = 600;
4
5// Check if there are enough funds to purchase the item
6if (phonePrice <= balance) {
7 console.log("You have enough money to purchase the item!");
8}در این حالت، شرط « phonePrice <= balance » به نادرست ارزیابی میشود، بنابراین کد داخل دستور if نادیده گرفته شده و خروجی تولید نمی‌کند. در اصل، دستور if به عنوان نوعی دستور شرطی در جاوا اسکریپت به برنامه کاربر اجازه میدهد تا بر اساس شرایط تصمیمگیری کرده و تعیین کند کدام کد اجرا شود و اجرای کدام کد صورت نگیرد.
دستور شرطی Else در جاوا اسکریپت چیست؟
در برنامه نویسی، هنگام استفاده از دستورات IF تنها در صورتی کد اجرا میشود که شرطی خاص درست باشد. با این حال، موقعیتهایی وجود دارد که کاربر میخواهد در صورت برآورده نشدن شرایط، اتفاق متفاوتی رخ دهد. اینجاست که عبارت else به عنوان نوعی دستور شرطی در جاوا اسکریپت وارد عمل میشود.
دستور Else برای تعریف کدی استفاده میشود که در صورت نادرست بودن شرط اصلی در دستور IF اجرا میشود. ساختار اصلی عبارت if...else به صورت زیر است:
1if (condition) {
2 // code to execute if the condition is true
3} else {
4 // code to execute if the condition is false
5}بیایید دوباره به مثال برنامه خرید بازگردیم تا بفهمیم عبارت else چگونه کار میکند. فرض بر این است کاربری میخواهد گوشی موبایل بخرد اما موجودی حسابش کافی نیست. قطعه کد این مثال به صورت زیر است:
1// Set balance and price of the item
2const balance = 500;
3const phonePrice = 600;
4
5// Check if there are enough funds to purchase the item
6if (phonePrice <= balance) {
7 console.log("You have enough money to purchase the item!");
8} else {
9 console.log("You do not have enough money in your account to purchase this item.");
10}در این حالت، از آنجا که شرط phonePrice <= balance نادرست است، کد داخل بلوک else اجرا میشود و پیام زیر در کنسول ثبت خواهد شد:
You do not have enough money in your account to purchase this item
عبارت else برای ارائه بازخورد یا راهنمایی کاربران در مورد اقدامات بعدی ارزشمند است. این دستور شرطی در جاوا اسکریپت هر دو سناریوی زمانی که شرط درست و زمانی که نادرست است را پوشش میدهد. به طور معمول، گزاره‌های if...else رایج‌تر از گزاره‌های if هستند.
دستور شرطی Else if در جاوا اسکریپت چیست؟
در برنامه نویسی، زمانی که با شرایط سروکار داریم، اغلب از دستور IF و Else برای اجرای کد بر اساس درست یا نادرست بودن شرط خاص استفاده میکنیم. با این حال، شرایطی وجود دارد که باید شرایط و پیامدهای متعدد در نظر گرفته شوند. در چنین مواردی، عبارت Else If مفید واقع خواهد شد. ساختار اصلی دستور IF...Else IF به کاربر امکان میدهد شرایط متعدد را ارزیابی کرده و بلوکهای کد مربوطه را اجرا کند.
سینتکس این دستور شرطی Else if در Javascript آن به صورت زیر است:
1if (condition a) {
2 // code that will execute if condition a is true
3} else if (condition b) {
4 // code that will execute if condition b is true
5} else if (condition c) {
6 // code that will execute if condition c is true
7} else {
8 // code that will execute if all above conditions are false
9}این دستور شرطی در جاوا اسکریپت هر شرط را به ترتیب امتحان میکند و اگر هیچ‌کدام از آن‌ها درست نباشد، به بلوک else بازمی‌گردد. بیایید مثالی را در نظر بگیریم که در آن می‌خواهیم درجات نمراه را بر اساس نمره دانش‌آموز از ۱۰۰ تعیین کنیم که این درجه بندی به صورت زیر است:
- نمره ۹۰ به بالا A است.
- نمره ۸۰ تا ۸۹، B است.
- درجه ۷۰ تا ۷۹، C است.
- نمره ۶۰ تا ۶۹، درجه D است.
- درجه ۵۹ یا پایین‌تر، F است.
قطعه کد این مثال به صورت زیر است و در آن هدف بازیابی نمره B خواهد بود:
1// Set the current grade of the student
2let grade = 87;
3
4// Check if grade is an A, B, C, D, or F
5if (grade >= 90) {
6 console.log("A");
7} else if (grade >= 80) {
8 console.log("B");
9} else if (grade >= 70) {
10 console.log("C");
11} else if (grade >= 60) {
12 console.log("D");
13} else {
14 console.log("F");
15}در مثال فوق، برنامه ابتدا بالاترین نمره (۹۰ و بالاتر) را بررسی میکند، سپس به‌تدریج نمرات پایین‌تر را به ترتیب نزولی در نظر می‌گیرد. نمره ۸۷ شرط B را برآورده میکند، بنابراین کد بررسی بیشتر را متوقف کرده و B را در خروجی نمایش میدهد. دستور else if برای مدیریت شرایط چندگانه مفید است و راهی برای اجرای کد خاص بر اساس اولین شرط واقعی که با آن مواجه می‌شویم فراهم میکند.
عملگرهای سه گانه در جاوا اسکریپت
در برنامه نویسی، عملگر سه‌تایی که به عنوان عملگر شرطی نیز شناخته میشود، روشی مختصر برای نمایش عبارت if...else ارائه میدهد. همان‌طور که در ساختار زیر نشان داده‌شده است از علامت سؤال ( ? ) و دو نقطه ( : ) استفاده میکند:
1(condition) ? expression on true : expression on falseدر ساختار فوق، شرط اول و بعد از آن علامت سؤال ( ? ) می‌آید. عبارت بلافاصله بعد از علامت سؤال زمانی اجرا میشود که شرط درست باشد و عبارت بعد از دو نقطه زمانی که شرط نادرست است اجرا میشود. این روش ساختار فشرده‌تری در مقایسه با عبارت if...else است. بیایید مثالی بزنیم تا بفهمیم عملگر سه‌تایی چگونه کار میکند. فرض کنید می‌خواهیم بررسی کنیم که کاربر ۲۱ سال یا بیشتر دارد و پیام مربوطه را در کنسول چاپ کنیم. برای این هدف باید قطعه کد زیر را بنویسیم:
1// Set age of user
2let age = 20;
3
4// Place result of ternary operation in a variable
5const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";
6
7// Print output
8oldEnough;در مثال بالا از مجله فرادرس، از آنجا که سن کاربر کمتر از ۲۱ سال است، پیام You may not enter در کنسول نمایش داده میشود. عملگر سه‌تایی ابزار مفیدی برای نوشتن کد مختصرتر است، به خصوص در مواردی که عبارات if...else تودرتو باشند.
سخن پایانی
در برنامه نویسی، عبارات شرطی برای کنترل جریان برنامه‌ها بسیار مهم هستند و به ما کمک می‌کنند تا تصمیم بگیریم که بر اساس شرایط خاص چه خروجی تولید کنیم. این عبارات عناصر اساسی هستند که تقریباً در تمام زبان‌های برنامه نویسی وجود دارند.
در مطلب فوق از مجله فرادرس دستورات شرطی در جاوا اسکریپت و استفاده از کلمات کلیدی مانند if ، else و else if مورد بررسی قرار گرفتند. همچنین مفاهیمی مانند عبارات تودرتو، که در آن دستوری در داخل دیگری قرار می‌گیرد، پوشش داده شد و به دنبال آن عملگر سه‌تایی به عنوان روشی مختصر برای بیان عملیات شرطی معرفی شد. درک این مفاهیم برای برنامه نویسی از مفاهیم پایه و اساسی است.
