- •Основы html
- •Инструментарий
- •Теги (дескрипторы) в html
- •Структура html-документа
- •Атрибуты
- •Создание Web-страниц
- •Определение цветов
- •Расположение рисунков на странице.
- •Лабораторная работа №1 Знакомство с таблицами
- •Формирование таблиц
- •Лабораторная работа №2 Форматирование текста в html-документах
- •Заголовки
- •Текстовые абзацы
- •Принудительный разрыв строки
- •Изменение шрифта
- •Начертания шрифтов
- •Нижние и верхние индексы
- •Горизонтальные линии на html – странице
- •Бегущая строка
- •Маркированные и нумерованные списки
- •Лабораторная работа №3 Организация гиперссылок
- •Элементы привязки
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •Лабораторная работа №4 Создание фреймовой структуры html-страниц
- •Что такое фрейм?
- •Организация фреймов
- •Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
- •Применение css
- •Внешняя стилевая спецификация
- •Внедренные стилевые таблицы
- •Внутренние стили
- •Классы в стилевых спецификациях
- •Определение стиля для специфического элемента
- •Работа со специальными элементами
- •Лабораторная работа №6 Организация форм
- •Создание формы
- •Описание элементов формы
- •Лабораторная работа №7 Создание клиентских сценариев
- •Размещение сценария
- •Выполнение сценария
- •Функции JavaScript
- •Пример проверки заполнения обязательных текстовых полей
- •Пример обработки кнопок с зависимой фиксацией (radio)
- •Пример для элементов select (option)
Лабораторная работа №7 Создание клиентских сценариев
На предыдущем занятии Вы приступили к процессу создания интерактивной части сайта. У Вас разработаны две формы для сбора сведений посетителя сайта. Предполагается, что обработка данных из этих форм будет производиться на сервере и ее целью будет занесение в базу данных сведений о посетителе и интересующем его животном, а также вывод из этой базы данных информации о животных, интересующих посетителя.
Однако разработчики перед передачей данных на сервер обычно проводят проверку этих данных на компьютере клиента. Это помогает избежать передачи неправильных данных от клиента на сервер и обратно.
Для реализации такой проверки обычно используют клиентские языки сценариев для Web. Мы с Вами будем использовать JavaScript.
Зачем же нужна такая проверка на Вашем сайте? Давайте попробуем сразу определить ее задачи. Представьте, что посетитель, заполняя форму, не ввел ни одного контактного параметра (e-mail, телефон, адрес). Даже если у Вас есть интересующая его собака, связаться с ним Вы не сможете. Или, например, посетитель хочет взять «ничейного» питбуля, а возраст этого посетителя – десять лет. (Остальные причины необходимости проведения проверки данных на компьютере клиента придумайте сами).
Итак, цель сегодняшнего занятия – познакомиться с технологией проверки данных формы на компьютере клиента средствами JavaScript.
JavaScript
JavaScript - интерпретируемый язык создания клиентских сценариев.
Предназначен этот язык, как правило, для создания небольших участков кода. Синтаксис похож на синтаксис языка Cи. В JavaScript реализованы основные возможности объектно-ориентированных языков.
Задачи, решаемые с помощью JavaScript:
Проверка данных в интерактивной форме;
Выполнение простейших вычислений, связанных с настройками пользователя и броузера;
Контроль за событиями, происходящими в окне броузера;
Доступ ко всем HTML-элементам при помощи объектной модели документа.
JavaScript – объектно-ориентированный язык, поэтому в нем определен ряд объектов, относящихся к различным компонентам HTML-страницы и их взаимосвязи. Чтобы узнать о состоянии объекта или управлять им, следует пользоваться определенными свойствами и методами.
JavaScript предоставляет возможность контроля за событиями, происходящими в окне броузера, и доступа к HTML-элементам при помощи объектной модели документа. Указанный способ использования JavaScript часто называют динамическим HTML или DHTML.
Размещение сценария
Скриптовые программы (сценарии, скрипты) могут располагаться между тегами <SCRIPT> и </SCRIPT>. HTML-документ может содержать любое количество подобных пар.
<html>
<body>
<script>
alert ("Здравствуйте, я - JavaScript.")
</script>
</body>
</html>
Но мы знаем, что следует разделять структуру и содержание WEB-страницы. Поэтому сценарии лучше размещать во внешнем файле с расширением *.js. Это упрощает процесс обновления сценария, скрывает сценарий от старых версий броузеров, позволяет броузеру кешировать сценарий.
Обращение к сценарию из разных HTML-документов выглядит следующим образом: <script src=”*.js” language=”JavaScript”>.
Задание 1
Откройте справочник “Srav_html” на компакт-диске и ознакомьтесь с атрибутами тега <SCRIPT> и правилами их назначения. Законспектируйте материал.