Лабораторная работа №6 по JavaScript(4 часа). Проверка правильности заполнения формы на сайте
Проверка данных, вводимых пользователем в форму:
а) Проверка обязательных для ввода полей
b) Проверка допустимости вводимых данных
c) Удаление HTML тегов
d) Удаление обратных слешей
Добавьте на свой сайт, созданный в предыдущих лабораторных работах, страничку для регистрации пользователей. Для этого сформируйте форму регистрации пользователя со следующей информацией:
логин;
пароль и подтверждение пароля;
e-mail;
Используя JavaScript и регулярные выражения выполните валидацию формы согласно следующих требований.
Все поля должны быть не пустыми.
Проверьте пароль на совпадение с подтверждением пароля.
Используя регулярные выражения проверьте на правильность заполнения поле e-mail. Поле E-mail должно соответствовать всем требованиям для адреса электронной почты. Имя пользователя и имя почтового сервера разделяются знаком @, и могут содержать только латинские буквы, или цифры, или дефис, или точку. Имя домена верхнего уровня может содержать только латинские буквы.
Развернутые результаты валидации (какие поля не заполнены или неправильно заполнены) вывести в:
окно предупреждения.
на страницу ниже формы;
на страницу правее формы. Напротив ошибочно заполненного поля.
3. Развернутый вариант задания. Добавьте на сайт, страничку для регистрации пользователей. Для этого сформируйте форму регистрации пользователя со следующей информацией:
фамилия;
имя;
отчество;
дата рождения;
пол;
номер паспорта;
логин;
пароль и подтверждение пароля;
e-mail;
список интересов (политика, культура, искусство, спорт, музыка) (список в будущем может быть расширен);
признак согласия с условиями использования сайта;
«о себе».
При этом поля
фамилия;
имя;
отчество;
дата рождения;
пол;
номер паспорта;
логин;
пароль и подтверждение пароля;
e-mail;
признак согласия с условиями использования сайта
должны быть обязательными для заполнения.
Используйте CSS-стили для оформления формы. Для удобства используйте таблицу для размещения элементов формы и подписей к ним. До подключения стилевых классов разработанных вами в лабораторной работе № 4 форма должна иметь следующий вид.
При необходимости дополните стилевые таблицы новыми классами таким образом, чтобы разработанная форма соответствовала стилю вашего сайта.
4. Используя JavaScript и регулярные выражения выполните валидацию формы согласно следующих требований.
4.1. Все поля, помеченные как обязательные для заполнения, должны быть не пустыми.
4.2. Поля Фамилия, Имя, Отчество могут содержать только символы русского и английского алфавита, точку, дефис и пробел.
4.3. Поле Год может содержать только четыре цифры, и отображать года с 1900 по 2007.
4.4. Поле месяц может содержать только значения месяца в формате ММ: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11 или 12.
4.5. Поле день может содержать только значения дня в формате ДД. Провести валидацию на недопустимость значений типа 30 или 31 число в феврале, 31 число в апреле, июне, сентябре, ноябре, 29 число в феврале невисокосного года.
4.6. Поле Номер паспорта содержит девять символов из которых два первых – латинские буквы, а семь последующих – цифры.
4.7. Поле Логин может содержать от 6 до 20 символов и состоять только из латинских букв, точки, подчеркивания и дефиса.
4.8. Поле Пароль может содержать от 6 до 20 символов и состоять только из латинских букв, точки, подчеркивания и дефиса и не совпадать с логином.
4.9. Поле Подтверждения пароля должно совпадать с полем Пароль.
4.10. Поле E-mail должно соответствовать всем требованиям для адреса электронной почты. Имя пользователя и имя почтового сервера разделяются знаком @, и могут содержать только латинские буквы, или цифры, или дефис, или точку. Имя домена верхнего уровня может содержать только латинские буквы.
5. Вывести информацию о заполнении полей для пользователя в соответствии с пунктом задания, указанном преподавателем.
5.1. Развернутые результаты валидации (какие поля не заполнены или неправильно заполнены) вывести в окно предупреждения.
5.2. Развернутые результаты валидации (какие поля не заполнены или неправильно заполнены) вывести на страницу. Например, добавить в таблицу еще одну строку, объединить в ней все ячейки и поместить информацию в нее, или поместить информацию в контейнер вне формы.
5.3. В таблице, в которой вы разместили элементы формы, предусмотрите еще один столбец. В этот столбец поместите все необходимые пояснения для заполнения полей. Например, какие символы могут входить в логин или пароль, каким должен быть формат даты рождения и номера паспорта и т. д. Развернутые результаты валидации (какие поля не заполнены или неправильно заполнены) вывести в этот столбец, ниже пояснений к заполнению. Информация о незаполненном, или неверно заполненном, элементе должна выделяться другим цветом, например красным.
В сценарии JavaScript могут использоваться объекты нескольких видов:
клиентские объекты, входящие в модель BOM: window, location, navigator и т.п.
клиентские объекты, входящие в модель DOM:document
встроенные объекты Array, String, Date, Number, Function, Boolean, Math.
пользовательские объекты
Оператор for(переменная in объект) позволяет "пробежаться" по свойствам объекта. Пример.
for(v in document)
document.write("document."+v+" = <B>"+ document[v]+"</B><BR>");
Всю необходимую информацию о запущенном браузере и системе пользователя можно узнать при помощи объекта navigator.
Получите информацию о браузере и системе: имя браузера, версия браузера, кодовое название браузера, платформа на которой работает браузер, доступность на запуск сценариев JavaScript.
b)Укажите корректный JavaScript синтакс для открытия нового окна "window2" ?
window.open("http://www.w3schools.com","window2")
open.new("http://www.w3schools.com","window2")
new.window("http://www.w3schools.com","window2")
new("http://www.w3schools.com","window2")
Задание задержек по времени при выполнении функций. Программирование картинок. Загрузка и манипулирование с изображениями на JavaScript.
Следует обратить внимание на использование метода setTimeout(). JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:
a)скрипт movie() получает управление от обработчика события onLoad;
b)заменяет картинку;
c)порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
d)текущий скрипт movie() уничтожается JavaScript-интерпретатором.
После окончания срока задержки исполнения все повторяется.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<SCRIPT>
var i=0;
n=5;
function movie()
{
document.i.src='n'+i+'.gif';
i++; if(i>10){i=0;n--;}
if(n>0)setTimeout('movie();',500);
}
</SCRIPT>
</head>
<body onLoad="movie();"><IMG NAME=i>
</body>
</html>
a)Реализовать запуск и остановить мультипликацию по требованию пользователя по нажатию на кнопке.
8. Создайте страницу, содержащую произвольный текст. Сразу после загрузки она должна автоматически выводить диалоговое окно с адресом URL текущей страницы.
9. Создать страницу, использующую операторы:
window.status = "Welcome to my Web page.";
document.write("<hl>Welcome to my Web page.</hl>")
Наведение курсора на эти строки должно вызывать диалоговые окна, поясняющие работу этих операторов.
10. Манипулирование окнами: изменение размера, цвета и др.
11. Адрес URL получен из свойства href объекта location.
<html> <head>
<script type="text/javascript">
function showLocation() {
alert("This page is at: " + location.href);
}
</script> </head>
<body onload="showLocation()"> Bu, be, by.
</body> </html>
Создать кнопку и по событию onclick вывести это сообщение в окно статуса состояния и в другие диалоговые окна.
- Web – программирование
- Глава 2. Проектирование и разработка сайтов……………………………45
- Глава 3. Информационноый обмен в Веб…………………………………..85
- Глава 4. Язык JavaScript…………………………………………………..….176
- Глава 5. Язык серверных скриптов php……………………………………270
- Глава 6. Лабораторные работы…………………………………………...…358
- Введениев Интернет Коротко об истории Интернет
- Как работает Интернет?
- Система адресации в Интернет
- Способы подключения к сети Интернет
- Сервисы Интернет
- Электронная почта
- Передача файлов по ftp
- Всемирная паутина www
- Коротко о компьютерных сетях, входящих в Интернет
- Локальные сети
- Распределенная сеть (wan) и глобальные сети
- Сеть vpn
- Компьютерные игры
- Задания по теме “Введение в Интернет”
- Глава 1. Протоколы Интернет Адресация в компьютерных сетях
- Ip адрес в компьютерных сетях Ethernet и Интернет
- Понятие и краткое описание протоколов
- Соотношение между tcp/ip и osi/iso
- Межсетевой протокол ip
- Транспортный протокол tcp
- Флаги (управляющие биты) Это поле содержит 6 битовых флагов:
- Протокол дэйтаграмм udp
- Ip-маршрутизация
- Протоколы arp и rarp
- Протоколы сетевого уровня
- Протоколы электронной почты
- Протокол smtp
- Протокол pop3
- Протокол imap4
- Спецификация mime
- Проблемы с кодировкой
- Протокол ftp
- Http – Протокол передачи гипертекстов
- Транзакции http
- Клиентские методы http
- Что возвращается обратно: коды ответа сервера
- Заголовки http
- Развитие прикладных протоколов
- Безопасность в сети
- Протокол ssl
- Анонимный обмен ключами
- Обмен ключами при использовании rsa и аутентификация
- Протокол записи (Record Layer)
- Как работает ssl
- Шифрование данных
- Хэширование
- Установление подлинности участников
- Предупреждения системы безопасности web-браузера.
- Реализация ssl
- Задания по теме «Протоколы Интернет»
- Глава 2. Проектирование и разработка сайтов
- Виды сайтов
- Этапы проектирования и разработки сайта
- Модели проектирования
- Спиральная модель
- Microsoft Solutions Framework (msf)
- Управление проектами
- Веб – дизайн и разработка сайтов
- Логическое проектирование дизайна сайта
- Главная страница сайта
- Внутренние страницы сайта
- Краткий обзор основных технологий разработки Веб приложений
- Язык разметки гипертекста html
- Язык xml
- Правильно построенные и действительные документы xml
- Синтаксис xml
- Объявление xml
- Корневой элемент
- Комментарий
- Спецсимволы
- Сильные и слабые стороны
- Отображение xml во Всемирной паутине
- Применение стилей css.
- Применение xsl.
- Словари xml
- Как выглядит xml-документ?
- Правила создания xml- документа
- Конструкции языка
- Элементы данных
- Комментарии
- Атрибуты
- Cпециальные символы.
- Директивы анализатора.
- Adobe Flash и Adobe Flex
- Вставка флэш в страницу
- Язык ActionScript
- Видео-аудио проигрыватели
- Язык программирования клиентских скриптов JavaScript
- Технология «клиент-сервер» cgi
- Программирование для серверов
- Язык программирования Perl
- Язык Java на клиентской и серверной странице
- Сжатие изображений с помощью фракталов
- Глава 3. Информационноый обмен в Веб
- Язык разметки гипертекста html
- ©2012 Romanchik Valery
- Формы html
- Новые элементы html5
- Email Inputs
- Placeholders
- Вопросы и задания
- Задания для выполнения
- Каскадные таблицы стилей css
- Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size
- Заголовок1 Заголовок2 Заголовок3
- Свойства текста.
- Цвет и фон.
- Некоторые подсказки по синтаксису css:
- 1. Свойства шрифтов.
- 2. Свойства текста.
- 3. Свойства цвета и фона.
- 4. Свойства рамки.
- 5. Свойства списков.
- 6. Свойства изображений.
- Форматирование блока
- Форматирование псевдоклассов и псевдоэлементов
- Единицы измерения в css
- Новое в css3
- Валидация css
- Глава 4. ЯзыкJavaScript Введение
- Включение скриптов JavaScript в html-код
- Создание простых сценариев
- Комментарии. Скрытие сценариев от браузеров
- Отладка скриптов. Ввод и вывод данных
- Описание языка Типы данных
- Преобразование типа
- Специальные числа
- Булев тип
- Переменные типа Undefined и Null
- Массивы
- Операторы и выражения
- Оператор with
- Оператор switch
- Метод eval()
- Функции
- Передача параметров по значению и по ссылке
- Глобальные и локальные переменные
- Модель событий
- Ключевое слово this
- Перехват события.
- Исключения: throw/catch/finally
- Объектная модель
- Пользовательские объекты
- Прототипы
- Хеш-таблицы в JavaScript
- Встроенные объекты String, Array, Date, Math Объект String
- Объект Array
- Объект Number (Число)
- Объект Date (Дата)
- Методы объекта Date
- Объект Function (Функция)
- Свойства:
- Методы :
- Шаблоны и регулярные выражения.
- Объекты браузера
- Объект window
- Методы объекта window
- Свойства окна, передаваемые методу open
- Свойства и методы объекта navigator
- Свойства объекта screen
- Свойства и методы объекта history
- Свойства и методы объекта document
- Коллекции и подчиненные объекты объекта document Обращение к элементам страницы
- Свойства и методы объекта location
- Свойства и методы объекта style
- Объект layer
- Свойства объекта layer
- Методы объекта layer
- Document Object Model (dom)
- Навигация по дереву документа
- Создание новых узлов
- Добавление узлов в документ
- Копирование: метод cloneNode()
- Удаление и замена узлов в документе
- Использование каскадных таблиц стилей в dom
- Свойство элемента innerHtml и outerHtml
- Работа с атрибутами элементов
- Метод removeAttribute()
- JavaScript и ajax
- Модель ajax:
- Запрос к серверу. Класс xmlHttpRequest
- Методы класса xmlHttpRequest
- Свойства класса xmlHttpRequest
- Создание экземпляра объекта xmlHttpRequest
- Использование dom
- Информируйте пользователя
- Если скрипты отключены
- Объект FormData
- Cookies
- Работа с cookie
- Синтаксис http заголовка для поля Cookie
- Дополнительные сведения
- Способы задания значений cookie
- Примеры на JavaScript
- Тестовые вопросы по языку JavaScript
- Упражнения и задачи поJavaScript
- Глава 5. Язык серверных скриптов php
- Возможности php.
- Инструменты для разработки
- Как phPработает
- Типы данных
- Массивы и инициализация массивов
- Операции и выражения
- Операции сравнения
- Логические операции
- Строковые операции
- Операторы управления
- Функции
- Рекурсивные функции
- Аргументы функции
- Область действия и время жизни переменных
- Изменяемые (динамические) переменные
- Внешние библиотечные функции
- Функции для работы с массивами
- Функции для работы со строками. Базовые строковые функции
- Функции для работы с отдельными символами
- Функции форматных преобразований строк
- Преобразование строк и файлов к формату html и наоборот
- Преобразование html в простой текст
- Преобразование строки к верхнему и нижнему регистру
- Установка локальных настроек
- Регулярные выражения
- Perl-совместимые функции рнр для работы с регулярными выражениями
- Функции даты и времени
- Математические функции
- Объектно-ориентированное программирование в php Основные понятия ооп
- Классы и Объекты
- Конструкторы и деструкторы
- Наследование классов и интерфейсов
- Магические методы
- Обработка ошибок
- Ошибки php и журнал error_reporting
- Чтение и запись бинарных файлов
- Работа с каталогами в рнр
- PhPиMySql
- MySql– сервер: бд1; бд2; бд3; бд4;
- Язык запросов sql
- Операция соединения.
- Команды sql для создания баз данных и таблиц
- Phpmyadmin
- Выборка данных из таблиц бд
- Работа с MySql (сохранение данных в базе данных).
- Работа с MySql занесение и получение данных из базы данных
- Некоторые улучшения в организации работы с данными
- Передача данных от клиента к серверу и обратно. Протокол http
- Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Php и различные формы
- Обработка форм
- Более сложные переменные формы
- Глава 6. Лабораторные работы Лабораторная работа №1 (4 часа). Инструменты и средства создания простых сайтов
- Вопросы по теме:
- Лабораторная работа №2 Работа с документами .Doc, .Pdf, .Html(4 часа).
- Лабораторная работа №3. Применение каскадных таблиц стилей css
- Пример 1. Двухколоночный контейнерный макет сайта с применением css.
- Пример 2. Трехколоночный контейнерный макет сайта с применением css.
- Задания для создания сайтов
- Лабораторная работа №4. Применение каскадных таблиц стилей css
- Лабораторная работа №5 по JavaScript(4 часа). Динамика на Веб –странице. Включение скриптов JavaScript в html-код
- 1. Выполнить следующие задания на JavaScript:
- Пример вывода даты и времени на сайте с помощью JavaScript.
- Пример вывода строки в стиле печатной машинки
- Лабораторная работа №6 по JavaScript(4 часа). Проверка правильности заполнения формы на сайте
- Методы объекта window
- Window.Open()
- Window.Close()
- Методы focus() и blur()
- Лабораторная работа №7. Php Задание 1. Массивы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 2. Функции
- Задание 3. Файлы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 4. Работа с базами данных Выполнить одно из перечисленных ниже упражнений
- Задание 5. Создание web-объектов Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Список заданий
- Литература
- Приложение 1. Программное обеспечение Adobe Dreamweaver
- Приложение 2. Системы быстрой разработки Веб-приложений и cms
- Администрирование
- Установка модуля
- Создание шаблона в Drupal
- Создание индивидуальных шаблонов
- Движок шаблонирования xTemplate
- Создание нового шаблона
- Основы создания шаблона
- Удаление блока с формой входа на сайт
- Включение блока для отображение популярных статей
- Удаление ссылки "Далее" в отображение статьи
- Drupal: практические примеры
- Часть 1. Введение
- 6 Шагов к тому, чтобы заставить Drupal работать быстрее
- Приложение 3. Основы cgi/Perl
- Типы данных
- Ассоциированные массивы
- Операторы
- Подпрограммы
- Common Gateway Interface
- Приложение 4. Базы данных и язык sql
- Реляционные субд Модель данных в реляционных субд
- Нормализация модели данных
- Язык sql
- Команды sql
- Команды определения структуры данных (DataDefinitionLanguage–ddl)
- Команды манипулирования данными (Data Manipulation Language – dml)
- Команды управления транзакциями (TransactionControlLanguage-tcl)
- Команды управления доступом (DataControlLanguage–dcl)
- Работа с командами sql Извлечение данных, команда select
- Ключевое слово distinct
- Секция from, логическое связывание таблиц
- Секция where
- Секция orderby
- Групповые функции
- Секция group by
- Секция having
- Изменение данных
- Команда insert
- Команда delete
- Команда update
- Определение структуры данных Команда createtable
- Команда altertable
- Курсовая работа №2. Проекты сайтов
- Курсовая работа №3. Технологии разработки Веб – приложений Проекты сайтов
- Перечень заданий