Построение плана изучения JavaScript с нуля

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

Содержание туториала

Доброго времени суток!

Каждый из нас при изучении чего-то нового сталкивался с одной и той же проблемой: в каком порядке все это учить, какой материал понадобится, какой нет, на что обратить особое внимание и т.д. В целом, можно сказать, что нам всегда не хватает плана изучения чего-то. И что бы кто не говорил - это одна из важнейших частей обучения. Помните как это было в школе? Четкая программа по которой нас вели за руку к результату.

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

P.S. Все, что описано дальше я визуализировал на специальной доске, можете подглядывать тут

1. Обозначьте свою цель

Прежде чем что-то учить - задайте себе вопрос: "А зачем я трачу свое время на это? Как я буду использовать эти знания и навыки?".

Без четкой цели будет сложно двигаться дальше. Можно что-то изучать для развлечения, заработка денег или продвижения по карьерной лестнице. Но нужно понимать зачем.

Вернемся к нашей основной теме - JavaScript'у. JS - это язык программирования, изначально созданный для взаимодействия с пользователем, для интерактивности. На сайтах вы точно видели модальные окна, слайдеры, отправляли заявки или регистрировались где-то - все это происходит при помощи JS. (пожалуйста, не путайте с языком Java - это совершенно разные вещи)

Язык довольно специфичный, со своими особенностями. Особенную популярность начал получать года с 2009, когда Google активно стал использовать его в своих проектах. Связано это с использованием технологии AJAX и всеми вытекающими возможностями - страницы в браузере могут вести себя как обычные приложения и работать без перезагрузки. 

Для чего вы можете начать его учить сейчас: 

  • расширить стек технологий - js сейчас применяется в большом количестве проектов и настанет тот день, когда и вы столкнетесь с ним. Пример: мой друг - разработчик игр, работая на C#, недавно в ускоренном темпе осваивал его, т.к. JS закрался и в его проект.
  • освоить новую профессию - да, сейчас рынок FronEnd разработки развивается очень быстро и толковых ребят отрывают с руками. Если вы хотите влиться в эту движуху - то без JS делать там нечего. Придется учить. Зарплаты здесь на достойном уровне, спрос большой, уровень вхождения низко-средний. При желании - сможет каждый.
  • развиваться как специалист - допустим, вы уже знаете JS на базовом уровне и умеете писать простенькие скрипты для лендингов. Но это лишь самое начало! Сейчас этот язык программирования вырос настолько, что при помощи библиотек и фреймворков можно писать веб-приложения (React, Angular, Vue...), нативные приложения для мобильных телефонов и компьютеров (React Native, Electron...), виртуальную реальность (React VR) или заняться BackEnd разработкой (Node.js и его производные). Но без знаний базы - нативного JS, будет крайне сложно. А освоив что-то из перечисленного, уже и проекты станут поинтереснее и з/п побольше :)
  • личный интерес? Сомнительная цель, но некоторых крайне интересует, почему же этот язык такой популярный.
  • цель, вытекающая из знаний: достояная з/п, интересные проекты, смена сферы деятельности, релокейт... Все мы люди ии у каждого может быть своя ситуация.

Главное - это видеть к чему вы идете и зачем оно вам. И даже когда хочется опустить руки, кажется, что ты тупой и ничего не получается - вспомнить о ней.

Корабль без руля как и человек без цели - в конце концов оказывается на мели

2. Основы JavaScript

Все начинается с основ: английский язык - с алфавита, игра на гитаре - с аккордов или нот, а изучение JS -  ...

2.1 Типы данных

В программировании мы работаем с информацией. Элементы на странице, количество и названия товаров, зарплаты сотрудников и т.д. - это все информация. И точно так же как и вы видите разницу между "Язык" и 42 , так же и JS различает типы информации. И в работе ведут они себя по разному. Если вы поймете, как все это устроено и запомните простую классификацию - у вас будет в разы меньше ошибок (особенно типичных ошибок новичков). А вот и она наглядно:

Типы данных

Стоит почитать про каждый из них, узнать особенности каждого и на базовом уровне с ними поработать. Тогда на собеседовании вы точно не затупите на вопросе: "А к какому типу данных относят массивы в JS?"

Важная информация: вы заметите, что часть типов пришла из новых стандартов (ES6+) и у вас встанет вопрос: "Нужно же учить все с самых последних стандартов? Разве нет?". 

Нет. Новые стандарты приносят лишь дополнительные и удобные возможности (синтаксический сахар). Стоит освоить базу стандарта ES5 и уже на нее "наслаивать" новые возможности языка, вплоть до ES10+

2.2 Операторы

Большинство из них вы уже знаете со школы: +, -, /, *, > и тд. Но есть и более специфичные для программирования, например &&, ||, ^ и прочие.

Да, часть используется реже, что-то вообще не применяется, но знать в лицо их нужно. Тем более, даже у самых банальных есть свои особенности (поговорим об этом чуть дальше).

2.3 Условия

Базовое понятие в программировании. В скриптах очень многое построено на условиях: если мы нажали красную кнопку - выполнилось одно действие, если нет - другое. Если одно из полей в форме пустое - она не отправится на сервер. Если пользователю нет 18 лет - часть функционала будет отсутствовать. Я думаю вы уловили суть :)

Здесь же стоит обратить внимание на тернарный оператор и конструкцию switch/case.

2.4 Циклы

Тоже базовое понятие в программировании. Зачем нам 10 раз повторять одно и тоже действие в коде? Это нерационально, некрасиво и непрофессионально. Потратьте 3 строки кода и запустите их при помощи циклов!

Здесь как раз и стоит познакомиться с тремя их видами, попробовать каждый и заучить их синтаксис.

2.5 Функции

Функция - это мельчайший кирпичик вашей программы. По простому это то, что она будет уметь. Ну, и конечно, вы с ними будете работать постоянно, так что обратите внимание на:

  • Классификацию ф-ций
  • Что такое замыкание ф-ций
  • callback - функции

Кстати, их применение - это тоже в своем роде оптимизация работы. Но это вы уже поймете на практике :)

2.5 Базовые понятия в ООП и работа с объектами

Нет, здесь не нужно сразу штудировать толстенную книгу про ООП (объектно-ориентированное программирование). Нужно понять смысл этого термина и как это применимо к объектам в JS. Собственно с последними стоит поработать. Узнать, что такое методы и свойства и куда их приткнуть в реальной практике.

Обратите внимание, что массивы относятся к частному случаю объектов. Так что не забудьте и про них: какие есть методы, как правильно с ними работать и тд.

2.6 Динамическая типизация в JS

Пока вы будете это изучать у вас возникнут вопросы. Правильные вопросы. Например, что будет, если мы сделаем так:

10 + "негритят"

или

5 + []

Тут стоит понять, что JS - это язык с динамической типизацией. Это значит, что один тип данных может переходить в другой в зависимости от ситуации. Многих это бесит, но если знать основные правила - все станет на свои места и ошибок станет заметно меньше. 

javascript

Заключение по этому большому пункту

Изучая основы вы будете работать с консолью. Все время. Это нормально. Понятное дело, что в реальных проектах вы не будете выводить в консоль 2+2, но для обучения на первых порах console.log() станет вашим другом. Освойте базовые навыки и теперь можно переходить к самой сути JS, к тому, с чем постоянно работают FrontEnd разработчики...

3. Работа со страницей

Да, здесь мы должны научиться менять страницу так, как нам хочется (ну или по ТЗ :))

3.1 Получение элементов со страницы

Начнем мы с этого пункта. Чтобы поменять цвет кнопки на веб-сайте (динамически, без редактирования CSS) мы должны получить её в JS. Для этого существует DOM API с которым и придется научится работать.

Все куда проще, чем на первый взгляд :) DOM (Document Object Model) - это всего навсего дерево html тегов на странице. И для работы с ним браузер предоставляет DOM API - интерфейс (набор команд) для доступа к спискам элементов или к одному конкретному.

Здесь стоит обратить внимание на современные способы получения querySelector и querySelectorAll. Мало того, что они могут получать элементы по селекторам, что очень удобно, но и у последнего есть своя особенность, связанная с методом forEach.

3.2 События

Все, чем занимается пользователь в браузере - браузер и отслеживает :) Клики, скроллы, нажатие кнопок и многое другое - все это события, которые в следующем пункте мы научимся использовать. Здесь стоит обратить внимание на то, что часть событий возникает только на определенных элементах. Например, только элемент form может вызвать событие submit, по простому - отправку формы с данными(или без) на сервер.

Особое внимание обратите на:

  • Всплытие событий
  • Объект события
  • Делегирование событий
  • Цикл событий

3.3 Обработчики событий

Обработчики - это функции, которые возникают после событий. Теперь мы сможем создавать свое поведение.

Пример:

При клике на кнопку она окрашивается в красный цвет.

Событие - клик.

Функция обработчик, которая возникает только после клика - окрашивание кнопки в красный цвет.

Кстати, насчет изменения элементов, обратите внимание на свойство .style у каждого элемента (это инлайн-стили) и .classList (позволяет манипулировать классами: добавлять/удалять/проверять...)

3.4 Отмена стандартных событий браузера

Что происходит, когда мы кликаем на ссылку? Верно, мы переходим по тому адресу. Но иногда такое поведение необходимо заблокировать. Как пример - при клике на ссылку у нас просто появится модальное окно, без перехода куда-либо. Здесь нам и понадобится такая возможность.

Тоже самое можно сказать про отправку формы - если мы хотим отправить её без перезагрузки страницы(ajax), то нам нужно отключить стандартный "релоад" после события submit. Или мы можем убрать возможность выделять и копировать текст на нашем сайте :)

3.5 Параметры глобальных объектов

Стоит понимать, что наш код запускается в браузере, а у него есть парочка своих понятий:

  • document - это наша страничка, которую мы видим и с которой можем работать.
  • window - это страница + элементы браузера: вкладки, кнопки и тд.
  • screen - это ваш монитор, с чего вы находитесь на странице. Это фиксированные параметры высоты/ширины экрана и вы никак их не поменяете. А вот 2 предыдущих можно спокойно поменять, например, изменив размер окна браузера.

С этими объектами мы тоже работаем и стоит знать различия в их работе.

3.6 JS параметры элементов

Ширина и высота элементов может быть задана или получена не только через CSS. В JS тоже есть свои аналоги, причем в некоторых случаях более специфичные и точные для работы. Обязательно к изучению :)

3.7 Работа скриптов с течением времени

Вас часто задалбывают модальные окна, выскакивающие на сайтах после n-секунд нахождения на нем? Или через 10 секунд после определенного действия?

На практике, в 30-40% заказов и проектов необходим такой функционал - и именно для этого я указываю этот пункт. setTimeout и setInterval - это сюда.

Заключение по этому большому пункту

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

4. Регулярные выражения

В любом случае вы с ними столкнетесь. Никто их не любит, но знать нужно. Они позволяют очень удобно работать с строками в ваших скриптах. Часто используются в масках телефонов, конфигах плагинов и тп. И часто вы их будете создавать в специальных сервисах. Но нужно же знать как?

regexp

5. JS в работе

Здесь уже затрагиваются темы, которые фронтендеры применяют в продакшене как в плане правильного построения архитектуры, так и более сложные: работа с сервером, ajax, localStorage...

5.1 Контекст вызова. this

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

5.2 Конструкторы

Хитрая фича, которую придумали сами программиисты при использовании стандарта ES5. Таким образом была решена проблема отсутствия классов, которые появились в ES6. НО! Классы из новых стандартов - это лишь красивая обертка (синтаксический сахар) для функций-конструкторов. Так что если хотите действительно знать, как это работает - эта тема для вас.

5.3 Формат передачи данных JSON

Перед изучением работы с сервером знать обязательно. Ничего сложного в этом нет, тем более после знакомства с обычными объектами в JS. 

Применяется и в связке с другимии языками.

5.4 Общение с сервером. AJAX

При помощи JS можно создавать различные запросы к backEnd часть (к серверу): получить такие-то данные, отправить и тп.

Причем технология AJAX позволяет делать это без стандартной перезагрузки страницы. Прямо на лету вы получаете и отправляете данные. Именно на этом принципе и работают современные веб-приложения. Здесь все не ограничивается отправкой контактных форм :)

Вспомните как работает Google Maps. Вы можете загружать различные участки карты, путешествовать по ним, задавать новые адреса - и все это без единой перезагрузки!

Это одна из самых важных тем. Особое внимание обратите на то, как работают XMLHTTPRequest и современный метод fetch()

5.5 Инкапсуляция

Обычно в проекте очень и очень много JS кода. А представьте, если он весь в одном файле. Все 15000 строк. Не очень удобно, правда?

Поэтому при разработке мы разбиваем все на отдельные кусочки - модули. Так намного удобнее работать с кодом + есть внутренние методы оптимизации.

5.6 Сборка проекта

А потом эти модули нужно еще и правильно собрать в 1 файл. Для этого мы знакомимся со сборщиками: browserify, webpack...

5.7 Перехват ошибок try/catch

Многие новички забывают, что у них могут быть ошибки в коде :) Причем эти ошибки иногда даже не зависят от разработчика. И чтобы все не сломалось - нужно научиться работать с конструкцией try/catch

5.8 Работа с LocalStorage

Прямо в браузере есть своя маленькая база данных у каждой страницы. И с ней мы можем работать при помощи JS. Например, если пользователь выбрал для себя какие-нибудь специфические настройки - почему бы их не записать ему прямо в браузер?

Заключение по этому большому пункту

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

6. Стандарт ES6

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

Большинство из них - это "синтаксический сахар" для удобства использования уже существующих возможностей. (выше про конструкторы и классы). Так что теперь вы будете "модернизировать" ваши знания.

На что обратить особое внимание:

  • переменные let/const
  • стрелочные функции
  • интерполяция
  • Promise
  • цикл for of
  • деструктуризация
  • spread/rest операторы
  • классы (Class)
  • как работать с Babel для перевода новых стандартов в старые для совместимости с старыми браузерами

7. Стандарты ES6+ (7,8,9 ...)

В них не так много дополнений да и используются они реже. Так что читайте документацию и пробуйте применять :)

Особое внимание на async/await!

8. Библиотеки и фреймворки

Настанет тот день, когда вы выйдете за рамки использования нативного JS.

Библиотеки и фреймворки - это уже написанный за вас функционал, который намного проще использовать. Одна команда может заменить сотню кода "внутри".

Библиотека - это небольшая функциональность, которая может решать определенную проблему. Вы диктуете ей правила.

Фреймворк - это большая система, где все, что нужно уже есть в нем. Она диктует вам что и как использовать.

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

Ту же Jquery можно освоить дня за 2 с документацией. И вы сможете это сделать!

Другие варианты (React, Vue, Angular...) будут посложнее, но все в пределах разумного. Все, что было в предыдущих пунктах, пригодится тут :)

9. Тестирование

Хороший разработчик - это уже тестировщик. Вы же не будете отдавать код, который сами не "потыкали"? :)

Но здесь разговор не об этом. Когда ваш проект разрастается, очень сложно отследить то, как изменения в одном участке кода влияют на остальной функционал. А после каждого фикса проверять все вручную или отдавать тестерам - крайне нерационально. Что же делать?

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

Технологий для этого очень много: mocha/chai, Jest ... Все примерно похожи, так что я уверен, что вы подберете для себя самый удобный инструмент.

Заключение

Этот план позволит вам не потеряться в том море информации, которое сейчас есть. Пройдя его, вы точно достигните своей цели!

Побольше практики и результат не заставит себя ждать.

Удачного обучения!