Циклы делают программный код мощнее, позволяя многократно использовать один и тот же фрагмент кода для последовательной обработки множества значений в массиве данных. Благодаря ветвлению программного кода сценарий становится более гибким, чувствительным к контексту выполнения программы и к требованиям пользователя. Выбор той или иной подпрограммы зависит от выполнения или не выполнения определённого условия. Для ветвления программного кода JavaScript используют конструкции операторов if-else, switch-case и условный оператор ?.

Оператор if

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

if (логическое выражение)
      {код, выполняемый в случае возвращения
      логическим выражением значения true}

Если логическое выражение в операторе if возвратит false, весь блок кода заключённый в фигурные скобки, будет пропущен, и управление перейдет к строке сценария, следующей за блоком оператора if.

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

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

if (логическое выражение)
      {код, выполняемый в случае возвращения
      логическим выражением значения true}
else
      {код, выполняемый в случае возвращения
      логическим выражением значения false}

Множественное ветвление программного кода

Мы рассмотрели простейший пример ветвления программного кода на две подпрограммы по условию, возвращающему одно из двух значений: true или false. Но в реальных ситуациях, которые мы пытаемся смоделировать с помощью сценариев, не все так просто. Если нужно сделать выбор между тремя или большим числом подпрограмм, одной конструкции if-else будет недостаточно. В зависимости от логики выполнения программы, проблему можно будет решить за счет вложенных конструкций if-else или с помощью операторов switch-case.

Вложенные операторы if

Часто ответ на один вопрос вызывает дополнительные вопросы. Логика таких сценариев следующая: если условие "А" выполняется, то нужно выполнить подпрограмму 1, если не выполняется, то нужно проверить условие "В" и по результатам проверки выполнить подпрограмму 2 или 3. Для решения этой проблемы можно использовать следующую комбинацию операторов if и else:

var A = логическое выражение;
var B = логическое выражение;
if (A)
    { код 1-й подпрограммы }
else {
    if (B)
        { код 2-й подпрограммы }
    else
        { код 3-й подпрограммы }
}

Выбор из трех подпрограмм — это ещё довольно простая задача. Часто в сценариях приходится проверять много разных условий, и бесконечные чередования if и else затрудняют чтение и понимание кода сценария. Чтобы упростить код, в JavaScript используется модифицированный вариант конструкции if-else для проверки ряда условий: if-else if. Предыдущая схема программного кода изменится следующим образом:

var A = логическое выражение;
var B = логическое выражение;
if (A)
    { код 1-й подпрограммы }
else if (B) {
        { код 2-й подпрограммы }
...
    else
        { код 3-й подпрограммы }
}

Сначала проверяется условие "А". Если "А" - false, проверяется условие "В". Если "В" окажется false, можно таким же образом добавить проверку условия "С" и т. д. Конструкцию завершает одиночный оператор else, блок которого выполняется только в том случае, если все условия оказались false.

Рассмотрим применение этого подхода на примере:

<SCRIPT>
var symbol = "";
while (symbol != null) {
    symbol = promt("Введите любой одиночный символ", symbol);
    if (symbol == null)
        break
    else if ((symbol >= "a" && symbol <= "z") || (symbol >= "A" && symbol <= "Z"))
        alert (symbol + " - буква латинского алфавита" );
    else if (symbol >= "A" && symbol <= "я")
        alert (symbol + " - буква русского алфавита" );
    else if (symbol >= "0" && symbol <= "9")
        alert (symbol + " - цифра");
    else if (symbol == "")
        alert ("\"\" - пустая строка");
    else
        alert (symbol + " - знак препинания или специальный символ")
}
</SCRIPT>

В сценарии запускается цикл while, в первой строке которого открывается диалоговое окно с просьбой ввести символ. Далее следует программа анализа введённого символа. Первый оператор if проверяет, не была ли нажата клавиша Отмена. (В этом случае функция диалогового окна возвратит объект null, и оператор break прервет выполнение цикла.) далее строки else if последовательно проверяют принадлежность символа к остальным группам: буквам латинского алфавита, русского алфавита, цифрам или пустой строке. Если символ не принадлежит ни к одной из этих групп, последний оператор else выводит сообщение, что был введён знак препинания или специальный символ.

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

Оператор switch

Оператор switch удобно применять для анализа переменных, которые могут принимать более двух значений. Типичный пример — это обработка значений раскрывающегося списка с несколькими пунктами. Синтаксис оператора switch следующий:

switch (выражение или переменная) {
    case значение:
        строки кода
        break;
    case значение:
        строки кода
        break;
…
    default:
        строки кода
        break;
}

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

Обратите внимание на то, что блоки операторов case и default не выделяются фигурными скобками. Используется другой синтаксис: блок начинается с символа двоеточие и завершается оператором break.

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

В том случае если программные блоки операторов if и else состоят из одиночных строк, программный код можно сделать более компактным, воспользовавшись вместо конструкции if-else условным оператором ?...:... . Приведем простейший пример использования данного оператора, где в одной строке кода мы определяем цену билета в зависимости от возраста покупателя:

price = (age < 18 ? "5 р." : "10 р.");

Если заменить это на обычную конструкцию if-else, получится более длинный код:

if (age < 18)
    price = "5 р.";
else
    price = "10 р."

Конструкции с условным оператором можно использовать внутри выражений. Предположим, что в вашей компании оптовым покупателям, закупившим товар более чем на 10000 р., представлена скидка в виде бесплатной доставки товара тогда как покупатели, которые приобрели товар в розницу, платят за доставку еще 300 р. Создадим соответствующий код программы с использованием условного оператора:

total_price = price + (price < 10000 ? 300 : 0);

Теперь эта же программа с использованием конструкции if-else:

if (price < 10000)
    total_price = price + 300;
else
    total_price = price;

Экономия места очевидна.

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

<SCRIPT>
for (i=1;i<56;i++) {
    num = Math.round(Math.random()*998 + 1);
    output = (num < 10 ? "....." : "...");
    output += (num < 100 ? ".."+num : num);
    document.write(output);
    if (i % 10 == 0)
        document.write(<BR>);
}
</SCRIPT>

В сценарии запускается цикл for. Число циклов в данном случае не столь важно, лишь бы их было достаточно для создания наглядного массива данных. Массив целых чисел в диапазоне от 1 до 999 генерирует строка кода Math.round(Math.random()*998 + 1). Затем мы формируем строку вывода output, прибавляя к числовому значению точки таким образом, чтобы строки с однозначными, двузначными и трёхзначными числами были одинаковой длины. Обратите внимание на использование условного оператора для заполнения строк вывода. Осле каждого десятого значения выводится новая строка. Для этого проверяем, делится ли счётчик цикла for на 10 без остатка, используя оператор деления по модулю.