i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

مقایسه، منطق و شرط در جاوا اسکریپت (JavaScript)

javascript-if-else

پیش از این با زبان جاوا اسکریپت (JavaScript) و کارکردهای آن در صفحات وب تا حدودی آشنا شدیم، گفتیم که این زبان تنها در مرورگر کاربران تفسیر و اجرا می شود (سمت کاربر یا Client-side) و به نوعی در وب محدود به آن است، همچنین محاسبات و عملگرهای اصلی جاوا اسکریپت را شناختیم و با مثال هایی از کاربرد آنها تمرین کردیم، اکنون و در این مطلب می خواهیم کمی بیشتر وارد دنیای شیرین و بعضا کمی پیچیده کدنویسی با جاوا اسکریپت شویم و با هم به بررسی مقایسه (Comparison)، منطق (Logic) و شرط (Condition) که جزء همیشگی زبان های برنامه نویسی هستند بپردازیم، عملگرهای مقایسه، عملگرهای منطقی و دستورات شرطی قدرت تصمیم گیری و انتخاب را به برنامه های ما می دهند، لذا درک صحیح و تسلط بر این مباحث در طی ادامه مسیر آموزش جاوا اسکریپت اهمیت زیادی دارد.

مقایسه، منطق و شرط در یک نگاه


شاید در نگاه نخست، عناوین در زبان های برنامه نویسی کمی ترسناک و گیج کننده به نظر برسند و این امری طبیعی در روند یادگیری است، اما همانطور که قبلا گفتیم به طور کلی شیوه نگارش هر زبان برنامه نویسی (Syntax) چیزی نیست جزء مجموعه ای از قوانین تعریف شده توسط انسان برای القای تفکر خود به سیستم در چارچوبی مشخص، یعنی آنچه را که ما به عنوان ایده ذهنی به آن می اندیشیم و هدف نهایی از کدنویسی و طراحی یک برنامه نرم افزاری است را باید با آن قوانین و در بستر مفسر آن زبان برای سیستم ترجمه کنیم و به این ترتیب به مفسر زبان می گوییم که چه وظیفه ای دارد و کجا، کی چگونه باید رفتار کند و چه خروجی به کاربر بدهد، قاعدتا برای اینکه مفسر و موتور یک زبان برنامه نویسی چنین قابلیت هایی داشته باشد باید مقادیر مختلف را با هم مقایسه کند یا برای حالت های مختلف شرط تعریف نماید و در کل قدرت استدلال داشته باشد، به طور مثال فرض کنیم سن کاربری 12 سال است و در سایت خود محتوایی داریم که نمی خواهیم افراد پائین تر از سن خاصی آن را مشاهده کنند، در حالت کلی با داشتن اطلاعات کاربران برنامه ای خواهیم نوشت که به زبان ساده به سیستم بگوید اگر سن کاربر از 12 سال پائین تر بود، آن محتوا را بارگذاری نکند و پیام مخصوص رده سنی او را نمایش دهد، همانطور که می دانیم سیستم به زبان ما سخن نمی گوید بلکه باید کدهایی در بستر قواعد نگارشی (Syntax) آن تعریف کنیم تا قابلیت مقایسه و استدلال را داشته باشد، در جاوا اسکریپت بستر را مفسر یا به اصطلاح موتور این زبان تعیین می کند، کدهای جاوا اسکریپت توسط مفسری که در مرورگرها وجود دارد تبدیل به خروجی مورد نظر ما می شوند و لذا باید کدهایی بنویسیم که برای مفسر قابل فهم و پردازش باشند.
<script tytype="text/javascript">
var age = 14;
if(age > 12){
    alert('age > 12');
} else{
    alert('age <= 12');
}
</script>
در این نمونه کد عبارت if یک دستور شرطی، علامت > یک عملگر مقایسه ای و نتیجه مقایسه معمولا به صورت درست (true) یا نادرست (false) است که این فرآیند در کل منطق یا استدلال تعبیر می شود، در ادامه در خصوص این اصطلاحات بیشتر خواهیم گفت.

عملگرهای مقایسه در جاوا اسکریپت (JavaScript Comparisons Operators)


عملگرهای مقایسه (Comparisons Operators) شرایطی را مهیا می کنند که به کمک آنها می توانیم دو طرف یک رابطه را باهم مقایسه کنیم، به طور مثال متغیری فرضی به نام age با مقدار اولیه 12 تعریف کرده ایم، حال می خواهیم مقایسه کنیم آیا متغیر age مساوی 12 است؟ برای مقایسه برابری دو طرف در حالت معمول از علامت == استفاده می کنیم.
age == 12
آیا متغیر age مساوی 13 نیست؟ برای مقایسه برابر نبودن دو طرف از علامت =! استفاده می کنیم (دقت کنیم کاراکتر ! باید در سمت چپ باشد).
age != 13
مقایسه بالا حالت معمول و عمومی است اما در برنامه نویسی گاهی نیاز داریم که دقیقا مساوی بودن یا نبودن دو طرف رابطه را از هر لحاظ بررسی کنیم (مقایسه محض یا Strict)، بدین منظور به جای علامت == از === و به جای علامت =! از ==! استفاده می کنیم (دقت کنیم کاراکتر ! باید در سمت چپ باشد).
age === 12
بر اساس مقایسه === عبارت بالا درست (true) خواهد بود ولی مقایسه به صورت زیر نتیجه ی غلط (false) خواهد داشت چرا که مقدار 12 را به صورت عددی (Int) تعریف کرده ایم نه به صورت داده رشته ای (String) لذا نوع داده در مقایسه همسان نیست (Int و String در برنامه نویسی دو نوع متفاوت هستند).
age === "12"
که این مقایسه به دلیل اینکه 12 یک مقدار عددی است صحیح نخواهد بود (گفتیم که در جاوا اسکریپت هرگاه مقادیر داخل "" یا '' باشد از نوع رشته ای است)، مثال برای حالت نامساوی بودن محض:
age !== 12
به همین ترتیب برای بررسی کوچکتر بودن علامت > کاربرد دارد.
age < 12
معنی مقایسه بالا یعنی متغیر age کوچکتر از 12 باشد و برای بررسی بزرگتر بودن از علامت < استفاده می کنیم.
age > 12
برای مقایسه کوچکتر یا مساوی بودن علامت => کاربرد دارد (دقت کنیم کاراکتر > باید در سمت چپ باشد).
age <= 12
و برای مقایسه بزرگتر یا مساوی بودن از علامت =< استفاده می کنیم.
age >= 12
نکته: در ادامه خواهیم دید که عملگرهای مقایسه در کنار دستورات شرطی کامل می شوند و به خودی خود کاربرد خاصی ندارند!

عملگرهای منطقی در جاوا اسکریپت (JavaScript Logical Operators)


عملگرهای منطقی (Logical Operators) در جاوا اسکریپت مانند سایر زبان های برنامه نویسی نتیجه یک مقایسه را به صورت true یا false برمی گردانند، بر همین اساس در حالت true نیازی به استفاده از علامت خاصی در Syntax نیست اما برای حالت false از علامت ! (نباشد) در ابتدای مقایسه استفاده می کنیم، برای مقایسه چندگانه نیز علامت && (و) و علامت || (یا) کاربرد دارند، مثال های زیر به درک موضوع کمک خواهند کرد.
(age > 12)
عبارت بالا یعنی اگر متغیر age بزرگتر از 12 باشد.
!(age > 12)
عبارت بالا یعنی اگر متغیر age بزرگتر از 12 نباشد.
age > 12 && age < 20
عبارت بالا یعنی اگر متغیر age بزرگتر از 12 و در عین حال کوچکتر از 20 باشد.
age > 12 || age < 20
عبارت بالا یعنی اگر متغیر age بزرگتر از 12 یا کوچکتر از 20 باشد.

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


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

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

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

if(age < 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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | مقایسه با دستورات شرطی if، else و else if در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
.rtl{
    direction:rtl;
}
</style>
</head>
<body>
<div class="rtl">
<script type="text/javascript">
var age = 14;
var num = 12;

if(age < num){
    document.write('سن کاربر کمتر از ' + num + ' سال است!');
} else if(age == 12){
    document.write('سن کاربر 12 سال است!');
} else if(age > 12 && age < 15){
    document.write('سن کاربر بین 12 تا 15  سال است!');
} else if(age == 15 || age == 16){
    document.write('سن کاربر 15 یا 16  سال است!');
} else{
    document.write('سن کاربر بزرگتر از 16  سال است!');    
}
</script>
<hr>
به یاد داشته باشیم جاوا اسکریپت در مرورگر کاربران اجرا می شود و سورس کدها در دسترس هستند، لذا همواره سهوا یا عمدا امکان تغییر نحوه عملکرد آنها وجود دارد، به همین دلیل نمی توانیم به عنوان یک روش مطمئن برای اعتبارسنجی روی آن حساب کنیم، برای اینگونه موارد باید از زبان های سمت سرور مانند PHP استفاده کنیم، در عمل معمولا اعتبارسنجی های اولیه توسط جاوا اسکریپت انجام شده و در نهایت پس از ارسال اطلاعات به سرور این PHP است که اعتبارسنجی اصلی و نهایی را انجام می دهد، به این صورت هم رابط کاربری بهینه و هم کدهای مطمئن با عملکرد حساب شده خواهیم داشت.
</div>
</body>
</html>
پیش نمایش
نکته 1: دقت کنیم شیوه نگارش (Syntax) هر زبانی مخصوص به خودش است و اگر این اصول را رعایت نکنیم در اجرای کدها با خطا مواجه خواهیم شد، به طور مثال دستور else if در جاوا اسکریپت با یک فاصله به کار می رود اما در PHP به صورت elseif نگارش می شود.
نکته 2: علاوه بر عملگرهای پرکاربردی که تا این لحظه بررسی کردیم، جاوا اسکریپت از عملگرهای باینری (Bitwise) نیز پشتیبانی می کند که به جهت پیشرفته بودن مبحث، کاربردهای خاص و جلوگیری از پیچیده شدن آموزش، بررسی این موضوع را به مطالب بعدی موکول می کنیم.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» رویداد ها (events) در جاوا اسکریپت (JavaScript)
commentنظرات (۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: علیرضا
زمان: ۰۰:۱۶:۲۱ - تاریخ: ۱۳۹۲/۰۴/۱۳
تو عمرم برای کسی این طوری که برای شما آرزوی خوشبختی کردم آرزو نکرده بودم.
با چه برنامه کدها را می نویسید که وقتی از حروف و متغیر با حرف فارسی استفاده می کنید. به هم نمیریزه؟
من با
notepad++
کار می کنم جونم رو به لبم رسونده.
پاسخ: 
نظر لطف شما است.
برنامه ++Notepad ویرایشگر سبک، ساده و خوبی است، منتها برای حروف فارسی باید از قسمت View گزینه Text Direction RTL را انتخاب کنید.
برای کدنویسی حرفه ای برنامه فوق مناسب نیست و صرفا برای موارد خاصی کاربرد دارد، توصیه می کنیم از یکی از نرم افزارهای زیر استفاده کنید:
- Adobe Dreamweaver بسیار حرفه ای و قدرتمند.
- NetBeans IDE برنامه ای متن باز و حرفه ای، با امکان پشتیبانی از دیگر زبان های برنامه نویسی مانند Java و ...
نویسنده: علیرضا
زمان: ۰۰:۱۸:۳۱ - تاریخ: ۱۳۹۲/۰۴/۱۳
ببخشید یه سوال دیگه هم داشتم اینه که چطور میتونم متغیر های php رو در java مورد برسی قرار بدم مثلا شرط ها و توی جاوا بررسی کنم؟
پاسخ: 
بررسی شرط های PHP در JavaScript امکانپذیر نیست، PHP یک زبان سمت سرور (در سرور اجرا می شود) و JavaScript یک زبان اسکریپت نویسی سمت کاربر (در مرورگر اجرا می شود)!
تنها می توانید کدهای جاوا اسکریپت را به وسیله PHP به صورت داینامیک تولید کنید، یعنی کدها ابتدا توسط PHP پردازش و هر کجا نیاز بود، مقادیری جایگزین و سپس کد جاوا اسکریپت به صورت خروجی HTML تولید می شود، مثال:
<?php
$var = 1;
echo '<script type="text/javascript">
alert('.$var.');
</script>';
?>
نویسنده: milad
زمان: ۱۹:۴۵:۲۵ - تاریخ: ۱۳۹۲/۰۵/۳۱
واقعا مفید و کامل بود
ممنون از مقالتون
نویسنده: روزبه جعفری
زمان: ۱۴:۰۹:۲۷ - تاریخ: ۱۳۹۲/۰۶/۲۷
خیلی سایت جامع و کاملی دارین! امیدوارم به همین صورت در این راه قدم بردارید. براتون آرزوی موفقیت و بهروزی دارم.
با تشکر
پاسخ: 
خیلی ممنون از نظر لطف شما.
نویسنده: رضا
زمان: ۱۷:۴۵:۲۵ - تاریخ: ۱۳۹۲/۰۸/۰۵
می بخشید میشه راهنمایی کنید ایراد این قطعه کد چیه من هر کاری میکنم no بر میگرده در حالی که display مربوطه برابر با block هست
if(document.getElementById("castel").style.display=="block")
alert("yes")
else
alert("no")
پاسخ: 
ایرادی در کدهای شما دیده نمی شود، ممکن است مشکل از جای دیگری باشد، به فرض id صحیح نباشد (حساس به حروف بزرگ و کوچک) یا پیش از دسترسی مفسر جاوا اسکریپت به تگ HTML در DOM، کدها را فراخوانی کرده باشید، در این صورت راه حل مشکل این است که یا کدها را بعد از تگ قرار دهید یا از نمونه کد زیر استفاده کنید:
<div id="castel"></div>
<script type="text/javascript">
window.onload = function(){
if(document.getElementById("castel").style.display=="block")
alert("yes")
else
alert("no")
}
</script>
نویسنده: بهنام
زمان: ۱۰:۵۷:۱۲ - تاریخ: ۱۳۹۲/۱۱/۲۹
سلام
از آموزش های مفید جاوا اسکریپت بسیار ممنون
من یک کد بارگذاری نوشتم ولی درست عمل نکرد میخواهم وقتی صفحه کامل لود شد یعنی از حالت لودینگ ایستاد کل محتوای وب نمایش داده بشه
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
document.getElementById("amir").style.display = "block";
}
//]]>
</script>
<div id="amir" style="display:none;">
محتوای وب
</div>
میخواهم وقتی که صفحه لود شد
display = block
شود ولی قبل از اینکه صفحه لود شود این عمل انجام میپذرید
پاسخ: 
سلام
متد window.onload در اکثر مرورگر ها به خوبی پشتیبانی می شود، امکان دارد تست را در لوکال انجام داده باشید (که سرعت بارگذاری معمولا بسیار بالا است)، صفحه خود را در سرور و به صورت آنلاین تست نمائید، سعی کنید از alert برای خطایابی استفاده کنید.
نویسنده: بهنام
زمان: ۰۱:۰۵:۱۸ - تاریخ: ۱۳۹۲/۱۱/۳۰
سلام
نخیر در بلاگفا انجام دادم
متد window.onload فقط می فهماند که فقط صفحه بالا اومد اون کارها را انجام بده ولی میگم یک متد یا تابع دیگه ای نیست که بفهماند صفحه به طول کامل بارگذاری شد به طوری که صفحه از لودینگ بایستد اگر هست توضیح دهید ممنونم
پاسخ: 
سلام
window.onload یک متد استاندارد است و معمولا نیازی به استفاده از روش های جایگزین نیست، روش های دیگر استفاده از رویداد onload در تگ body و اگر از جی کئوری استفاده کنید، متد document.ready قابل استفاده است.




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات