Цикли.

Фронтенд розробка JavaScript. -> Домашнє завдання.

Завдання

Вам необхідно самостійно вирішити, для якого завдання який цикл краще використовувати: WHILE, DO WHILE чи FOR.

  1. Підрахувати суму всіх чисел у заданому користувачем діапазоні.

  2. Запитати 2 числа та знайти тільки найбільший загальний дільник.

  3. Запросити у користувача число та вивести всі дільники цього числа.

  4. Визначити кількість цифр у введеному числі.

  5. Запросити у користувача 10 чисел та підрахувати, скільки він ввів позитивних, негативних та нулів. При цьому також порахувати, скільки парних та непарних. Вивести статистики на екрані. Врахуйте, що достатньо однієї змінної (не 10) для введення чисел користувачем.

  6. Зацикліть калькулятор. Запросити користувача 2 числа і знак, розв’язати приклад, вивести результат і запитати, чи хоче він вирішити ще один приклад. І так доти, доки Користувач не відмовиться.

  7. Запросити у користувача число та на скільки цифр його зрушити. Зрушити цифри числа та вивести результат (якщо число 123456 зрушити на 2 цифри, то вийде 345612).

  8. Зациклити виведення днів тижня таким чином: День тижня. Хочете побачити наступного дня?» і так до тих пір, поки Користувач натискає OK.

  9. Вивести таблицю множення всім чисел від 2 до 9. Кожне число необхідно помножити числа від 1 до 10.

    1. Гра «Вгадай число». Запропонувати користувачеві загадати число від 0 до 100 та відгадати його наступним способом: кожну ітерацію циклу діліть діапазон чисел навпіл, записуєте результат у N і запитуєте у користувача “Ваше число > N, < N або == N?”. Залежно від що вказав користувач, зменшуєте діапазон. Початковий діапазон від 0 до 100, поділили навпіл та отримали 50. Якщо користувач вказав, що його число > 50, змінили діапазон від 51 до 100. І так до тих пір, поки користувач не вибере == N.
Фронтенд розробка JavaScript. -> Цикли.

Цикли.

Програмні механізми, що дозволяють кілька разів виконати той самий блок коду, називають циклами.

Під час роботи циклу програма знову і знову «повертається» початку блоку команд, виконуючи його заново, інструкція за інструкцією, як цикл буде припинено (зупинено).

Блок коду, що повторюється, носить назву «тіло циклу» (loop body), а процес його виконання - ітерація (itera- tion).

Схематично цикл можна так:

start page

Якщо цикл необхідний підрахунок номера ітерації, то для цього вводиться окрема змінна, яка змінює своє значення при кожному повторі циклу. Ця змінна-лічильник має назву «циклова змінна» (англ. cycle index або counter).

У циклі має бути умова, яка позначить кінець виконання циклу, якщо ця умова ніколи не повертає false, то цикл стає нескінченним.

Залежно від того, де стоїть умова, до або після першої ітерації, цикли поділяються на цикли з передумовою та постумовою.

Цикл while (з передумовою).

while(condition) {
    statement1;
    statement2;
    statement3;
}

Для того, щоб цикл мав закінчення, в тілі циклу мають бути передбачені інструкції, що надають деякий вплив за умови повторення циклу. В іншому випадку, цикл або не виконається жодного разу (при помилковій умові), або повторюватиметься нескінченно (при істинному).

Поширеною помилкою є невключення в тіло циклу роботи зі змінною умовою.

Неправильно.

i = 1;
while(i < 10){
    console.log(i);
}

Правильно.

i = 1;
while(i < 10){
    console.log(i);
    i++;
}

Цикл «while» зручно застосовувати у випадках, коли заздалегідь невідома кількість повторів тіла циклу або коли цикл залежить від вхідних даних, наприклад, від дії користувача.

Цикл Do while (з постумовою)

Синтаксису.

do {
    statement1;
    statement2;
    statement3;
}
while(condition)

На відміну від циклу «while», цикл з постумовою за помилкової умови виконається один раз, оскільки Умова повтору перевіряється після виконання тіла.

Даний приклад виводить вікно для введення повідомлення і показує його, доки користувач не набере yes або no.

<script>
    var txt;
    do
        txt = prompt("Confirm: yes or no")
    while(txt!="yes" && txt!="no")
</script>

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

Цикл For Цикл-лічильник (або цикл із лічильником)

Синтаксису.

for (initialization; condition; expression) {
    statement1;
    statement2;
    statement3;        
}

Перший блок «іnitіalization» використовується для початкової ініціалізації циклової змінної. Цей блок виконується один раз перед початком циклу

Другий блок «condition» містить умову, за якої цикл продовжується. Зазвичай ця умова містить обмеження на циклову змінну. Третій блок «expression» задає вираз для зміни циклової змінної. Другий і третій блоки виконуються на кожній ітерації циклу.

Тілом циклу є одна мовна інструкція “statement”, якою може бути групуючий оператор “{}”, що містить кілька власних інструкцій.

Типовим прикладом запису оператора «for» є наступний:

for(i=0; i<5; i++) {
    console.log(i);
}

start page

Згідно з описаним механізмом роботи, цикл «for» є різновидом циклів із передумовою (Умова перевіряється до виконання тіла)

Наприклад, якщо циклова змінна ініці- алізована до циклу, перший блок можна не вказувати (Всі подальші приклади можна скопіювати в консоль та перевірити на працездатність)

i=0;
for( ; i<5; i++) {
    console.log(i);
}

Аналогічно, якщо циклова змінна змінює зна- чення в тілі циклу, то останній блок також можна не вказувати

i=0;
for( ; i<5 ; ) {
    console.log(i);
    i++;
}

У циклі передбачено механізм зупинки, це оператор break.

Також є механізм переходу на нову ітерацію без виконання подальшого коду, це оператор continue.

Поняття мітки

При вкладених циклах інгода виникає необхідність із внутрішнього циклу перервати чи продовжити ітерацію зовнішнього.

Для цього існують мітки.

Мітка являє собою ідентифікатор (ім’я), сформований відповідно до загальних правил іменування змінних, після якого вказується двокрапка «:»

Наприклад.

loopI: for(i=0;i<5;i++) {
        loopJ: for(j=0;j<5;j++){
        console.log(i,j);
        if(j==3) break loopI;
    }
}
Фронтенд розробка JavaScript. -> Домашнє завдання. Рішення.

Домашнє завдання. Рішення.

  1. Запитайте у користувача його ім’я та виведіть у відповідь: “Привіт, його ім’я!”

2.Запитайте у користувача рік його народження, порахуйте, скільки йому років і виведіть результат. Поточний рік вкажіть у коді як константу.

<script>
    const Year  = prompt('input the year of your Birth Date')

    alert(2020-Year)

</script>

  1. Запитайте у користувача довжину сторони квадрата та виведіть периметр такого квадрата.

  2. Запросіть у користувача радіус кола та виведіть площа такого кола.

5.Запитайте у користувача відстань у км між двома містами та за скільки годин він хоче дістатися. Порахуйте швидкість, з якою потрібно рухатися, щоб встигнути вчасно.

<script>
    var Time=prompt('input Time in hours')
    var Dist=prompt('input distance in km')

    alert(Dist/Time +' km/h')

</script>

6Реалізуйте конвертор валют. Користувач вводить дол- ри, програма переводить у євро. Курс валюти зберігайте у константі.

<script>
    const kurs = 0.84

    var Dollars =prompt('input summ in dollars')

    alert((Dollars*kurs).toFixed(2) +' Euro')

</script>

7.Користувач вказує обсяг флешки у Гб. Програма повинна порахувати скільки файлів розміром 820 Мб по- міститься на флешку.

<script>

   var Vol=prompt('input volume')

   var numb = Math.floor((Vol*1024*1000)/820)

   alert(numb)

</script>