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

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

Приветствую вас на втором занятии курса Практика JavaScript для новичков. Сегодня мы наконец приступим к нашему практическому занятию. На всякий пожарный случай продублирую ссылки, с исходниками, которые нам потребуются для реализации нашей задачи – архив с исходникми

Давайте начинать!

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

Для начала качаем архив (ссылка выше). И распаковываем его в папку где Вам будет удобно работать. Когда вы это проделаете, вы увидите следующую файловую структуру:

1. Файл index.html - главный файл нашего приложения. Его мы будем открывать в браузере и смотреть на результат своей работы.
2. Папка images - содержит необходимые для нашей работы картинки. Их там не много, при желании вы можете их просмотреть. Но для нас они будет нести исключительно вспомогательный характер и работать напрямую с ними мы не будем.
3. Папка js - Это наша вотчина. В ней м будем проводить основное время наших занятий. И весь созданный нами код будет распределен среди трех файлов (ant.js, ant_brain.js и booth.js), которые вы можете видеть внутри. Сейчас эти файлы пустые, но в скором времени это измениться.
4. Наконец последняя папка styles - это папка где расположены наши css-стили. Они также, как и картинки не будут особо нас беспокоить. Все что нам потребуется для работы в них уже есть

Давайте откроем нашу папку в редакторе, где мы сможем править наш код, а также запустим index.html в браузере. В моем случае это выглядит так

Напомню, что я буду использовать в работе Chrome и Sublime Text. Если Вы все сделали правильно, то в браузере вы увидите нашего муравья. Картинка пока статическая, никаких движений мы не наблюдаем, и именно оживлением этой статики мы по сути и будем заниматься.

Давайте для начала обратим внимание на наш index.html:

Это стандартный html файл. И в не нас интересует ровно два блока. Первый блок (я выделил его оранжевой рамкой) это структура элементов самой игры. Из этой структуры с помощью JavaScript’a мы будем выбирать нужные нам Объекты и информацию, а также добавлять к ним события, которые игрок будет производить. Делать мы это будем приблизительно таким же образом, как мы делали это в Уроке 25, Уроке 26 и Уроке 27 нашего прошлого курса.

Следующий блок обведен синей рамкой. Собственно, тут мы подключаем наши js-файлы, где будем работать. Давайте на всякий случай проверим работоспособность каждого з них. Для этого добавим в каждый файл по переменной, а затем выведем все переменные с помощью файла ant.js

Приблизительно так это должно выглядеть. В файле boot.js и ant_brain.js мы создали две строковых переменных, а в файле ant.js мы сложили эти переменные с еще одной строкой. И если мы откроем консоль в браузере где запущен наш index.html, то мы должны будем увидеть сообщение о том, что все работает:

Отлично! Начало положено. Теперь давайте разберём некоторые аспекты организации нашего проекта.

Почему именно три js-файла? В обычной практике, почти никогда не работают с одним файлом. Пихать весь код в один js можно. Но работать с ним крайне неудобно. Обычно код стараются разбить на логические модули. Это очень полезно для того чтобы не запутаться что где лежит, и для того чтобы сохранить некое подобие независимости (пусть даже и логической) одних частей кода от других.

В нашем случае (хоть приложение и не будет большим) я решил не отступать этого правила и разбил наше приложение на три составляющих:

1. Это «Дом, будка» для нашего питомца. . Все что мы видим в пределах красной рамки относится к этой будке. Соответственно весь код, который так или иначе будет касаться элементов обведенных красной рамкой, мы будем описывать внутри файла под названием booth.js
2. Следующий логический элемент, который стоит особняком от предыдущего это сам Муравей (наш питомец) . Соответственно всё поведение нашего питомца (его действия) мы будем описывать внутри файла ant.js
3. Ну а в третьем файле, который я назвал ant_brain.js (сейчас, к слову сказать я думаю, что название не очень удачное, и нужно было бы использовать нечто более общее, но как говорится «упс!») мы буду описывать некоторые общие функции, которые мы сможем использовать и нашей Будке и у нашего Питомца.

В целом как мы можем наблюдать у нас уже вырисовывается некоторая логика построение приложения. Мы уже знаем, что нам понадобиться создать как минимум три сущности:

1. Будку – предлагаю назвать объект, отвечающий за неё Boot
2. Питомца – это будет функция-конструктор Pet
3. Общий объект, методы которого мы сможем использовать и там и там будет носить название Brain.

Надеюсь логика пока понятна. И давайте создадим эти наши сущности.

var Booth = {
}

var Brain = {
}

var Pet = {
}

Итак, мы создали два объекта {Booth} и {Brain} и одну функцию (Pet), которая затем станет конструктором для нашего муравья. Обратите внимание что все эти сущности созданы в Глобальной Области Видимости, и мы можем получить доступ к ним из консоли браузера как через точку от встроенного объекта Window, так и напрямую:

Когда мы в самом начале проверяли работоспособность наших файлов, то в файле ant.js мы смогли воспользоваться переменными, которые были созданы в других двух файлах, именно потому что мы создали их в Глобальной Области Видимости.

Обычно засорения Глобальной Области Видимости стараются избегать (я уже упоминал о этом в прошлом курсе). Однако, в нашем случае мы имеем дело с замкнутым кодом. То есть мы можем быть уверены, что кроме нас с ним больше никто работать не будет, и никаких сторонних библиотек (весьма полезные js-файлы, написанные другими людьми, которые также можно подключить в наш index.html файл и пользоваться их функциональностью) мы подключать не станем. Поэтому в нашем случае такая разработка допустима.

А теперь, давайте начнем немного оживлять нашу статическую картинку. Я и предлагаю начать с наших счетчиков (или как еще называют прогрессбаров) в домике у нашего питомца:

Давайте для начала поймем, что же нам предстоит сделать. Если вы зайдете на рабочий прототип, то увидите примерно следующее:

то есть каждый счетчик, с течением времени уменьшается. Кроме того, если вы немного дольше подождете, то увидите, что как только счетчик уменьшится на половину – он поменяет свой цвет на оранжевый, а если он упадет меньше чем на 25% то станет красным:

Bот перед нами возникли две задачи:

1. Реализовать функциональность чтобы счетчики уменьшались с течением времени.
2. Чтобы в зависимости от того, на сколько они уменьшились, менялся бы цвет их фона.

И вот только когда мы точно знаем, что от нас требуется, мы можем приступать к реализации задачи.

Для начала давайте проинспектируем DOM нашего index.html как мы проделывали это, например, в уроке № 25 и посмотрим каким образом мы можем сделать выборку наших счетчиков:

Вот мы нашли их в DOM, а вот здесь:

мы увидели, что все три нужных нам html-элемента имеют уникальные идентификаторы. А из прошлого курса мы знаем как выбирать элементы по идентификатору используя метод “getElementById ()”; Так как вначале мы условились что что все что относится к Будке нашего питомца, будет описывать в объекте Booth, то давайте и сделаем внутри него нашу выборку:

var Booth = {
    timer1: document.getElementById('fatigue'),
    timer2: document.getElementById('satiety'),
    timer3: document.getElementById('mood')
}

Замечательно. Мы создали три выборки и в каждой использовали нужный нам идентификатор. Если мы теперь зайдем в консоль и если выборка правильна, то при наведении на выборку мышью, браузер подсветит нам нужны элемент:

Мы видим, что все правильно, и теперь в коде у нас есть доступ к нужным нам элементам. Теперь подумаем, как мы можем сделать так чтобы наши счетчики начали уменьшаться.

У каждого счетчика (как у html-элемента) есть стиль, который называется width (ширина).

В данный момент она равняется 100%. Соответственно если мы каждый период времени начнем отнимать от этой ширины по 1% то скорее всего мы получим нужный нам эффект. Этот эффект можно проделать в самом браузере руками, примерно таким образом:

Как видим счетчики начали уменьшаться. Для того чтобы реализовать такое действие с помощью javaScript. Нам нужна функция, которая будет выполнять одно и тоже действие заданный интервал времени. Благо из прошлого урока мы знаем такую. Она называется setInterval и её работу мы рассматривали в уроке № 23. Давайте воспользуемся ей сейчас для наших новых потребностей:

var Booth = {
    timer1: document.getElementById('fatigue'),
    timer2: document.getElementById('satiety'),
    timer3: document.getElementById('mood'),
    /* Запускаем счетчики парметров */
    runProgressBar: function(timer, seconds) {
        var width = 100;
        var milliseconds = seconds*1000;
        var interval = setInterval(function() {
            if(width) {
                width -= 1;
                timer.style.width = width + '%';
            } else {
                clearInterval(interval);
            }
        }, milliseconds);
    },
}

Мы создали функцию runProgressBar(). Она принимает два параметра: timer - это выборка нашего счетчика и seconds - это время в секундах, через которое от ширины нашего счетчика будет отниматься единица.
В самой функции мы создали три переменных. Переменная width цифра которую мы будем подставлять в css-свойство width нашего счетчика. Начинаем мы со 100% поэтому и значение у неё 100. Затем идет переменная milliseconds - тут все просто, она используется как параметр для setInterval () а он как мы помним работает с миллисекундами. Такое преобразование (умножение на 1000) позволит нам задавать интервал для уменьшения ширины в более привычной величине. Наконец, третья переменная сохранит в себе сам интервал. Это делается для того, чтобы после уменьшения ширины до нуля, мы ппрекратили вызов интервала. Так как эта операция хоть местами и ползна, но кушает кушает оперативную память, и на абсолютно не надо чтобы память кушало что, в действие чего мы уже не нуждаемся. Вообще это очень хорошее рпавило, подчищать за собой функциональность которая уже не используется..

Давайте, теперь посмотрим саму функцию setInterval(). Сначала она смотрит, не равна ли ширина нулю width != 0 если нет то отнимает от нее единицу. Затем обращается к нашему таймеру, и через объект style.width получает доступ к css-свойству width и присваивает ему новое значение которое уже уменьшено на единицу. Ну а в случае если наша переменная width равно нулю, то мы прекращаем выполнения интервала используя тоже знакомый нам метод clearInterval();

Давайте вызовем нашу функцию в консоли и проверим что получится:

Мы вызвали нашу функцию, указав ей интервал 1 секунду. То есть каждую секунду ширина счетчика, который мы передали первым параметром, должна уменьшиться на единицу. Что мы и наблюдаем.

Начало положено! А на сегодня все. В следующем занятии продолжим.

Ссылки на предыдущие занятия:

Практика JavaScript для новичков. Занятие 1,

Ссылки на предыдущий курс:

Урок 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. Инкапсуляция.