JavaScript For Loop
حلقات التكرار loops - جُملة for في لغة جافا سكريبت
ستتعلم في هذا الدرس حلقات التكرار loops - وجُملة for في لغة جافا سكريبت وستتعلم عمل تكرار علي مجموعة بيانات محفوظة بداخل مصفوفة array وعرضهم في list وطريقة عرضهم في جدول منسق بلغات html + css وايضاً ستتعلم استخدام itrator بداخل الحلقات والشروط conditions وقيم التهيئة initialization.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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 وهم :
- initialization متغير يتم تهيئتة بقيمة محددة قبل أن يتم التكرار.
- test statement هو الشرط إذا تحقق سوف يتم تنفيذ الأوامر البرمجية المحجوزة بداخل for loop.
- 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 */
}
ملاحظات هامة
</>
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>");
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
