JavaScript

JavaScript For Loop
حلقات التكرار loops - جُملة for في لغة جافا سكريبت

ستتعلم في هذا الدرس حلقات التكرار loops - وجُملة for في لغة جافا سكريبت وستتعلم عمل تكرار علي مجموعة بيانات محفوظة بداخل مصفوفة array وعرضهم في list وطريقة عرضهم في جدول منسق بلغات html + css وايضاً ستتعلم استخدام itrator بداخل الحلقات والشروط conditions وقيم التهيئة initialization.

التاريخ

05 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

2780

المواضيع

24
الشروحات chevron_left JavaScript For Loop chevron_left JavaScript

JavaScript For Loop
حلقات التكرار loops - جُملة for في لغة جافا سكريبت

</> JavaScript For Loop
حلقات التكرار loops - جُملة for في لغة جافا سكريبت

التكرار loop هو الحل البسيط والسهل لإعطاء المطورين القدرة علي تنفيذ أمر برمجي أو مجموعة أوامر برمجية عدة مرات ويعطي لهم المرونة للتحكم في تحديد عدد عمليات التكرار.


  • for loop تعطي تفويض للغة جافا سكريبت في تنفيذ كُتلة برمجية a block of code عدة مرات.
  • يمكن تحديد لقاعدة for loop عدد مرات التكرار.
  • يمكن أن يكون عدد مرات التكرار عبارة عن متغير variable أو ممكن أن يكون عدد عناصر مصفوفة أو رقم ثابت.
  • تعمل for loop عن طريق شرط يتم تمريرة لها وبناء عليه يتم التكرار حتي تحقق هذا الشرط.

</> for loop syntax in JavaScript
طريقة كتابة for loop في لغة جافا سكريبت

  • تبدأ for loop بكلمة for بحروف صغيرة.
  • يتبع for الأقواس  () parentheses.
  • يتم تمرير ثلاث عوامل بداخل الأقواس () parentheses وهم :


  1. initialization متغير يتم تهيئتة بقيمة محددة قبل أن يتم التكرار.
  2. test statement هو الشرط إذا تحقق سوف يتم تنفيذ الأوامر البرمجية المحجوزة بداخل for loop. 
  3. iteration statement هو اضافة عملية النقصان أو الزيادة علي المتغير الذي قمنا بتهيئته عند بداية for.
  • يتبع for الأقواس  () parentheses أقواس مجُعدة {} curly braces وهي منطقة مخصصة لأضافة الأوامر البرمجية التي سوف تقوم لغة جافا سكريبت بتكررارها عدة مرات.
for loop Syntax

طريقة كتابة for loop في لغة جافا سكريبت

for (initialization; condition;iteration)
{
   /* code will execute */
}
Hand Loop

ما قبل for loop يتم تكرار أي امر برمجي يدوياً لكن مع حلقات التكرار loop يمكنك كتابة الأمر البرمجي مرة واحدة في لغة جافا سكريبت.

document.write('Text 1');
document.write('Text 2');
document.write('Text 3');
document.write('Text 4');
document.write('Text 5');
document.write('Text 6');

</> Initialization value for loop in JavaScript
قيمة التهيئة بداخل for loop في لغة جافا سكريبت

  • عملية التهيئة Initialization في حلقات التكرار loops هي عملية تعيين assign قيمة أولية لمتغير variables.
  • تبدأ حلقات التكرار loop بقيمة التهيئة Initialization.
  • بناء علي هذة القيمة الأولية يتم انقاصها أو زيادتها مع كل حلقة تكرار.
  • يمكننا تهيئة عدد غير محددود من المتغيرات قبل  variables قبل بدء التكرار loop.
Initialization value

قيمة التهيئة الأولية تكون بداخل الأقواس وهي أول عامل يتم تمريرة ل for loop في لغة جافا سكريبت.

for (i = 0,condation;iteration ) {
  /* Do something */
}
ملاحظات هامة
ليس ضرورياً إستخدام قيمة التهيئة Initialization في JavaScript يمكنك تجاهلها وسوف يعمل التكرار loop بدونها.

</> Condition for loop in JavaScript
الشرط مع حلقات التكرار for loop في لغة جافا سكريبت

  • يستخدم الشرط Condition للتحقق من قيمة معينه بناء عليها إذا كانت صحيحة true  يتم تنفيذ التكرار loop.
  •  اذا كان الشرط Condition صحيحاً true يعني ذلك أن التكرار loop يستمر في عملية التكرار ويتم يتنفيذ الأمر البرمجي المحجوز بداخل الأقواس المُجعدة {} curly braces حتي أن يصبح الشرط غير صحيح flase.
  • تتجاهل لغة جافا سكريبت الأوامر المحجوزة بداخل الأقواس المُجعدة {} curly braces أذا أصبح الشرط غير صحيح false.
condation statement

عبارة الشرط condation statement يتم تمريرها كثاني عامل لحلقة التكرار for loop في حال تحقق الشرط أي انه صحيح يتم تنفيذ جميع الأوامر المحجوزة بداخل for loop.

for (i = 0,i <= 10;iteration ) {
  /* Do something */
}

ليس ضروري تمرير الشرط إلي for loop  في Java Script يمكنك تجاهلها وسوف يعمل التكرار  loop بدونها ولكن التكرار loop سوف يعمل عدد لا نهائي من المرات يجب استخدام break;

</> iterator for loop in JavaScript
زيادة أو انقاص قيمة التهيئة في حلقات التكرار for loop في لغة جافا سكريبت

  • iterator هو اضافة عملية النقصان أو الزيادة علي المتغير الذي قمنا بتهيئته عند بداية for.
  • يعمل iterator بعد أنتهاء كل حلقة تكرار loop بعد تنفيذ جميع الأوامر البرمجية المحجوزة بداخل الأقواس المُجعدة {} curly braces داخل for loop.
  • ليس ضروري استخدام iterator يمكنك تجاهلها وسوف يعمل التكرار loop بدونه ولكن سوف يتم التكرار عدد لا نهائي من المرات.
  • iterator يمكن ان تستخدم اي شئ بداخله مثل النقصان بدل عملية الزيادة increment (i--) او عملية زيادة increment (i++) أو أي شئ أخر يمكنك تنفيذة.
for loop example

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

for (i = 1; i <= 10; i++) {
  document.write("Text " + i + "<br>");
}

في المثال السابق:

  • قيمة التهيئة initialization هي انشاء متغير قبل بدء التكرار loop و (var i = 1).
  • الشرط condition هو اضافة شرط للتكرار loop لكي يقوم loop بالبدء وتنفيذ الأوامر البرمجية حتي أن يصبح الشرط غير صحيح false حتي أن تصل i = 11.
  • ال iteration تقوم باضافة 1 علي قيمة ال i  في كل مرة بعد تنفيذ ال code block (i++).

</> use for loop to display array data in JavaScript
إستخدم for loop لعرض بيانات مصفوفة بلغة جافا سكريبت

يمكننا عمل تكرار مجموعة من البيانات بداخل مصفوفة والتكرار يعمل بعدد العناصر الموجودة بداخل المصفوفة في لغة جافا سكريبت.

for loop with array

حلقة تكرار for loop علي مجموعة بيانات بداخل مصفوفة array في لغة جافا سكريبت.

let courses= ["HTML", "CSS", "JavaScript", "CSS"];
for (let i = 0;i < courses.length;i++){
  document.write((i + 1) + "- " + courses[i] + "<br>");
}
nested itrator

يمكن كتابة itrator بداخل حلقة التكرار for loop مع الأوامر البرمجية التي نفذ داخل loop في لغة جافا سكريبت.

let courses= ["HTML", "CSS", "JavaScript", "CSS"];
let i = 0;
let len = courses.length;
let text = "";
for (; i < len; ) {
  text += (i + 1) + "- " + courses[i] + "<br>";
  i++;
}
document.write(text);

</> Create HTML table with for loop in JavaScript
إنشاء جدول HTML عن طريق for loop بلغة جافا سكريبت

يمكننا إضافة مجموعة من البيانات بداخل html table سواء كانت بداخل المصفوفة array او بداخل كائن object بسهولة بواسطة حلقات التكرار for loop.

Create HTML Table With Loop

يظهر الجدول بهذا الشكل بعد عرض البيانات

for loop with html table

عرض مجموعة بيانات محفوظة بداخل مصفوفة array عن طريق حلقات التكرار for loop بداخل جدول html عن طريق document.write في لغة جافا سكريبت.

var courses = ['HTML','CSS','PHP','JS','JQuery','MY SQL','Angular'];
document.write("<table class='table'>");
    for (var i=0; i < courses.length; i++) {
    document.write("<tr>");     
    document.write("<td>"+ (i + 1)  +"</td><td>"+ courses[i] +"</td>");
    document.write("</tr>");
  }
document.write("</table>");
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
1
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات