Главная → Уроки JavaScript → Урок 8. Оператор выбора switch

JavaScript - Урок 8. Оператор выбора switch

В предыдущем уроке мы познакомились с оператором if. Он удобен, когда нужно совершить какое-либо действие в зависимости от выбора пользователя. Но что если таких выборов будет много? Например, мы знаем прогноз погоды на неделю вперед. А выдаем прогноз только на один день, на тот который выберет пользователь. Как это сделать?

Вариант первый - использовать оператор if.

Для этого в html-странице напишем саму форму:

<html> <head> <title>javascript switch</title> <link rel="stylesheet" type="text/css" href="style1.css"> <script type="text/javascript" src="script.js"></script> </head> <body> Прогноз погоды на какой-день Вас интересует:<br><br> <form name="forma5"> <select name="day" size="7"> <option selected value="mon">понедельник <option value="tue">вторник <option value="wen">среда <option value="thu">четверг <option value="fri">пятница <option value="sat">суббота <option value="san">воскресенье </select> <input type="button" value="OK" onClick="Vday(forma5);"> <br><br> <textarea cols="35" rows="5" wrap="virtual" name="res"></textarea> </form> </body> </html>

Теперь на странице script.js напишем код функции:

function Vday(obj){ if (obj.elements[0][0].selected) obj.res.value="В понедельник будет ветрено, температура воздуха поднимется до +20 градусов"; if (obj.elements[0][1].selected) obj.res.value="Во вторник будет солнечно, температура воздуха поднимется до +25 градусов"; if (obj.elements[0][2].selected) obj.res.value="В среду будет прохладно, температура воздуха опустится до +17 градусов"; if (obj.elements[0][3].selected) obj.res.value="В четверг будет пасмурно, температура воздуха опустится до +10 градусов"; if (obj.elements[0][4].selected) obj.res.value="В пятницу будет облачно, температура воздуха поднимется до +15 градусов"; if (obj.elements[0][5].selected) obj.res.value="В субботу будет ветрено, температура воздуха поднимется до +27 градусов"; if (obj.elements[0][6].selected) obj.res.value="В воскресенье будет ясно, температура воздуха поднимется до +30 градусов"; }

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

В нашей форме есть три элемента: список, определяемый тегом select, кнопка OK, и многострочное текстовое поле.

Сценарий нумерует все элементы формы сверху вниз, начиная с 0. Поэтому, способ обращения к нашему списку выглядит так:

obj.elements[0]

В списке все элементы также пронумерованы от 0 до 6 соответственно. А элемент, который выбран, обладает свойством selected. Поэтому строка

obj.elements[0][0].selected

означает, что выбран первый пункт первого элемента объекта (в нашем случае первый пункт списка из формы). Вообще это не самый удобный способ обращения к элементу, но об этом мы поговорим подробно в следующем уроке, а сейчас вернемся к примеру.

Прогноз погоды на какой-день Вас интересует:

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

Код html-страницы будет выглядеть так:

А в функции снова придется 7 раз прописать оператор if, да еще предусмотреть вариант, если пользователь допустит орфографическую ошибку:

Прогноз погоды на какой-день Вас интересует:

В принципе все работает, но согласитесь, что код нашей функции слишком длинный. Чтобы его сократить, используется оператор выбора switch. Синтаксис у него следующий:


    switch (B)

    {

      case L1: S1;

      case L2: S2;

      ... ... ...

      case Ln: Sn;

      default:S

    }

где B - выражение, L1, L2, ..., Ln - литералы, а S1, S2, ..., Sn - операторы.

Работает это так: вычисляется значение выражения B. Если B равно L1, то выполняется оператор S1. Если B равно L2, то выполняется оператор S2 и т.д. Если B не равно ни одному из значений, то выполняется оператор S.

Давайте перепишем код нашей последней функции с помощью оператора switch.

function Vday1(obj){ var a=obj.zn.value; var s; switch (a) { case 'понедельник': s="В понедельник будет ветрено, температура воздуха поднимется до +20 градусов"; break; case 'вторник': s="Во вторник будет солнечно, температура воздуха поднимется до +25 градусов"; break; case 'среда': s="В среду будет прохладно, температура воздуха опустится до +17 градусов"; break; case 'четверг': s="В четверг будет пасмурно, температура воздуха опустится до +10 градусов"; break; case 'пятница': s="В пятницу будет облачно, температура воздуха поднимется до +15 градусов"; break; case 'суббота': s="В субботу будет ветрено, температура воздуха поднимется до +27 градусов"; break; case 'воскресенье': s="В воскресенье будет ясно, температура воздуха поднимется до +30 градусов"; break; default: s='Укажите правильно день недели' } obj.res.value=s; }

Результат тот же, а код гораздо короче, да и читабельнее.

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

На этом урок закончен, для тренировки напишите сценарий, который будет отображать название месяца по введенному пользователем числу (от 1 до 12).

Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.