Программирование: с чего начать обучение самостоятельно + практические уроки и исходники кода

Доброго времени суток Бро. Javascript – это язык программирования, который срабатывает на стороне клиента при загрузке страницы. Вебмастера используют его для разработки новых интересных функций, чтобы улучшить свой сайт, и чтобы пользователи задерживались дольше обычного. Появление всплывающих окон в браузере на сайте, погрузка комментариев, размещение статей, визуальный вордовский редактор в админке, все это было создано на JS. Если вы собираетесь улучшить свой сайт c помощью JS, то сначала необходимо выучить этот язык. Программирование, с чего начать обучение? Новичкам, которые ранее не сталкивались с программированием, следует делать первые шаги с самых основ. В конце статьи будут приведены книги, в помощь тем, кто хочет расширить знания с чего самостоятельно начать обучение.

Программирование с чего начать обучение самостоятельно

Программирование: с чего начать обучение самостоятельно без курсов

Технология JS постоянно улучшается, разработчики выпускают новые библиотеки и движки для создания двухмерных игр. Появилась возможность делать трехмерные игры, для этого нужна библиотека – Three.js.

Джаваскрипт программирование

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

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

№1. Переменные

Переменные простыми словами — это “хранилище данных”, где находятся временные или постоянные значения. Чтобы обозначить переменную необходимо использовать “var” или “let”.

код

Выше указанные данные называются объявлением. Они существуют, но значения пока нет. На картинке ниже показано присвоение. Данный способ называется инициализация.

код скрипта

Важно: Помните, что инициализация, это когда в начале кода по умолчанию устанавливаются значения. Их можно поменять во время исполнения скрипта, но если требуется указать статический параметр, который не меняется, например название сайта, то в этом случае рекомендуется использовать константы const site=”https://firelinks.ru/”;.

Типы данных существует несколько: целые, числа с плавающей точкой, булевые и строковые.

булевые и строковые

№2. Массивы

Разработчики довольно часто сталкиваются с ситуацией, когда требуется хранить список из десятков или сотен значений. Такое может быть в html5 играх или в крупных проектах. Создавать под каждое значение переменную неразумно, поэтому рекомендуется использовать массивы.

Существует два вида массива:

  1. Простые – хранятся в ячейках, это могут быть числа, имена и так далее.
  2. Ассоциативные – подразумевает ключ значения. При выводе данных требуется указывать ключ, вместо индекса.

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

  • Var arr = [“one”,”two”,”three”];
  • Push – записывает параметр, если добавить в скобки “four”, то этот элемент добавиться в конец.
  • Pop – удаляет последнюю ячейку, ничего не передает, просто укажите команду через точку и пустые скобки.
  • Splice – производит замену содержимого ячеек. Принимает четыре параметра, первые два удаляют значения, вторые заменяют. Если вставить только первые два, например, (0, 2), то произойдет просто удаление, в нашем случае выведет “three”. Если задействовать последние два параметра и добавить, например, “1”,”2”, то в итоге получим 1,2, three.
  • Shift – убирает первый элемент
  • Unshift – добавляет указанный element, в начало. В скобках нужно написать значение, а не номер элемента. Весь результат показан ниже.программирование с чего начать обучение: Unshift массив

№3. Условия

Разветвленные алгоритмы строятся с помощью условий, то есть пользователю предоставляется выбор действий, от которого зависит итоговый результат. Чтобы осуществить такую проверку существует конструктор if {} else {}. Если условие выполнилось, то сработают первые фигурные скобки при другом раскладе вторые.

 Вот несколько вариантов, где пригодится if else:

  1. Прохождение тестов – здесь потребуется выбрать правильные ответы и получить в итоге статистику по набранным балам.
  2. Заполнения формы регистрации и отправки на сервер. Посетитель заполняет о себе информацию на сайте и отправляет кнопкой submit в php обработчик, где происходит проверка на правильность ввода логина, пароля и почтового ящика.
  3. Интернет магазины и платные услуги – аналогично с предыдущим вариантом проверяет поля формы. Некоторые сайты требуют от пользователей при оформлении платных услуг указать номер телефона. Для этого существуют регулярные выражения, они проверяют, действительно пользователь ввел номер или просто набор букв.

При написании больших проектов структура разветвления может существенно увеличиться. В этом случае рекомендуются добавить в script другой конструктор switch case. Полная реализация всех условий показана на картинке ниже:

Программирование кода проекта

№4. Циклы

Если требуется перебрать массив и выбрать определенные ячейки, то для этого существуют циклы. Они бывают нескольких видов for, foreach, while и (do … while). Каждый предназначен для определенных целей. Их нередко используют для решения математических задача, но самое частое применения, это сайты.

Показ информации из базы данных: статей, товаров, картинок и другого контента. Так же при разработке компьютерных или браузерных игр используют циклы, если нужно отобразить содержимое инвентаря или показать список уровней.

Циклы в программировании

№5. Функции

При создании проекта, некоторые части скрипта нужно запускать, нажав кнопку, или, когда пройдет определенный интервал времени. В таких случаях используются function.

Существуют несколько способов сделать вызов участка кода при нажатии кнопки onclick или setTimeout.

Функция Click

Обратите внимание на DOMContentLoaded, дело в том, что js начинает работать после полной загрузки страницы, ContentLoaded, проверяет построения dom-документа, потом уже начинает работать script, который находится в фигурных скобках. Код в файле это несколько вариантов. Нажатие ссылки – это обычный onclick и слушатель событий addEventListener. Там, где в документе присутствует setTimeout, он срабатывает один раз по истечению времени, 1000 означает одну секунду.

№6. Математические функции программирования

Для обычных проектов вряд ли понадобиться использовать синусы и косинусы, но если вы решили создать игру в html5, например, 2d стрелялки, вид сверху, то математические методы вам пригодятся, чтобы их применять, нужно использовать ключевое слов Math. Для демонстрации мы создадим шутер и разберемся с чего начать обучение программированию.

Под контролем игрока будет турель, которая с помощью мышки вращается вокруг свое оси и при стрельбе из пушки вылетает снаряд. На первый взгляд кажется все просто, но при попытке добавить объекты на холст и заставить их нормально работать возникнут трудности. На флэше, это можно сделать без проблем, там уже заранее подготовлена библиотека с нужными функциями.

Как это сделать на html? Ознакомимся с нашим кодом, здесь мы будем использовать холст canvas, нарисуем пушку с помощью rect и будем создавать ядра arc (окружность), и самое главное используем Math. С помощью него в “code” задействуем sin, сos, PI, atan2 и sqrt – требуется для вычисления окружности, где пуля будет исчезать за горизонтом преодолев отметку 200.

Первая, что необходимо сделать загрузить документ с помощью “DOMContentLoaded”, как показано на скриншоте. Так же там обозначены переменные, они потребуются для работы турели:

DOMContentLoaded функция ready Программирование с чего начать обучение самостоятельно

В ready мы устанавливаем ширину и высоту турели, создаем объект RotateRect и запускаем метод draw, последние три “mousedown, mousemove и анимате”, это выполнение действий мышкой и проигрывание анимации. Разберем RotateRect, структура состоит из переменных и методе draw. Полный kod показан ниже и прокомментирован.Программирование: с чего начать обучение самостоятельно + практические уроки и исходники кода

Чтобы пушка постоянно вращалась при перемещении мыши, нужно создать анимацию, для этого рекомендуется использовать requestAnimationFrame. В animate добавить draw, чтобы была перерисовка объектов, и не забываем вовремя делать очистку холста, чтобы избежать следов оружия и пуль.Команды для программирования игры

На рисунке выше обратите внимание на цикл for, где shots. Там можно увидеть, как запускается перерисовка (draw) и происходит обновление (update). Они будут срабатывать только в том случае, когда в массив shots окажется хоть одна пуля. Это произойдет при щелчке мыши. Рассмотрим работу myDown и myMove.

работу myDown и myMove

Последнее, что нужно сделать реализовать сами пули. Делается это с помощью скрипта Shot, рабочая версия показана на рисунке ниже.Программирование: скрипт Shot

Реализация кода завершена, здесь вы узнали, что такое Math, если остались вопросы скачайте исходники и протестируйте их.

Введение в стрелочные функции

Этот способ написания был введен как новая функциональность ECMAScript 2015. Основная цель уменьшить объем строчек кода. Arrow Functions нельзя дать имя, это показано на картинке внизу.Arrow Functions

Если написать название перед круглыми скобками выдаст ошибку. Увидеть ее можно, нажав клавишу f12, и выбрав вкладку “Console”. Как упоминалось ранее, это способ написание кода короче обычного, дальше предоставлен листинг.

пример кода

Обратите внимание на 3 вариант, он записан в одну строчку и выполняет ту же задачу, что и первые два. Результат вывода в консоли, мы получим 4, 8, 16.

Примечания: уберите полностью скобки и запишите вот так “const func3 = x => x * 2;” вы получите, то же самое.

Создать метод можно и с пустыми параметрами.Программирование: с чего начать обучение самостоятельно + практические уроки и исходники кода

При вызове getPerson через console.log мы получим объект name и age.

Если аргументы в скобках не заданы, они в любом случае должны быть поставлены, иначе выдаст ошибку.Задание аргументов

Ранее была показана работы с мышкой, сделаем то же самое, только на этот раз воспользуемся “Arrow Functions”.Arrow Functions в коде

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

Во вложенных функциях, для доступа к внешнему параметру, придется использовать that или self.  А в стрелочном варианте this берется из окружения, а не присваивается при создании нового ключа.Пишем код функции

Ну а теперь предлагаю скачать все исходники урока в архиве:

Литература для изучения программирования: с чего начать обучение?

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

  1. Основы – Пол Уилсон
  2. Принципы ООП в JavaScript – Николас Закас
  3. Шаблоны – Стефанов Стоян

В этой статье мы осветили такую тему “программирование с чего начать обучение”. Привели несколько интересных html файлов, где показали основы JS. Создали турель для стрельбы, чтобы продемонстрировать математику на реальном примере, если остались вопросы скачайте архив.

Рейтинг
( 4 оценки, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: