Раздел: Сайтостроение / JavaScript /

Условный оператор в JavaScript

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

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

В этой статье я не буду погружаться в основы программирования, а только расскажу об особенностях использования условного оператора в JavaScript.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

ПРИМЕЧАНИЕ
В некоторых литературных источниках по JavaScript условный оператор называется “инструкцией”. Однако в литературе по другим языкам почти всегда эту “инструкцию” называют именно “оператором”. Поэтому и я буду использовать слово “оператор”.

Условный оператор if является основным и наиболее часто используемым оператором, который позволяет управлять ходом выполнения программы. Этот оператор, как и в большинстве других языков программирования, может проверять какое-то условие, и, в зависимости от выполнения (или не выполнения) этого условия, оператор if делает переход к тому или иному участку исходного кода.

Возможны два варианта использования этого оператора. Первый:

if (Выражение) Инструкция;

В этом случае, если Выражение ИСТИННО, то Инструкция выполняется. Иначе (если Выражение ЛОЖНО) Инструкция НЕ выполняется.

Второй вариант:

if (Выражение) Инструкция-1;
else Инструкция-2;

В этом случае, если Выражение ИСТИННО, то выполняется Инструкция-1. Иначе (если Выражение ЛОЖНО) выполняется Инструкция-2.

Как вы понимаете, если речь идёт о таких понятиях как ИСТИНА (true) и ЛОЖЬ (false), то Выражение должно возвращать логическое значение.

Примеры:

var x;

//Форма 1
if (x == undefined) 
  document.write("Переменная не определена<br>");

x = 100;

//Форма 2
if (x == undefined) document.write("Переменная не определена");
else document.write("Значение переменной = " + x + "<br>");

Сначала этот сценарий выведет "Переменная не определена", потому что переменная x объявлена, но не инициализирована.

Затем мы присваиваем переменной значение 100 и снова проверяем, определена ли переменная. Поскольку сейчас она уже определена, и мы используем вариант if-else, то сценарий выведет строку "Значение переменной = 100". Если бы мы использовали первый вариант условного оператора (без else), то на экран бы ничего не было выведено.

ВАЖНО!
Скобки вокруг Выражения обязательны! Даже если выражением является литерал.

ВНИМАНИЕ!
Если результатом Выражения будет null, undefined, 0, "" (пустая строка) или NaN, то результат преобразуется в false, например:

var x = 100;
var z;

if (!(x + z)) document.write("(x + z) = false<br>");

Этот пример выведет на экран “(x + z) = false”, потому что выражение

(x + z)

вернёт значение NaN, которое будет преобразовано в false. Несмотря на то, что переменная х инициализирована, но переменная z не инициализирована, поэтому попытка сложить две переменных приведёт к тому, что результат этого сложения будет неопределён.

ВАЖНО!
Обратите внимание на выражение (!(x + z)). Новичкам будет сложно в этом разобраться. Но вы постарайтесь. А я помогу.

Итак, в нашем случае выражение (x + z) будет преобразовано в false (ЛОЖЬ).

Однако в операторе if следующая за ним инструкция выполняется в том случае, если выражение ИСТИННО. То есть нам надо как-то преобразовать ИСТИНУ в ЛОЖЬ. Логика здесь простая:

ИСТИНА - это НЕ ЛОЖЬ, а ЛОЖЬ - это НЕ ИСТИНА

Таким образом, добавив перед выражением оператор логического НЕ, мы превращаем ЛОЖЬ в ИСТИНУ (про операторы я говорил здесь).

(x + z) равно false
!(x + z) равно true

Но, как я уже говорил выше, скобки вокруг выражения ОБЯЗАТЕЛЬНЫ. Поэтому наша запись выглядит так:

(!(x + z))

Если эти скобки не поставить, то просто произойдёт ошибка - сценарий остановится и ничего на экран выведено не будет. Можете проверить.

Вложенные условные операторы

Условный оператор может быть вложенным, например:

var x = 100, y = 50;

if (x == 100) 
  if (y == 50) document.write("x = 100 И y = 50<br>");
  else document.write("x = 100, y НЕ равно 50<br>");
else document.write("x НЕ равно 100, y не проверен<br>");

Здесь конструкция if (y == 50) вложена в конструкцию
if (x == 100).

Но будьте осторожны! В таких сложных конструкциях легко запутаться!

Покажу на примере:

if (x == 100)
{
  ;
  //Здесь ваш код если х равен 100
  if (y == 50)
  {
    ;
    //Здесь ваш код если у равен 50
  }
  else
  {
    ;
    //Здесь ваш код если у не равен 50
  } //if (y == 50)
} 
else
{
  ;
  //Здесь ваш код если х не равен 100
} //if (х == 100)

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

ПРИМЕЧАНИЕ
Во всём надо следовать принципу “разумной достаточности”. Это я к тому, что если у вас простая конструкция if с одной инструкцией, то нет смысла использовать операторные скобки.

Кстати, если вы ещё не догадались, то поясню - если после if или else надо выполнить несколько инструкций, то этот блок кода должен заключаться в операторные скобки (в JavaScript таковыми являются фигурные скобки {}).

Что такое NaN в JavaScript

На всякий случай (вдруг кто не знает), расскажу о том, что такое NaN. Такое слово вы можете встретить во многих языках программирования, а не только в JavaScript.

NaN (от английского Not-a-Number, “не число”) - это одно из особых состояний числа. Если вы любите мудрёные определения, то см. Википедию. А если сказать простыми словами, то это просто не числовое значение, которое получилось в результате операций с числами. Например, при попытке сложить число с переменной, которая не определена, как мы это сделали выше.

Любопытное свойство “не числа” - оно не равно никакому другому числу, и даже самому себе. В этом можно убедиться:

var x = 100;
var z, y;

y = x + z;  //Теперь у = NaN

if (y == y) document.write("y = y <br>");
else document.write("y НЕ равно y <br>");

Этот код выведен на экран "y НЕ равно y". Из этого следует, что вы не сможете с помощью таких операторов, как if, проверить, является ли значение переменной равным NaN. Поэтому в JavaScript существует специальная функция isNaN(), с помощью которой можно это сделать. Пример использования:

if (isNaN(y)) document.write("y = NaN <br>");

Ну на этом пока всё...

Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Программирование на JavaScript Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...