Понятный JavaScript

Объектная модель броузера

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

Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:

1. Страничка скачивается с сайта и размещается в памяти компьютера
2. Производится анализ странички, в результате которого она разбирается на составляющие.
3. Блоки, из которых состоит страничка (<body;></body>, <head;></head>, <p;></p> и т.д.), размещаются во временной базе данных сообразно структуре объектной модели.
4. База данных становится доступной другим программам - и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Структура объектной модели

Чтобы было понятно, о чем мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше.

Объектная модель Netscape Navigator-а немного отличается от вышеприведенной, но ее смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей. Вместо того, чтобы подробно расписывать каждый объект, входящий в модель броузера, я буду разъяснять смысл объектов, их свойств и методов на конкретных примерах - по мере возникновения в том необходимости.

Как видите, структура объектной модели достаточно сложна, но строго определена; и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству (методу) нужно корректно построить строку доступа…

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

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

Как и где размещать код скрипта?

Но сначала немножко отвлечемся от эффектов и поговорим о том, как и где размещать код JavaScript. Так как язык скриптовый, и рассчитан на работу на web-страничках, то и код его размещается непосредственно в Html-исходнике странички. Причем, код на JavaScript обычно состоит из двух частей:·

*Функций, которые вызываются из кода странички в ответ на какое-то событие.
*Кода событий, которые вызывают функции.

Описание функций должно располагаться в теге <head;></head> - это гарантирует, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script;>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:

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

function somefunction()
{
// здесь располагается код функции
}

//-->
</script>

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

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

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

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

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

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

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

В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но для удобства лучше воспользуемся механизмом флажков (напр., введем глобальную логическую переменную «browser_ok»). Вот пример кода, в котором мы проверяем чтобы броузер был либо 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'; 

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)

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

Некоторые 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(); // Считываем год

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

//-->
</script>

Такой скрипт будет печатать дату в «нормальном российском формате» - ДД/ММ/ГГГГ…

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

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

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

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

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

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

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

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

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

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

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

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

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

<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.insertAdjacentphtmlL('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);
}

//-->
</script>

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

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

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

Михаил Мельников
[email protected]