English translation by ChatGPT

Ahmed Zayed 6/2/1/1 أساسيات الجافاسكريبت 'التكرارات أو الدورات Loops'

Course

دورة تدريبية

6/2/1/1 أساسيات الجافاسكريبت 'التكرارات أو الدورات Loops'

تطوير المواقع الإلكترونية MEAN-Stack from A to Z التأسيس Level1

تعتبر الـ loops من أهم العناصر المتواجدة بأي لغة برمجة و من أكثر العناصر التي تستخدم بكثرة و لها العديد من الإستخدامات هي ببساطة أن تقوم بتكرار كود معين لعدد من الدورات لتنفيذ أمر أو عدد من الأوامر مثلا إذا أردنا أن نقوم بطباعة شهادات نجاح لكل الطلبة الناجحين في مرحلة البكالوريوس فنقوم بإحضار Object يحتوي علي كل الطلبة الناجحين في المرحلة البكالوريوس و عمل loop عليهم و طباعة شهادة كل متخرج واحد بعد الأخر , و الكثير من الأمثلة الأخري سنتطرق الأن للشكل البسيط للـ loops و سنستكمل باقي الأشكال و الإستخدامات في المحاضرة التالية بعد دراسة الـ arrays لأن أكثر إستخدامات الـ loops تحدث مع الـ arrys

for loop

أول أشكال الـ loops هو جملة For حيث تقوم بعدد من التكرارت حتي ينم تحقق شرط معين و تكتب هكذا

Code


  for(عدد الخطوات في كل دورة , الشرط المراد تحقيقه , بداية العد)
  {
  // الكود المراد تنفيذه
  }

فمثلا إذا أردنا تكرار طباعة كلمة hello في الكونسول 3 مرات يمكننا كتابة الكود التالي:

Code


  for(var i = 0; i <= 2; i++){
    console.log("hello");
    }

في هذا الكود يتم تحديد متغير بإسم "i” و تعيين قيمة له بـ 0 و تحديد أن الشرط اصغر أو يساوي 2 , و تحديد ان كل دورة سيزيد المتغير بقيمة 1 , اي ان الدورات ستتم عندما يكون المتغير بـ 0 و بـ 1 و بـ 2 و بذلك يتم كتابة كلمة hello في الكونسول 3 مرات أيضا يمكن طباعة مثلا كلمات hello loop no 1 , hello loop no 2 , hello loop no 3 و ذلك عن طريق المتغير نفسه و لكن لو قمنا بطباعة المتغير فسيكتب hello loop 0 , hello loop 1, hello loop 2 لأن المتغير يبدأ من صفر لذلك يجب أن نزيد قيمة المتغير قبل طباعته مع مراعاة غلطة شائعة قد تحدث مثل الكود التالي:

Code


  for(var i = 0; i <= 2; i++){
    console.log("hello loop " + ++i);
    }

في الكود السابق عند التنفيذ سيتم كتابة hello loop 1, hello loop 3 فقط لماذا في جملة for يقوم الكود بزيادة قيمة المتغير i في كل دورة بمقدار واحد كما حددنا له و لاننا لا نريد ان يظهر في الطباعة أن العد يبدأ من صفر (مثلا لو كان لدينا بيانات لعدد من الموظفين فليس من المنطقي عندما نقوم بطباعة كشف بأسمائهم أن يكون أول اسم من الكشف رقمه 0 ) بالفعل نريد زيادة المتغير i بواحد في كل مرة قبل طباعته و لكن في الكود السابق عند زيادة قيمة i في الدورة الأولي ففي بداية الدورة الثانية تكون قيمة المتغير i اصبحت 2 و ليست واحد و تزيد مرة أخري عند الطباعة لتصبح 3 في نهاية الدورة الثانية و بذلك في بداية الدورة الثالثة يصبح قيمة i أكبر من قيمة الشرط الموضح لذلك لا تتم الدورة الثالثة أذا فليس من الصحيح زيادة قيمة المتغير كما في المثال السابق عند الطباعة لتحقيق الهدف المطلوب و لتحقيق الهدف المطلوب يتم تغيير الكود بالشكل التالي:

Code


  for(var i = 0; i <= 2; i++){
    var x = i + 1;
    console.log("hello loop " + x);
    }

في الكود السابق يكون دائما المتغير x أزيد من المتغير i بواحد قبل الطباعة و المتغير x لا يؤثر علي عدد العدات في كل دورة لذلك يتم زيادة المتغير i بواقع 1 فقط و ليس 2 كما في الكود الأسبق و يتم طباعة hello loop 1 , hello loop 2 , hello loop 3 كما اردنا بالظبط .

While loop

صورة أخري من صور الـ loop هي جملة الـ while تختلف عن جملة الـ for في بعض الأشياء مثلا في جملة الـ for يتم تعريف المتغير و تعيين قيمته في جملة الـ for و أيضا تحديد الشرط و عدد الزيادات التي سيزيدها المتغير في كل دورة إنما في جملة while يتم تحديد المتغير خارج جملة while و يتم تحديد الشرط داخل جملة while و تحديد عدد الزيادات للمتغير في كل دورة داخل الكود الذي يتم تنفيذه بعد جملة الـ while مثل المود التالي الذي يقوم بكتابة hello في الكونسل 3 مرات:

Code


  var i = 0;
  while(i < 3){
  console.log('hello');
  i++;
  }

ف ي الكود السابق تم تعيين المتغير i ب 0 بعدها تمت طباعة الكلمة في الكونسول و بعدها تم زيادة المتغير i بـ 1 لتبدأ دورة جديدة و المتغير بـ 1 و بعدها دورة اخري و المتغير بـ 2 و بعدها لن تتم الدورة الرابعة عندما يكون المتغير ب3 في الكود السابق يجب مراعاة واحدة من أشهر الأخطاء شيوعا التي تحدث في الكود عندما ينسي المبرمج هذا السطر


i++;

ما سيحدث أن المتغير i سيظل دائما بـ 0 و مما يعني أنه سيظل للأبد أصغر من الشرط المطلوب تحققه أي أن الـ loop يسظل يعمل للأبد بدون توقف سيظل يطبع كلمة hello إلي ما لا نهاية بذلك لن يتم تنفيذ اي كود أسف الـ loop اي سيتوقف التطبيق عن العمل و سيتم استهلاك مصادر الجهاز مثل الذاكرة و المعالج إلي أن يصبح المتصف لا يستجيب

ت تميز جملة while بميزة لا توجد في جملة for تذكر عندما أردنا طباعة رقم متسلسل لا يبدأ بـ 0 قمنا بتعيين متغير أخر و هو x ليأخذ قيمة المتغير i و يضيف عليه 1 بينما اذا أردنا تنفيذ ذلك بجملة while لن نحتاج لذلك كل ما يجب علينا فعله تغيير ترتيب الكود فبدلا من زيادة قيمة المتغير i بـ 1 بعد الطباعة في الكونسول نعكس الترتيب كالتالي :


var i = 0;
while(i < 3){
i++;
console.log('hello while ' + i);
}

جملة do while

تشبه جملة while و لكنها معكوسة سنري الفرق الأن في جملة الـ while كنا نعرف المتغير و نعطيه قيمة البداية و بعدها نكتب الـ while و معها الشرط الذي يجب أن يتحقق ليحدث الـ loop اذا فماذا لو كان الشرط غير متحقق مثلا في الكود التالي:

Code


  var i = 4;
  while(i < 3){
  console.log('hello');
  i++;
  }

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

Code


  var i = 4;
  do{
  console.log('hello world');
  i++;
  }
  while(i<3)

في هذا الكود سيتم طباعة كلمة hello world مرة واحدة في الكونسول قبل أن تكتشف جملة while أن الشرط غير متحقق لتقوم بإنهاء الـ loop

1/1/2/6 JavaScript fundamentals 'Loops'

Web Development MEAN-Stack from A to Z Fundamentals Level1

Loops are one of the most important elements in any programming language and are widely used for various purposes. Simply put, loops allow you to repeat a specific block of code for a certain number of iterations to execute a task or a set of tasks. For example, if we want to print graduation certificates for all successful bachelor's degree students, we can fetch an object containing all successful bachelor's students and loop through them, printing each graduate's certificate one after the other. There are many other examples, and we will now explore the basic structure of loops. We will continue with other forms and uses in the next lecture after studying arrays, as most loop usage occurs with arrays.

for loop

The first type of loop is the "for" loop, which repeats a block of code until a certain condition is met. It is written as follows:

Code


    for(initialization; condition; increment/decrement)
    {
    // Code to be executed
    }

For example, if we want to print the word "hello" in the console 3 times, we can write the following code:

Code


    for(var i = 0; i <= 2; i++){
      console.log("hello");
      }

In this code, a variable named "i" is initialized with a value of 0, and the condition is set to "i <= 2." The variable "i" is incremented by 1 in each iteration. Thus, the loop will run when "i" is 0, 1, and 2, printing "hello" in the console 3 times. We can also print something like "hello loop no 1," "hello loop no 2," "hello loop no 3" using the same variable. However, if we print the variable directly, it will output "hello loop 0," "hello loop 1," "hello loop 2" because the variable starts from 0. Therefore, we need to increment the variable before printing it, while avoiding a common mistake like the following code:

Code


    for(var i = 0; i <= 2; i++){
      console.log("hello loop " + ++i);
      }

In the above code, when executed, it will only print "hello loop 1" and "hello loop 3." Why? In the "for" loop, the code increments the variable "i" by 1 in each iteration, as we specified. Since we don't want the count to start from 0 (for example, if we have a list of employees, it doesn't make sense for the first employee to be numbered 0), we indeed want to increment the variable "i" by 1 before printing it. However, in the above code, when "i" is incremented in the first iteration, at the start of the second iteration, the value of "i" becomes 2 instead of 1, and it increments again during printing to become 3 at the end of the second iteration. Thus, at the start of the third iteration, the value of "i" exceeds the specified condition, so the third iteration does not occur. Therefore, it is incorrect to increment the variable as in the previous example when printing to achieve the desired goal. To achieve the desired goal, the code should be modified as follows:

Code


    for(var i = 0; i <= 2; i++){
      var x = i + 1;
      console.log("hello loop " + x);
      }

In the above code, the variable "x" is always one greater than the variable "i" before printing. The variable "x" does not affect the number of iterations, so the variable "i" is incremented by only 1, not 2 as in the previous code. This results in printing "hello loop 1," "hello loop 2," and "hello loop 3" exactly as we wanted.

While loop

Another form of loop is the "while" loop. It differs from the "for" loop in some ways. For example, in the "for" loop, the variable is defined and initialized within the loop, and the condition and the number of increments are specified within the loop. However, in the "while" loop, the variable is defined outside the loop, the condition is specified inside the loop, and the number of increments is specified within the code block executed after the "while" statement, as shown in the following example, which prints "hello" in the console 3 times:

Code


    var i = 0;
    while(i < 3){
    console.log('hello');
    i++;
    }

In the above code, the variable "i" is initialized to 0, then the word is printed in the console, and then the variable "i" is incremented by 1 to start a new iteration with "i" as 1. Another iteration occurs with "i" as 2, and then the fourth iteration does not occur when "i" becomes 3. In the above code, one of the most common mistakes that programmers make is forgetting this line:


    i++;

What will happen is that the variable "i" will remain 0 forever, meaning it will always be less than the required condition, and the loop will run indefinitely without stopping. It will keep printing "hello" endlessly, and no code below the loop will be executed. The application will stop responding, and system resources like memory and CPU will be consumed until the browser becomes unresponsive.

The "while" loop has a feature that the "for" loop does not. Remember when we wanted to print a sequential number that does not start with 0, we had to define another variable "x" to take the value of "i" and add 1 to it. However, if we want to achieve the same with a "while" loop, we don't need to do that. All we need to do is change the order of the code. Instead of incrementing the variable "i" by 1 after printing in the console, we reverse the order as follows:


    var i = 0;
    while(i < 3){
    i++;
    console.log('hello while ' + i);
    }

do while loop

The "do while" loop is similar to the "while" loop but inverted. Let's see the difference now. In the "while" loop, we define the variable and assign it an initial value, then write the "while" statement with the condition that must be met for the loop to occur. So, what if the condition is not met? For example, in the following code:

Code


    var i = 4;
    while(i < 3){
    console.log('hello');
    i++;
    }

The condition can never be met because the initial value is already greater than the number required for the loop to start. In some cases, we want the code inside the loop to be executed at least once before checking the condition. This is where the "do while" loop comes in handy. It inverts the process by executing the code first and then checking the condition, as shown in the following example:

Code


    var i = 4;
    do{
    console.log('hello world');
    i++;
    }
    while(i<3)

In this code, the phrase "hello world" will be printed once in the console before the "while" statement detects that the condition is not met and terminates the loop.

February 28, 2025

Course

دورة تدريبية

6/2/1/1 أساسيات الجافاسكريبت 'التكرارات أو الدورات Loops'

for loop

While loop

جملة do while

1/1/2/6 JavaScript fundamentals 'Loops'

for loop

While loop

do while loop

Read More

إقرأ المزيد

دورة تدريبية

Course

1/2/1/1 أساسيات الجافاسكريبت'المتغيرات'

1/1/2/1 JavaScript fundamentals 'Variables'

دورة تدريبية

Course

5/2/1/1 أساسيات الجافاسكريبت 'الجمل الشرطية Conditional statements'

1/1/2/5 JavaScript fundamentals 'Conditional Statements'

مشكلة التسويق الرقمي بين الإختزال و الأوهام

The Problem of Digital Marketing Between Reductionism and Illusions

أزمة صناعة المحتوى الرقمي

Crisis of Digital Content Industry

دراسة

Study

إستراتيجيات التسويق الرقمي للدورات التسويقية

Digital Marketing Strategies for Training Courses

Keywords

كلمات مفتاحية