Задания по курсу "Web-ориентированное программирование"
Список заданий
2. Изучаем HTML+CSS+JavaScript
Путь 1. Освоение JavaScript. Базовый уровень.
1.1. "Конфетти". Создайте web-страницу, на которой, щёлкая мышкой, можно вывести круг случайного цвета и размера с центром в указанном мышкой месте. Пользуйтесь HTML, CSS и JavaScript.
1.2. Извечный Фибоначчи. Создайте web-страницу с нумерованным списком, содержащим два первых значения из ряда Фибоначчи. Кнопка "Показать новое число" создаёт новую строку в списке с очередным числом из ряда Фибоначчи. Кнопка "Очистить" удаляет все строки, за исключением первых двух. К списку примените CSS-правила, чтобы сделать его удобным для восприятия. Используйте чистый JavaScript, HTML и CSS.
1.3. Часы. Создайте, используя чистый JavaScript, HTML и CSS, web-страницу, которая показывает текущую дату и время, и время, которое осталось до наступления какой-либо важной даты. Время должно обновляться автоматически каждую секунду. Функционал и форматирование должно как минимум соответствовать приведённому ниже скриншоту. Допустимо вместо цифровых часов создать стрелочные. В случае цифровых часов следует удерживать ведущие нули. Также обратите внимание на склонение слов в последней строке.
Путь 2. Web-страница с интерактивной картой России. Продвинутый уровень.
Это задание - не пошаговая инструкция. Это ваша творческая работа. Суть задания - используя HTML5, CSS и JavaScript для клиентского компьютера, разработать web-страницу, демонстрирующую векторную (не растровую!) карту регионов РФ. При выделении мышкой какой-либо территории РФ она должна изменить цвет, при этом показывается название выделенной территории или города. Карта должна иметь возможность интерактивного увеличения масштаба хотя бы в 2 раза.
Don't panic! Вам предоставлена база данных (БД), содержащая оцифровку границ всех регионов РФ: СУБД Microsoft SQL Server, имя 172.20.180.239, логин и пароль как у студентов в 206 комп. классе, имя БД maps. Данные для каждого региона - в виде строки чисел. Расшифровка: буква M - точка, с которой начинается новая линия, абсолютные значения координат, l - далее идут относительные координаты (смещения), z - замыкание линии (начальная точка соединяется с конечной). Координаты каждой точки X,Y отделяются пробелом от координат следующей точки. Вы можете проводить с этими данными любые манипуляции, исключая их передачу третьим лицам и их использование в коммерческих проектах, поскольку это наша собственная оцифровка. Скачанные из Интернет карты России допускается использовать только в качестве фонового изображения.
Для выполнения задания можно использовать ваш локальный компьютер, либо можно традиционно работать на сервере 172.20.195.14 в вашем персональном каталоге, логин и пароль для доступа к которому вам предоставит преподаватель (имя БД при этом будет "SQL-206"). На использование базы данных и на дополнительный язык программирования (PHP, Python или какой-либо ещё серверный язык) никаких ограничений не накладывается.
Вот скриншоты примера реализованной задачи:
