طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

دستور switch، حلقه ها، دستور break و continue در جاوا اسکریپت

دستور switch، حلقه ها، دستور break و continue در جاوا اسکریپت

دوستان عزیز سلام؛ امروز هم در خدمت شما عزیزان هستم با آموزش JavaScript – بخش ششم و در این جلسه مطالب زیر را برای شما همراهان همیشگی سایت سازان شرح دهم:

  • دستور Switch در جاوا اسکریپت
  • حلقه ها در جاوا اسکریپت
  • دستور Break و Continue در جاوا اسکریپت
  • تبدیل نوع در جاوا اسکریپت

در جلسه قبل دستورات شرطی if ، else  و elseif  را دیدیم و با کاربرد آنها آشنا شدیم. در این جلسه دیگر دستور شرطی، یعنی switch  معرفی می شود. همراه من باشید:

دستور Switch در جاوا اسکریپت

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

 switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        code block
}

اما ببینیم که این دستور چگونه کار می کند:

درابتدا شرایط تعیین شده (یعنی expression) یک بار ارزیابی می شود و مقداری حاصل می شود.

هر کدام از دستورات case  نیز مقدار خاصی (یعنی n) دارند. حال مقدار حاصل شده از ارزیابی، با مقدار case  ها مقایسه می شود و در صورت تطابق، کدهای وابسته به آن اجرا می شوند.

در ساختار بالا می بینید، بعد از هر case  کلمه کلیدی break  نوشته شده است. حتما می پرسید کاربرد این کلمه کلیدی چیست؟

زمانی که جاوا اسکریپت case  مناسب را پیدا و کدهای آن را اجرا کند، نیازی به بررسی دیگر case  ها نیست و باید بررسی را متوقف کنیم. بنابراین این کلمه کلیدی را که مانع ادامه بررسی می شود را بعد از case ها می نویسیم. ضمنا این کار باعث افزایش سرعت جاوا اسکریپت می شود. چرا؟

فرض کنید 200 تا کیس داریم که اولین آنها با شرایط مطابقت دارد. خب بررسی 199 مورد اضافی کاری غیر منطقی و زمان بر است. پس دستور break  با خارج کردن جاوااسکریپت از بلوک switch  مانع بررسی 199 مورد دیگر می شود و در نتیجه سرعت آن را افزایش می دهد.

خب شاید بپرسید که حتما بعد از هر case  باید دستور break  را بنویسیم؟

البته که نه. بسته به شرایط می توان بعد از هر تعداد case این دستور را نوشت.

و یک سوال دیگه!

برای هر case  باید یک مجموعه کد نوشته شود؟

بازم نه، می توان مجموعه کد را برای چند case  نوشت:

Case 1:
Case 2:
Code block

و اما یک مثال:

<script>
  var day;

  switch (new Date().getDay()) {
  	case 0:
  		day = "Sunday";
  		break;
  	case 1:
  		day = "Monday";
  		 break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case  6:
        day = "Saturday";
  }

 document.getElementById('p01').innerHTML = day;
 </script>
</body>

آموزش JavaScript – بخش ششم

در مثال بالا جاوا اسکریپت روز هفته را از تاریخ سیستم دریافت و آن را به یک آبجکت تبدیل می کند. گفتیم که روز ها از Sunday یعنی یکشنبه شماره گذاری می شوند. خب حالا جاوا اسکریپت با بررسی تاریخ سیستم من به عدد 5 دست میابد و در جاوا اسکریت عدد 5 شاخص عددی روز جمعه می باشد. بنابراین Friday در مرورگر برگردانده شده است.

و اما default . به نظر شما چه کاری را انجام می دهد؟

این کلمه کلیدی کدهایی را اجرا می کند که case  مورد نظر یافت نشود!

توجه کنید که

همیشه default  را در انتهای بلوک switch  می نویسیم.

خب بریم سراغ مطلب مهم بعدی؛ یعنی:

حلقه ها در جاوا اسکریپت

حلقه (loop) را زمانی استفاده می کنیم که می خواهیم مجموعه کدی را چندین بار تکرار کنیم.

در ساده ترین شرایط فرض کنید که آرایه ای با 10 عضو دارید و می خواهید هر عضو را در یک خط بنویسید. در این صورت باید کدهایی مانند کدهای زیر را بنویسید:

<body>
<p id="p01"></p>

 <script>
  var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Acer", "Dell", "HP", "Samsung"];
  var text = "";

 text += brand[0] + "<br>";
 text += brand[1] + "<br>";
 text += brand[2] + "<br>";
 text += brand[3] + "<br>";
 text += brand[4] + "<br>";
 text += brand[5] + "<br>";
 text += brand[6] + "<br>";
 text += brand[7];
 document.getElementById('p01').innerHTML = text;

 </script>
</body>

آموزش JavaScript – بخش ششم

خب اگر آرایه ما 100 عضو داشت چکار می کنیم؟

اینجاست که باید از حلقه ها کمک بگیریم.

در ادامه می خواهم حلقه های for  ، for/in  ، while  و do/while  را برای شما دوستانم شرح دهم. با من همراه باشید:

حلقه for

for  مهمترین و پرکاربرد ترین حلقه می باشد و ساختار زیر را دارد:

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

دستور 1 یعنی statement1 قبل از شروع حلقه اجرا می شود و معمولا مقدار اولیه متغیری را تعیین می کند.

دستور 2 شرایط اجرای حلقه را تعیین می کند. یعنی تا زمانی که این شرایط برقرار بودند، حلقه باید اجرا شود.

دستور 3 نیز بعد از حلقه اجرا می شود. مثلا مقدار یک متغیر را افزایش یا کاهش می دهد.

حال بیایید مثال بالا را با استفاده از حلقه for  بنویسیم:

<body>
<p id="p01"></p>

 <script>
  var brand = ["Apple", "VAIO", "ASUS", "Lenovo", "Acer", "Dell", "HP", "Samsung"];
  var text = "";
  var i;
  for (i = 0; i < brand.length; i++) { 
    text += brand[i] + "<br>";
}
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

در مثال بالا می بینید که دستور 1 مقدار اولیه متغیر i را برابر 0 قرار می دهد و دستور 2 فرمان اجرای حلقه را تا زمانی که i کمتر از تعداد اعضای آرایه باشد را صادر می کند.

در نهایت دستور 3 بعد از هر بار اجرای حلقه، مقدار i را یک واحد افزایش می دهد.

حالا نکاتی را که باید در مورد دستورات حلقه به آنها توجه شود را ببینیم:

نکاتی در مورد دستورات حلقه

  • دستور 1 اختیاری است. یعنی بسته به کاری که انجام می دهید می توانید آن را بنویسید یا ننویسید و یا مقدار اولیه چند متغیر را تعیین کنید. اما اگر آن را ننویسید حتما باید نقطه ویرگول ( ; ) گذاشته و بعد دستور2 را بنویسید و اگر بخواهید مقدار اولیه چند متغیر را تعیین کنید، برای جداسازی از کاما استفاده کنید.
for (; statement 2; statement 3)
  • دستور 2 نیز اختیاری می باشد و گفتیم که شرط اجرای حلقه را تعیین می کند. یعنی با ارزیابی یک دستور، مقدار true را برای اجرای حلقه و یا false را برای توقف حلقه بر می گرداند. اگر دستور 2 نوشته نشود، حتما حتما درون حلقه باید شرطی را برای پایان یافتن آن تعیین کنیم (در ادامه با دستور break آشنا می شوید که برای این کار می توان از این دستور استفاده کرد) که اگر این کار را نکنیم، حلقه تا بی نهایت اجرا می شود و این باعث crash کردن مرورگر می شود.
  • دستور 3 نیز اختیاری می باشد(!!). گفتیم که این دستور معمولا مقدار متغیری را کم یا زیاد می کند که این کار را می توان در انتهای حلقه نیز انجام داد.

حلقه for/in

حالت خاصی از حلقه for  است که برای کار با ویژگی های یک آبجکت استفاده می شود:

<body>
<p id="p01"></p>

 <script>
  var text = "";
  var brand = {brand1:"Apple", brand2:"VAIO", brand3:"ASUS", brand4:"Lenovo", brand5:"Acer", brand6:"Dell", brand7:"HP", brand8:"Samsung"};
  var x;
  for (x in brand) { 
    text += brand[x] + "<br>";
}
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

حلقه while

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

while (condition) {
کدهایی که باید اجرا شوند
}

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

به مثال زیر توجه کنید:

<body>
<p id="p01"></p>

 <script>
  var text = "";
  var i = 0;
  while (i < 5) {
    text += "<br>The number is " + i;
    i++;
}
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

اگر ++i را در انتهای حلقه ننویسید، حلقه هیچگاه تمام نمی شود.

حلقه do / while

نوع دیگری از حلقه while  است که ساختار زیر را دارد:

do {
کدهایی که باید اجرا شوند
}
while (condition);

با توجه به این ساختار، در ابتدا حلقه اجرا می شود و در انتهای آن، شرایط ارزیابی می شوند. اگر حاصل ارزیابی درست (true) بود، حلقه مجددا اجرا می شود. درنتیجه حلقه تا زمانی که حاصل ارزیابی false شود، اجرا می شود.

مثال قبل را با do / while  می نویسیم:

<body>
<p id="p01"></p>

 <script>
  var text = "";
  var i = 0;
  do {
    text += "<br>The number is " + i;
    i++;
} 
while (i < 5);
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

و اما یک سوال:

تفاوت حلقه for  و while  در چیست؟

لطفا پاسخ خود را از بخش نظرات برای ما ارسال کنید.

دستور Break و Continue در جاوا اسکریپت

دو دستوری که ممکن است در بررسی کدهای جاوا اسکریپت با آنها برخورد کنید را در ادامه بررسی می کنیم:

دستور break

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

اما از این دستور می توان برای خروج از یک حلقه نیز استفاده کرد. به مثال زیر توجه کنید:

<body>
<p id="p01"></p>

 <script>
  var text = "";
  var i;
  for (i = 0; i < 10; i++) {
  	if (i === 4) { break; }
  	text += "The number is " + i + "<br>";
  }
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

در مثال بالا اگر از دستور break  استفاده نکنیم اعداد 1 تا 10 در مرورگر برگردانده می شوند. اما می بینید که با رسیدن جاوا اسکریپت به عدد 4، از حلقه for  خارج می شود و دیگر اعداد را بر نمیگرداند.

دستور continue

و اما دستور continue  دستور پرش از روی یک مرحله را در حلقه ها می دهد:

<body>
<p id="p01"></p>

 <script>
  var text = "";
  var i;
  for (i = 0; i < 10; i++) {
  	if (i === 4) { continue; }
  	text += "The number is " + i + "<br>";
  }
 document.getElementById("p01").innerHTML = text;
 </script>
</body>

آموزش JavaScript – بخش ششم

همانطور که در مثال بالا می بینید زمانی که جاوا اسکریپت به عدد 4 می رسد، از آن مرحله می پرد و ادامه حلقه را انجام می دهد. در نتیجه در مرورگر عدد 4 مشاهده نمی شود.

در آخرین مبحث این جلسه با تبدیل نوع داده ها در جاوا اسکریپت آشنا می شویم:

تغییر نوع متغیرها در جاوا اسکریپت

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

نوع داده ها

با نوع داده ها در جاوا اسکریپت آشنا هستیم و می دانیم که در جاوا اسکریپت 5 نوع داده داریم که عبارتند از: رشته ها، اعداد، بولین، آبجکت و توابع.

تا اینجای کار نیز با سه آبجکت آشنا شدیم: آبجکت (Object)، تاریخ (Date) و آرایه (Array).

همچنین دو نوع داده داریم که هیچ مقداری را نمی پذیرند: null و undefined.

عملگر typeof

دیدیم که با استفاده از این عملگر نوع داده ها را می توان مشاهده کرد:

نوعداده
numberNaN
objectarray
objectdate
objectnull
undefinedundefined
undefinedمتغیر بدون مقدار
functionfunction
boleanFALSE
boleanTRUE
number3
string“string”

 

ویژگی constructor

این ویژگی تابع سازنده تمام متغیر های جاوا اسکریپت را بر می گرداند.

به مثال زیر توجه کنید:

<body>
<p id="p01"></p>

 <script>
 document.getElementById("p01").innerHTML =
 "Hi".constructor + "<br>" +
 (3 + 5 + 100).constructor + "<br>" +
 false.constructor + "<br>" +
 [4, 8, 16, 32].constructor + "<br>" +
 {brand:"VAIO", model:"153290"}.constructor + "<br>" +
 new Date().constructor + "<br>" +
 function () {}.constructor;
 </script>
</body>

آموزش JavaScript – بخش ششم

گفتیم که اپراتور typeof  برای آبجکت ها و Date()  و null مقدار object را بر می گرداند. در مثال زیر خواهید دید که با استفاده از ویژگی constructor  می توانیم نوع دقیق متغیر را تشخیص دهیم:

<body>
<p id="p01"></p>

 <script>
 var myDate = new Date();
 document.getElementById("p01").innerHTML =
 isDate(myDate);

 function isDate(myDate) {
 	return myDate.constructor.toString().indexOf("Date") > -1;
 }
 </script>
</body>

آموزش JavaScript – بخش ششم

چون مقدار true برگردانده شده است پس متغیر تعریف شده از جنس Date()  می باشد. دستور تابع بالا را می توان به صورت زیر نیز نوشت:

<body>
<p id="p01"></p>

 <script>
 var myDate = new Date();
 document.getElementById("p01").innerHTML =
 isDate(myDate);

 function isDate(myDate) {
 	return myDate.constructor === Date;
 }
 </script>
</body>

آموزش JavaScript – بخش ششم

در واقع در مثال بالا بررسی کردیم که آیا تابع سازنده آبجکت myDate() تابع Date()  می باشد یا نه؟

و اما بریم سر اصل مطلب یعنی تغییر نوع متغیر ها:

تغییر نوع متغیر ها

در جاوا اسکریپت نوع متغیر ها به دو روش تغییر میابد:

  • توسط جاوا اسکریپت: مثلا دیدیم که در نمایش اعضای یک آرایه در مرورگر، جاوا اسکریپت آرایه را به رشته تبدیل می کند و سپس آن را نمایش می دهد.
  • توسط توابع جاوا اسکریپت

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

تبدیل اعداد به رشته

دو متد string()  و toString()  برای تبدیل نوع متغیر ها، داد های تحت اللفظی، اعداد، بولین و اصطلاحات به رشته استفاده می شوند. نحوه استفاده از این دو متغایر متفاوت است و چگونگی استفاده را در مثال زیر می بینیم:

<body>
<p id="p01"></p>

 <script>
 var x = 951;
 document.getElementById("p01").innerHTML =
 String (x) + "<br>" +
 String (900 + 50 + 1) + "<br>" +
 String (false) + "<br>" +
 String (Date()) + "<br>" +
 x.toString() + "<br>" +
 (900 + 50 + 1).toString() + "<br>" +
 true.toString() + "<br>" +
 Date().toString ();
 </script>
</body>

آموزش JavaScript – بخش ششم

متد های toExponential()  و toFiexed()  و toPrecision()  را که در جلسه سوم آموزش جاوا اسکریپت دیدیم نیز برای این منظور (یعنی تبدیل اعداد به رشته) استفاده می شوند.

تبدیل رشته به عدد

متدهای parseFloat() ، Number() و parseInt() برای تبدیل رشته به عدد استفاده می شوند. مثلا:

Number("3.14")    // returns 3.14
Number(" ")       // returns 0 
Number("")        // returns 0
Number("99 88")   // returns NaN

اما گفتیم که خود جاوا اسکریپت بسته به شرایط نوع متغیر ها را تغییر می دهد. در مثال زیر می بینید که مثلا null هنگام جمع با یک عدد، 0 و هنگام جمع با یک مقدار رشته ای، مقداری رشته ای در نظر گرفته می شود:

<body>
<p id="p01"></p>

 <script>
 var x = 951;
 document.getElementById("p01").innerHTML =
 (5 + null) + "<br>"  +
 ("4" + null) + "<br>"  +
 ("10" - 6) + "<br>"  +
 ("10" + 6) + "<br>"  +
 ("10" * "5") + "<br>"  +
 ("10" * 5);
 </script>
</body>

آموزش JavaScript – بخش ششم

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

دیدگاه ‏خود را بنویسید