Динамический html-документ

Лабораторная работа №4. Динамический html-документ
(4 часа)

Цель работы:

Изучить основы клиентского скриптового языка JavaScript, работу с объектной моделью документа DOM (Document Object Model), работу с cookie, познакомиться с возможностями, предоставляемые фреймворком jQuery.

Задание:

Создать клиентский скрипт на языке JavaScript, выполняющий действия в соответствии с вариантом. Использовать возможности, предоставляемые объектной моделью документа DOM, использовать фреймворк jQuery (или аналог).

Вариант 1:

Сборка мозаики. Элементы мозаики перетаскиваются указателем мыши. Предусмотреть возможность автоматической сборки. Положение элементов в собранной мозаике фиксировано. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 2:

Калькулятор цвета. Отобразить таблицу, фоны ячеек которой окрашены в web-гарантированные цвета. По щелчку левой кнопки мыши на образце цвета изменяется цвет текста документа, по щелчку правой кнопки мыши — цвет фона документа, также появляется окно с шестнадцатеричным кодом цвета. Предусмотреть три поля для задания цветовых составляющих и отображения цвета, в отдельном, например, окне. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 3:

Игра «Жизнь».

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

Для каждого поколения (шага игры) применяются следующие правила: каждая живая клетка, количество соседей которой меньше двух или больше трёх, погибает; каждая живая клетка, у которой от двух до трёх соседей, живёт до следующего хода; каждая мёртвая клетка, у которой есть ровно три соседа, оживает. Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего восемь соседей.

Правила применяются ко всему игровому полю одновременно, а не к каждой из клеток по очереди. То есть подсчёт количества соседей происходит в один момент перед следующим шагом, и изменения, происходящие в соседних клетках, не влияют на новое состояние клетки.

Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 4:

Создание эффекта анимированного текста. В тексте символ за символом изменяется цвет и размер очередного символа. Предыдущий символ становится прежним. Предусмотреть возможность выбора основного и дополнительного цвета и размера символов. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 5:

За указателем мыши перемещаются часы и дата (предусмотреть возможность установки часов и даты). Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 6:

Тест на скорость реакции. После щелчка по кнопке в тестовом поле случайным образом, через случайные промежутки времени появляются изображения, по которым нужно успеть щелкнуть. Попадание обозначается каким-либо образом (например, «взрывом» изображения). Тестирование можно прекратить щелчком по кнопке, но не ранее, чем через некоторый отрезок времени. Выводится результат — процент удачных щелчков. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 7:

Три линейки с бегунками для каждой цветовой составляющей. Изменение положения каждого из бегунков влечет за собой изменение цвета фона документа. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 8:

Калькулятор на четыре действия (с нажимающимися кнопками). Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 9:

Игра «Падающие мячи». По игровому полю сверху вниз в случайном порядке падают мячи, которые нужно ловить корзиной, передвигаемой с помощью клавиатуры горизонтально вдоль нижней границы игрового поля. Игру можно начать и прекратить щелчком по соответствующей кнопке. Со временем скорость падения мячей увеличивается. После остановки игры выводится результат — процент пойманных мячей. Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Вариант 10:

Просмотр набора изображений со сменой подписей к изображениям с помощью кнопок «Назад» и «Далее». При просмотре первого изображения блокируется кнопка «Назад», при просмотре последнего — кнопка «Далее». Среди прочего использовать возможности, предоставляемые фреймворком jQuery.

Порядок выполнения лабораторной работы:

1.       Создать html-документ.

2.       Написать скрипт в соответствии с заданным вариантом. Для справки по языку Javascript можно использовать источники, расположенные по адресам http://learn.javascript.ru и http://javascript.ru. Для справки по фреймворку jQuery можно использовать источники, расположенные по адресам http://jquery.com и http://jquery-docs.ru.

3.       Протестировать созданный документ.

Содержание отчета (отчет в электронном виде):

-       отчет сохранить в файле с именем АВТ-000 Иванов (лр4).doc;

-       титульный лист (образец можно скачать по адресу http://ermak.cs.nstu.ru/webprog/wp_labwork_title_page.doc);

-       цель работы;

-       задание;

-       порядок выполнения лабораторной работы

-       разметка html-документа с исходным кодом скрипта;

-       скриншот html-документа;

-       выводы по работе.

Скачано с www.znanio.ru