Стать программистом. Часть 27. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

Для начала небольшое объявление. Волею судьбы всю прошлую неделю я был вынужден бороздить воздушные пространства маршрутом Крым -> Минск и обратно в рамках рабочей командировки. В связи с этим в интенсивности возникновения новых уроков по курсу "Стать программистом. Основы JavaScript для абсолютных новичков!" возникла небольшая брешь. Прошу за это прощения. Будем исправлять эту ситуацию с сегодняшнего дня.

В нашем прошлом уроке мы c Вами охватли по истине большой объем информации. Мы познакомили с Document Object Model, узнали почему она предпочтительнее в анализе HTML структуры, чем структура расположенная в созданных нами файлах. Мы познакомились с логикой мониторинга активности пользователя на странице, системой Событий (Events) и методом addEventListener, а также привели практические примеры работы с событиями и деревом DOM.
Сегодня мы продолжим рассматривать взаимодействия событий и элементов на странице.

УРОК 27. Встроенные объекты. Объект Style, Events, Часть II.

В приведенных нами примерах мы в большей степени рассмотрели именно стадию добавления слушателя события. В ответ на это событие мы, исключительно для понимания того что все работает, выводили диалоговое окно через конструкцию "alert();". В реальной практике конечно же все будет несколько иначе.

Давайте вспомним как выглядит третий пункт из списка предыдущего урока:

Давайте сегодня постараемся придерживаться именно такой формулировки и посмотрим, как в JavaScript'e можно влиять на стилевое представление элементов.

Итак, у нас с Вами есть страница такого вида:

На ней мы с вами можем явно выделить круг, квадрат, и кнопки. Каким образом мы с Вами добились того, чтобы к примеру квадрат был именно таким каким мы его видим (размер 80x80 (пикселей) и цвет фона бордовый)? Такое представление мы описали с помощью стилей CSS в файле style.css. Если смотреть в разрезе элемента квадрат, то выглядят они следующим образом:

Зелеными рамками, обведены стили, которые применяются к нашему квадрату. Первый блок применяется к нашему квадрату по классу .html-element (подчеркнутый оранжевой линией). В этом блоке мы видим такие свойства как высота (height) и ширина (width) (на них указывают желтые стрелочки). Второй блок применяет стили по идентификатору #square (подчеркнутый оранжевой линией). В этом блоке мы видим стиль фон (background) (на него так же указывает желтая стрелочка). Так вот именно благодаря этим стилям наш квадрат выглядит так как мы его видим. Давайте подумаем логически: eсли мы желаем, чтобы при наступлении определенного события менялся внешний вид нашего квадрата, то скорее всего нам потребуется каким-то образом переопределить эти стили с помощью JavaScript. Такая логика будет правильной.

Как же нам получить доступ к этим стилевым свойствам в JavaScript'e? Это очень просто. После того как мы сделаем выборку нужного нам элемента используя один из способов, описанных в 25-ом уроке и у нас появится результат такой выборки - в своем целевом итоге это будет объект с ссылкой на html-элемент. У этого объекта появится свойство style, которое и позволит нам влиять на стилевое представление нашего объекта. Давайте рассмотрим на практике:

/* Объект style. */

var square = document.getElementById('square');

square.addEventListener('mouseover', function() {
    square.style.width = '100px';
    square.style.height = '100px';
    square.style.background = '#70A78F';
});

square.addEventListener('mouseout', function() {
    square.style.width = '80px';
    square.style.height = '80px';
    square.style.background = '#9F024D';
});

В этом примере мы сделали выборку квадрата уже известным Вам способом по идентификатору используя метод getElementById. Далее используя метод addEventListener мы добавляем к выбранному нами элементу ожидание на два новых для вас события mouseover и mouseout (указывают стрелочки голубого цвета). Раньше мы всегда использовали событие click (клик мышью). Однако ранее я уже говорил, что такое событие далеко не единственное. Событие mouseover возникает, когда пользователь наводит курсор мыши на выбранный нами элемент. Событие mouseout возникает, когда пользователь убирает курсор мыши за пределы выбранного нами элемента. А теперь мы подходим к цели нашего сегодняшнего исследования - свойству style. При наведении курсора мыши на квадрат у нас отработает код представленный в блоке обрамленном бирюзовой рамкой:

square.style.width = '100px';
square.style.height = '100px';
square.style.background = '#70A78F';

Обратите внимание сначала мы обращаемся к объекту с ссылкой на html-элемент square, далее мы обращаемся через точку к его свойству style (подчеркнуто оранжевой линией). Свойство style в свою очередь тоже является объектом и через точку уже объекта style мы по названию обращаемся к свойству, которое хотим изменить. Эти свойства width (ширина), hegiht (высота) и background (фон). Как раз на них мы и обращали внимание, когда рассматривали стили приименный к квадрату в файле style.css. Далее используя обычный оператор присвоения = мы присваиваем нужному нам свойство новое значение: в нашем примере это '100px' для ширины и высоты и '#70A78F' - к фону (салатовый). То есть при наведении мыши на квадрат мы должны увидеть, как он увеличится в размерах (так как изначально в style.css ему присвоены размеры '80px' и для высоты, и для ширины) и поменяет свой цвет на салатовый. Если же мы уберем курсор с квадрата, то отработает код для события mouseout:

square.style.width = '80px';
square.style.height = '80px';
square.style.background = '#9F024D';

Который использует те же самые свойства, но просто возвращает их к изначально описанным значениям ('80px' для ширины и высоты и '#9F024D' (бордовый) для фона). Давайте посмотрим, как это будет выглядеть в браузере:

Как видим поведение квадрата при наведении мыши и ее выведении за границы квадрата вполне ожидаемо.

В такой логике мы можем влиять на уже существующие (переменные) свойства элемента или добавлять новые, которые попросту не были использованы ранее. Например, давайте добавим к нашему кругу свойство рамки border. Но для начала убедимся, что этого свойства нет в нашем style.css:

Я обвел боки стилей, имеющих отношение к кругу, зеленой рамкой. Как видим свойства border среди них нет. Давайте добавим это свойство сами:

/* Объект style. */

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.style.border = '5px solid #000000';
});

Как видим мы выбираем круг методом getElementById. И далее методом addEventListener слушаем событие click на которое используя уже известный нам объект style добавим к кругу рамку шириной '5px' сплошного вида 'solid' и черного цвета '#000000'. Давайте проверим в браузере, для этого щёлкнем на наш круг мышкой:

Как мы можем видеть рамка действительно появляется, даже не смотря на то что изначально такого свойства в файле style.css прописано не было.

В CSS встречаются свойства названия которых состоят из нескольких слов (двух и более) разделенных дефисом. Например, свойство border которое мы использовали в предыдущем примере описывает поведение рамки вокруг всего объекта сразу. Однако мы можем задать рамку либо только сверху border-top либо снизу border-bottom и слева и справа соответственно border-left и border-right. К этим свойствам мы тоже можем достучаться, используя JavaScipt однако их названия в нем будут несколько иными. В JavaScript для обозначения имен свойств, состоящих из нескольких слов, используется способ сamelCase. Я уже упоминал об этом способе в одном из наших предыдущих уроков. Это способ когда все слова пишутся слитно однако каждое новое пишется с большой буквы. Например, у нас есть свойство border-top. В JavaScript'e его аналогом в объекте style будет свойство с именем borderTop. То есть убирается дефис между словами и само название пишется в camelCase стиле. Давайте добавим нашем кругу не полную рамку, а допустим только сверху:

/* Объект style. */

var circle = document.getElementById('circle');

circle.addEventListener('click', function() {
    circle.style.borderTop = '5px solid #000000';
});

Обратите внимание на обращение к свойству, отвечающему за верхнюю рамку в нашем коде (оно подчёркнуто зеленой линий). Проверим в браузере:

Как видим теперь, а щелчок кругу добавляется только рамка вверху. Таким стилем camelCase описываются и другие свойства и, если вдруг вы с толкнетесь с каким-то свойство в CSS, название которого состоит из трех частей, не пугайтесь все что вам требуется сделать для того чтобы получить к такому свойству доступ используя средства JavaScript - это применить к нему camelCase стиль.

И в завершении нашего сегодняшнего урока, хотелось бы добавить следующее:

Все стили применённые (обновленные, измененные) средствами JavaScript являются временными. То есть все эти изменения мы видим ровно до того момента пока не перезагрузим окно браузера. Сразу же после этого все стили представления элементов будут сброшены к состоянию, описанному в стилевом файле. В нашем случае - к состоянию, описанному в файле srtyle.css

А на сегодня все.