Стать программистом. Часть 16. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В прошлом уроке мы познакомились с Условными операторами. Я постарался в наиболее доступной форме рассказать Вам какие они бывают, каковы основные принципы их работы и показал это все на практике. Надеюсь тема Условных операторов не вызвала у Вас большого количества недопонимания, ведь в дальнейшем мы часто будем использовать их в нашей практике. Если же вопросы остались, или с Вашей точки зрения я упустил нечто важное, что тоже необходимо осветить, то прошу оставить соответствующий этому комментарий.

А сегодня у нас на очереди не менее важная тема - Циклы.

Урок 16. Циклы.

Циклы в JavaScript'e - это необычайно интересная тема. Я долго пытался придумать пример цикла из жизни для ассоциации. С моей точки зрения визуализация в изучении чего-либо играет очень важную роль. Мне нужен был такой пример, который не только бы позволил описать саму суть цикла, но, чтобы его еще можно было бы разобрать на последовательность действий и сравнить потом все это с кодовым представлением. Опять же, оговорюсь - я специально не привожу здесь официальную терминологию того, что называют циклом. Если вы хотите получить правильное техническое описание, это похвально, но его легко найти в интернете. А здесь у нас с Вами другая задача - понять. А уже слова под понимание подобрать проще простого.

Итак, давайте представим с вами счеты. Обычные деревянные счеты. Я думаю все знакомы с этим замечательным прибором для арифметических вычислений. Вот они:

Для ассоциации с циклом нам понадобиться сосредоточить сове внимание не на всех счетах, а всего лишь на одной струне, например, на самой верхней, на которой расположились десять костяшек синего цвета. Теперь мысленно начнем передвигать по одной костяшке на этой струне вправо:

1. Передвинули первую. Вернулись к оставшимся.
2. Передвинули вторую. Вернулись к оставшимся.
3. Передвинули третью. Вернулись к оставшимся.
4. Передвинули четвертую. Вернулись к оставшимся.
5. Передвинули пятую. Вернулись к оставшимся.
6. Передвинули шестую. Вернулись к оставшимся.
7. Передвинули седьмую. Вернулись к оставшимся.
8. Передвинули восьмую. Вернулись к оставшимся.
9. Передвинули девятую. Вернулись к оставшимся.
10. Передвинули десятую. Вернулись к оставшимся. Стоп! Костяшки закончились.

Только что мы сделали серию однотипных операций. И остановились тогда, когда следующую однотипную операцию выполнить стало невозможно. Всю эту серию однотипных операций мы можем объединить в нечто целое и это целое смело назвать Циклом. Каждую отдельно взятую операцию (в нашей ассоциации это передвижении костяшки вправо) в цикле называют итерация. Каждая такая итерация имеет свой порядковый номер. Надеюсь такой пример, окажется понятным. По крайней мере мне он именно таким и кажется.

Теперь, когда в голове у нас присутствует некая ассоциация, мы можем выделить пару основных моментов в работе циклов:

1. Во-первых, Циклы применяются к некому множеству, коллекции чего-либо одинакового или хотя-бы подобного. В нашем примере такой коллекцией выступает 10 синих костяшек на первой струне.
2. Во-вторых, для остановки работы цикла нам требуется некоторая ситуация (условие), при наступлении которой дальнейшие выполнение цикла будет невозможным. В нашем примере такая ситуация наступила, когда закончились костяшки.

Давайте рассмотрим кодовое представление циклов в JavaScript'e. Для начала попробуем сразу же выполнить два момента описанных выше. Найдем коллекцию с которой будет работать наш цикл. Что же может с эмулировать такую коллекцию в коде? В нашем случае и для наших потребностей идеальным будет использование Массива:

// Массив - идеальная коллекция для циклов
var a = [1,2,3,4,5,6,7,8,9,10];

Если абстрагироваться от внешнего представления, то элементы (цифры) массива a тоже можно представить как бы на струне, наподобие костяшек на счетах, как в нашей ассоциации. И теперь нам надо все эти цифры перебрать - сдвинуть по струне вправо. А условием для прекращения этих действий будет ситуация, когда цифры закончатся. Таким образом два момента для работы циклов (коллекция и условие для прекращения) выполнены, и мы можем начать двигать наши цифры по воображаемой струне.

While(...) {...}

B первым циклом, который мы рассмотрим будет while. Его кодовое представление выглядит так:

while (/* условие для прекращения */) {
/* код который будет выполнятся до тех пор, 
пока условие в круглых скобках не выполнится */
}

Слово "while" с английского можно перевести как "до тех пор, пока". То есть переводом классическому кодовому представлению цикла While может стать примерно такое:

до тех пор, пока (условие не выполнится) {
  выполняй этот код.
}

Давайте же наконец сдвинем цифры в массиве a вправо при помощи цикла while.

// Массив - идеальная коллекция для циклов
var a = [1,2,3,4,5,6,7,8,9,10];
var i = 0;

while(a.length != i) {
    alert('сдвинули вправо ' + a[i]);
    i++;
}

И вот он - Ваш экзамен. В коде выше мы соединили почти все операции из предыдущих уроков. По большому счету непонятной в этом коде для вас должна быть только одна запись - a[i]. Но все-таки мы разберем абсолютно все строчки кода.

Первым делом мы создали две переменных. Переменная a в значение которой мы положили массив из десяти элементов, и переменная i которой мы присвоили значение 0. Напомню, что тип переменной a - Object, а тип переменной i - Number.

На строчке 5 мы начинаем сам цикл while и указываем ему условие для прекращения работы цикла (a.length != i). Пока это условие будет в своём результате возвращать true, код будет выполнятся. Как только это условие перестанет возвращать значение ture и вернет значение false - цикл while прекратит свою работу. Итак, условие (a.length != i), то есть мы сравниваем свойство length массива a c переменной i, которая на данный момент равна нулю. Давайте подставим значения в условие - (10 != 0). Десять же не равно нулю, правда? Значит условие на старте будет возвращать true и код в фигурных скобках выполнится по крайней мере 1 раз.

Далее рассмотрим код внутри фигурных скобок. На строке 6 мы видим запись alert('сдвинули вправо ' + a[i]);. С конструкцией alert() мы уже знакомы - она выводит сообщение в браузере. Далее идет строка 'сдвинули вправо ' и она складывается с a[i]. Что делает эта a[i]? Если мы подставим значение переменной i мы получим alert('сдвинули вправо ' + a[0]);. Для понимания давайте взглянем на массив a

Из темы массивов мы с Вами знаем, что цифры внутри этого массива называются элементами. Что мы не знали, так это то, что каждый элемент в массиве имеет свой порядковый номер. Так уж повелось в JavaScript'e, что порядковые номера элементов массива начинаются с нуля. То есть примерно так:

И записью вида имя массива[порядковый номер элемента] (в нашем случае a[0]) мы запрашиваем значение элемента под этим порядковым номером. То есть a[0] вернет 1, a[1] вернет 2, a[2] вернет 3 так далее.

То есть возвращаясь к нашему циклу запись alert('сдвинули вправо ' + a[0]); будет иметь вид alert('сдвинули вправо ' + 1); А из предыдущих уроков мы знаем что бывает при попытке сложить String и Number. Number будет неявно преобразован в строку и две строки будут склеены одну. То есть результатом этой записи будет сообщение с надписью 'сдвинули вправо 1'.

И наконец на строке 7 мы видим запись i++. Это уже знакомая нам операция increment (увеличение значения переменной i на 1).

То есть еще раз пошагово. Первая операция цикла while подставить значения будет выглядеть так:

// Массив - идеальная коллекция для циклов
var a = [1,2,3,4,5,6,7,8,9,10];
var i = 0;

while(10 != 0) {
 // значение 1-го элемента массива "а"  с порядковым № 0 
    alert('сдвинули вправо ' + a[0]);
    i++;
}

Вторая операция этого же цикла из-за того, что инкремент увеличил значение переменой i на 1 уже будет иметь вид:

while(10 != 1) {
 // значение 2-го элемента массива "а"  с порядковым № 1
    alert('сдвинули вправо ' + a[1]);
    i++;
}

Третья соответственно:

while(10 != 2) {
       // значение 3-го элемента массива "а" с порядковым № 2
    alert('сдвинули вправо ' + a[2]); 
    i++;
}

... и так далее, пока инкремент не доведет значение переменной i до 10. А когда он это сделает то условие внутри круглых скобок будет иметь вид (10 != 10). А так как 10 всегда равно 10 то сравнение вернет значение false и цикл while.

Давайте же проверим наши сообщения в браузере.

Как видим мы прошли по все элементам массива и как только достигли последнего элемента (то есть условие 10 != 10 стало неверным - false) цикл while прекратил свою работу.

К условию, которое мы указываем в круглых скобочках требуется относится с большим вниманием. Если случится так, что ситуация при которой условие вернет результат false никогда не наступит, мы с вами попадём в цикл, который называется бесконечный. Браузеры, как правило при исполнении такого цикла начинают чрезмерно потреблять оперативную память и жутко тормозить. И остановить выполнение бесконечного цикла можно только закрыв сам браузер или вкладку, где исполняется скрипт.

Пример бесконечного цикла с использованием цикла while может выглядеть следующим образом:

// Массив - идеальная коллекция для циклов
var a = [1,2,3,4,5,6,7,8,9,10];

while(true) {
    alert('я буду открываться бесконечно долго, \
        пока вы не закроете браузер или вкладку где \
        я работает этот скрипт');
}

Обратите внимание на условие в круглых скобках. Вместо условия как такового мы поставили туда логическое значение true, то есть как бы указали что условие всегда выполняется, тем самым исключив возможность того, что это условие когда-либо станет false. То есть код с конструкцией
alert(); будет исполнятся относительно бесконечно.

Я не советовал бы Вам запускать этот код в браузере. Однако, если вдруг любопытство возьмет верх, Вам следует знать. Большинство современных браузеров умеют определять бесконечные или относительно бесконечные циклы, в особенности с использованием конструкции alert() И когда они сталкиваются с ними, то дают вам возможность прекратить исполнения скрипта насильно. Это выглядит в виде галочки. Вот такой:

Так что если Вы все-таки решите проверить действительно ли цикл описанный выше будет исполнятся бесконечно число раз - рекомендую через какое-то время воспользоваться галочкой.

А на сегодня все.

Ссылки на предыдущие уроки:

while (интересно) {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15
}