Циклы.

Фронтенд разработка на языке 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 (c постусловием)

Синтаксис.

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

Первый блок «initialization» используется для начальной инициализации цикловой переменной. Этот блок выполняется один раз перед началом цикла

Второй блок «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. -> Домашнее задание.

Задание

Вам необходимо самостоятельно решить, для какого задания какой цикл лучше использовать: 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.

  10. Игра «Угадай число». Предложить пользователю загадать число от 0 до 100 и отгадать его следующим способом: каждую итерацию цикла делите диапазон чисел пополам, записываете результат в N и спрашиваете у пользователя «Ваше число > N, < N или == N?». В зависимости от того что указал пользователь, уменьшаете диапазон. Начальный диапазон от 0 до 100, поделили пополам и получили 50. Если пользователь указал, что его число > 50, то изменили диапазон на от 51 до 100. И так до тех пор, пока пользователь не выберет == N.

Фронтенд разработка на языке JavaScript. -> Домашнее задание. Решение.

Домашнее задание. Решение.

1.Запросите у пользователя его имя и выведите в ответ: «Привет, его имя!».

<script>

    var Name = prompt('input your name')

    alert('Hello, '+Name)

</script>

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

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

    alert(2020-Year)

</script>

3.Запросите у пользователя длину стороны квадрата и выведите периметр такого квадрата.

<script>
    var side=prompt('input A side of the square')

    alert(side*4)
</script>

4.Запросите у пользователя радиус окружности и выведите площадь такой окружности.

<script>
    var radius = prompt('input radius of the circle')

    alert(Math.PI*Math.pow(radius,2))

</script>

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>