دستورات if و else در جاوا اسکریپت

هدایت عباسی آموزش جاوا اسکریپت

دستورات شرطی if و else و else if در جاوا اسکریپت را بررسی می کنیم . چندین مثال خواهیم زد و توضیحات کاملی را مشاهده می کنید. کدها همه تست شده اند . کافی است آنها را در یک فایل html قرار داده و اجرا کنید.

کاربرد دستورات شرطی

در این بخش از آموزش جاوا اسکریپت از تاپ سایت 98 به سراغ کاربرد دستورات شرطی می رویم.

دستورات شرطی برای اجرای کدهای مختلف بر اساس شرایط مختلف استفاده می شود.

در بسیاری از پروژه های طراحی سایت ، از دستورات شرطی استفاده می شود.

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

دستور if

دستور if یکی از دستورات شرطی مهم می باشد که بسیار پرکاربرد میباشد.

دستور if در تقریبا در همه زبان های برنامه نویسی وجود دارد.

سینتکس دستور if

در بخش زیر سینتکس دستور if را مشاهده می کنید.

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

if (condition) {
// block of code to be executed if the condition is true
}

مثال دستور if

در قسمت زیر مثال دستور if را مشاهده می کنید.

در این مثال ابتدا به متغیر d مقداری را می دهیم. سپس با دستور if چک می کنیم اگر متغیر d از عدد 16 بزرگتر بود مقدار topsite98 نمایش داده شود.

اگر مقدار کمتر یا مساوی 16 باشد چیزی چاپ نمی شود.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<p id="t"></p>
<script>
var d = 20;
var gg;
if (d > 16) {
gg = "topsite98";
}
document.getElementById("t").innerHTML = gg;
</script>
</body>
</html>

دستور else

دستور else زمانی بکار می رود که شرط برقرار نباشد. در مثال بالا در صورتی که مقدار کوچکتر یا مساوی 16 نباشد چیزی چاپ نمی شود و این مسئله جالب نیست.

برای حل این مشکل می توانیم از دستور else استفاده کنیم.

در این قسمت با سینتکس دستور else آشنا می شوید.

اگر شرط برقرار باشد کد داخل بلاک آن اجرا می شود در غیر این صورت دستورات داخل بلاک else اجرا می شود.

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

مثال دستور else

در مثال دستور else ، شرطی قرار دادیم چنانچه شرط دستور if برقرار نباشد دستور بلاک else اجرا می شود.

کد زیر را در یک فایل با پسوند html ذخیره کرده و اجرا کنید تا نتیجه را ببینید.

متغیر d را تغییر دهید و دوباره تست کنید.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<p id="t"></p>
<script>
var d = 12;
var gg;
if (d > 16) {
gg = "topsite98";
}else {
gg = "not";
}
document.getElementById("t").innerHTML = gg;
</script>
</body>
</html>

دستور else if

دستور else if زمانی کاربرد دارد که بخواهیم چندین شرط را بررسی کنیم.

در قسمت پایین ، سینتکس دستور else if را می بینید.

دستور به این صورت عمل می کند.

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}

مثال else if

در این بخش مثال else if را بررسی می کنیم.

ابتدا به متغیر d عددی داده می شود. اگر عدد کوچکتر یا مساوی 10 باشد مقدار 10 چاپ می شود.

اگر عدد کوچکتر یا مساوی 15 باشد مقدار 15 چاپ می شود.

در غیر این صورت مقدار 20 چاپ می شود.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<p id="t"></p>
<script>
var d = 9;
var gg;
if (d <= 10) {
gg = "10";
}else if (d <= 15) {
gg = "15";
}else {
gg = "20"
}
document.getElementById("t").innerHTML = gg;
</script>
</body>
</html>

بررسی زمان با دستور if

در بخش زیر بررسی زمان با دستور if را مشاهده می کنید.

ابتدا ساعت توسط تابع date بدست می آید. حال اگر متغیر time کمتر از 10 بود مقدار Good morning نمایش داده می شود.

در غیر این صورت اگر متغیر time کمتر از 20 بود مقدار Good day نمایش داده می شود.

و در صورتی که هیچ شرطی برقرار نبود مقدار evening Good را نمایش می دهد.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<button onclick="Func()">Try it</button>
<p id="d"></p>
<script>
function Func() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("d").innerHTML = greeting;
}
</script>
</body>
</html>

کدها همه تست شده است. می توانید آنها را در فایل html ذخیره کنید و تست نمایید.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

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