# Цикли

{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shpp.gitbook.io/zero/tutorials/loops.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.