Стать программистом. Практика 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. Инкапсуляция.