<< Пред. стр.

стр. 46
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>


body.styleO3 {
background-color: #FFFFFF;
color: #000000;
font-family: "Courier New", Courier, mono;




</style>


Далее приводится функция JavaScript:
<script language="JavaScript">
/* Если данный скрипт добавляется во внешний JS-
файл, теги <scripfe>; вставленные в начале и в кон-
це этого кода, можно отбросить. Если данный скрипт
вставляется внутрь HTML-документа, не удаляйте те-
ги <script> и поместите весь этот код в раздел за-
головка страницы, или до, или после таблицы стилей.
*/
function doRandomProperties() {
/* Следующие строки кода реализуют выбор случайно-
го числа между 1 и 2. При необходимости измените
код так, чтобы он соответствовал количеству правил
стилей в вашем наборе. Применяется следующая фор-
мула: Math.round(Math.random() * [количество пра-
вил стилей - 1]) + 1. */
var x = Math.round(Math.random() * 2) + 1;
/* Следующая строка кода инициализирует переменную
style, которая будет содержать имя стиля класса,
используемого браузером. */
var style;
/* Следующие блоки кода if/then проверяют значение
х и в соответствии с ним задают значение перемен-
ной style. Для каждого правила стиля требуется один
блок кода if/then. */
if (x == 1) {
style = "styleOl";
ГЛАВА 77. Отображение содержимого, выбираемого случайным образом 431



if (х == 2) {
s t y l e = "styleO2";
}
if (x == 3) { .
s t y l e = "styleO3";


/* В следующей строке браузер записывает тег, <body>
на Web-страницу. Снова обратите внимание на исполь-
зование символа выхода (\), указывающего, что ка-
вычка принадлежит HTML-коду, а не выражению
J a v a S c r i p t . */
document.write("<body c l a s s = \ " " + s t y l e + " \ " > " ) ;




</script>
Для вызова этой функции добавьте непосредственно после отк-
рывающего тега <body> следующую строку HTML-кода:
<script
language="JavaScript">doRandomProperties();</scrip
t>
Как правило, основной раздел страницы, заключенный в теги
<body>, выглядит подобно следующему коду:
<body>
<script
language="JavaScript">doRandomProperties();</scrip
t>
<!— Содержимое страницы располагается здесь —



</body>
Строим Web-сайты
432



Часто задаваемые вопросы
Не создается ли при применении этого метода два тега <body>?
Очень проницательный вопрос. Действительно, Web-страница за-
вершается двумя открывающими тегами <body>: исходный, кото-
рый присутствует в HTML-коде, и еще один, который записывав:сл
функцией doRandomProperties (). Апологеты «правильного» коди-
рования не смогут смириться с такой практикой, поскольку Web-
страница, согласно их воззрениям, должна содержать один и только
один открывающий тег <body>. Но все работает.
Возможно, вы удивляетесь, почему бы просто не заменить исходный
тег <body> вызовом функции doRandomProperties (). Если вы хо-
тите, можете это сделать, но, скорее всего, этого делать не стоит
Устройства просмотра, не поддерживающие JavaScript, могут столк-
нуться с трудностями при интерпретации HTML-кода, в котором
отсутствует явно заданный тег <body>.
ГЛАВА 78.
Вывод предупреждения браузера
Одна из великих целей Web-дизайна — создание полностью прозрачного сайта, сайта,
который работает на любом мыслимом устройстве просмотра, на всех возможных
платформах без принесения в жертву интерактивных возможностей и неотразимого
внешнего вида, которые привыкли ожидать от Интернета его пользователи.
Это мечта недостижима по вполне понятной причине: маловероятно, что вы реализу-
ете ее в этой жизни. Просто браузеры отличаются большим разнообразием, а плат-
формы несовместимы друг с другом. Компьютерная технология в целом защищена
множеством патентов, и коммерческие секреты, рыночные доли, программы лицен-
зирования, сообщества, организации провайдеров и старая добрая экономия, осно-
ванная на жадности, гарантируют, что она такой и останется.
В свете этого Web-дизайнеры научились управлять своими ожиданиями. Вместо за-
облачных целей они ориентируются на определенную аудиторию, выполняя разра-
ботки иод браузеры, которыми пользуется большинство посетителей их сайтов.
Они также отличаются небольшим коварством, искусно склоняя консервативную и
инертную часть своей аудитории к выполнению обновления программного обеспе-
чения до новейших версий браузеров. Трудно вообразить, чтобы кто-нибудь полу-
чал какое-либо удовольствие от путешествий по Интернету с помощью Internet
Explorer 4.0 или Netscape Navigator 3.0 (тогда, когда он назывался «Навигатором», а
не просто Netscape), хотя некоторые люди отказываются от обновления своего
оборудования.


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



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


Часто задаваемые вопросы
Возникает подозрение, что существует более простой способ
получения версии и модели браузера, который не требует прос-
мотра и фильтрации множества ненужных данных. Нет ли в язы-
ке JavaScript более точных свойств объекта navigator?
Да, JavaScript предлагает более точные свойства объекта naviga-
tor, такие, как appCodeName, appName и appVersion, но они часто
возвращают дезориентирующие или некорректные результаты. Са-
мая точная информация содержится в свойстве userAgent. К сожа-
лению, свойство userAgent содержит также немало лишней инфор-
мации, которая не нужна для функции вывода уведомления о версии
браузера, поэтому прежде чем перейти к самому сравнению версии
браузера посетителя и целевой версии, под которую разработан
сайт, необходимо избавиться от посторонних данных.


Работа функции начинается с получения свойства userAgent JavaScritp-объекта
navigator. Свойство userAgent содержит длинную строку данных о браузере посе-
тителя. Проверьте данное свойство посредством создания следующего HTML-доку-
мента и его загрузки в разные браузеры:
<html>
<head>
<title>userAgent T e s t < / t i t l e >
</head>
<body>
< s c r i p t language="JavaScript">
document.write(navigator.userAgent);
</script>
</body>
</html>
Браузер Microsoft Internet Explorer 6.0 для Windows возвращает следующие результаты:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5 . 1 ; .NET CI.R
1.0.3705)
тогда как браузер Netscape 7.1 для Windows возвращает такие данные:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4)
Gecko/20030624 Netscape/7.1 (ax)
а браузер Opera версии 7.23 выводит:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]
Функция выводимого браузером предупреждения анализирует это свойство для опре-
деления версии и типа браузера, используемого посетителем. Как видите, в данных
свойства userAgent содержится гораздо больше информации, чем просто название
браузера и номер версии, поэтому функция должна отфильтровывать посторонние
сведения, получая на входе следующую строку:
ГЛАВА 78. Вывод предупреждения браузера 435

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]
и выдавая конечный результат:
Opera 7.23
Комментарии, включенные в инструментарий, поясняют все шаги выполняемой про-
цедуры:

Инструментарий Вывод браузером предупреждения
Для использования данного предупреждения браузера скопируй-
те следующий код в раздел заголовка HTML-документа или уда-
лите теги <script> и поместите функцию во внешний файл
JavaScript.
<script language="JavaScript">
/* Теги <script> в начале и в конце данного скрип-
та не нужны, если эта функция'помещается в отдель-
ный файл JavaScript. */
function doBrowserCheck() {
/* Следующий блок кода инициализирует ряд перемен-
ных.
В переменной userBrowser хранится содержимое свой-
ства userAgent объекта navigator, которое среди
прочего предоставляет название и версию браузера
посетителя.
Переменная pass является логическим (true/false)
переключателем. Когда переменная pass принимает
значение true, браузер посетителя удовлетворяет
минимальным требованиям, предъявляемым к браузеру.
В начале функцией предполагается, что значение этой
переменной — true.
Переменные versionStart и versionEnd будут содер-
жать начальную и конечную позиции номера версии
внутри строки userBrowser. По существу, извлекает-
ся данная часть строки для сравнения с целевой вер-
сией, на которую ориентировано содержимое сайта. */
var userBrowser = navigator.userAgent;
var pass = true;
var versionStart;
var versionEnd;
/* Следующие три блока кода предоставляют целевые
версии трех браузеров: Internet Explorer, Netscape
и Opera. Текущими версиями являются 5.5, 6.0 и 5.0,
соответственно. При необходимости вы можете скор-
ректировать эти значения для своего сайта.
Строим Web-сайты
436

Переменные versionMSIE, versionNetscape и
versionOpera будут содержать номера версий, кото-
рые извлекаются из строки userBrowser. */
var targetMSIE = 5.5;
var versionMSIE;

var targetNetscape = 6;
var versionNetscape;

var targetOpera = 5;
var versionOpera;
/* Следующий блок кода if/then реализует проверки
для браузера Microsoft Internet Explorer. */
if (userBrowser.indexOf("MSIE") != -1 &&
userBrowser.indexOf("Opera" ) == -1) {
/* Приведенная выше строка кода реализует сканиро-
вание содержимого переменной userBrowser на нали-
чие текста "MSIE". Если переменная userBrowser со-
держит строку "MSIE" и одновременно не содержит
строки "Opera" (поскольку свойство userAgent брау-
зера Opera также включает текст "MSIE"), функцией
делается вывод, что посетитель пользуется браузе-
ром Microsoft Internet Explorer. */
versionStart = userBrowser.indexOf("MSIE") + 5;
/* Приведенная выше строка кода реализует поиск на-
чальной позиции номера версии внутри строки
userBrowser, которая находится на месте пятого зна-
ка справа от буквы "М" в строке "MSIE". */
versionEnd = userBrowser.indexOf(";" ,
versionStart);
/* Приведенная выше строка реализует поиск конеч-
ной позиции номера версии внутри строки
userBrowser, в которой находится знак "точка с за-
пятой". */
versionMSIE = userBrowser.substring
(versionStart, versionEnd);
/* Приведенная выше строка реализует извлечение но-
мера версии из строки userBrowser и помещает его в
переменную versionMSIE. */
if (versionMSIE < targetMSIE) {
pass = false;
437
ГЛАВА 7 8 . Вывод предупреждения браузера

/* Приведенный выше блок кода if/then сравнивает
версию Internet Explorer посетителя с целевой вер-
сией.' Если номер версии браузера посетителя меньше
целевой версии, переменной pass присваивается зна-
чение false.
Следующий блок кода if/then реализует проверки
для браузера Netscape. */
if (userBrowser.indexOf("Netscape") != -1) {
/* Приводимые ниже строки кода реализуют определе-
ние начальной и конечной позиции номера версии
внутри строки userBrowser (с девятого знака вправо
от буквы "N" в "Netscape" до следующего пробела) и
извлечение номера версии в переменную
versionNetscape. */
versionStart =
userBrowser.indexOf("Netscape"] 9;
versionEnd = userBrowser.indexOf(" ",
versionStart);
versionNetscape =
userBrowser.substring(versionStart, versionEnd);
/* И опять, если версия браузера Netscape посети-
теля меньше целевой версии, переменная pass прини-
мает значение false. */
if (versionNetscape < targetNetscape) {
pass = false;



/* Следующий блок кода реализует проверки для бра-
узера Opera. */
if (userBrowser.indexOf("Opera") != -1) {
/* Получение номера версии путем извлечения его из
переменной userBrowser. Начальная позиция находит-
ся на месте шестого знака от буквы "О" в "Opera",
а конечная позиция находится на месте следующего
пробела. */
versionStart = userBrowser.indexOf("Opera") + 6;
versionEnd = userBrowser.indexOf(" ",
versionStart);
versionOpera =
userBrowser.substring(versionStart, versionEnd);
/* Если версия браузера Opera посетителя меньше це-
левой версии, переменная pass принимает значение
false. */
Строим Web-сайты
438

if (versionOpera < targetOpera) {
pass = false; ',



/* Следующие блоки кода if/then реализуют провер-
ку, действительно ли значение переменной pass рав-
но false. Если это так, браузером выводится всплы-
вающее сообщение. Можете изменять текст сообщения
требуемым образом, но помните о вежливости и ста-
райтесь сформулировать свой запрос так, чтобы под-
черкнуть выгоды бесплатного обновления браузера
для посетителя. */
if (!pass) {
alert("Для повышения качества предоставляемых
услуг на этом сайте используются технологии
JavaScript и каскадные таблицы стилей. Браузеры
старых версий могут не поддерживать эти функции.
Для достижения наилучших результатов, пожалуйста,
обновите свой браузер до новейшей версии.")




</script>


Совет
Вы можете не выводить предупреждающее со-
общение. Добавьте свои собственные команды
JavaScript в блок if (Ipass), чтобы опреде-
лить действия программы в случае, если брау-
зер посетителя не будет соответствовать тре-
буемой версии.


Для запуска данного скрипта добавьте событие onLoad в тег
<body> HTML-документа:.
<body onLoad="doBrowserCheck() ; ">
В этом случае при загрузке браузером страницы будет автомати-
чески выполняться функция doBrowserCheck ().
ГЛАВА 79.
Отображение Всплывающего окна
"Вы покидаете сайт"
Здесь описывается небольшая уловка, которая может оказаться для вас полезной:
отображение всплывающего окна «You Are Now Leaving» (Вы покидаете сайт), когда
посетитель щелкает внешнюю ссылку.
Как Web-дизайнер, вы прикладываете титанические усилия, пытаясь создать физичес-
кое восприятие целостности своего Web-сайта. Вы хотите, чтобы он воспринимался
как логическое, цельное физическое пространство, как дом со многими комнатами.
Пока посетители остаются на сайте, согласованный графический дизайн от страницы
к странице и далее прекрасно подкрепляет это ощущение единого пространства. Но
страницы Web-сайта не совсем похожи на комнаты в доме. К примеру, ваши посетите-
ли могут покидать сайт из любой комнаты, а не только из комнаты с входной и выход-
ной дверьми, и после выхода они могут направляться в буквальном смысле куда угод-
но. В этом и заключается легендарная нелинейность Интернета.
Когда ваши внешние ссьики опознаются как внешние, раздражающая телепортация из
одного «дома» в другой через весь мир становится менее дезориентирующей. Менее ве-
роятно, что у ваших посетителей будет возникать чувство потерянности. Но когда осо-
бенности вашего сайта делают различия между внешними и внутренними ссылками ме-
нее заметными, вы можете рассмотреть возможность вывода предупреждения для посе-
тителей. Сообщите им, что они сейчас покинут сайт, если щелкнут внешнюю ссылку.
Предоставьте им шанс отменить свои действия, если они не хотят выходить с сайта.
Эту задачу решает простая функция JavaScript, подобная той, что приводится в
инструментарии данной главы.

Инструментарий Всплывающее окно «Вы покидаете сайт»
Добавьте эту короткую функцию JavaScript на любую страницу,
содержащую внешнюю ссылку.
<script language="JavaScript">
/* Теги <script> в начале и в конце данного скрип-
та не нужны, если эта функция помещается в отдель-
ный файл J a v a S c r i p t . */
function doYouAreNowLeaving(url) {
/* Вся функция состоит из одного блока кода
if/then. Браузером выводится всплывающее окно
подтверждения, которое содержит кнопки О и Cancel
К
(Отменить). (Текст сообщения находится в вашем пол-
ном распоряжении.) Если посетитель щелкает на кноп-
ке ОК, браузер переходит на URL-адрес, содержащий-
ся в ссылке, которая вызывает данный скрипт. Если
посетитель щелкает на кнопке Cancel (Отменить),
скрипт попросту завершается и браузер остается на

<< Пред. стр.

стр. 46
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>