# Цикли

{% 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)*

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

[Поради щодо break та continue](https://shpp.gitbook.io/zero/nagadaiki-poyasnyaiki#continue-ta-break) *(Ш++)*

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

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

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

{% content-ref url="loops/stars" %}
[stars](https://shpp.gitbook.io/zero/tutorials/loops/stars)
{% endcontent-ref %}

{% content-ref url="loops/numbers\_sequence" %}
[numbers\_sequence](https://shpp.gitbook.io/zero/tutorials/loops/numbers_sequence)
{% endcontent-ref %}

{% content-ref url="loops/square" %}
[square](https://shpp.gitbook.io/zero/tutorials/loops/square)
{% endcontent-ref %}

{% content-ref url="loops/triangles" %}
[triangles](https://shpp.gitbook.io/zero/tutorials/loops/triangles)
{% endcontent-ref %}

{% content-ref url="loops/christmas\_tree" %}
[christmas\_tree](https://shpp.gitbook.io/zero/tutorials/loops/christmas_tree)
{% endcontent-ref %}

{% content-ref url="loops/highest\_even\_number" %}
[highest\_even\_number](https://shpp.gitbook.io/zero/tutorials/loops/highest_even_number)
{% endcontent-ref %}

{% content-ref url="loops/sum\_of\_numbers\_sequence" %}
[sum\_of\_numbers\_sequence](https://shpp.gitbook.io/zero/tutorials/loops/sum_of_numbers_sequence)
{% endcontent-ref %}