مقدمة في JavaScript: الدرس الثاني حلقات التكرار
بسم الله الرحمن الرحيم
اللَّهُمَّ انْفَعْنَا بِمَا عَلَّمْتَنَا، وَعَلِّمْنَا مَا يَنْفَعُنَا، وَزِدْنَا عِلْمًا إِلَى عِلْمِنَا
سلسلة دروس JavaScript: الدرس الثاني حلقات التكرار.
قائمة الدروس السابقة:
في هذا الدرس إن شاء الله سوف نتعلم حلقات التكرار في لغة JavaScript، ولكن قبل أن نبدأ سوف نستذكر بعض المصطلحات و النقاط الهامة والتي سنستذكرها إن شاء الله دومًا خلال سلسلة الدروس هذه.
أولا تذكر JavaScript ليست Java.
ثانيًا سوف نرمز لاحقًا ل JavaScript بالرمز JS.
ثالثًا JavaScript التي سنخوضها في هذه الدروس هي Client Side ( طرف العميل)، وليست Server Side ( طرف الخادوم ).
ماهو التكرار؟ أو ماهي حلقات التكرار؟
في لغة JS قد نحتاج أحيانًا لتنفيذ اجراء (Action) ما مرارًا وتكرارًا وليس مرة واحدة فقط، ومن هذا المنطلق تستطيع مثلًا طباعة ارقام الأسطر بطريقة ديناميكية دون الحاجة لعمل هذا الإجراء بشكل يدوي، ومن الأمثلة كذلك طباعة المصفوفات والبيانات، مثلًا لديك مصفوفة (Array) تحتوي على مئة صف، وتريد أن تقوم بطباعة كُل الصفوف، وهذه العملية لا تتم من دون حلقات التكرار.
أولًا While loop:
النوع الأساسي من حلقات التكرار هو While loop والهدف منه هو القيام بعملية تنفيذ النص (statement) أو الشفرة المعطاة (code) مرارًا وتكرارًا مادام شرط التكرار (expression) يحمل القيمة TRUE (قيمة الصواب). متى ماأصبح شرط التكرار FALSE (قيمة الخطأ) يتوقف التكرار بشكل كامل. وقد تتضح الفكرة من خلال الصورة التالية:
لاحظ مادام شرط التكرار (Expression) المرمز له بـ A يحمل القيمة TRUE فسوف يستمر تكرار البيان البرمجي (Statement) المرمز له بـ B بالتنفيذ (Execute) حتى تصبح قيمة A تحمل القيمة FALSE عندها سوف يتوقف التكرار.
لاحظ النقطة البيضاء هي نقطة البداية التي سوف تعود لها حلقة التكرار مرارًا وتكرارًا أثناء التنفيذ مادام A يحمل القيمة TRUE والسوداء نقطة نهاية التكرار (End of loop) سوف تذهب إليها حلقة التكرار عندما تحمل A القيمة FALSE.
قد لا يبدو الأمر بتِلك السهولة من الصورة فقط، لذلك سوف نحاول طرح مثال وذلك لتوضيح الفكرة
ولكن أوه 
، قبل المثال، فالنتعلم كيف نقوم بكتابة While-loop. من الأن فصاعدًا سوف نضع بنية الشفرة (Syntax) بطريقة Pseudo code.
~ نقطة خارج الموضوع ولكن للفائدة:
Pseudo code أو بالعربية الشفرة الزائفة هي طريقة لتوضيح خطوات برمجية دون استخدام اوامر برمجية فعلية، وتستخدم احيانا لشرح Syntax للغة البرمجة ولكن مع الإخلال قليلًا في القيود، كوضع نص مكتوب مثلًا بين الشفرة البرمجية.
الصورة التالية توضح البنية الكتابية للـ while-loop في لغة JS.
لاحظ الخط الأحمر المتعرج يعني أن هذا النص مخالف لقيود اللغة.
الأن بعض الأمثلة البسيطة التي توضح عمل While-loop
<html>
<body>
<script type="text/javascript">
<!--
// سوف يحتفظ هذا المتغير بعدد الدورات
var count = 0;
// سيتم طباعة هذه الجملة أولًا.
document.write("Starting Loop ");
// حلقة التكرار
// هذا شرط التكرار
while (count < 10){
// سيتم طباعة هذا السطر في كل دورة
document.write("Current Count : " + count + "<br />");
// من الدرس الأول، هل تتذكر ماذا يعمل هذا السطر؟
count++;
}
// سيتم طباعة هذا السطر بعد انتهاء عمل جملة التكرار While
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>لاحظ الشفرة أعلاه تحتوي على بعض أكواد HTML، وذلك يعود لما شرحناه بالدرس الاول وهو أن لغة JS التي نتعلمها Client-side ويتم تنفيذها واستخدامها بجانب HTML للتعامل مع عناصرها.
لاحظ اذهب للدرس الأول لاستذكار موضوع DOM.
في المثال أعلاه سوف يبدأ التكرار عندما يكون المتغير count يحمل القيمة 0 وينتهي عندما يحمل القيمة 10. وسيكون ناتج الشفرة ( Code output ) كالأتي:
Starting Loop Current Count : 0 Current Count : 1 Current Count : 2 Current Count : 3 Current Count : 4 Current Count : 5 Current Count : 6 Current Count : 7 Current Count : 8 Current Count : 9 Loop stopped! Set the variable to different value and then try...
لاحظ الناتج (output) صحيح 100% ولكن يوجد خطأ بسيط فماذا تعتقد أن يكون ؟! الاجابة هي أننا استخدمنا document.write وليس document.writeln وهذا يجعل السطر الأول يكون بجانب السطر الثاني، والسطر ماقبل الأخير يكون بجانب السطر الذي يسبقه. لم تفهم؟ .. فقط قم بمراجعة الدرس الأول
ثانيًا Do-while:
ال do-while هي نوع ثاني من while أو بالأصح هي نفس الشيء ولكن الفرق بينها وبين while هي أنها تقوم بالتحقق من شرط التكرار في نهاية التكرار، مما يعني أنها تقوم بالتكرار على الأقل مرة واحدة فقط.
هذا يعني أن البرنامج سيقوم بالدخول لحلقة التكرار دون التحقق من شرط التكرار (Expression) ثم بعد ذلك اثناء محاولته للقيام بدورة ثانية سيتحقق من شرط التكرار فإن كان الشرط يعطي النتيجة TRUE سيتم استكمال دورة ثانية أما ان كان شرط التكرار يعطي النتيجة FALSE سوف يقوم بالخروج من حلقة التكرار، وقد يتضح هذا الأمر من خلال الصورة التالية:
لاحظ مادام شرط التكرار (Expression) المرمز له بـ A يحمل القيمة TRUE فسوف يستمر تكرار البيان البرمجي (Statement) المرمز له بـ B بالتنفيذ (Execute) حتى تصبح قيمة A تحمل القيمة FALSE سوف يتوقف التكرار.
لاحظ النقطة البيضاء هي نقطة البداية التي سوف يعود لها مرارًا وتكرارًا أثناء التنفيذ مادام A يحمل القيمة TRUE والسوداء نقطة نهاية التكرار (End of loop) سوف يذهب إليها عندما تحمل A القيمة FALSE.
لاحظ لان العملية هي Do while فلا يوجد تحقق في البداية (Condition) ولكن التحقق يتم بعد دورة كاملة مما يعني أن do-while تقوم بعملة دورة واحدة على الأقل في كُل الحالات.
الصورة التالية توضح البنية الكتابية (syntax) لشفرة do-while:
الأن مثال بسيط لتوضح عمل do-while:
<html>
<body>
<script type="text/javascript">
<!--
// متغير سوف يحمل عدد الدورات وسيكون شرط التكرار.
var count = 0;
// جملة طباعة
document.write("Starting Loop" + "<br />");
// بداية حلقة التكرار
// لاحظ لايوجد تحقق هنا
do{
// جملة طباعة
document.write("Current Count : " + count + "<br />");
// ؟
count++;
}
// التحقيق بعد اتمام الدورة ..
while (count < 5);
// جملة طباعة
document.write ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>في المثال أعلاه سوف تقوم جملة التكرار بتنفيذ دورة واحدة في البداية، بعد ذلك سيتم التحقق من شرط التكرار ان كانت النتيجة TRUE سوف يعمل دورة أخرى. عدى ذلك سوف تنتهي حلقة التكرار.
ناتج الشفرة أعلاه:
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...
ثالثًا for-loop:
هذا النوع الأخير و إن لم يكن كذلك من حلقات التكرار الأساسية، وهو مشابه تمامًا لل while إلا أنه قد يكون أبسط في الإستخدام وذو خصائص اضافية.
تحتوي for-loop على ثلاثة أقسام:
القسم الأول Initialization (العداد) وهو قيمة افتراضية تحتوي على رقم (عدد حقيقي -Integer-) من خلاله يتم المقارنة لاحقًا في القسم الثاني وهو مهم ومسؤول عن استمرار حلقة التكرار.
القسم الثاني Test Statement او Condition (شرط التكرار): يتم هنا التحقق من العداد (Counter) بواسطة Expression (تعبير منطقي)، وهو المسؤول الأول عن استمرار حلقة التكرار.
القسم الثالث Iteration Statement (جملة التكرار): يتم هنا التعديل على العداد بعد انتهاء دورة كاملة إما بزيادته او إنقاصه أو حتى القيام بعملية حسابية عليه لتغييره و هو قسم مهم جدًا لتفادي مشكلة التكرار اللامتناهي.
تتم العملية كالأتي، يتم تعيين قيمة في العداد ثم بعد ذلك التحقق منها من خلال شرط التكرار، ثم بعد ذلك يتم تنفيذ دورة كاملة في حال إنتهاء الدورة يتم التعديل على قيمة العداد من خلال جملة التكرار؛ والصورة التالية توضح طريقة عملها:
أما البنية الكتابية (Syntax) لل for-loop فهي كالأتي:
لاحظ يتم الفصل بين كل قسم بفاصلة منقوطة (Semi coma) وهذا يعني أن الأقسام ليست Parameter (معامل) وانما Section (قسم).
ولنوضح الفكرة بشكل كامل سنقوم بطرح مثال بسيط لعملها.
<html>
<body>
<script type="text/javascript">
<!--
// العداد
var count;
// جملة طباعة
document.write("Starting Loop" + "<br />");
// حلقة التكرار
//Counter //Condition //Iteration statement
for(count = 0; count < 10; count++){
// جمل طباعة يتم تنفيذها في كل دورة
document.write("Current Count : " + count );
document.write("<br />");
}
// جملة طباعة يتم تنفيذها بعد انتهاء حلقة التكرار
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>وناتج المثال أعلاه:
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
رابعًا أخطاء شائعة قد تقع بها عند استخدام حلقات التكرار:
الخطأ الأول تعيين شرط تكرار تكون نتيجته دائمًا TRUE (قيمة صواب) وهذا يوقعك بخطأ منطقي شائع جدًا يمسى Infinite loops (دورات لا متناهية).
الخطأ الثاني تعيين جملة تكرار غير صحيحة بحيث تقوم بتغيير العداد بشكل غير صحيح مما يؤدي لزيادة دوراة أو تنقيص دوراة أو حتى تجاوز البعض منها وهو خطئ شائع جدًا يمسى Logic error (خطأ منطقي).
أخيرًا نصائح في استخدام حلقات التكرار:
النصيحة الأولى حاول أن لا تستخدم حلقات التكرار بشكل كبير لأن ذلك يبطئ من سرعة أداء برنامجك.
النصيحة الثانية قم بالتخطيط قبل كتابة البرنامج لأن ذلك سوف يساعدك على اختيار النوع الأمثل من حلقات التكرار بالشكل الأمثل.
النصيحة الثالثة في معالجة البيانات باستخدام حلقات التكرار قم باستخدام Algorithm (آلقيوريثم) مناسب وذلك لزيادة اداء البرنامج.
هذا وصلى الله وسلم على سيدنا محمد وعلى آله وصحبه أجمعين.
أسأل الله تعالى أن أكون قد وفقت في إيصال المعلومة لكم، وأن أكون قد نفعتكم بهذا الدرس.
تحياتي لكم.
في الدرس القادم سوف نتحدث عن الأتي:
1 - الدوال Functions
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !