Основы JavaScript. Дизайн или программирование? Реализация Roll-over. Библиотека I2R. Когда и для чего рационально применять JavaScript. Основы синтаксиса. Подробно рассматривается пример реализации Roll-over`ов с объяснениями всех команд и действий.

Предыдущий материал - Основы web-дизайна. Простейшая веб-страница. Первый опыт.

Дизайн или программирование?

Итак, веб-страница живёт. Вы нарисовали картинки, подготовили текст, сделали всё, что хотелось, и... заскучали. Почему? Да хотя бы потому, что выстраданная вами страничка никак не откликается на действия владельца, жадно шарящего по ней курсором. Тьфу, почти неприлично получилось... Тем не менее, будем лечить.

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

Язык HTML статичен. Для того, чтобы научить страницу «жить», откликаться на действия пользователя, нужно найти способ ЗАПРОГРАММИРОВАТЬ то или иное её поведение. Умные люди -- не чета нам с вами -- решают эту проблему, вставляя в гипертекст куски программного кода, которые называют СКРИПТАМИ. Вообще говоря, скрипт -- просто маленькая программка, срабатывающая тогда, когда ей скажут, и написана она может быть на одном из немалого количества скриптовых языков. Мы с вами будем говорить только об одном из них -- JavaScript. Синтаксис JavaScript взят из большого и серьёзного языка Java, на котором программируют страшные бородатые дяди девелоперы, получая за это жуткие деньги.

Наше с вами дело маленькое, нам надо просто научиться пихать эти самые скрипты куда попало, чтобы всё мигало, крутилось, дёргалось и так ме-едленно меняло цвет фона при загрузке. И тогда кого-нибудь плохого от нашей страницы точно хватит кондратий, а значит, мы с вами хорошие. А если кондратий хватит кого-нибудь хорошего? Нетушки! Этими задачами занимаются специалисты по маркетингу и рекламе, они знают, что такое ЦЕЛЕВАЯ ГРУППА, и отгонят всех хороших от этого мигания и верчения. Ну, что-то я опять запутался: для кого ж мы тогда вообще трудимся?

top

Снова контейнеры...

Чтобы вставить кусок кода на языке JavaScript в тело HTML-страницы, нам с вами опять понадобится контейнер. Вот такой:

<SCRIPT language="JavaScript">
<!--//
...
//--> 
</SCRIPT>

Единственный параметр, который действительно стоит использовать, называется language. Он определяет, на каком языке написано всё то, что находится внутри контейнера. Две дополнительные строчки внутри говорят старому браузеру, который никаких скриптов не понимает, что всё, находящееся между  -- комментарий, который надо просто оставить в покое и ничего с ним не делать. Таким образом, если кто-то откроет страницу с помощью этого самого старого браузера, он получит только чистый HTML-код, а все скрипты будут проигнорированы. Если знаки комментария отсутствуют, а внутри скрипта находится что-то такое, чего браузер не понимает, посетитель получит сообщение об ошибке или вообще не увидит ничего. Оно нам с вами надо?

Теперь о том, где стоит помещать скрипты. В принципе, они могут находиться где угодно, но лучше помещать JavaScript-код в контейнере HEAD. Если разместить код в разделе <BODY>...<BODY>, он обязательно исполнится в том момент, когда браузер дойдёт до него по мере загрузки страницы. В некоторых случаях это тоже необходимо, но хорошим тоном является оформление скриптов в виде ФУНКЦИЙ, которые можно при необходимости вызвать из любого места страницы и которые не будут выполняться до тех пор, пока мы с вами этого не захотим.

top

Roll-over

Техническое задание
Постановка задачи номер один.

На странице есть кнопка, выполненная в виде изображения в формате GIF. Нужно, чтобы она каким-то образом менялась при наведении на неё курсора.

Этот эффект по-английски называется roll-over и в рейтинге популярности эффектов занимает, наверное, первое место. Итак, приступим.

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

Вставляем первую кнопку в HTML. Код будет выглядеть примерно так:

<IMG name="mybutton" src="button1a.gif" width="100" height="50">

Тег IMG используется для размещения графики на HTML-странице. Параметры name, src, width и height задают соответственно имя встроенного в HTML объекта для дальнейших ссылок на него, имя графического файла, ширину и высоту картинки в пикселях.

Теперь разместим в разделе HEAD следующий блок:

<SCRIPT language="JavaScript">
<!--//
function ImgPreload()
  {
   pic2=new Image();
   pic2.src=button1.gif;
  }
function ImgOn()
  {
   temp=mybutton.src;
   mybutton.src=pic2.src; 
  }
function ImgOff()
  {
   mybutton.src=temp;    
  }
//--> 
</SCRIPT>

Теперь добавим ещё два параметра в тег IMG:

onmouseover="ImgOn();" onmouseout="ImgOff();"

Напомню, что язык JavaScript чувствителен к регистру, поэтому, если вы в одном месте напишете imgon, а в другом ImgOn, эти описания не будут иметь друг к другу никакого отношения.

Осталось сделать последнее: добавить один параметр в тег BODY:

onload="ImgPreload();"

С кодом покончено. Я намеренно не даю детальных инструкций: разумеется, из соображений лёгкого садизма. Но о том, как это всё работает, расскажу подробно.

Объяснения
В заголовке страницы -- а именно в секции HEAD -- мы создали скрипт, включающий в себя три функции: ImgPreload, ImgOn и ImgOff. Ключевое слово function в большинстве языков определяет кусок кода, который может быть многократно вызван из различных мест программы. Общий случай синтаксиса выглядит так:

...
function func_name(par1,par2,par3)
  
...

Расшифровывается всё это следующим образом: функция с именем func_name, в которую передаются параметры с именами par1, par2 и par3, которых, вообще говоря, может и не быть. Фигурные скобки обрамляют ту часть, которая, собственно, и будет выполняться, если мы эту функцию вызовем, т. е. сошлёмся на неё по имени из какой-то другой части кода.

Зачем нужны параметры, тем более, что в тех трёх функциях, которые мы используем в нашей задаче, их нет? А вот зачем. Представьте себе, что на страничке есть НЕСКОЛЬКО кнопок, для каждой из которых мы хотим сделать свой собственный roll-over. Что же, писать отдельную функцию на каждую кнопку? А если их десяток? Глупости какие.

Мы напишем ЕДИНСТВЕННУЮ функцию для каждой операции, и с помощью параметров передадим ей ИМЯ той картинки, над которой в данный момент проходит курсор мыши и которая, соответственно, должна участвовать в создании нужного нам эффекта. Вот и всё.

Вернёмся к нашему коду.

Функция ImgPreload служит для предварительной загрузки в память компьютера того изображения, которое должно быть подставлено на место исходного. Она запускается тогда, когда вся страница загрузилась: запись onload="ImgPreload();" в теге BODY означает, что по событию onload (окончанию загрузки отображаемой части страницы браузером) будет выполнена функция ImgPreload.

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

Теперь о самой функции. Запись pic2=new Image(); создаёт новый объект типа Image, на который с этого момента мы можем ссылаться, а следующая строчка pic2.src=button1b.gif; говорит о том, какой графический файл соответствует этому объекту. Теперь, запросив из любого места кода значение pic2.src, мы тут же получим button1b.gif, что нам и требуется.

Обратите внимание на то, какие параметры мы добавили в тег IMG. Запись onmouseover="ImgOn();" означает, что по событию onmouseover (курсор въехал на картинку) должны быть вызвана функция ImgOn, а запись onmouseout="ImgOff;" означает, что курсор ушёл с кнопки, и теперь нужно запустить функцию ImgOff. Как понятно из названия, эти две функции отвечают за подмену картинки (ImgOn) и возврат её в исходное состояние (ImgOff). Теперь посмотрим, как эти функции работают.

В функции ImgOn первая строка (temp=mybutton.src;) передаёт переменной temp имя того графического файла, который соответствует исходному состоянию кнопки: это значение нужно сохранить. Вторая строка (mybutton.src=pic2.src;) передаёт кнопке имя второго файла, который мы подставляем. Как только это произошло, вместо первоначальной картинки на месте кнопки возникает картинка button1b.gif, и наша задача наполовину решена. Наполовину, потому что нам ещё предстоит вернуть кнопку в исходное состояние после того, как курсор мыши уберётся восвояси.

Этим и занимается функция ImgOff. Её единственная строчка (mybutton.src=temp;) возвращает кнопке тот файл, который соответствовал ей в самом начале. Всё!

Для примера посмотрите, как организованы roll-overs на главной (или любой другой) странице моего сайта. Это такие маленькие синие точки, возникающие внутри маленьких белых кружочков, когда вы возите мышкой по пунктам меню. Правда, там всё сделано чуть-чуть иначе. ;-)

top

Предыдущий материал - Основы web-дизайна. Простейшая веб-страница. Первый опыт.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...