Стать программистом. Практика JavaScript для новичков. Занятие 5.
Доброго времени суток, друзья!
В нашем прошлом занятии мы оптимизировали наш код отвечающий за работу счетчиков, узнали как еще, кроме прямого воздействия на свойство выборки style, можем управлять внешним видом html-элемента с помощью JavaScript и метода setAttribute(). Определились с тем, почему такой способ является предпочтительнее того, который мы использовали в занятии 3. Кроме этого добавили обработку нашей информативной панели, познакомились с новым свойство выборки innerText и проверили ее работоспособность в браузере.
Цели прошлого занятия были достигнуты, однако есть небольшой момент, который я бы все-таки переделал. Давайте его рассмотрим.
Стать программистом. Практика JavaScript для новичков. Занятие 5.
Обратите внимание на эту часть нашего текущего кода:
Наш метод setText() по сути относится к элементу informer, но по факту на данный момент он является методом объекта {Booth}. В этом нет ничего плохого, все и так работает. Однако я все-таки сторонник логического устройства кода, поэтому предлагаю организовать код таким образом, чтобы нам наглядно было видно, чей именно этот метод. Вот что у нас получилось.
var Booth = {
informer: {
selector: document.getElementById('info'),
setText: function(text) {
this.selector.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);
},
}
Мы преобразовали наш informer в объект. И теперь у него есть одно свойство selector с выборкой, и сюда же перекочевал наш метод setText(). Но теперь, когда мы смотрим на код, мы сразу наглядно видим к какому именно объекту он относится. Согласитесь, с точки зрения организации кода, это отображает более реальную логику, чем предыдущий вариант. Проверим в браузере ничего ли мы не сломали:
Все работает, как и раньше, но в организации мы определенно выиграли.
С информационной панелью пока все, ну а сейчас давайте займемся подготовкой работы наших кнопок. Вот этих:
У нас их четыре штуки. Сейчас если мы на них кликнем, ничего не произойдет, что логично, ведь, как мы знаем из прошлого курса, для этого нам требуется добавить к этим кнопкам события (Events) и функции, которые при наступлении этих событий будут исполнятся. Я думаю ясно что таким событием будет клик мышью по кнопке. Давайте для начала посмотрим в браузере, как нам лучше сделать выборку этих кнопок, чтобы затем добавить события.
Вот нужные нам html-элементы. Найти их не составило большого труда. Однако, заметьте, что ни у одного из элементов на этот раз нет идентификатора. А значит мы уже не можем использовать метод getElementById() как мы делали это в случае со счетчиками (пргрессбарами) или в случае с informer’ом. Однако у всех наших кнопок есть одинаковое свойство class:
Из урока № 25 предыдущего курса, мы знаем что кроме выборки по идентификатору, которая вернет нам объект со ссылкой на один html-элемент, мы еще можем делать выборку по имени класса, которая вернет нам массив с объектами выборки. Называется он getElementsByClassName(). Давайте сделаем выборку наших кнопок в коде:
var Booth = {
informer: {
selector: document.getElementById('info'),
setText: function(text) {
this.selector.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
},
buttons: document.getElementsByClassName('monitor__btn'),
/* Запускаем счетчики парметров */
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);
},
}
Мы добавили выборку наших кнопок в свойство buttons объекта {Booth}. Давайте выведим это свойство в консоли браузера и убедимся в том, что выборка действительно отработала:
Как видим, в свойство buttons действительно вернулся массив (Array), который содержит четыре элемента, каждый из которых ссылается на нужную нам кнопку. Теперь нам требуется добавить событие клика и функцию, которая наступит после события. Для этого как мы знаем используется метод addEventListener(). Мы с вами уже использовали его в уроке 26 прошлого курса, с одной только разницей, тогда у нас был один элемент, а сейчас у нас их четыре и все они лежат в массиве. Но не беда. Мы ведь можем перебрать массив с помощью одного из циклов, например for(…) {…} (урок №17). Давайте сделаем это:
var Booth = {
informer: {
selector: document.getElementById('info'),
setText: function(text) {
this.selector.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
},
/* добавляем события к выбранным кнопкам */
buttons: document.getElementsByClassName('monitor__btn'),
addButtonsEvents: function() {
for(var i = 0; i < this.buttons.length; i+=1) {
this.buttons[i].addEventListener('click', function() {
console.log('вы сделали клик!');
});
}
},
/* Запускаем счетчики парметров */
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);
},
}
Итак, мы добавили метод, который называется addButtonsEvents (). Как только мы его вызовем, массив с нашими кнопками будет перебран и к каждой нашей кнопке будет добавлено событие 'click'. Как только пользователь, кликнет на одну из кнопок, должна будет сработать функция, переданная в метод addEventListener() вторым параметром. Вот эта - function() { console.log('вы сделали клик!'); }. Как видим пока она просто выводит сообщение о том, что был произведен клик мышью. Давайте вызовем наш метод в браузере и посмотрим работает ли наша функциональность:
Как видим, как только мы вызвали метод addButtonsEvents(), на каждую нашу кнопку добавилось событие 'click'. И когда мы щелкаем на какую-то из них, срабатывает наша функция, и мы видим нужно нам сообщение. Можно сказать, что заготовка для кнопок реализована успешно.
А на сегодня всё, продолжение следует…
Ссылки на предыдущие занятия:
Практика JavaScript для новичков. Занятие 1,
Практика JavaScript для новичков. Занятие 2,
Практика JavaScript для новичков. Занятие 3,
Практика JavaScript для новичков. Занятие 4
Ссылки на предыдущий курс:
Урок 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. Инкапсуляция.