СОВЕТЫ САЙТО-ПИСАТЕЛЮ ЛЮБИТЕЛЮ.   Виктор Кон, 7.09.2011

Эта книга с примерами явилась моей первой попыткой описать технологию интернета, как я сам ее понимал на момент ее написания. Второй попыткой была разработка специального сайта, посвященного это теме. Вот адрес сайта: vikohn.narod.ru. Естественно, что материалов на сайте намного больше и его очень легко расширять. Но для начинающих и данная книга может представить интерес, тем более, что ее удобнее читать. Оглавление книги представляет собой набор кнопок. Кликая на любую кнопку получаем содержание главы в одном и том же окне. При этом крутить страницу придется намного меньше, чем если бы весь текст был дан одной лентой.

       
       
       

АННОТАЦИЯ -- Советы организованы следующим образом. Слева все время стоит навигация по главам. Система кнопок позволяет быстро открыть любую главу в окне справа. В каждой главе могут быть текст, код javascript программы и пример реализации кода, но ссылки на литературу даются цифрой в квадратных скобках, то есть вот так [0]. Вся литература находится в конце в виде списка литературы. Это стиль научных публикаций и так же организована Википедия. Нужно перейти на последнюю главу (нажать самую нижнюю кнопку) и кликнуть на ссылке под нужным номером. При форматировании сайта я стараюсь делать так, чтобы во всех браузерах все выглядело одинаково. В стандартных браузерах типа Google Chrome или Mozilla Firefox это легко, а вот с Internet Explorer приходиться напрягать интеллект и нет гарантии, что все будет получаться. Советую всем при чтении этой книги использовать браузер Google Chrome, который лично мне очень нравится и я все делаю сначала в нем, а потом для остальных браузеров, но по остаточному принципу. Ниже дается краткая аннотация всех глав книги.

1 Введение -- информация о том: что, как и зачем написано в этой книге, кому и как ее нужно читать, а также немного истории

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

3 Основы CSS -- кратко дается базовая информация о методах форматирования объектов на сайте с помощью таблиц каскадных стилей CSS. Обсуждаются разные подходы к описанию параметров форматирования и показаны наиболее важные параметры и их смысл.

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

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

6 Калькулятор -- пример конкретной простой программы математических расчетов на сайте с использованием языка Javascript, а также средств интерфейса, то есть окон ввода и кнопок. Приводится полный код работающего сайта и обсуждается его функциональность.

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

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

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

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

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

12 Живые ссылки -- пример объекта сайта, который представляет собой анимированную систему иконок на сайты с одним переходом. При клике на любой иконке автоматически запускается сайт, представленный этой иконкой в новом окне. Дается код объекта и объяснение как идеи кода, так и конкретной реализации.

13 Скрытый контент -- пример объекта сайта, содержащего области с кусками текста и возможно картинками, которые исходно не видны, но открываются по ссылке и размещаются сразу за ссылкой. Дается код объекта и объяснение как идеи кода, так и конкретной реализации.

14 Это важно знать -- сообщается дополнительная информация об особенностях взаимодействия HTML и javascript. Эти сведения можно не найти в справочниках, но их полезно знать. Рассмотрены следующие вопросы: (1) выделение текста внутри параграфа (2) определение браузера Экплорер в коде HTML (3) определение размера картинок (4) как работают гиперссылки (5) изменение контента и клавиатура.

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

1 ВВЕДЕНИЕ -- Эту статью я, в основном, пишу для себя, как ни странно это звучит. Я просто хочу собрать для себя вместе всю ту информацию, которую собираюсь вычитывать в разных источниках. Но писать в записную книжку скучно и я отформатировал статью. Я надеюсь, что кое-кому она тоже будет полезна. Сразу оговорюсь, я не профессионал в Javascript программировании и многое не знаю, статья адресована любителям, кто хочет сам написать себе сайт с рекламой своей основной работы или по другому поводу. В статье будут рассмотрены методы создания (форматирования, программирования) сайтов. Сам я вообще не программист, а физик-теоретик, сайто-писание - это просто интересно, хотя как знать, для работы тоже полезно уметь писать документы в разных техниках. Обо мне можно посмотреть на моем сайте [1]. Тема сайто-писания не новая, и в интернете можно найти очень много книг и статей об этом. Я не буду систематически их переписывать, мне это не интересно, поэтому здесь будет дана только часть информации для разгона, остальное читатель дополнит по другим источникам. Но для особенно понятливых информации достаточно и она компактно написана, так что после прочтения можно сразу попробовать написать сайт.

Как известно, для создания сайтов существует язык HTML, который дополнен системой оформления CSS, более развитым языком программирования Javascript, и, наконец, возможностью полноценного программирования на языке Java в виде аплетов. Про язык Java я уже написал относительно небольшую статью [2], здесь я сосредоточусь только на первых трех инструментах, то есть HTML, CSS и Javascript. В связи с большой легкостью менять версии статьи в интернете я буду указывать текущую версию книги датой ее последнего обновления, так как процесс ее написания может продолжаться и может никогда не кончиться. В каком-то смысле книгу можно рассматривать как блог, в котором все время появляются новые темы. Только сделано все одним файлом, но для современных компьютеров обработка больших текстовых файлов не представляет проблемы.

В связи с быстрым развитием компьютерной техники языки HTML, CSS и Javascript все время модернизируются и существует много вариантов программирования сайтов. Бедные браузеры, то есть программы, которые все это исполняют, вынуждены выпускать все более новые версии, чтобы в дополнение к старым исполнять и новые методы. Увы, не у всех это получается с одинаковым успехом. Особая позиция Майкрософт создает проблемы. Я сам учил HTML и Javascript в 1998 году и тоже, в основном, усвоил старую систему. И большинство учебников эту старую систему и описывают. Но в этой книге, однако, я буду стараться рассмотреть как раз относительно новые подходы. Чтобы было понятно, что я имею в виду, я опишу свое понимание этого вопроса. Старая техника (без CSS) имела мало средств для форматирования текста, в основном все параметры форматирования задавались по умолчанию и браузеры даже могли менять эти параметры через свои меню. Самым форматируемым элементом были таблицы, и часто приходилось использовать таблицы даже для написания одного слова. Условно такую технику можно назвать табличной. С помощью таблиц можно было достаточно разнообразно форматировать текст, просто это по логике вещей выглядело криво. Альтернативный подход к форматированию был разработан с использованием каскадных таблиц стилей (CSS). Но такой подход казался избыточным.

Однако, при создании динамичных сайтов с использованием языка программирования Javascript именно подход к программированию с использованием CSS оказался наиболее удобным, так как Javascript способен изменять значение любых параметров форматирования простым и прямым способом. С другой стороны, в HTML появились новые теги <div> и <span>, которые исходно вообще не имеют параметров форматирования. Их основным параметром является идентификационный номер id, ну и можно использовать CSS непосредственно через параметр style. Они описывают области на сайте, все форматирование которых выполняется через стили, то есть CSS. В результате можно почти забыть все старые приемы и делать сайт с использованием не таблиц, то есть тега <table>, а тегов <div> и <span>. При этом становится очень просто подключать таблицы стилей CSS и язык Javascript. Любопытным моментом новой техники является возможность наложения областей друг на друга и манипуляций с прозрачностью. Описаний методов создания сайтов в таком стиле в интернете не так уж много. А многие примеры делаются очень сложно и с использование внешних библиотек (jquery, например), хотя реально все намного проще. И это наиболее простой, прямой и последовательный стиль создания динамичных сайтов. Вот про это я и хочу записать, как раз то, что сам недавно узнал и придумал. То есть про то, как создавать анимированные фото-шоу, как делать фреймы без фреймов и многое другое.

Я хочу дать несколько советов тем, кто соберется читать эту книгу. Разумно параллельно с чтением этой книги открывать справочники по тегам HTML, параметрам CSS и операторам Javascript. Существует очень много сайтов, где все это написано. Для тех, кто знает английский язык, я рекомендую пользоваться материалами сайта W3C (WWW Consortium) [3]. На этом сайте разрабатываются стандарты языков, которые являются рекомендациями для браузеров. Правда, как я уже сказал, браузер Internet Explorer не всегда выполняет рекомендации W3C, но это известная проблема. Об этом я буду писать. Но иногда можно поступать и проще - просто набирайте неизвестное слово в строке поиска Яндекса [4] и вам сразу дадут кучу адресов сайтов, где можно прочитать ответ на вопрос.

Сразу же хочу сказать о специфике использования языка Javascript. Несмотря на то, что это не совсем полный язык программирования, он достаточно развит и с его помощью можно делать много разнообразных программ, работающих в интернете, а также разного рода динамичные эффекты. Если вы правильно напишете код, то все это будет замечательно работать на вашем компьютере. Но проблемы могут возникнуть при копировании файла на сервер. Так, например, в редакторах социальных сетей типа Яндекс-фотки разрешают использовать язык HTML, но запрещают использовать Javascript. Причину я точно не знаю, но знаю, что сами разработчики сети любят использовать этот языке и ваши программы могут вступить в конфликт с программами сервиса и не будут работать. Другая проблема - бесплатные серверы, дающие возможность размещать сайты. Хотя в них нет запрета на Javascript, но они могут произвольным образом добавлять на ваш сайт рекламу, которая тоже пишется с использованием Javascript. При этом добавленный код может конфликтовать с вашим кодом и сайт, прекрасно работающий на вашем компьютере перестает работать на сервере. Самое интересное, что никогда не знаешь заранее какой код будет работать, а какой нет. Бывает, что очень сложный код работает нормально, а совсем простой код не работает.

Все это надо иметь в виду при разработке сайта. Какие серверы и каким образом будут размещать ваши файлы я не знаю, но я уже имел много проблем с сервером Яндекса. Яндекс добавляет в каждый файл при закачке его на сервер свой код, в котором есть ссылка на js-файл. И как потом будет работать ваш js код даже богу не известно. А вот на Юкозе вроде бы ситуация более благополучная. Там необходимо использовать CMS (content management system), то есть встроенные средства разработки сайта, но если закачать файл в готовом виде, то с ним они ничего не делают и он нормально работает. Поэтому при разработке сайта с использованием языка Javascript приходится думать о таких проблемах.

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

2 ОСНОВЫ HTML -- В этой главе я кратко объясню как выглядит структура документа, который показывает сайт в интернете. Я не буду перечислять все теги HTML, только главные, без которых не может обойтись ни один сайт. Почти все теги имеют вид скобок, то есть сначала открывающая скобка, потом закрывающая скобка. Скобки имеют имена и дополнительно открывающая скобка может задавать значения параметров. В литературе параметры тегов принято называть атрибутами, но я не буду придерживаться этой терминологии. Большей частью теги представляют собой команды создания объектов на странице, а атрибуты задают параметры этих объектов. Закрывающая скобка имеет только имя, перед которым ставится знак деления. Самый внешний тег <html>весь сайт</html>. Внутри него есть две части: <head>инфо часть</head>, а также <body>часть показа</body>. Первая часть содержит информацию для браузера общего характера, вторая часть содержит объекты, которые реально показываются на сайте.

В первой части важным тегом является <title>заголовок</title>. Он задает заголовок окна браузера, который будет виден в титульной строке окна. Кроме того - это главный источник для поисковых программ при поиске сайта по словам. Поэтому не стоит пренебрегать заголовком. Он должен быть информативным и содержать ключевые слова сайта. Дополнительно в отдельной строке нужно задать кодировку русских букв. Эта строка является стандартной, в ней меняется только значение параметра charset, итак

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

В этой же части нужно разместить тег описания стилей <style type="text/css">стили CSS</style>, который задает параметры форматирования разных тегов, различая их по именам, по значению параметра id или по значению параметра class. Эту информацию браузер должен получить до того, как он начнет показывать объекты страницы. Задавая здесь нужные вам значения параметров, вы можете существенно изменить стиль представления вашего документа. Но естественно, что все параметры имеют какие-то значения по умолчанию. Если вы их не задаете, значит они будут равны исходным значениям. Вместо явного указания стилей содержимое между скобками тега можно записать в отдельном файле с расширением css, а указание на файл делается следующим образом

<link media="all" rel="stylesheet" type="text/css" href="name.css" />

где вместо name можно поставить любое имя файла, точнее то, в котором находится ваш css код. Вместо имени файла на компьютере можно поставить URL адрес файла в интернете и файл будет прочитан даже с другого сервера. Как в стилевой css файл, так и в тег style можно импортировать содержание другого стилевого css файла командой @import url("name.css");, где name опять имя файла. Оно может указывать на файл в той же папке, что и htm файл, или во внутренней папке. После аргумента url через пробел можно также указать тип носителя, то есть куда предполагается вывод. Возможные варианты: print или screen или tv или all. Последнее значение используется по умолчанию. Есть и другие значения, но это уже редко нужно. В теге style можно тоже указать тип носителя в явном виде. В этом случае синтаксис несколько меняется. Нужно писать @media all { }, в фигурных скобках указывать все стили обычным образом. Параметр media в теге link имеет те же значения, что и указанные выше. При этом значение all можно не указывать.

Наконец, в этой же части можно определить все функции и переменные языка Javascript внутри тега <script type="text/javascript">код на языке javascript</script>. Что касается функций, то они могут быть все определены здесь. А вот некоторые переменные, связанные с объектами сайта, и запуск функций уже выполняется внутри тега body, где это делается тоже внутри данного тега. Все параметры форматирования и все операторы языка javascript надо учить отдельно и это все подробно описано. Поэтому я буду считать, что читатель либо это знает, либо узнает из других источников. Моя задача состоит в том, чтобы обсудить идеи программирования, которые как раз являются элементом творчества каждого сайто-писателя. Еще одно важное замечание. Оно состоит в том, что javascript код можно записать в отдельном файле для удобства чтения html кода. Тогда в теге просто указывается ссылка на этот файл и все. Выглядит это так

<script type="text/javascript" src="name.js"></script>

где вместо name можно поставить любое имя файла, точнее то, в котором находится ваш javascript код. Хотя в данном случае между скобками ничего не ставится, но закрывающая скобка все равно необходима для соблюдения синтаксиса.

Во второй части, то есть внутри тега body, описывается конструкция самого сайта, то есть его объекты. Я отмечу только то, что сам тег body имеет несколько параметров, которые можно сразу определить, не используя CSS. Дело в том, что этот тег встречается в документе только один раз, так что для него старая система форматирования вполне подходит. Он имеет два основных параметра text=#660000 и bgcolor=#f0ffff, которые задают базовые цвета текста и фона на документе. Цвета можно задавать двумя 16-тиричными числами в диапазоне от 0 (00) до 255 (ff), три числа подряд для яркости красного, зеленого и синего и символ # впереди для указания единиц измерения, этот символ как раз и указывает на 16-тиричную систему. Кроме этого, можно указать еще три параметра: vlink=#005080 - задает цвет ссылки, которая смотрелась давно, link=#008050 - задает цвет ссылки, которая еще не смотрелась, и alink=#005080 задает цвет ссылки, которая смотрелась последней. Иногда в качестве фона сайта используется картинка, но это плохой стиль и я его даже не буду обсуждать, хотя я и сам грешил делать такие сайты. На самом деле цвет конкретного текста будет задаваться параметрами того тега, в который этот текст помещен. Цвет текста в теге body используется только для тех текстов, которые пишутся без дополнительного форматирования. В этом проявляется избыточность системы программирования, но это стандартная ситуация.

Главными объектами сайта являются: теги заголовков, например <h2>заголовок</h2>, при этом цифру 2 можно заменить на 1, 3, 4, 5, тег области <div>область</div>, тег параграфа <p>параграф</p> и тег окончания строки <br>. Последний тег фактически является символом, а не контейнером, и он не имеет закрывающей скобки. По правилам XHTML его надо писать так <br />, но браузер поймет оба написания. Язык XHTML более строгий, чем HTML, и он накладывает определенные ограничения на правила написания кода. Но я пока буду обсуждать только HTML, так как иногда это проще. Первоначально 5 типов заголовков было введено в язык в те времена, когда форматирование было автоматическим. Теперь, используя CSS, можно определить любой тег заголовка по своему вкусу. Я сам обычно использую для заголовков <h2>, но это дело вкуса каждого.

Для написания кода программ в их исходном, то есть неформатированном виде, да еще в маленьком окне с линейкой прокрутки, полезно использовать тег <textarea>текст</textarea>. Основное назначение этого тега - задать редактор для ввода текста в форме, с последующим использованием введенного текста. Но если запретить редактирование, то он просто показывает исходный текст. Все параметры форматирования этих тегов можно задать либо в теге <style>, либо в виде текстовой строки значения параметра style. Cтоит еще указать на тег <img src="ссылка" />. Этот тег указывает на то, что на сайт надо поставить картинку, которая размещена в файле, по URL адресу в интернете, который задает параметр src. Картинка находится за пределами данного файла и этот тег как бы ничего не форматирует, поэтому он не имеет закрывающей скобки. Если в нем больше ничего не указано, то по умолчанию картинка ставится на место следующего символа в тексте. Если же указан параметр align="left" или align="right", то картинка ставится слева или справа внутри текущего параграфа таким образом, что текст параграфа ее обтекает. Если еще дополнительно указать hspace="10", то между картинкой и текстом будет пустое пространство размером 10 пикселей. Разумеется цифру можно поменять на любую другую. Можно еще указать align="center" и тогда картинка будет размещена в центре текста, но это плохой стиль и его лучше не использовать.

Наконец, при использовании функций языка javascript может понадобиться тег <button onclick="js-функция">название</button>. Этот тег описывает объект в виде кнопки, при клике на которую запускается функция языка javascript. Вообще-то кнопки также используются внутри тега формы для диалога с пользователем. Но данный тег можно использовать и без формы. Он удобен тем, что вместо названия кнопки можно поместить не только текст, но и комбинацию текстов и картинок. Впрочем формы можно использовать не только для диалога с пользователем, но и для показа текстов. Кроме тега textarea можно еще использовать следующий код

<input id="tt" type="text" size=130 value="" />

Этот код задает строку ввода определенного размера с нулевым значением. Обычно он ставится в объект формы для отправки результатов на сервер, но если вы не можете написать на сервере обработчик таких сообщений, то остается только манипулировать параметром value в функциях javascript кода. В частности, в примере выше задан пустой текст в окне, но значение (value) можно поменять динамически в процессе работы сайта.

Весьма полезным и часто используемым является тег якора или гиперссылки. В простейшем случае он имеет вид <a href="ссылка на файл">текст ссылки</a>. В этом случае текст ссылки выделяется цветом, как я описал выше и подчеркивается. Но это лишь тогда, когда не указаны параметры CSS для этого тега. В противном случае все можно изменить. При клике на такую ссылку в окне появляется содержимое нового файла, а старое содержимое уходит в историю. Вернуться к нему можно по кнопке навигации браузера. Если необходимо открыть содержимое файла ссылки в новом окне, то можно добавить к параметру href еще параметр target="_blank". Если же уже открыто много окон, они имеют имена и мы хотим показать ссылку в каком либо из этих окон, то вместо _blank нужно указать имя этого окна. Есть еще вариант. Можно указать на конкретное место внутри данного документа и гиперссылка сделает переход на новое место данного сайта. Для этого ссылка на место должна иметь вид #метка. А метка задается тем же тегом якоря, в котором надо поставить дополнительный параметр name="метка". Более сложные режимы будут рассмотрены позднее.

Есть еще очень много тегов html, использование которых может пригодиться в том или в другом случае. Как я уже писал, справочники ищем в интернете. Для облегчения поиска запомните имя автора Влад Мержевич, который пишет хорошие справочники для сайто-писателей. Достаточно набрать это имя в строке поиска Яндекса и вам дадут много адресов сайтов, где можно бесплатно скачать его книги. Я отмечу только еще один тег <span>любой текст</span>. Этот тег просто выделает любую часть текста и не имеет параметров форматирования. Но для него можно определить стиль CSS отображения выделенного текста и даже не один если использовать параметр class.

3 ОСНОВЫ CSS -- В этой главе кратко дается общее представление о работе CSS. Таблица стилей имеет очень много параметров, описывающих все элементы показа любого объекта. Все параметры я перечислять не стану, есть справочники. Я опишу синтаксис. Есть несколько режимов указания параметров форматирования. Первый режим - это использование параметра style="инструкции CSS" в любом теге HTML. Такие параметры действуют только на данный тег и не действуют за пределами этого тега. Это иногда удобно, но в некоторых случаях использование параметра style="инструкции CSS" считается плохим тоном. Другой способ - это указывать все параметры форматирования внутри тега <style type="text/css">описание стилей CSS</style>, как я уже писал в предыдущей главе. Если нужно указать параметры CSS только для одного тега, то используется идентификационный код, который задается параметром id="код". Код должен быть уникальным для каждого тега и два разных тега не могут иметь один и тот же код. Соответсвенно в теге style с новой строки пишется #код{параметры CSS} и это является альтернативой задания параметров CSS только для одного тега.

Но параметры CSS можно задавать для всех тегов с определенным именем. Например, если необходимо задать параметры для тега textarea, то в теге style с новой строки просто пишем textarea{параметры CSS}. И указанные параметры будут действовать для всех тегов textarea в документе. Очевидно меняя название textarea на название любого другого тега можно задать его форматирование. Но иногда возникает ситуация, когда часть тегов необходимо форматировать одним способом, а другую часть - другим, но использование параметра id нежелательно. Для этого используется параметр class="код". Этот параметр способен метить не один тег, а целый класс тегов, у которых один и тот же код. Для этого параметра такая ситуация возможна. Соответсвенно в теге style с новой строки надо написать textarea.код{параметры CSS} и тогда форматирование будет выполняться только для тех тегов textarea, у которых код параметра class="код" совпадает с кодом данного тега в теге style. Более того, параметр класс можно использовать вообще без указания тега, то есть вот так .код{параметры CSS} (точка перед код) и тогда форматирование будет выполняться для всех тегов, у которых код параметра class="код" совпадает с кодом в теге style. Если одни и те же параметры надо задать для нескольких объектов: тегов, классов и так далее, то все их можно перечислить через запятую перед фигурными скобками.

Вообще говоря, первоначально теги HTML были придуманы как основные элементы текста с заголовками, фасонным оформлением и с картинками. Каждый элемент имел свой уникальный смысл. Но возможность задать параметры форматирования для каждого тега произвольным образом все исказила. Сейчас теги HTML являются как бы контейнерами текста, но их смысл уже слабо связан с названием. Тем не менее, стоит придерживаться первоначальной идеи и форматировать теги в соответствии с их смыслом. Так тег <p>текст</p> имеет смысл параграфа текста. Текст внутри него выводится с новой строки, с небольшим отступом вначале и заливает определенную ширину колонки. Вот как сформатированы параграфы с данном документе

p.com{text-align:justify; color:black; font:normal 14px sans-serif; margin:1ex 1ex;}

Эта строка стоит внутри тега style. Она означает, что форматируется тег <p> с кодом класса class="com". Как мы видим, параметры форматирования отделяются от значения знаком двоеточия, а не равенства. Надо быть осторожным и не делать ошибок. Слева от двоеточия стоит имя параметра, справа - значение, которое заканчивается знаком точки с запятой.

Я поясню что конкретно задано в этой строке. Параметр text-align задает равнение текста. Этот параметр может принимать 4 значения (left|right|center|justify). Предполагается что ширина колонки текста известна. Тогда эти значения означают, что текст будет выравнен по левому краю, по правому краю, по центру и по обоим краям одновременно. Следующий параметр color очевиден. Он задает цвет текста. Цвет можно задавать предопределенными словами: black, white, red, green, blue, gray, silver, orange, yellow, olive, purple, fuchsia, lime, navy, aqua, teal. Что они означают можно проверить эмпирическим путем. Кроме того, как я уже отмечал их можно задавать комбинацией красного, зеленого и синего в 16-тиричном коде в диапазоне 0-15 или 0-255, например #fff или #ffffff (это белый). А можно в десятичном коде в виде rgb(255,0,0) (это красный). Есть и другие способы, но этих достаточно. Кроме цвета текста можно еще задать цвет фона конкретно для параграфа параметром background-color, который имеет очень много разных значений, есть еще background-image. В нашей строке эти параметры не определяются, то есть задаются их значения по умолчанию.

Следующий важный параметр font, то есть шрифт текста. У шрифта очень много свойств, которые можно задавать по отдельности разными параметрами, но параметр font задает три главные свойства вместе. В нашем случае они заданы с помощью трех значений разделенных знаком пробела. Первое значение в списке определяет толщину (font-weight) шрифта, она имеет значения: (normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit). Это означает норма, полужирный, жирный, тонкий, то же самое числами, последнее значение означает наследование, но я им еще не пользовался. Cмысл такой, так же точно, как во внешнем контейнере. Второй параметр означает размер (font-size) текста, его можно задавать в разных единицах, указание которых обязательно. Например px означает пиксели экрана, pt означает типографские точки 0.353.мм, есть и другие единицы. Вместе с этим параметром через знак деления можно задавать высоту строки, например, 14px/18px, если не задано используется предопределенное значение (по умолчанию). Наконец, третий параметр задает фасон шрифта (font-family). Можно указывать конкретное имя шрифта из тех, что есть на компьютере. Но интернет сайты работают на разных компьютерах и в разных операционных системах. Может оказаться, что данное имя шрифта есть на одном компьютере, но его нет на другом. Поэтому удобно задавать логические имена шрифтов, которых нет ни на одном компьютере, но которые имеют какие-то свойства. И браузер сам выбирает шрифт из имеющихся на компьютере, который ближе всего удовлетворяет этим свойствам. Логических шрифтов на данный момент определено пять, вот они: (serif|sans-serif|cursive|fantasy|monospace). Они по своим свойствам примерно соответсвуют известным шрифтам: Times, Helvetica, Zapf-Chancery, Western, Courier. Лично я в этом документе использую всего два первых. Кроме указанных параметров можно задавать еще стиль (font-style), он может иметь значения normal|italic|oblique|inherit), то есть прямой, наклонный двух видов и снова наследование. Есть еще и другие параметры, их смотрим в справочниках.

В самом конце определены значения еще 4-х параметров: margin-top, margin-right, margin-bottom и margin-left, которые задают внешние поля для объекта, на которые он отстоит от соседних объектов или краев внешнего контейнера, в который он вписывается. Ширина и высота колонки может быть задана, например, шириной и высотой области в теге <div>. Можно указать значение каждого параметра по отдельности, но есть сокращенная форма, в которой используется только параметр margin и несколько значений. Если указано одно значение, то это top, а все остальные тоже ему равны. Если два, как в нашем случае, то это top и right. Соответственно, bottom = top, а left = right. Если надо задать внутренние поля, то вместо margin используем слово padding. Есть и много других параметров, но указанные являются основными при форматировании текста в параграфе. Полезно знать, что параметры форматирования являются общими для всех тегов и точно такие же параметры, но с другими значениями, можно использовать в других тегах. Вот, например, тег <tt> по своему исходному смыслу означает фасон пишущей машинки. Но если он используется в параграфе, для которого задан нестандартный размер, то его тоже надо определить, иначе по умолчанию его размер может оказаться очень большим или очень маленьким. Так как по своему смыслу у этого тега мало свойств, то достаточно указать только шрифт, например, так

tt{font: normal 14px monospace;}

Даже если здесь не указан цвет, он все равно будет черным, проблема может возникнуть только с размером, вот его и надо указать. Можно указать характеристики шрифта и для других тегов типа <h2> или <i>. Очевидно, что чем сложнее объект, тем больше у него свойств и все их можно указать, а можно указать лишь часть используя для остальным значения по умолчанию.

Очевидно самым интересным объектом является тег <div>, который задает свойства области. У него свои специфические параметры, такие как position, который определяет правило расположения области относительно того контейнера (внешней области), в котором он находится. Этот параметр может иметь следующие значения (static|relative|absolute|fixed|inherit). Первое значение самое простое и означает, что область будет помещена в свою очередь, то есть сразу за предыдущим объектом и никаких параметров больше не надо. Второе значение означает почти то же самое, но дополнительно используются значения параметров left и top, задающие смещение левого-верхнего края области относительно ее позиции в очереди. Третье значение тоже использует координаты смещения, но относительно левого верхнего края того контейнера, в котором находится область. Если она находится в теге <body>, то смещение будет отсчитано от края окна сайта, а если в другом теге <div>, то от края области, задаваемой этим тегом. Остальные два значения я не использовал, они редко кому нужны. Область также может иметь ширину width и высоту height, а позицию вместо параметров left и top можно задавать параметрами right и bottom, но это уже на большого любителя. Я так не делаю. Еще для области необходимо задать форму показа параметром display, который может иметь значения (none|block|inline|list-item). Среди этих значений наиболее интересное block, оно задает жесткие рамки области. При этом важно знать как показывать текст, который вылезает за эти рамки. Для этого есть параметр overflow, принимающий значения (visible|hidden| scroll|auto|inherit). Очевидно первое значение означает, что текст будет виден, второе - что не будет виден, третье сделает линейки прокрутки, последнее можно проверить эмпирически.

Интересно, что если использовать position:"absolute", то можно указать две или несколько областей, которые будут находиться в одном и том же месте. Тогда общий принцип такой, последняя область закрывает предыдущую. Но это в стандартном случае. А если использовать такой параметр, как прозрачность opacity, то можно поменять видность областей и сделать видной как раз нижнюю область. Более того, можно смешивать видность различных областей в разных пропорциях. Важно понимать, что если область задана как блок и имеет размеры, а позиция области относительная (relative), то для области все равно будет выделено место, даже если внутри ничего нет. Это можно использовать для вставки на сайт пустого места. А в теге span задание display:"block" запрещает переносы строк. Раньше для этого использовался тег nobr, но сейчас он считается устаревшим и не рекомендуется. Можно также указать фасон границы области через параметр border. Фасон описывается очень большим числом параметров, но можно указать основные в сокращенной форме, например так border:2px ridge gold;. Здесь указаны три параметра: толщина рамки (border-width), стиль рамки (border-style) и цвет (border-color). Все стороны рамки будут одинаковыми. Но можно задать параметры для каждой стороны рамки по отдельности и есть еще другие параметры. Более детально смотрим в справочниках.

Пожалуй уже этих знаний достаточно, чтобы понять общий принцип, как используются стили. Полную информацию о всех параметрах форматирования смотрите в ссылке [3] или в других источниках. Есть справочники и на русском языке. Пока что мы познокомились со статическим описанием стилей, то есть раз и навсегда. Но можно вообще не описывать стили указанным образом, а все их определить, используя язык Javascript, который позволяет задавать стили не только в самом начале, но и в ответ на запрос читателя или просто по времени, по таймеру. Об этом - в следующей главе.

4 ОСНОВЫ Javascript -- В этой главе тоже кратко дается общее представление о языке Javascript. Как и в любой хорошей сказке у нас получается "чем дальше, тем страшней". Чтобы не бояться полезно познакомиться с историей развития интернета. Как и все на свете, первые авторы интернета ставили перед собой очень скромные задачи: обеспечить быстрый обмен данными между людьми по проводам и используя компьютер. Поэтому первые сервисы представляли собой FTP, то есть передачу данных, а конкретно - файлов, и TELNET, то есть возможность работать на удаленном компьютере как на своем. Фактически вторая функция обеспечивала людей возможностью работать на своем рабочем компьютере, находясь далеко от работы и используя чужой компьютер в виде монитора и клавиатуры. Это и сейчас есть. Потом появилась электронная почта, которая отличалась от FTP только тем, что имела более развитый сервис, похожий на обычную почту. Это тоже сейчас есть. Но после почты захотелось сделать и газету, то есть показывать информацию в форматированном виде. Так появились сервера и так появился HTML и браузеры. Стало возможно читать газеты прямо на экране. И не только газеты, но и книги, а также музыку и кино. Так появился интернет в современном виде. Появились сайты и обмен данными стал идти не конкретно: ты мне - я тебе, а по принципу стены. Вешаем листовку на стену и все, кому надо - читают.

Все были в восторге. Одновременно электроника проникала во все сферы жизни, появилось много приборов, которые управлялись с пультов, имели какие-то программы и могли работать автоматически по этим программам. Программы писались на разных языках программирования, которых было много, и часто трудно было разобраться в этом лесу. Спрос рождает предложение. Нашлись люди, которые задумались об универсальном языке программирования, который мог бы обеспечить работу своих программ на всех приборах сразу. Такой язык был придуман и назван Java. Так как этот язык предполагал использование не компилятора (программы перевода в конкретный код конкретного прибора), а интерпретатора (программы, исполняющей код непосредственно, то есть без перевода), то принцип был простой. Пишем код на универсальном языке на любом приборе. И этот код может работать на любом другом приборе без всяких изменений. Меняется не код, а интерпретатор. На самом деле все немного сложнее, и Java первоначально компилируется в байт-код, а в процессе работы частично компилируется в код компьютера, но это сути не меняет. В погоне за полным охватом всех приборов авторы Java обратили свой взор и на развивающийся интернет. И они приспособили язык таким образом. чтобы он мог работать в интернете. При этом предполагалось, что браузеры будут исполнять этот код точно так же, как HTML и CSS. Но начались проблемы. Создатели браузеров (а конкретно Интернет Эксплорер), не поддержали авторов Java, а стали тянуть одеяло на себя. Они создали аналог Java для своей системы, но тогда потерялась кросс-платформенность. Кончилось это тем, что стандартно в браузерах интерпретатор Java не стоит, и для использования Java его разработчики сами создали интерпретатор JRE (java runtime environment) для всех браузеров и всех операционных систем и эту JRE надо скачивать и устанавливать дополнительно. Но это не так сложно и все ОК. Все работает и замечательно работает.

Тем не менее, разработчики Java совместно с разработчиками браузера Netscape договорились о создании нового, несколько более упрощенного языка программирования, который бы интерпретировался только браузерами и не мог работать никак по другому. Этот язык имеет четкую направленность на создание сайтов, только на интернет и он прошел. Все браузеры автоматически являются интерпретаторами этого языка, который был назван Javascript. Этот язык в чем-то очень похож на Java, в чем-то совсем не похож. Но даже его название говорит, что это скрипт, то есть инструкции к исполнению, очень похожий на Java. Начать с того, что этот язык совсем не похож на старые языки, созданные для вычислений, например, фортран. Он объектно-ориентированный (в HTML ведь объекты). Более того, он не самостоятельный. Он является дополнением и расширением HTML, без HTML на нем ничего нельзя сделать. Точнее код писать можно, но нет средств ввода и вывода информации. Различают три части языка: ядро, ВОМ и DOM. Вторая и третья части описывают взаимодействие языка с окном и документом браузера. Главное назначение DOM части с точки зрения сайто-писания - это манипулировать со свойствами объектов HTML посредством изменения параметров CSS.

С историей покончили. Надо сразу отметить, что Javascript - это язык программирования, более приближенный к обычному программированию. На нем можно вычислять все, что угодно. В нем есть переменные, принимающие значения, причем не только численные, но любые. В нем есть объекты, имеющие свойства. Главное, что в нем есть логика, то есть условия, есть циклы, то есть возможность много раз делать одно и то же, и есть массивы, то есть пронумерованные отряды элементов, которые как раз и работают в циклах. Чего в нем нет по сравнению с нормальными языками программирования, например, Java. В нем нет работы с файлами, и нет самостоятельных средств интерфейса (общения с пользователем). Для этого он использует объекты HTML, такие как формы, окна ввода, редакторы и так далее. Он может создать массив картинок и манипулировать ими в цикле или по условию. Может работать с текстовыми строками, ну и вычислять все, что ему необходимо. Он может сам открыть новое окно в браузере и наполнить его содержанием, которое он сам вычислит, то есть придумает. В 1998 году я даже написал программу, которая вычисляет значения функции и рисует график этой функции используя матрицу картинок, которую программа сама формирует. Но это было не очень разумно, просто графики тогда не было. В самое последнее время планируется тег HTML5 <canvas> [5], внутри которого Javascript способен создавать примитивные графические элементы типа линий и так далее. Хотя стандарт еще не принят, но все основные браузеры уже способны выполнять этот элемент. Я не буду систематически излагать основы Javascript. Об этом написаны толстые книги и есть руководства в интернете. Интересно, что основы Javascript DOM излагают обязательно вместе с HTML и CSS, так как без них он беспомощен.

Я буду поступать так. Рассказывать лишь то, что лично мне интересно, предполагая, что основы Javascript читатель сам узнает. По ходу изложения я что-то буду объяснять, однако все непонятные слова можно очень просто узнать в поиске Яндекса [4]. То есть вы читаете и если что-то не поняли, набираете слово в поиске Яндекса, получаете ответ и продолжаете дальше. Возможно есть любители систематического изучения предмета и всех его тонкостей, но это уже не любительский, а профессиональный подход. И если следовать логике таких людей, то вся жизнь уйдет на изучение, а сделать что-то конкретно просто не успеем. Я сам очень много всего сделал, но я не знаю всех тонкостей ни HTML, ни CSS, ни Javascript, как и других языков программирования, на которых работал. Даже свой собственный язык программирования ACL [6] я не помню наизусть, надо смотреть справочник. Всегда нужно видеть цель, конкретную задачу, и идти к ее реализации не озираясь по сторонам. Кто со мной не согласен, может дальше не читать.

Итак, что нам надо знать. Весь javascript код пишется внутри соответствующего тега, смотри главу о HTML. Часть кода можно написать внутри тега head, эта часть будет исполнена в самом начале, до формирования сайта. А в процессе формирования сайта, то есть в теге body можно еще много раз открывать тег языка Javascript и дописывать код. В первой части можно определить большинство переменных, которые определются словом var и имеют имена из букв и цифр. Можно задать этим переменным начальные значения по принципу переменная = значение;, можно определить массивы конструкцией типа imga = new Array();. Далее можно заполнять элементы массива значениями по принципу imga[0] = new Image();. Сразу отмечу отличия от более строгого языка, например, Java. В Javascript не обязательно декларировать переменные и объекты. Например, информацию о том, что imga - это массив, интерпретатор получает в момент объявления массива. Но при этом размерность массива не указывается. Формально она бесконечная и определяется максимальным номером определенного элемента. Индекс элементов массива начинается от нуля. Эта традиция идет от языка С, а потом языки Java и Javascript ее наследовали. Также заранее не известен тип элементов массива. Он определяется заданием каждого элемента. Так imga[0] - это картинка. А раз так, то этот объект по существу эквивалентен объекту HTML, задаваемому тегом <img src="адрес">. Но в Javascript свойства объекта задаются через точку, то есть надо писать imga[0].src = "адрес";. Так же, через точку, можно задать любое свойство любого объекта, которое в HTML задается через параметры.

Как и в Java элементами массива могут снова быть массивы, тогда они записываются в виде par[0][1], что надо читать как первый элемент массива, который является нулевым элементом массива par. В вычислительных языках типа фортрана многомерные массивы имеют вид матриц, в объектно ориентированных языках разные элементы массива могут быть массивами разной размерности. Здесь нет многомерных матриц, то есть они есть, но как частный случай более общей формы. Числовые массивы можно определять поэлементно через знак равенства, а можно таблицей значений в квадратных скобках, например вот так par[0] = [1000, 0, 0, 10, -640, -480, 30, 0];. Здесь нулевой элемент массива par является массивом из восьми элементов, а форма записи является одновременно и объявлением массива и его определением. Весь синтаксис циклов, условных выражений, булевой алгебры логических переменных полностью повторяет Java. Вот пример наиболее часто используемого цикла for(n=0; n < 5; n++){par[n]=2*n-1; i++;}. Здесь в начале цикла переменной n присваивается значение ноль, затем проверяется условие, заданное вторым выражением в круглых скобках, и, если оно выполняется, то выполняются все операторы внутри фигурныъ скобок, после этого переменная n увеливается на единицу, то есть выполняется третье выражение в круглых скобках, и снова проверяется условие и так далее. Вот пример условного выражения if(n < 5){n++;}else{n--;}. Здесь если выполняется условие, то выполняются все операторы в первых фигурных скобках, а если нет, то выполняются все операторы во вторых фигурных скобках. Вторая часть может и отсутствовать. Условия могут находиться внутри условий, циклы внутри циклов и структура кода может быть сколь угодно запутанной. Есть и много других конструкций, но эти - основные. Ну и самое главное - это функции. Функция определяет конкретную часть кода, которая выполняется при вызове функции. Эта часть кода тоже записывается в фигурных скобках. Функция может иметь имя и аргументы. Общая структура функции показана далее: function stopf(n){ if(n == 0){ona = false;} }. Здесь функция имеет имя stopf, аргумент n, тип которого выяснится при его использовании, и тело в фигурных скобках. А в теле в зависимости от условия выполняется задание значения логической переменной.

В Javascript, есть еще операторы создания и определения объектов, таких как window, document и другие. Можно делать также переменные - указатели на любой объект или любое свойство объекта, это очень удобно. Указатель можно определить также на любой параметр любого тега HTML, как и сам тег. Тег определяется конструкцией b0 = document.getElementById('b0');. При такой записи тег с параметром id="b0" становится указателем объекта Javascript с именем b0. Можно задать указатель на параметр тега, например, b0s = bo.style; или сразу b0s = document.getElementById('b0').style;. А раз мы получили указатель на параметр style объекта, то мы можем определить все параметры CSS для этого объекта. Но синтаксис немного другой, теперь знак двоеточия заменяется на знак равенства, например, b0s.position="absolute"; b0s.left=200;. По правилам XHTML все значения надо обязательно писать в кавычках. Но в HTML это не всегда обязательно, код работает и без кавычек. Теперь мы видим, что мы могли бы вообще не задавать тег style, а все параметры стиля для каждого тега определить в Javascript. Но правильно использовать оба канала. Javascript может не просто определить параметры CSS, но и переопределить их в процессе взаимодействия читателя с сайтом, а также просто по времени. Но на этом основы закончились. Конкретные приемы работы рассмотрены в других главах. В заключение хочу указать на один сайт [7], где можно получить исчерпывающую информацию о структуре Javascript.

5 ОСНОВЫ DHTML -- В этой главе тоже кратко дается общее представление о разработке динамичных сайтов, на которых информация изменяется во времени. Язык, на котором пишутся такие сайты получил название Dynamic HTML или DHTML. Следует различать два способа представления движущейся информации. Во первых, это могут быть встроенные проигрыватели видео, которые играют музыку и показывают кино. Технологии, на которых созданы такие проигрыватели, могут быть разными. Наибольшее распространие получили flash анимации на основе проигрывателя Adobe flash player. Закачивание в интернет видео-роликов и проигрывание их на сайтах стало одной из массовых функций социальных сетей. Частично в этом даже усмотрели компромисс в вопросе об авторских правах. Так простое скачивание видео на компьютер воспринимается как незаконное распространение. А если видео показывается на сайте онлайн, то это воспринимается как реклама (ознакомление) и поскольку копии у зрителя не остается, то и нет распространения. На самом деле, конечно, это все уловки и идет безкомпромиссная борьба между авторами и сайтами за деньги. Авторы хотят иметь больше доходов, а доход можно получить только в кинотеатрах. А создатели крупных сайтов хотят иметь больше посетителей и ради этого идут на все. Их доход прямо пропорционален числу посетителей и количеству рекламы на сайте. Здесь тоже есть своя динамика.

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

function move(){
 n++; if(что-то){pause = что-то;}
 все другие операторы функции, которые меняют параметры CSS, в том числе координаты,
 размеры и другие свойства областей div
 setTimeout("move()", pause);
}


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

Вообще говоря сам оператор setTimeout("move()", pause) ничего особенного из себя не представляет. Он просто вызывает любую функцию с отсрочкой по времени. Фокус в том, что он стоит в теле той самой функции, какую он вызывает, и это работает, то есть не считается ошибкой. Во многих языках программирования как раз такой код является ошибкой, потому что функция не может вызывать саму себя. А в Javascript может. Попутно замечу, что существует еще пара операторов

var intervalID = setInterval("move()", pause);
clearInterval(intervalID;


Здесь первый оператор требует запускать функцию периодически через равные интервалы времени pause в миллисекундах. Отменить такую работу позволяет второй оператор. Его, в частности, можно запустить по событию от читателя, например, по клику на кнопке. Интересно, что в первом случае, который я показал, формально отменить процесс вообще невозможно. Но можно изменить значение переменной pause и сделать его очень большим, либо поставить условие в тело функции, при невыполнении которого ничего не происходит, в том числе и оператор setTimeout("move()", pause) не запускается. Но это плохой стиль. Лучше делать так, что оператор запускается, но ничего не делает. Потому что в этом случае можно снова запустить процесс по кнопке. Выглядеть такой код может вот так:

function move(){
 if( ona ){n++; if(что-то){pause = что-то;}
  все другие операторы функции, которые меняют параметры CSS, в том числе координаты,
  размеры и другие свойства областей div
 } setTimeout("move()", pause);
}
function stopf(){ ona = false; }
function starf(){ ona = true; }


Исходно логическую переменную ona можно задать в любом состоянии. И сделать две кнопки, которые будут запускать две последние функции. Первая будет включать анимацию, вторая выключать. Название ona я выбрал потому что это начало слов on animation. Можно также ввести и другие логические переменные, которые будут крутить анимацию вперед или назад. Например, ввести переменную dir и вместо n++ записать:

if( dir ){n++;}else{n--;}
. . . .
function forwf(){ dir = true; }
function backf(){ dir = false; }


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

Ситуация с прозрачностью не такая простая и я хочу на ней остановиться подробнее. Сейчас на сайте W3C [2] рекомендуется к исполнению таблица стилей CSS 2.1, и в этой версии таблицы стилей параметра, изменяющего прозрачность объектов нет. Как говорят, он появится только в CSS 3, которая все еще в разработке. Но почти все браузеры уже давно выполняют эту рекомендацию CSS 3. То есть у любых объектов, в том числе у таких как div, img, есть параметр форматирования opacity, который может принимать значения от 0 (полностью прозрачная область) до 1 (полностью непрозрачная область). Таким образом, накладывая несколько областей друг на друга и делая все области прозрачными, кроме одной, можно менять содержимое области. Все это замечательно работает, кроме одной детали. Гиперссылки показываются во всех областях, но работают только в самой верхней, то есть той, которая была наложена последней. Однако для переходов между картинками с плавным изменением прозрачности гиперссылки не нужны. Можно также выделять какую-то светлую область на фоне всего остального, более темного. Вообще манипуляции с прозрачностью - очень сильный инструмент.

Но здесь есть сложность, которая состоит в том, что Майкрософт уже очень давно реализовала в своем браузере Internet Explorer не только прозрачность, но и градиент цвета и многое другое. Это было так давно, когда никаких стандартов не было вообще. К сожалению стандарты часто отстают и идут своим путем, не поддерживая инициативы Майкрософт. В результате в самом массовом браузере это не работает в таком виде. Но работает в другом виде. Вместо параметра opacity у него есть параметр filter а внутри него - свойство Alpha. Поэтому для Internet Explorer нужно просто по другому записать, чтобы получить тот же самый эффект. Но как определить - какой браузер работает. К сожалению и тут нет стандартов, но методы есть. Их много, я раньше использовал вот такой. Я уже писал раньше, что в Javascript для получения указателя на параметр style тега с нужным id можно записать так sty[0] = document.getElementById('b0').style;. Из этих указателей даже можно сделать массив. Но в Internet Explorer то же самое можно получить и другим способом, а именно sty[0] = document.all.b0.style;. Это намного изящнее, но опять не стало стандартом. Так вот, если в javascript сделать условие if( document.all ){...}, то все браузеры, кроме Internet Explorer выдадут значение false и только Internet Explorer выдаст значение true. Поэтому прозрачность можно задавать так. Это работает. Но последнее время в Javascript стало модным использовать логическую переменную с названием IE для отличия Экплорера от других браузеров. Если ее использовать, то можно записать так if( IE ){...} с тем же самым эффектом. Итак пишем

if( IE ){sty[0].filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+(op*100)+')';}
else{sty[0].opacity=op;}


где op - переменная, имеющая значение в интервале от 0 до 1. И все одинаково работает как в Экплорере, так и в других браузерах. Но переменную IE надо определить. Для этого разные люди используют разные способы, основанные на различиях в работе Экплорера и других браузеров. Повидимому самый короткий способ вот такой
var IE = !-[1,];.

6 КАЛЬКУЛЯТОР -- Итак, мы покончили с основами и переходим к рассмотрению конкретных примеров программирования сайтов с использованием всего арсенала средств. В качестве первого примера-иллюстрации возможностей Javascript производить математические расчеты я хочу показать и обсудить простую программу калькулятора, но не того примитивного, какие продают в канцелярских магазинах, а калькулятора, умеющего понимать математические выражения и функции в одной сложной записи. Сначала я просто покажу текст всей программы в окне текстового редактора. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. Ну и потом спасаете текст через меню редактора.

Первые теги достаточно очевидны. В теге <script> записана всего одна функция с именем calc и с аргументом form. Мы вернемся к анализу этой функции позже, а сначала обсудим что стоит дальше. Дальше в теге <h2> написан заголовок и затем вставлен тег <form>. Этот тег является контейнером, для размещения в нем различных объектов общения с пользователем, в частности окон ввода и кнопок. Эти объекты по старой системе описываются тегами <input> с различными значениями параметра type. Все объекты общения с пользователем с самого начала имели параметр name, который играет ту же самую роль, что и параметр id, то есть метит объекты. Если тегов <form>много, то они тоже могут иметь имена через параметр name, но в нашем случае такой тег всего один и задавать для него имя нет смысла. Теги объектов интерфейса могут быть размещены произвольным образом, в том числе и с привлечением таких тегов разметки, как таблицы. Таблица задается тегом <table> и состоит из строк и колонок. Строки являются более главными, а колонки находятся внутри строк. Строки задаются тегами <tr>, а колонки тегами <td>. Кроме них есть еще теги <th> для размещения заголовков. Как я уже писал во Введении, таблицы с самого начала были самым форматируемым объектом и форматировались они через большое число параметров, без использования CSS. В принципе теперь любой тег таблицы можно сформатировать и с помощью CSS, а можно и по старой системе.

Итак, в нашем случае таблица состоит из одной строки, одной колонки заголовка, и трех обычных колонок. В каждой обычной колонке находится один тег <input>, но крайние из них являются окнами ввода текста, а средний - кнопкой. И вот кнопка как раз при клике вызывает нашу функцию calc. Аргументом этой функции как раз является объект form, из которой она вызывается. А оператор функции задает значение параметра valueу окна ввода с именем res. Этому значению присваивается текст, который состоит из символа пробела и текстовой строки, которую формирует функция eval(). Это очень мощная функция языка Javascript. Интересно, что она отсутствует в языке Java, и там то же самое надо делать очень сложным кодом. Эта функция имеет своим аргументом код языка Javascript, который она выполняет и преобразует в число. Но это число автоматически преобразуется в строку текста, потому что оно складывается посредством символа плюс с текстовой строкой. А при сложении объектов разного типа в языке Javascript автоматически происходит преобразование типа второго слагаемого к типу первого слагаемого. Итак, значит параметру value у окна ввода с именем res присваивается текстовое представление числа, а значит это число моментально появится в окне ввода. А в процессе нахождения этого числа, то есть при выполнении кода, часть этого кода была взята из значения параметра value у окна ввода с именем expr.

Это значит, что если пользователь (читатель) сайта наберет в первом окне ввода какое-нибудь математическое выражение типа 25+46/(sin(45)+2), то это выражение будет вычислено и присвоено переменной с именем a. А одновременно оно появится во втором окне ввода как результат вычислений. Если теперь к выражению в левом окне прибавить a, то его текущее значение (уже не нулевое) тоже будет учтено при вычислении. Можно организовать несколько строк и присвоить значения нескольким переменным и они все будут участвовать в вычислениях. Возможно возникает вопрос, a зачем написано with (Math){ }. И на это есть ответ. Дело в том, что в Javascript, так же как и в Java стандартные функции типа синуса не могут существовать просто так. Они должны принадлежать какому либо объекту. И они принадлежат объекту Math. То есть правильно писать синус надо так Math.sin(). Так вот, чтобы этого не делать, существует конструкция, которая указывает объект функций в аргументе, а в теле уже можно писать эти функции в привычном нам виде.

Я надеюсь, что мне удалось продемонстрировать как просто и компактно Javascript делает достаточно сложные вычисления. В других языках программирования приходится писать довольно сложные программы, чтобы получить тот же самый результат. Описанный выше код, но в более сложном варианте уже 13 лет исправно работает в интернете на моих сайтах. Последнее время его можно увидеть по адресу [8]. Я просто поместил часть этого кода, то есть только теги script, h2 и form сразу за этим текстом и вот калькулятор работает в этой главе, вы это должны видеть. Поставьте курсов в левое окно ввода, наберите любое математическое выражение, потом кликните на кнопке со знаком равенства и ответ появится в правом окне. Прибавьте к выражению букву "a" и ответ удвоится. Такой калькулятор можно ставить на любой сайт и он будет работать всюду. Эмпирическим путем легко определить, что аргументы тригонометрических функций надо задавать в радианах.

Калькулятор

 a = 

Рассмотренный выше пример дает представление о том, как можно писать на Javascript программы, которые запрашивают у пользователя какую-то информацию, которую надо ввести в окна ввода, затем эту информацию перерабатывают и выдают ответ в другие окна ввода. Разные режимы переработки информации можно регулировать кнопками. Окна ввода и кнопки можно разместить произвольным образом, как используя таблицы, так и без них. В частности, так можно писать разные экспертные системы и даже базы данных. Но сложность в том, что базы данных содержат очень много упорядоченного текста и обычно размещаются в большие текстовые файлы. В качестве самого прогрессивного языка программирования баз данных все более рекомендуется XML, который по своей структуре очень похож на HTML и тоже содержит теги и параметры. Однако, Javascript не умеет работать с файлами совсем. Java может работать с файлами, но эту работу в Java аплетах блокируют. Тем не менее, читать файлы, пусть и в ограниченном режиме Java аплеты могут. А в Javascript проблема решается другим путем. Все данные в базах данных должны быть записаны в самом Javascript коде. Но этот код не обязательно весь должен находиться в htm файле. Его можно написать в js файле и указать в теге <script> на этот файл. В таком режиме данные в любом количестве могут быть использованы в специальных файлах, которые все должны иметь структуру Javascript кода и которые прицепляются на стадии загрузки сайта в браузер. В качестве примера такой программы рекомендую посмотреть мой сайт по адресу [9], эта программа тоже была написана более 10 лет назад. Ее код можно посмотреть обычным образом. А можно поставить курсор на ссылку, нажать правую кнопку мыши и выбрать в меню "Сохранить ссылку как" или "Save target as". Файл скачается на ваш компьютер и его можно открыть в любом текстовом редакторе.

7 ПРОКРУТКА -- Современные операционные системы являются оконными системами. Каждая задача забирает на экране монитора не всю площадь, а только часть и оформляется как окно. Окно может иметь стандартный или не стандартный вид, важно что за пределами окна задача не работает. Переключение между задачами реализуется, в частности, активацией окон, то есть переносом курсора из одного окна в другое. Вероятно это наиболее оптимальная форма и пока не видно для нее никакой альтернативы. Хотя как раз данная книга оформлена в альтернативном режиме, но об этом потом. Внутри окна находится разнообразная информация, представленная разными объектами, все вместе я буду называть модным английским словом "контент". Очень часто площадь контента не совпадает с площадью окна и тогда операционная система автоматически предлагает линейки прокрутки. По английски "scrolling", но это слово я как раз буду переводить, так как слово прокрутка уже давно все понимают. Прокрутка - это очень полезный инструмент, и для нетбуков приходится специально покупать мышь с колесиком, потому что тач-пад - это неудачное решение и, более того, в нем нет колесика, которое крутит контент.

Браузер тоже открывает окно и в нем тоже есть линейки прокрутки. А как сделать окно на сайте и так, чтобы контент в нем прокручивался автоматически. Это задача DHTML и она вполне решабельна. В этом разделе я покажу как программировать простые системы автоматической прокрутки. Но сначала, как всегда, немного истории. Одним из объектов HTML является тег <textarea>, который помещает на сайт окно с автоматической линейкой прокрутки, если текст (контент) вылезает за пределы окна. Но в данном случае контентом может быть только текст. Вы видели такой объект в предыдущей главе. В нем очень удобно показывать коды программ. На самом деле объект <textarea> - это элемент формы, а именно, текстовый редактор, и он дает возможность пользователю набрать любой текст, который затем может быть отправлен на сервер, который предоставил сайт, для обработки. Более сложным объектом является тег <marquee>, который позволяет прокручивать контент с постоянной скоростью. Он имеет много параметров, регулирующих процесс прокрутки контента. Однако, если посмотреть в таблицу тегов, рекомендуемых W3C [3], то там нет такого тега. Этот тег тоже является изобретением Майкрософт, который не стал стандартом языков HTML до версии 4.0. Первоначально этот тег работал только в Экплорере и не работал в других браузерах. Но постепенно другие браузеры тоже стали его исполнять, хотя это надо проверять в каждом конкретном случае отдельно. Вот я печатаю этот текст в редакторе Notepad2, который автоматически отмечает теги html другим цветом. Но данный тег он не признает. Я просто хочу сказать, что есть возможность прокручивать текст в окне и без Javascript. Но с использованием Javascript это можно делать намного более фасонно и разнообразно. Я сначала, как обычно, покажу самый простейший вариант кода, который иллюстрирует только принцип, идею. А использовать этот принцип можно с контентом любой степени сложности и варьировать параметры многими способами. Итак, сначала полный текст программы (код) в стандартной технике. Фактически это самостоятельный сайт.

Теперь обсудим код. Легко заметить, что он имеет почти такую же структуру, как и в предыдущей главе, но немного сложнее. В головной части описаны три Javascript функции, в теле созданы объекты, а затем снова стоит Javascript код, который определяет переменную, равную параметру style объекта с заданным значением параметра id, и затем запускает функцию move() в работу. Такой стиль программирования типичен для анимированных сайтов. Если переменная является ссылкой на объект, то сначала надо создать объект, а уже потом определять переменную-ссылку на этот объект. Хотя в самой функции эта переменная может использоваться и без определения. В этом тоже есть отличие Javascript от Java. В Java нельзя оперировать ни одной переменной, которая еще не определена. А в Javascript совсем не обязательно вообще определять переменные. Считается, что все переменные как-бы изначально определены, а более полное их определение происходит в момент присвоения им значений. По этой причине строка var pt,pts,ptma,ptmi,pause; вообще не обязательна и пишется в основном Java программистами по инерции, так как это обязательно в Java. Рассмотрим какие объекты у нас на сайте. У нас три объекта: две кнопки и область div, для которой задано относительное расположение, блоковая структура, нулевые координаты смещения, а также ширина и высота. За пределами области ее контент не виден, а по краям она имеет золотую рамку. Это стандартные параметры окна на сайте. Таких окон на сайте можно открыть много и они способны решать самостоятельные задачи, все точно так же, как в операционной системе. Можно варьировать размеры, рамку, расположение, но важно, что структура блоковая и за пределами области ничего не видно.

А внутри области задана картинка, размеры которой как раз больше области, поэтому она задана со сдвигом и видна только ее часть. Адрес этой картинки указывает на интернет, так что если компьютер не в сети, то ее не будет видно. Затем задана другая область, координаты которой уже заданы абсолютно, то есть относительно левого верхнего края области - ее контейнера, то есть нашего окна. Нулевые координаты означают, что левый верхний угол области совпадает с левым верхним углом ее окна, то есть внешнего тега div. Но у нас задано смещение на 50 пикселей по обоим координатам. Никаких других параметров не требуется, то есть эта область полностью определяется тем, что внутри нее. Ее размеры автоматически таковы, чтобы вместить весь контент, а рамки нет. Ну а внутри второй области div записан параграф текста со специфическими параметрами форматирования. Вот и все. Теперь подумаем как это работает. Сразу после загрузки сайта запускается функция move(). Но она ничего не делает, так как логическая переменная ona имеет ложное значение. Чтобы функция заработала, надо кликнуть кнопку [Start], которая вызовет функцию , а та изменит значение переменной на истинное. В этот момент функция начинает действовать. Она изменяет верхнюю координату области, точнее переменную, которая потом присваивается верхней координате области. Проверяет ее значение на соответствие максимальному и минимальному значениям, и если условия не выполняются, то знак шага изменения координаты меняется на противоположный. Оператор mc.top=pt фактически задает новую координату области с параметром id="mc";. В момент его выполнения координата области принимает новое значение, то есть область смещается, а вместе с ней и весь ее контент. Вот и все чудеса. Ну а следующую функцию setTimeout("move()", pause); я уже обсудил в главе "Основы DHTML". Это главная фишка всех анимаций на сайте. Движение можно снова остановить в любой момент кнопкой [Stop]. Итак, в отличие от тега <marquee>, мы не только реализовали периодическую прокрутку контента внутри окна, но и можем управлять этим процессом с помощью кнопок. Ну а теперь я просто ставлю код в файл и его работу можно проверить ниже.

Прокрутка


По диким степям Забайкалья
Где золото роют в горах
Бродяга судьбу проклиная
Тащился с сумой на плечах

Я надеюсь, что читатель со мной согласится, что ведь ничего сложного нет, очень простой код, очень простая арифметика и очень простая структура сайта. А возможности намного превышают возможности статического форматирования страницы. Теперь немного порассуждаем как можно модифицировать код. Во первых, можно увеличить размер шага движения, и сделать его равным вертикальному размеру окна, но делать всего один шаг при каждом клике на кнопке. Таким образом, в окне будет появляться все время новый кусок текста. Ну а это уже "book reader", электронная книга. С такой программой можно читать книги, перелистывая страницы по клику на кнопке. Кнопки могут задавать перескоки вперед и назад. А если вместо текста выставить картинки или фотографии одинакового вертикального размера в вертикальную таблицу, то можно перелистывать фотографии. Вертикальная таблица сама образуется если после каждой картинки поставить тег перевода на новую строку. Можно комбинировать картинки и текст. Можно делать переменный шаг таким образом, чтобы сначала показывать картинку, а потом приставлять к ней подпись. Или скажем загадывать загадки, а потом показывать отгадку. Короче, программирование - это искусство, точнее творчество, вам дают инструмент и каждый может запустить фантазию как этим инструментом воспользоваться. Более сложные примеры анимации я покажу позднее. Здесь же просто отмечу, что можно показать картинку птицы в полете и двигать картинку на небольшое расстояние в разные стороны или вверх вниз. И птица начнет летать. А если набрать огромное количество кадров и менять из мгновенно с интервалом 24 кадра в секунду, то и кино можно показывать. Правда это примитивный метод, так ведь и код примитивный, но совсем небольшой сюжет мультипликации потянет.

8 ПРОЗРАЧНОСТЬ -- Очень мощным средством оживления обьектов сайта является манипулирование с прозрачностью. Я уже немного писал об этом в конце главы про Основы DHTML. Я не буду повторять то, что там написано, и советую еще раз внимательно прочитать эту главу. Здесь же я покажу как это можно использовать для оживления сайта. С учетом того, что прозрачность задается по разному в стандартных браузерах и в Экплорере, этот параметр вообще удобно задавать только в коде Javascript. Более того, его могут иметь все объекты, не только div. Если манипулировать с картинками, то можно менять прозрачность картинок, но в более сложность случае лучше все объекты помещать в контейнеры div и менять прозрачность этих контейнеров. Однако в данной главе я рассмотрю очень простой случай плавного перехода от одной картинки к другой и поэтому буду менять прозрачность самих картинок. В этой главе я опять покажу очень простой пример, но его можно постепенно модифицировать, усложнять и комбинировать с другими примерами. Идея примера следующая. Размещаем две картинки в одном и том же месте, одну над другой. Но сразу делаем так, что нижняя картинка показывается, а верхняя прозрачная, как стекло. По кнопке постепенно меняем параметр прозрачности от 0 до 1, и аот уже верхняя картинка видна, а нижняя под ней, естественно, не видна, хотя она вовсе не прозрачная. А в процессе перехода видны обе в смешанном состоянии. Как обычно, я даю полный код сайта и потом его объясню.

Этот код чуть сложнее, чем предыдущий. Здесь в первом скрипте уже 4 функции. Первая функция имеет стандартное для меня название param() и ее назначение задать стартовые значения параметров. Как я уже говорил, параметр прозрачности проще всего сразу задавать Javascipt кодом, вот это и делается. Вторая функция опять стандартная, она обеспечивает движение или процесс, ну а последние две функции вызываются по кнопкам. Далее, на сайте у нас стандартное окно, а в нем две картинки. Файлы картинок находятся в интернете, поэтому для нормальной работы программы компьютер должен быть подключен в мировую сеть. Я просто взял две фотографии размером 640*480, но вертикальный размер окна всего 100, поэтому вертикальная позиция картинок задана так, чтобы в окно попала самая интересная часть. Ну а все, что за пределами окна не видно. Теги картинок имеют разные значения параметра id и по этим значениям формируется массив переменных-ссылок на параметр style этих картинок. В нашем примере картинок всего две и массив можно было бы не делать, я просто хотел показать как работают с массивом. Когда картинок много, то из них тоже делается массив и адресация картинок происходит несколько иначе. Ну и в конце запускается функция param().

Теперь посмотрим как это работает. Функция param() просто задает стартовые значения параметра прозрачности таким образом, что нижняя картинка видна, верхняя - нет. И программа спит. Однако по клику на кнопке [Change] запускается функция one(). Она обнуляет счетчик, задает значение паузы, задает направление процесса и запускает функцию move(). Эта функция nm раз увеличивает значение параметра прозрачности второй картинки таким образом, что оно поднимается от 0 до 1. После этого значение паузы делается очень большим и функция перестает работать. Программа опять спит. Но если кликнуть вторую кнопку Restore, то все повторится, только процесс пойдет в обратном направлении. Вот и все. Ясно, что такая программа имеет только учебное (демонстрационное) значение. Но она показывает как делать плавный переход от одной картинки к другой с медленным изменением прозрачности. А теперь я, как обычно ставлю этот код в обрезанном виде себе на сайт и он показывает как это работает.

Прозрачность


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

Вообще говоря, структура тела сайта в любой программе фото-шоу не сильно не меняется, а вот Javascript программу move() можно сделать сколь угодно сложной, с большим числом самых разных параметров, и в зависимости от их значений формировать самые разные переходы между картинками. Но чтобы разобраться в таком коде, мы сначала рассмотрим серию простых программ, реализующих тот или другой переход между картинками. Кстати в указанном в этой главе примере можно было бы сделать так, чтобы нижняя картинка постепенно становилась прозрачной и обк картинки были бы не видны, то есть появилась бы голая стена. А потом на ней возникла бы вторая картинка. Это можно сделать либо изменением кода, либо двойным переходом, сначала к картинке совпадающей с фоном, а потом уже к новой реальной картинке. В программировании очень часто результат можно получить разными способами.

В заключение этой главы я хочу обсудить особенности техники наложения областей с изменением прозрачности. В принципе можно накладывать две или даже много областей div одну на другую и внутри областей может быть любой код, не только текст и картинки, но и javascript код, области textarea и гиперссылки. Если сделать видимой область, которая лежит в глубине, то все будет показано, но кнопки, области textarea и гиперссылки работать не будут. Их нельзя будет сделать активными. Они автоматически остаются в пассивном состоянии. Активировать эти объекты можно только в той области, которая лежит на самом верху. Это надо иметь в виду и не слишком увлекаться манипуляцией с прозрачностью. Такая техника больше всего подходит только для изображений. Впрочем иногда этот эффект можно использовать для целей блокировки работы сайта и запрета копирования информации. То есть показать сайт с наложением сверху прозрачной картинки. Сайт будет показывать все тексты и объекты, но не сможет нормально работать, с него нельзя будет скопировать текст и нельзя будет перейти по гиперссылкам. Разумеется скрин-шот можно сделать всегда, но это уже не так удобно и не так быстро.

9 МЕНЯЕМ РАЗМЕРЫ -- Интересные эффекты можно получить при изменении размеров внутренних окон области, при условии, что задан режим overflow:hidden;. В этой главе я покажу пример программы, которая является модификацией и небольшим развитием предыдущей программы. Идея состоит в том, что снова показываются две картинки, одна над другой, но верхняя картинка помещается в область <div> с указанным выше параметром. Первоначально размеры этой области совпадают с размерами верхней области, а затем постепенно уменьшаются до нуля. В результате возникает эффект постепенного исчезновения верхней картинки, но под ней возникает нижняя картинка. Таким образом мы получаем фасонный переход от верхней картинки к нижней картинке. Дело в том, что нижняя картинка не находится в нижней области, и значит исчезновение этой области на нее не влияет. Итак я снова сначала даю полный код сайта, а потом объясню как он работает.

Итак, в этом коде три функции, одна реализует процесс, а две выполняют действия по клику на кнопках, в том числе они как раз и запускают первую функцию. А в теле сайта внешняя область, в ней картинка, внутренняя область и в ней тоже картинка. На этот раз параметр id="tim" необходимо задать только для внутренней области и размеры этой внутренней области определяет javascript код. Есть два процесса: размеры уменьшаются и размеры увеличиваются. Первоначально размеры заданы как максимальные, поэтому первая кнопка их уменьшает до нуля, а вторая - обратно увеличивает. Исходно в переменных w и h задаются максимальные значения окна, в переменной nm - число шагов перехода, а сами шаги вычисляются таким образом, чтобы процесс шел от начала до конца. Здесь почти весь код совпадает с кодом предыдущей главы, так что все должно быть понятно. Ниже показана программа в действии.

Размеры


Я надеюсь, что у вас все замечательно работает. Однако, я получил некоторый опыт работы над ошибками и понаблюдал за характером разных браузеров. Начать с того, что я забыл закрыть внутреннюю область <div> и вместо двух закрывающих скобок поставил только одну. А все потому, что я просто скопировал текст программы предыдущей главы и в ней делал исправления. Реально же не закрылась внешняя область, но так как после нее больше ничего нет, то все три браузера: Мозилла, Хром и Эксплорер, ошибку проингорировали и все исполнили. Наверно, если бы у меня еще что-то было в коде, то было бы иначе. Далее, первоначально я вместо значения параметра id, то есть tim написал top, а при определении переменной top не поставил слово var. Я писал ранее, что это слово и декларирование типа переменной не так уж и обязательно. Вот я и забыл. Что получилось? Мозилла сразу правильно выполнила программу, но Хром и Эксплорер работать не захотели. После того, как я исправил top на tim, Хром тоже заработал. Я подумал, что top - это имя одного из параметров CSS и вероятно его нельзя использовать в качестве значения параметра id. Но Экплорер не работал. Только помле того, как я добавил к апределению tim слово var, то есть var tim = document... заработал и Экплорер. Самое любопытное, что Мозилла и Хром умеют показывать ошибки, но ни один ошибок не показал. В этом сложность программирования на Javascript. Лучше стараться не делать ошибок совсем, так как находить их очень сложно и особенно сложно удовлетворить всем браузерам. У каждого свой характер.

Рассмотренный пример является самым простым из целой серии подобных примеров. В данном случае картинка схлопывается к началу и разворачивается из начала, то есть из левого верхнего угла. Но можно не только менять размеры, но и одновременно менять начало области таким образом, чтобы неизменным оставался ее левый нижний, правый верхний или правый нижний углы. Но если следить за тем, чтобы картинка оставалась на месте, то одновременно нужно менять еще и начало картинки относительно меняющегося начала области, фактически для картинки надо задавать сдвиг в противоположную сторону. Так можно организовать 4 разных перехода. Но и это еще не все. На самом деле картинку можно схлопывать в любую точку или разворачивать из любой точки, например из центра области. Так что переходов тут бесконечно много. А арифметика на уровне 5-го класса школы. Я не буду приводить конкретные программы для каждого из этих случаев, просто в этом месте уместно сказать, что я сделал программу фото-шоу, которая оперирует с произвольным числом картинок и реализует большое число переходов. Для этой программы достаточно указать адреса картинок и сообщить размер паузы показа и номер перехода и она сама сгенерирует вам htm сайт фото-шоу. Эта программа на данный момент написана на языке ACL, который я сам разработал и называется WebAnim2. Интерпретатор языка ACL в виде Java аплета работает в интернете по адресу [10]. Для работы этой программы нужно установить на компьютер Java интерпретатор. Его можно бесплатно скачать с сайта разработчиков. Но для облегчения поиска и скачивания я поместил дистрибутив версии 6u16, которой вполне достаточно, в свой файло-обменник на Яндексе [11]. Дистрибутив можно скачать по указанному адресу. Установка прораммы очень простая: запускаете файл, соглашаетесь с лицензией и дальше со всем соглашаетесь тоже - и все будет сделано. После установки папку программы даже можно перенести на флэшку и запускать через командный файл, это фактически переносимая программа. После запуска моей программы по ссылке [10] надо в меню выбрать обшие программы и кликнуть кнопку WebAnim2. Как пользоваться программой написано в ней самой.

Здесь я просто хочу объяснить общую идею. Все что нужно программе - это адреса фоток и параметры перехода. Вот эту информацию надо скопировать в окно редактора программы. А дальше программа записывает очень большую и сложную Javascript процедуру move(), которая и вычисляет все переходы между кадрами в зависимости от значений параметров. Из всех фоток формируется массив и адреса объектов этого массива подставляются вместо адресов стандартных двух картинок, как в этом примере. Вообще структура самого сайта практически точно такая же, как в только что рассмотренном примере. Я сам сделал уже много таких фото-шоу, которые работают в интернете, ссылки можно найти на моем сайте [1] или в социальной сети Яндекс-фотки [12].

10 КАК ПИСАТЬ КНИГИ -- В этой главе я хочу обсудить одну проблему, которая наверно волнует не меня одного. А что если сайт очень большой, книга или очень большая статья. Как поступить? Человек очень консервативен. Первые автомобили были похожи на кареты, только без лошадей. Первые текстовые редакторы делали по типу пишущих машинок. Первые электронные книги стараются делать похожими на обычные бумажные книги. Но так ли это нужно. У электронных книг своя специфика. Итак, что делать если у нас очень много текста и при этом текст структурирован по главам. На первый взгляд может показаться, что вопрос наивный. Ведь HTML и был придуман для форматирования большого текста, а гиперссылки позволяют связать все ресурсы Земли в одну книгу. Так то оно так, но проблема все таки есть. Дело в том, что сканированные книги можно сделать одним файлом в djvu или pdf форматах, а специальные программы реализуют навигаю по страницам книги. В HTML тоже можно делать навигацию, но нет постоянных кнопок, ссылки убегают вместе с текстом. Чтобы избежать такого эффекта, книгу режут на части и размещают в разных файлах. Тогда в каждом файле можно сделать навигацию по всем остальным файлам. Вроде бы все хорошо.

Все да не совсем. Получается очень много файлов и вместо того, чтобы ставить книгу на полку в виде одного файла приходится ставить на полку целую папку. А внутри полно файлов и непонятно - какой из них первый. Вообще говоря, для работы в интернете нет никакой разницы, потому что файлы все равно не видны, они в интернете. Но ведь хочется и скачать и поставить себе на полку. Не всегда есть возможность быть в интернете. Интернет через спутник пока дорогое удовольствие, а самое главное то, что для чтения книги в поезде интернет и не нужен. Если дробить сайт на файлы, то очень давно существует техника фреймов, когда полную область окна сайта можно разделить на две или больше и в каждой области свой файл. В одной области можно держать постоянную часть, например, оглавление, а во второй - переменную часть, то есть содержание глав. Очень много профессиональных сайтов сделано в такой технике. Что лично мне не нравится в ней. Первое - все равно много файлов. Второе - линейки прокрутки в каждом фрейме независимые. Третье - адреса файлов не показываются. Есть и четвертое. Сейчас браузеры любят запоминать файлы вэб-страниц и при повторном вызове показывают сохраненную копию. А если на сервере файл изменился, то и не видно изменений. Это особенно неудобно авторам. Принудительное скачивание можно заказать по кнопке круглой стрелки [Reload]. Но фреймы не скачиваются и в этом случае. И это проблема. Приходится узнавать адрес фрейма, принудительно ставить его в адресную строку и перезапускать. В этой главе я хочу объяснить как сделана эта книга. Она имеет вид почти фреймовой структуры, но записана в один файл. Линейка прокрутки у нее единая и проблем с поиском адресов файлов в переменном окне не возникает.

Для создания такой структуры сайта можно применять все описанные выше методы. Можно прокручивать текст в окне, как написано в главе Прокрутка. Можно накладывать области одну на другу и менять прозрачность, как написано в главе Прозрачность. Но у обоих этих методов есть недостатки, которые заставляют искать другое решение. В первом методе надо аккуратно вычислять шаг перемещения текста для каждой главы, а если дописать еще кусок, то надо опять менять шаги. Во втором методе плохо то, что в нижних листах не активируются редактор, Javascript код и гиперссылки. Поэтому я придумал такую структуру. Каждую главу пишем в отдельную область div, и все области накладываем друг на друга за пределами основной внешней области div, то есть контейнера, который имеет фиксированную ширину, а можно и высоту фиксировать, чтобы потом еще что-нибудь можно было написать. Ну а слева делаем отдельную область div, в которую помещаем кнопки навигации. Далее вступает в действие тяжелая артиллерия в виде javascript кода. Каждая кнопка вызывает одну и ту же функцию с номером главы. И по клику на кнопке, мы снова задвигаем все области div вправо за пределы основной области и они не видны. А область с нужным номером ставим на нужное место в единственном числе, то есть вдвигаем в основную область. Итак, не надо считать шаги сдвига, рабочая область всегда сверху и в ней все замечательно работает. И не надо много файлов, вся книга идет одним файлом.

Собственно все проблемы решены, если в книге нет картинок. Впрочем серьезные книги можно и без картинок писать. Но если нужны картинки, то они будут в отдельных файлах, тут проблема не решается. Вот в Java все эти проблемы давно решены. Можно сделать программу в виде одного zip-архива и программа умеет работать с файлами внутри своего архива. Можно сделать фото-шоу на 100 фотографий, а все фотографии внутри файла программы. Но Javascript не умеет работать с файлами, а тем более - с архивами. Однако картинки не создают такой уж хаотичной ситуации. Их можно поместить все в отдельную папку и вообще в нее не заглядывать. А можно и в интернете разместить, как в этой книге. В этом случае, правда, нельзя читать книгу в поезде. То есть приходится делать две версии: отдельно для интернета и отдельно для поезда. Так же точно приходится делать и с фото-шоу. И тем не менее, тот вариант, который я предлагаю, мне лично очень понравился. Ниже я покажу основную структуру такой программы и расскажу как это работает.

Итак в теге style помещаем нужные стили, я поместил только стиль кнопки button. Затем ставим javascript код в теге script. Этот код стандартный, только можно менять значения переменных. У меня задано три страницы im=3;, ширина левой области 200, а правой - 800, сдвиг вправо на 1200. Сдвиг может быть любым, только бы область была не видна. Функция param() в самом конце кода вызывается всего один раз. Она определяет дополнительные параметры стиля для всех областей и потом вызывает функцию page(0). А эта функция задвигает все области вправо, кроме номера ее аргумента. Далее в теге body записываем все, что нам нужно поставить до книги, а потом записываем саму книгу. Сначала надо заказать полную область для книги, как ширину, так и высоту. Потом внутри родной области описать левую область с каталогом страниц, а потом все правые страницы одну за другой. Причем их сразу надо задвинуть потому что javascript код сработает не сразу и если их не задвинуть, то они сначала будут видны, а потом исчезнут. Это некрасиво и лучше этого не допускать. Ну а после можно записать еще что-нибуль, точнее все что надо: счетчики посещений, рекламу или еще чего. Вот и весь код.

Хочу обратить внимание на одну тонкость. В кнопке button заказан стиль текста как жирный параметром font-weight. Это необходимо, потому что укороченная форма задания фонта правильно работает во всех браузерах, кроме Экплорера. Экплорер не делает жирный текст, если его задать в укороченной форме. Проблема разных браузеров - это увы бедствие нашего времени. И программисты вынуждены идти на хитрости и искать нестрандартные решения. Еще одна хитрость состоит в том, что если задавать значения параметра id числами, то в javascript коде это значение можно вычислять по номеру главы. Это удобно в том плане, что кнопка и соответствующая ей глава определяются единым номером. А значит нет проблем с переносимостью глав и вставкой новой главы в середину.

Кто-то может мне возразить, что я забыл о формате chm и о том, что Эксплорер умеет запаковывать весь сайт одним файлом в формате mht. Да, я знаю об этом и у меня есть программа, которая конвертирует весь сайт в один chm файл. И есть книги, набранные в этом формате. Это хороший формат, но это уже не интернет. И насколько я понимаю, такой формат не читается в других операционных системах кроме Виндовс. Такая же ситуация и с форматом mht. С ним умеет работать только Эксплорер, да и то он его очень медленно открывает. Эксплорер вообще очень медленно открывает большие файлы. Что касается мелких файлов или при скачивании из интернета, то это незаметно. Но вот если открыть эту книгу в Эксплорере или в Хроме на локальном компьютере, то разница во времени видна невооруженным взглядом. Я сам долгое время был сторонником Эксплорера. И хотя Мозилла и Опера - очень неплохие браузеры, но есть в них какая-то избыточность, навязчивость. А Хром - это просто идеальный браузер. Просто удивительно, что нашлись люди, которые придумали такое.

Пару слов о технике. Хотя в HTML очень много самых разных тегов, и я конечно все их знаю, я написал данную книгу с использованием только вот таких тегов разметки: <h2>, <div>, <p>, <span>, <tt>, <textarea>, <a>, <form>, <input>, <button>. Конечно есть еще обязательные теги: <html>, <head>, <body>, <style>, <script>. А раньше главными моими тегами были <table> и все, что с ним связано, и <font>. Конечно тоже все можно было сделать, но Javascript я почти не использовал, а с тегами <table> получалось очень много кода форматирования, поскольку иногда даже для пары слов приходилось заказывать колонку и столбец. Лично мне новая техника определенно больше нравится.

11 САЙТ ПОД КЛЮЧ -- В этой главе я хочу обсудить возможности javascript программы работать с текстом. Под текстом я буду понимать набор символов любого размера и любой степени сложности. В частности текстом является контент любого сайта. Вот привлекательная задача: сделать javascript программу, которая бы сама генерировала содержимое сайта так, чтобы осталось только скопировать файл на сервер и все дела. И ведь это реально очень важная задача, так как сейчас происходит процесс привлечения в интернет все большего количества людей, не обладающих знаниями и умениями веб-программистов. Одним из механизмов такого процесса являются социальные сети типа Facebook, Google+ или Яндекс-фотки. Сетей очень много, я не ставлю цель все их перечислить. Другое направление состоит в создании программ сайто-конструкторов, а также установки встроенных программ изготовления сайтов прямо на сервере, так называемые CMS (content management system). В ссылке [13] можно почитать хорошую вводную статью о CMS. Но все это сложнейшие системы, разрабатываемые профессионалами с использованием всего арсенала средств программирования серверов.

Я же хочу поговорить о конкретной программе, которую может написать любой желающий с использованием только языка client side javascript для облегчения написания собственных сайтов определенного типа. Как может выглядеть такая программа? С учетом того, что она не может работать с файлами, остается только один выход - это организовать на сайте текстовый редактор. В окно текстового редактора можно передать текст через буфер обмена используя клавиши [Ctrl]+[A] (высветить все), [Ctrl]+[C] (скопировать в буфер) и [Ctrl]+[V] (скопировать из буфера). Первые две операции делаются в окне редактора - источника, а последняя операция выполняется в окне редактора приемника. Таким образом можно передать текст из окна редактора на компьютере в окно редактора javascript-программы в интернете и потом совершить обратную передачу результата работы программы в новый файл готового сайта. Ну а редактор на компьютере может как прочитать текст из файла, так и записать текст в файл. Интересно, что размер текста при такой передаче не лимитирован, точнее лимитирован, но этот лимит очень большой и его вполне достаточно для многих целей. Очевидно текст, который надо передать в редактор, должен содержать начальные данные и инструкцию программе о том, что она должна делать. То есть это тоже должна быть программа, но на другом, более простом языке, который непосредственно связан с тем, что эта программа делает. Задача себя оправдывает, если приготовить такой текст намного проще и быстрее, чем текст - результат работы программы.

Если делать программу не для себя, а для всех желающих, то необходимо дополнить информацию также инструкцией для пользователей с подробным описанием что делает программа и как приготовить входной текст. Ну и в общем случае желательно входной текст запоминать с тем, чтобы его можно было выставить в окне редактора снова, если в нем были ошибки, и исправить ошибки. Таким образом, дизайн такой программы может быть очень простым: три кнопки и окно редактора. Кнопки можно назвать [Help] [Input] [Execute]. Окно редактора может быть не очень большим с учетом возможности работы на нетбуках и планшетах (если на них браузер поддерживает javascript). В окно любых размеров можно вставить сколь угодно длинный текст. Ниже я покажу примерный код оформления такой программы и объясню как он работает.

Выше я показал только основную структуру сайта без конкретного алгоритма обработки текста. Таких алгоритмов может быть много и это отдельный разговор. Как обычно, текст сайта имеет головную часть и тело. В головной части можно определить название сайта, кодировку русских букв, задать стили, если необходимо и затем надо описать скриптовую часть. В ней можно определить какие-то глобальные переменные и затем, в соответствии с нашим проектом нужно определить три функции для трех кнопок. Функцию help() для кнопки [Help] удобно сделать так, чтобы она открывала новое окно и записывала в него текст инструкции. Дело в том, что инструкция понадобится только в самом начале работы, пока еще нет навыков работы с программой. А потом она будет не нужна. И лучше сделать так, чтобы ее не было на экране постоянно, потому что с какого-то момента она начнет раздражать.

Новое окно на языке javascript открывается свойством (методом, функцией) open встроенного объекта window. Конструкция vk = window.open( , , ); создает новый объект vk со свойствами окна. Функция имеет три аргумента. Первый аргумент указывает адрес (URL) содержимого окна в интернете, если он пустой, то содержимое будет заполняться программно. В нашем случае именно так. Второй аргумент задает название (метку) окна в конструкциях target = " ". Это удобно, когда открыто много окон и нужно различать их между собой. Но у нас всего одно окно и метку можно не задавать. Третий аргумент в виде текстовой строки задает свойства окна обычным образом параметр = значение, разные определения разделяются запятой. Далее мы должны открыть объект, являющийся контентом нашего окна, который имеет название document. У него стандартные аргументы и их можно даже и не объяснять. Второй аргумент функции означает, что старое содержание будет переписано. Далее в текстовую строку tc записывается весь текст инструкции, сформатированный как html документ. Сложность в том, что в этом тексте могут быть свои текстовые строки, тоже в кавычках, но их не надо исполнять, их надо просто показать. В принципе любые символы разметки можно задать их уникодами, а можно поставить перед ними знак обратного слеша, то есть знак (") надо записывать вот так (\") . Есть и еще ограничения. Если в тексте стоят теги html, то угловые скобки надо задавать специальными последовательностями символов & l t ; и & g t ; написанными слитно, то есть без пробелов. Общий принцип такой: надо следить за тем, чтобы текст оставался текстом. Для этого удобно использовать любой редактор, который делает подсветку синтаксиса языков программирования. Лично я использую редактор Notepad2.

В текстовой строке также не может быть символов переноса строки. Вместо этого надо писать явном виде знак специальный символ \n, затем закрывать строку символами ";+ и после этого переносить текст на новую строку и снова открывать кавычки. В принципе, делать много переносов не обязательно, для удобного чтения можно ввести режим wrap=on, то есть автоматического переноса строк при достижении ими края окна редактора. Но если строка очень большая, то несколько раз ее можно перенести. После того, как вся строка сформирована, нужно записать ее в документ и закрыть документ. Следующая функция input() для соответствующей кнопки, в принципе, для работы программы не нужна, но в общем случае полезно ее иметь для того, чтобы вернуть в окно редактора исходный входной текст программы. Функция содержит только одну команду, а именно засылает в редактор строку inp. Во избежание недоразумений полезно в эту строку первоначально записать инструкцию, как у меня записано. Наконец третья функция exec() запускается при нажатии кнопки [Execute]. Эта функция является основной в программе. Прежде всего, она запоминает в строку inp содержимое окна редактора в момент ее вызова. Затем она формирует текст, который после окончания этого процесса записывается в окно редактора.

Что представляет собой процесс формирования текста. Естественно сначала надо записать основные теги сайта, а между ними все то содержание, которое появится на сайте, или код javascript, который будет работать на сайте. При формировании текста могут понадобиться вычисления разной степени сложности. При этом надо уметь преобразовывать числа в текстовом представлении в реальные числовые переменные, а также числовые переменные снова записывать в текст. Это делается так: для преобразования теста в числовую переменную можно использовать функцию eval(), о которой я уже писал в главе "Калькулятор". Для обратного преобразования достаточно сложить текст с числовой переменной, преобразование произойдет автоматически. Складываются текстовые и числовые переменные посредством знака + (плюс). Надо еще уметь разделить текст на части. Для этого надо записывать в текст символы разделители, например, символ вертикальной черты "|" и затем функцией split('|') можно из одной строки сделать массив строк. Итак, формирование нового текста можно сделать методом расщепления исходного текста, написания новых кусков текста и сложения всех кусков вместе. Если за один прием сложить не удасться или не удобно, то можно сначала определить текстовую переменную, а затем прибавлять к ней новые куски с рекурсией. Но я не люблю рекурсию, поэтому я определил строковый массив и каждый раз определяю новый элемент строкового массива, прибавляя к нему предыдущий элемент и новый текст. У меня такое предчувствие, что так будет надежнее. А в конце последний элемент массива надо вставить в окно редактора.

Я не привожу примера в данной главе. Но каждый может посмотреть примеры готовых программ, сделанных по описанному выше методу, в ссылках [14] и [15]. А результат их работы, то есть фото-шоу "Сингапур", можно увидеть вот тут [16]. А здесь [17] можно посмотреть красивый каталог моих последних сайтов фото-шоу с возможностью запуска любого из них. Кроме того, можно скопировать текст из окна данной главы в отдельный файл и запустить его. Браузер покажет внешний вид программы. В данной главе я говорил про генерирование текста сайта под ключ. На самом деле по такой методике можно делать программы любого преобразования исходного текста в текст-результат. Конечно делать примитивные операции типа замены одних символов на другие не интересно, это делает любой текстовый редактор. Но можно, например, генерировать постскрипт файлы разных графиков и схем. Например задать числовые значения функций и получить их графическое представление в виде кривых и маркеров на осях координат. Можно даже делать матрицы графиков. Можно делать чертежи и многое другое. Важно, что при этом не надо использовать платные монстры типа Corel Draw и им подобные, которые возможно и не смогут сделать то, что именно вам нужно. Каждый может сам себе написать программу.

12 ЖИВЫЕ ССЫЛКИ -- В этой главе я покажу код конкретного объекта, представляющего собой анимированную систему ссылок на сайты. Как это выглядит можно посмотреть на моем персональном сайте [1] в нижней части левой колонки. Фактически это обычная анимация с одним переходом, в которой периодически меняются картинки и каждая картинки подписана. Но фишка в том, что каждая картинка представляет собой ссылку на сайт. Если кликнуть на картинке, то открывается новое окно, в котором показывается новый сайт, причем разные картинки показывают разные сайты. В частности на моем сайте [1] ссылки приводят на сайты с фото-шоу, где та же анимация делается с 23 переходами и с музыкой. А сами картинки являются иконками этих фотошоу, в то время как подписи - их названиями.

Сначала я объясню идею как это можно сделать. Как можно сделать анимацию написано в главе про DHTML. В других главах показаны фактически возможные переходы при смене кадров. Это можно делать как с изменением размеров или координат, так и с изменением прозрачности. Изменение подписей в строке ввода тоже делается несложно, нужно заказать строку ввода, присвоить ей id и затем периодически менять значение параметра value у объекта с данным id. Немного сложнее со ссылками. Верхнюю картинку (то есть вторую) можно поместить в тег якоря, но в нем нельзя прямо указывать ссылку. Вместо этого нужно указать на javascript процедуру. А уже в ней можно открыть новое окно и указать адрес сайта, который оно показывает. А сам адрес может меняться в цикле. Таким образом, весь код состоит из трех частей. Первая часть - это javascript код в головной части head сайта. Вторая часть - это html код в теле body сайта в нужном месте. И третья часть - снова javascript код в конце текста сайта. Вторая и третья части могут быть полностью стандартными и их можно ставить без изменений на любой сайт. А в первой части переменными являются лишь три массива, которые определяют URL (адреса) картинок (иконок) анимации, тексты под иконками и URL тех страниц, на которые делаются ссылки.

Сначала я покажу и объясню код первой части. Его разумно записать в файл с расширением js и в тексте сайта просто указать ссылку на этот файл в теге script. Содержимое файла должно быть таким.

В этом коде сначала объявляются все необходимые переменные и им присваиваются стандартные начальные значения. Затем объявляются 4 массива. После этого идет задание важных переменных im=; w=; h=; pau=;. Значения этих переменных зависят от варианта. Так переменная im должна быть равна максимальному индексу массивов ссылок и текстов, то есть на 1 меньше общего числа картинок, переменные w,h задают ширину и высоту картинок, а переменная pau задает время паузы в миллисекундах. Затем каждый элемент массива imga объявляется как картинка и явно задается массив параметров par, который описывает тип и свойства перехода между картинками. После этого надо определить каждый элемент массивов imga,hre,ttc. Это единственная часть в коде, которая меняется от сайта к сайту. Весь остальной код стандартный. Функция link() запускается при клике на картинке-якоре. Она открывает новое окно заданных размеров и свойств, причем в качестве адреса страницы в этом окне используется текстовая переменная hrf, которой периодически присваются значения из элементов массива hre. Это главная фишка данной техники - переменные адреса сайтов в окне. Функция param2() переопределяет размеры областей div на заданные в переменных w,h. Наконец, функция move() реализует анимацию с одним переходом и с переопределением некоторых параметров стиля объектов, заданных своими id. Здесь используются указатели на параметры объектов mww,pho,obj,img, однако сами эти указатели еще не определены. Это будет сделано в третьей части.

Вторая часть - это html код, который ставится в тело сайта в нужное место. Он определяет области div и сами картинки, которым присваиваются параметры id для того, чтобы к ним можно было обращаться в первой части, то есть в javascript коде с помощью стандартной операции document.getElementById('x'). Он имеет следующий вид

Здесь адреса нижней (первой) и верхней (второй) картинок могут быть любыми, они все равно переопределяются. но во избежание ошибок адреса должны быть настоящими. Можно использовать один из элементов массива адресов картинок из первой части. Параметры width и height у верхнего тега div тоже переопределяются, но лучше сразу задать правильные значения. Важно, что в теге якоря вместо указания на статическую ссылку указана javascript функция. То есть при клике на картинке заускается javascript функция, которая сама реализует гиперссылку в новом окне. При этом гиперссылка периодически меняется. Текст перед первым тегом div может быть любым или его может вообще не быть. Но подсказка все же не помешает.

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

Эта часть должна быть помещена в тег script, но я сам тег не написал, потому что возможно на сайте есть еще скрипты и этот тег и так стоит. Тогда можно просто добавить данный код к старому Javascript коду. В заключение я хочу напомнить, что javascript - это упрощенный язык, в нем все переменные являются глобальными, если они не определяются внутри функции, и все функции тоже являются глобальными. Поэтому, если вы вставляете javascript код на старницу, на которой уже есть другой javascript код, то нужно позаботиться о том, чтобы переменные и функции разных кусков кода не конфликтовали. Для этого лучше всего, чтобы они имели разные имена. Указывая данный код я специально об этом не заботился, а взял тот код, который стоит на моем сайте [1]. По этой причине вместо функции param написано param2 потому, что функция param уже была на моем сайте. Это достаточно удобный прием - просто прибавить число ко всем именам переменных и функций, если такие имена и переменные уже были. Впрочем иногда одни и те же переменные способны работать в разных частях и без конфликтов.

Вот еще один совет. Для того, чтобы тексты во всех браузерах выглядели одинаково, необходимо задавать CSS стили для всех тегов. Однако в строке ввода, задаваемой тегом input, текст появляется в параметре value, а не в самом теге, поэтому непонятно как задать форматирование текста в строке ввода. Оказывается если задать форматирование текста для тега input, то все замечательно работает. Это надо делать обязательно, иначе текст, отлаженный в браузере Гугл Хром, будет неадекватно показываться в Интернет Экплорер и наоборот. Вообще самый лучший способ избежать различий в браузерах - это форматировать с помощью CSS все тексты на странице.

Метод живых ссылок, в некотором роде менее удобен, чем простой каталог ссылок по иконкам, потому что нужную ссылку иногда приходится ждать какое-то время. С другой стороны, он экономит место на сайте и привлекает внимание, что имеет свои преимущества. Возникает естественный вопрос, а как быть, если захочется поставить на сайт два или три таких блока. Поскольку данный код использует глобальные переменные, то простое копирование кода невозможно, иначе разные анимации будут мешать друг другу. Казалось бы нужно использовать более сложный код с инкапсуляцией переменных. Но сложность - это минус, к тому же такой код не будет работать быстрее. Один из способов решения проблемы может быть такой. Надо записать код таким образом, чтобы все названия переменных, функций и параметров id не содержали цифр. Написанный выше код именно такой. Далее исходный код надо переписать прибавляя в каждому названию символ (`) с юникодом 96 в конце. Такой текст можно получить по ссылке [18]. Теперь можно сделать несколько копий данного текста и в каждой копии заменить символ (`) на число 1, 2 и так далее. Такую операцию делает любой приличный текстовый редактор, например, Notepad2. В результате названия всех переменных, функций и параметров в разных копиях будут различаться и они не будут мешать друг другу. Осталось поставить различные анимации на свои места на сайте и все будет замечательно работать. Если код всех анимаций записать таким образом, то есть без чисел в названиях, то можно комбинировать анимации самого разного типа.

13 СКРЫТЫЙ КОНТЕНТ -- В этой главе я расскажу о еще одной возможности уплотнить информацию на сайте. Как известно, первоначальная идея гиперссылок (якорей) состояла в том, чтобы перенести курсор либо в другое место данного файла, либо в другой файл. При этом сразу стали применять технику пакета ссылок в виде оглавления контента, который распределен по носителям. Однако последнее время стало модным использоовать другую технику, а именно, держать весь текст в одном файле, написанным подряд. Этот текст может быть очень большим, и чтобы найти нужное место его надо долго прокручивать. Такие статьи можно найти в интернете и их не так легко читать. Однако положение можно исправить вот каким способом. Можно спрятать весь текст и показывать только оглавление в виде пакета ссылок. Но при клике на ссылке курсор никуда не уходит, просто сразу за ссылкой появляется текст той главы, на которую делается ссылка. При клике на другую ссылку первый текст прячется снова и появляется текст другой главы. Таким образом, на экране всегда только одна глава, соответствующая одной ссылке.

Типичным примером такой структуры сайта может быть книга стихов. На экран выводится оглавление книги в виде ссылок, а при клике на любую из них открывается нужное стихотворение. Можно придумать и другие примеры. С помощью javascript создать такую структуру сайта совсем не сложно. Фактически для этого можно применить тот же подход, что и в главе "Как писать книги". Только в этом случае области div надо писать сразу за ссылкой с режиме относительных координат и исходно заказать очень маленький вертикальный размер области height:1;. Лучше бы 0, но опять проблема с Экплорером. Он значение 0 считает ошибкой и игнорирует. Поэтому надо задавать 1 и все равно в один пиксель ничего не уместится. Ну а дальше все просто: в ссылку записываем вызов javascript функции с номером области, в параметр id области ставим число, зависящее от этого номера. В функции меняем размер нужной области на настоящий, а размеры всех остальных областей снова делаем минимальными. Разные области будут иметь разные реальные размеры, поэтому надо организовать один массив чисел. Итак, я показываю код возможного сайта

Как видите все очень просто. Ссылки (якоря) указывают на одну и ту же функцию с разными номерами в аргументе, параметры форматирования областей div заданы через CSS. Если задать вертикальный размер строки в теге параграфа (у меня 16), то легко вычислить вертикальный размер области по формуле 16*N+12, где N - число строк. Немного более сложная ситуация с картинками, но если известен вертикальный размер картинки, то тоже не сложно. А если картинка обтекается текстом, то ничего не меняется и указанная выше формула работает.

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

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

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

14 ЭТО ВАЖНО ЗНАТЬ -- В этой главе я попробую записать то, что можно не сразу найти в справочниках и не сразу сообразить. Первый вопрос:
Выделение текста внутри параграфа. Как я уже писал, для этого придуман тег <span>. Но если нужно выделить несколько стилей, то к нему надо еще прибавить слова class="name". И получается так, что для выделения может быть всего одного слова или даже одной буквы нужно написать очень длинный тег, например, <span class="name">Я</span>. В результате размер файла растет, что тоже не всегда желательно, особенно при написании больших текстов, все таки интернет не у всех быстрый. Но система стилей реально может переопределить любой тег так, чтобы он давал нужное вам выделение. Поэтому вместо тега <span> можно использовать любой другой тег. Очень удобный тег <q>. Он придуман для написания цитат и текст, помещенный в него, в стандартных браузерах автоматически помещается в кавычки. Правда Интернет Экплорер кавычки не ставит. Но нам тоже кавычки не нужны. Вот как заданы стили для этого тега в данной статье для выделения имен тегов разметки и разного кода в тексте:

q{color:blue; font:normal normal 14px sans-serif; quotes: "" "";}

Здесь задан цвет, параметры шрифта и вид кавычек. И вот для кавычек задан такой режим, чтобы они отсутствовали. Это работает. Второй вопрос:

Определение браузера Экплорер в коде HTML. Это еще одна важная деталь, которую можно не найти в справочниках. К сожалению, браузер Internet Explorer не всегда правильно выполняет форматирование CSS для тегов HTML. В результате, во всех браузерах все будет замечательно а в Экплорере - криво. И надо писать код специально для Экплорера по другому. Но как определить браузер. Наиболее удобный метод такой. В такие скобки <![if !IE]>код<![endif]> помещаем код для всех других браузеров, кроме Экплорера, а код, предназначенный только для Экплорера - вот в такие скобки <!--[if IE]> код <![endif]-->. Указанные скобки (теги) понимает только Экплорер, другие браузеры их не понимают. Так вот, первый тег Экплорер поймет так, что ему не надо его выполнять, а все остальные браузеры ничего не поймут и выполнят. А второй код Экплорер поймет так, что ему надо его выполнять, а все другие браузеры увидят в нем комментарий и выполнять не будут. Третий вопрос:

Определение размера картинок. При показе картинок может возникнуть необходимость узнать размер картинки автоматически при ее загрузке внутри javacript кода, то есть задан только URL картинки, и их может быть много. А мы хотим задать размеры окна для картинок исходя из знания максимального размера загружаемых картинок. Я написал вот такую тестовую программку

Здесь скрипт загружает картинку по адресу в интернете на моем сайте. Фактически когда именно браузер ее загружает не известно, но по идее он должен ее загружать как только узнал адрес. После этого стоят две строки, переопределяющие значения переменных w и h исходя из размеров картинки. Всех нюансов как работают эти две строки я не могу объяснить, но ясно, что они определяют размеры картинки. Код я вычитал на форуме. Я проверил этот код на 4-х браузерах. Получилось так, что только браузеры Google Chrome и Opera работают адекватно, то есть при перезапуске сайта, они снова показывают слово "ini" в окне строки ввода. А при нажатии кнопки сообщают размер картинки. Браузеры Мозилла и Экплорер размер картинки показывают, но при перезапуске сайта, они не меняют содержимое строки ввода. Только после введения второй кнопки и функции, которая снова засылает в строку ввода исходное слово, удается ее изменить. В любом случае узнать размеры картинки при ее загрузке такой код позволяет во всех 4-х браузерах. 4-й вопрос:

Как работают гиперссылки. При использовании функций javascript интересные особенности имеет тег якоря. Как я писал в главе "Основы HTML" якорь служит для перехода к новому документу или новому месту внутри данного документа. Но он также может служить инструментом для вызова функции javascript. Для этого вместо адреса сайта надо указать имя функции по формату <a href="javascript:two()">, где вместо two() можно указать любую другую функцию javascript. Запуск функции будет выполнен по клику. Но в этом же теге можно задать еще и параметр onclick="one()". Тогда по клику будут вызваны функции one() и two(). Важно знать очередность. Так вот, сначала будет вызвана функция one() и только потом two(). Этим можно воспользоваться. Например, в функцию one() можно вставить встроенную функцию confirm("да или нет?"), которая показывает текст, указанный в ее аргументе в модальном окне и ставит две кнопки [OK] и [Отмена]. Что будет написано во второй кнопке зависит от браузера. Экплорер пишет [Cancel], а Google Chrome - как указано в начале. И передать реакцию пользователя в логическую переменную. А в функцию two() можно поставить условие и выполнять ее действия в зависимости от значения этой переменной. 5-й вопрос:

Изменение контента и клавиатура. До сих пор я менял тексты только в строках ввода, то есть изменял значение параметра value в теге input. Однако javascript позволяет менять контент в любом теге, то есть текст, который не задается в параметре, а содержится в теле тега. Для обозначения такого текста существует специальный параметр innerHTML. При этом достаточно получить ссылку на объект (тег) по параметру id, приписать через точку к нему указанный параметр и мы получаем доступ в внутреннему содержанию тега. В принципе, это позволяет динамически переписывать содержание всего сайта много раз по какому-либо событию. Это очень важная и интересная возможность. Следует также указать на возможность использования клавиатуры при управлении работой сайта. Во всех описаниях javascript обычно обращают внимание только на события от мыши и главным событием является клик левой клавишей. Дело в том, что такие события обрабатываются встроенными обработчиками событий. Но в javascript можно подключить любое событие и написать обработчик этого события, в том числе и события от нажимания клавиш клавиатуры. Прежде чем объяснить, как это работает, я покажу небольшой пример сайта, в котором используется перезапись текста по нажатию клавиатуры.

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

Итак начнем изучать код. Первая функция init() прибавляет к документу новый обработчик события. И тут сразу возникает различие между стандартом W3C и Экплорером. Чтобы сделать кросс-браузерный код приходится проверять работоспособность различных функций. Так первая функция document.addEventListener работает в стандартных браузерах, вторая document.attachEvent работает в Экплорере, а третья конструкция on+event написана по аналогии со стандартными событиями, например onclick. В функциях первый аргумент - это имя события, второй - название функции, которая это событие обрабатывает. В конце кода эта функция запускается на исполнение. Почему в конце? Потому что надо подождать пока весь файл сайта скачается и обработается.

Функция - обработчик события имеет своим аргументом объект-событие, который имеет свои свойства. Но опять так только в стандарте. В экплорере все иначе. Там есть функция window.event, причем первое слово можно не писать. Поэтому конструкция if(!e) e=event; просто обеспечивает кросс-браузерность. Если e не событие, что будет в Экплорере, то делаем его событием. Далее используется функция keyval(), которая имеет своим аргументом число, получаемое по свойствам события keyCode и which. В разных браузерах эти свойства могут давать разные ответы. Так в Хроме оба свойства выдают одинаковый результат. А в Экплорере which не дает результат. Все это можно проверить эмпирическим путем, так как найти что-то в литературе очень сложно. В этой же функции формируется текстовая строка и вставляется внутрь параграфа с нужным id. Для этого как раз используется внутренний параметр innerHTML.

Функция keyval довольно простая. Она преобразует число в строку. Если число не определено, то строка стандартная, а если число определено, то ставится это число, а также значение статической функции String.fromCharCode(n), которая преобразует число в строку. В нашем случае, в символ, для которого данное число является юникодом. На реальных сайтах подключение обработчика событий клавиатуры позволяет управлять контентом не только с помощью мыши, но и с клавиатуры. Это может понадобиться при написании динамичных игр, управлении фото-шоу, да и вообще заменить многие пункты меню или просто дополнить их.

ЛИТЕРАТУРА. -- В книге не так уж много ссылок, все они пронумерованы. Но здесь я даю также другие ссылки по теме, которые могут быть полезными. Вместо номера у них знак звездочки, ну и вся информация в комментарии.

[1] kohnvict.narod.ru - мой персональный сайт
[2] Лекции о Java - статья в интернете о программировании на языке Java.
[3] WWW Consortium - главный сайт по языкам форматирования сайтов
[4] Поиск Яндекса - главный поисковый сайт русского интернета
[5] HTML5, Тег Canvas - описание графических возможностей в сайте-писании
[6] Описание ACL - можно почитать о структуре моего языка программирования
[7] Javascript на русском - наверно самый полный сайт на русском о javascript
[8] Мой калькулятор - он написан на языке Javascript в 1998 году.
[9] Программа расчета CRL - она написана на языке Javascript в 1998 году.
[10] Онлайн интерпретатор ACL - моя программа с широкими возможностями, написаная на Java
[11] Дистрибутив Java интерпретатора - в моем файло-обменнике, скачиваем и устанавливаем.
[12] kohnvict.ya.ru - мой сайт в социальной сети Яндекс-фотки
[13] Что такое CMS - интересная вводная статья о CMS (content management system)
[14] WebAnimA - программа автоматического создания сайта фото-шоу по заданному протоколу
[15] WebAnimB - программа автоматического создания заготовок кода фото-шоу для установки на сайт
[16] фото-шоу Сингапур - автоматический слайдер фоток под музыку.
[17] Каталог моих сайтов фото-шоу - с которого можно выйти на любой сайт.
[18] Заготовка кода живых ссылок - см. главу 12 как ей пользоваться
[*] Хэш код - на этом сайте можно задать любой вопрос о программировании и получить ответ, от всех желающих ответить. А можно посмотреть ответы на чужие вопросы. Это новая форма универсального форума.
[*] Web-Mastery-Info - сборник материалов на русском в помощь создателям сайтов. Можно скачать сканированные книги, программы, примеры скриптов, причем есть очень сложные, например игра Тетрис на javascript, а также есть шаблоны сайтов.
[*] HTMLbook - описание на русском всех тегов HTML и параметров CSS. Есть справочник, статьи и руководство для начинающих, а также список рецептов для решения некоторых задач веб-строительства.
[*] HTML Теги - описание - русский справочник по тегам HTML и параметрам CSS. Учебником быть не может, но если нужно что-то вспомнить из подзабытого известного, то он удобен.
[*] Scriptic.narod.ru - русский сайт на народе с коллекцией примеров кода на html и javascript. Сайт не обновлялся с 2003 года и заметно устарел, но здесь есть уникальные примеры, которые еще работают.
[*] Javascript-Kit - английский сайт с примерами кода на Javascript и Java. Очень большой ресурс, содержащий много примеров и даже готовых программ на JS и Java. Есть также и информация о javascript для изучения, плюс краткие справочники по javascript и css.

НАВЕРХ


счетчик посещений   Виктор Кон на сервере Проза.ру   каталог слайд-шоу