ساختار کنترلی switch در جاوا اسکریپت

در این قسمت از آموزش جاوا اسکریپت به توضیح ساختار کنترلی switch در جاوا اسکریپت می پردازیم . از این ساختار در زمانی استفاده می شود که بخواهیم بر حسب مقادیر مختلف یک متغیر یا عبارت خاص ، دستورات متفاوتی اجرا شود .
شکل کلی استفاده از این ساختار در طراحی سایت به صورت زیر است :

switch    ( نام یک متغیر یا یک عبارت )
{
case    مقدار ۱ :
case 1 دستورات مربوط به
case    مقدار ۲ :
case 2 دستورات مربوط به
.
.
.
.

case    n مقدار :
case n دستورات مربوط به
default :
دستورات پیش فرض ساختار که در صورت عدم برقراری مقادیر تمام case های فوق ، اجرا خواهند شد
}

از جوا اسکریپت در طراحی سایت بسیار استفاده می شود. نحوه عملکرد این ساختار در جاوااسکریپت به شرح زیر است :

ابتدا در پرانتز مقابل واژه کلیدی switch ، یک متغیر یا عبارت اعلام می شود . همچنین در هر دستور case ، یک مقدار مرتبط با آن متغیر نیز تعیین می شود . برنامه مقدار متغیر را ( که از قبل توسط یک تابع یا دستور مقدار دهی شده است ) را با مقدار تعیین شده برای هر case به ترتیب مقایسه کرده و در صورت برابر بودن آنها ، دستورات آن case و case های بعد از آن را اجرا می کند . در واقع دستورات تا زمان رسیدن به یک دستور break اجرا می شوند .
نکته : برای جلوگیری از اجرای case های بعدی همراه با case ای که اجرا می شود ، باید در پایان دستورات هر case از واژه کلیدی break استفاده کرد . برای دریافت توضیحات بیشتر ، به قسمت توضیح دستور break در پایین صفحه بروید .
قسمت default ، دستورات پیش فرض ساختار را تعیین می کند ، که در صورت عدم برقراری مقادیر تمام case های ساختار ، دستورات آن قسمت اجرا خواهد شد .

نکات مهم :

√ نوع متغیر تعیین شده در قسمت switch و مقدارهای هر یک از case ها باید با هم یکسان و از یک نوع باشند .
√ به تعداد مورد نیاز می توان از دستور case در ساختار switch استفاده کرد .
√ تعیین قسمت default در ساختار switch ، اختیاری است و می تواند تعیین نشود .
√ مقدار هیچ دو case متفاوتی ، نباید با هم یکسان باشد .

مثال : در مثال زیر دو کادر متن و یک دکمه فرمان قرار داده شده است . کادر متن اول یک متن یا عدد از کاربر دریافت کرده و با کلیک بر روی دکمه فرمان و فراخوانی تابع ( ) hello ، خروجی در کادر متن دوم نمایش داده می شود .
عملکرد تابع ( ) hello به شرح زیر است :
این تابع مقدار کنترل کادر متن اول یعنی txtinput ، را در متغیر matn ذخیره کرده و سپس در یک ساختار switch ،بر حسب مقادیر مختلف خروجی را در کادر متن دوم یعنی txtresult نمایش می دهد .

توجه : در اینجا به دلیل عدم استفاده از دستور break در پایان دستورات هر case با اجرای هر کدام از case های مثال ، دستورات بقیه case ها نیز اجرا می شود . بنابراین همواره خروجی ما در این حالت خروجی قسمت default است .

< input type=”text” id=”txtinput ” / >
< input type=”button” name=”clickme” onclick=”hello( )” value=”click me !” / >
< input type=”text” id=”txtresult” / >
< script type=”text/javascript” >
function hello( )
{
var matn = txtinput.value ;
switch (matn)
{
case “1”:
txtresult.value = “one” ;
case “2”:
txtresult.value = “two”;
case “3”:
txtresult.value = “three”;
default:
txtresult.value = “bigger than 3”;
}
}
< /script >

منبع: sitedesign-co.com