انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 31
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
11,639
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

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 في لغة جافا سكريبت

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

Hand Loop

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

HTML 
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 في لغة جافا سكريبت.

HTML 
for (i = 0,condation;iteration ) {
  /* Do something */
}

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.

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

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 في لغة جافا سكريبت

HTML 
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 في لغة جافا سكريبت.

HTML 
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 في لغة جافا سكريبت.

HTML 
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 في لغة جافا سكريبت.

HTML 
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>");
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…