Добрый день! Рад приветствовать вас на курсе JavaScript для профессионалов. Тема урока: CSS и JavaScript. CSS – это формально язык описания внешнего вида документа. Когда мы создаем страницу, HTML-код на этой странице определяет то, какая у нас будет структура документа и какие данные будут выводится в документе. С помощью HTML мы здесь указываем, что у нас есть шапка сайта, здесь идет меню, здесь идет статья, там рядом информация об авторе этой статьи, потом идет подпись, футер сайта. HTML даст возможность только определить структуру. Если мы хотим добавить оформление документа, поменять шрифт, цвет, фон отдельных элементов, то в таком случае нам нужно использовать CSS – Cascading Style Sheets. Какие преимущества дает нам использование CSS. Первое – это разграничение кода и оформления. Когда мы работаем с CSS как с отдельным внешним файлом, то тогда на сайт становится более структурированным. У нас есть отдельные HTML документы, в которых есть только разметка и отдельные CSS документы, в которых находится оформление для наших страниц. И получается, что мы четко видим, что в этом файле внеся изменения мы поменяем структуру сайта, а в CSS файл внеся изменения мы поменяем внешний вид, стиль документа. Второе – разное оформление для разных устройств. С помощью CSS файлов мы можем сделать оформление для, например, стандартных десктопных приложений, то есть сайт, который будет загружаться в браузеры обычных пользователей, которые заходят со стационарных компьютеров, сайт будет выглядеть в одном оформлении. Если пользователь захочет переключится в режим печати, и вывести сайт на печать, бросить на принтер, то мы можем для таких целей подготовить отдельный CSS файл, в котором находится упрощенное оформление, для того, что бы в печатном виде сайт лучше выглядел. Если мы например заходим с мобильного устройства, мы можем настроить CSS для мобильного устройства таким образом, чтобы загружался другой CSS файл и оформление страницы абсолютно отличалось от оформления стандартной страницы. Второе преимущество – это разное оформления для разных устройств и режимов работы. Третье преимущество – это расширенное по сравнению с HTML форматирование самого документа. Если в HTML мы можем сделать минимум форматирования. Сделать жирным шрифт, подчеркнутым, курсивом, это доступно у нас с использованием стандартных тегов, то с помощью CSS мы можем действительно оформить страницу. Мы можем поменять цвет, шрифт, его стиль, можем сделать дополнительные отступы, то есть все оформление документа у нас будет производится с CSS. По этому по сравнению с HTML CSS имеет намного больше возможностей. Также одно из преимуществ пользования одного CSS файла – это ускорение загрузки сайта. Потому что если у нас есть HTML документы и один CSS файл, который используется на всех этих документах. То браузер может сделать вот такую операцию: зайдя на первую страницу сайта, браузер качает HTML код и CSS файл к нему, при этом CSS файл браузер сможет закешировать и переходя на другие страницы, которые пользуются этим же CSS файлом, браузеру не приходится с сервера обратно качать CSS/ Браузер качает только HTML разметку, а CSS берет тот, что находится локально. По этому использование отдельного CSS файла добавляет скорости к загрузке документа. И последний пункт: единое стилевое оформление множества документов. Когда мы пользуемся отдельным CSS файлом, то в нем мы можем определить стиль параграфа, стиль таблицы, стиль заголовка. И этот один файл использовать в разных HTML документах. И не дублируя код, а одинаково оформлять много документов. То есть все это упрощает, оформление упрощает сопровождение сайта, сопровождение страниц, когда у нас есть один CSS со стилями и много документов HTML, которые эти стили используют. Вот перед тем, как мы начнем разбирать JavaScript примеры мы в начале повторим CSS. Те кто проходили курсы по HTML CSS, или уже знаете CSS можете промотать немножко вперед видео, потому что мы сейчас будем разбирать основы CSS. На всякий случай повторим основную терминологию и разберем несколько свойств, которые будут нам необходимы для понимания следующих примеров в этом уроке.

В начале давайте рассмотрим способы подключения CSS. Первый способ – наиболее оптимальный – это использование внешнего CSS файла. То есть связанного стиля. Способ заключается в том, что к нескольким HTML страницам CSS мы подключаем посредством добавления элемента link в head страницы. При этом в элементе link мы определяем путь к тому CSS файлу, в котором находятся все правила оформления страницы. Вариант использования элемента link оптимальный, потому что мы можем один раз создать стили и много раз их использовать на разных документах нашего приложения. Второй вариант, менее оптимальный – это использование глобальных стилей. Такой вариант подойдет в тех случаях, когда стиль используется только одной страницей. Мы применяя глобальные стили создаем элемент style в head документа и получается, что вся ниже идущая разметка страницы будет работать с теми правилами, которые определены в элементе style. И третий вариант, наиболее простой в использовании, но при этом не оптимальный – это использование inline стилей, или внутренних стилей, или еще можно слышать встроенные стили. Суть этого подхода заключается в использовании атрибута style для конкретного элемента разметки. Вот например для параграфа создаем стиль, устанавливаем в этом атрибуте несколько CSS свойств, определяя их значения и оформляя конкретно этот параграф. В чем недостаток такого подхода? В том, что у нас увеличивается объем HTML кода, кода страницы и затрудняется возможность по одному формату редактировать несколько элементов. Если у нас на странице будет 10 параграфов, если мы хотим, чтобы все эти параграфы одинаково выглядели, нам придётся скопировать все настройки элемента p с одного параграфа в другой, то есть продублировать его во всех параграфах. Тем не менее этот вариант удобен для того, чтобы что-то протестировать, когда вы хотите попробовать оформление на одном каком-то элементе, то чтобы не осложнять задачу и не создавать внешний файл или не создавать глобальные стили временно можно использовать внутренние стили для проверки изменений для отдельного элемента разметки. Давайте сейчас в примерах посмотрим как можно подключить стили и вспомним основную терминологию, связанную с CSS.

В первом примере мы рассмотрим с вами использование inline стилей. Видите на 10 строке определяется параграф. И в этом параграфе задается атрибут style. Получается, что мы хотим настроить оформление конкретно этого параграфа. В атрибуте style мы задаем 3 CSS свойства. Это свойство color, определяющее цвет элемента, font-weight, определяющее вес текста, жирным он будет, не жирным или с другими настройками. И font-size, определяющее размер шрифта. Цвет шрифта будет зеленым, шрифт будет жирным и размер шрифта будет 25 пикселей. Давайте запустим и проверим. Вот мы видим оформление, которое было задано с помощью этих inline стилей. Если вы не работали с CSS, если вы не знаете те стили, которые существуют, вы можете обратится к такому сайту htmlbook.ru. Это русскоязычный ресурс, на котором вы можете найти справочник по CSS. Вот на странице Справочник у нас есть каталог со всеми стилями. Вы можете кликнуть по любому стилю, увидеть описание в каких браузерах этот стиль работает, увидеть в каких спецификациях он поддерживается. Посмотреть пример кода, посмотреть описание к стилю. Возможно дополнительные статьи и комментарии пользователей. Рекомендую пользовать этим сайтом, если вы не знаете для каких задач используется то свойство, которое вы встретили в документе. Следующий способ использования стилей, тот который мы обсуждали на слайдах, наиболее предпочтительный – это использование внешних стилей, когда стиль определен в отдельном CSS файле. Вот если мы хотим использовать такой вариант, мы можем в Visual Studio воспользоваться следующим подходом. Для того чтобы добавить стиль, правой кнопкой кликаем по папке проекта, выбираем пункт Add. Если у вас 2012 версия, то у вас есть уже пункт Style Sheet, который позволит добавить стиль в текущую папку. Если у вас другие версии, то вы должны выбрать Add New Item и здесь в поиске найти Style Sheet. Выбрать его в списке возможных документов. Указать имя документу и добавить его в свое приложение. Когда вы создаете CSS файл, что остается после этого сделать? Наполнить его и подключить к конкретной HTML странице. Чтобы проще подключать CSS файл к HTML документу можете воспользоваться функцией Visual Studio – перетаскиванием CSS в элемент head. То есть вы просто в Solution Explorer выбираете необходимый стиль, перетягиваете его на нужную часть страницы, и когда вы отпустите мышку Visual Studio добавит необходимые атрибуты, в которых будет правильно установлен путь к CSS файлу и установлен обязательный путь rel. Атрибут type? Его можно не определять. Это не обязательный путь, без него браузер будет корректно обрабатывать CSS документы. Давайте посмотрим, что находится в Style Sheet CSS, который мы подключили к данной странице. Видите, что сама страница по себе не имеет никакого оформления. Есть только HTML разметка. Но если мы запустим этот документ, то увидим, что он не отличается от стандартного оформления. У нас поменялся фон, у нас поменялось оформление отдельных элементов. Давайте посмотрим, как оформление было добавлено этим CSS файлом. В Style Sheet CSS у нас определены CSS правила. В начале давайте разберемся с терминологией. Как у нас выглядят CSS правила. Каждое правило – это вот такой вот блок кода. Первая часть кода – это селектор. Это специальный набор символов, который определяет какую часть HTML документа вы собираетесь вытащить и оформить. То есть селектор выбирает те элементы, на которые подействует оформление. Дальше, после селектора у нас идет набор свойств или набор определений, настроек, которые указывают какому свойству какое значение будет присваиваться. В блоке с правилами у нас используется свойство, в которое должно устанавливаться какое-то стандартное свойство. Если вы указываете свойство, которого не существует браузер его будет игнорировать. После имени свойства вы ставите двоеточие, а после двоеточия указываете значение, которое собираетесь присвоить элементу. Вот например такой простой блок CSS кода, который определяет правила устанавливающие параграфом рамку шириной в один пиксель. Вот буква p – это у нас и есть селектор, которая говорит, что мы находим на странице все параграфы. Border:1px – это border – свойство, 1px – значение для свойства. Все это вместе называется определением или declaration. Вот например следующее правило, которое встречается у нас в CSS файле – это правило для элемента body. Мы указали селектор body, а это означает, что вся страница, все что находится в body будет использовать вот такие стили. То есть для всего документа будет использоваться background-color: Teal – фон нашего документа, и font-family – это будет Segoe UI, Verdana, Tahoma. Почему мы их перечислили через запятую? Потому что на клиенте не обязательно будет Segoe IU шрифт. Если клиент будет без этого шрифта, то браузер будет пользоваться шрифтом Verdana. Если шрифт Verdana не доступен, то тогда шрифтом Tahoma. Если и его не будет, то будет использован какой-то шрифт по умолчанию, который установлен в браузере. Кстати, вот эти подсказки, которые вы видите в Visual Studio, вот эта иконка, определяющая цвет, определение самого шрифта при наведении на название шрифта – это все появляется в Visual Studio если вы установите расширение WebEssentials. Как веб разработчикам рекомендую вам поставить в свою Visual Studio этот плагин для того, чтобы ускорить работу с кодом. Следующее правило, которое мы видим в документе, строка 26, div, p. Такой селектор указывает, что мы хотим найти на странице все div, все параграфы и для этих элементов установить font-style: italic. Это означает, что все div и параграфы будут использовать шрифт курсивом. Получается этот div, этот параграф, эти элементы, и тот элемент на 24 строке – все они будут выделены курсивом. Давайте проверим. Видите, все эти элементы действительно написались курсивом. Стиль Italic к ним применился. Следующее правило, которое мы видим – это 32 строка. Правило с селектором .test. Если вы видите правило, которое начинается с точки – это означает, что вы в документе будете присваивать вот эти стили тем элементам, которые используют атрибут class со значением test. В нашем случае есть только один элемент. Div на 14 строке, который использует класс test. Получается, что вот он на 34 строке div получит шрифт красного цвета, размер шрифта будет 20 пикселей. Шрифт будет жирным. Если мы видим селектор, в котором первый символ решетка – это означает, что данный селектор находит на странице элемент, который использует атрибут id, со значением test3. На строке 24 у нас есть div с id test3. Вот этот div должен будет использовать padding 10px – это внешние отступы и рамку, сплошную (solid) шириной в 1px и красного цвета. Давайте проверим. Div, который test вот жирным шрифтом вывелся. Немножко больший шрифт и красного цвета. А div, который использует id test3, вот у нас красная рамочка и отступы в 10px. Вот мы видим эти отступы. Если мы поставим здесь например не 10, а допустим 80. Сохраним эту страницу, точнее этот стиль и обновим браузер, то видим, что отступы стали намного больше. Следующее правило на 47 строчке указывает на то, что мы находим параграф, и если у параграфа есть атрибут class со значением test2, то тогда этому параграфу добавляется свойство text-decoration: underline. Это означает, что текст, находящийся в параграфе с таким классом будет у нас подчеркнутый. У нас есть только один параграф, использующий test2. Вот у нас этот параграф с подчеркнутым текстом. Последнее правило в этом css файле использует селектор ul li. Такой селектор указывает, что мы ищем элементы li, которые находятся в элементе ul и ставим элементам li желтый цвет. У нас есть один списочный элемент, вот и получается, что благодаря правилу li элементы будут желтого цвета. Вот мы это видели в документе. Обычно создание CSS стиля, который привязывается через id связано с оформление каких-то элементов, которые встречаются на странице один раз. Например, если мы хотим создать оформление для шапки сайта, для меню сайта. Так как шапка или меню у нас одно, то тогда мы можем оформить оформление через id. Если мы создаем стили для нескольких элементов, например стили для картинок на сайте или для параграфов, или стили для заголовков статей, которые встречаются несколько раз на странице, то тогда есть смысл использовать такие селекторы, селекторы которые привязываются к атрибуту class. Если мы хотим сделать более специфичные стили, которые привязываются к какому-то типу элементов, которые используют какой-то атрибут, то там мы можем использовать такие селекторы: селектор, который ищет тип элемента, а потом ищет атрибут class. Примеры, которые мы сейчас рассмотрели – это всего лишь вершина айсберга. На самом деле в CSS намного больше свойств и селекторов. Для того, чтобы их выучить 10 минут будет не достаточно. Задача этих примеров заключалась в том, чтобы обновить ваши знания о CSS и вспомнить основные способы применения CSS к документу. Сейчас мы рассмотрим несколько свойств, которые пригодятся для разбора следующих примеров этого урока. Обратите внимание, что название папки, с которой мы сейчас начинаем работать – это CSS for DHTML. Я думаю, что многие из вас слышали такой термин как DHTML – это Dynamic HTML. По сути это комбинация HTML, CSS и JavaScript кода. И как раз благодаря JavaScript коду у нас появляется динамика. Мы сейчас с вами рассмотрим, как можно с помощью JavaScript кода менять положение элементов, как можно динамически менять оформление элементов. Но перед тем как мы перейдем к этим примерам мы разберем несколько свойств.

Первое свойство – это свойство position. C его помощью мы можем определить как элемент позиционируется относительно окна браузера или относительно других элементов разметки. В первом примере в документе находится несколько элементов. Находится три div. Для всех div у нас задаются настройки на 12 строке. Для всех div мы устанавливаем рамку красного цвета шириной в 1 пиксель. У всех div будет внутренний отступ, высота и ширина равная 100 пикселям и background-color: pink. Если мы сейчас запустим страницу. Вот мы видим три div и как они оформлены. Но так же для каждого div у нас задается уникальное оформление с помощью селектора основанного на id.

Вот у нас для первого div есть селектор divAbsolute, для второго – divFixed и для третьего divRelated. Каждый из этих id привязывается к правилу, которое меняет свойство position. Вот первый div использует position absolute. Давайте посмотрим, как это выглядит. Вот правило, которое находит div по id, и вот те настройки, которые это правило задает. Position absolute означает, что элемент перестает позиционироваться относительно своих дочерних элементов, он теперь самостоятельно находится на странице. И мы теперь с помощью координат мы можем разместить его в любой части документа. Координаты для элемента задаются с помощью двух свойств: top и left. То есть отступ слева (от левой части браузера) и отступ от верхней части браузера. Если мы сейчас посмотрим на absolute элемент – видите 300 пикселей слева (вот мы видим этот отступ) и 30 пикселей сверху (вот этот отступ). И теперь если мы будем рядом помещать еще какие-то элементы – то эти элементы никак не будут влиять на div с абсолютным позиционированием. Он, по сути, будет находиться на странице сам по себе.

Второй тип позиционирования задается для div с id divFixed. Позиционирование устанавливается на 38-й строке, и значение свойства position у нас устанавливается как fixed. Мы указываем, что сверху нам необходимо сделать отступ в 300 пикселей, а справа отступ в 0 пикселей. Если вы устанавливаете значение right – то значение свойства left уже устанавливать не стоит. То есть только одно из значений вы должны установить. Если вы устанавливаете значение top – то значение свойства bottom устанавливать не надо. Ну и наоборот. Значит, в чем заключается работа значения fixed? Наше окно имеет большую высоту: 2000 пикселей. Когда мы устанавливаем что позиционирование у нас фиксированное – это означает, что элемент отображается, по сути, так же, как и absolute-элемент, то есть, на него не влияют соседние элементы разметки. Но при этом элемент находится всегда в одной и той же видимой части документа. Что имеется ввиду? Вот сейчас у нас фиксированный div находится в правом нижнем углу. Если мы будем скролить сейчас документ – div все так же будет находиться в правом нижнем углу. Я думаю, вы часто встречали сайты, на которых справа или слева находится меню. И когда вы скролите сайт, то меню всегда находится в видимой части сайта. Оно всегда перемещается вместе с вашим сколом.

Третье позиционирование – это позиционирование relative (относительно элемента, в котором мы находимся). Если мы устанавливаем position: relative – то, у нас, как и в случае с другими позициями начинают работать свойства top и left. Но теперь эти свойства будут относиться к тому контейнеру, в котором мы находимся. Вот мы сейчас устанавливаем divRelative. Определяем правило для id divRelative. Вот наш элемент, в котором используется id divRelative. Получается, что позиционирование этого элемента будет происходить относительно div в котором он находится. И вот мы видим отступы, которые были заданы. Вот этот синий div – это и есть div, для которого был задан relative position. Если вам интересно как связано свойство position с DHTML, то представьте задачу в которой, вы с помощью мышки перетягиваете элементы на странице. Вы можете захватить любой элемент и переместить его в новую позицию. Для того чтобы элемент мог перемещаться независимо от других элементов, нам придется position absolute. В следующих примерах мы как раз увидим с вами подобные возможности JavaScript кода.

Второй пример покажет нам использование свойства z-index. Это свойство есть смысл использовать, когда мы применяли одно из позиционирований позволяющее разместить элементы один над другим. В стандартных настройках элементов, когда мы устанавливаем свойство position, то position равен значению static. Это означает, что элементы находятся на странице друг за другом. То есть каждый элемент как-то влияет на следующий элемент и смещает следующий элемент. Получается невозможно сделать так, чтобы один элемент наехал на другой элемент. Но если мы устанавливаем position absolute, или любой другой вариант position, который был рассмотрен в предыдущем примере, то с помощью координат мы можем сделать так, чтобы один элемент отображался поверх другого элемента. Если при этом нам необходимо контролировать, какой элемент находится ближе к зрителю, а какой дальше, то в таких ситуациях мы можем использовать z-index. Вы видите, что на 11-й строке создается правило для элементов div. Все div у нас будут с position absolute, и у всех div будет одинаковая высота, ширина и оформление рамочки. Но каждому div уже в самой разметке мы устанавливаем такой параметр, как left top. Специально устанавливаем значения, которые сделают div размещенными друг над другом. И также мы устанавливаем параметр z-index. Чем больше будет значение z-index, тем ближе будет элемент находиться к зрителю. И хоть элементы находятся друг над другом, по сути, этот элемент находился в разметке первый, потом поверх первого элемента мы наложили второй, и поверх второго третий – то по идее мы должны были бы видеть желтый элемент полностью. Потому что он был последний в разметке, он должен нарисоваться последний, поверх всех элементов. Но так как мы поменяли z-index, на самом деле, красный элемент будет находиться ближе всего к зрителю, а желтый элемент – дальше от зрителя. Вот мы видим что красный – первый, потом зеленый, потом желтый. Если мы возьмем и удалим все эти свойства z-index, то вот как по умолчанию элементы выстроятся. Желтый будет сверху. Если мы вернем значения, но поменяем z-index у второго элемента, скажем что z-index, например, будет равен 5, то в таком случае зеленый элемент будет выше, потому, что у него самый большой z-index. Значит с помощью этого свойства z-index, мы можем контролировать, какой элемент ближе к зрителю, а какой дальше.

Последнее свойство из этой папочки показывает, как можно элемент делать видимым или невидимым для зрителя. Сейчас у нас на странице размещено несколько div. Находится 5 div и вы видите что у 2-х div задается атрибут style. На 22-й строчке style задается как display:none, а на строчке 25 style использует свойство visibility:hidden. В чем будут заключаться 2 этих параметра? Тот элемент, для которого мы установили display:none (строка 22) полностью исчез из разметки. То есть, между 1-м и 3-м элементом у нас ничего нету. То есть, элемент на самом деле в разметке есть, просто он не занимает никакого места и не влияет на соседние элементы. То есть, он просто перестал отображаться в документе и перестал влиять на позиционирование. Если мы используем свойство visibility:hidden – то это означает что элемент у нас остается в документе. Он перестает быть видимым, но при этом влияет на соседние элементы и делает так чтобы они, как бы, перемещались так, словно у нас остается видимым (словно он есть в документе). Но, при этом сам элемент у нас отсутствует из-за visibility:hidden. Если мы хотим отобразить этот элемент, то вместо hidden, мы должны поставить значение visible. Вот в таком случае элемент у нас станет заново видимым. Вот 4-й элемент отобразился. Если мы хотим таким же образом отобразить элемент, спрятанный с помощью display, то мы можем выбрать один из нескольких вариантов. display:none означает что элемент невидимый. Для того чтобы сделать его заново видимым, мы можем использовать или параметр block, или параметр inline, или любой другой параметр, который вы видите в подсказке Visual Studio. Вот, например, элемент div по определению блочный элемент, поэтому если он видимый, мы должны установить ему параметр display:block. Тогда он будет отображаться так, как отображался при своих стандартных настройках. Вот мы обновили страницу и вот 2-й элемент отобразился. Чтобы его спрятать, мы задаем значение none. Элемент исчезает. Чтобы спрятать с помощью visibility мы устанавливаем значение hidden. И элемент тоже исчезает. Два этих свойства нам пригодятся в следующих примерах. Мы будем их часто встречать.

Теперь мы подошли к примерам, в которых рассмотрим, как можно с помощью JavaScript кода менять отдельные CSS свойства элементов. В этом примере мы хотим сделать следующее: у нас есть страница, на которой размещен отдельно div красного цвета. При нажатии на кнопку «сменить цвет» – div должен стать зеленым. Кликнули – div стал зеленый. Как реализована эта страница? div у нас находится на 25-й строке. Вот свойства, которые задали размер, фон для этого div. Наша сейчас задача, с помощью JavaScript кода, поменять значение свойства background-color. Изначальное значение red. Нам нужно сделать его green. Для того, чтобы сделать смену цвета, первое что мы сделали – это добавили кнопку. Далее на загрузку документа, после того как страница будет загружена (12-я строчка) мы находим кнопку на странице. Для этого используем getElementsByTagName, ищем элементы с именем input, берем нулевой элемент. Конечно, для большой страницы такой вариант не подойдет, так как input, скорее всего, будет много у нас. На 14-й строке делаем обработчик на нажатие по кнопке. И 15-я строчка находим первый div который есть на странице. Тоже используем функцию getElementsByTagName. Находим нулевой div и теперь момент, в котором мы показываем как меняется CSS свойство. По сути, 18-я строчка – это и есть то, на что мы должны с вами акцентировать внимание в этом примере. Для того чтобы поменять стиль любого DOM элемента нам необходимо обратиться к свойству style, которое вызывается на этом элементе. Свойство style возвращает нам объект, который уже заполнен различными свойствами. Названия свойств соответствуют названия свойств в CSS. Единственное, есть небольшие изменения. Вот если в CSS мы называем свойство background-color, то в JavaScript кода такое название у нас не подойдет. Потому что в там случае это будет означать, что от переменной background мы отнимаем значение переменной color. Поэтому, когда мы работаем в JavaScript коде, то все CSS свойства у нас переименовываются. И правило переименования следующее: мы берем черточку (дефис-знак), удаляем ее и следующий после него символ переводим в верхний регистр. По сути, результирующее название – это именование в стиле CamelCasing. То есть, перевод следующего символа в верхний регистр – это именование CamelCasing. Есть даже такое шутливое название этому процессу – «верблюдизация». То есть мы переводим CSS свойства по определенному правилу в JavaScript название. Например, у нас на слайде есть еще один пример: font-family. Если мы такое свойство используем в CSS, то в JavaScript коде, мы его переделываем на fontFamily. Поэтому для того чтобы знать какие свойства у нас есть в JavaScript коде, нам не надо изучать отдельно список этих свойств. Мы можем использовать те же имена которые применяются в CSS. Ну и вот мы увидели с вами результат. При нажатии по кнопке – меняться цвет div.

В следующем примере мы разберем как можно менять класс, который использует элемент. В начале документа у нас создано 2 класса: с именем class1 и с именем class2. Первый класс задает font-family:Tahoma и цвет шрифт blue. Второй класс задает font-family:Courier New и цвет шрифта red. На самой странице у нас есть 2 кнопки с id first и second и соответствующими текстами. На 41-й строке есть div с id testDiv. Мы хотим чтобы при нажатии по соответствующей кнопке элементу div присваивались различные CSS классы. Когда страница будет загружена, на 23-й строке мы находим элемент с id first и указываем, что на событие onclick должна запускаться функция firstButtonHandler. То же самое делаем для элемента с id second. На событие onclick устанавливаем обработчик, но только другую функцию secondButtonHandler. И далее, на 25-й строке в переменную div, которая создана выше, мы записываем значение элемента по id testDiv. Эту переменную мы сделали здесь, для того чтобы она была доступна и в первой и во второй функции. То есть, функциям-обработчикам нажатия по кнопке. Когда мы кликаем по первой кнопке, на строке 30-й мы берем элемент div и в свойство className записываем имя класса (class1). По сути, вот сейчас на 30-й строчке мы указываем что элемент, который определен на 41-й строке, должен использовать правило, которое находится на 8-й строчке. По сути, вот этот кусочек кода, на 30-й строке, эквивалентен выполнению вот такой операции. Когда атрибуту class мы задаем значение class1. Если мы нажимаем на 2-ю кнопку, то в таком случае значение свойства className мы переписываем и задаем в className имя class2. Соответственно меняем стиль на противоположный. Вот исходный стиль div по умолчанию. При нажатии на first – синий цвет, шрифт Tahoma, при нажатии на second – красный цвет и шрифт Courier New. Вот как с помощью JavaScript кода мы можем менять CSS классы.

В следующем примере мы рассмотрим что такое Computed Style. Любой из вас кто начнет делать домашнее задание, кто начнет делать свои собственные сценарии, в любом случае столкнется вот с этой проблемой, которая называется вычисляемыми свойствами. Первый пример показывает, что такое вычисляемые свойства, и в чем заключается проблема при работе с вычисляемыми свойствами в JavaScript коде. Сейчас у нас на странице есть 2 элемента: div на 36-й строчке, который использует id first, и div на 39-й строчке, который использует id second и атрибут style со значением background-color: red. И есть 2 кнопки. Первая кнопка получает оформление первого div, вторая кнопка получает оформление второго div. Оформление первого div задается вот таким способом. На строке 7-й мы создаем оформление для 2-х div, указываем, что div буду одинаковой высоты и широты, а на 12-й строчке делаем вот такое вот правило. Говорим, что div с id first будет использовать background-color: green. Получается, что div у нас одинаковых размеров, первый div – зеленый, а второй div – красный. В соответствии с атрибутом style. Теперь давайте посмотрим на JavaScript код этого примера. На строке 19-й создаются 2 переменные: div1 и div2. В эти переменные записываются элементы в соответствии с id: first и second. Далее, на 23-й строке мы находим кнопку btn1, кнопку, которая находится у нас на 41-й строчке. И в этой кнопке в обработчике на нажатие с помощью alert отображаем вот так вот значение: div1.style.backgroundColor. По сути, мы хотим показать пользователю цвет вот этого первого div. Цвет этого div с id first был у нас задан с помощью вот этих вот правил, с помощью CSS правил. Цвет второго div, который находится на 39-й строчке, был задан с помощью inline стилю, с помощью атрибута style. И на 28-й строчке вторая кнопка, которую мы находим на странице и добавляем в обработчик onclick. Вторая кнопка при нажатии увидит у нас с помощью alert backgroundColor второго div. Давайте посмотрим какие именно цвета будут выводить какие кнопки. То есть первая кнопка должна вывести цвет green. Мы по ней нажимаем и видим что first div style – это ничего. То есть, никакое сообщение не отобразилось. Если мы посмотрим на код, вот этот текст firstDivStyle, он как раз идет перед тем значением, которое находится в backgroundColor. И оказывается, что никакого значения у нас нету. Хотя элемент у нас рисуется как зеленый. Если мы кликаем по второму div, то мы видим, что для него цвет отображается как красный, потому что действительно красного цвета. Вот и получается, что div у нас на странице есть, div у нас оформлены, но для первого div у нас нету свойства backgroundColor, а для второго div backgroundColor есть. С чем это связано? Связано это с тем, что первый элемент, который находится на 36-й строке (первый div), он свои стили получает в момент, когда браузер создает дерево DOM. Браузер, по сути, на лету вычисляет для этого элемента стили, опираясь на те CSS правила, которые соответствуют позиции элемента в DOM-дереве. А вот для второго элемента, который находится на 39-й строке, настройки являются частью DOM-дерева. То есть, они у нас прописаны в атрибуте непосредственно второго div. Те стили, которые вычисляет браузер, называются ComputedStyles. Это стили которые задаются через CSS. И с вот этими стилями мы не можем работать, если обращаемся к свойству style. То есть через свойство style можно получить только доступ к стилям, которые были заданы либо через атрибуты, либо эти стили были заданы непосредственно JavaScript кодом через это же свойство style. Вот получается, что если мы задали стили через CSS правило – то получать доступ к ним из JavaScript кода нам необходимо другим способом. Каким именно – показано в 4-м примере.

Для того чтобы получить доступ к computed styles в 4-м примере мы произвели небольшие изменения. Если мы запустим этот пример, то нажав на кнопку get first styles, мы видим, что мы получаем первый стиль, который вычислил браузер. Это вот RGB: Red, Green, Blue интенсивности каналов, которые и определяют зеленый цвет. При нажатии на вторую кнопку мы видим цвет, который был установлен для второго элемента, для красного элемента. Для того чтобы получать доступ к computed styles, на строке 32-й мы создаем функцию которую называем getStyle. И эта функция позволит нам получить доступ к стилям элементов и при этом эта функция будет кроссбраузерная. Значит, когда мы запускаем эту функцию, первым параметром мы должны передать элемент, с которым собираемся работать. А вторым параметром мы передаем имя свойства, которое будем искать в этом элементе (имя CSS свойства). Далее мы проверяем: если элемент, который мы получили, содержит в себе свойство currentStyle – это означает, что мы работаем со старыми версиями Internet Explorer, и вычисляемые свойства в этих версиях как раз получается с помощью свойства currentStyle. На 34-й строке мы с помощью element.currentStyle, с помощью такого обращения, получаем доступ к вычисляемым стилям вот этого CSS свойства. То есть получается, мы в styleName передаем допустим, backgroundColor, или fontFamily, или еще какое то CSS свойство, которое было задано с помощью отдельного CSS правила и получается что браузер возвращает нам тот стиль, который был отдельно вычислен. Если мы работаем с более современными версиями браузеров, то в таком случае, у нас будет присутствовать метод get(ComputedStyle). Когда мы вызываем этот метод, нам в параметрах необходимо указать для какого элемента мы собираемся получить вычисляемые стили. Вот на 37-й строке мы на объекте window вызываем getComputedStyle и указываем, какой элемент нас интересует в DOM-дереве. Вторым параметром мы можем дополнительно указать псевдо-элементы, которые помогут нам произвести поиск по дереву, и в итоге, эта функция вернет объект, в котором мы сможем получить доступ ко всем вычисляемым стилям определенного элемента. То есть, объект, который возвращается этой функцией – это объект со всеми стилями, которые браузер вычислил для указанного элемента. Мы, по сути, обращаемся к тому стилю, который нас интересует, который мы передали в качестве второго элемента. Теперь как мы запускаем эту функцию? Для того чтобы выполнить получение вычисляемых стилей, на строке 23, когда выводим alert, мы не обращаемся непосредственно к свойству div1.style. Мы запускаем функцию getStyle, первым параметром передаем элемент, который нас интересует, а вторым параметром мы передаем имя стиля, который мы хотим извлечь. Именно computed стиля, который рассчитал браузер. Указываем backgroundColor и получаем значение backgroundColor для div1. А на 27-й строке получаем таким же способом значение backgroundColor для div2.

Дальше мы рассмотрим несколько примеров применения JavaScript для создания интересных эффектов. Первый эффект, который мы разберем – это всплывающая подсказка tooltip. На странице отображается текст. Когда мы мышкой наводим на этот текст – у нас появляется всплывающая подсказка, которая передвигается вместе с движением курсора. Выходим за пределы элемента с текстом, – подсказка исчезает. Появляется при попадании курсора на текст и исчезает при выходе курсора за пределы текста. Для того, чтобы сделать эту подсказку, мы написали здесь JavaScript код, который будет привязывать обработчики элементу с id test. То есть, вот это и есть наше текстовое сообщение, на которое мы собираемся навешивать tooltip. За работу tooltip отвечает отдельная функция-конструктор. Эту функцию-конструктор создаем мы на 19-й строке. Когда она будет выполняться, она создаст объект, содержащий в себе только одно свойство: свойство tooltip. Это свойство будет представлять собой элемент DOM. Это обычный элемент div. После того как мы создаем этот элемент (строка 21-я), мы начинаем настраивать его стили. Первый стиль, который мы устанавливаем, это стиль position:absolute. Почему устанавливаем абсолютное позиционирование? Потому что tooltip при перемещении по странице не должен никак влиять на соседние элементы. Поэтому мы ставим специально значение absolute, чтобы с помощью координат x и y можно было поместить tooltip в любую часть документа. Изначально tooltip должен быть спрятан, мы его должны показать только тогда, когда курсор мыши зайдет в необходимую нам область. Поэтому на 22-й строке, с помощью style.visibility = “hidden” мы прячем tooltip от пользователя. Ну и для того чтобы tooltip был интересно оформлен (строка 23-я) для свойства className с tooltip, мы задаем имя tooltip. Это имя связывает данный DOM-элемент с правилом, которое создано на 7-й строке. В этом правиле мы используем CSS 3-е свойство box-shadow, которое добавляет нам тень черного цвета, и указываем те настройки, которые необходимы для самого элемента tooltip. Мы указываем цвет фона tooltip, рамочку, которая должна будет рисоваться вокруг tooltip, внутренний отступ padding и настройки шрифта. Получается что функция-конструктор, создаст объект с одним свойством – свойством tooltip. В этом свойстве находится div, который использует некоторое оформление (несколько CSS правил). И в этот div мы в будущем будем помещать текст, который отобразится пользователю. Но для того чтобы tooltip у нас в какой то момент времени появлялся, а в какой то момент времени исчезал, нам необходимо добавить еще методы, которые будут контролировать появление и исчезновение tooltip. На строке 27-й создается метод show. Если вы помните, мы недавно обсуждали с вами что все методы, которые создаются в объектах, желательно помещать в прототипы. Потому что метод, он все-таки для всех объектов будет иметь одинаковою функциональность. Сколько б мы не создали экземпляров tooltip, все методы будут выполнять одни и те же действия. Поэтому нет смысла метод дублировать в каждом объекте. Лучше этот метод перенести в прототип. Задача метода show отобразить tooltip с определенным текстом, который указывается первым параметром, в определенных координатах, которые указываются вторым и третьим параметром. Как только мы вызываем метод show, мы в tooltip в innerHTML записываем текст, который пришел первым параметром. Как раз вот div, который мы создали на 20-й строке, получает теперь свое внутренне содержимое, то, что div должен отображать. Далее 29-я и 30-я строчка мы задаем значения для свойства left и top. В эти значения указываем параметр x, который пришел в метод плюс единицы измерения. То есть, мы хотим, чтобы слева отступ был в x пикселей, а сверху в y пикселей в соответствии с параметрами. Ну и раз мы вызвали метод show, элемент нужно отобразить, потому что на 22-й строке изначально div у нас использует visibility hidden. То есть, он невидимый. На строке 31-й с помощью visibility visible мы div отображаем, он становится видимый пользователю. На 34-й строке все, что нам остается сделать, это добавить div в DOM-дерево. Потому что сам по себе сейчас div он летает в воздухе. Это объект, который есть в памяти нашего сценария. Он еще не был прикреплен к дереву. На строке 34-й для того чтобы div помещать в дерево только один раз, мы делаем вот такую проверку. Берем свойство tooltip и проверяем parentNode. Кто родительский узел tooltip? Если родительский узел tooltip не document.body, то тогда 35-я строчка мы в document в body с помощью appendChild добавляем этот tooltip. Если мы потом еще раз вызовем show на объекте этого tooltip, то это условие уже не сработает, потому что tooltip будет находиться в body элемента, и соответственно условие у нас не выполнится. Вот таким способом мы tooltip отображаем.

Чтобы его спрятать – операций у нас намного меньше. Строка 40-я – мы просто выполняем операция присвоения свойству visibility значение hidden. И это мы делаем функцией с именем hide. В итоге у нас получается объект tooltip, который содержит в себе информацию о div с всплывающей подсказкой, то есть свойство tooltip и 2 метода: метод show отображения подсказки и метод hide для того чтобы спрятать подсказку. Теперь остается только определить момент, при котором у нас tooltip должен отобразиться пользователю и момент, когда tooltip должен исчезнуть со страницы. Здесь мы немножко с вами забежим вперед и рассмотрим события, которые будут рассматриваться на следующих уроках. На 43-й строке мы обрабатываем событие загрузки документа. При этом на 44-й строчке мы находим элемент с id test, а далее на этом элементе устанавливаем обработчики для событий onmousemove и onmouseout. onmousemove – это событие, которое неоднократно вызывается, пока курсор мыши двигается над поверхностью элемента. onmouseout – это событие, которое вызывается когда курсор мыши выходит за пределы элемента. Вот пока мы двигаемся по поверхности элемента – срабатывает mouseMoveHandler. Как только мы выходим за пределы элемента – срабатывает mouseOutHandler. Каждый раз, когда браузер запускает обработчик события onmousemove, onmouseout и в принципе любой другой обработчик, браузер, при запуске функции-обработчика, передает в нее специальный объект, который содержит в себе основные сведенья о событии (когда, почему и где событие произошло). И вот если мы посмотрим на mouseMoveHandler (эта функция находится у нас на 52-й строчке), вы видите, что эта функция принимает один параметр. Вот этот параметр – это как раз и есть те данные, которые приходят к нам от браузера. Что мы делаем с этими данными? Во-первых, мы проверяем, что именно браузер прислал. Если браузер прислал значение undefined – это означает, что браузер не поддерживает передачу параметров при вызове функции-обработчика. Это означает, что параметры придется получить другим способом. Вот, по сути, на 52-й строчке мы и выполняем этот другой способ получения параметров. Если e у нас undefined – то в таком случае срабатывает отрицание, мы попадаем в условие и в переменную e записываем window.event.

Event – это свойство с информацией о событии, которое сейчас происходит в нашем сценарии. В любом случае после выполнения этого условия, у нас переменная e будет с какими-то данными внутри. Теперь на 53-й строке нам остается только отобразить нашу подсказку. До этого, на строке 49-й, используя функцию-конструктор, мы создали объект tooltip-а. А теперь на 53-й строке мы вызываем на этой переменной t функцию show, указываем текст, который нужно отобразить пользователю и указываем в каких координатах, этот текст будет отображаться. Когда браузер запускает событие mouseMove, браузер вместе с событием передает объект, в котором находятся дополнительные сведения для события. Это координаты x и y мыши на поверхности экрана. Вот мы узнаем clientX, clientY значения позиции мышки и вот, по сути, эти параметры передаем на строку 27-ю в аргументы x и y. И соответственно отображаем tooltip в заданной позиции. Эта позиция будет немного отличаться от позиции курсора мыши, потому что мы специально добавляем значение 10 (и к параметру x, и к параметру y). Но когда курсор выйдет за пределы элемента, когда срабатывает onmouseout, то в таком случае (56-я строка) вызывается функция-обработчик, которая на переменной t вызывает hide. То есть мы на объекте tooltip-а вызываем метод hide и прячем tooltip от пользователя. Вот этим самым получаем на выходе вот такое поведение. Наводим мышку – срабатывает функция onmousemove, мы двигаем мышку – повторно запускается onmousemove и tooltip постоянно перерисовывается. Как только мы выводим мышку за пределы элемента – срабатывает onmouseout и tooltip у нас прячется, становится невидимый для пользователя.

Оставшиеся примеры будут посвящены анимации. Вначале разберем очень примитивную анимацию цвета. На странице находится элемент, который с периодичностью в полсекунды меняет цвет: с белого на желтый, потом на оранжевый, и на красный, и опять повторяется цикл. Для того чтобы реализовать такое поведение на страницу мы размещаем div, который и будет менять свой цвет. Далее после div мы создаем элемент script. Так как этот элемент находится после элемента, который нам необходимо и изменять – то нам не приходится создавать обработчик на загрузку документа. window.onload мы здесь не определяем. На 12-й строке мы обращаемся через метод getElementById к элементу rect, получаем на него ссылку, далее задаем для него высоту и ширину и устанавливаем рамочку. Теперь 18-я строчка, создается массив, в котором будут находиться все те цвета, которые мы хотим изменять как фон элемента rect. И 19-я строчка, мы создаем переменную, в которой будет находиться текущий цвет, который мы собираемся вывести пользователю. Изначально мы устанавливаем, что текущим цветом у нас будет цвет white. Потом, с определенной периодичностью, нам нужно эту переменную инкрементировать и устанавливать следующий цвет. То есть, когда мы увеличиваем значение следующей переменной nextColor на 1, то div поменяется у нас на желтый. Еще сделаем плюс один для nextColor, и div станет оранжевым. И так далее. Для того чтобы сделать последовательное изменение цвета с определенным интервалом, мы пользуемся функцией, которую разбирали на прошлых занятиях (функцию setInterval). Вызывая эту функцию, в качестве первого параметра мы передаем то действие, которое хотим повторять неоднократно.

Вот, что в этом действии мы определяем. Мы берем элемент e, то есть элемент rect в свойство style, в backgroundColor записываем массив colors (массив вот этих вот цветов). И указываем, что мы получаем доступ к элементу nextColor++ % colors.length. nextColor – это целочисленная переменная, которую мы инкрементируем. Но инкрементируем ее не на этой строке, а на следующей строке. Когда эта инструкция будет выполнена – nextColor увеличится на 1. % - это у нас остаток от деления. И мы указываем, что эту переменную мы делим на длину массива length и получаем остаток от деления. То есть, если переменная nextColor равно 0, то мы говорим, что на следующей итерации мы ее увеличим, но пока на этой строке мы ее увеличивать не будет. Вот 0 мы делим на 4: остаток от деления будет 0. Соответственно мы получим доступ к нулевому элементу, вытащим значение white и backgroundColor будет белым. Через 500мс эта функция запустится еще раз. Но когда она будет запускаться второй раз – сработает ++, который мы указали на предыдущей итерации. То есть, инкремент будет выполняться уже после того как инструкция на 23-й строке отработает. На следующей итерации nextColor уже будет равен 1. Вот мы получаем 1, в остаток от деления на 4 получаем 1 и получаем желтый цвет. Потом еще раз инкрементируем значение. Получаем 2, в остаток от деления получим 2, потом в остаток от деления 3 на 4 получим 3. Далее, когда мы дойдем до значения 4, когда nextColor будет равный 4, а остаток от деления у нас будет 0. То есть 4 поделить на 4 – остаток от деления 0 и мы вернулись опять к белому цвету. Потом nextColor увеличится и будет равный 5. 5 поделить на 4 – остаток от деления будет равный 1. То есть, мы возьмем желтый цвет, потом оранжевый, потом красный, и получается, что вот мы переменную nextColor просто постоянно увеличиваем (инкрементируем ее) и получая остаток от деления на длину массива, мы постоянно получаем индекс, который находится вот в диапазоне массива. То есть, мы не выходим никогда за пределы массива. Вот такой вот одной строчкой, мы циклически перебираем все цвета, которые заложены в массиве. Когда мы говорим о анимации цвета, то в первую очередь перед глазами представляется картина плавного перехода от одного цвета к другому цвету. В нашем же случае цвет у нас меняется рывками. Мы сначала устанавливаем один цвет, потом другой цвет, третий цвет. Давайте сейчас посмотрим, как можно сделать плавный переход от одного цвета к другому. Для этого мы будем использовать цветовую модель HSL(Hue, Saturation, Lightness). Вы все привыкли использовать модель RGB: Red, Green, Blue – когда мы цвет определяем с помощью интенсивности трех каналов: красного, зеленого и синего цветов. И смешивая каждый цвет, мы получаем новый, необходимый нам цвет.

Используя цветовую модель HSL, мы используем Hue – то есть цвет, потом Saturation – это насыщенность, Lightness – яркость цвета. Давайте посмотрим, как работает вот эта цветовая модель на примере какого-нибудь сайта, предоставляющего механизм выбора цвета. Если в поисковике ввести hsl wheel например, возьмем первую же ссылку, то вот смотрите из каких составляющих состоит hsl цвет. Первый – это градус, определяющий, где мы находимся на цветовом круге. Если мы ставим значение 0, то вот мы находимся на красном цвете. Если мы двигаем по часовой стрелке, видите, у нас меняется угол поворота и соответственно меняется цвет. Если мы хотим редактировать параметр Saturation – мы устанавливаем насыщенность цвета (от серого, к синему цвету). И также мы можем устанавливать яркость цвета. Вот чем дальше мы от центра круга – тем цвет ярче, и чем ближе к кругу – тем цвет темнее. Вот получается, что мы сейчас можем, очень просто с помощью JavaScript кода начать редактировать значение угла поворота. Если мы будем плавно менять значение Hue – то мы сможем достигнуть плавного перехода от одного цвета к другому цвету. HSL – цветовая модель, которая появляется в CSS третьей спецификации, и мы сейчас эту модель будем использовать в седьмом примере. Сама разметка примера практически не меняется. У нас изменяется только setInterval, в которой мы меняем цвет с определенной периодичностью. Если раньше у нас был массив, то сейчас у нас появляется переменная color, которая определяет угол поворота. Вот начиная с градуса 0, то есть получается, начиная с красного цвета, мы будем двигаться по часовой стрелке и плавно переходить от одного цвета к другому цвету. Видите, от красного цвета мы переходим к желтому, к зеленому и, по сути, всеми цветами радуги сейчас будет переливаться наш прямоугольник. В итоге мы доходим до синего, сейчас уже к градусу 360 и вот мы опять вернулись на красный цвет. И опять заново делаем проход по цветовому кругу. Для того чтобы сделать последовательное изменение переменной color от 0 до 360 и заново от 0 до 360, на 23-й строке мы используем подход, который применяли в предыдущем примере. В переменную color мы записываем color+1 и получаем остаток от деления на 360. То есть, переменная color будет бесконечно увеличиваться, но значение, которое мы будем получать в результате операции деления с остатком, у нас всегда будет в диапазоне от 0 до 360. И это значение в итоге мы будем использовать на 24-й строке, когда будет формировать значение свойства backgroundColor.

Для того чтобы в CSS3 задать цвет с использованием модели hsl нам нужно использовать вот такую вот нотацию: вызвать, грубо говоря, функцию (на самом деле в CSS функций нету). Вызываем hsl: первым параметром указываем угол поворота, допустим 30 градусов, вторым параметром мы указываем насыщенность цвета (100%), и третьим параметром мы указываем яркость цвета (50%). Вот таким вот способом мы задаем цвет. Вот, например, если мы поставим hsl в первом параметре 0 – это означает, что мы создаем красный цвет. Если мы посмотрим на цветовой круг, если мы поставим значение приблизительно равное 90, – мы получим зеленый цвет. И так далее. Вот мы сейчас значение первого аргумента постоянно меняем в цикле с периодичностью в 50мс, и получается, что цвет у нас плавно переходит от одного к другому. И вот реализовывается наша анимация.

Ну и в последнем примере мы рассмотрим простую анимацию, которая заставит элемент передвигаться по странице. На строке 23-й создается div. С помощью атрибута style, мы задаем высоту и ширину div, задаем ему фоновый цвет и устанавливаем position: relative, потому что благодаря этому способу позиционирования мы сможем задавать координаты относительно левого верхнего угла окна. Так же мы могли бы вместо relative установить значение absolute. В этом примере оно тоже бы подошло. Сейчас мы хотим запустить счетчик и начать перемещать элемент div1 слева направо с определенной периодичностью. Для того чтобы запустить счетчик, вначале, после загрузки документа, мы находим на 12-й строке элемент с id div1 и записываем его в переменную. На 13-й строке вызываем функцию setInterval. Указываем, что функцию animate необходимо запускать с периодичностью в 10мс. Что делает функция animate? На 17-й строке в этой функции мы берем div1, берем свойство style и в свойство left записываем значение переменной leftPos плюс единицы измерения (пиксели). leftPos – это переменная, которая создана на 9-й строке. Изначально значение этой переменной 0. И изначально элемент div1 находится в левой части окна. Но после того, как мы зададим значение leftPos = 0 – мы leftPos увеличим на единицу. И следующий раз, когда функция animate будет запущена, значение переменной leftPos уже будет 1. То есть, div сдвинется немножко вправо. На следующий запуск анимации leftPos еще раз увеличится и div еще немножко передвинется вправо. И так функция animate будет запускаться бесконечно с периодичностью в 10мс, и div1 будет бесконечно двигаться в правую сторону. Давайте запустим и посмотрим. Вот мы видим перемещение div. Сейчас у нас появится скролл и div будет все так же продолжать двигаться в правую сторону бесконечно долго. Вот такой последний пример, в котором мы рассмотрели принцип анимации, заставляющий перемещаться элемент по поверхности окна.

На этом примере мы заканчиваем урок. В этом уроке мы рассмотрели способы работы со стилями и JavaScript кодом. Запомните свойство style, которое позволяет получить стили, установленные через атрибут style или с помощью JavaScript кода. И запомните метод getComputedStyle, который позволяет получить стили, которые были вычислены самим браузером на основе CSS правил, заданных либо в глобальных стилях, либо во внешнем файле. Обычно в работе с JavaScript приложениями используются библиотеки, которые упрощают взаимодействие со стилями. Для примера, можно взять библиотеку JQuery, которая предоставляет очень удобный интерфейс для чтения стилей и для изменения стилей отдельных элементов. Но в этот курс у нас не входит разбор работы библиотеки JQuery, поэтому мы рассмотрели основы, для того чтобы вы понимали, как именно происходит взаимодействие со стилями в чистом Javascript коде. Теперь вы знаете, как можно поменять стиль элементов. Вы знаете, как можно создать просто tooltip, как создать простейшую анимацию цвета, или анимацию движения элемента на странице. Ну и любые стили, любое оформление, которое вы можете задать через CSS стили теперь вы можете задавать с помощью JavaScript кода. На этом наш урок заканчивается, спасибо за внимание, до новых встреч.