Реферат по предмету "Программирование"


JavaScript: полезные функции

JavaScript: полезные функции

Mike Melnikov

Эффект,
который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И
заключается он в смене изображения при наведении на него мышкой. Часто можно
слышать английское название эффекта - RollOver, что обычно переводят как
"перекатывание". Мне не кажется это название удачным, но все же,
давайте приступим.

Эффект
может встречаться в различных вариантах, самые распространенные из которых это:


подсвечивание
пунктов меню

бегающий
указатель

сменяющаяся
картинка

Несмотря
на внешне различное проявление этих эффектов, все они реализованы схожим
образом и отличаются лишь в мелочах. Давайте, по порядку разберем каждый из
этих вариантов.

Подсвечивание пунктов меню

Наиболее
часто встречающаяся реализация эффекта RollOver. Его основой является подмена
картинки при наведении курсора мышки и возврат к первоначальной после того, как
мышка ее покинет.

Для
начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в
"отжатом" и "нажатом" состояниях. Будем считать, что это
уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную
нам функциональность.

Начнем
с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:







Это
обычное меню, составленное из графических элементов. Я опустил несущественные
для понимания детали - такие как указание высоты и ширины изображения, тег ALT
и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который
понадобится для ссылки на картинку.

Теперь
мы немного модифицируем меню, добавив в него вызов функций смены изображения.
Для отслеживания попадания курсора мышки на изображение мы воспользуемся
событием onMouseOver и привяжем к нему вызов функции смены изображения:

onMouseOver="change('pic1','pic/pic-1-on.gif');"

А
для отслеживания ухода курсора с изображения, на помощь придет событие
onMouseOut которое также вызывает функцию смены изображения, но уже с другими
параметрами:

onMouseOut="change('pic1','images/referat/76674-1.gif');"

В
первом случае мы указываем ссылку на изображение "нажатой кнопки", а
во втором, соответственно, "отжатой" (или исходной картинки, что суть
одно и тоже).

Теперь
напишем всю конструкцию полностью на примере одного пункта меню:



Подобным
образом необходимо обработать каждый пункт нашего меню. Отличие будет
заключаться лишь в смене значения атрибута name, который для каждого пункта
должен быть уникальным и соответствующей коррекции значений параметров в
вызовах функций onMouseOver и onMouseOut.

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

Броузер
перед показом странички на экране, разбивает ее на составляющие блоки и заносит
их в свою базу данных, предоставляя нам доступ к информации посредством
объектной модели. В частности, все картинки сохраняются в объекте images,
который, в свою очередь, входит в объект document. И, например, для того, чтобы
заменить одно изображение другим, нам достаточно воспользоваться следующей
конструкцией:

document.images["pic1"].src
= "pic/pic-1-on.gif";

Обратите
внимание, что для ссылки на конкретное изображение (ведь на страничке их может
быть много), мы используем имя картинки, которое указали в атрибуте name тега
. В данном примере, мы изменили изображение обычной кнопки, на ее
"нажатый" вариант.

Точно
таким же образом, мы можем обратиться и к другим атрибутам картинки: ширине
(width), высоте (heigth), поясняющему тексту (alt) и т.д. В нашем же случае
достаточно будет изменить только ссылку на картинку, т.к. изображения
"обычной" и "нажатой" кнопки имеют одинаковые размеры.

Все
необходимые знания для написания функции у нас уже есть, так что приступим. Вот
код на JavaScript, который осуществляет подмену изображений. В качестве
параметров мы передаем ему имя рисунка и ссылку на изображение
"нажатой" (или "отжатой") кнопки:

function change(img, ref) {

   
if (browser_ok == 'true') {

        document.images[img].src = ref;

   
}

}
Бегающий указатель

Чем
отличаются варианты RollOver с "подсвечиванием пунктов меню" и
"бегающим указателем"? Только тем, что во втором случае у нас есть
всего две картинки, используемые для всех пунктов меню - пустая и с
изображением указателя.

В
этом варианте RollOver нам придется слегка изменить HTML-код, описывающий меню,
т.к. перед каждым пунктом меню мы добавляем изображение пустого указателя:



Обратите
внимание на несколько особенностей. Во-первых, вместо одной функции смены
изображения нам понадобятся две, т.к. действия, производимые при попадании
курсора в область пункта меню, и покидании ее слегка отличаются. Мы назовем эти
функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name,
тега , переместился из описания пункта меню в описание указателя -
ведь теперь мы подсвечиваем не меню, а указатель!

Число
параметров, передаваемых функциям можно сократить - достаточно ограничиться
именем картинки (атрибут name), т.к. ссылки на изображения, формирующие
указатель, нам известны заранее. Код, осуществляющий необходимые действия,
теперь выглядит так:

function
over(img) {

    if (browser_ok == 'true') {

        document.images[img].src =
"pic/pointer-on.gif";

   
}

}

function out(img) {

   
if (browser_ok == 'true') {

        document.images[img].src =
"images/referat/76674-4.gif";

   
}

}

Осталось
разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...

Сменяющаяся картинка

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

Как
и в предыдущем случае, начнем с корректировки HTML-кода. В данном варианте он
будет состоять из двух фрагментов: описание изображения, которое будет меняться
и описание областей, при попадании на которые вызывается скрипт. Это может
быть, к примеру, то же самое меню:



...







Соответственно,
придется скорректировать и поведение функций. В функцию over(), которая
вызывается в результате попадания курсора в активную область, достаточно
передать только ссылку на заменяющее изображение. Вызов же функции out()
осуществляется и вовсе без параметров:

function
over(ref) {

    if (browser_ok == 'true') {

        document.images[img].src = ref;

   
}

}

function out() {

   
if (browser_ok == 'true') {

        document.images[img].src =
"images/referat/76674-5.gif";

   
}

}

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

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

Для
чего используется предварительная загрузка изображений? Ответ лежит в самом
механизме работы интернет - как известно, любая страничка состоит из набора
файлов, которые загружаются одновременно с основной страничкой. Но есть одна
особенность - загружаются только картинки, которые видны на экране. Наш же
эффект построен на подмене изображений и соответственно часть картинок при
загрузке не видна.

Предварительная
загрузка заключается в том, что мы заранее скачиваем невидимые картинки в кэш
компьютера. Если предзагрузка не используется, то при смене картинки будет
происходить заметная задержка - связанная с тем, что картинка будет загружаться
непосредственно с сервера.

Механизм
предварительной загрузки изображений осуществляется при помощи следующего
фрагмента кода:

if (browser_ok == 'true') {

   
a1=new Image; a1.src="/pic/pic-1-on.gif";

   
a2=new Image; a2.src="/pic/pic-2-on.gif";

   
a3=new Image; a3.src="/pic/pic-3-on.gif";

}

Мы
просто создаем объект Image для каждой невидимой в данный момент картинки и
указываем адрес изображения. Это приводит к тому, что, дойдя до этого фрагмента
кода, броузер инициирует загрузку изображений точно так же, как и для обычных
видимых картинок. К концу загрузки странички, абсолютно все картинки ее
составляющие находятся в кэше, и от этого будут загружаться мгновенно.

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

Надеюсь,
что приведенные выше скрипты и описание механизма их работы, покажутся Вам
полезными, и, используя их, Вы сможете реализовать свои задумки.
Список литературы

Для
подготовки данной работы были использованы материалы с сайта http://www.i2n.ru


Не сдавайте скачаную работу преподавателю!
Данный реферат Вы можете использовать для подготовки курсовых проектов.

Поделись с друзьями, за репост + 100 мильонов к студенческой карме :

Пишем реферат самостоятельно:
! Как писать рефераты
Практические рекомендации по написанию студенческих рефератов.
! План реферата Краткий список разделов, отражающий структура и порядок работы над будующим рефератом.
! Введение реферата Вводная часть работы, в которой отражается цель и обозначается список задач.
! Заключение реферата В заключении подводятся итоги, описывается была ли достигнута поставленная цель, каковы результаты.
! Оформление рефератов Методические рекомендации по грамотному оформлению работы по ГОСТ.

Читайте также:
Виды рефератов Какими бывают рефераты по своему назначению и структуре.