الحلقات التكرارية في لغة جافاسكربت 5

الحلقات التكرارية في JavaScript

نستخدم الحلقات التكرارية ( Loops ) في البرمجة بشكل عام لتسهّل علينا عدم كتابة نفس الكود عدة مرات. تستخدم اوامر التكرار من أجل تكرار أمر معين أو طباعة جملة من البيانات مرة واحدة. إذا اردنا طباعة جملة Nusur Tech ألف مرة فهل يعقل أن نكتب الف سطر لطباعة هذه الجملة الف مرة؟ عندما نريد طباعة كمية من البيانات أو المعلومات و يحتاج أن نظهرها في عدة أسطر سنقوم بإستخدام اوامر التكرار.

حلقة for في javascript

حلقة for هي عبارة عن شرط يستخدم لتكرار شيئ ما عدة مرات وعادتاً ما يحتوي على قيمة نهائية.

الشكل العام لحلقة for في جافاسكربت

for(بداية العداد){
	/الأوامر التي نريد تكرارها
}

ضمن هذه الاقواس {} نكتب اوامر الجافاسكربت التي نُريد تكرارها وما بين هذه الاقواس () نكتب بداخله المتغير و القيمة من أين يبدأ العد, و اوامر التكرار وبالنهاية نضع ++ المتغير.

مثال 1

قم بطباعة كلمة Nusur Tech عشر مرات في لغة جافاسكربت.

نقوم بإنشاء id في ملف html و نسميه while-loop و يكون في وسم العنوان h5.

<h5 id="while-loop"></h5>

وضمن ملف عمل الجافاسكربت نكتب الكود

for (var count = 0; count <= 10; ++count){
    document.getElementById("while-loop").innerHTML+="Nusur: " + count + "<br>";
}

أنشأنا حلقة تكرار for و بداية العدّاد تبدأ من الصفر ووضعنا شرط طالما العداد أصغر أو يساوي الرقم 10 إبقى ضمن الحلقة التكرارية و زد 1 في كل دورة. ثم قمنا بجلب البيانات وعرضها عبر الـ id من ملف html و هي طباعة كلمة Nusur ثم النزول سطر جديد. إلى أن يصل للرقم 10 يتوقف التكرار.

مثال 2

لنتخيل أننا نعمل في شركه وبها 1500 موظف, و لكل موظف بها يوجد لديه صفات عدة مثلا 10 صفات أو اكثر, سوف نستخدم اللوب لهذا كونه أسهل بكثير من المصفوفة.

var id2 = ["name : data ", "age : 26", "country : sudan"]
for(var count = 0;count<id2.length; count++){
    document.getElementById("while-test").innerHTML +=id2 [count] + "<br>";
}

لدينا مصفوفة عددية إسمها id2 و هي تحمل بيانات أحد الموظفين في هذه الشركة و تحتوي على الإسم و العمر و البلد. ثم أنشأنا حلقة for تكرارية و قلنا له بداية العدّاد هي 0 و إذا طول العداد أصغر من id2 و زد واحد في كل دورة. و عرضنا البيانات عن طريق ربطها في id موجود في ملف html.

حلقة while التكرارية في جافاسكربت

حلقة while في جافاسكربت تعتبر أمر من أوامر التكرار وهو أمر مبسط و جميل جداً.

الشكل العام لحلقة while في جافاسكربت

var count = 0;
while(الشرط الصحيح){
    /الاوامر
}

في مكان الرقم 0 نضع الرقم الذي نريد أن يبدأ العد منه, وضمن هذه الأقواس الدائرية () يجب أن يكون الشرط صحيح لكي يعمل الكود وضمن الأقواس المعكوفة {} نكتب الأوامر التي نريد تكرارها.

مثال 3

ندخل إلى ملف html و نضع id للعنصر و الأيدي هو while-loop.

var count = 1;
while(count "<= "10"){
    document.getElementById("while-loop").innerHTML+="Nusur: "+count + "<br>";
    ++count;
}

وضعنا += لجمع القيمة السابقة مع القيمة الجديدة مع بعضهما لتجنب حذف القيمة السابقة. و وضعنا وسم br للنزول سطراً جديداً, ووضعنا في النهاية count++ للزيادة 1 في كل دورة و ليتوقف عند الإنتهاء من العد. يجب أن نكتب في النهاية count++ كي يعمل الموقع لأن إذا لم نضعها فلن يعمل الموقع يبقى في وضع التحديث. و count هي إسم المتغير الذي إستخدمناه في مثالنا كي لا تعتبروها ثابتة أو كلمة محجوزة.

حلقة do while التكرارية

حلقة Do While Loop جافاسكربت نستخدمها إذا كنا نُريد تنفيذ الكود عدة مرات ولكننا لا نعرف كم مرة في التحديد لأننا نريد إيقاف التنفيذ إذا تحقق شرط معين.

مثال 4

var count = 0;
do {
    document.getElementById("while-test").innerHTML += "ID: "+count + "<br>";
count++;
}while(count<=10);

أنشأنا متغير و وضعنا رقم 0 وهو بداية حلقة العد و شرط التكرار أصغر أو يساوي 10. و عرضنا البيانات بواسطة html و وضعنا في النهاية العنصر <br> كي ينزل سطراً في كل عملية عد. و وضعنا ++count لكي لا يكمل عد إلى رقم لا نهاية. أما في حال قلب إشارة الأصغر بإشارة أكبر في المثال السابق سوف يطبع لنا فقط ID: 1.

يجب أن يكون الشرط صحيح لكي تعمل while loop و for loop, أما في do while loop يستخدم للإختبار فقط مرة واحدة.

جمل التحكم مع الحلقات في جافاسكربت

جمل التحكم Control Statements نستخدمها للتحكم في سير تنفيذ الحلقات, و أيضاً مع جملة الشرط switch. يوجد نوعين من جمل التحكم في الحلقات التكرارية وهما:

Break Statement.
Continue Statement.

جملة break في لغة جافاسكربت

جملة break تكون وظيفتها هي إيقاف التكرار عند تحقق شرط معين أو عدة شروط. وعند تنفيذها يتم إيقاف الحلقة (أي الخروج من loop).

مثال 5

var i = 1;
while(i<=10){
    if(i==8){
      break;
   }
    console.log("ID: "+i);
++i;
}

أنشأنا متغير إسمه i و أعطيناه قيمة 1 أي أن حلقة العد سوف تبدأ من الرقم 1. و أعطينا حلقة التكرار while شرط i إذا أصغر أو يساوي الرقم 10 أي التكرار عشر مرات إذا كان الشرط الموضوع صحيحاً. و وضعنا شرط عندما يصل إلى رقم 8 يتوقف عن العد لأننا وضعنا له break مع الشرط. وعرضنا هذه البيانات عبر الكونسل بطباعة كلمة ID قبل كل رقم من العداد.

الأمر break يستخدم لإيقاف حلقة العد في كل من for,while,do while عند الرقم الذي يحدد في الشرط.

جملة continue في لغة جافاسكربت

جملة continue تستخدم مع الحلقات ويتم إستخدامها من أجل تجاوز تنفيذ كود معيَّن في حلقة. وحيث تستخدم من أجل تجاوز تنفيذ جزء معين من كود (scope).

مثال 6

for(var count = 1; count<=10; ++count){
    if(count == 8){
       continue;
  } 
   document.getElementById("while-test").innerHTML +="ID: "+ count + "<br>";
}

أنشأنا متغير و وضعنا رقم 1 وهو بداية حلقة العد و شرط التكرار أصغر أو يساوي 10. و وضعنا شرط أن يتخطى الرقم 8 في حلقة العد بوضع الدالة continue للتخطي أي عندما يصل العد للرقم 8 تخطاه. و عرضنا البيانات بـ html و وضعنا في النهاية العنصر <br> كي ينزل سطراً جديداً في كل عملية عد.

نسور التقنية Nusur Tech