ساختارهای شرطی در جاوا اسکریپت
در این قسمت از مقالات طراحی سایت در زمینه آموزش جاوا اسکریپت به توضیح ساختارهای شرطی در جاوا اسکریپت می پردازیم . از ساختارهای شرطی در جاوا اسکریپت زمانی استفاده می شود که بخواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات خاص اجرا شده و در صورت عدم بر قراری آنها گروه دیگری از دستورات اجرا شوند .
بر حسب شرایط می توان از یکی از ساختارهای دستوری زیر استفاده کرد :
توجه : * Condition = شرط یا شروط * Statment = دستور یا دستورات
۱ ) if ( Condition ) Statment :
از این ساختار در مواقعی که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی یکسری دستورات خاص اجرا شوند ، استفاده می شود . در این حالت در صورت عدم بر قراری شرط های تعیین شده ، هیچ دستوری اجرا نخواهد شد .
شکل کلی استفاده از این ساختار به صورت زیر است :
if ( شرط یا شروط )
{
دستورات مورد نظر که در صورت برقرار بودن شرط ها اجرا می شوند
}
مثال : در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، هیچ خروجی چاپ نشود . به مثال دقت کنید :
در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی بر روی صفحه چاپ می شود .
< script type=”text/javascript” >
var IntNum = ۱۸
if ( IntNum > 10 )
{
document.write (” This Number is bigger than 10 “)
}
< /script >
خروجی : This Number is bigger than 10
در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، هیچ پیغام خروجی بر روی صفحه چاپ نمی شود .
< script type=”text/javascript” >
var IntNum = ۸
if ( IntNum > 10 )
{
document.write (” This Number is bigger than 10 “)
}
< /script >
۲ ) if ( Condition ) Statment 1 else Statment 2 :
از این ساختار در مواقعی در طراحی سایت استفاده می کنیم که می خواهیم در صورت بر قرار بودن شرط یا شرط هایی ، یکسری دستورات و در صورت عدم بر قراری آن شروط ، گروهی دیگر از دستورات اجرا شوند .
شکل کلی استفاده از این ساختار به صورت زیر است :
if ( شرط یا شروط )
{
دستوراتی که در صورت بر قرار بودن شرط یا شروط اجرا می شوند
}
else
{
دستوراتی که در صورت عدم بر قراری شرط یا شروط اجرا می شوند
}
مثال : در مثال زیر متغیر عددی IntNum یکبار با عددی بیش از ۱۰ و یکبار با عددی کوچکتر از ۱۰ مقدار دهی شده است . شرط دستور if این است ، که در هنگام بزرگتر بودن IntNum از عدد ۱۰ پیغام “This Number is bigger than 10” و در هنگام کوچکتر بودن آن از عدد ۱۰ ، پیغام “This Number is smaller than 10” چاپ شود . به مثال دقت کنید :
در حالت اول به دلیل بزرگتر بودن عدد IntNum از ۱۰ ، پیغام خروجی قسمت if بر روی صفحه چاپ می شود .
< script type=”text/javascript” >
var IntNum = ۱۸
if ( IntNum > 10 )
{
document.write (” This Number is bigger than 10 “)
}
else
{
document.write (“This Number is smaller than 10”)
}
< /script >
خروجی : This Number is bigger than 10
در حالت دوم به دلیل کوچکتر بودن عدد IntNum از ۱۰ ، پیغام قسمت else بر روی صفحه چاپ می شود .
< script type=”text/javascript” >
var IntNum = ۸
if ( IntNum > 10 )
{
document.write (” This Number is bigger than 10 “)
}
else
{
document.write (“This Number is smaller than 10”)
}
< /script >
خزروجی : This Number is smaller than 10
دستور if تک شرطی را مانند یک عملگر می توان به صورت زیر نیز نوشت .
در این حالت برنامه شرط معرفی شده در پرانتز را چک کرده و در صورت درست بودن آن شرط ، مقدار ۱ و در صورت درست نبودن آن مقدار ۲ را به متغیر نسبت می دهد .
شکل کلی استفاده از این ساختار به سورت زیر است :
نام متغیر = ( شرط ) ؟ مقدار ۱ : مقدار ۲
variable name = ( condition ) ? value 1 : value 2 ;
کد : var name = ( x > 10 ) ? sam :david
توضیح :در مثال بالا اگر مقدار متغیر x از ۱۰ بیشتر باشد ، مقدار متغیر name برابر sam و در صورت کوچکتر بودن مقدار x از ۱۰ ، name برابر david می شود .
۳ ) if ( Condition 1 ) Statment 1 else if ( Condition 2 ) Statment 2 else Statment 3 :
از این ساختار زمانی استفاده می شود که حالت های شروط مورد نظر بیش از یک حالت مختلف است ، که در صورت بر قرار بودن هر گروه از شرط های مورد نظر ، می خواهیم دستورات خاص آن شرط ها اجرا شوند .
در این ساختار ، شرط اول در دستور if ابتدا تعریف شده و هر یک از گروه شرط های دیگر به وسیله یک دستور else if تعیین می شود . در آخر نیز واژه کلیدی else و دستورات مربوط با آن قرار می گیرد ، که در صورت عدم بر قراری تمام گروه شرط های تعیین شده ، دستورات قسمت else اجرا می شوند .
در این ساختار چنانچه هر یک از شرط های یک دستور if یا else if درست باشند ، دستورات مربوط به آن اجرا شده و برنامه از کنترل و اجرای سایر شرط های دیگر خودداری می کند . چنانچه هیچ یک از گروه شرط های تعیین شده درست نباشند ، دستورات بخش else در پایان ساختار اجرا می شوند .
شکل کلی استفاده از این ساختار به صورت زیر است :
if ( گروه شرط های شماره ۱ )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های ۱ اجرا می شوند
}
else if ( گروه شرط های شماره ۲ )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های ۲ اجرا می شوند
}
else if ( گروه شرط های شماره ۳ )
{
دستوراتی که در صورت بر قرار بودن گروه شرط های ۳ اجرا می شوند
}
.
.
.
else
{
دستوراتی که در صورت عدم بر قراری تمام گروه شرط های فوق اجرا می شوند
}
نکته ۱ : به تعداد مورد نیاز می توان در این ساختار به وسیله دستور else if شرط و دستورات جدید تعریف کرد .
نکته ۲ :استفاده از کروشه در قسمت دستورات شرط if ، فقط در زمانی که دستورات مورد نظر بیش از یک خط هستند ، ضروری است .
نکته ۳ : تعیین قسمت else در ساختار فوق اختیاری بوده و می تواند تعریف نشود .
نکته ۴ : در زمانی که تعداد حالت های شروط بسیار زیاد هستند ، بهتر است از ساختار Switch استفاده کرد .
مثال : در مثال زیر یک کادر متن و یک دکمه فرمان قرار داده شده است . کادر متن ورودی را از کاربر دریافت کرده و. با کلیک بر روی دکمه فرمان ، خروجی را در کادر آبی رنگ می بینیم .
شکل عملکرد این مثال به صورت زیر است :
رویداد کلیک دکمه فرمان تابع ( ) ifclause را که در قسمت < head > در طراحی سایت قرار دارد ، را فراخوانی می کند . در این تابع یک دستور if سه شرطی قرار داده شده است ، که مقدار متغیر matn را ارزیابی کرده و در صورتی که مقدار آن برابر ۱ باشد ، عبارت one ، در صورت ۲ بودن عبارت two ، در صورت ۳ بودن عبارت three و در صورتی که مقدار آن به غیر از یکی از موارد فوق باشد ، عبارت bigger than 3 را نمایش می دهد .
نکات مهم : نکات زیر در مثال با شماره مشخص شده اند .
خاصیت value در یک کادر متن به متن موجود در آن کنترل اشاره می کند . در اینجا ما متن موجود در کنترل txtinput را در متغیر matn ذخیره کرده ایم .
رویداد onclick رویدادی است که در هنگام کلیک بر روی یک کنترل فعال می شود . برای فراخوانی یک تابع توسط یک کنترل ، نام آن تابع را در رویداد onclick کنترل در سورس طراحی سایت قرار می دهیم .
< html >
< head >
< title > عنوان صفحه < /title >
< script type=”text/javascript” >
function ifclause ( ) ابتدای تعریف تابع
{
var matn ; تعریف متغیر
۱ var matn = txtinput.value ; قرار دادن متن کادر متن در متغیر
if (matn == ‘1’
document.write (“one”)
else if ( matn ==’2′)
document.write ( “two” )
else if ( matn == ‘3’ )
document.write ( “three” )
else
document.write ( “Bigger than three” )
}
< /script >
< /head >
< body >
< input type=”text” id=”txtinput” / > تعریف کادر متن
۲< input type=”button” id=”btnclick” onclick=”ifclause( )” value=”click me” / > تعریف دکمه فرمان
< /body >
< /html >
منبع: sitedesign-co.com
سایر مقالات مرتبط :
- روش های تشخیص اصل بودن تلویزیون های سامسونگ
- چگونه تایمر کولر گازی را خاموش کنیم؟
- بررسی صرافی انلاین بدون نیاز به احراز هویت
- نکاتی برای خرید ایمیل شرکتی و ایرانی
- بهترین برندهای تلویزیون هوشمند کدامند؟
- اهمیت سیگنال رایگان ارز دیجیتال فیوچرز در ترید
- آشنایی با بهترین قالب های چند منظوره در وردپرس
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن