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

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

Аннотация   1 Введение   2 Основы HTML   3 Основы CSS   4 Основы Javascript
5 Основы DHTML   6 Калькулятор   7 Прокрутка   8 Прозрачность   9 Меняем размеры
10 Как писать книги   11 Сайт под ключ   12 Живые ссылки   13 Скрытый контент   14 Это важно знать
Литература

АННОТАЦИЯ -- Советы организованы следующим образом. Слева все время стоит навигация по главам. Система кнопок позволяет быстро открыть любую главу в окне справа. В каждой главе могут быть текст, код 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. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. Ну и потом спасаете текст через меню редактора.

<html> <head><title>Калькулятор</title> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <script type="text/javascript"> function calc(form){form.res.value=" " + eval("with (Math){a = " + form.expr.value + "}")} </script> </head> <body bgcolor="#ffffff" text="#000000" alink="#00FFFF" link="#999900" vlink="#FFFF00" > <center> <h2>Калькулятор</h2> <form> <table bgcolor=#ffffff border=10 cellspacing=2 cellpadding=0> <tr align=center><th align=right> a = </th> <td><input type="text" name="expr" size=49></td> <td align=center><input type="button" value=" = " onclick="calc(this.form)"> <td><input type=text name="res" size=10></td></tr> </table> </form> </center></body> </html>

Первые теги достаточно очевидны. В теге <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 это можно делать намного более фасонно и разнообразно. Я сначала, как обычно, покажу самый простейший вариант кода, который иллюстрирует только принцип, идею. А использовать этот принцип можно с контентом любой степени сложности и варьировать параметры многими способами. Итак, сначала полный текст программы (код) в стандартной технике. Фактически это самостоятельный сайт.

<html> <head><title>Прокрутка</title> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <script type="text/javascript"> var pt,pts,ptma,ptmi,pause,ona; ptma=50; ptmi=-300; pt=ptma; pts=1; pause=40; ona=false; function move(){ if( ona ){pt -= pts; if( pt < ptmi || pt > ptma ){pts=-pts;} mc.top=pt;} setTimeout("move()", pause); } function starf(){ ona=true; } function stopf(){ ona=false; } </script> </head> <body bgcolor="#ffffff" text="#000000" alink="#00FFFF" link="#999900" vlink="#FFFF00" > <center> <h2>Прокрутка</h2> <button onclick="starf()">Start</button> <button onclick="stopf()">Stop</button><br> <div id="ba" style="position:relative; display:block; left:0px; top:0px; width:690px; height:100px; overflow:hidden; border:ridge 2px gold;"> <img id="bot"; style="position:absolute; left:0px; top:-300px;" src="http://img-fotki.yandex.ru/get/3611/kohnvict.5/0_149f1_7e108568_XL.jpg" /> <div id="mc"; style="position:absolute; left:50px; top:50px;"> <p style="text-align:center; font:bold normal 40px/70px sans-serif; color:blue;"> По диким степям Забайкалья<br> Где золото роют в горах<br> Бродяга судьбу проклиная<br> Тащился с сумой на плечах</p> </div> </div> <script type="text/javascript"> var mc = document.getElementById('mc').style; move(); </script> </center></body> </html>

Теперь обсудим код. Легко заметить, что он имеет почти такую же структуру, как и в предыдущей главе, но немного сложнее. В головной части описаны три 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>, мы не только реализовали периодическую прокрутку контента внутри окна, но и можем управлять этим процессом с помощью кнопок. Ну а теперь я просто ставлю код в файл и его работу можно проверить ниже.

Прокрутка

Start Stop

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

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