Лабораторная работа 6 по JavaScript (4 часа).
Проверка правильности заполнения формы на сайте
Проверка данных, вводимых пользователем в форму:
а) Проверка обязательных для ввода полей
b) Проверка допустимости вводимых данных
c) Удаление HTML тегов
d) Удаление обратных слешей
Добавьте на сайт, созданный в предыдущих лабораторных работах, страничку для регистрации пользователей. Для этого сформируйте форму регистрации пользователя со следующей информацией:
логин;
пароль и подтверждение пароля;
e-mail;
Используя JavaScript и регулярные выражения выполните валидацию формы согласно следующих требований.
Все поля должны быть не пустыми.
Проверьте пароль на совпадение с подтверждением пароля.
Используя регулярные выражения проверьте на правильность заполнения поле 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.
Задание задержек по времени при выполнении функций. Программирование картинок. Загрузка и манипулирование с изображениями на JavaScript.
Следует обратить внимание на использование метода setTimeout(). JavaScript разрабатывался для многопоточных операционных систем, поэтому правильнее будет представлять себе исполнение скриптов следующим образом:
a)скрипт movie() получает управление от обработчика события onLoad;
b)заменяет картинку;
c)порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;
d)текущий скрипт movie() уничтожается JavaScript-интерпретатором.
После окончания срока задержки исполнения все повторяется.
<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. Манипулирование окнами: изменение размера, цвета и др.
Укажите корректный 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")
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 вывести это сообщение в окно статуса состояния и в другие диалоговые окна.