آگهی
article

دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)

javascript-conditional-statements

در علم کامپیوتر و دنیای برنامه نویسی دستورات شرطی (Conditional Statements) عباراتی آشنا هستند که تقریبا در هر زبانی با آنها سر و کار خواهیم داشت، دستورات شرطی به بیان ساده برای تعیین مسیر اجرا و پردازش کدها در دو راهی های برنامه ها استفاده می شوند که منظور از دو راهی true یا false بودن رابطه است، به فرض در محاوره می گوییم اگر X بزرگتر از Y باشد (نتیجه مقایسه true باشد) پلن A اعمال می شود در غیر این صورت (نتیجه مقایسه false باشد) پلن B اعمال خواهد شد و در واقع با بررسی هر مقایسه عملیات در نظر گرفته شده برای آن را لغو یا اجرا می کنیم، در دنیای برنامه نویسی نیز دستورات شرطی به این منظور تعریف شده اند تا بتوانیم عبارات "اگر"، "در غیر این صورت" و "در غیر این صورت اگر" را به زبان کدها ترجمه کنیم، پیش از این گفتیم که شیوه نگارش (Syntax) زبان های برنامه نویسی چیزی نیست جزء روشی که بتوانیم ایده های ذهنی خود را به کمک آنها به دستورات قابل فهم برای ماشین و مفسر آن زبان تبدیل کنیم و دستورات شرطی یکی از ابزارها و قابلیت هایی است که ما را در این راه یاری می دهند.

دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)


همان طور که در آموزش های قبل گفتیم عملگرهای محاسبه، مقایسه و استدلال منطقی در جاوا اسکریپت بدون وجود دستورات شرطی عملا کاربردی ندارند و در کنار این دستورات است که فرآیند مقایسه کامل می شود، دستورات شرطی شامل سه عبارت if (اگر)، else (در غیر این صورت) و else if (درغیر این صورت اگر) است، برای درک این دستورات به همان مثال آموزش قبل و محاسبه امتیازات مشتریان فروشگاه آنلاین رجوع می کنیم، فرض کنیم می خواهیم مقایسه کنیم که امتیاز کاربر از 12 کوچکتر باشد، در این صورت به زبان ساده خواهیم نوشت "(اگر امتیاز کاربر کمتر از 12 بود) {این فرآیند را انجام می دهیم}" که نمونه کد آن به شکل زیر خواهد بود.
if(point < 12){
}
اگر نتیجه این رابطه صحیح (true) باشد محتوای داخل {} اجرا خواهد شد (این محتوا با توجه به هدف و نیاز ما از برنامه نویسی مشخص می شود)، حال فرض کنیم نتیجه این رابطه نادرست (false) باشد یعنی امتیاز کاربر بیشتر از 12 یا مساوی با آن است، در این حالت دو راه برای توسعه کد وجود دارد، استفاده از else (در غیر این صورت) یا else if (درغیر این صورت اگر)، اگر از else استفاده کنیم نقطه پایانی مقایسه را تعیین کرده ایم و دیگر نمی توانیم آن را توسعه دهیم "(اگر امتیاز کاربر کمتر از 12 بود) {این فرآیند را انجام می دهیم} (در غیر این صورت) {این فرآیند را انجام می دهیم و تمام}".
if(point < 12){
} else{
}
اما else if مشابه if عمل می کند و می توانیم به هر تعداد مورد نیاز مقایسه را توسعه دهیم "(اگر امتیاز کاربر کمتر از 12 بود) {این فرآیند را انجام می دهیم} (در غیر این صورت اگر امتیاز کاربر کمتر از 14 بود) {این فرآیند را انجام می دهیم} (در غیر این صورت اگر امتیاز کاربر بیشتر از 16 بود) {این فرآیند را انجام می دهیم} (در غیر این صورت) {این فرآیند را انجام می دهیم و تمام}".
if(point < 12){
} else if(point < 14){
} else if(point > 16){
} else{
}
تحلیل نمونه کد بالا بسیار ساده است، در شرط if اول بررسی می کنیم اگر مقدار متغیر point کوچکتر از 12 باشد قسمت داخل {} آن اجرا و فرآیند مقایسه به پایان می رسد، اما اگر اینگونه نبود و به فرض point برابر 13 باشد else if اول اجرا و اگر point برابر 17 باشد قاعدتا else if دوم اجرا خواهد شد، بر همین اساس اگر point برابر 15 باشد قسمت else پایانی اجرا می شود چون هیچ کدام از مقایسه های قبلی true نیستند و else پایانی به عنوان حالت پیش فرض اجرا می شود، در نمونه کد زیر از شرط if و else جهت مقایسه امتیاز کاربر فرضی استفاده کرده ایم که با اجرای کدها و تغییر مقدار متغیر point شیوه مقایسه، منطق و شرط در جاوا اسکریپت به خوبی قابل درک خواهد بود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | مقایسه با دستورات شرطی if و else در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
.rtl {
    direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<noscript>جاوا اسکریپت در مرورگر شما پشتیبانی نمی شود یا غیرفعال است!</noscript>
<script>
var point = 10;
var num = 12;

if(point < num){
    document.write('امتیاز کاربر کمتر از ' + num + ' است!');
} else{
    document.write('امتیاز کاربر بیشتر از ' + num + ' یا مساوی با ' + num + ' است!');
}
</script>
<hr>
<script>
var point = 20;
var num = 18;

if(point < num){
    document.write('امتیاز کاربر کمتر از ' + num + ' است!');
} else{
    document.write('امتیاز کاربر بیشتر از ' + num + ' یا مساوی با ' + num + ' است!');
}
</script>
<hr>
<script>
var point = 15;
var num = 15;

if(point < num){
    document.write('امتیاز کاربر کمتر از ' + num + ' است!');
} else{
    document.write('امتیاز کاربر بیشتر از ' + num + ' یا مساوی با ' + num + ' است!');
}
</script>
<hr>
علامت + در جاوا اسکریپت هم مقدار عددی (Int) و هم مقدار رشته ای (String) را جمع می کند! اگر دو طرف رابطه هر دو عدد باشند حاصل یک عدد خواهد بود، اما اگر یکی از طرفین یا هر دو طرف به صورت رشته باشند، حاصل یک مقدار رشته ای خواهد بود.
</div>
</body>
</html>
پیش نمایش
برای درک بهتر نحوه عملکرد دستورات شرطی در جاوا اسکریپت، می توانیم کد بالا را در سیستم خود در یک فایل با فرمت html ذخیره، مقادیر متغیرها را به نحو دلخواه تغییر و نتیجه هر تغییر را در مرورگر ببینیم.
در نمونه کد بالا صرفا از دستور شرطی if و else استفاده شده است، در برنامه نویسی معمولا فرآیندها پیچیده تر از این هستند و ناگزیر باید از eles if نیز استفاده کنیم، مثال زیر شکل توسعه یافته نمونه کد بالا است که در صورت تسلط بر دستور if و else می توانیم این کد را نیز جهت درک بهتر بررسی و موشکافی کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | مقایسه با دستورات شرطی if، else و else if در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
.rtl {
    direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<noscript>جاوا اسکریپت در مرورگر شما پشتیبانی نمی شود یا غیرفعال است!</noscript>
<script>
var point = 14;
var num = 12;

if(point < num){
    document.write('امتیاز کاربر کمتر از ' + num + ' است!');
} else if(point == 12){
    document.write('امتیاز کاربر 12 است!');
} else if(point > 12 && point < 15){
    document.write('امتیاز کاربر بین 12 تا 15  است!');
} else if(point == 15 || point == 16){
    document.write('امتیاز کاربر 15 یا 16  است!');
} else{
    document.write('امتیاز کاربر بیشتر از 16  است!');
}
</script>
<hr>
به یاد داشته باشیم جاوا اسکریپت در مرورگر کاربران اجرا می شود و سورس کدها در دسترس هستند، لذا سهوا یا عمدا همواره امکان تغییر نحوه عملکرد آنها وجود دارد، به همین دلیل نمی توانیم به عنوان یک روش مطمئن برای اعتبارسنجی روی آن حساب کنیم، برای اینگونه موارد باید از زبان های سمت سرور مانند PHP استفاده کنیم، در عمل معمولا اعتبارسنجی های اولیه توسط جاوا اسکریپت انجام شده و در نهایت پس از ارسال اطلاعات به سرور این PHP است که اعتبارسنجی اصلی و نهایی را انجام می دهد، به این صورت هم رابط کاربری بهینه و هم کدهای مطمئن با عملکرد حساب شده خواهیم داشت.
</div>
</body>
</html>
پیش نمایش
نکته: دقت کنیم شیوه نگارش (Syntax) هر زبانی مخصوص به خودش است و اگر این اصول را رعایت نکنیم در اجرای کدها با خطا مواجه خواهیم شد، به طور مثال دستور else if در جاوا اسکریپت با یک فاصله به کار می رود اما در PHP به صورت elseif نگارش می شود.

مختصرنویسی با عملگرهای سه گانه (Ternary Operators) در جاوا اسکریپت


در برنامه نویسی پروژه های کاربردی به دلایل مختلف ممکن است نیاز به مختصرنویسی دستورات شرطی else if ،if و else باشد که در پاسخ به این نیاز در اغلب زبان ها این هدف با عملگرهای سه گانه یا Ternary Operators تحقق می یابد، منظور از عملگرهای سه گانه ترکیب مقایسه با کاراکترهای ? و : است، در شیوه مختصرنویسی علامت ? جایگزین if و علامت : جایگزین else می شود، به طور مثال اگر دستور شرطی در حالت عادی به شکل زیر باشد:
<script>
var point = 14;
var num = 12;
if(point < num) {
    alert('if');
} else{
    alert('else');
}
</script>
شیوه مختصرنویسی آن به صورت زیر خواهد بود:
<script>
var point = 14;
var num = 12;
(point < num) ? alert('if') : alert('else');
</script>
با ترکیب و توسعه این روش حتی می توانیم دستور شرطی else if را نیز به صورت مختصرنویسی بنویسیم، به طور مثال:
<script>
var point = 14;
var num = 14;
(point < num) ? alert('if') : (point <= num) ? alert('else if') : alert('else');
</script>
استفاده از شیوه مختصر نویسی در برنامه نویسی دلخواه است و معمولا برای نوشتن شرط های ساده از آن استفاده می کنیم.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
commentنظرات (۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: بهارناز
زمان: ۰۳:۰۸:۰۲ - تاریخ: ۱۳۹۷/۰۲/۰۷
سلام. اگر از نظر اعتبار سنجی زیاد نمیشه روی جاوا اسکریپت حساب کرد. پس در کجاها ازش استفاده کنیم ؟ اعتبار سنجی اولیه یعنی چی ؟ پیشاپیش ممنونم از پاسخگوییتون
پاسخ: 
کدهای جاوا اسکریپت در مرورگر کاربران اجرا و لذا در دسترس هستند و همواره امکان تغییر آنها وجود دارد، به همین دلیل برای اعتبارسنجی نهایی و مطمئن مناسب نیستند، اما منظور از اعتبارسنجی اولیه این است که قبل از ارسال فرم به سرور پیش آگاهی به کاربران بدهیم، به طور مثال اگر کاربر یک گزینه را به اشتباه انتخاب یا ایمیل خود را با فرمت صحیح وارد نکرد در همان قسمت اطلاع رسانی صورت گیرد، این کار موجب بهبود رابط کاربری و ایجاد حس بهتر از کار با محیط برنامه می شود، در نهایت برای حفظ امنیت اعتبارسنجی نهایی در سرور و با برنامه نویسی سمت سرور که سورس ها دور از دسترس کاربران هست انجام می شود.
نویسنده: حسام
زمان: ۱۴:۴۹:۳۲ - تاریخ: ۱۳۹۸/۰۴/۱۳
سلام خسته نباشید من تابع زیر رو نوشتم اما درست کار نمیکنه خیلی سعی کردم اما درست نشد ممنون میشم راهنماییم کنید.
http://arasadr.ir/result.js
if اولش کار میکنه ولی وقتی به تکس باکس ها مقدار داده میشه مثلا 1 + 1 دیگه تغییر نمیده.
پاسخ: 
برای تست تابع به بخش کاربری صفحه و فیلدهایی که در سوال اشاره کرده اید باید دسترسی داشت، در هر صورت دو نکته در این تابع می تواند (احتمالا) علت مشکل باشد:
- مقدار متغیر i از خارج تابع و به نظر در حلقه دریافت می شود که می تواند مقادیری نامعتبر باشد!
- متد innerHTML در تابع استفاده شده که برای فیلدهای input عمل نمی کند و باید از متد value استفاده شود.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





9 × 5
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴

form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱

form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱

form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷

form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷

form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶

form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵

form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴

form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴

form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳

form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
form احسان
در:
سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...
۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷
form علی
در:
ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...
۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷
form محمد
در:
سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...
۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵
form محمد
در:
با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...
۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵
form ehsan
در:
سلام و خسته نباشید. من قالب جدید تهیه کردم ولی ایکن هاش کار نمیکنن. اگه وبلاگم نگا کنین متوجه میشین. ایکن شبکه های اجتماعی...
۱۷:۱۹:۴۰ ۱۳۹۹/۰۳/۲۴
در انتظار بررسی: ۰