Стать программистом. Практика JavaScript для новичков. Занятие 4.
Доброго времени суток, друзья!
В нашем прошлом занятии мы преобразовали код, отвечающий за работу счетчиков (прогрессбаров), добавили им флаги для отслеживания перехода в состояния изменения цвета. На примере счетчиков мы увидели, как непосредственно с помощью JavaScript’a менять различные css-свойства нужных нам html-элементов, и в целом практически закрепили работу с условными операторами, операторами сравнения и функцией setInterval().
По большому счету работа со счетчиками почти закончена. Остался только один момент. Давайте начнем с его рассмотрения.
Стать программистом. Практика JavaScript для новичков. Занятие 4.
В прошлом занятии я упомянул что влиять на внешний вид html-элементов можно несколькими способами. В нашем текущем коде мы используем способ с объектом style. Выглядит это так timer.selector.style.background = 'orange';. При чем как Вы уже поняли, на месте background мы можем использовать любою другое css-свойство.
Однако в таком методе есть своим минусы. Первый из которых это количество кода. Да, в нашем случае его не много. Самое большое количество мы получили вот тут:
Когда нам требуется поменять всего два свойства – это приемлемо. Но представьте, что нам было бы нужно поменять намного больше css-стилей, чем два. И тогда картина могла бы выглядеть как-то так:
Согласитесь, выглядит не очень. Кроме того, с точки зрения быстроты исполнения, такой код тоже занимает место далеко не в первых позициях. Как можно решить поставленную задачу по-другому? Смотрите, то каким образом должен выглядеть тот или иной html-элемент описывают в стилевых файлах. В нашем случае, такой файл лежит в папке styles и называется styles.css. В нем я уже описал все необходимые для нашей практики стили элементов. В том числе и внешний вид наших счетчиков, которые должны менять свой цвет.
Я не буду углубляться в сам css-файл. Нам просто требуется понимать, что в нем уже есть все необходимые состояния для наших элементов. И увидеть эти состояния мы можем просто, добавив нужный класс к нашему элементу с помощью JavaScript. Давайте сначала проделаем это в браузере руками, чтобы понять принцип, а уже потом реализуем это в коде.
Как видите я меняю не само css-свойство html-элемента, а его атрибут class. Сss-свойства, присущие этому классу, описаны в нашем файле styles.css, именно поэтому наш элемент меняет свой внешний вид.
Так вот, возвращаясь к тому, о чем мы говорили ранее. Вместо прямого изменения css-свойств с помощью JavaScript, мы можем сначала описать эти свойства в специальном классе в стилевом файле, а когда нам требуется чтобы они были применены, мы с помощью JavaScript добавим (или уберем) нужный нам класс к html-элементу. Такой способ считается более приемлемым, чем тот который мы используем в данный момент. Он менее ресурсоемок, и позволяет избежать нагромождения кода в случае, когда нам надо повлиять несколько css-стилей одновременно. Давайте применим этот способ в нашем коде.
var Booth = {
timer1: {
selector: document.getElementById('fatigue'),
isOrange: false,
isRed: false
},
timer2: {
selector: document.getElementById('satiety'),
isOrange: false,
isRed: false
},
timer3: {
selector: document.getElementById('mood'),
isOrange: false,
isRed: false
},
/* Запускаем счетчики парметров */
runProgressBar: function(timer, seconds) {
var width = 100;
var milliseconds = seconds*1000;
var interval = setInterval(function() {
if(width != 0) {
width -= 1;
timer.selector.style.width = width + '%';
/* смена цвета счетчика*/
if(timer.isOrange == false && width <= 50) {
timer.isOrange = true;
timer.selector.setAttribute('class', 'monitor-bar__progress attention');
}
if(timer.isRed == false && width <= 25) {
timer.isRed = true;
timer.selector.setAttribute('class', 'monitor-bar__progress alarm');
}
} else {
clearInterval(interval);
}
}, 200);
},
}
Обратите внимание на то, как именно мы добавляем класс к нужному нам html-элементу. Во-первых, мы оставили выборку элемента (подчеркнута сиреневой линией). Как мы помним из предыдущего курса, выборка - это тоже объект, который содержит в себе ссылку на выбранный html-элемент. Так как это объект, то логично предположить, что он обладает различными методами и свойствами. Например, объект style, который мы использовали до этого, был свойством нашей выборки. А сейчас мы задействовали один из методов, который тоже у неё есть. Он называется setAttribute() (задать атрибут), я подчеркнул его зеленой линией. Он принимает два параметра. Первый это имя атрибута, который мы хотим установить. В нашем случае это class, а второй параметр - это значение для этого атрибута. Мы передали строку monitor-bar__progress attention и строку monitor-bar__progress alarm.
Класс attention (подчеркнут оранжевым) отвечает за то, чтобы фон счетчика окрасился оранжевым, класс alarm (подчеркнут красным) - за то, чтобы счетчик окрасился красным. Минус метода setAttribute (),заключается в том, что он полностью перезаписывает указанный нами атрибут, и не обращает внимание на то, было ли у запрашиваемого атрибута уже какое-то значение ранее. А у нас оно было – это значение monitor-bar__progress. И для того чтобы его не потерять, на пришлось вместо записи timer.selector.setAttribute('class', 'attention'); писать timer.selector.setAttribute('class', 'monitor-bar__progress attention'); и так же поступить в случае с классом alarm.
Проверим работоспособность в браузере:
Поведение ожидаемо. Далее, во всех наших следующих занятиях мы будем использовать именно этот метод.
На этом работу со счетчиками мы пока отложим (не на долго) и реализуем следующий элемент нашего «Домика» для муравья. Это будет информативная панель. Сейчас нам ее не видно, однако на присутствует, просто никак не задействована. Выглядит она следующим образом:
Это элемент, который будет сообщать нам информацию о том, что делает наш питомец в данный момент, а также будет отображать информацию о том, что нужное нам действие было запущено с помощью наших кнопок, расположенных в верхнем левом углу. Как мы договорились ранее, все что находится в зоне «Домика» для питомца будет относится к объекту {Booth}. Наш информативная панель как раз подпадает к этому правилу. И для начала давайте сделаем выборку нужного нам элемента. Для этого сначала проследуем в браузер и обнаружим этот элемент в DOM нашего index.html:
Мы легко находим нужный нам элемент, и так же как в случае с нашими счетчиками, мы видим, что есть идентификатор, а значит для выборки этого элемента мы можем использовать метод getElementById():
var Booth = {
informer: document.getElementById('info'),
timer1: {
selector: document.getElementById('fatigue'),
isOrange: false,
isRed: false
},
timer2: {
selector: document.getElementById('satiety'),
isOrange: false,
isRed: false
},
timer3: {
selector: document.getElementById('mood'),
isOrange: false,
isRed: false
},
/* Запускаем счетчики парметров */
runProgressBar: function(timer, seconds) {
var width = 100;
var milliseconds = seconds*1000;
var interval = setInterval(function() {
if(width != 0) {
width -= 1;
timer.selector.style.width = width + '%';
/* смена цвета счетчика*/
if(timer.isOrange == false && width <= 50) {
timer.isOrange = true;
timer.selector.setAttribute('class', 'monitor-bar__progress attention');
}
if(timer.isRed == false && width <= 25) {
timer.isRed = true;
timer.selector.setAttribute('class', 'monitor-bar__progress alarm');
}
} else {
clearInterval(interval);
}
}, 200);
},
}
Как видим мы добавили новое свойство к нашему объекту {Booth} и дали ему название informer. В его значение мы поместили выборку. Это для нас уже должно быть знакомо. Теперь собственно, давайте определимся с задачей, так же, как и в случае со счетчиками. Что будет делать наш informer? По сути он будет просто отображать различный текст. Давайте пройдем в браузер и добавим в наш элемент текст, чтобы посмотреть наглядно как это будет выглядеть:
Смотрите, мы добавили внутрь нашего элемента строку «Гуляет…» и она красивенько отобразилась на экране. Итак, нам надо сделать функциональность, которая бы вставляла в наш informer текст. Давайте попробуем это реализовать.
var Booth = {
informer: document.getElementById('info'),
setText: function(text) {
this.informer.innerText = text;
},
timer1: {
selector: document.getElementById('fatigue'),
isOrange: false,
isRed: false
},
timer2: {
selector: document.getElementById('satiety'),
isOrange: false,
isRed: false
},
timer3: {
selector: document.getElementById('mood'),
isOrange: false,
isRed: false
},
/* Запускаем счетчики парметров */
runProgressBar: function(timer, seconds) {
var width = 100;
var milliseconds = seconds*1000;
var interval = setInterval(function() {
if(width != 0) {
width -= 1;
timer.selector.style.width = width + '%';
/* смена цвета счетчика*/
if(timer.isOrange == false && width <= 50) {
timer.isOrange = true;
timer.selector.setAttribute('class', 'monitor-bar__progress attention');
}
if(timer.isRed == false && width <= 25) {
timer.isRed = true;
timer.selector.setAttribute('class', 'monitor-bar__progress alarm');
}
} else {
clearInterval(interval);
}
}, 200);
},
}
Мы добавили метод который называется setText() они принимает один параметр text, который и будет выводится в нашем информере. Обратите внимание на саму реализацию. Мы используем контекст this, который как мы знаем из прошлого курса, в зависимости от того, как и где его вызывают ссылается на различные объекты. В данном случае метод setText() будет вызываться как метод объекта {Booth} , а значит и ссылаться this будет на {Booth}. Далее мы через точку обращаемся к свойству {Booth} - informer и используем свойство, которое у неё есть и называется innerText (внутренний текст). Это свойство отвечает за текст, который должен отобразится внутри html-элемента. Для этого мы просто присваиваем ему нужное значение. В нашем случае это будет параметр text переданный методу setText(). Давайте проверим в браузере что у нас получилось:
Метод работает исправно. Текст в информационной панели меняется. Задача выполнена.
А на сегодня все. Продолжение следует…
Ссылки на предыдущие занятия:
Практика JavaScript для новичков. Занятие 1,
Практика JavaScript для новичков. Занятие 2,
Практика JavaScript для новичков. Занятие 3
Ссылки на предыдущий курс:
Урок 1 - Окружение.,
Урок 2 - Некоторые особенности синтаксиса.,
Урок 3 - Переменные.,
Урок 4 - Типы переменных, как основа для их взаимодействия.,
Урок 5 - Операции с переменными одного типа.,
Урок 6 - Операции с переменными одного типа. Часть II.,
Урок 7 - Взаимодействие переменных с разными типами.,
Урок 8 - Взаимодействие переменных разного типа. часть II.,
Урок 9 - Взаимодействие переменных разного типа. Часть III.,
Урок 10 - Другие возможные взаимодействия между переменными.,
Урок 11 - Другие возможные взаимодействия между переменными. Часть II.,
Урок 12 - Другие возможные взаимодействия между переменными. Операторы присваивания.,
Урок 13 - Другие возможные взаимодействия между переменными. Операторы сравнения.,
Урок 14 - Сложные переменные. Array и Object.,
Урок 15 - Условные операторы.),
Урок 16 - Циклы.,
Урок 17 - Циклы. Часть II.,
Урок 18 - Функции.,
Урок 19 - Функции. Часть II.,
Урок 20 - Профилирование. Функции, часть III.,
Урок 21 - Функции, Часть IV. Аргументы.,
Урок 22 - Objects (Объекты).,
Урок 23 - Встроенные функции и объекты.,
Урок 24 - Встроенные функции и Объекты, Часть II. Глобальные функции и переменные.,
Урок 25 - Встроенные функции и Объекты, Часть III. Document Object Model.,
Урок 26 - Встроенные функции и Объекты, Часть III. Document Object Model.
Урок 27 - Встроенные объекты. Объект Style, Events, Часть II.
Урок 28 - Встроенная переменная this. Глобальная и локальная области видимости.
Урок 29 - Объектно-ориентированное Программирование. Введение.
Урок 30 - Объектно-ориентированное Программирование. Часть II. Полиморфизм.
Урок 31 - OОП. Наследование, Часть I. Оператор new.
Урок 32 - ООП. Наследование, Часть II. PROTOTYPE.
Урок 33 - ООП. Часть II. Полиморфизм.
Урок 34 - ООП. Часть III. Инкапсуляция.