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

Теперь давайте перейдем к следующему слайду и разберем общий вид оператора ветвления, в принципе в любом языке программирования, не только в JavaScript. Когда мы хотим в своем коде создать условие, сделать ветвление, мы должны использовать определенные конструкции языка программирование, которым мы пользуемся для того чтобы определить по сути три блока: блок с условием, некоторым логическим выражением, которое мы хотим проверить. Если это логическое выражение срабатывает, если здесь будет результат этого выражение будет значение true(истина), то выполняется серия инструкций, ряд команд, иначе, если выражение, которое мы определили, в результате выдало нам false, выполняется другая серия команд. Вот допустим пример. Если пользователь ввел логин и пароль, то проверяем правильность введенных данных, иначе показываем сообщение «Логин и пароль не введены».

Вот пример использования такой конструкции. В языке JavaScript, как и в большинстве других языков программирования. Для того, чтобы определить вот такое поведение в приложении, используется несколько условных конструкций. На следующем слайде эти конструкции перечислены. Есть конструкции if … else, есть сокращенная версия этой конструкции – тернарный оператор. Тернарный оператор мы разберем в примерах, Вы поймете, как он работает. И заключается он в использовании двух символов, символа знак вопроса и двоеточия, двух вот таких операторов. И последняя условная конструкция, которую мы можем использовать, это оператор многозначного выбора switch-case, тоже сейчас в примерах мы разберем с вами как работает такая конструкция в языке JavaScript.

Начнем мы с оператора if. Оператор if позволяет нам реализовать поведение которое Вы увидите на блок-схеме, определенной в правой части слайда. Когда наш алгоритм выполняется, и мы доходим до определенного участка кода, мы можем либо пойти вот по этой ветки и выполнить одну серию команд, либо пропустить эти команды и сразу же продолжить выполнения алгоритма не переходя на дополнительную серию команд. Вот если Вы хотите в своем сценарии определить такое вот поведение, вы можете использовать оператор if. Видите, слева на слайде у нас показано если значение переменной, а = 10, если вот это выражение даст нам результат true(истина), то тогда выполняется вот этот оператор, выполняется вывод диалогового окна. Вот получается, что, когда мы выполняли алгоритм, вот эта вот стрелочка, она символизирует ход выполнения алгоритма до условной конструкции. Вот создание переменной а с значением 10. Дальше, когда мы доходим до этого ромбика, этот ромбик символизирует само условие, в условии мы делаем проверку, если значение этой переменной равно 10, если это у нас выражение дает истину, а сейчас оно дает истину, то есть, если значение true, мы идем по этой ветке выполнения алгоритма и выполняем серию команд, ну, наша серия команд сейчас заключается только в одной операции, выводе alert-a, но на самом деле мы здесь можем написать больше одной инструкции, но если, например, здесь в переменную «а» мы запишем значение, например, «1», то тогда условие уже не сработает, мы пропустим эту серию команд, соответственно мы пойдем по этой ветке, если логическое выражение, определенное в if, даст нам результат false.

Следующая конструкция - это оператор if...else. Если нам нужно сделать одну из двух операций, точнее нужно выполнить одну из двух инструкций, мы можем использовать кроме оператора if еще и оператор else. Ну посмотрите на блок-схему, которая на слайде у нас показана. Когда выполнения алгоритма доходит до условия, если у нас условие истинно, то мы идем по одной ветке и выполняем одни команды, если условие ложь, то мы выполняем другую команду. Если сравнить с предыдущем слайдом, видите у нас была только одна серия команд и если условие не выполнилось, то мы просто ничего не делаем и продолжаем выполнять алгоритм. В случае с вторым слайдом и оператором if…else, в нас в любом случае выполнится какая-либо операция, либо эта, либо эта. Ну и синтаксически как это выглядит. Строка, которою выделил, это условие, если оно у нас истинно, то тогда отображается сообщение, а = 10. Но если условие у нас false, если такое выражение дало нам результат false, то тогда срабатывает код определенный в блоке else. Обратите внимание, на это мы как-бы не обратили на это внимания в предыдущем слайде, у нас есть операторные скобки. Вот когда Вы создаете условие, Вы можете, эти операторные скобки не устанавливать, если в вашем условие находится только одна инструкция, допустим как в нашем, которое сейчас на слайде, но когда у Вас есть несколько инструкций, вывести alert, выполнить создания каких-то новых переменных, определить им какие-то значения, вот если в Вас есть новые операции, которые Вы делаете в условии, ну тогда эти операторные скобки не будут обязательными. Многие рекомендуют ставить операторные скобки всегда, во всех своих условных конструкциях, поэтому старайтесь всегда определять операторные скобки, хотя в данном случае их можно было бы убрать, код бы тоже работал корректно. Ну на этом слайде мы с Вами рассматриваем оператор else. Здесь Вы увидите, что есть вот такой вариант выполнения условной конструкции.

Следующий слайд, на котором показана блок-схема работы тернарного оператор. Тернарный оператор - это упрощенный блок кода if…else. Но только если мы возьмем оператор if…else, то конструкция эта используется для того чтобы выбрать ряд инструкций, которые будут выполнены, если срабатывает условие, либо не срабатывает. В случае, когда Вы пользуетесь тернарным оператором, Вы его используете не для того чтобы выполнять какие-нибудь команды, а для того чтобы инициализировать определенную переменную, то есть, если условие выполняется, Вы запускаете команду, команда дает Вам результат, этот результат Вы записываете в переменную, если условие не выполняется, Вы делаете другую какую-нибудь операцию. Вот как на блок-схеме. Если условие дает нам значение true, то мы выполняем одну команду и продолжаем выполнять работу нашего кода, но при этом, значение, которое эта команда у нас выдала, эта значение присваивается некоторой переменной, то есть, присваивается чему-то. Либо если условие дает нам результат false, то тогда выполняется другая команда, результат этой команды записывается в переменную и продолжает работать. Вот как в коде выглядит тернарный оператор. У нас есть переменная, со значением 10 и дальше мы создаем блок кода, в котором используем тернарный оператор. Мы создаем переменную с именем msg и этой переменной вместо значения присваиваем тернарный оператор, то есть вот этот блок кода, все вместе будет тернарным оператором. Вот ромбик, определяющий условие, символизирующий условие, вот он у нас в коде является вот этим выражением «а == 10», если это выражение дает нам результат true, то тогда выполняется команда, определенная после знака вопроса, то есть после знака вопроса до двоеточия, это та команда которая должна выполнится и выдать результат, который будет в итоге будет присвоен переменной msg. В нашем случае, а==10, соответственно условие выполнилось, сработала первая команда, а присвоить 10, на самом деле это не команда, просто значение, здесь могли бы выполнить какую-нибудь операцию, вызвать функцию, выполнить, например, сложение, умножение, и результат тогда этой операции был записан в переменную msg. Но мы сейчас просто оставляем одно только значение, определяем литерал, этот литерал будет присвоен этой переменной. Если же переменная «а» будет содержать не значение 10, а другие какие-то данные, либо если мы поменяем условие, кажем, что, а не равно 10, если здесь в результате выполнение проверки даст значение false, то тогда переменная msg будет записана в то значение, либо выполнена та операция, которая даст значение, идущая после двоеточия, то есть, до двоеточия, после знака вопроса то что будет использовано то, что выражение истинна, то что после двоеточия, код, использующейся, если у нас ложь. В итоге alert сейчас отобразит значение msg и мы увидим значение «а = 10», потому что тернарный оператор выполнил вот эту часть кода. Тернарный оператор — это просто сокращение if…else, когда этим оператором лучше не злоупотреблять, если код после использования этого оператора нечитабельным, если он сложен в понимании, лучше отказаться от использования оператора в пользу обычного блока if…else.

Еще одна из конструкций, последняя условная конструкция доступная в JavaScript это switch-case – оператор многозначного выбора. Суть заключается в том, что если Вам нужно поставить условие и после проверки этого условия выполнить не одну, не две ветки кода, а три и более, вот если у Вас есть несколько веток алгоритма, то тогда Вам подойдет именно оператор switch. Посмотрите, как он показан на блок-схеме. У нас идет выражение, и в зависимости от результата выполнение этого выражения, здесь уже не обязательно будет выдавать значение true-false. В предыдущих примерах все наши значения давали значение либо истинна, либо ложь. В случае использование оператора switch. Выражение может выдавать результат целочисельное значение, строковое, вещественное, то есть любые типы данных. И вот если выражение у нас выдает определенное значение, это значение проверяется одним из блоков case, если хотя бы один из case-ов совпал с тем значение, с которым было, вот здесь, в выражении, то тогда выполняется соответствующая серия команд, связанных с case-ом. Вот, например, в блоке кода, который на этом сайте показан, в переменной «day» находиться значение 10, мы создаем блок кода, в котором используем switch, когда мы определяем ключевое слово switch после этого ключевого слова в круглых скобках мы определяем выражение, по результату которого будет выполнятся уже следующая вложенная операторы переключатели. Если у нас в переменной «day» находится значение 10, срабатывает case для значения 10. Если у нас будет в переменной «day» значение 11, сработает case для значение 11. Этих case-ов у нас может быть неограниченное количество, сколько угодно, столько мы можем их определить. Каждый блок кода, каждая инструкция, которую мы считаем до конца выполненной, каждая точнее серия команд, которую до конца выполнили мы закрываем оператором break. Лучше этот оператор всегда устанавливать, если Вы его не будете применять в блоке switch, то это может привести к нежелательному поведению. Какому именно мы сейчас посмотрим в практических примерах.

И последний слайд относящейся к условным конструкциям switch-case, когда в этом операторе присутствует блок default. Вот видите на блок-схеме у нас есть, как и в предыдущем примере, несколько блоков case и команд, которые с ними связаны, но также есть еще блок default. Если не один из case-ов не подойдет под значение, которое было возвращено выражением, то тогда у нас работает этот блок кода и точнее сработает серия команд связана с оператором default. Получается, если Вы создаете switch и в него добавляете, как в нашем коде, вот такой блок default, это будет означать, что в любом случае, если алгоритм дойдет до блока switch, в любом случае какая-нибудь конструкция в блоке выполнится, либо какой-то из case-ов, либо выполниться default, если в переменной «day» присвоится, то значение, которое представлено case-ом, вот в этом коде. Ну и сейчас мы перейдем в Visual Studio и посмотрим на примерах все эти конструкции, которые только что были рассмотрены.

Переходим в Visual Studio. Сейчас мы разберем примеры папки Conditional statement. Условные выражения. Первый пример показывает работу оператора if. На 15 стоке мы создаем переменную «а» и присваиваем этой переменной значение, которую возвращает функцию promt. В функцию promt мы передаем текст, отображаемый пользователю и вторым параметром значения, которое будет отображаться в поле ввода. Дальше мы хотим проверить, если пользователь в переменную «а» запишет значение «22», то есть если в окне, которое отобразилось пользователю будет введена цифра 22, эта цифра будет возвращена в переменную «а» в качестве значения, и на стоке 17 мы это значение проверим, если результат здесь будет истинна, то тогда в тело документа мы напишем текст «введенное значение верно», в любом случае 21 строка сработает это условие, если оно не сработает всегда будет отображать данные эта строка «эта строка выполняется в любом случае». То есть этот текст всегда будет появляться в этом документе. Давайте мы проверим сейчас как это будет работать. Видите, у нас запустился браузер и сразу же он показал значение «введите число 22». Давайте послушаемся и введем 22, нажмем на «ОК». Мы сейчас с Вами видим, что условие сработало, вывелось сообщение «введенное сообщение верно» и второй блок текста. Теперь давайте запустим еще раз этот пример, но теперь вместо 22 введем значение 1, например. Если мы нажмем на кнопку, то теперь у нас условие не сработало, потому что в переменной «а» находилось значение 22, и выполнилась 21 строчка кода. У нас вывелось только одно — это значение.

Следующий пример показывает, как мы можем создавать условия и блок else, то есть блок «иначе», который сработает если условие не выполнится. По сути мы немножко модифицировали предыдущий пример. Мы точно так же на 18 строке получаем от пользователя информацию. На 20 строке мы выполняем проверку, а == 22. Если проверка проходит успешно, то 21 строка выводим сообщение «введенное значение верно», иначе если проверка не прошла, то 24 строка выводится сообщения «введенное сообщение не верно». В этом примере в любом случае будет отображена какая-то из фраз, которая находится в блоке if…else. То есть у нас всегда будет две строчки отображаться в браузере, либо эта, либо эта и в любом случае будет отображаться строка выведена кодом на 27 строчке кода. Давайте запустим этот пример. В начале введем 22. Введенное значение верно. И строчка кода которая отображается 27 инструкцией. Если мы обновим пример и введем другое значение, в нас отобразится «введенное значение не верно» ну и опять выполнится 27 строка кода.

Следующий пример, пример показывает, что, этого у нас на сайтах не было, но мы можем использовать конструкцию if, if…else...if. Строка 9. После того, как от пользователя мы получили текст, мы проверяем, есть ли этот текст равен «Hello» или этот текст равен «hello» в нижнем регистре, то тогда, строка 10, мы выполняем вот эту инструкцию, выводим сообщение «Введенное значение верно и равно Hello». Иначе, если в переменной «а» находится значение «World» с большой буквы, или переменная «а» «world» с маленькой буквы, тогда выводится сообщение «введенное значение верно и равно World». Во всех остальных случаях иначе, без условия, у нас отображается сообщение «Введенное значение не верно». Ну и лишний раз, для проверки, 19 строка, код, который сработает при любых условиях. Сработали ли if или else или не сработал, всегда будет отображаться 19 строка. В этом примере мы так же с Вами видим использование оператора «или». Если Вы забыли, как он работает, если Вы забыли таблицу истинности, возвращайтесь к предыдущему уроку и посмотрите последние минуты видеозаписи, там мы разбирали с Вами работу оператора «и», «или», «дизъюнкции» и «конъюнкции». Вот сейчас на 9 строке мы как раз используем эго, мы хотим делать проверку если это условие сработало, либо если это условие сработало, то есть одно из этих выражений должно дать результат true, вот если какое-нибудь из этих выражений даст результат true, мы выполним вот эту инструкцию. Иначе, мы хотим еще одну проверку сделать, проверить теперь на значение «world». Для чего мы здесь делаем блок else…if, почему не сделать просто if. Дело в том, что когда Вы делаете такие вот блоки, Вы с помощью оператора if…else…if указываете, что выполниться должен только один блок кода, то есть у нас будет проверяться вначале это выражение, если условие срабатывает, выполняется данная инструкция, и мы сразу же выпрыгиваем за эти блоки, начинаем работать на 19 строчке кода. Если же это условие не срабатывает, мы переходим к этому условию, проверяем его, если else…if сработает, тогда 15 строка, здесь вход никакой выполнятся не будет, мы тоже перепрыгиваем на 19 строчку. Ну и в самом последнем случае, мы как-бы, если не одно из этих условий не выполнится, тогда мы выполним блок else, то есть здесь только один из этих блоков гарантировано выполнится. Вот для чего нам нужен оператор if...else…if. Если бы мы здесь написали if, то тогда у нас, в других ситуациях могла выполнится и эта инструкция, и эта инструкция, но если эта не выполнится, тогда еще и блок else сработает.

Следующий пример №4. В этом примере мы разберем по сути тоже самое что и было в предыдущем, третьем примере, но с использованием немного другого синтаксиса, с использованием других выражений в операторах if. На седьмой и восьмой строке мы создаем две переменные с именами trueVal и falseVal, в этих переменных у нас соответствующие значения true-false, на строке 10 мы определяем оператор if используя в условии переменную trueVal. Получается, что создавая условия вам необязательно использовать какое-либо сложное выражение, вы можете просто использовать переменную, по значению которое будет определять должна выполнятся условная конструкция или нет. Сейчас у нас в переменной trueVal находится значение тру, то есть здесь на 10 строчке выражение у нас является истинным и 11 строка, соответственно, данный блок кода должен выполнится, у нас на экране должна вывести строчка, первый блок иф выполнился. Строка 13 else..if, в этом выражении мы делаем проверку знак восклицания falseVal, знак восклицания – это отрицания, это оператор, который указывает на то что мы значение, которое находится в этой переменной, хотим поменять на противоположное, знак отрицание будет работать у нас с переменными типа bool. Вот если сейчас в falseVal у нас находит значение False, из-за того, что мы используем знак отрицания, мы меняем значение на противоположное, то есть на значение true и получается, что 14 строчка этот блок кода у нас тоже должен выполнится, но он должен выполнится в том случае, если не сработает первый блок кода, если сработает блок if. И строка ут16 блок else, который срабатывает для всех остальных ситуация, когда у нас не выполнится ни if, ни else…if. Давайте мы сейчас запустим этот пример, мы увидим, что первый блок if выполнился, строка 10 сработало это условие, потому что переменная trueVal находится на значении true, если у нас этот блок кода выполнился, у нас уже нет необходимости проверять выражение в остальных блоках кода, поэтому у нас сработало только одно выражение. Если мы сейчас поменяем это значение, поменяем на False, сохраним эту страницу и обновим вкладу в браузере, то мы теперь видим, что выполнился второй блок else…if, потому что сейчас здесь условие не сработало, соответственно у нас есть возможность перейти к следующему блоку, блоку на 13 строке, проверить правильность выражения, здесь у нас сейчас значение находится false, false меняем на противоположное значение, на true, попадаем в этот блок кода и выполняем его. Вы будете очень часто встречать подобного рода выражения, if в котором находится всего лишь одна переменная либо знак восклицания и одна переменная, то есть понимаете, что вы проверяете значение этой переменной, если оно true, вы попадаете ту в блок кода и выполняете его, если значение здесь false вы блок кода пропускаете, если в начале видите знак восклицание, это означает, что вы берете противоположное значение тому, которое находится в этой переменной.

Следующий, №5 пример, в котором мы разберем использование функции confirm, повторим тот код, который мы встречали с вами на прошлом уроке, на 7 строке объявляется переменная с именем «а» и в эту переменную записывается результат работы функции confirm, помните, что эта функция показывает диалоговое окно с двумя кнопками: ОК и cancel. Если мы нажмем на кнопку ОК, то в переменную «а» будет записано значение true иначе будет записано значение false. Вот мы эту переменную, которую здесь определили, на 9 строке определяем, если мы нажали на диалоговом окне кнопку ОК, срабатывает 10 строчка, и выводит сообщение – «Первое значение истинно», иначе, если бы мы нажали на cancel, переменная «а» находит значение false соответственно срабатывает 13 строчка кода. Тоже самое мы делаем для переменной «b», определяем ее, записываем в нее значение, которое будет возвращаться методом confirm. 19 строка – проверяем переменную «b», если она истинна – выводим сообщение, что втрое значение истинно, иначе - ввыводим этот блок кода. И в самом конце делаем ряд проверок, которые нам скажут какие значение мы вводили, какие были значение истинными, какие значение были ложными. На 27 строке мы определяем условие, если «а == true» и «b == true», вспоминайте прошлый урок, мы разбирали с вами этот оператор, то есть если оба эти выражения будут истинными, то тогда мы попадаем в условие, и на 28 строке отображаем сообщение, что оба сообщения истинны. Else…if, то есть, иначе, если «а == true» или «b == true, то есть хотя бы если одно из этих условий будет выдавать истину, то 31 строка – мы напишем сообщение «Одно из значений истинно, другое – ложь», но если оба значения будут false, то есть, если ни это условие не сработает, если это не сработает, то тогда мы уже переключимся в блок else и выведем на экран сообщение, что оба значения у нас ложь. Давайте запустим и посмотрим на результат. Первое окошко confirm спрашивает нас, чтобы мы ввели первое значение, нажимаем Ок, ведете, на фоне появляется сообщение, что первое значение истинно, Ок, второе значение истинно. И последний блок if, который на 27 строке выделен, вывел нам результат «оба значения истинно». Обновляем страницу, первое значение у нас будет истинна, втрое значение у нас будет ложь. И теперь if, которое находится в конце страницы, сработала 30 строчка и сработал блок «одно из значений истинно, второе значение - ложь». И второй вариант, то есть третий вариант, мы нажимаем первый раз cancel, в переменную «а» записываем false, второй раз cancel, в переменную «b» записываем false, и оба значение у нас в итоге будут ложными, оба значения false. Вот, пример, который закрепляет то, что мы видели в предыдущих примерах, всех объяснений работы блоков операторов if, if…else.

И последний, №6 пример, который относиться к if…else, показывающий как бы такой пример более приближений к жизненному применению, пример показывающий работу if…else конструкции. Строка 7, мы спрашиваем у пользователя – введите ваш возраст, на 8 строке мы спрашиваем, чтобы пользователь ввел пенсионный возраст. Строка 10 - создаем переменную maxAge, то есть максимальный возраст, в который записываем значений 120. 12-13 строчка – age и pen, две переменные, которые были получены вначале скрипта, мы преобразовываем в int, и теперь делаем проверку на строчке 15, если переменная «а» меньше переменой «b», то есть если переменная, в которой хранится возраст, меньше переменной, в которой хранится пенсионный возраст. Выводим сообщение, Вам еще рано на пенсию. Иначе, если переменная «а» меньше, чем переменная maxAge, то 19 строчка – «Пора задуматься о пенсионном счете в банке», то есть это сообщение отобразится в том случае, если возраст меньше чем значение 120. И 21 строчка, последний блок else, который сработает либо в случае, если ни это выражение, ни это не выполнится, это блок, который напишет «Столько не живут», если вы ввели значение больше чем 120, больше чем maxAge. Давайте сейчас запустим пример. Например, введем наш возраст – «30», пенсионный возраст – «50». Сообщение – «Вам еще рано на пенсию». То есть, сработал if, на 15 строчке вывел сообщение, которое на 16 строке находится. Если мы обновляем эту страницу, вводим сообщение «60», что это наш текущий возраст, а на пенсию нужно в 50 лет, то видите, на 15 стоке, условие не сработало, в переменно «а» было значение 60, в переменной «b» было значение 50. «60 меньше b» - это условие не срабатывает, то есть, это неправильное выражение, здесь у нас ложь в этом выражении, мы пропускаем его, переходим на 18 строчку, и проверяем, правильно ли мы ввели значение возраста, может мы написали его больше чем MaxAge, в нашем приложении не допускается возраст больше 120. Если все нормально, если значение не больше чем 120, вот у нас отобразилось сообщение – «Пора задуматься о пенсионном счете в банке». Но если мы сейчас введем значение 200, как наш текущий возраст, пенсионный возраст – не важно, пусть он будет равен 50, сейчас нам выведут сообщение, что столько не живут, потому что ни 15 строчка, ни 18 строчка, условия в нас не выполнили, в итоге сработала 21 строка. Но в итоге, Вы видите, что только один из этих блоков сработал, либо 15 строчка, либо 18, либо 21. То есть, благодаря вот таким конструкциям if…else, мы можем сделать ветвление, которое будет гарантировать одной из инструкций, одной из перечисленных строчек кода, одно из перечисленных блоков инструкций, которые определенны конструкцией else.

Теперь в следующих примерах мы рассмотрим конструкцию свич. В примере №7 мы видим, что на 14 строчке создается переменная number, в эту переменную с помощью функции promt записывается значение, которое ввел пользователь. Далее, на строке 21 мы определяем конструкцию switch и в выражении селектора, это называется выражение селектора, мы указываем, что будем использовать переменную number, а значение этой переменной будет влиять на то, какой из case-ов, определённых внутри switch будет у нас запущен. На 29 строке, вы видите определяется первый case. Мы пишем ключевое слово case, дальше мы пишем литерал, значение, из-за которого case будет запускаться. Если в переменной number будет значение 1, то тогда этот case будет у нас выполнен, запустится тот ряд инструкций, который с ним связан. Обязательно после значения мы ставим двоеточие, нужно просто запомнить, а потом в фигурных скобках определяем блок кода, который выполнится если этот case у нас сработает, то есть мы видим сообщение 1. Когда мы заканчиваем определять те инструкции, которые связаны с case1, мы добавляем оператор break. И, дальше, следующий case, то есть мы создаем столько case-ов, сколько нам необходимо для того, чтобы корректно обработать все ситуации в нашем алгоритму. Если в переменной number будет находится значение «2», то тогда выполнится этот блок кода. Но если в переменной number будет находится значение «3», «4» или вообще какой-то другой текст, то в таком случае у нас срабатывает блок default. То есть, по умолчанию, для значений, которые не предусмотрены case, у нас будет выводиться 46 строчка текста. Но если бы в приложении отсутствовал оператор default и не было значения в case-ах, которые сейчас находятся в переменной number, тогда просто ничего бы не произошло. Мы бы не выполнили ни один из case-ов, вышли за пределы оператора switch и никаких бы действий не производили. Сейчас, если мы запустим этот сценарий и введем, например, значение «2», двойка запишется в переменную number, на строке 21 мы начнем переменную number проверять с помощью switch. Первый case не подходит, мы его пропускаем, второй case подходит, потому что в переменной number у нас значение 2. Мы спускаемся ниже, на 36 строчку, выполняем 37 строку, остальные строки, если они будут здесь определены. Когда мы доходим до 39 строки оператора break, мы выпрыгиваем за пределы оператора switch, то есть выходим на 50 строчку и продолжаем выполнять сценарий дальше, если он здесь определен. Давайте запусти этот пример. Вот promt, который спрашивает ввести значение 1 или 2, вводим значение 1, нажимаем на кнопку «Ок», нам написали один, вводим значение другое, нажимаем «Ок», нам пишут, что не ввели ни единицу, ни двойку. Вот мы увидели с вами работу оператора switch.

Следующий пример, показывающий работу switch, на 13 строке. Мы просим пользователя «Введите номер дня недели» и пишем цифры 1, 2, 3, 4, 5, 6, 7, получаем значение переменную day, и на 15 строке создаем switch, в которой переменную day проверяем. НА 17 строке, если переменная будет со значение 1, то видим сообщение «понедельник». Сообщение, со значением «2» - сообщение «вторник» и так далее. То есть видите, количество case-ов неограниченно, можем сделать столько case-ов, для того чтобы наше приложение работало корректно. Если мы допустили ошибку и ввели неправильно день недели, то срабатывает блок default и на 54 строчке выводится сообщение, что вы ввели несуществующий день недели. Давайте запустим этот пример, введем, например, «1» и вот у нас «понедельник» получился. Ввели значение «5» - «пятница». Ввели значение «9» - несуществующий день недели. Вот еще один пример работы оператора switch. Если внимательно присмотреться к этому примеру, то каждый case у нас заканчивается оператором break. Это не обязательно, вы можете не использовать оператор break, но его отсутствие будет приводить к такому, особенному поведению конструкции switch, это поведение мы сейчас разберем с вами в следующем примере.

В примере №9 мы хотим отображать уже не конкретно день недели, а выводить сообщения – выходной мы выбрали день, или рабочий. Точно так же получаем от пользователя ввод на 13 строке, на 15 строке создаем switch и проверяем значение переменной day, но посмотрите, как теперь у нас выглядит case. Case1 в себе не содержит инструкций и оператора break. То есть, если сейчас в переменную day попадет значение «1», на 15 строке мы switch проверяем эту переменную, перепрыгнем на строчку 16, потому что в переменной day находится «1», выполним этот case, из-за того, что нету оператора break, мы не выходим за пределы конструкции switch, мы проваливаемся вниз на вторую строчку, потому на третью, четвертую, пятую, выполним код, который определен на 21 строчке, и когда мы встречаем оператор break, вот из-за этого оператора мы покидаем блок switch, перепрыгиваем на 34 строку и продолжаем уже работать за пределами switch. Если мы вводим в переменную «дей» значение «6», то на 15 строчке, когда мы проверяем эту переменную, мы перепрыгиваем сразу на 23 строку кода, здесь у нас нету операции, нету блока, инструкции break, поэтому мы перепрыгиваем на 7 строку, на седьмой case точнее, выполняем инструкции, которые здесь заложены, и 28 строчка встречаем break, мы выпрыгиваем за пределы switch. Вот получается, что когда вы создаете case, и в casе не определяете ключевое слово break, по завершению всех инструкций, то, в таком случае, если case выполнится, выполнение проводится к следующему case, вы выполните следующий case, который идет у вас по очередности в операторе switch, вот тоже такая особенность, о которой вы должны знать. И теперь пример, показывающий, работу оператор switch, тем более уже приближенное к жизненному примеру. Вот представьте, вы разрабатываете сайт, на котором заказывается доставка кофе, например. На строке 16 мы спрашиваем у пользователя «Выберите размер кофе», «1» - это маленький стаканчик, «2» - это средний и «3» - это большой стаканчик. Получаем выбранное значение в переменную coffeeSize и в 15 строчке создаем переменную cost, которая хранит в себе значение «0», стоимость выбранного стаканчика, изначально, стоимости мы не знаем. Дальше 17 строка. Мы проверяем значение переменной coffeeSize. Если значение переменной «1», то строка 20, мы в переменную cost записываем значение 25, то есть добавляем к значению переменной значение 25, увеличиваем это значение на 25. И 21 строчка – отображаем в теле документа изображение. Создаем тег «img», с адресом кофе. coffee.jpg, видите, эта картинка находится в нас в проекте, вот она у нас в самом конце папки conditional statement, и указываем высоту и ширину, по 100 пикселей. Если размер кофе – «2», то к переменной «cost», к значению 0, мы добавляем значение «50» и тоже отображаем картинку, но уже больших размеров. Если пользователь выбирает кофе большой, куда входит значение 3, то стоимость кофе 75 и другой размер отображается картинки на экране. Если значение введено неправильно, то срабатывает блок default и выводится сообщение «Неверный выбор», иначе, если все нормально, если switch этот мы прошли, зашли в какой-то ?case? . 43 строка – мы проверяем результат работы switch, проверяем получилось ли что в переменную cost записать, потому что если у нaс не сработают case, default, он у нас не меняет переменную cost, получается, что в переменной cost останется значение «0», которое было на начале, перед тем как выполнился блок switch. И вот получается, что если у нас cost не ноль, это означает, что мы ввели какое-то корректное значение. Строка 44 – в самом конце мы пишем сколько нужно внести оплату для того чтобы получить выбранное кофе. Давайте сейчас запустим этот пример. Вот наше окно, которое спрашивает какое кофе мы хотим купить, мы выбираем маленький стаканчик, нажимаем «Ок», и нам отображается стаканчик с кофе, и нам написано, что нужно внести туда 25 копеек. Если мы обновляем сейчас эту страницу и вводим значение «3», то есть большой стаканчик кофе, нажимаем «Ок», отображается большой стакан – «75 копеек». Вот пример работы оператора switch. То есть, если у вас задача сделать несколько веток алгоритма, если есть задача перейти на первую ветку, вторую, третью, четвертую, как в нашем случае, вот тогда удобно использовать оператор switch, потому что он предназначен как раз для таких вот целей.

Теперь мы переходим к последней условной конструкции, которая есть в JavaScript, это оператор, тернарный оператор. В №11 примере, мы разберем самую простую форму тернарного оператора. На строчке 23 мы определяем несколько переменных. К стати, это первый раз, когда мы создаем переменные, используя один только оператор var. В предыдущих примерах мы каждый раз, когда создавали новую переменную, создавали ее с помощью инструкции var, и эту инструкцию дублировали несколько раз. В этом примере вы видите, что мы создаем переменную «а», «b» и «max» через запятую. Такой синтаксис тоже будет работать, это правильный вариант создания переменной. Теперь смотрим на строку 27. Когда мы используем тернарный оператор, его задание – инициализировать переменную каким-то значение, значением, которое будет получено в результате проверки некоторого условия. И вот мы переменной «max» присваиваем результат, который вернет нам вот этот тернарный оператор. Тернарный оператор состоит из трех частей. Из условия – до знака вопроса. Из значения, которое будет использоваться, если условие истинно, значение — это указано после знака вопроса. И значения, если условие ложь. Если значение — это указано после двоеточия. Переменная «а», содержит в себе значение 1, переменная «b» – значение «2». Один больше два – это условие у нас ложное, это выражение даст нам результат ложь. Поэтому срабатывает тот код, который идет после двоеточия. Мы получаем значение «b», это значение записываем в переменную «max». На 29 строчке эту переменную отображаем и видим, что максимально значение у нас «2». Если мы сейчас поменяем код, напишем сейчас здесь 10, например. «10» больше, чем «b», чем «2», это выражение уже истинно, поэтому значение «а» будет записано в переменную «max», и на 29 строке будет отображена «10». То есть, максимальное значение, которое находится в одной из двух переменных, вот мы видим результат «10». Вот это самый простой вариант использования тернарного оператора, обычно их применяют в тех случаях, когда определить полноценное условие, это просто излишний код, когда нужно проинициализировать переменную, и инициализацию произвести после некоторой проверки. Но этот же код, который вы видите на строчке 27, можно было бы написать вот таким вот способом. Проверить, если переменная «а», больше, чем переменная «b», то тогда взято и в переменную «max» записать значение «а», иначе, если переменная «а» меньше, чем переменная «b», в переменную «max» записать значение «b». Оба варианта будут корректными и такой подход, и такой подход даст нам одинаковый результат, но первый вариант, он на много короче. Нужно смотреть, если использование тернарного оператора будет слишком ваше приложение, то лучше использовать именно if…else, потому что этот код будет более читабельным, более понятным.

Еще один пример по использованию тернарного оператора. Пример №12. В этом примере у нас тоже определяется несколько переменных - «а» со значением «1», «b» со значением «2», «с» со значением «-5» и переменная ««max»». Строка 15, мы в переменную «max» записываем результат, который вернет тернарный оператор. В условии тернарного оператора у нас проверка «а» > «b». Если результат истинна, мы выполняем такое выражение, если результат ложь, выполняем это выражение. Получается, что сейчас, на строчке 15, когда у нас сработает вот такой блок кода, в переменную «max» будет возвращается не значение переменной «с», а результат вот этого выражения. Сейчас в этом выражении в переменной «с» присваиваем значение «а», получается, переменная «с» изначально была «-5». Если выполнится это выражение, в переменную «с», вместо «-5» будет записано значение «1» и результат «1» будет записано в значение «max». То есть, и переменная «с» поменяется, и переменной «max» будет присвоено новое значение. Если здесь ложь, то тогда в переменную «с» будет записано значение «2», вместо «-5» и результат «2» будет записан в переменную «max», которую мы на 18 строчке отобразим. В этом примере показано как тернарный оператор может не просто одно значение возвращать, а выполнять некую инструкцию. Он может здесь функцию вызывать, выполнять какое-то количество арифметических операций или других каких-то действий, но в любом случае тернарный оператор, какой-то результат должен вернуть и записать в переменную, которая находится слева от оператор присвоить.

И давайте еще посмотрим последний пример, приближенный к жизненной ситуации. Пример, показывающий работу тернарного оператора, на 13 строке мы создаем переменную «quantity» то есть «количество», «price» - «цену», «discount» - «скидку» и «cost» - «общую стоимость». Опять таки эти переменные можно было создать одной строкой, как это мы делали в предыдущих примерах, но сейчас, для того чтобы каждую переменную можно было от комментировать, в нас они разбиты по нескольких строчках. Теперь строка 20, мы рассчитываем значение, которое должно будет записано в переменную «cost». То есть, рассчитываем стоимость покупки, допустим. Мы имеем следующее правила. Если купили десять единиц товара и больше, то предоставить скидку 25%, иначе – скидку не предоставлять. Вот у нас идет выражение, которое рассчитывает стоимость покупки. Если количество больше равно десяти, если это выражение у нас истинно, то определяется код, определенный после знака вопроса. «Quantity», то есть количество, умножается на стоимость, умножается на скидку и результат, который дает это выражение, записывается в переменную «cost». Если же условие не срабатывает и результат условий ложь, срабатывает эта инструкция, мы «quantity» умножаем на «price» и результат записываем в «cost» и выводим результат на экран. Вот в нашем случае, так как мы сейчас купили десять единиц товара, вот у нас общая стоимость товара составляет 150 единиц, хотя цена у нас на единицу – 100, ну вот, скидка была присвоена.

Первая часть нашего урока была посвящена условным конструкциям, вот мы с вами рассмотрели те условные конструкции, которые есть в JavaScript. Вы видели как они используются в простых примерах.

Теперь мы возвращаемся к презентации, и разберем вторую тему, которая затрагивается в этому уроке, это циклические конструкции. Очень часто в сценариях, и в любых приложениях, написанных на любом языке нам приходится выполнять однотипные задачи несколько раз. Несколько раз отобразить пользователю сообщение, несколько раз выполнить создание какого-нибудь блока HTML-кода. Представьте, ваша задача – создать таблицу на сто строчек. Можно эти сто строчек скопировать руками, а можно определить JavaScript цикл, который сто итераций, сто повторений и создаст сто каких-то записей. То есть цикл – это конструкция языка, управляющая конструкция, которая позволяет несколько раз выполнить определенную конструкцию кода. Один веток цикла, то есть один проход по циклу называется итерацией. Вот на слайде, который мы сейчас открыли, мы видим общее представление того, как выглядит цикл, как он работает. У нас есть условие (пока), какое-то условие будет истинным, у нас будет срабатывать тело цикла, то есть начало цикла и конец цикла – это блок кода, в котором определены конструкции, выполняющиеся до тех пор, пока условие будет истинным. Как только условие у нас ложь, циклическая конструкция перестает работать и прекращает выполнять повторяющие действия. В JavaScript есть три циклических конструкции. Первая циклическая конструкция — это цикл с предусловием, или while. Посмотрите на блок-схему. Выполняется наш алгоритм, мы доходим до условия, если условие истинно, мы попадаем в блок кода, выполняем серию команд, после серии команд возвращаемся на начало, переходим обратно к условию, и еще раз проверяем это условие. Если после завершение операции, определённых в блоке кода условие ведает нам результат false, мы выходим за пределы этого цикла. Но если условие остается true, мы возвращаемся в серию команд, выполняем их, переходим на начало, проверяем условие, если условие опять истинно, делаем серию команд, возвращаемся в начало и так зацикливаемся до тех пор, пока условие не выдаст результат false. Вот посмотрите на простой пример цикла while. Счетчик, со значением ноль, дальше мы делаем, запускаем цикл, используем ключевое слово while, переводится оно «пока», то есть, пока счетчик меньше 10, цикл нужно выполнять, нужно выполнять тот блок кода, который находится в теле цикла, это начала цикла, это конец цикла. И вот инструкции, которые определены в цикле, увеличиваем счетчик, и выводим счетчик на экран. Выполнили инструкции, дошли до конца цикла, возвращаемся на начало, на условие, как на блок-схеме. Вот наши команды, они представлены двумя этими строчками кода, когда команды завершились, мы прыгаем на начало и еще раз выполняем проверку условия. Счетчик у нас увеличился на единицу, то есть теперь у нас будет, изначально была проверка ноль меньше десяти, проверка дала значение true, мы попали в условие, теперь один меньше десяти, попали в условие, потом два меньше десяти, и так несколько раз до тех пор, пока мы не увеличим значение счетчика до десяти, и когда у нас будет условие десять меньше десяти, такое условие будет у нас ложным, и цикл прекратит работу. Это был первый цикл, который мы можем использовать.

Второй цикл, который есть в JavaScript, это цикл с пост условием, отличие его от предыдущего цикла заключается в том, что мы вначале что-то делаем, а потом выполняем проверку, то есть, условие у нас идет после серии команд. Вот посмотрите на блок-схему, мы выполнили серию команд, а после этой серии команд проверяем, если условие дает результат true, мы возвращается на начало, и еще раз выполняем эту серию команд, и так до тех пор, пока условие не будет ложным, как только условие while мы прекращаем выполнять цикл. Вот посмотрите, как выглядит это в коде, создали переменную счетчик и теперь используем ключевые слова do…while. В предыдущем примере это был while, теперь это do...while. В начале, то есть do, делаем увеличение счетчика, вывод значения на экран, а потом проверку. Счетчик меньше 10, если меньше, возвращаемся на начало, еще раз выполняем следующею итерацию. Если счетчик у нас будет равен 10 и больше 10, то тогда мы прекращаем выполнять этот цикл.

И последний цикл, который есть в JavaScript, это цикл фор, цикл со счетчиком. Работает этот цикл у нас по такому принципу, вначале создается счетчик, дальше проверяется условие, если условие у нас истинно, мы выполняем серию команд, потом меняем счетчик и возвращаемся к условию. Если после изменения счетчика условие истинно, выполняем серию команд, изменяем счетчик, возвращается к условию. И так до тех пор будем крутится в этом цикле, пока условие не будет ложным. Как только условие false, мы перестаем выполнять команды и выходим за пределы тела цикла. Вот как этот цикл настраиваются у нас в коде. Для этого цикла используется ключевое условие for. Определив ключевое слово в параметрах, которые идут в круглых скобках, вам нужно указать три блока кода. Первый блок кода var i = 0. Здесь вы можете написать в принципе какой угодно код, но чаще встречается вот такое выражение. Вот выделенный сейчас код это и есть создание счетчика. Вот у нас появился счетчик со значением ноль. Этот код сработает только одни раз. Дальше следующие, у нас идет условие. Вот наше условие, I < 10. То есть цикл, который мы сейчас настраиваем, будет работать до тех пор, пока переменная и счетчик меньше десяти. Дальше тело цикла. Вот наше тело цикла, это операция вывода счетчика в тело документа. Когда эта операция у нас до конца отработает, видите, серия команд у нас срабатывает, у нас идет изменение счетчика. Изменение счетчика это и есть третий параметр, который определяется в блоке for. То есть, i++ это то, как мы собираемся счетчик менять. Вы помните, что с предыдущего примера, что оператор ++ это инкремент, это увеличение значение переменной на единицу. Получается, что каждый раз, по завершению итерации, счетчик увеличивается на единицу. Каждый раз, счетчик меньше десяти, или нет. Если счетчик меньше десяти, мы цикл выполняем, как только счетчик достигнет значение десять, мы цикл остановим. Вот получается: счетчик, условие, изменение счетчика. И цикл работает до тех пор, пока данное условие будет истинным. Не обязательно, чтобы здесь переменные назывались таким вот способом, не обязательно, чтобы проверка заключалась именно в проверке меньше-больше, вы можете здесь делать любые операции, главное, чтобы здесь создалась какая-нибудь переменная, здесь переменная проверялась, а здесь, с этой переменной что-то происходило. Вот так выглядит настройка цикла for. Давайте сейчас мы перейдем в Visual Studio, и посмотрим, как в Visual Studio эти циклы настраиваются уже непосредственно в коде. И так, возвращаемся в Visual Studio, и посмотрим с вами на циклические конструкции в JavaScript коде. Первая конструкция, которую мы разберем, это цикл с предусловием, то есть, while. Код, который вы сейчас перед собой видите, код такой же мы с вами рассматривали на слайде. Строка 13, определяется переменная с именем counter, присваивается значение ноль. На строке 15 мы хотим запустить цикл, который на экран выведет десять цифр: 1, 2, 3, 4, 5… Поэтому, мы запускаем цикл, указываем, что выполнять цикл нужно до тех пор, пока значение переменной counter, меньше десяти. На каждой итерации цикла мы counter будем увеличивать и на 17 строчке отображать значение переменной тело документа. При этом, после значения будем делать перенос на новую строку. Так как у нас counter постоянно увеличивается, когда мы выполняем до конца данную итерацию, возвращаемся на условия, то counter постоянно у нас будет больше на единицу, то есть, рано или поздно, это условие перестанет выполнятся, будет здесь значение ложь. И соответственно цикл прекратит свою работу. Давайте мы сейчас запустим браузер, и вот мы видим, что у нас отобразилось десять цифр, от одного до десяти. Также хочу вам показать, как работает такая полезная вещь, доступная у всех браузерах, которая называется отладчик. Отладчики, они есть в FireFox, есть в Chrome, в Internet Explorer, практически везде отладчик запускается через комбинацию клавиш F12. Вот если мы сейчас. У единственная Firefox, нажатие на клавишу F12, запустит фаербак, фаербак тоже предоставляет нам такую возможность как отладка кода, но мы сейчас в Firefox разберем отладку кода на стандартном отладчике, который есть в самом браузере. Видите, у нас, когда мы нажали на F12, или inspect элемент выбрали, в нас появляется специальная панель в браузере, инструменты разработчика. Похожая панель будет доступна у вас в браузере Internet Explorer или хром, ну или другом браузере, который вы используете. Единственное, если мы сейчас переключаемся на debugger, на отладчик, видите, что здесь у нас ничего нету. Нету никакого исходного кода, который можно было бы проверять. Если мы сейчас обновим страницу текущую, у нас отладчик увидит HTML и JavaScript код, который есть в текущем документе и сейчас этот код мы сможем с вами пошагово выполнить, посмотреть его состояние на этапе выполнение. Если вы хотите выполнить отладку кода, вам нужно определить место в которому будете эту отладку начинать, точку на которой вы остановитесь, и начнете пошагово смотреть какие значение есть в переменных, использующихся в коде. Для того, чтобы установить точку, на которой вы будете останавливаться, вам нужно сделать breakpoint или по-другому еще точку остановы. Вот есть такой термин в программировании как точка остановы или breakpoint. Это участок кода, на котором мы остановимся, если запустим приложение в режиме отладчика. Для того чтобы сделать точку остановы в Firefox, на нужно кликнуть по номеру той строки, на которой вы хотите код приостановить. Вот мы хотим на моменте создания переменной counter остановится и поставили точку остановы. Теперь нам нужно перегрузить страницу, значит вот она сейчас у нас не сработала, давайте попробуем еще раз открыть этот же код. Еще раз ставим точку остановы, еще раз обновляемся, и вот сейчас уже код сработал, видите, мы обновив эту страницу, мы видим, что у нас напротив точки остановы появляется зеленый маркер, который указывает ту строчку кода, в которой сейчас выполняется. Обратите внимание, что кроме исходного кода, появляется еще окно, в котором доступны значение локальных переменных, и других объектов, видимых в текущем контексте. Вот, например, у нас есть объект window, в нем, в этом объекте есть куча разных свойств, разных значений, функций, мы будем конечно не все эти функции изучать. Но в следующем курсе advanced, мы детально разбираем что из себя представляет window, документ, какие у нас есть возможности уже непосредственно, в использовании в таких более сложный конструкциях языка Javascript. Вот кроме таких вот объектов, которые предоставляет нам сам браузер, для того чтобы у нас в текущем контексте была возможность обращаться там, работать с адресной строкой, работать с запросами к серверу, с ответами с сервера, работать с HTML разметкой. Вот кроме вот этих данных, у нас еще есть и свои собственные локальные переменные, видите, у нас есть переменная counter, которая сейчас пока undefined, потому что эта строчка по сути еще не выполнилась. Нам нужно сейчас продолжить пошаговое выполнение текущего кода для того чтобы в переменной counter вводить какие-либо данные. Для того чтобы сделать шаг вперед, вы можете либо использовать эту кнопку на панели, кнопку stepover, либо нажимать на клавишу F7. Как только вы кликните по этой кнопочке, видите, вы перепрыгиваете на следующею конструкцию, и обратите внимание — вот в этом watch-окне у вас есть counter со значением ноль. Если мы сейчас нажимаем, потому что он только что проанализировался, counter равен нулю, ноль меньше десяти, условие срабатывает, то есть, мы теперь попадаем внутрь. Теперь маркер показывает на 16 строчку, мы counter сейчас собираемся увеличить, вы помните, что если инкремент идет как постинкремент, то увеличение пройдет на следующей инструкции, если мы сейчас значение counter ноль, если мы нажимаем на stepover, переходим на следующею инструкцию, и counter теперь уже равен единицы. Сейчас выполнив эту инструкцию, мы в тело документа выведем значение счетчика плюс перенос, и сейчас мы должны будем вернуться на начало, на условие. Нажимаю Stepover, видите, мы опять пригнули на условие, counter теперь равен единицы, единица меньше десяти, условие истинно, мы выполняем инкремент, выводим результат, возвращаемся к условию, counter уже равен двойке, и так мы можем нажимать и увеличивать, пошагово выполнять код. Вы видите, параллельно у нас формируется контент страницы, мы увеличиваем, шесть, счетчик, семь, цикл выполняется, восемь, девять. И последняя осталась операция, вот десять мы вывели, теперь counter равен десяти, десять меньше десяти, это условие уже не выполняется, мы не попадаем в условие, обратите внимание, мы сейчас просто выпрыгнем за пределы while, пойдем 18, 19 строка, нажимаем еще раз на stepover, и вот мы уже дошли до конца цикла. Дальше у нас кода в текущем документе нет. Вот, полезная функция, которая есть в каждом браузере, это отладчик, который позволяет таким образом анализировать код, и проверять значение который сейчас доступны в локальных переменных.

Следующий пример тоже уже показывает работу конструкции while, но в этом примере у нас есть оператор break который мы не обсуждали, когда смотрели слайды. Оператор break позволяет выполнять остановку цикла на любой итерации, то есть когда нам это будет необходимо. Сейчас в этому примере вы видите, что мы создали переменную counter, мы запустили цикл, в котором проверяем counter меньше трех, по сути так counter увеличивается постоянно на единицу, этот цикл должен был выполнится три раза, три итерации должен был произвести, на строке 17, после увеличение счетчика мы выводим значение counter, на строке 19 мы используем оператор break, этот оператор брейк указывает цикл, в котором находится, что данная инструкция должна быть последней, данная итерация должна быть последней, то есть, как только мы выполним этот оператор, мы сразу же прекращаем работу цикла while, не важно на какой итерации он находился и после выполнения этого оператора мы перепрыгиваем на строку 24, и выводим, что произведено столько то итераций. Мы сейчас увидим, что была выполнена только одна итерация, мы только одни раз увеличили счетчик, соответственно, на строке 24 к counter будет равен единицы. Ну, давайте запустим пример, мы увидели один раз counter, counter увеличили, вывели его на 17 строчке, вот это сообщение вывели. И строка 24, после выполнение оператора break, выполнили 24 инструкцию, то есть получается, код, который был на 21 строке

Который идет после оператора break, он уже не срабатывает, потому что break прекращает выполнение цикла while. Пример использования, для чего может пригодится оператор break, представьте с помощью цикла while вам нужно пройтись по, допустим, у вас есть тысяча записей, тысяча имен пользователей, и вам нужно найти пользователя с именем Иван Иванович. Вы берете первого пользователя, проверяете его имя, второго пользователя, если первый не подошёл. Проверяете имя второго, третьего, четвертого и так далее. Как только вы находите необходимую запись, допустим на десятой итерации цикла, вы нашли пользователе с именем Иван Иванов. Вам больше не надо выполнять итерации и искать пользователей, потому что-то, что вы искали вы уже нашли. Вы хотите оптимизировать свой код и не делать лишних там девятисот итераций. Поэтому, если вы хотите прекратить выполнение цикла, вы можете просто сделать оператор break, его необязательно писать в коде, как мы это делали непосредственно в цикле while. Вы могли бы написать условие. Если пользователь найден, выполнить оператор break. Если написать, если счетчик равен, например, двум, то тогда взять и выполнить эту инструкцию. Вот в таком случае сейчас у нас цикл выполнит первую итерацию, 18 строка не сработает, потом цикл выполнит вторую итерацию, и 18 строчка уже выполнится, мы перейдем на 19 строку и прекратим работу цикла. То есть сейчас, вот в этом примере, когда мы добавили условие, цикл у нас выполнит две итерации. Давайте проверим. Видите, первая итерация, вторая итерация, и цикл закончит свою работу. Поэтому, оператор break, он может встречаться не только в чистом виде в коде, по сути такой код, он бессмысленный, зачем тогда нужно было вообще создавать цикл, если у нас только один раз выполнятся вот эти две инструкции. Поэтому break, его обычно используют в блоке if. И давайте посмотрим на пример №3. Кроме оператора break, при работе с циклам еще можно использовать оператор continue. Задача этого оператора не остановить цикл, а перевести цикл на следующую итерацию. break завершал цикл, а continue говорит, что сейчас мы на строке 19 должны перепрыгнуть на условие. То есть не выполнять до конца этот цикл, а прыгнуть на начало и выполнить еще раз проверку условия и те инструкции, которые до оператора continue. Если естественно условие будет истинным, и мы сможем попасть в тело условия. В этом примере у нас будут произведены все три итерации. То есть три раза выполнится увеличение счетчика и вывода вот этих данных на экран. Но у нас не разу не выполнится строка 21. Потому что мы не сможем к ней добраться. На 19 строке нас постоянно будут возвращать назад, возвращать на начало цикла и проверять условие. Если мы запустим этот пример. Видите, все три итерации выполнились, вывелось три сообщения, но эта строка не выполнится, та и не появилась у нас в теле документа. Вот пример использования цикла while.

Теперь пример такой мини-игры, в которой пользователь будет угадывать цвет, который загадал сайт, загадала страница браузера. Сейчас у нас на 13 строке есть сообщение «угадайте задуманный цвет с пяти попыток». Это сообщение мы где-то ниже будем отображать. Дальше строка 15 по 17. Мы создаем несколько переменных, которые будут использоваться у нас в коде. Есть переменная maxattempt, то есть максимальное количество попыток со значением 5. Есть переменная attempt, это счетчик, сколько попыток мы уже сделали. Пока у нас не было ни одной попытки. И строка 17, есть переменная color, которая будет хранить в себе цвет, загаданный страницей. Мы сейчас не усложняли наш код, мы не делали какого-то генератора случайных значений, который бы генерировал нам случайный цвет, мы просто вставили сюда константу red, то есть всегда у нас страница будет загадывать красный цвет. Теперь, чтобы эта игра была интересной, чтобы мы могли несколько раз попытаться угадать значение которое загадала страница, мы запускаем цикл на 19 строчке. Цикл будет работать пока переменная attempt меньше чем переменная maxAttempt. То есть мы даем возможность пользователю попробовать пять раз угадать значение, maxAttempt равен пяти, attempt равен нулю. На первой итерации мы увеличиваем attempt на единицу. Дальше, 22 строчка, выводим пользователю сообщение «угадайте задуманный цвет с пяти попыток». И напишем «попытка номер attempt». Помните, конкатенация строк. Мы сейчас с вами делаем пользователю красивое сообщение. То есть, первое сообщение + пробел попытка и номер попытки, который вот в нас находится в переменной attempt. Вывели сообщение, получили от пользователя результат, поместили этот результат в переменную value. Дальше проверили, если value у нас ноль, если пользователь ничего не ввел, мы делаем break и прекращаем эту игру, больше никаких данных пользователю не отображать. То есть break выбрасывает нас за пределы цикла, если же это условие у нас прошло, если попали внутрь условия, мы переходим на строку 28 и проверяем, если переменная value не равна color, если то что ввел пользователь не совпадает с тем, что загадал наш сценарий, то 29 строчка, переменную str мы вводим значение «вы не угадали». И оператором continue перебрасываем пользователя на начало цикла while, то есть увеличиваем опять счетчик и уже выводим другое сообщение prompt «вы не угадали», это то что будет находится в переменной после выполнения 29 строки. Выводим сообщение вы не угадали и попытка, уже попытка номер два. Опять проверяем это условие, проверяем угадали ли мы цвет, если на второй раз цвет был угадан, то строка 33, выводим сообщение «поздравляем, вы угадали» с таки-то попыток. То есть вот значение переменной attempt, которое у нас здесь постоянно увеличивается мы сюда вывели и оператором break мы игру прекращаем, переходим на 37 строчку выводим сообщение, что игра у нас закончена. Вот такой пример использования цикла. Давайте мы его запустим и попробуем. Вот у нас выводит сообщение в окно «угадайте значение цвета с пяти попыток». Попытка первая. Вот ввожу green, Ок. Вы не угадали. Попытка вторая. Ввожу blue, не угадали, попытка третья, то есть видите, цикл продолжается, продолжаю работать, если ввожу red, нажимаю ОК, и пишет «поздравляю, вы угадали с трех попыток» и сообщение, что игра закончилась. Если же я сейчас буду вводить различные значение не угадывая результат, видите вывелось «конец игры», то есть я так и не смог угадать з пять попыток. Вот пример использования циклических конструкций и условных конструкций. Простая игра.

Следующий цикл, это цикл с предусловием. Такой цикл используется немного реже чем цикл while, суть его заключается в том, что в начале выполняется некоторая инструкция, а потом происходит проверка условия и переход к следующей итерации цикла, либо прекращение всего цикла. На строке 13 мы создаем счетчик, со значением ноль. Далее используя оператор do, мы указываем, что начинаем цикл, в любом случае у нас выполнится хотя бы одна итерация. Обратите внимание, что используя цикл do…while, вы гарантировано выполните одну итерацию. Используя цикл while, если условие до первой итерации не даст вам истину, то тогда цикл вообще выполнятся не будет, то есть в цикле while возможна такая ситуация, когда итерации не произойдут, то есть ничего не выполнится, в цикле do…while будет хотя бы одна итерация. Мы выведем сообщение счетчик, то есть выведем значение ноль, потому что счетчик еще не увеличивался, дальше мы счетчик увеличим, и после этого на 18 строке мы сделаем проверку. Если счетчик меньше 10, это первая итерация, будет меньше 10, мы вернемся на 15 строку к инструкции do, еще раз выведем счетчик, уже увеличенный, еще раз инкрементом увеличим на один, опять делаем проверку и так 10 раз. Вот видите точно такой же результат, как и в предыдущих примерах. Единственное, сейчас, отсчет идет от нуля. Потому что мы вначале выводим, а потом уже увеличиваем счетчик.

Следующий пример, пример в котором мы будем показывать, как можно выполнять цикл до тех пор, пока пользователь не введет какую-то определенную ключевую фразу. Вот сейчас на 6 строке, в шестом примере у нас есть цикл do…while, в котором мы на 16 строчке получаем от пользователя текст, мы вначале просим текст, а потом уже начинаем делать какие-либо проверки. Мы получили в переменную input значение. 17 строчка, вывели это значение в тело документа. Строка 18 делаем проверку. Если input не равен нал, то тогда мы возвращаемся на начало, еще раз просим пользователя ввести какое-либо значение, опять выводим его в тело документа, и опять проверяем не равно ли оно нал. Вот цикл do…while очень удобно использовать в тех ситуациях, когда у вас значение, которое вы собираетесь проверить в условии цикла еще не известно до запуска цикла. Вот представьте, если вы пользуетесь циклом while. Вам придется спросить у пользователя значение и перед циклом, чтобы условие сделать, и так же значение запросить в самом теле цикла, чтобы, когда вы уже будете в самом цикле находится, чтобы вы могли возвращаясь в условие получать новые данные от пользователя. Это не очень удобно, потому что придется дублировать код функции prompt до цикла и после цикла. Но вот с циклом do…while таких проблем нету, вам дублировать функцию prompt не приходится, потому что в любом случае выполните первую итерацию, в любом случае вы спросите у пользователя какие-то данные, потом на всех следующих итерациях вам просто нужно проверять получение от пользователя данные после первой и последующих итераций. Вот давайте сейчас запустим этот пример, посмотрим, как выполнится. Мы ввели первое значение, оно вывелось в нас в теле документа. Второе значение у нас тоже вывелось. Если мы ничего не введем в prompt, prompt вернет нам нал, а как раз у нас на 18 строчке условие. Цикл выполнить до тех пор, пока у нас значение переменной input не будет там, вот сейчас оно у нас нал. Не Ок, надо cancel нажать, если мы нажимаем cancel, то в таком случае у нас возвращается нал, если мы нажимаем Oк, возвращается просто пустая строка. Нажимаем cancel, видите возвращаем нал, нал у нас отобразилось в документе, и вот у нас цикл прекратил работу. Но если же вот такой код мы захотели сделать с помощью цикла while, вот как бы он у нас выглядел. Давайте мы временно сейчас закомментируем вот этот блок кода, в Visual Studio есть комбинация клавиш, которая позволяет быстро делать комментарии. Если вы нажмете комбинацию клавиш Ctrl + К + С, комбинацию клавиш Ctrl + К + С, вот такой комбинацией клавиш вы код закомментируете, который был выделен. А комбинацией клавиш Ctrl + К + U, выделенный блок кода вы розкомментируете. Если я выделяю этот код и нажимаю Ctrl + К + U, видите комментарий у меня снимается. Ctrl + К + С, комментарий ставится. Вот как бы мы работали с циклом while, для того чтобы организовать такое же поведение. Вот мы создали переменную input, записали бы в эту переменную это значение, которое ввел пользователь. Скопировали его, вставили сюда и дальше бы мы написали цикла while. В цикле while мы делали бы проверку input не равен нал, и тело цикла в котором выводили бы вот сообщение document.writeinput, но если мы сделаем вот такое вот цикл, то он превратится в бесконечный цикл. Первый раз мы получил от пользователя данные, потом, если данные на нал, мы попали в цикл, вывели сообщение, вернулись на начало, input у нас не нал, вывели сообщение и так бесконечно будем это сообщение выводить. То есть нам нужно чтобы пользователь рано или поздно мог поменять информацию, получить новое, чтобы мы могли от пользователя получить новое значение, то есть на приходится вот эту строчку кода еще раз использовать вот здесь, здесь ее определить. Еще раз записать в переменную input какой-то результат введенный пользователем. Вот такой код, он уже у нас будет правильным. Первое сообщение, второе сообщение, третье сообщение, видите код уже работает. Ничего не ввели, нажали Cancel, код прекратил выполнятся. Но теперь у нас идет дублирование, вот мы вывели, получили от пользователя данные, вот мы их еще раз получили, это не очень хороший код в таком случае, мы должны всегда стараться как можно меньше дублировать кода, потому что если вы код дублируете, то дальше при сопровождение вам нужно будет сопровождать два одинаковых блока кода. Одинаковый код придётся потом переписывать. Если в каком-то участке кода вы выполнили изменение, а во втором участке кода, там, где было дублирование забыли произвести эти изменения, то ваше приложение начинает работать некорректно. Поэтому всегда старайтесь как можно меньше повторяться в коде, не дублировать код, мы с вами скоро дойдем до темы функции, вот с помощью функций вы можете свести к минимуму дублирование кода. Ну, этот пример я верну в исходное положение, и мы продолжим с вами дальше, предложим следующий пример №7.

В этом примере мы разберем с вами как с помощью циклических конструкций можно посчитать факториал числа. Что такое факториал числа? Я думаю, что многие из вам помнят. Если вы забыли о том, что такое факториал, посмотрите в Википедии описание этого термина. Факториал — это произведение всех натуральных чисел. Например, факториал числа три это один умножить на два умножить на три. Факториал числа там десять, это один на два на три на четыре и так до десяти — вот результат произведение всех этих чисел это и будет у нас факториал. Мы сейчас с вами с помощью циклических конструкций посчитать факториал некоторого числа. Значит 28 строка, мы просим, чтобы пользователь ввел число на которое мы хотим получить факториал. Дальше 29 строка. Изначально факториал у нас равен единицы. Потому что если взять факториал нулю, факториал нуля — это один, единица. Строка 31, мы выводим, что факториал числа такого то, равен и дальше мы здесь выведем результат, который будет рассчитан вот этим вот циклом. Мы запускаем цикл do, проверяем, если counter равен нулю, то мы сразу же говорим, что факториал один и операцию выполняем break, то есть прыгаем на строку 45 и выводим в тело документа единицу. То есть в итоге, если у нас counter ноль, будет написано факториал числа ноль равен единицы. Но если у нас counter какое-то другое значение, то мы начинаем работать внутри цикла, в теле цикла и делать вот такую операцию. В факториал мы записываем факториал умноженный на counter, после чего counter уменьшаем на единицу. Здесь можно было использовать операцию декремент, написать два минула, но в этом коде мы используем вот такой вариант. Это корректный вариант, никаких ошибок здесь нету. Например, если мы скажем, что хотим посчитать факториал для трех, то есть в counter будет находится значение три, в которое мы введем факториал изначально равен единице. На строке 29 сидите мы его задали. Один присвоить один умножить на три, то есть запишется в переменную факториал тройка. counter уменьшится на единицу, получится двойка. На следующей итерации мы возьмем тройку, умножаем на два, получим шестерку. Шестерка будет записана в факториал. Перейдем на следующею итерацию, предварительно уменьшив счетчик на единицу, следующее сделаем умножение и так до тех пор, пока counter не будет равен нулю. То есть если counter больше нуля, мы цикл этот выполняем. Как только counter становится равен нулю, мы сразу же прекращаем выполнять цикл и выводим результат. Давайте проверим. Ну допустим факториал числа три. Результат шесть. Факториал числа пятнадцать. Результат вот такая вот большая цифра. Ну, пример, показывающий то, как мы можем с помощью циклических конструкций посчитать факториал некоторого числа.

Следующий пример показывает, как мы настраиваем цикл фор. Как мы уже говорили, это цикл с счетчиком, в котором у нас увеличивается счетчик и проверка условия, которое мы указываем, оно проверяет как раз этот счетчик. Если вы заметили, у всех предыдущее примерах у нас тоже очень часто использовали счетчик и в цикле while, и в цикле do…while, мы в основном проверяли значение переменной, в которой просто инкрементировалась или декрементировалась значение. В примере, который мы сейчас открыли, на 15 строке мы создаем цикл for. Первая часть настроек цикла до точки с запятой это определение самого счетчика, то есть счетчик в нашем случае это переменная counter со значением ноль. Мы хотим, чтобы цикл выполнялся до тех пор, пока переменная counter у нас меньше трех. И мы хотим, чтобы на каждой итерации переменная counter у нас увеличивалась на единицу. Вот на 16 строке мы в тело документа отображаем значение переменной counter. Получается, что тот счетчик который мы создавали в определении цикла фор, он у нас доступен в теле самого цикла, мы без проблем можем возвращаться к этой переменной, вот ее с вами используем. Получается, что здесь у нас переменной counter изначально будет равная нулю. На первой итерации мы counter создали. Выполнили проверку counter меньше трех, проверка прошла успешно, на первой итерации мы пока никаких изменений для счетчика не производим, попадаем в тело цикла, выводим counter на экран, а потом, когда мы возвращаемся в начало цикла, первое, что мы делаем – это увеличиваем счетчик, проверяем условие. Если условие истинно, мы возвращаемся в тело цикла, выполняем все инструкции, потом, когда возвращаемся на начало, увеличиваем счетчик, проверяем условие. К вот этому выражению, выражению в котором у нас создается сам счетчик, мы уже не возвращается. Это выражение срабатывает только впервые, когда мы заходим до цикла фор. Ну а на строке 20, когда у нас уже закончится выполнение цикла, мы выведем количество итераций, которое было произведено. Вот, первый раз счетчик у нас ноль, второй раз один, потом два, а всего количество итераций — это три. Три итерации у нас получилось. Пример того как работает цикл фор.

Перейдем к следующему примеру №9, в котором показан. Пример, в котором с помощью цикла мы рисуем на экране большое изображение из маленьких кусочков. Значит на строке 12 мы запускаем первый цикл, который выполнит 10 итераций, видите счетчик, который у нас используется в этой циклической конструкции будет разрешать цикл, сработает только десять раз, из-за этого условие. Вложенный цикл на 14 строчке у нас будет срабатывать тоже десять раз. Обратите внимание, что когда вы используете вложенный цикл, вам нужно выбрать другое имя для переменной счетчика. То есть имена переменных счетчиков в циклах, которые вложены друг в друга, они должны совпадать. На 15 строчке вложенный цикл выводит в тело документа изображение, изображение tile.jpg, которое есть в текущей директории. Ну а когда мы все эти изображения отображаем в документе, 19 строчка, мы делаем перенос на новую строку. Как будет работать это приложение. Когда мы запустим сценарий, у нас начнет выполнятся этот цикл, он десять раз должен выполнить ложный цикл и перенос на новую строку. На первой итерации первого цикла мы переходим в ложны цикл и десять раз в одну строку выводим картинки. Когда десять картинок будет выведено, строка 19, мы делаем перенос на новую строчку. На 20 строке мы возвращаемся в начало цикла первого, то есть переходим уже на вторую его итерацию, еще раз выполняем десть раз вложенный цикл, и когда мы десять раз рисуем картинку на строке 19 у нас отображается перенос на новую строчку. То есть мы рисуем десять строк, в каждой строке будет находится по десять одинаковых картинок. Посмотрите какой результат у нас получится. Вот этот вот одна картинка, вот мы ее нарисовали десять раз, вот внешний цикл у нас участвует у, контролирует отрисовку строк. А вложений цикл на 14 строчке уже контролирует отрисовку отдельный картинок, которые находятся у нас в примере. Вот такой пример использования цикла фор.

Дальше у нас остается последние два примера по конструкции for, это пример использования цикла Дейкстры. Дейкстры я вам рекомендуй зайти на Википедию и найти информацию про самом Дейкстры почитать, биографию этого математика и поискать его алгоритмы. Так же можете вот здесь в Википедии найти статью про циклические конструкции и прочитать про циклы Дейкстры, про сам цикл Дейкстры, и про одну из его модификаций цикл паук, это способ запуска циклической конструкции, один из алгоритмов, который был предложен дейкстром, мы сейчас посмотрим, как этот алгоритм выглядит, как можем его реализовать в своем приложении. Значит, на строке 26 вы видите, создаем переменную «а», а на 38 строчке запускаем цикл. Когда вы запускаете цикл фор, не указывая ни переменную счетчик, ни условие, ни операцию, которая меняет счетчик, это означает, что данный цикл будет выполняется бесконечно. То есть эта циклическая конструкция будет работать бесконечно долго. Ну вы понимаете, что она будет выполнятся не бесконечно, потому что на 54 строке у нас используется оператор break, то есть рано или поздно мы к этому оператору подойдем, благодаря ему цикл перестанет работать, завершит свое выполнение. Кроме такого запуска бесконечных циклов, у нас также есть вариант использования цикла while. Можем определить while с условием безусловным true, получается, что такой вариант, он будет эквивалентен for с двумя точками запятыми в настройках. То есть таким способом мы запускаем тоже бесконечный цикл, оба варианта будут у нас корректны. Давайте мы оставим фор. Значит в чем будет заключатся цикл, который построен, который создан как цикл Дейкстры. У нас внутри цикла будет определен ряд охраняемых условий. И каждое условие будет определять охраняемую команду. Если ни дно охраняющие условие не выполняется, то в таком случае цикл прекращает свою работу. Мы на 40 строке получаем от пользователя ввод, и на 42 строчке введенное пользователем значение используем как условие выбора для оператора switch. В switch у нас есть два case с двумя значениями «l» и «r». Если пользователь вводит с клавиатуры значение «l», то это охраняющие условие срабатывает и дает нам возможность выполнить охраняющую команду, которая находится на 45 строке. Вывести сообщение «пойти на лево». После чего выполнить оператор continue, то есть вернуться на начало цикла for, и на следующей итерации спросить у пользователя новое значение и заново пройти ряд охраняющих условий. Если мы введем в переменную «а» «r», то соответственно срабатывает охраняющие условие на строке 48, срабатывает этот case и выполняется соответствующая охраняющая команда, которая опять бросает нас на начало цикла for. Мы в этом цикле будем работать до тех пор, пока не введем значение, которое не присутствует у нас в проверках охраняющих условий. То есть, если мы введем, например, букву «b» которой у нас нету в case, то в таком случае мы switch пропустим, и на 54 строчке выполним оператор break, прекратим вообще выполнение данного цикла for. Давайте сейчас еще почитаем комментарии, которые есть к этому примеру. Цикл Дейкстры. При выполнении цикла Дейкстры, в каждой итерации происходит вычисление охраняемых условий. В нашем случае, охраняемые условие этот case и этот case. Их может быть несколько, необязательно, чтобы этих условий было два, как в этом примере. Далее. Если хотя бы одно из них истинно, выполняется соответствующая охраняемая команда, после чего выполняется новая итерация. В нашем случае точно так же, если какой-нибудь из этих case срабатывает, если охраняющее условие сработало, выполняется команда, которая выполняла это условие, и мы возвращаемся на начало цикла, переходим к следующей итерации. Далее. Если истинны несколько охраняемых условий, выполняется только одна охраняемая команда. То есть первая, которая есть у нас в списке у нас выполнится. Если все охраняемые условия ложны, цикл завершается. Это мы тоже видим в нашем примере, если не один из case не сработает, то мы наткнемся на break и цикл прекратится. Цикл Дейкстры, с одним охраняющим условием, с одной охраняемой командой представляем собой по сути обычный цикл с предусловием, то есть цикл while. Вот такой краткий, формальный пример того как цикл Дейкстры у нас выглядит в коде. Видите, внизу у нас есть описание каждого блока вот в этом формальном примере, у нас есть маркер do, которые означает, что это начало конструкции, циклической. Od это завершение циклической конструкции, в нашем примере вот for, это начало циклической конструкции, вот у нас конец циклической конструкции. Дальше у нас идет Pi, P1, S1, где Pi – это охраняющие условие, а S1 – это охраняемая команда. То есть внутри цикла идет ряд условий и команд, которые условия охраняют. Если хотя бы одно условие у нас срабатывает, выполняется команда и мы возвращаемся на начало цикла. Если ни одно из охраняемых условий не сработает, то тогда мы цикл прекращаем. Вот в нашем случае вот наши охраняющие условия, 43 строчка – 48, а строка 45 и 50 это наши охраняемые команды. Вот такая реализация цикла Дейкстры в JavaScript. Рекомендую вам почитать от этом алгоритме на Википедии, я думаю, что вам теперь будет понятней то описание, которое находится в статье, которую мы видели переде началом разбора этого примера.

И переходим к примеру №11, посмотрим такой короткий пример применения цикла Дейкстры. У нас идет пример «Карта путешественника». Мы будем вводить с клавиатуры какие-то команды, а наш сценарий будет запоминать в каких направлениях мы пошли, будет запоминать его, выводить на экран те действия, которые мы с вами выполнили. То есть по сути здесь мы используем цикл Дейкстры. Я сейчас по сворачиваю код, чтобы нам было понятней как этот цикл работает. Вот начало самого цикла, цикл for, вот конец цикла Дейкстры, на 17 строке мы получаем от пользователя ввод, и switch на 19 строке представляет нам ряд охраняющих условий. Условие, которое проверяет наличие значение «l» в переменной «а», «r», «t», «b». То есть left, right, top, bottom. В зависимости от нажатой клавиши, мы будем попадать к охраняемой команде и ее выполнять. Если мы нажмем на клавишу l, то тогда мы в теле документа увидим сообщение «налево». Нажимаем клавишу «r» сообщение «на право». Ну, в «t» и «b» мы увидим вверх и вниз. Но если у нас не сработает ни один из этих case, мы попадаем в default и дополнительно спрашиваем у пользователя хочет ли он завершить работу этого цикла. Если мы ошибочно ввели неправильный символ, мы можем отказаться от завершения цикла, если же мы ввели как бы специально какой-то символ для выхода, мы можем с помощью этого окошка confirm, подтвердить, что мы выходим. Если мы в этом окне нажмем на кнопку ОК, в переменной exit будет записано значение true, соответственно мы зайдем в это условие, увидим сообщение, что вы завершили выполнение и break прекратим работу цикла Дейкстры. Если же мы попадем в блок else, то есть если мы нажмем в окне cancel, то тогда мы выполним оператор continue и продолжим работу этого цикла. Давайте запустимся. Вот «Введите направление», сначала мы пойдем направо, потом пойдем на лево, потом два раза вверх, потом два раза вниз. Видите, пока мы вводим правильные команды, у нас срабатывают охраняющие условия и выполняются охраняемые команды. Вот у нас строится маршрут, по котором мы пришли. Но если мы нажимаем на несуществующую команду, выполняем несуществующею команду, у нас спрашивает хотим ли мы выйти. Если мы нажимаем да, то у нас цикл прекращает свою работу. Вот такой пример алгоритма цикла Дейкстры в JavaSrcript. И теперь у нас остаются последние примеры, показывающие операторы, которые используются при написании цикла. Мы просто подведем итог использования оператора break и оператора continue. Первый пример показывает использование оператора break, но я надеюсь, что вы уже поняли, как он работает по предыдущем примере. В этом примере мы получаем от пользователя два значения, вначале спрашиваем сколько нужно выполнить итераций, а потом спрашиваем на какой итерации нужно завершить цикл. Получаем два переменные count и exit. И на 16 строке запускаем цикл for, в котором указываем, что счетчик у нас будет пропускать цикл, выполнятся, выполнять его итерации до тех пор, пока счетчик равен counter, то есть меньше чем count. И получается мы запускаем цикл этот на то количество итераций, которое указано в переменной count, на каждой итерации делаем проверку. Если счетчик равен значению переменной exit, то выполняем оператор брейк и прекращаем работу цикла на 16 строке. Если же условие у нас не срабатывает, то тогда 21 строчка, мы счетчик отображаем в тело документа. Если мы запустим этот пример, скажем, что хотим выполнить 30 итераций, но остановится на 10. Мы с вами увидим только десять сообщений, от нуля, до девяти. У нас отсчет шел с нуля. Вот ключевое слово break. Ключевое слово continue, помните, что оно у нас не завершает выполнение цикла, а переходит на следующею итерацию. Вот на 16 строке, после того как мы получили у пользователя количество итераций и число, которое мы не хотим увидеть, итерацию, которую мы хотим пропустить. Мы запускаем цикл, в котором делаем проверку на 16 строке. Если счетчик равен переменной exit, то мы выводим не значение счетчика, а просто перенос на новую строку. И выполняем оператор continue, который переводит нас на начало цикла и дает нам возможность выполнить следующею итерацию. Предыдущей оператор завершал нам весь цикл, цикл прекращался. Если мы сейчас запустимся еще раз, мы хотим выполнить десять итераций и пропустить третью. Вот как раз третья итерация у нас как раз прошла, ну, не третья итерация, а значение номер три мы не вывели. Первая итерация, вторая, третья, четвертая итерация, которая отображала тройку, на этой итерации мы данных не отобразили.

И последний пример, который показан в этом уроке – это пример использования меток при работе с циклами. Метки используются в тех случаях, когда у вас есть сложный алгоритм, в котором находится много вложенных циклов. Когда вам нужно выполнить оператор брейк или continue и связать его с циклом, который находится где-то в самом верху, в начале ваших вложенных циклов, вам придется использовать метки. Старайтесь метки не использовать. Такой код очень тяжелый в понимании и тяжелый в сопровождении, поэтому при возможность от меток лучше отказаться. В чем заключается метка. На 13 строке мы создаем цикл for, который будет выполнять две итерации и перед этим циклом for мы ставим метку, просто какое-то имя и двоеточие. Сейчас мы метку так и назвали, лейбл. На английском это означает метка. Дальше на 14 строчке у нас есть вложенный цикл, который тоже выполняет две итерации. На 15 строке мы получаем от пользователя ввод. «Введите любой текст, чтобы выйти нажмите отмена». И если у нас на 16 строчке будет проверка выдавать, что значение в переменной input null, то тогда на 17 строке мы выполняем оператор break + label. Вот строка 17 означает, что мы хотим остановить цикл, который находится на 12 строчке. Если мы уберем слово лейбл, после оператора break, то тогда break будет относится к первому циклу, который находится, если подняться вверх по коду, то есть break изначально будет относится к циклу for на 14 строчке, но если мы в вложенный какой-то цикл хотим обратится, к выше идущему циклу, нам нужно этот выше идущий цикл пометить меткой, а при использовании оператора break или continue, использовать эту метку. Получается, что на 17 строчке мы прекращаем работу всего этот, всех этих циклов, прекращаем работу по сути цикла, который находится на 13 строке, в который вложен весь этот код. Но согласитесь, понимание такого кода достаточно затруднительно, тяжело сообразить, в какой последовательности что будет срабатывать, как код, какой результат код будет выводить пользователю. Поэтому лучше отказываться от такого поведения и не использовать метки, а переписывать код в таком ключе, чтобы метки просто не встречались в коде.

На примерах, посвященных оператору break и continue мы заканчиваем этот урок, тема, которую мы разобрали – циклические конструкции и условные конструкции. Обязательно сделайте домашнее задание которое находится в *xps файлах к текущему уроку. Спасибо за внимание. До новых встреч.