تصمیم گیری: تسلط بر شرایط در جاوا اسکریپت

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

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

بیانیه if

ساده ترین شکل شرطی عبارت if است. اگر شرط مشخص شده درست باشد، یک بلوک کد را اجرا می کند.

if / else if / else Flowage >= 18?YesNoAccess grantedage >= 65?YesNoSenior discountAccess grantedifelse ifelse

مثال: فرض کنید می‌خواهیم بررسی کنیم که آیا سن یک کاربر به اندازه کافی برای دسترسی به بخش خاصی از وب‌سایت کافی است یا خیر.

let age = 20; if (age >= 18) {   console.log("Access granted."); }

بیانیه دیگر- else

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

مثال: درپی مثال قبلی برای رسیدگی به کاربران زیر سن قانونی:

if (age >= 18) {   console.log("Access granted."); } else {   console.log("Access denied. You must be at least 18 years old."); }

بیانیه else if

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

مثال: اضافه کردن یک شرط تخفیف بر اساس سن:

if (age < 18) {   console.log("Access denied. You must be at least 18 years old."); } else if (age >= 65) {   console.log("Access granted. You're eligible for a senior citizen discount."); } else {   console.log("Access granted."); }

Nested if Statements

می‌توانید برای بررسی چند شرط، دستورهای if را درون یکدیگر قرار دهید.

مثال: بررسی شرایط چندگانه برای دسترسی یک رویداد خاص:

let age = 25; let specialPass = true; if (age >= 18) {   if (specialPass) {     console.log("Access to special event granted.");   } else {     console.log("Standard access granted.");   } } else {   console.log("Access denied."); }

اپراتورهای مقایسه – Comparison Operators

عملگرهای مقایسه در شرایط شرطی برای مقایسه مقادیر استفاده می شوند:

  • == برابری را بررسی می کند.
  • === برابری دقیق (مقدار و نوع) را بررسی می کند.
  • != و !== به ترتیب نابرابری و نابرابری شدید را بررسی می کنند.
  • > < >= <= مقادیر عددی را مقایسه می کنند.

عملگرهای منطقی – Logical Operators

عملگرهای منطقی اجازه ترکیب چند شرط را می دهند:

  • && (AND) درست بودن هر دو شرط را بررسی می کند.
  • || (OR) بررسی می کند که آیا حداقل یک شرط درست است یا خیر.
  • ! (NOT) یک شرط را نفی می کند.

مثال: بررسی شرایط متعدد برای ارتقاء:

let hasCoupon = true; let purchaseAmount = 50; if (hasCoupon && purchaseAmount > 40) {   console.log("You get a 10% discount!"); }

اپراتور سه گانه – The Ternary Operator

عملگر سه گانه مخفف عبارات if-else است که برای شرطی های ساده استفاده می شود.

مثال: اعطای تخفیف بر اساس سن:

let discount = (age >= 65) ? "10% discount" : "No discount"; console.log(discount);

بیانیه سوئیچ – The switch Statement

دستور switch برای بررسی های چندگانه در برابر یک مقدار واحد استفاده می شود. این جایگزینی برای چندین شرط if-else است.

switch Statement Flowswitch(userType)case "admin"case "editor"defaultbreakFull accessEdit accessBasic access⚠ break فراموش نکنید — در غیر این صورت case بعدی اجرا می‌شود!

مثال: تخصیص نقش ها بر اساس نوع کاربر:

let userType = "admin"; switch (userType) {   case "admin":     console.log("Full access");     break;   case "editor":     console.log("Access to editing");     break;   default:     console.log("Basic access"); }

عبارات شرطی برای ایجاد برنامه های کاربردی وب پویا و تعاملی ضروری هستند. با درک نحوه استفاده از if، else if، else، شرط های تودرتو، عملگر سه تایی و دستور switch، می توانید جریان برنامه های جاوا اسکریپت خود را به طور موثر کنترل کنید.

مثال عملی: تأیید سن برای دسترسی به وب سایت

بیایید مثال‌های ارائه‌شده را با ترکیب HTML و CSS برای ایجاد یک سناریوی کامل‌تر گسترش دهیم. وب سایتی را تصور کنید که برای دسترسی به محتوای خاصی نیاز به تأیید سن دارد. ما از یک فرم ساده HTML برای بدست آوردن سن کاربر استفاده می کنیم و سپس برای تعیین سطح دسترسی از شرطی های جاوا اسکریپت استفاده می کنیم.

HTML

ابتدا، اجازه دهید یک فرم HTML ایجاد کنیم که در آن کاربران می توانند سن خود را وارد کنند، و یک مکان نگهدار که در آن پیام نمایش داده می شود.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Age Verification</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <h1>Age Verification</h1>   <form id="ageForm">     <input type="number" id="ageInput" placeholder="Enter your age">     <button type="button" onclick="verifyAge()">Submit</button>   </form>   <div id="message"></div>   <script src="script.js"></script> </body> </html>

CSS (style.css)

حالا، بیایید یک استایل اولیه اضافه کنیم تا فرم کمی زیباتر به نظر برسد.

body {   font-family: Arial, sans-serif;   margin: 0;   padding: 20px;   background-color: #f4f4f4; } h1 { color: #333; } #ageForm { margin-top: 20px; } #ageInput {   padding: 10px;   margin-right: 10px;   border-radius: 5px;   border: 1px solid #ddd; } button {   padding: 10px;   border: none;   border-radius: 5px;   background-color: #007bff;   color: white;   cursor: pointer; } button:hover { opacity: 0.9; } #message { margin-top: 20px; }

جاوا اسکریپت (script.js)

در نهایت، بیایید منطق را با جاوا اسکریپت پیاده سازی کنیم. ما از عبارت if-else برای تعیین سطح دسترسی بر اساس سن وارد شده توسط کاربر استفاده خواهیم کرد.

// تابع verifyAge را برای بررسی سن کاربر تعریف کنید function verifyAge() {   let age = document.getElementById('ageInput').value;   let message = '';   if (age < 18) {     message = 'Access denied. You must be at least 18 years old.';   } else if (age >= 65) {     message = "Access granted. You're eligible for a senior citizen discount.";   } else {     message = 'Access granted.';   }   document.getElementById('message').innerText = message; }

توضیح

  • HTML: ساختار شامل یک فرم برای ورودی سن و یک div برای نمایش پیام ها است. با کلیک روی دکمه، تابع verifyAge تعریف شده در فایل جاوا اسکریپت را فراخوانی می کند.
  • CSS: سبک‌هایی اضافه می‌شوند تا ظاهر فرم و صفحه به طور کلی بهبود یابد. این شامل یک ظاهر طراحی شده برای بدنه، فرم، جعبه ورودی، دکمه و div پیام است.
  • جاوا اسکریپت: این اسکریپت سن وارد شده توسط کاربر را می گیرد و از منطق شرطی برای تعیین پیام برای نمایش استفاده می کند. سپس پیام در div با پیام شناسه نمایش داده می شود.

با ادغام HTML، CSS و جاوا اسکریپت، ما یک سیستم تأیید سن ساده و در عین حال تعاملی ایجاد کرده ایم. کاربران می توانند سن خود را وارد کنند و بسته به مقدار، پیام مربوطه در مورد سطح دسترسی آنها نمایش داده می شود.

آزمون / Quiz

سوال ۱: تفاوت == و === چیست؟ +
هیچ تفاوتی ندارند
✅ === هم مقدار و هم نوع را بررسی می‌کند، == فقط مقدار را
=== (strict equality) نوع و مقدار را مقایسه می‌کند، در حالی که == (loose equality) فقط مقدار را مقایسه می‌کند و نوع را تبدیل می‌کند.
== نوع را بررسی می‌کند، === مقدار را

سوال ۲: عملگر && چه زمانی true برمی‌گرداند؟ +
وقتی حداقل یکی از شرط‌ها true باشد
✅ وقتی هر دو شرط true باشند
&& (AND) فقط وقتی true برمی‌گرداند که هر دو شرط true باشند. || (OR) وقتی حداقل یکی true باشد true برمی‌گرداند.
وقتی هیچ شرطی true نباشد

سوال ۳: عملگر سه‌گانه (Ternary) چه کاری انجام می‌دهد؟ +
یک حلقه ایجاد می‌کند
✅ مخفف if-else برای شرطی‌های ساده
ساختار: condition ? valueIfTrue : valueIfFalse. یک جایگزین کوتاه برای if-else.
یک تابع تعریف می‌کند

نکات کلیدی / Key Takeaways

  • if ساده‌ترین شرط، else برای جایگزین، else if برای چند شرط.
  • عملگرهای مقایسه: == === != !== > < >= <= (همیشه === استفاده کنید)
  • عملگرهای منطقی: && (AND)، || (OR)، ! (NOT)
  • عملگر سه‌گانه: condition ? true : false — مخفف if-else
  • switch برای بررسی چندگانه در برابر یک مقدار — به break فراموش نکنید!
  • if‌های تودرتو برای بررسی شرایط چندگانه و پیچیده استفاده می‌شوند.