Глаза страшат, а руки делают

ЧАСТЬ ТРЕТЬЯ


31. Иерархия объектов браузера

  • классификация объектов JavaScript;
  • объекты браузера;
  • объект location;
  • свойства и методы объекта location;
  • объект history;
  • свойства и методы объекта history;
  • объект navigator;
  • свойства объекта navigator;
  • отступление: определение браузера;
  • методы объекта navigator;
  • объект screen;
  • свойства объекта screen.

«Словарный запас» JavaScript

До сих пор мы изучали ЯДРО JavaScript, чтобы понять, КАК он работает. В третьей части мы в первую очередь займёмся его окружением — тем, С ЧЕМ работает JavaScript. Образно говоря, изучив основы «грамматики», мы начинаем наращивать «словарный запас».

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

Объекты, с которыми работает JavaScript, можно условно разделить на 2 категории:

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

2. Клиентские объекты, «родителем» которых является объект window. Их тоже можно условно разделить на 2 категории:

а). Объекты браузера. К ним относятся элементы интерфейса браузера — окно, показывающее web-страницу, панели инструментов, строка состояния, полосы прокрутки, а такде информация о типе и версии браузера.

б). Объекты HTML-документа (или XML-документа) — все те элементы, которые указаны в коде web-страницы.

Таинственный невидимый объект Global — прототип всех объектов JavaScript.

Левая ветка — ядро, объект Object — прародитель всех встроенных объектов (объектов ядра).

Правая ветка — клиентские объекты, с которыми работает JavaScript. Мы уже немного прикоснулись к их пращуру — объекту window — во второй части (уроки 14, 15, 16, 17).

Объекты web-страницы, заключённые в объект document, представляют собой иерархию DOM — Document Object Model (объектная модель документа). Изучению этой огромной, необъятной модели и будет посвящено большинство уроков третьей части.

Но начнём с чего попроще. А именно — с объектов браузера.

Объекты браузера

Существует путаница в классификации клиентских объектов. Часто можно встретить в одном перечне объекты window, location, history, document, navigator. (Объект screen часто вообще не упоминается в перечнях.) Это не совсем точно. Объекты location, history, document и navigator (а также screen) являются потомками (свойствами) window. В свою очередь, document имеет так много потомков (свойств), что его нужно рассматривать отдельно и подробно. А более непритязательные объекты — location, history, navigator и screen — целесообразно рассмотреть в одной связке, условно назвав её «объекты браузера».

Итак, приступим к изучению этих объектов.

Примечание

У объекта document также есть свойства (объекты) location и history. Прошу это сразу запомнить и постараться не путать «однофамильцев».

Объект location

Свойства объекта описывают и хранят местонахождение текущего документа — например, адрес URL.

При управлении объектом location существует возможность изменять адрес URL документа. Объект location связан с текущим объектом window — окном, в которое загружен документ.

Синтаксис

[переменная_окна.]location.свойство;

переменная_окна — необязательная переменная, задающая окно, к которому обращается объект. Если переменная опущена, подразумевается свойство текущего окна.

свойство — свойство объекта location, к которому обращена инструкция.

Внимание!

Свойство location объекта window легко перепутать со свойством location объекта document (значение document.location изменить нельзя, тогда как window.location — можно. При загрузке страницы значение document.location автоманически присваивается объекту window.location.

Обращение к фрейму

Можно также изменить содержимое фрейма во фреймосодержащем документе при помощи свойства parent — синонима объекта window, обозначающего окно верхнего уровня, если окон несколько.

Синтаксис

parent.frames[n].location = "адрес_URL";

n — число, указывающее номер запрашиваемого фрейма в коллекции frames.

"адрес_URL" — URL документа, который инструкция загрузит в этот фрейм.

Свойства объекта location

href

Полный адрес URL текущего документа, например:

location.href = "http://myhost.ru/aboutme.html"

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

location = "http://myhost.ru/aboutme.html"
location.href = "http://myhost.ru/aboutme.html"

hash

Часть URL после символа #, которая соответствует местоположению якоря в документе (если таковой имеется).

Символ # не включается в имя свойства при его установке.

location.href = http://myhost.ru/aboutme.html#ancor1"
location.hash = "ancor1"

pathname

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

location.href = "http://myhost.ru/images/pict1.jpg"
location.pathname = "/images/pict1.jpg"

protocol

Префикс адреса URL, описывающий протокол обмена. Иными словами, компонент URL до первого двоеточия, включая его. Возможные значения: "http:", "ftp:", "mailto:" и "file:".

host

Часть адреса текущего документа, включающая имя хоста и порта сервера (если определён) через двоеточие, например:

location.host = "myhost.ru:80"
Что такое порт?

hostname

Первая половина свойства host (без порта):

location.hostname = "myhost.ru"

port

Вторая половина свойства host (только порт):

location.port = "80"

Примеры свойств

С помощью свойств объекта location можно манипулировать разными участками полного адреса URL. Полный адрес - то есть location.href (или просто location) складывается из следующих «кубиков» (слэши после протокола необходимо доьавить вручную):

location.protocol + "//" + location.hostname + location.pathname Проверим данную страницу:

document.write(location.href)

Примечание

Если страница находится у вас на компьютере, то после протокола (file:) появятся не два, а три слэша:

file:///F:/site/!my2008/lsn_js31.html

Третий слэш «закрывает» пустую строку, которая появляется вместо свойства hostname. В браузере Opera hostname будет определяться как localhost:

file://localhost/F:/site/!my2008/lsn_js31.html

document.write(location.protocol)

document.write(location.hostname)

Примечание

Если страница находится у вас на компьютере, то свойство возвратит пустую строку (Opera выдаст localhost).

document.write(location.pathname)

Примечание

Если страница находится у вас на компьютере, то свойство возвратит полный путь после протокола file://. При этом в IE слэши после обозначения диска будут обратными:

/F:\site\!my2008\lsn_js31.html

В других браузерах — прямыми:

/F:/site/!my2008/lsn_js31.html

document.write(location.protocol + "//" + location.hostname + location.pathname)

Примечание

Если страница находится у вас на компьютере, то в IE слэши после обозначения диска будут обратными:

file:///F:\site\!my2008\lsn_js31.html

Браузер Opera добавит в качестве хоста localhost:

file://localhost/F:/site/!my2008/lsn_js31.html

Итак, всё вернулось на круги своя.

Методы объекта location

reload()

Синтаксис

location.reload([проверка])

проверка — дополнительное Булево значение, по умолчанию — true.

Выполняет жесткую перезагрузку текущего документа окна (определённого свойством location.href). Собственно, это же делает кнопка браузера «обновить» («refresh»).

По умолчанию (без аргумента) или с аргументом true метод заставляет браузер проверить время последнего изменения документа и загрузить его либо из кэша(если не был изменён), либо с сервера (соответствует кнопке «обновить»).

Если в качестве аргумента указано false, то браузер перезагрузит текущий документ с сервера без какой-либо предварительной проверки. Это соответствует нажатию на кнопке «обновить» при удержанной кнопке Shift (Shift+Refresh)или Ctrl+F5 в Internet Explorer.

replace()

Синтаксис

location.replace("URL")

URL — строка содержащая полный или относительный URL документа, который будет загружен в текущее окно или фрейм.

Загружает новый документ в текущее окно, не занося предыдущую страницу в список history (об объекте history — чуть ниже). То есть при нажатии кнопки браузера «назад» («back») пользователь не сможет вернуться на предыдущую страницу.

Это полезно применять при переадресации сайта.

Предположим, сайт переехал, но постоянные пользоыватели помнят прежний адрес. Пока они не привыкли к новому, на старом адресе можно поместить пустую страницу, в <head> которой будет скрипт переадресации.

Допустим, мы сделали это через свойство href:

<script type="text/javascript">
location.href = "новый_адрес_страницы"
</script>

Скрипт приведёт нас на нужную страницу, но если нам зачем-либо понадобится нажать кнопку «назад» мы будем снова попадать на страницу переадресации, которая вновь пошлёт нас по указанному адресу («а приехал я назад, а приехал в Ленинград»), то есть кнопка «назад» окажется «зацикленной», и последняя страница станет тем самым «отцепленным вагоном» Маршака.

Но можно сделать грамотную переадресацию через метод replace():

<script type="text/javascript">
location.replace("новый_адрес_страницы")
</script>

Преимущество этого метода в том, что промежуточная страница не записывается в массив history, и кнопка «назад» корректно приведёт нас на страницу, на которой мы были до этого.

Объект history

Пока мы сидим в интернете и переходим со страницы на страницу (то есть, научно говоря, выполняем «сессию браузера»), браузер ведёт журнал, содержащий список адресов страниц (URL), которые мы посетили. Эти адреса записываются в массив, который используется браузером при нажатии кнопок «Назад» («Back») и «Вперёд» («Forward»). Массив содержится в объекте history. В многооконных браузерах каждое окно имеет собственный объект history.

Свойства объекта history

current

URL текущего окна в массиве history. Появляется при загрузке первой страницы. Обновляется при загрузке каждой следующей страницы в то же окно (вкладку).

next

URL следующего окна в массиве history. Появляется или обновляется после того, как мы нажали кнопку «Назад» («Back»).

previous

URL предыдущего окна в массиве history. Появляется или обновляется при каждом переходе на новую страницу.

length

Число элементов в массиве просмотренных страниц (размерность массива history).

Примечание

В браузерах IE и Opera начальное значение равно 0 (то есть свойство возвращает не размерность массива, а номер текущего элемента), в браузерах Mozilla, Firefox и Google Chrome — это 1 (то есть именно размерность массива).

Для проверки можете поместить на страницу такой скрипт,

<script type="text/javascript">
document.write(history.length)
</script>

а потом открыть её в разных браузерах.

Методы объекта history

back()

Синтаксис

history.back()

Перейти на предыдущую страницу (эмуляция кнопки «Назад»). Если предыдущей страницы нет, то вызов метода ничего не даст.

forward()

Синтаксис

history.forward()

Перейти на следующую страницу (эмуляция кнопки «Вперёд»). Вызов метода на последней странице ничего не даст.

go()

Синтаксис

history.go(шаг)
/* или */
history.go("URL")

Аргументы

шаг — целое число, показывающее, на сколько шагов вперёд/назад надо переместиться. Значение 0 перезагружет текущую страницу; значение -1 эквивалентно back(); значение 1 эквивалентно forward(). Если шаг лежит за границами истории посещений (например -1 для первой страницы), то метод ничего не не даст.

URL — адрес документа, сохранённого в списке хронологии.

Перемещает на определённую позицию в массиве history или на адрес страницы, содержащейся в массиве.

Объект navigator

Объект navigator представляет ряд свойств браузера.

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

Свойства объекта navigator

Для «общего развития» привожу все свойства этого объекта. Хотя, как вы увидите, некоторые из них на сегодняшний день достаточно бессмысленны. Но языки программирования пишутся «на вырост», и со временем «балластовые» свойства могут оказаться актуальными.

Свойства перечислены по алфавиту, а не по значимости.

appCodeName

Показывает кодовое имя браузера. У всех браузеров (IE, Netscape, Mozilla, Firefox, Opera, Google Chrome и т.д.) кодовое имя — Mozilla. Так что это свойство пока практического значения не имеет.

appMinorVersion

Всем программам традиционно присваиваются «большие» (major) и «малые» (minor) номера версии. «Большая» версия обозначает принципиально новый вариант программы. «Малая» — улучшенный и исправленный вариант текущей версии программы. Обычно «малая» версия пишется после точки вслед за «большой». Например, 4.03.

По идее свойство appMinorVersion должно возвращать номер «малой» версии браузера (тот, что после точки). Однако в большинстве браузеров возвращается undefined, т.е. «не определено». Так что свойство опять же чисто номинальное.

appName

Показывает имя браузера.

IE

Microsoft Internet Explorer

Netscape, Mozilla, Firefox, Google Chrome

Netscape

Opera

Opera*

* в браузере Opera есть «обманная» настройка, которая позволяет ему «мимикрировать» под другие имена. Зачем — непонятно.

Свойство appName позволяет в общих чертах определить тип браузера. На заре интернета этого вполне хватало. Однако сейчас для точного и корректного определения стоит пользоваться другими приёмами (см. ниже).

appVersion

Показывает полный номер версии браузера и — в скобках — платформу операционной системы и заданный по умолчанию язык — часть информации, возвращаемой свойством userAgent (см. ниже). IE и Google Chrome показывают более полную информацию userAgent.

В Firefox и Google Chrome возникает путаница с номером версии. Так, и Firefox 3, и Google Chrome показывают номер версии 5.0.

Почему так?

С выходом IE и Netscape 4-х версий произошла «бархатная революция» в «сближении и взаимопонимании» этих браузеров. Поэтому часто в ветвлениях кода для разных браузеров определение версии 4 используется как «индикатор соответствия». Это делается извлечением номера «большой» версии из свойства appVersion с помощью метода parseInt(), например:

if (parseInt(navigator.appVersion) >= 4)
{// код для браузеров 4 версии и выше}
else
{// код для старых браузеров}

Отсюда понятно, что «завышенный» номер версии используется в Firefox и Google Chrome для «подстраховки».

Итак, мы выяснили, что при всей громоздкости и «глючности» это свойство может найти полезное применение в кроссбраузерных кодах.

Значения свойства appVersion в некоторых браузерах:

IE 6

4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)

Firefox 3.63

5.0 (Windows; ru) // скромненько и со вкусом

Google Chrome*

5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16

* почему-то русская версия браузера всё равно возвращает en-US.

Opera 8.54

8.54 (Windows NT 5.1; U; ru)

Ваш браузер

Что означает абракадабра, похожая на шпионский шифр, рассмотрим в свойстве userAgent.

browserLanguage

Если вы обратили внимание, в IE свойство appVersion возвращает что угодно, кроме языка.

Свойство browserLanguage — язык браузера по умолчанию — специфическое свойство IE (его понимает также Opera 7 и выше). Остальные браузеры возвращают undefined.

cookieEnabled

Свойство определяет, позволяет ли данный браузер читать и записывать данные cookie. Оно используется в скриптах, работающих с «куками», например:

if (cookieEnabled)
{setCookieData(data)}

Возвращает булево значение (если да, то true).

cpuClass

Ещё одна «примочка» IE. Возвращает информацию о CPU клиентского компьютера (кто не знает, CPU — это процессор). Процессоры Intel возвращают x86, PowerPC Macintosh — PPC. Ни тебе скорости, ни номера модели. И зачем, однако?..

javaEnabled

Булево значение. Проверяет, включён ли Java в установках браузера (если да, то true).

language

То же, что browserLanguage, но для браузеров с appName Netscape. Opera понимает оба свойства.

onLine

Булево значение. Проверяет, установлен ли браузер для просмотра online или offline (если да, то true). Opera не поддерживает.

platform

Возвращает название операционной системы или аппаратной платформы браузера. Для Windows 95/NT, значение — Win32; для Macintosh, на PowerPC CPU, значение — MacPPC. Использование этого свойства для определения базовых средств клиента в условном выражении могут помочь оптимизировать вывод страницы для каждого устройства. Например:

if (navigator.platform == "Win32")
{ document.write(// содержание, поддерживаемое компьютерами с операционной системой Windows 95/NT computer )}

product

Возвращает название торговой марки браузера. Является частью строки userAgent. Браузеры с appName «Netscape» возвращают «Gecko». IE и Opera — не поддерживают.

systemLanguage

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

if (navigator.systemLanguage == "nl")
{document.write(// голландское содержание)}

userAgent

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

На многих комапьютерах установлены пвкеты .NET Framework — технологии, поставляемой Microsoft. Свойство userAgent браузера IE указывает также версии этих пакетов. CLR (Common Language Runtim) — «общеязыковая исполняющая среда» — компонент пакета Microsoft .NET Framework, выполняющий программы, написанные на .NET-совместимых языках программирования.

Поскольку в браузерах «согласья нет», многие сайты для работы с «лебедем, раком и щукой» используют userAgent для определения браузера и в зависимости от получаемого значения посылают соответствующее содержимое веб-страниц. Из-за этого многие браузеры стали «прятать» или «подделывать» userAgent. Отсюда использование браузером IE, а затем и Google Chrome строки userAgent, начинающейся с «Mozilla/». Отсюда и «глючная» опция браузера Opera, позволяющая пользователю выбирать для браузера поддельный «псевдоним».

Из-за этой путаницы для определения браузера лучше использовать не свойство целиком, а его отдельные наиболее характерные элементы, находя их методом indexOf(). Например, проверить наличие желаемой строки можно так:

if (navigator.userAgent.indexOf("MSIE") != -1)
    var isIE = true

Кроме популярных «лебедя, рака и щуки», могут встретиться малопопулярные «медвели» и «крокодилы» с каким-нибудь совсем «левым» userAgent. И для них опренделение через userAgent может не сработать вообще. Поэтому определение типа браузера через userAgent может оказаться таким же некорректным, как и через appName.

После перечисления оставшихся свойств я приведу способ наиболее корректной проверки (хотя и она не даёт стопроцентной гарантии).

userLanguage

Значение по умолчанию языка браузера, основанное на установке операционной системы user profile (если таковая имеется). По умолчанию соответствует свойству browserLanguage. Поддерживается только браузерами IE и Opera.

userProfile

Объект, который позволяет непосредственно по запросу сценария обратиться к личной информации, сохраненной в параметрах пользователя (для Win32 версий IE 4+).

В данном обзорном разделе мы не будем рассматривать громоздкий, но малоупотребительный объект userProfile с его многочисленными методами, тем более, что он существует в IE 6 и только в IE 6 (это, кстати, может пригодиться для определения версии браузера).

vendor

Возвращает название распространителя браузера. Не поддерживается IE и Opera. Firefox обычно выдаёт пустую строку. Значение для Google Chrome — «Google Inc.».

На сегодняшний день может использоваться как определитель браузера Google Chrome.

Отступление: способы определения браузера

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

Самый элементарный способ

Чуть забегая вперёд, обратимся к свойствам документа (подробнее см. в следующем уроке). Принципиальное различие IE и браузеров семейства Netscape в том, что первый поддерживает коллекцию document.all, а последние — нет.

Итак:

if (!document.all)
{
/* код для семейства Netscape
(восклицательный знак означает отрицание) */
}

Здесь мы определили вариант для браузеров семейства Netscape. В «противный случай» попадают браузеры, поддерживающие document.all: IE, Opera и, возможно, какие-то ещё малопопулярные. Для их разделения воспользуемся «вывеской» IE.

else
{
    if
(navigator.appName == "Microsoft Internet Explorer")
    {
        // код для IE
    }
    else
    {

        // код для всех остальных, поддерживающих document.all
    }
}

Часто этого способа бывает достаточно.

Ещё один элементарный способ

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

В дополнение к этому существует тэг <comment></comment>, который IE интерпретирует как комментарий (и, соответственно, игнорирует его содержимое), а остальные браузеры просто читают его содержимое, как будто самого этого тэга нет.

Из этого можно соорудить следующую конструкцию:

<!--[if IE]>
Код для браузера IE
<![endif]-->

<comment>
// Код для других браузеров
</comment>

Ключевые слова для IE:

IE — любая версия браузера Internet Explorer;

IE 6 — Internet Explorer 6;

IE 7 — Internet Explorer 7;

IE 8 — Internet Explorer 8;

IE 9 — Internet Explorer 9;

lt — номер версии браузера меньше указанной;

gt — номер версии больше указанной;

lte — номер версии меньше или равен указанной;

gte — номер версии больше или равен указанной.

Например, <!--[if gte IE 6]> означает любую версию IE, начиная с IE 6.

Более хитрые способы (обзор)

Если поискать, то у каждого браузера можно найти какие-нибудь «фишки», присущие ему одному.

Как мы уже знаем, Opera умеет прикидываться другими браузерами (в 10-й версии это безобразие прекратилось). Но при этом (начиная с 5-й версии) поддерживает объект JavaScript window.opera. Вот она и спалилась. Этот же объект может показать и версию:

window.opera.version()

Допустим:

if (window.opera != null)
{
    if (window.opera.version() >= 8)
    {
        // Код для Opera 8 и новее
    }
    else
    {
        // Код для Opera старше 8
    }
}
else
{
// Код для других браузеров
}

Google Chrome имеет уникальный объект window.chrome. Версию определить сложнее, поскольку parseFloat(navigator.appVersion) выдаст «обманку» 5.0. Пока не будем лезть в дебри регулярных выражений (а это делается именно с их помощью).

Уникальные объекты Firefox — window.sidebar и window.globalStorage. С версией те же проблемы, что и у Google Chrome.

У Safari не обнаружилось уникальных объектов, но у него нет объекта window.external. Этого объекта лишена и Opera. Поэтому ветка для определения Safari может выглядеть так:

if ((!window.external)&&(!window.opera))
{
    // Код для Safari
}

IE поддерживает объекты window.all и window.ActiveXObject.

В IE 6 и только в IE 6, как мы знаем, существует navigator.userProfile. В IE 8 появились объекты window.Storage и window.Event. В IE 7, соответственно, нет ни userProfile, ни Storage, ни Event.

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

Методы объекта navigator

preference()

Через маркированные скрипты в Navigator 4 и выше можно обращаться к пользовательским параметрам настроек браузера. Они включают такие детали, как «разрешил ли пользователь загружать изображения» или «позволяются ли таблицы стилей». Большинство этих параметров настройки предназначено для скриптов, используемых сетевыми администраторами, чтобы устанавливать и управлять пользовательскими параметрами настройки Navigator.

Аргументы

name — название настройки как строка, типа general.always_load_images.

value — дополнительное значение, чтобы установить названное предпочтение.

taintEnabled()

Возвращает, включен ли в браузере «data tainting». Этот механизм защиты никогда не был полностью реализован в Navigator, но проверяющий это метод включён в более новые версии Navigator для обратной совместимости. IE 4+ также включает его для совместимости, хотя всегда возвращает false. Возвращает булево значение: true|false.

Объект screen

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

Методов объект screen не имеет.

Свойства объекта screen

Высота и ширина видимой области монитора пользователя в пикселях. Не включает панель задач в 24 пикселя (Windows) или системную строку меню в 20 пикселей (Macintosh). Чтобы использовать эти значения при создании развёрнутого окна, необходимо корректировать верхнюю левую позицию окна.

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

window.open("", "", "height=" + screen.availHeight + ", width=" + screen.availWidth/2 + ", top=0, left=0");

Примечание 1

В Windows XP на панель задач свойство availHeight отводит 30 пикселей (проверено методом тыка).

Примечание 2

IE 4/Macintosh ошибается в расчёте высоты строки меню (отсчитывает 24 пикселя вместо 20).

availLeft, availTop

Координаты в пикселях левой и верхней точек экрана. Всегда нуль.

Эти свойства поддерживают только браузеры семейства Netscape.

bufferDepth

Установка растрового буфера кадра (бит на пиксель).

Тут, видимо, требуется пояснение.

Буфер кадра — это большой непрерывный участок памяти компьютера, в котором для каждой точки (пикселя) в растре отводится как минимум один бит памяти. Эта память называется битовой плоскостью.

Бит памяти имеет только два состояния (двоичное 0 или 1). Поэтому, имея только одну битовую плоскость, можно получить лишь черно-белое изображение.

Применение нескольких плоскостей расширяет цветовые возможности. Количество цветов определяется формулой 2N, где N — количество плоскостей. Так, используя простейший буфер из 3 плоскостей для основных цветов (красный, зелёный, синий) мы получим 23 = 8 цветов.

 

Красный

Зелёный

Синий

Чёрный

0

0

0

Красный

1

0

0

Зелёный

0

1

0

Синий

0

0

1

Жёлтый

1

1

0

Голубой

0

1

1

Пурпурный

1

0

1

Белый

1

1

1

Схема простейшего буфера в 3 бита на пиксель:

Если согласовать bufferDepth со значениями colorDepth (см. ниже), гладкость анимации в некоторых браузерах может улучшиться.

Установка bufferDepth на -1 указывает IE буферизовать по глубине пикселей экрана (как установлено в панели управления), и colorDepth также автоматически устанавливается на это значение (если пользователь изменит разрешение, буфер соответственно откорректируется).

Установка на 0 (по умолчанию) ничего не изменяет.

Установка на любое из других разрешённых значений (1, 4, 8, 15, 16, 24 или 32) буферизует в соответствии с ним и устанавливает colorDepth в то же значение.

4

16 цветов

8

256 цветов

15

32768 цветов

16

65536 цветов

24

16777216 цветов

32

4294967296 цветов

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

colorDepth

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

Можно определить разрядность цвета текущего экрана и выбрать цвета в соответствии с ней.

Например:

if (screen.colorDepth > 8)
document.getElementById("heading1").color = "cornflowerblue";
else
document.getElementById("heading1").color = "blue";

Тем, кто впервые познакомился с работой цветовой схемы на этом уроке, может показаться непонятным, чем же bufferDepth отличается от colorDepth.

Поясню ещё одну деталь.

Свойство colorDepth считывает настройки монитора, его возможности. Однако при трансляции изображений компьютер может использовать только те возможности монитора, которые необходимы для показа данного изображения. Эта избирательная цветовая схема и записывается в буфер кадра, её-то считывает и может настроить свойство bufferDepth. Скажем, показывая картинку gif, оптимизированную на 8 цветов, из всего «супер-пупер-монитора» буфер будет использовать только ту простую схемку, которая показана на моём рисунке (если, конечно, не «извратить» настройки буфера, задав, скажем, для bufferDepth настройку -1).

height, width

Высота и ширина всей области монитора пользователя в пикселях. Собственно, width совпадает с availWidth, тогда как height, в отличие от availHeight, включает всю область экрана вместе с системной панелью.

С помощью этих свойств можно настраивать страницы для различных разрешений монитора:

if (screen.height <= 600 && screen.width <= 800)
{
/* Код версии для мониторов с разрешением 800×600 и ниже*/
}

pixelDepth

Работает только в браузерах семейства Netscape. Почти то же самое, что colorDepth, только его нельзя «извращать» ни с помощью bufferDepth, ни каким-либо другим способом (свойство только для чтения и «защищено от дурака»).

Из соображений кроссбраузерности лучше использовать colorDepth.

updateInterval

При показе анимации экран всё время обновляется. Свойство updateInterval настраивает интервал (в миллисекундах) между обновлениями экрана. Значение 0 позволяет браузеру автоматически выбирать среднее значение. Как правило, это самый оптимальный вариант.

Чем дольше интервал, тем больше шагов анимации, заложенных в буфер, может быть пропущено при показе.


Итак, мы узнали:

о нескольких объектах, связанных с браузером.


К следующему уроку >>


 018018