> For the complete documentation index, see [llms.txt](https://shpp.gitbook.io/zero/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shpp.gitbook.io/zero/tutorials/loops.md).

# Цикли

{% embed url="<https://www.youtube.com/watch?v=hWucIfp9bZ4>" %}
Цикли в Javascript, відео від Ш++
{% endembed %}

... відео має дати базове поняття циклів, але все ж таки ми маємо і текстову версію, що трошечки по-іншому пояснює цикли.

{% hint style="info" %}
В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на <info@programming.org.ua>
{% endhint %}

Отже, якщо ми хочемо:

* заповнити кожну точку на екрані білим кольором
* вивести 1000 написів "привіт!"
* малювати безмежну анімацію

... то нам потрібні цикли. У JavaScript їх багато, але поки для роботи над завданнями нам вистачить `while`.

### Оператор while

Синтаксис цього оператора такий:

```javascript
while (умова) {
    // код всередині циклу
}
```

Переклад на людську мову:

```javascript
перевірити (умову), якщо вона зараз правдива, то
    виконати код всередині циклу, від початку до кінця,
стрибнути вгору, до перевірки умови
```

Код всередині фігурних дужок буде виконуватися стільки разів, скільки разів вираз в круглих дужках після while дорівнюватиме `true`. Звісно, що на значення цього виразу може вплинути код у фігурних дужках (див. приклад нижче). Одне виконання коду в фігурних дужках називається кроком циклу або ітерацією.

Наприклад, порахуємо десять кроликів:

```javascript
let rabbits = 0;

while (rabbits < 10) {
    rabbits = rabbits + 1;
    console.log(rabbits + " кролик(ів)");
}
```

Спочатку у нас 0 порахованих кроликів, потім з кожною ітерацією циклу кількість порахованих кроликів збільшується на 1, поки ми не порахуємо всі десять.

З кожною ітерацією циклу ми "підштовхуємо" змінну `rabbits`, і в підсумку, після великої кількості таких підштовхувань, умова `(rabbits <10)` вже перестає бути правдою, і комп'ютер перестрибує цикл, а після нього інших команд немає.

### Практика

```javascript
let i = 0;
while (i < 10) {
    console.log("*");
}
```

що буде?

```javascript
let i = 0
while (i < 10) {
    console.log("*");
    i = 1;
}
```

що буде?

```javascript
let i = 0
while (i < 10) {
    i = 10;
    console.log("*");
}
```

що буде?

```javascript
let i = 0;
while (i < 10) {
    console.log("*");
    i = 1;
    i = 2;
    i = 3;
    i = 4;
    i = 5;
    i = 6;
    i = 7;
    i = 8;
    i = 9;
    i = 10;
}
```

що буде?

```javascript
let i = 0;
while (i < 10) {
    console.log("*");
    i + 1;
}
```

... а для малювання рядка з зірочок підійде команда `console.put` від Ш++ *(нагадуємо: цієї команди немає в "оригінальному" JavaScript, вона є лише в нашому* [*учбовому редакторі*](https://js.ide.shpp.me/)*)*

```javascript
let i = 10;
while (i >= 0) {
    console.put("*"); // скільки буде зірочок?
    i = i - 1;
}
```

## Додаткові матеріали

[Про цикли for, while та do while](https://uk.javascript.info/while-for)  *(uk.javascript.info)*

[Про структуру циклів](/zero/tutorials/nagadaiki-poyasnyaiki.md#struktura-cikliv) *(Ш++)*

[Поради щодо break та continue](/zero/tutorials/nagadaiki-poyasnyaiki.md#continue-ta-break) *(Ш++)*

{% embed url="<https://youtu.be/QjDzp-yM_To>" %}

## Обов'язкові задачі

*Виникли питання або труднощі?* [*Зверніться за допомогою до Ш++.*](/zero/arrangements/support.md)

{% content-ref url="/pages/pjlukGGoWl0t2kPYeqhS" %}
[Зірочки](/zero/tutorials/loops/stars.md)
{% endcontent-ref %}

{% content-ref url="/pages/kW5NRVRTor7qpBZvASX3" %}
[Числовий ряд](/zero/tutorials/loops/numbers_sequence.md)
{% endcontent-ref %}

{% content-ref url="/pages/iKrjehpWnjIuDUPrt2k2" %}
[Квадрат](/zero/tutorials/loops/square.md)
{% endcontent-ref %}

{% content-ref url="/pages/rsnb7GHTVwB3aa79Egju" %}
[Трикутники](/zero/tutorials/loops/triangles.md)
{% endcontent-ref %}

{% content-ref url="/pages/2DOFAUuQ2VV05DhrLR4B" %}
[Ялинка](/zero/tutorials/loops/christmas_tree.md)
{% endcontent-ref %}

{% content-ref url="/pages/CnXS9tiH9Z60nfXRjIND" %}
[Найбільше парне число](/zero/tutorials/loops/highest_even_number.md)
{% endcontent-ref %}

{% content-ref url="/pages/oG8QwWQiNfDgM0oHGqbK" %}
[Сума послідовності чисел](/zero/tutorials/loops/sum_of_numbers_sequence.md)
{% endcontent-ref %}