Применение скриптов на web-страничках

 

 

     Продолжаем разговор о применении скриптов на web-страничках. И начнем мы, пожалуй, с написания некоторых функций, которые нам впоследствии очень пригодятся.

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

Определение типа и версии броузера

     Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат иногда требуется писать разный код - для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объеме или нужно ограничиться урезанной версией, была бы как нельзя кстати.

     Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:

var browser_name = navigator.appName;
var browser_version = parseFloat(navigator.appVersion);

     В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).

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

     Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой:

var browser_ok = false;

if (browser_name == "Netscape" && browser_version >= 4.0)
    browser_ok = 'true';
else if (browser_name == "Microsoft Internet Explorer" &&
    browser_version >= 4.0)
    browser_ok = 'true';

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

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

function somefunction() {
    if (browser_ok == 'true') {
    
    // здесь и располагается зависимый код
    }
}

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

Генерация случайного числа

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

     Для генерации случайного числа мы воспользуемся JavaScript объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:

function getrandom() {

var min_random = 0;
var max_random = 10;

max_random++;

var range = max_random - min_random;
var n=Math.floor(Math.random()*range) + min_random;

return n;
}

     Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random).

 

     Несколько небольших и полезных Java-скриптов позволяющих добавить к функциональности сайта некоторые приятные мелочи.

Дата модификации документа

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

     Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:

<script language="JavaScript">
<!--

document.write ("Дата последней модификации: " + document.lastModified);

//-->
</script>

     Дата выводится в формате, соответствующем региональным настройкам компьютера, а это не всегда нам подходит. Но, несколько усложнив скрипт, мы сможем выводить дату практически в любом формате. Для этого достаточно печатать дату модификации документа не сразу, а предварительно разобрав ее на составляющие. Сделать это можно при помощи создания объекта Date, передав ему в качестве параметра document.lastModified:

<script language="JavaScript">
<!--

LastDate = new Date(document.lastModified);

LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год

LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));

document.write ("Дата последней модификации: ", LastDay, "/", LastMonth+1, "/", LastYear);

//-->
</script>

     Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведенном скрипте, который печатает дату в формате, соответствующим региональным настройкам России (ДД/ММ/ГГГГ).

     Обратите внимание на два обстоятельства. Первое это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth() возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).

     А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear() в версии JavaScript от Microsoft возвращает нам год в виде четырех цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех :), которые следует рассматривать как смещение от 1900 года.

     Решение проблемы осуществляется достаточно просто - вначале мы берем остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить к какому веку относятся эти две цифры - для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года :), когда эта уловка уже наверняка потеряет смысл.
Как сделать страничку стартовой?

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

     Этот прием может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.
К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:

<p><a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.yoursite.com/'); return false;">Сделать стартовой страницей</a></p>

Добавление странички в "Избранное"

     Подобно предыдущему скрипту, этот прием также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.
Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку "Избранное". А сам скрипт выглядит следующим образом:

<p><a href="#" onClick="window.external.addFavorite('http://www.yoursite.com/', 'Description'); return false;">Добавить сайт в Избранное</a></p>


Желаете проверить? http://www.sunlimited.ru/index.php#, 'Cherry-Design'); return false;">Нажмите здесь, и Вы сможете добавить в избранное мой сайт. :-)

Распечатка страницы из кода

     Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в Netscape Navigator для этого есть, даже, встроенный механизм. Достаточно просто вызвать метод window.print().

     А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.

     Таким образом, наша задача разделилась на две части. Первая - определить тип броузера, а вторая корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:

<script language="JavaScript">
<!--

var browser_name = navigator.appName;
function printit() {
    if (browser_name == "Netscape") {
        window.print();
    } else {
        var WebBrowser = '<object id="WebBrowser1" width=0 height=0
        classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
        document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
        WebBrowser1.ExecWB(6, 2);
    }
}

//-->
</script>

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

<a href="#" onClick="printit();">Распечатать статью</a>

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

 

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

Общие соображения и HTML-код формы

     Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо ее вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой, и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:

<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();">
Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>

* - необходимые для заполнения поля

     Заметьте, что в отличие от обычной формы, непосредственно в теге <form> мы отслеживаем событие onsubmit, и при его наступлении вызываем функцию проверки формы SendForm().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придется заменить обычной кнопкой. И в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

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

Функция проверки формы перед отправкой

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

<script language="JavaScript">
<!--

function SendForm() {

    // Здесь мы разместим код функции

    return true;
}
//-->

</script>

     Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

<script language="JavaScript">
<!--

function SendForm() {

if (document.forms[0].name.value == "") {
    alert('Пожалуйста, введите Ваше имя');
    document.mailform.name.focus();
    return false
    }

if (document.forms[0].email.value == "") {
    alert('Пожалуйста, введите электронный адрес');
    document.mailform.email.focus();
    return false
    }

return true;
}

//-->

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

 

  • сначала проверяем, что данное поле является пустым. И если это так, то
  • выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
  • воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
  • выйдем из функции, установив флажок успешности выполнения в false.


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

Универсальная функция проверки

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

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


required = new Array("name", "email");


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

     Дополнительно к вышеописанному массиву, мы добавим еще один, который будет содержать текст ошибки для конкретного поля:


required_show = new Array("Ваше имя", "электронный адрес");


     Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введен".

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

<script language="JavaScript">
<!--

required = new Array("name", "email");
required_show = new Array("Ваше имя", "электронный адрес");

function SendForm () {

var i, j;

for(j=0; j<required.length; j++) {
    for (i=0; i<document.forms[0].length; i++) {
        if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) {
            alert('Пожалуйста, введите ' + required_show[j]);
            document.forms[0].elements[i].focus();
            return false;
        }
    }
}

return true;
}

//-->

</script>

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

     Вот, в общем-то, и все. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.

Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. Данная функция, кстати, может быть полезна и программистам на ASP.

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

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

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

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

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

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


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

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

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

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

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

<script language="JavaScript" src="banners.js"></script>

А вот так, будет выглядеть содержимое файла 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-1);

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 тегами <script></script>:

<script>
<!--
Show_Banner(1);
//-->
</
script>

.......

<script>
<!--
Show_Banner(4);
//-->
</script>

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

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

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

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



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

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

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

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

<a href=""><img src="pic/pic-1.gif" name="pic1"></a><br>
<a href=""><img src="pic/pic-2.gif" name="pic2"></a><br>
<a href=""><img src="pic/pic-3.gif" name="pic3"></a>

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

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

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

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

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

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

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

<a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');"
onMouseOut="change('pic1','pic/pic-1.gif');"><img
src="pic/pic-1.gif" name="pic1"></a>

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

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

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

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

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

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

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

function change(img, ref) {
    if (browser_ok == 'true') {
        document.images[img].src = ref;
    }
}

     О способе определения типа и версии броузера подробно написано в первой статье цикла о JavaScript.


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

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

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

<img src="pic/pointer.gif" name="pic1"><a
href="news.htm" onmouseover="over('pic1');"
onmouseout="out('pic1');"><img src="pic/pic-1.gif"></a>

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

     Число параметров, передаваемых функциям, можно сократить - достаточно ограничиться именем картинки (атрибут 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 = "pic/pointer.gif";
    }
}

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


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

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

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

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

<img src="pic/default.gif" name="pic">
...
<a href="page_1.htm" onmouseover="over('pic/image-1.gif');" onmouseout="out();"><img src="pic/pic-1.gif"></a><br>
<a href="page_2.htm" onmouseover="over('pic/image-2.gif');" onmouseout="out();"><img src="pic/pic-2.gif"></a><br>
<a href="page_3.htm" onmouseover="over('pic/image-3.gif');" onmouseout="out();"><img src="pic/pic-3.gif"></a>

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

function over(ref) {
    if (browser_ok == 'true') {
        document.images[img].src = ref;
    }
}



function out() {
    if (browser_ok == 'true') {
        document.images[img].src = "pic/default.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.cherry-design.spb.ru/). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика, составляющая пункты меню.

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

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

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


Подготовка сайта к индексации

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

     Таким образом индексируются обычные сайты, и так как на первой страничке обычно есть ссылки на все основные разделы сайта, то индексация проходит успешно. В случае с фреймами все не так. Т.е. робот пытается честно проиндексировать сайт по своим правилам, но у него, к сожалению, ничего не получается. Если Вы создавали странички с использованием фреймов, то знаете, что фреймы описываются в специальной страничке-контейнере. И, как правило, описываются лишь фреймы и формирующие их файлы. Никаких ссылок во внешний мир на этой страничке попросту нет(!). И что же происходит? Робот находит такую страничку, сохраняет ее в своей базе и... дальше ему некуда идти - он считает, что работа закончена и переходит к индексации следующего сайта. А мы получаем абсолютно непроиндексированный сайт! А значит, нашу страничку не смогут найти при помощи поисковых систем!

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

     Ну а как же все-таки подготовить сайт с фреймами к правильной индексации? Как уже было сказано выше, проблема заключается в отсутствии на страничке-контейнере ссылок на основные разделы сайта. Значит, нам нужно просто добавить эти ссылки самим. И, поместим мы их в секции <noframes></noframes>, которая, кстати, специально была придумана для таких случаев. Заметьте также, что этот способ позволяет нам сделать сайт доступным для броузеров, которые не поддерживают фреймы.
А вот и пример корректного кода, осуществляющего все сказанное выше:


<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>

</html>


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

Решение проблемы с формированием структуры фреймов

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

     Как же этого избежать? Вот сейчас и разберемся. Для начала рассмотрим простые способы, которые позволят обойтись нам без применения JavaScript. В общем-то, способ всего один, и заключается он в том, что внизу каждой странички необходимо сделать ссылку на главную страницу сайта (которая, как Вы помните, одновременно является и контейнером). Этот нехитрый прием позволит посетителям попасть в начало Вашего сайта, не прибегая к ухищрениям типа редактирования адресной строки. И, вполне возможно, что он найдет на сайте и другие полезные материалы.

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

<script language="JavaScript">
<!--
location.href="anotherpage.htm";
//-->
</script>


     Свойство href объекта location содержит адрес текущей страницы, который, кстати, можно в любой момент прочитать. И если мы при помощи скрипта поместим в эту переменную адрес какой-либо другой странички, то броузер немедленно осуществит переход.

     Второй прием - это передача скрипту параметров при помощи адресной строки (так называемый метод GET). Осуществляется это добавлением к адресу странички знака '?' (вопрос) и перечислением после него всех необходимых переменных и их значений. Если переменных несколько, то они отделяются друг от друга при помощи знака '&' (амперсанд). Вот несколько примеров передачи параметров посредством метода GET:

http://www.domain.com/page.htm?name=John&;id=1986321
search.php?keyword=design&area=title&type=full
guestbook.asp?page=2


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

     Код, который приведен ниже, должен быть размещен в начале каждой внутренней страницы, которая выводится во фрейме:
<script language="JavaScript">
<!--
    location.href="index.htm?"+location.pathname;
//-->
</script>

     Заметьте, что конструкция несколько сложнее, чем я описал выше. В качестве параметра адреса я использовал свойство pathname объекта location, которое содержит полный путь текущей странички от корня сайта (для любопытных - location.href - содержит абсолютный адрес странички, включая название протокола и имя домена).

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


<script language="JavaScript">
<!--
if (window.parent.frames.length == 0) {
    location.href="index.htm?"+location.pathname;
}
//-->
</script>


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

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

<script language="JavaScript">
<!--
document.write('<frameset cols=\"180,*\">');
    document.write('<frame src=\"menu.htm\" name=\"menu\">');
    document.write('<frame src=\"content.htm\" name=\"content\">');
document.write('</frameset>');
//-->
</script>

     Сейчас мы слегка модифицируем этот скрипт, чтобы в основной фрейм грузилась не страничка по умолчанию (content.htm), а наша внутренняя страничка. Но сначала придется из адресной строки узнать, какую же страничку грузить.

     Для обработки переменных, передаваемых в адресной строке, JavaScript нам предоставляет свойство search объекта location (право, очень удобный объект - без его помощи мы не смогли бы сделать то, что делаем :). Данное свойство хранит в себе адрес строки запроса, которая располагается сразу после знака '?'. Т.е. оно содержит адрес нашей внутренней странички (!). Но использовать это значение пока рано, т.к. строка запроса содержит и начальный знак вопроса. Поэтому для начала нам необходимо его отрезать:

var string = location.search;
var current_page=string.substring (1, string.length);

А теперь я приведу полный, модифицированный вариант скрипта:

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
    document.write('<frame src=\"menu.htm\" name=\"menu\">');
    if (location.search == "") {
        document.write('<frame src=\"content.htm\" name=\"content\">');
    } else {
        document.write('<frame src=\"' + current_page + '\" name=\"content\">');
    }
document.write('</frameset>');
//-->
</script>

     Кроме формирования фрейма, в который будет грузиться наша страничка, что обеспечивается следующим фрагментом:

document.write('<frame src=\"' + current_page + '\" name=\"content\">');

     мы также отслеживаем случай загрузки индексного файла, когда ему не передан адрес внутренней странички (например, пользователь сразу набрал главный адрес сайта), и в этом случае грузим обычную страничку по умолчанию (content.htm).

     Вот, в общем-то, и все - мы справились с проблемой внутренних страниц. Осталось только сделать несколько замечаний и пояснений.

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

     Внимательный читатель может заметить, что я использую не классическую форму передачи параметров (т.е. value=param), а сокращенную - сразу передавая нужное значение. Это возможно в простых скриптах и несколько облегчает их написание. Тем не менее, такой способ не позволяет нам передавать более одной переменной.

     Основной индексный файл мы формируем при помощи конструкций JavaScript. А что будет, если на сайт зайдет человек с броузером, который не поддерживает JavaScript? В этом случае мы вообще ничего не увидим, ведь сформировать фреймы будет некому. Так что для разрешения этой проблемы мы воспользуемся тегами <noscript></noscript>, внутри которых разместим обычное описание фреймов.

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

<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
if (location.search == "") {
document.write('<frame src=\"content.htm\" name=\"content\">');
} else {
document.write('<frame src=\"' + current_page + '\" name=\"content\">');
}
document.write('</frameset>');

//-->
</script>

<noscript>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">
Содержание сайта</a>
<a href="page_1.htm">
Страница #1</a>
<a href="page_2.htm">
Страница #2</a>
<a href="page_3.htm">
Страница #3</a>
</noframes>
</noscript>
</html>


Как поставить ссылку на внутреннюю страничку?

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

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

     А второй способ - опять же использование JavaScript, но он, к сожалению, ограничен только версиями Internet Explorer выше 5.0. По крайней мере, пока. Данный способ добавления странички в избранное я описывал раньше, поэтому не буду здесь повторяться. Те, кого это заинтересовало, могут прочитать об этом вот здесь.

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

 

 

Автор: Илюшко.А.В.                                                                                                                                2008 г.