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

Faisal Almalki · 8 نوفمبر 2018

السلام عليكم ورحمة الله

اريد معرفة عمل المتغير text في هذه السلسلة

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Loops</h2>

<p id="demo"></p>

<script>

var text = "";
for (i = 0; i < 100; i++) {
    text += i+1 + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Mohamad Ibrahim3 · 8 نوفمبر 2018

في البداية قمت بإنشاء متغير نصي خارج الحلقة، هذا المتغير هو سلسلة نصية ولكنها في هذه اللحظة لا تحتوي على شيء.

قمت بعدها بإنشاء حلقة loop لتدور 100 مرة. في كل مرة سيتم فتح المتغير text والنظر إلى قيمته الحالية ومن ثم إضافة إليها:

i + 1 + "<br>" //سطر جديد في النهاية

عند الانتهاء من الحلقة سيجمع المتغير text جميع القيم بدء من الواحد وحتى 100 (مع فاصل نهاية السطر بين كل رقم، يعني <br>).

قصي العلي · 15 ديسمبر 2018

أهلاً فيصل،

المتحول text هو متحول من النوع string (سلسلة نصية) ويحمل قيمة سلسلة نصية فارغة، وعند البدء بتنفيذ حلقة for لأول مرة سيتم تهيئة المتحول i بالقيمة 0 واختبار فيما إذا كانت قيمته أصغر تماماً من 100 عندها سيتم الانتقال لتنفيذ التعليمات داخل حلقة for لأن الشرط محقق وهو أن قيمة المتحول i أصغر تماماً من 100 :

text += i+1 + "<br>";

في هذا السطر سيتم إضافة القيمة

i+1 + "<br>";

إلى القيمة القديمة للمتحول text والتي كانت عبارة عن سلسلة نصية فارغة, وهنا قيمة المتغير i كانت 0 وبعد تنفيذ التعليمة i+1 ستصبح قيمتها 1 وستضاف هذه القيمة إلى المتحول text ثم ستضاف القيمة "<br>" والتي تعني إنهاء السطر الحالي والبدء من سطر جديد في لغة HTML.

أما عند التنفيذ الثاني لحلقة for ستصبح قيمة المتحول i تساوي 2 وبعدها سيتم اختبار الشرط فيما إذا كانت قيمة المتحول i أصغر تماماً من القيمة 100، وبسبب تحقق الشرط سيتم تنفيذ التعليمة الموجودة داخل جسم الحلقة :

text += i+1 + "<br>";

وهنا ستضاف القيمة

i+1 + "<br>";

إلى القيمة القديمة للمتحول text والتي كانت عبارة عن

1
// وهذا السطر الفارغ أيضاً

وهنا قيمة المتغير i كانت 1 وبعد تنفيذ التعليمة i+1 ستصبح قيمتها 2 وستضاف هذه القيمة إلى المتحول text ثم ستضاف القيمة "<br>" وستصبح عندها النتيجة المخزنة في المتحول text :

1
2
// وهذا السطر الفارغ أيضاً

وهكذا سيتم تكرار الحلقة لحين وصول المتحول i إلى القيمة 100 سيكون أخر عدد أضيف إلى قيمة المتحول text هو 100 بالإضافة إلى السطر الفارغ.

هنا نلاحظ استخدام المعامل (=+) والذي يعني أضف إلى القيمة القديمة للمتحول هذه القيمة الجديدة، وكذلك استخدام المعامل (+) وهو معامل الجمع يُنتِج مجموع المدخلات الرقمية، أو يضيف سلسلتين نصيتين إلى بعضها.

ولمعلوماتٍ أكثر عن المعاملات الرياضية يمكنك زيارة الرابط التالي:

https://wiki.hsoub.com/JavaScript/Arithmetic_Operators

ولمعلوماتٍ أكثر عن حلقة for في لغة javascript يمكنك زيارة الرابط التالي:

https://wiki.hsoub.com/JavaScript/for

ولمعلوماتٍ أكثر عن المتحولات النصية (string) في لغة javascript يمكنك زيارة الرابط التالي:

https://wiki.hsoub.com/JavaScript/String