JavaScript: полезные функции (часть IV) (Сборник рецептов). Библиотека I2R. Организация локальной баннерной системы, используя JavaScript. Кода может быть полезен и программистам на ASP.

Для чего это нужно?

Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.

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

Условия задачи и ограничения

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

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

Накладываем на эти условия некоторые ограничения:

баннеры будут фиксированного размера и храниться в формате GIF или JPEG;
на страничке мы будем одновременно показывать четыре баннера.

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

имя файла;
альтернативный текст;
адрес странички, на которую ссылается баннер.

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

А вот так, будет выглядеть содержимое файла banners.js

var banners = new Array( "pic-01.gif", "Text #1", "http://www.link1.com/", "pic-02.gif", "Text #2", "http://www.link2.com/", "pic-03.gif", "Text #3", "http://www.link3.com/", "pic-04.gif", "Text #4", "http://www.link4.com/", "pic-05.gif", "Text #5", "http://www.link5.com/", "pic-06.gif", "Text #6", "http://www.link6.com/", "pic-07.gif", "Text #7", "http://www.link7.com/", "pic-08.gif", "Text #8", "http://www.link8.com/", "pic-09.gif", "Text #9", "http://www.link9.com/", "pic-10.gif", "Text #10", "http://www.link10.com/" )

Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.

Программная часть

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

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

n = Math.floor(Math.random()*(banners.length/3));

Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач мы организуем ещё один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведён ниже:

var i, j; var flag; // Флажок, используемый для проверки совпадения var banners_show = 4; // Число показываемых на страничке баннеров var rand = new Array(banners_show); for (i=0; i<banners_show; i++) { do { flag=0; n = Math.floor(Math.random()*(banners.length/3)); for (j=0; j<i; j++) { if (n == rand[j]) { flag=1; } } } while (flag); rand[i] = n; }

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

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

function Show_Banner(number) { n=rand[number-1]; document.write('<a href="' + banners[n*3+2] + '"> <img src="banners/' + banners[n*3] + '" border=0 width=' + banner_width + ' height=' + banner_height + ' alt="' + banners[n*3+1] + '"></a>'); }

Вот, практически, и всё, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно только не забыть, что код JavaScript отделяется от html тегами

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

Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.

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

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

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

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

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

JavaScript: полезные функции (часть IV) (Сборник рецептов)