SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

JavaScript в действии

В этой главе:

  1. Начало сценария и объект Navigator
  2. Генерация таблицы и вложенные циклы
  3. Сохранение между сеансами и cookies

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

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

Начало сценария и объект Navigator

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

<html> <head> <title>Подбор цветов</title> </head> <body> <div> <form> <input type="Radio" name="Radio1" checked="true" />Фон<br /> <input type="Radio" name="Radio1" />Текст<br /> </form> </div> Демонстрационная область </body> </html>

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

<script type="text/JavaScript"><!-- WriteTable(); //--></script>

Функцией WriteTable мы займемся немного позже, а пока что рассмотрим, как предотвратить появление ошибок в случае, если данный документ будет открыт в браузере, не поддерживающим нужные нам объекты, а именно – модель событий в полном объеме и доступ ко всем элементам документа (к таковым относятся ныне не встречающиеся MSIE 3 и Netscape 4, однако, способ проверки версий актуален и для современных программ).

Мы уже знаем, что определить версию программы просмотра можно при помощи объекта Navigator. Помимо свойства appName, этот объект поддерживает ряд иных свойств, однако их список различен у каждого браузера ввиду того, что данный аспект никак не охвачен ни одним из действующих стандартов (DOM). Тем не менее, ряд общих свойств, позволяющих, по крайней мере, точно идентифицировать браузер и поддерживаемые им расширения, все-таки имеется. Все такие свойства перечислены в таблице 4.21.

Таблица 4.21. Основные свойства объекта Navigator
СвойствоОписание
appCodeNameКодовое имя браузера. Со времен Netscape 2 у всех браузеров «Mozilla»
appNameНазвание браузера. Для MSIE – «Microsoft Internet Explorer», для Opera – «Opera», для Netscape 2-7, Firefox и Chrome– «Netscape»
appVersionВерсия браузера. Состоит из номера версии (например, «4.0» для MSIE 4-8, или «5.0» для всех остальных) и дополнительной информации, заключенной в круглые скобки
cookieEnabledУказывает, разрешены или нет cookie («ключики»)
javaEnabledУказывает, имеется ли поддержка Java
language, userLanguageСведения о языке системы (language – стандартный, userLanguage – MSIE; Opera поддерживает оба варианта)
mimeTypesСодержит массив со списком поддерживаемых типов файлов
platformКод платформы. Для Windows это будет «Win32» (или Win64 для 64-битных версий браузеров в 64-битной версии Windows)
pluginsСодержит массив со списком установленных расширений
userAgentПолная информация о версии браузера, включающая название программы, версию, сведения о локализации и операционной системе

В данном случае нам интересны всего 2 свойства, позволяющие достаточно точно отсечь неподходящие версии браузеров – это appName и appVersion, причем от последнего нам понадобится только первая цифра. Поскольку мы рассматриваем 3 различных браузера, то нам потребуется выполнить 3 проверки на название и версию, присваивая результаты соответствующим переменным:

var IE = ((navigator.appName=='Microsoft Internet Explorer') && (parseInt(navigator.appVersion.charAt(0))>=4)); //MSIE 4-6 имеют внутренний номер версии 4.0 var N5 = ((navigator.appName=='Netscape') && (parseInt(navigator.appVersion.charAt(0))>=5)); //Netscape 6/7 и Mozilla имеют внутренний номер версии 5.0 var O7 = ((navigator.appName=='Opera') && (parseInt(navigator.appVersion.charAt(0))>=6)); //У Opera номер версии программы соответствует названию (до Opera 10)

Теперь остается написать выражение, которое будет проверять, не являются ли все результаты проверки ложью (или, если угодно – верно ли хоть одно из условий), и в случае успеха назначать документу новый обработчик события Click, а в случае неудачи – выводить сообщение об ошибке:

if (!IE && !N5 && !O7) ShowError(); else document.onclick=SetColors;

Таким образом, мы уже наметили себе работу по созданию сценария: нам нужно определить 3 функции: WriteTable, SetColors и ShowError. С последней функцией все просто: достаточно, чтобы она выводила сообщение об ошибке при помощи стандартного метода alert:

function ShowError() { alert("Здесь этот пример работать не будет!\n"+ "Используйте MSIE 4/5/6, Opera 6/7/8, Netscape 6/7 или Mozilla/Firefox"); }

Теперь требуется поместить получившийся сценарий в документ. Но если ту часть, сценария что непосредственно проверяет браузер, можно поместить в контейнер SCRIPT в части заголовка документа, то функцию ShowError, как и все прочие функции, было бы целесообразным поместить в отдельный JS-файл, не загромождая тем самым код HTML. Файл сценария на начальном этапе будет выглядеть следующим образом:

function ShowError() { alert("Здесь этот пример работать не будет!\n"+ "Используйте MSIE 4/5/6, Opera 6/7/8, Netscape 6/7 или Mozilla/Firefox"); } function SetColors(event1) { ; } function WriteTable() { ; }

Пока в нем имеются только заготовки для функций, а сам файл можно назвать procs.js. Чтобы связать файл сценария с HTML-документом, потребуется элемент SCRIPT, ссылающийся на этот файл:

<script src="procs.js" type="text/JavaScript"></script>

Поместить данный элемент также будет предпочтительнее в части заголовка. Таким образом, остается лишь добавить визуальное оформление, сделав блок управления визуально отделенным от остальной страницы, и вся HTML-часть работы будет закончена. Завершенный вариант с вариантом оформления панели в стиле Windows при помощи CSS приведен в листинге 4.9.

Листинг 4.9. Статичная часть сценария

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Подбор цветов</title> <script src="procs.js" type="text/JavaScript"></script> <style type="text/css"><!-- div#CtrlPan {background: silver; color: black; border: 3px outset silver; margin: 5px; padding: 5px; width: 280px; height: 270px; float: left;} form {margin: 2px; padding-bottom: 2px; } fieldset {padding: 0 5px; margin: 3px 0;} legend {font-size: small;} --></style> <script type="text/JavaScript"><!-- var IE = ((navigator.appName=='Microsoft Internet Explorer') && (parseInt(navigator.appVersion.charAt(0))>=4)); var N5 = ((navigator.appName=='Netscape') && (parseInt(navigator.appVersion.charAt(0))>=5)); var O7 = ((navigator.appName=='Opera') && (parseInt(navigator.appVersion.charAt(0))>=6)); if (!IE && !N5 && !O7) ShowError(); else document.onclick=SetColors; //--></script> </head> <body> <div id="CtrlPan"> <form name="Form1"> <fieldset> <!—группа и легенда добавлены по эстетическим соображениям --> <legend>Выберите элемент оформления</legend> <input type="Radio" name="Radio1" checked="true" />Фон<br /> <input type="Radio" name="Radio1" />Текст<br /> </fieldset> </form> <script type="text/JavaScript"><!-- WriteTable(); //--></script> </div> Демонстрационная область. </body> </html>

Назовем получившийся файл colors.html, – в завершенном виде на него можно посмотреть в каталоге Part_4/bigdemo.

Генерация таблицы и вложенные циклы

Теперь можно перейти к работе над файлом сценариев. Прежде всего, нам требуется создать палитру – таблицу из множества ячеек, каждая из которых будет иметь свой собственный цвет. Как известно, в web цвет представлен тремя составляющими – красным, зеленым и синим. Значение каждого может принимать от 0 до 255, что в принятой шестнадцатеричной системе счисления выглядит как 00 и FF. Поэтому, первым делом, нам понадобится функция для преобразования десятичных значений в шестнадцатеричные. Назовем ее IntToHex и тоже поместим ее в файл procs.js:

function IntToHex(s) { switch (s) { case 10: Result='A'; break; case 11: Result='B'; break; case 12: Result='C'; break; case 13: Result='D'; break; case 14: Result='E'; break; case 15: Result='F'; break; default : Result=s; } return Result; }

Эта функция принимает значение s, и если оно находится в диапазоне от 10 до 15, то возвращает соответствующие шестнадцатеричные значения – от A до F. В противном случае никаких преобразований не производится. Для этих целей был задействован оператор switch.

Теперь можно приступить непосредственно к реализации функции WriteTable, создающей таблицу. Поскольку цвет меняется по трем составляющим, то потребуются три вложенных цикла, каждый из которых будет изменять свой цвет. Также необходимо определить шаг, на который цвет будет изменяться. Но прежде следует определиться, сколько цветов нам надо. Поскольку вряд ли будет разумным использовать все доступные 16,7 миллионов комбинаций, то для начала ограничимся более простой формулой цвета в CSS – задаваемой коротким триплетом #RGB, а не полным #RRGGBB. Но даже такой вариант, в случае сплошного (т.е. со всеми значениями каждой составляющей) прохода, даст нам 4096 (163) цветов, что, конечно, здорово, но слишком уж большой получится таблица. Но если увеличить шаг хотя бы до 2, то мы получим более скромное количество – 512 (83), что тоже не мало, и более приемлемо с точки зрения размеров и сложности для браузера. Таким образом, цикл для одного цвета будет выглядеть так:

for (var i = 0; i < 16 ; i+2 );

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

for (var i = 1; i < 16 ; i = i+2 ) { document.writeln('<tr>'); for (var j = 1; j < 16 ; j = j+2) { for (var k = 1; k < 16 ; k = k+2 ) document.writeln( '<td style="background-color:#'+ IntToHex(i)+IntToHex(j)+IntToHex(k)+'"> </td>' ); } document.writeln('</tr>'); }

Здесь первый цикл (по i) меняет интенсивность красного и создает новую строку таблицы, второй (по j) – меняет интенсивность зеленого, а третий (по k) – меняет интенсивность синего и создает ячейки. Остается только добавить вывод обрамляющих табличных тегов, и функция готова (см. листинг 4.10).

Последнее, что нам требуется – это написать функция SetColors, служащую для отслеживания щелчков мышью и назначения нового цвета фону или тексту документа. Для этого возьмем за основу рассмотренную при изучении интерфейса Event универсальную функцию, добавив в нее «исполнительную» часть:

function SetColors(event1) { if (IE) { obj = event.srcElement; } else { obj = event1.target; } if (document.Form1.Radio1[0].checked) { document.body.style.backgroundColor = obj.style.backgroundColor; } else { document.body.style.color = obj.style.backgroundColor; } }

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

if (obj.tagName=='TD') { if (document.Form1.Radio1[0].checked) { document.body.style.backgroundColor = obj.style.backgroundColor; } else { document.body.style.color = obj.style.backgroundColor; } }

В результате содержимое файла процедур будет примерно таким, как в литинге 4.10 (см. файл procs.js).

Листинг 4.10. Файл с процедурами

function ShowError() { alert("Здесь этот пример работать не будет!\n"+ "Используйте MSIE 4/5/6, Opera 6/7/8, Netscape 6/7 или Mozilla/Firefox"); } function SetColors(event1) { if (IE) { obj = event.srcElement; } else { obj = event1.target; } if (obj.tagName=='TD') { if (document.Form1.Radio1[0].checked) { document.body.style.backgroundColor = obj.style.backgroundColor; } else { document.body.style.color = obj.style.backgroundColor; } window.status=obj.style.backgroundColor; } } function IntToHex(s) { switch (s) { case 10: Result='A'; break; case 11: Result='B'; break; case 12: Result='C'; break; case 13: Result='D'; break; case 14: Result='E'; break; case 15: Result='F'; break; default : Result=s; } return Result; } function WriteTable() { document.open(); document.writeln( '<table cellspacing="0" cellpadding="0">'+"\n"+ '<caption>Таблица цветов</caption>' ); for (var i = 1; i < 16 ; i = i+2 ) { document.writeln('<tr>'); for (var j = 1; j < 16 ; j = j+2) { for (var k = 1; k < 16 ; k = k+2 ) document.writeln( '<td style="background-color: #'+ IntToHex(i)+IntToHex(j)+IntToHex(k)+'"> </td>' ); } document.writeln('</tr>'); } document.writeln('</table>'); document.close(); }

Теперь, наконец-таки можно открыть в любом подходящем браузере HTML-файл (colors.html), и убедиться, что в нем, в нижней части образованной при помощи DIV и таблиц стилей панели управления, будет присутствовать таблица из множества разноцветных ячеек, созданная нами при помощи JavaScript (рис. 4.12).

Результат работы связки из XHTML, CSS и JavaScript

Рис. 4.12. Результат работы связки из XHTML, CSS и JavaScript

Если теперь щелкнуть мышкой по любой ячейке таблицы, то цвет фона документа станет таким же, как цвет этой ячейки, а если предварительно переключить селектор в положение «Текст», то изменится цвет надписи «Демонстрационная область». Кроме того, выбранный цвет будет отображен в строке состояния, благодаря строке сценария «window.status=obj.style.backgroundColor».

Сохранение между сеансами и cookies

Завершив работу с файлом procs.js, содержащим все основные процедуры для нашей программы, остается лишь созерцать плоды своего труда, или использовать их, скажем, для подбора цветовой гаммы новой web-страницы. Допустим, идеал подобран, и хочется его увековечить. В принципе, для этого можно добавить пару кнопок, одна из которых будет выполнять процедуру занесения текущих значений в какие-либо переменные, а вторая – считывать их из этих переменных и применять к документу. Это даст возможность всегда вернуться к сохраненному варианту, но только до тех пор, пока данная страница открыта в браузере. Если же надо сохранить какую-либо информацию между сеансами, то используют специальный объект, или даже технологию – cookies («печенье»), называемую так же ключиками.

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

В нашем случае мы будем запоминать цветовую палитру страницы, а сайтом (доменом) будет локальный компьютер. Для начала создадим функцию SaveStyle, записывающую информацию в cookie, и поместим ее вызов в атрибут onclick кнопки «Сохранить», добавленной к форме на панели управления:

<input type="Button" onclick="SaveStyle();" value="Сохранить" />

Саму функцию поместим в файл procs.js:

function SaveStyle() { document.cookie = "bgcolor="+document.body.style.backgroundColor; document.cookie = "fgcolor="+document.body.style.color; }

На самом деле, в этой функции определено сразу 2 ключика, в одном хранится цвет фона, а в другом – цвет переднего плана. Но такой вариант задания cookie имеет одну особенность: данные в нем будут храниться только до тех пор, пока открыт хоть один экземпляр браузера. После того, как вы закроете все окна, информация пропадет.

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

function SaveStyle() { var BestBefore = new Date; BestBefore.setDate(BestBefore.getDate()+1); document.cookie = "bgcolor="+document.body.style.backgroundColor; document.cookie = "fgcolor="+document.body.style.color+";expires="+BestBefore.toGMTString(); }

Здесь мы создали переменную BestBefore и назначили ей дату, ровно на сутки превышающую текущее значение. Затем, при объявлении второго ключика эта дата была задана в качестве значения параметра «expires». Этот параметр и определяет время хранения cookie.

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

function LoadStyle() { if (document.cookie != "") { value = document.cookie.split(";"); str = value[0].split("="); document.body.style.backgroundColor = str[1]; str = value[1].split("="); document.body.style.color = str[1]; } else { alert("Сведения отсутствуют"); } }

Здесь, прежде всего, проверяется, был ли заложен ключик вообще. Если нет – то выводится сообщение «Данные отсутствуют», но если да, то начинается процедура извлечения информации.

Прежде всего, содержимое ключика, которое хранится браузером в виде строки, разделенной точкой с запятой, разбивается на части и помещается в массив value. Затем берется первый элемент массива (value[0]), и, в свою очередь, разделяется на составные части – до и после знака равенства. Именно в такой форме (название = значение) хранятся данные в ключиках. Поскольку процедурой SaveStyles первым сохранялось значение цвета фона, то и здесь первое извлеченное из cookies значение было применено к фону документа. Затем такая же процедура повторяется со вторым элементом массива, и полученное значение применяется к цвету переднего плана.

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

На такой приятной ноте можно завершить знакомство с DOM и сценариями, и приступать к практической работе.

2011-08-06 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия v. 2.0.2
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru