Главная | Случайная
Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Создание скриптов с обращением к свойствам объекта document




Практическая работа № 8

Сценарии управления содержимым Web-страницы

Цель: освоить правила управления содержимым (контентом) Web-страницы при помощи свойств и методов объекта document.

Задание

1. Создать примеры скриптов с обращением к свойствам объекта document.

2. Создать примеры скриптов, не связанных с событиями.

3. Создать примеры сценариев с использованием свойства innerHTML.

Технология выполнения

Создание скриптов с обращением к свойствам объекта document

Web-страница, отображаемая в окне браузера, является свойством document объекта window.

Объект document имеет свойства, перекрывающие аналогичные атрибуты контейнера body. Эти свойства распространяются на всю Web-страницу. Многие свойства были рассмотрены в лекционном материале. В качестве примера скопируйте следующий код на новуюWeb-страницу в редакторе HomeSite:

<h2>Страница с изменением цвета фона</h2>

<input type="button" value="изменимцветфона" onclick='document.bgColor="#ffccff"'>

<br><br>

<input type="button" value="изменимнажелтый" onclick="document.bgColor='yellow'">

Этот код позволяет в режиме браузера менять цвет фона страницы при помощи соответствующих кнопок (рис. 4.1)

Рис. 4.1. Пример страницы с управлением цвета фона

В приведенном примере по событию onclick (щелчок мыши) на соответствующих кнопках переопределяется свойство bgColor (цвет фона) объекта document.

Упражнение 1. Сохраните созданную страницу как файл varfon.html в папке html_files в фреймовом варианте своего сайта. Добавьте еще две кнопки, обеспечивающие изменение цвета текста страницы при помощи свойства fgColor. Сохраните файл, проверьте работу скрипта и продемонстрируйте преподавателю.

В свою очередь document является объектом, свойствами которого являются все HTML-объекты (контейнеры, теги) Web-страницы.

Каждому HTML объекту Web-страницы можно давать уникальное имя в открывающем теге при помощи атрибута id="имя"или атрибута name="имя". Так как все объекты Web-страницы являются свойствами объекта document, то имя родительского объекта document в скриптах можно не указывать.

Однотипные объекты Web-страницы, такие как img, a, form, frame и т.п. автоматически объединяются в массивы. Например, все объекты img на Web-странице создают массив images, в котором все они пронумерованы, начиная с нуля. Если объекту img присвоено уникальное имя, то в массиве к нему можно обращаться также по имени. В этом случае к объекту img можно обращаться и как images[N], где N – номер по порядку объекта img на странице, и как images["имя"], а также какdocument.имяили просто по имени, опуская указание родительского объекта document.

Рассмотрим пример обращения к объекту img:

· в HomeSite создать новый документ с заголовком «Примеры скриптов» и сохранить его как script2.html в своей папке html_filesучебного Web-сайта с фреймовым вариантом структуры;

· разместить на созданной странице произвольный рисунок из своей папки img;

· используя события наведения и ухода мыши, создать сценарий смены изображения при наведении мыши (рис. 4.2);

Рис. 4.2. Пример сценария смены изображения в теге img с обращением к объекту по его номеру в массиве images

· проверить результат – при наведении и уходе мыши y объекта img меняется свойство src – относительное имя файла изображения;

· дать имя объекту img при помощи атрибута id="имя"или name="имя";

· изменить сценарий так, чтобы обращение к объекту img было по имени элемента массива, а затем по имени объекта Web-страницы (рис. 4.3);

Рис. 4.3. Пример сценария смены изображения в теге img с обращением к объекту по его имени

· проверить результат и продемонстрировать преподавателю.

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




Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2019 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных