parsgreen.com
article

مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)

javascript-if-else

پیش از این با جاوا اسکریپت (JavaScript) و کارکردهای آن در صفحات وب آشنا شدیم، گفتیم که این زبان تنها در مرورگر کاربران اجرا می شود (سمت کاربر) و به نوعی محدود به آن است، همچنین محاسبات و عملگرهای اصلی را شناختیم و با مثال هایی از آنها کار کردیم، اکنون و در این مطلب می خواهیم کمی بیشتر وارد دنیای شیرین و بعضا پیچیده برنامه نویسی با جاوا اسکریپت شویم و با هم به بررسی عملگرهای مقایسه (Comparisons) و شرط (If و Else) و نحوه تعریف و استفاده از آنها با کمک مثال بپردازیم تا امر فراگیری،  آسانتر و کاربردی تر شود.

شاید در نگاه نخست، عناوین، در زبان های برنامه نویسی کمی ترسناک و گیج کننده به نظر برسند، اما همانطور که قبلا گفتیم، در مجموع، شیوه های نگارش هر زبان برنامه نویسی، چیزی نیستند جزء قوانینی برای القای تفکر انسان به سیستم، یعنی آنچه را که ما به آن می اندیشیم و هدفمان از کدنویسی است، با آن قوانین و در بستر مفسر آن زبان، به سیستم می گوییم که چه وظیفه ای دارد و چه خروجی باید بدهد؛ فرض کنید کاربری سنش 12 سال است و ما در سایت خود صفحاتی داریم که نمی خواهیم افراد پائین تر از سن خاصی آن را مشاهده کنند، در حالت کلی، با داشتن اطلاعات کاربران، برنامه ای خواهیم نوشت که به زبان ساده به سیستم بگوید اگر کاربر از 12 سال سنش پائین تر بود، آن صفحه را بارگذاری نکند و در عوض صفحه مخصوص کودکان را نشان دهد؛ همانطور که می دانید سیستم به زبان ما سخن نمی گوید! بلکه ما باید کدهایی در بستری استاندارد تعریف کنیم، در جاوا اسکریپت نیز این بستر همان مرورگر کاربران است، کدهای جاوا اسکریپت توسط مفسری که در مرورگرها وجود دارد تبدیل به خروجی مورد نظر ما می شوند.

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


عملگرهای مقایسه ای، شرایطی را مهیا می کنند که به کمک آنها دو طرف یک رابطه را باهم مقایسه می کنیم، به فرض ما متغیری داریم به نام age که مقدار آن 12 است، حال می خواهیم مقایسه کنیم:
آیا متغیر age مساوی 12 است؟، برای مقایسه برابری دو طرف از علامت == استفاده می کنیم:
age == 12
آیا متغیر age مساوی 13 نیست؟، برای مقایسه برابر نبودن دو طرف از علامت =! استفاده می کنیم:
age != 13
گاهی نیاز داریم که دقیقا مساوی بودن یا نبودن دو طرف رابطه را بررسی کنیم (از هر لحاظ)، بدین منظور از === استفاده می کنیم:
age === 12
بر اساس مقایسه === عبارت بالا درست خواهد بود ولی مقایسه به صورت زیر، نتیجه ی غلط خواهد داشت، چرا که ما 12 را به صورت عددی تعریف کردیم نه به صورت داده رشته ای (متنی):
age === "12"
و به همین ترتیب برای بررسی کوچکتر بودن از علامت >:
age < 12
معنی رابطه بالا: متغیر age کوچکتر از 12
برای بررسی بزرگتر بودن از علامت <:
age > 12
برای مقایسه کوچکتر یا مساوی بودن از علامت =>:
age <= 12
برای مقایسه بزرگتر یا مساوی بودن از علامت =<:
age >= 12
همچنین برای مقایسه چندگانه از علامت های && (و)، || (یا) و ! (نباشد) استفاده می کنیم:
age > 12 && age < 20
عبارت بالا یعنی اگر متغیر age بزرگتر از 12 و در عین حال کوچکتر از 20 باشد.

شرط if و else در جاوا اسکریپت (JavaScript If,Else Statements):


تا اینجا با علائم مقایسه آشنا شدیم، اما این علائم معمولا به خودی خود کار خاصی انجام نمی دهند و به نوعی تنها جمله خبری هستند (سن مساوی 12 است، سن کوچکتر از 13 است و...)، برای اینکه بتوانیم مقایسه کامل تر و همراه با دستور یا فرمان را انجام دهیم، باید از if (اگر) و else (در غیر اینصورت) استفاده کنیم، مثلا بگوییم اگر سن برابر 12 بود، آنوقت فلان کار را انجام بده و اگر نبود، کاری دیگر را انجام بده؛ به مثال های زیر توجه کنید تا با نحوه عملکرد آنها بیشتر آشنا شوید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | دستورات شرطی و مقایسه ای در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var name = 'گرامی';
var age = 15;
var domain = 'webgoo.ir';
var otherdomain = 'yourdomain.com';

if (age > 12 && age < 20){
    document.write("کاربر گرامی سن شما بالاتر از 12 سال است!");
}
else {
    document.write("کاربر گرامی سن شما پائین تر از 12 سال است!");    
}
document.write("<br />");
document.write("<br />");
if (name != 'ناشناس' || domain == 'webgoo.ir'){
    document.write('کاربر '+ name + ' به سایت' + domain + ' خوش آمدید!');        
}
else{
    document.write('کاربر '+ name + ' به سایت' + otherdomain + ' خوش آمدید!');    
}
//]]>
</script>
</head>
<body>
<hr />
متغیرها و مقادیر به کار رفته در این مثال فرضی هستند.
</body>
</html>
پیش نمایش
توضیح:
- در مثال ساده بالا، چند متغیر فرضی تعریف کرده ایم و محاسباتی جهت نمونه انجام داده ایم.
- در بخش دوم کد، ما از تکنیکی ترکیبی برای خروجی گرفتن همزمان متن و متغیر در یک دستور document.write استفاده کرده ایم.
- برای پی بردن به نحوه عملکرد شرط و مقایسه در جاوا اسکریپت، کد بالا را در سیستم خود و در یک صفحه با فرمت html ذخیره و به دلخواه تغییر دهید تا نتیجه تغییرات را ببینید.
قبل از خاتمه بحث، یک نکته ناگفته مانده و آن ترکیب دیگری از if و else به نام else if است، گفتیم که if شرطی به معنی اگر و else جانشین آن و به معنی در غیر اینصورت است، مابین این دو، دستور else if را می توان گنجاند، پس به صورت ساده می شود: اگر رابطه 1 نشد (if)، در غیر اینصورت اگر رابطه 2 نشد (else if)، اگر هیچ کدام از موارد قبلی نشد بخش سوم (else) اجرا شود؛ مثال زیر گویا است:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | دستور شرطی و مقایسه ای else if در جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var age = 25;
if (age == 12 || age == 20){
    document.write("کاربر گرامی سن شما 12 یا 20 سال است!");
}
else if(age != 12 && age != 20) {
    document.write("کاربر گرامی سن شما 12 یا 20 سال نیست!");    
}
else{
    document.write('کاربر گرامی سن شما' + age + 'سال است!');        
}
//]]>
</script>
</head>
<body>
<hr />
متغیرها و مقادیر آنها در این مثال، از قبل تعریف شده اند.
</body>
</html>
پیش نمایش
نکته: دقت کنید که شیوه نگارش جاوا اسکریپت با زبان های دیگر در موارد مشابه مثل php، کمی متفاوت است، مثلا در php دستور else if را به صورت بدون فاصله و elseif نیز می نویسند.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» حلقه for و while در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)
» توابع (Functions) در جاوا اسکریپت (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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

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