Стать программистом. Практика JavaScript для новичков. Занятие 5.

11 месяцев назад

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

В нашем прошлом занятии мы оптимизировали наш код отвечающий за работу счетчиков, узнали как еще, кроме прямого воздействия на свойство выборки 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. Инкапсуляция.

Авторы получают вознаграждение, когда пользователи голосуют за их посты.
Голосующие читатели также получают вознаграждение за свой голос.
Порядок сортировки:  Популярное

Спасибо за наше просвещение Вами @rassen!

·

Всегда пожалуйста.

·
·

далек пока от этих вещей, но зато теперь знаю где подучиться!
Подписался @rassen!

·
·
·

Пишите, если будут вопросы - помогу по возможности

·
·
·
·

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

@rassen Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:

Награда за количество голосов

Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь

Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом стоп

Голосуя за это уведомление, вы помогаете всем пользователям Голоса. Узнайте, как здесь.

Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
@losos, @dreamer, @arturio777
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!