جافاسكربتالحلقات

مفهوم الحلقات

نستخدم الحلقات ( Loops ) بهدف جعل الكود نفسه يعاد تنفيذه عدد محدد من المرات تم التصريح عنه بشكل مباشر أو أنه يتم تحديده نسبةً لعدد العناصر أو الخصائص التي يتم التعامل معها بواسطة الحلقات.

في هذا الدرس ستتعرف على جميع أنواع الحلقات الموجودة في جافاسكربت و كيفية استخدام كل واحدة منها.

أنواع الحلقات

في جافاسكربت يوجد خمس أنواع من الحلقات:

• الحلقة for تستخدم لتنفيذ الكود عدد محدد من المرات.
• الحلقة for in تستخدم للمرور على جميع خصائص الكائن.
• الحلقة for of تستخدم للمرور على جميع العناصر الموجودة في المصفوفة.
• الحلقة while تستخدم للإستمرار بتنفيذ الكود طالما أن الشرط الذي وضعناه في بداية الحلقة لا يزال يتحقق.
• الحلقة do while تستخدم لتنفيذ الكود و من ثم الإستمرار بتنفيذه طالما أن الشرط الذي وضعناه في نهاية الحلقة لا يزال يتحقق.

الحلقة for

نستخدم الحلقة for لتنفيذ الكود عدد محدد من المرات.
فمثلاً إذا أردنا تنفيذ كود معين 5 مرات، نضعه بداخل حلقة تعيد نفسها 5 دورات.

طريقة استخدامها

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

• initialization — هي أول خطوة تتنفذ في الحلقة و هي تتنفذ مرة واحدة فقط على عكس جميع الخطوات الموجودة في الحلقة. في هذه الخطوة نقوم بتعريف متغير (يسمى عدّاد) و يجب وضع بعده فاصلة منقوطة.
• condition — هي ثاني خطوة تتنفذ في الحلقة و هي تتنفذ في كل دورة. في هذه الخطوة نقوم بوضع شرط يحدد متى تتوقف الحلقة و نضع بعده فاصلة منقوطة. في كل دورة يتم التأكد أولاً إذا تحقق هذا الشرط أم لا، و طالما أن نتيجة الشرط تساوي true فهذا يعني أنه سيتم تكرار الكود.
• statements — هي ثالث خطوة تتنفذ في الحلقة و هي تتنفذ في كل دورة. هذه الخطوة تعني تنفيذ جميع الأوامر الموجودة في الحلقة بين أقواس البداية و النهاية. بعد أن تتنفذ جميع الأوامر سيصعد مفسر الكود إلى الخطوة الأخيرة التي تحدث في نهاية كل دورة و هي إما زيادة قيمة العداد أو إنقاصها.
• decrement أو increment — هي الخطوة الرابعة و الأخيرة، و هي تتنفذ في كل دورة. هنا نحدد كم تزداد أو تنقص قيمة العداد في نهاية كل دورة. و هنا لا يجب وضع فاصلة منقوطة بعدها.

في المثال التالي قمنا بتعريف حلقة تطبع جميع الأرقام من 1 إلى 5.

// الحالية i في كل دورة من دورات الحلقة سيتم طباعة قيمة العداد
for(let i=1; i<=5; i++) {
    document.write(i + '<br>');
}

الحلقة while

نستخدم الحلقة while لإعادة تنفيذ الكود نفسه بشكل مستمر طالما أن الشرط الذي وضعناه في الحلقة لا يزال يتحقق.
فمثلاً إذا أردنا تنفيذ كود معين 5 مرات، نضعه بداخل حلقة تعيد نفسها 5 دورات.

طريقة استخدامها

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

• condition — هنا نضع الشرط الذي يحدد ما إن كانت الحلقة يجب تتوقف عن تكرار الكود الموجود فيها أم لا. إذاً في كل دورة يتم التأكد أولاً إذا تحقق هذا الشرط أم لا. طالما أنه يتحقق، أي نتيجة الشرط تساوي true فهذا يعني أنه سيتم تكرار الكود.
• statements — هنا نضع جميع الأوامر التي نريدها أن تتنفذ في كل دورة. بعد أن تتنفذ جميع الأوامر سيصعد مفسر الكود إلى الشرط الموضوع في الحلقة ليرى ما إن كان يجب إعادة تنفيذ هذه الأوامر أم لا.

في المثال التالي قمنا بتعريف حلقة تطبع جميع الأرقام من 1 إلى 5.

let i=1; 

// الحالية i في كل دورة من دورات الحلقة سيتم طباعة قيمة العداد
while(i<=5) {
    document.write(i + '<br>');
    i++;
}

الحلقة do while

نستخدم الحلقة do while لتنفيذ الكود و من ثم الإستمرار بتنفيذه طالما أن الشرط الذي وضعناه في نهاية الحلقة لا يزال يتحقق.

طريقة استخدامها

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

• statements — هنا نضع جميع الأوامر التي نريدها أن تتنفذ في كل دورة. بعد أن تتنفذ جميع الأوامر سيتم التأكد من الشرط الموضوع في الحلقة لمعرفة ما إن كان يجب إعادة تنفيذ هذه الأوامر أم لا.
• condition — هنا نضع الشرط الذي يحدد ما إن كانت الحلقة يجب تتوقف عن تكرار الكود الموجود فيها أم لا. طالما أنه يتحقق، أي نتيجة الشرط تساوي true فهذا يعني أنه سيتم تكرار الكود.

في المثال التالي قمنا بتعريف حلقة تطبع جميع الأرقام من 1 إلى 5.

let i=1; 

// الحالية i في كل دورة من دورات الحلقة سيتم طباعة قيمة العداد
do {
    document.write(i + '<br>');
    i++;
}
while(i<=5);

الحلقة for in

نستخدم الحلقة for in للمرور على جميع الخصائص و القيم الموجودة في الكائن أو للمرور على جميع العناصر الموجودة في المصفوفة بدون الحاجة لتعريف عدّاد و تحديد أين يبدأ و أين ينتهي.

طريقة استخدامها

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

• object — الكائن الذي سيتم المرور على جميع خصائصه أو المصفوفة التي سيتم المرور على جميع عناصرها.
• variable — هو متغير عادي، في كل دورة من دورات الحلقة يتم وضع قيمة عنصر من عناصر الكائن أو المصفوفة فيه بشكل تلقائي.
• statements — هي الأوامر التي سيتم تنفيذها في كل دورة من دورات الحلقات.

في المثال التالي قمنا بتعريف كائن إسمه person وضعنا فيها ثلاث قيم.
بعدها قمنا باستخدام حلقة for in للمرور على جميع أسماء و قيم خصائصه و من ثم طباعتها.

// عبارة عن مصفوفة فيها ثلاث عناصر languages
let person = {
    name: 'mhamad',
    age: 25,
    isWorking: true
};

// في كل دورة من دورات الحلقة سيتم تخزين إسم خاصيّة من خصائص الكائن
// و من ثم سيتم طباعة إسم الخاصية و قيمتها prop في المتغير person  
for(prop in person) {
    document.write(prop + ' = ' + person[prop] + '<br>');
}

في المثال التالي قمنا بتعريف مصفوفة إسمها languages وضعنا فيها ثلاث قيم.
بعدها قمنا باستخدام حلقة for in للمرور على جميع قيم عناصرها و من ثم طباعتها.

// عبارة عن مصفوفة فيها ثلاث عناصر languages
let languages = ['Arabic', 'English', 'French'];

// في كل دورة من دورات الحلقة سيتم تخزين رقم فهرس العنصر التالي 
// و من ثم سيتم طباعة قيمة العنصر نفسه x في المتغير languages في المصفوفة 
for(x in languages) {
    document.write(languages[x] + '<br>');
}

الحلقة for of

نستخدم الحلقة for of للمرور على جميع عناصر الكائن المتسلسلة ( Iterable Object ).
يمكن استخدام هذه الحلقة مع الكائنات التي هي عبارة عن سلاسل نصية ( Strings )، مصفوفات عادية ( Arrays )، خرائط ( Maps )، سلسلة عناصر موجودة في الصفحة ( NodeLists ).

طريقة استخدامها

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

• iterable — الكائن الذي سيتم المرور على جميع عناصره.
• variable — هو متغير عادي، في كل دورة من دورات الحلقة يتم وضع قيمة عنصر من عناصر الكائن فيه بشكل تلقائي.
• statements — هي الأوامر التي سيتم تنفيذها في كل دورة من دورات الحلقات.

في المثال التالي قمنا بتعريف متغير وضعنا فيه نص (أي سلسلة من الأحرف).
بعدها قمنا باستخدام حلقة for of للمرور على جميع أحرف النص و من ثم طباعتها الواحد تلو الآخر.

// يحتوي على نص و الذي بدوره عبارة عن سلسلة من الأحرف website المتغير أو الكائن
var website = "Harmash.com";
        
// في كل دورة من دورات الحلقة الحرف التالي الموجود في 
// و من ثم طباعته c سيتم تخزين في المتغير website الكائن 
for(c of website) {
    document.write(c + '<br>');
}

في المثال التالي قمنا بتعريف مصفوفة إسمها languages وضعنا فيها ثلاث قيم.
بعدها قمنا باستخدام حلقة for of للمرور على جميع قيم عناصرها و من ثم طباعتها.

// عبارة عن مصفوفة فيها ثلاث عناصر languages
let languages = ['Arabic', 'English', 'French'];

// في كل دورة من دورات الحلقة سيتم تخزين قيمة عنصر من عناصر 
// و من ثم سيتم طباعتها lang في المتغير languages المصفوفة 
for(lang of languages) {
    document.write(lang + '<br>');
}