Практическое занятие №18

Наименование: Создание динамических страниц с помощью DOM

1. Цель: Научиться использовать свойства объекта и методы объекта Document

2. Подготовка к занятию: по предложенной литературе повторить тему «Объектная модель документа (DOM)» и ответить на следующие вопросы:

2.1 Что означает иерархическая структура объектной модели документов?

2.2 Какие объекты браузера и объекты HTML – документа вам известны?

2.3 Какие свойства и методы объекта Document вам известны?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»

3.2 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с

3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создайте веб – страницу, на которой разместите в контейнере <h1> следующей текст: Изменение цветового оформления страницы. Далее поместите три любые ссылки на различные сайты и обычный текст. Запишите сценарий JavaScript, который позволит вам определить цвета на все элементы веб - страницы (цвет фона, цвет текста, цвета непосещенных, активных и посещенных ссылок).

5.2 Запишите сценарий, который позволит вам узнать, когда в последний раз редактировалась ваша веб - страница. В результате выполнения сценария должна выводиться следующая строка: Последний раз страница редактировалась: далее идет код сценария, который выводит дату последнего редактирования веб – страницы.

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

6.1 Используя свойства объекта Document укажите в сценарии различные варианты цветового оформления необходимых элементов веб – страниц. Пример использования одного из свойств объекта можно посмотреть в приложении.

6.2 Просмотрите свойства объекта Document, найдите свойство, связанное с изменением веб – страниц и примените его в своем сценарии.

6.3 Примерный результат выполненной работы можно посмотреть в приложении

7 Содержание отчета:

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8 Контрольные вопросы:

8.1 Что такое объектная модель документа?

8.2 Какие коллекции для объекта Document вы знаете?

ПРИЛОЖЕНИЕ:

Для объекта Document существуют свои свойства, анализируя которые сценарий JavaScript может определить значения различных параметров веб – страницы. Рассмотрим эти свойства:

alinkColor – определяет цвет ссылок, выбранных пользователем;

· linkColor – определяет цвет еще не посещенных ссылок в HTML – документе;

· vlinkColor – определяет цвет уже посещенных ссылок в HTML – документе;

· bgColor – определяет цвет фона документа;

· fgColor – определяет цвет текста документа;

· lastModified – дата последнего изменения HTML –документа;

· location – полный URL адрес текущей веб – страницы;

· referrer – URL – адрес страницы, с которой была открыта данная веб – страница;

· title - заголовок документа, заданный с помощью элемента TITLE;

· URL – полный URL – адрес HTML – документа;

Многие из перечисленных свойств объекта Document позволяют динамически изменять значения HTML – элементов, расположенных в блоке BODY.

Пример использования свойства объекта Document:

<script language="JavaScript">

document.bgColor = "#00ff80";

</script>