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-страницы будет выглядеть так:

< 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=" forma6" >      < input type=" text" size=" 15" maxlength=" 15" name=" zn" >      < input type=" button" value=" OK" onClick=" Vday1(forma6); " > < br> < br>      < textarea cols=" 35" rows=" 5" wrap=" virtual" name=" res" > < /textarea>    < /form>   < /body> < /html>

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

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

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

 

В принципе все работает, но согласитесь, что код нашей функции слишком длинный. Чтобы его сократить, используется оператор выбора 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 используется, чтобы обеспечить завершение работы переключателя после выполнения нужного варианта. Если его опустить ничего не изменится, просто с ним сценарий работает быстрее, хотя в данном примере это и незаметно.

⇐ Предыдущая234567891011Следующая ⇒

Поделиться: