
- •Основы html
- •Инструментарий
- •Теги (дескрипторы) в html
- •Структура html-документа
- •Атрибуты
- •Создание Web-страниц
- •Определение цветов
- •Расположение рисунков на странице.
- •Лабораторная работа №1 Знакомство с таблицами
- •Формирование таблиц
- •Лабораторная работа №2 Форматирование текста в html-документах
- •Заголовки
- •Текстовые абзацы
- •Принудительный разрыв строки
- •Изменение шрифта
- •Начертания шрифтов
- •Нижние и верхние индексы
- •Горизонтальные линии на html – странице
- •Бегущая строка
- •Маркированные и нумерованные списки
- •Лабораторная работа №3 Организация гиперссылок
- •Элементы привязки
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •Лабораторная работа №4 Создание фреймовой структуры html-страниц
- •Что такое фрейм?
- •Организация фреймов
- •Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
- •Применение css
- •Внешняя стилевая спецификация
- •Внедренные стилевые таблицы
- •Внутренние стили
- •Классы в стилевых спецификациях
- •Определение стиля для специфического элемента
- •Работа со специальными элементами
- •Лабораторная работа №6 Организация форм
- •Создание формы
- •Описание элементов формы
- •Лабораторная работа №7 Создание клиентских сценариев
- •Размещение сценария
- •Выполнение сценария
- •Функции JavaScript
- •Пример проверки заполнения обязательных текстовых полей
- •Пример обработки кнопок с зависимой фиксацией (radio)
- •Пример для элементов select (option)
Пример обработки кнопок с зависимой фиксацией (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, проверяющий некоторые данные перед отправкой на сервер. Вы должны предусмотреть следующие случаи:
Если не заполнены контактные сведения (обязательные поля), вывести сообщение с просьбой заполнить их;
Если возраст заказчика меньше 18-ти, тогда вывести сообщение "По правилам нашего клуба заказы принимаются только у совершеннолетних";
Если порода собаки ‑ пудель, то вывести сообщение "Извините, собаки этой породы отсутствуют. Хотите взять ласкового питбуля?";
Если порода собаки ‑ питбуль и характер агрессивный, то вывести сообщение "Забирайте быстрее, отдадим бесплатно";
Во всех остальных случаях вывести сообщение "Заказ принят, приезжайте за собакой".
Рис.24. Форма с элементами select
После того, как Вы написали обработчик на Java Script для своей формы и убедились в корректности его работы, продемонстрируйте результат преподавателю.
Контрольные вопросы
Какие языки называются интерпретируемыми? В чем их отличие от компилируемых языков?
Почему скриптовые программы, содержащие функции, рекомендуется располагать в секции <HEAD> и </HEAD>?
Почему скриптовый сценарий рекомендуется располагать во внешнем файле? Назовите хотя бы три причины.
Что такое «событие на Web-странице»?
Что такое «обработчик события»?
Как связать определенный объект с обработчиком события?
Имеется следующая функция JavaScript:
function prov()
{
if (document.forms[1].a[1].selected)
alert ("выбран вариант 2");
}
Напишите HTML-код создания формы, данные которой проверяет эта функция.
Имеется следующая функция JavaScript:
function prov()
{
if (document.forms[0].a[1].checked & document.forms[1].a[1].checked)
alert ("Ваша оценка 2");
}
Напишите HTML-код создания формы, данные которой проверяет эта функция.
HTML-документ содержит две формы. В первой форме – два элемента RADIO, во второй – два элемента TEXT, создающие поля, обязательные для заполнения. Напишите функцию, проверяющую заполнение полей второй формы.
Ниже представлена Web-страница, содержащая тестовое задание. Правильный ответ на вопрос задания отмечен звездочкой. Напишите функцию JavaScript, проверяющую выполнение задания и выводящую соответствующие сообщения.
Ниже представлена Web-страница, содержащая тестовое задание. Правильные ответы на вопрос задания отмечены звездочками. Напишите функцию JavaScript, проверяющую выполнение задания и выводящую соответствующие сообщения.