Меню сайта
Категории раздела
| HTML [44] |
| Visual C++ и MFC [21] |
| c++ [78] |
| php [19] |
| Javascript [15] |
| C# [51] |
| загрузки [0] |
|
XNA
[10]
создание игр с помощью xna
|
Наш опрос
Друзья сайта
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
| Главная » Статьи » Javascript |
Урок 8
Вариант первый - использовать оператор 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 используется, чтобы обеспечить завершение работы переключателя после выполнения нужного варианта. Если его опустить ничего не изменится, просто с ним сценарий работает быстрее, хотя в данном примере это и незаметно. На этом урок закончен, для тренировки напишите сценарий, который будет отображать название месяца по введенному пользователем числу (от 1 до 12). | |
| Просмотров: 1090 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
