Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Обработка данных форм на JavaScript
Вопросы разработки серверных сценариев выходят за рамки данной лабораторной работы, однако введенные пользователем в форму данные можно обрабатывать на стороне клиента при помощи сценариев JavaScript. JavaScript – объектно-ориентированный скриптовый язык программирования. Программа на JavaScript никогда не компилируется, а выполняется при помощи интерпретатора, который встроен в любой веб-браузер. Помимо собственно программирования JavaScript предоставляет широчайшие возможности для манипуляций с веб-страницей. При помощи него можно получить доступ к свойствам всех элементов HTML-документа и модифицировать их. Для того чтобы вводимую пользователем в поля формы информацию можно было обработать в сценарии, необходимо заменить в форме элемент <input type=”submit”> на элемент <input type=”button” onclick=”…”>. В качестве значения свойства onclick необходимо указать имя JavaScript-функции обработки события. В качестве параметра функции передается объект-форма. В теле функции осуществляется проверка на непустое значение в поле username, которое затем выводится внизу страницы путем присвоения его значения свойству innerHTML предварительно созданного элемента <div> с id=”result”. Ниже приведен пример страницы, включающей сценарий JavaScript. <html> <head> <title> Пример обработки полей формы на JavaScript </title> <script language= "JavaScript" > <!-- Скрыть function test ( form ) { if ( form.username.value == "" ) alert ( "Пожалуйста, введите имя!" ) else { alert ( "Hi " + form.username.value + "! Форма заполнена корректно!" ); document.getElementById ( "result1" ). innerHTML = "<p>Спасибо, " + form.username.value + "!</p>" if ( form.confirm.checked ) document.getElementById ( "result2" ). innerHTML = "<p>Согласие c правилами регистрации Вами подтверждено!</p>"; if ( form.login.value != "" ) document.getElementById ( "result3" ). innerHTML = "<p>Ваш логин: " + form.login.value + "</p>"; if ( form.pass.value != "" ) document.getElementById ( "result4" ). innerHTML = "<p>Ваш пароль: " + form.pass.value + "</p>"; //Обработка радиокнопок if ( form.status [ 0 ]. checked ) document.getElementById ( "result5" ). innerHTML = "<p>Ваш род занятий: студент</p>"; if ( form.status [ 1 ]. checked ) document.getElementById ( "result5" ). innerHTML = "<p>Ваш род занятий: шклольник</p>"; if ( form.status [ 2 ]. checked ) document.getElementById ( "result5" ). innerHTML = "<p>Ваш род занятий: служащий</p>";
if ( form.status [ 3 ]. checked ) document.getElementById ( "result5" ). innerHTML = "<p>Ваш род занятий: рабочий</p>"; if ( form.status [ 4 ]. checked ) document.getElementById ( "result5" ). innerHTML = "<p>Ваш род занятий: пенсионер</p>"; switch ( form.region.value ) { case "0": document.getElementById ( "result6" ). innerHTML = "<p>Ваш регион: Москва</p>"; break; case "1": document.getElementById ( "result6" ). innerHTML = "<p>Ваш регион: Югра</p>"; break; case "2": document.getElementById ( "result6" ). innerHTML = "<p>Ваш регион: Тюменская область</p>"; break; case "3": document.getElementById ( "result6" ). innerHTML = "<p>Ваш регион: неизвестен</p>"; break; } if ( form.about_you.value != "" ) document.getElementById ( "result7" ). innerHTML = "<p>Вы оставили о себе следующую информацию: " + form.about_you.value + "</p>"; } } // --> </script> </head> <body> <b> Заполните поля для регистрации: </b> <form name= "registration" method= "get" action= "http://mysite.faraway.com" > ФИО: <br> <input name= "username" type= "text" size= "20" maxlength= "40" ><br> Логин: <br> <input name= "login" type= "text" size= "20" maxlength= "40" ><br> Пароль: <br> <input name= "pass" type= "password" size= "20" maxlength= "40" ><br> Род занятий: <br> <input type= "radio" name= "status" value= "student" checked> Студент <br> <input type= "radio" name= "status" value= "pupil" > Школьник <br> <input type= "radio" name= "status" value= "employee" > Служащий <br> <input type= "radio" name= "status" value= "worker" > Рабочий <br> <input type= "radio" name= "status" value= "pensioner" > Пенсионер <br> Регион: <br> <select name= "region" size= "1" > <option value= "0" > Москва <option value= "1" selected> Югра <option value= "2" > Тюменская область <option value= "3" > Другой регион </select><br> Несколько слов о себе: <br> <textarea name= "about_you" rows= "5" cols= "30" ></textarea><br> Я согласен с правилами регистрации: <input type= "checkbox" name= "confirm" ><br> <input type= "button" value= "Зарегистрироваться" onclick= "test(this.form)" > </form> <div id= "result1" ></div> <div id= "result2" ></div> <div id= "result3" ></div> <div id= "result4" ></div> <div id= "result5" ></div> <div id= "result6" ></div> <div id= "result7" ></div>
</body> </html>
3.4. Лабораторное задание Разработать веб-страницу, содержащую форму с полями для описания объекта предметной области в соответствии с вариантом задания на лабораторную работу №1. В форме необходимо использовать поля текстового, многострочного текстового типов, радиокнопки, чекбокс, выпадающий список. В веб-странице реализовать сценарий JavaScript, выполняющий проверку правильности вводимы в форму данных и вывод их в виде описания объекта на этой же странице. Форма должна иметь оригинальный дизайн, заданный при помощи CSS. Веб-страница с формой должна отображаться в фрейме «описания» по ссылке из списка категорий. Справочники и руководства http://javascript.ru http://lit.jinr.ru/LCTA/Java/javascript/chapt10.htm
|
||||||
|
|
Последнее изменение этой страницы: 2016-09-13; просмотров: 465; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.117.196.184 (0.01 с.) |
