ТОР 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. Измените предыдущий скрипт так, чтобы при щелчке мышью на изображении появлялся третий рисунок. Не нашли, что искали? Воспользуйтесь поиском:
|