Лабораторная работа 6 по JavaScript (4 часа).

1.Проверка правильности заполнения формы на сайте

Добавьте на сайт, созданный ранее, страничку для регистрации пользователей. Форма должна содержать

• логин;

• пароль и подтверждение пароля;

• e-mail.

Используя JavaScript и регулярные выражения выполните валидацию формы согласно следующих требований.

1.1 Проверка заполненности обязательных для ввода полей

1.2 Проверка допустимости вводимых данных

1.3 Удаление HTML тегов из введенного текста

4. Удаление обратных слешей

5. Проверка пароля на совпадение для подтверждения пароля.

6. Используя регулярные выражения проверьте на правильность заполне­ния поле e-mail. Имя пользователя и имя почтового сервера разделяются знаком @, и могут содержать только латинские буквы, цифры, дефис или точку. Имя до­мена верхнего уровня может содержать только латинские буквы.

7. Развернутые результаты валидации (какие поля не заполнены или непра­вильно заполнены) вывести в окно предупреждения; на страницу ниже формы; на страницу правее формы; напротив полейб заполненных с ошибками.

2. Развернутый вариант задания. Добавьте на сайт, страничку для регистрации пользователей. Для этого сформируйте форму регистрации пользователя со следующей информацией:

Фамилия, имя, отчество;

дата рождения;

пол;

номер паспорта;

логин;

пароль и подтверждение пароля;

e-mail;

список интересов (политика, культура, искусство, спорт, музыка) признак согласия с условиями использования сайта;

При этом первые семь полей должны быть обязательными для заполнения.

Используйте CSS-стили для оформления формы. Для удобства используйте таблицу для размещения элементов формы и подписей к ним. При необходимости дополните стилевые таблицы новыми классами, чтобы разработанная форма соответствовала стилю сайта.

Используя JavaScript и регулярные выражения выполните валидацию формы согласно следующих требований:

2.1. Все поля, помеченные как обязательные для заполнения, должны быть не пустыми.

2.2. Поля Фамилия, Имя, Отчество могут содержать только символы русского алфавита, точку и пробел.

2.3. Поле Год может содержать только четыре цифры, и отображать года с 1900 по 2014.

2.4. Поле месяц может содержать только значения месяца в формате ММ: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11 или 12.

2.5. Поле день может содержать только значения дня в формате ДД. Провести валидацию на недопустимость значений типа 30 или 31 число в феврале, 31 число в апреле, июне, сентябре, ноябре, 29 число в феврале невисокосного года.

2.6. Поле Номер паспорта содержит девять символов из которых два первых – латинские буквы, а семь последующих – цифры.

2.7. Поле Логин может содержать от 6 до 20 символов и состоять только из латинских букв, точки, подчеркивания и дефиса.

2.8. Поле Пароль может содержать от 6 до 20 символов и состоять только из латинских букв, точки, подчеркивания и дефиса и не совпадать с логином.

2.9. Поле Подтверждения пароля должно совпадать с полем Пароль.

2.10. Поле E-mail должно соответствовать всем требованиям для адреса электронной почты. Имя пользователя и имя почтового сервера разделяются знаком @, и могут содержать только латинские буквы, цифры, дефис или точку. Имя домена верхнего уровня может содержать только латинские буквы.

2.11. В таблице, в которой размещены элементы формы, предусмотреть еще один столбец с пояснениями для заполнения полей. Например, какие символы могут входить в логин или пароль, каким должен быть формат даты рождения и номера паспорта. Развернутые результаты валидации вывести в этот столбец, ниже пояснений к заполнению. Информация о незаполненном, или неверно заполненном, элементе должна выделяться красным цветом.

3.Создать форму для решения квадратных уравнений -----х2 +----х +------ =0.

Выполнить валидацию. Решить уравнение

4. На странице задан заголовок (1 строка) таблицы

Автор

Название книги

Создать 2 поля для ввода данной информации и кнопку. Разработать сценарий: при нажатии на кнопку информация из полей ввода динамически помещается в конец таблицы.

5. Организовать страничку с фотографиями и двумя указателями "предыдущая" и "следующая".

6. Создать Web-страницу с викториной из n вопросов с m возможными вариантами ответов. Использовать формы

7. Используя формы, cоздать голосование

8. Реализовать авторизацию на сайте

9. Реализовать загрузку и манипулирование с изображениями на JavaScript.

Для задания задержек по времени при выполнении функций использовать метода setTimeout(). Организовать исполнение скриптов следующим образом:

a) скрипт movie() получает управление от обработчика события onLoad;

b) заменяет картинку;

c) порождает новый скрипт movie() и откладывает его исполнение на 500 миллисекунд;

d)текущий скрипт movie() уничтожается JavaScript-интерпретатором.

Реализовать запуск и остановить мультипликацию по нажатию на кнопке. Пример

<html> <head>

<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>

10. Реализовать на примерах основные операции для работы с CSS

Ваш логотип
Меню …	Область А	Область B

В области Меню создать несколько ссылок, при прохождении мыши над которыми изменяется фон ссылки и увеличивается размер шрифта текста ссылки, при уходе – восстанавливается исходное состояние. При нажатии клавиши мыши - цвет фона изменяется и остается постоянным. Для одной из ссылок запросить подтверждение перехода по ссылке. В качестве маркеров в меню использовать небольшие изображения.

11. Реализовать слои на веб-сайте.

12. Реализовать страницу с фреймами.

13. Создать тестирующую программы. Взчть готовые тесты с сайта: window("http://www.w3schools.com","window2")

new("http://www.w3schools.com","window2")

14. Создать органайзер

15. Организовать проверку доступности cookie.

16. Поместить на страницу кнопки: "открыть окно" и "закрыть окно". При нажатии кнопки "открыть окно" открывается новое окно, в котором выводятся часы. При нажатии кнопки "закрыть окно", созданное окно закрывается.

17. Манипулирование окнами: измененить размер и цвет.

18. Создать раскрывающееся по нажатию на кнопку окно.

19. Организовать навигацию по сайту

20. Пользуясь Adobe Dreamweaver поместите на сайт не менее одного элемента Spry. Например, панель меню Spry, панели со вкладками Spry, набор вкладок Spry, сворачивающаяся панель Spry, подсказка Spry или др. Изучите .js и .css файлы для вставленных элементов.

21. Реализовать пример с использованием DOM и JQuery.

22. Реализовать пример с использованием JQuery и AJAX.

23. Создать прототип для списка личностей (актеров, спортсменов, ученых, политиков, писателей).

Личность:

{// свойства:

name //(имя);

birthYear //(год рождения);

country //(страна проживания, по умолчанию USA);

alive //(жив ли, по умолчанию – true).

}

Добавить методы:

setCountry() – присваивает название страны соответствующему свойству и проверяет является ли название страны корректным setBir­thYear –присвавает свойству значение года рождения и проверяет являет ли значение корректным.

Список личностей реализуется с помощью объекта “Spisok”:

{ supermans // массив личностей;

length // количество членов в списке.

}

Добавить к списку следующие методы: Add () (добавить), Remove() (удалить), Replace() (заменить). Заполнить список 5-10 элементами.

Написать функцию, которая при загрузке страницы будет создавать таблицу со списком Личностей (используйте функции insertRow и insertCell). Таблица должна содержать колонки: порядковый номер, имя, год рождения, страна, жив или нет. Имя в таблице должно быть ссылкой, при нажатии на которую данные Личности должны загружаться в форму на странице. Форма должна иметь два кнопки: Сохранить и Отменить. Соответственно должны быть написаны функции для очистки формы и для сохранения данных (после сохранения данные должны обновиться).