Geum.ru

Реферат Тема: "Создание web сайта, Синтаксис html, Объекты и формы, Создание графики."

Вид материалаРеферат

Содержание


Изменение свойств текста
Управление формами
Подобный материал:
1   ...   5   6   7   8   9   10   11   12   ...   15






Весь сценарий находится внутри элемента SCRIPT. Первые строки кода не имеют

прямого отношения к замене графики. Дело в том, что броузеры ранних версий не

поддерживают некоторые конструкции " onclick="return false">
возникновение ошибки, необходимо проверить тип и версию броузера. Чаще все-

го код сценария надо защищать от броузера Netscape Navigator 2.x. В нашей про-

грамме создаются две переменные AgentName и A g e n t V e r , которые позволяют

определить название и версию броузера соответственно. Для этого указан объект

navigator (представляющий используемый броузер). Кроме этого необходимы:

•appName —свойство, возвращающее название броузера;

•appVersion —свойство, возвращающее номер версии броузера;

•parselnt —функция округления до целого (т. к. номер версии может быть

≪дробным≫).

Теперь, проведя проверку этих переменных, мы можем создать переменную version,

которая будет хранить значение п2, если используется вторая или более ранняя

версия Netscape Navigator. Значение хЗ обозначает все другие программы про-

смотра.

124 Глава 5. Сценарии

Теперь можно приступать к рисункам. Чтобы заменить один рисунок другим

надо изменить свойство src графического объекта: ссылку на графический файл

Поэтому вначале создаются две объектные переменные IMAGEIon и IMAGEIoff тиш

Image. Для них определяются необходимые графические файлы:

•strlon.jpg —рисунок, который должен появиться под указателем мыши;

•strl.jpg —рисунок, который сразу помещается на страницу, и который появля-

ется, когда указатель убран.

Теперь мы имеем два изображения кнопки. Саму кнопку (с надписью ≪Страница 1≫'

можно увидеть в главе 8 на рис. 8.23, но в данном случае иллюстрация мало чтс

объясняет, так как работу сценария нужно наблюдать в действии.

Удобство предварительного определения файлов очевидно: если на страниц*

много кнопок, целесообразно сосредоточить все ссылки в одном месте. В нацт

примере используются две кнопки, поэтому для второй тоже задаются два файл;

формата JPG.

В нашем примере объектом, вид которого мы хотим динамически изменять, явля

ется гиперссылка с содержимым в виде рисунка. Для элемента А задано событие

≪указатель мыши сверху≫: onMouseover="mouse_on( ' I M A G E 1 ' ) " . Естественно, в сце

парии должна находиться соответствующая функция. Разберем, как работав!

функция mouse_on(objekt). Ее аргументом является имя элемента IMG, которое

задано с помощью атрибута name="IMAGE1". Таким образом, задается однозначное

соответствие между объектами, которыми оперирует сценарий, и элементами

расположенными на странице. Работа функции тоже начинается с проверки вер-

сии броузера, так как в теле функции присутствует метод eval, не поддерживав'

мый ранними версиями Netscape Navigator.

Этот метод работает достаточно интересно. Его аргумент —текстовая строка

которая должна представлять собой команду " onclick="return false">
эта команда выполняется. Если в нашем примере такой командой окажете*

"IMAGEIon. src", то переменная imgOn получит в качестве значения ссылку на гра>

фический файл. Это будет не " s t r 1 o n . j p g " , как можно подумать, a URL, например

file:///С:/ПАПКА/st П on.j pg

Осталось изменить свойство элемента рисунка. Это делается с помощью объектг

document и имени соответствующего элемента IMG. Объект document можно считат!

массивом, в качестве индекса которого выступают имена расположенных ш

странице элементов. Ну, а свойство src говорит само за себя. Вторая функции

(mouse_of f ) отвечает за возврат рисунка к прежнему виду и работает аналогично

Возможно, у вас возникнет подозрение: а не слишком ли сложно запрограммиро-

ван сценарий? Действительно, кое-что в тексте программы можно упростить

Например, в сценарии могла бы выполняться такая команда:

document["IMAGE1"J. src '= "str1on.jpg";

В ней все параметры заданы явно, и работать такая команда может только с конк-

ретным элементом IMG.

Примеры сценариев _ 125

Вид функции mouse_on можно изменить. Пусть, к примеру, у нее будут два аргу-

мента: имя элемента и имя графического файла:

function mouse_on(objekt, risunok) {

if (version == "хЗ") document[objekt].src = risunok;

>

Тогда элемент А должен выглядеть так:

<А href =" URL" onMouseover="mouse_on( 'IMAGE1 ' , 'str1on.jpg1 )"

onMouseout="mouse_off( 'IMAGE"! ' , 'str1.jpg' )">
name="IMAGE1" alt="Page 1" border=0 height=36 width=151>

В этой конструкции имеются три ссылки на графические файлы. Теоретически,

для кнопки можно предусмотреть три изображения: ≪вид после загрузки страни-

цы≫, ≪нажатая кнопка≫, ≪отпущенная кнопка≫. Это позволяет визуально различать

кнопки, на которых был выполнен щелчок, и те, которые пользователь оставил

без внимания.

Изменение свойств текста

Web-страница, текст которой приведен в листинге 5.4, содержит элементы абзаца

и заголовка. Для заголовка запрограммированы события мыши так, чтобы цвет и

содержание текста изменялись в зависимости от положения указателя.

Листинг 5.4. Сценарий для замены свойств текста





<ТГПЕ>Изменение цвета текста<ЛШе>

<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">








ycTaHOBHTe указатель мыши на надпись "Заголовок"





Заголовок<ДаЫе>





Легко заметить, что в элементе Н2 информация о сценарии минимальная: указань:

только имена функций. Вся обработка событий сосредоточена в элементе SCRIPT

Когда указатель мыши попадает в область заголовка, выполняется функция

TextOnMouseOver( ). Поскольку эта функция не получает никаких параметров

необходимо в первую очередь определить, с каким элементом связано событие

Для этого создается объектная переменная Element! В тексте программы исполь-

зуются:

•window —объект, определяющий окно броузера;

•event —объект, содержащий информацию о событиях;

•srcElement —свойство, определяющее элемент, в котором произошло событие

Переменная Text"! связана с конкретным абзацем (элементом Р) при помощи ат-

рибута id, задающего имя элемента.

Теперь все готово для активных действий. С помощью свойства tagName проверя-

ется, действительно ли событие связано с элементом Н2. Таким образом, сценарий

будет выполняться для всех заголовков второго уровня, расположенных на стра-

нице. С помощью конструкции style, color для заголовка задается красный цвет

С помощью свойства innerText заменяется текст абзаца. Вторая функция, кото-

рая выполняется, когда указатель мыши покидает область заголовка, работает так

же, но константы в ней использованы, естественно, другие.

Обратите внимание, что элемент Н2 расположен внутри элемента TABLE. Дело Е

том, что элемент заголовка занимает всю строку, и слева от надписи остается пус-

тое пространство (рис. 5.2). Если пользователь поместит указатель мыши на пус-

тое место, сценарий тоже будет выполнен. Это может показаться неестественным,

Примеры сценариев 127

так как все привыкли, что реакция возникает, когда выбран конкретный объект

(в данном случае надпись). Таблица, которую не видно при просмотре, позволяет

ограничить область действия элемента Н2 только его текстом.

color.php

?f_

Установите указатель мыши на надпись "Заголовок"

Заголовок

т

Рис. 5.2. Иллюстрация к листингу 5.4

ПРИМЕЧАНИЕ

Этот пример можно найти в файле Txtcolor.php на прилагаемой дискете.

Метод setTimeout

В этом примере мы разберем два полезных приема: использование реально дей-

ствующих часов и метода setTimeout, без которого реализация многих динамиче-

ских эффектов оказывается невозможной.

Текст страницы приведен в листинге 5.5, а внешний вид —на рис. 5.3.

... •| : :.

ШЙШЙ • .. s - -: ..: ;- : ! \ШШ ш ШШЛВ ≫Ш •'х-*

[ Ф.айл I, . : Qci||S|||

.:•Вперед. Остано,., Обноси. , Домой" .1

DAHTML\clocklhtm

Полный формат даты:

J03/17/200012:37:58"]

Текущее время:

|12:37:58

1

Рис. 5.3. Страница с постоянно обновляемыми элементами

128 _ Глава 5. Сценарии

Листинг 5.5. Страница с часами





<Т1Т1_Е>Страница с часами<ДШе>







•



Полный формат даты:<ВН>




Текущее время :










Задача данного сценария —вывести на экран значения даты и времени. Такие де

тали если и не окажутся очень полезными, украсят страницу, сделают ее ≪живой≫

Для вывода данных предусмотрены элементы формы, но могут использоваться i

другие элементы, важно лишь, чтобы они имели имена (атрибут name).

Сценарий начинает выполняться сразу же после загрузки страницы. Это осуще

ствлено по следующему шаблону с применением атрибута события:


В функции Timer"! ( ) переменная D1 хранит объект Date( ) —текущую дату. Для пере

меннои TIME1 использованы методы getHours( ), getMinutes( ) и getSeconds( ) дл{

того, чтобы вывести текущее время в заданном формате. Функция toLocaleString( ]

позволяет преобразовать формат даты в строковый.

Если бы мы просто определили дату и текущее время, а затем вывели эти данньк

на экран, изображение оказалось бы статичным. Оно могло бы измениться толькс

в том случае, если бы пользователь перезагрузил страницу. Поэтому сценарий

надо сделать постоянно работающим. Для этого используется метод setTimeout

Примеры сценариев 129

Он позволяет создать паузу в выполнении сценария. Величина этой паузы задает-

ся в миллисекундах в качестве второго аргумента функции. В качестве первого

аргумента выступает функция, которая должна быть выполнена после истечения

заданного времени. В нашем случае используется имя той же функции, в которой

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

себя (рекурсивный вызов), и выполнение сценария не будет останавливаться.

Поскольку изменение данных (времени) происходит один раз в секунду, величи-

на задержки должна быть меньше секунды. В нашем случае она равна 0,2 с. Метод

setTimeout можно использовать для создания таких визуальных эффектов, как

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

ПРИМЕЧАНИЕ -

Эта страница находится в файле Clockl.php на прилагаемой дискете.

Управление формами

Когда на странице размещают элементы форм, бывает удобно запрограммировать

работу этих элементов. В листинге 5.6 приведен пример страницы с двумя кноп-

ками, которые управляют содержимым элемента TEXTAREA. На рис. 5.4 показан

пример страницы после щелчка на кнопке Заменить текст.

ш т : -.

Правка gnn Избранное

Назад Вперед Остано... Обнови... Домой , Поиск Избран.

ШD:\HTML\buttons.php

„ш„ . „т„„ Новый текст элемента

Рис. 5.4. Страница с кнопками

Листинг 5.6. Страница с кнопками





<Т1Т1Е>Страница с кнопками



продолжение

130 Глава 5. Сценарии

Листинг 5.6 (продолжение)









 

Copyright © 2023. All rights Reserved.