Not Found

Mike Melnikov, (Web-studio "Cherry-Design")

Продолжаем разговор о применении скриптов на 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)

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

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

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

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

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

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

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

//-->
</script>

Как сделать страничку стартовой?

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

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

К сожалению, на данный момент скрипт будет работать только под 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>

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

Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в 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-файл, из которого убрали дизайнерское оформление и оставили очень простую верстку, чтобы при печати не было лишних элементов. Приведенный же выше код непосредственно посылает страничку на принтер.