JavaScript с нуля - [8]

На каждой стадии принятия решения вы задаете себе вопрос, на который можно дать ответ true (верно) или false (неверно). Ответ на этот вопрос определяет ваш следующий шаг и то, что в итоге вы наденете: футболку, худи или куртку. В более широком смысле любое наше решение можно смоделировать в виде череды инструкций true и false. От этого может стать слегка не по себе (еще бы!), но в общем и целом именно так мы, наше окружение и большинство живых существ совершаем свой выбор.

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

Поехали!

Инструкция if…else

Самая распространенная условная инструкция, используемая в коде, — это инструкция if…else, или просто инструкция if. Принцип ее работы показан на рис. 4.2.

Рис. 4.2. Как работает инструкция if

Чтобы в этом разобраться, рассмотрим инструкцию if…else в действии. Создайте новый HTML-документ и добавьте в него следующие разметку и код:

Сохраните этот документ под именем if_else.htm и выполните его предпросмотр в браузере. Если все сработает как надо, вы увидите уведомление с текстом You shall pass! (рис. 4.3).

Рис. 4.3. Вы увидите это уведомление

За полученный результат отвечают следующие строки кода:

let safeToProceed = true;

if (safeToProceed) {

alert("You shall pass!");

} else {

alert("You shall not pass!");

}

Наше выражение (то, что следует за ключевым словом if и в итоге оценивается как true или false) — это переменная safeToProceed. Эта переменная инициализирована как true, следовательно, был задействован вариант true инструкции if.

Теперь замените значение переменной safeToProceed с true на false:

let safeToProceed = true;

if (safeToProceed) {

alert("You shall pass!");

} else {

alert("You shall not pass!");

}

На этот раз при запуске кода вы увидите уведомление с текстом You shall not pass! так как теперь выражение вычисляется как false (рис. 4.4).

Рис. 4.4. Уведомление, получаемое, когда выражение вычисляется как false

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

Встречайте: условные операторы!

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

В общих чертах подобные выражения показаны на рис. 4.5.

if (expression operator expression) {

do_something;

} else {

do_something_different;

}

Рис. 4.5. Общий формат выражений с условными операторами

Оператор (то есть условный оператор) определяет связь между выражениями. Конечная цель — вернуть результат true или false, чтобы наша инструкция if понимала, какой блок кода выполнять. Ключом к выполнению всех этих действий являются сами условные операторы, которые приведены в табл. 4.1.

Табл. 4.1. Операторы

Оператор

Если true

= =

Если первое выражение дает результат, равный второму выражению

>=

Если первое выражение дает результат, который больше или равен второму выражению

>

Если первое выражение дает результат больше, чем второе выражение

<=

Если первое выражение дает результат, меньший или равный второму выражению

<

Если первое выражение дает результат меньше, чем второе выражение

!=

Если первое выражение дает результат, не равный второму выражению

&&

Если и первое, и второе выражения дают результат true

| |

Если либо первое, либо второе выражение дает результат true

Теперь перейдем от обобщенного понимания условных операторов к более конкретному, рассмотрев еще один пример, в котором подсвечен интересующий нас if-сегмент кода:

Разберемся, что же именно здесь происходит. У нас есть переменная speedLimit, инициализированная как 55. Затем есть функция amISpeeding, получающая аргумент speed. Внутри нее инструкция if, чье выражение проверяет, является ли полученное значение speed большим или равным (привет, условный оператор >=) значению, содержащемуся в переменной speedLimit:

function amISpeeding(speed) {

if (speed >= speedLimit) {

alert("Yes. You are speeding.");

} else {

alert("No. You are not speeding. What's wrong with you?");