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

образованиеакадемияурокифронтендjavascript
66
647.659 GOLOS
0
В избранное
rassen
На Golos с 2016 M12
66
0
Комментарии (1)
Сортировать по:
Сначала старые
Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий
Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.