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

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

Приветствую вас на первом занятии курса Практика JavaScript для новичков. Если вы здесь, то скорее всего Вы уже знакомы с моими предыдущими уроками по JavaScript из курса Стать программистом. Основы JavaScript для абсолютных новичков!. Если же нет, и вы являетесь новичком в JavaScript’e, то советую сначала ознакомиться с ним, а уже затем приступать к текущему. Ссылки на предыдущий курс вы сможете найти в конце этой статьи.

Ну а мы начинаем!

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

Что будем делать.

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

Как я уже упоминал в последнем уроке предыдущего курса, основной задачей нашей с Вами практики будет закрепление тех знаний, которые мы уже получили. Кроме того, мы с Вами познакомимся с новыми возможностями JavaScript, которые не рассмотрели в предыдущем курсе. Мы наглядно рассмотрим процесс разработки, попытаемся разобрать логику построения приложения, процесс оптимизации кода. Помимо этого мы закрепим практикой наши знания о взаимодействии JavaScript с DOM (объектной моделью документа) и постараемся, чтобы всё нами рассматриваемое как и раньше было понятно и доступно.

Что мы не будем рассматривать в этом курсе. Также, как и в предыдущем курсе, я не стану рассматривать в нашей практике основы работы с HTML и CSS. С самого начала будет предполагаться, что Вы уже знакомы с их основами. Если нет – то я, как и раньше рекомендую Вам воспользоваться для этих целей курсом нашей голосовчанки кукуси - @qqc, где очень доступно представлен язык разметки гипертекста HTML и там же в четвертом уроке вы найдете информации о CSS.

Теперь о том, что же именно мы будем делать. Когда я только стал задумывать о необходимости практики, то сначала я думал разобрать пример какого-нибудь сайта или приложения. Но затем я подумал, что на таких примерах будет слишком мало динамики. А мне бы очень хотелось, чтобы мы получали визуальное подтверждение нашей работы если не сразу, то хотя бы очень часто. Именно поэтому мой выбор лег на игры. Безусловно игра, которую мы создадим в процессе наших практических занятий, будет иметь минимальный набор возможностей, местами очень упрощенный. Но, сложности нам и не требуется. Нам достаточно будет понять сами принципы построения архитектуры и взаимодействия кода с визуальной частью.

Итак, вот то что мы будем делать:

Это небольшая игрушка, по своему принципу напоминающие старые японский игрушки – Тамагочи. Смысл очень простой – у нас есть питомец, в нашем случае муравей. Он находится в ограниченном пространстве, где собственно и обитает. У него есть небольшой набор действий, которые он может делать:

Играть

Гулять

Спать

Возможно в процессе самой практики мы еще добавим несколько возможностей нашему питомцу.
Вверху у нас есть три основных параметра нашего муравья: Усталость, Сытость и Настроение. Это счетчики, они постоянно уменьшаются:

как только один из этих параметров упадет – игра будет закончена:

ну а, чтобы пополнять наши счетчики, игрок должен щелкать на кнопки:

тем самым заботясь о мураше.

Плюс ко всему у нас есть индикатор действия:

который носит исключительно информативный характер и отображает информаци о текущем действии нашего питомца.

Рабочий прототип нашей практики (чтобы потыкать) можно найти по ТУТ. Еще раз благодарность @xtar за предоставление места под наши занятия.

Что нам для этого понадобиться.

Как и в предыдущем курсе, нам понадобиться не так уже много:

1. Желание и время – без них никуда.
2. Любой браузер для того чтобы мы могли видеть результат – я рекомендую Chrome и сам буду пользоваться именно им.
3. Любой Текстовый редактор для создания кода – я как и раньше рекомендую Sublime Text. Но вы можете использовать любой другой, какой Вам удобнее. Это не принципиально.
4. Нам понадобятся заготовка с уже готовой файловой структурой, стилями, картинками и html моделью. Эти файлы вы можете скачать, пройдя по этой ссылке

Соответственной архив, который вы скачаете вам надо будет распаковать и положить это все дело туда где вы и будете работать.

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

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

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