Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
LR.doc
Скачиваний:
45
Добавлен:
17.04.2019
Размер:
703.49 Кб
Скачать

Пример обработки кнопок с зависимой фиксацией (radio)

<html>

<head>

<title>проверка radio</title>

<script>

function prov()

{ if (document.forms[0].voz[0].checked)

{ alert ("извините, заказы принимаются только у совершеннолетних")}}

</script>

</head>

<body>

<form>

<b>ваш возраст:</b>

<table border=1>

<tr>

<td>до 18</td><td><input value="до 18" name=”voz” type=”radio”></td>

</tr>

<tr>

<td>18-50</td><td><input value="18-50" name=”voz” type=”radio”></td>

</tr>

<tr>

<td>старше 50</td><td><input value="старше 50" name=”voz” type=”radio”></td>

</tr>

</table>

<br>

<input type=button value="проверка" onclick="prov()">

</form>

</body>

</html>

Рис. 23. Форма с элементами radio

Пример для элементов select (option)

С помощью фрагмента формы, приведенного в этом примере, организуется ввод данных о характере и породе собаки, которую хотел бы взять клиент. Функция prov() проверяет свойство SELECTED объекта SELECT. Проверяются выбранные значения полей списка и при определенной их комбинации выдается соответствующее сообщение. Вид формы в броузере приведен на рис. 24.

<html>

<head>

<title>проверка select</title>

<script>

function prov()

{

if (document.forms[0].por[2].selected & document.forms[0].har[1].selected)

{alert ("вы хорошо подумали?")}

}

</script>

</head>

<body>

<form>

<table border=”1”>

<tr>

<td>порода</td><td><select name=”por”>

<option value="боксер">боксер

<option value="пудель">пудель

<option value="питбуль">питбуль

</td>

</tr>

<tr>

<td>характер</td><td><select name=”har”>

<option value="спокойный">спокойный

<option value="агрессивный">агрессивный

<option value="ласковый">ласковый

</td>

</tr>

</table>

<br>

<input type=button value="проверка" onclick="prov()">

</form>

</body>

</html>

Задание 4

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

  1. Если не заполнены контактные сведения (обязательные поля), вывести сообщение с просьбой заполнить их;

  2. Если возраст заказчика меньше 18-ти, тогда вывести сообщение "По правилам нашего клуба заказы принимаются только у совершеннолетних";

  3. Если порода собаки ‑ пудель, то вывести сообщение "Извините, собаки этой породы отсутствуют. Хотите взять ласкового питбуля?";

  4. Если порода собаки ‑ питбуль и характер агрессивный, то вывести сообщение "Забирайте быстрее, отдадим бесплатно";

  5. Во всех остальных случаях вывести сообщение "Заказ принят, приезжайте за собакой".

Рис.24. Форма с элементами select

После того, как Вы написали обработчик на Java Script для своей формы и убедились в корректности его работы, продемонстрируйте результат преподавателю.

Контрольные вопросы

  1. Какие языки называются интерпретируемыми? В чем их отличие от компилируемых языков?

  2. Почему скриптовые программы, содержащие функции, рекомендуется располагать в секции <HEAD> и </HEAD>?

  3. Почему скриптовый сценарий рекомендуется располагать во внешнем файле? Назовите хотя бы три причины.

  4. Что такое «событие на Web-странице»?

  5. Что такое «обработчик события»?

  6. Как связать определенный объект с обработчиком события?

  7. Имеется следующая функция JavaScript:

function prov()

{

if (document.forms[1].a[1].selected)

alert ("выбран вариант 2");

}

Напишите HTML-код создания формы, данные которой проверяет эта функция.

  1. Имеется следующая функция JavaScript:

function prov()

{

if (document.forms[0].a[1].checked & document.forms[1].a[1].checked)

alert ("Ваша оценка 2");

}

Напишите HTML-код создания формы, данные которой проверяет эта функция.

  1. HTML-документ содержит две формы. В первой форме – два элемента RADIO, во второй – два элемента TEXT, создающие поля, обязательные для заполнения. Напишите функцию, проверяющую заполнение полей второй формы.

  2. Ниже представлена Web-страница, содержащая тестовое задание. Правильный ответ на вопрос задания отмечен звездочкой. Напишите функцию JavaScript, проверяющую выполнение задания и выводящую соответствующие сообщения.

  1. Ниже представлена Web-страница, содержащая тестовое задание. Правильные ответы на вопрос задания отмечены звездочками. Напишите функцию JavaScript, проверяющую выполнение задания и выводящую соответствующие сообщения.

56

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]