Цикли

Цикли в Javascript, відео від Ш++

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

В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на [e-mail]

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

• заповнити кожну точку на екрані білим кольором

• вивести 1000 написів "привіт!"

• малювати безмежну анімацію

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

Оператор while

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

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

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

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

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

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

let rabbits = 0;

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

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

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

Практика

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

що буде?

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

що буде?

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

що буде?

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;
}

що буде?

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

... а для малювання рядка з зірочок підійде команда console.put від Ш++ (нагадуємо: цієї команди немає в "оригінальному" JavaScript, вона є лише в нашому учбовому редакторі)

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

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

Про цикли for, while та do while (uk.javascript.info)

Про структуру циклів (Ш++)

Поради щодо break та continue (Ш++)

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

Виникли питання або труднощі? Зверніться за допомогою до Ш++.

ЗірочкиЧисловий рядКвадратТрикутникиЯлинкаНайбільше парне числоСума послідовності чисел