Начинающие разработчики часто считают, что перед тем, как приступить к работе с популярными фреймворками вроде React, Angular или Vue, им нужно досконально изучить JavaScript. На полное изучение всех нюансов этого языка программирования можно потратить годы, но для полноценного старта в профессии frontend-разработчика это необязательно. Начните знакомство с JavaScript с ключевых аспектов, перечисленных в этой статье.

Базовые понятия JavaScript

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

• Объекты
  Разберитесь, как средствами JavaScript объявить объект и получить доступ к его свойствам. Узнайте, как использовать массивы в качестве значения свойства объекта
• Функции
  Нужно уметь объявить простую функцию и знать, когда нужно возвращаться из функции, а когда нет. Также вам следует научиться передавать параметры в функцию и вызывать ее
• Переменные
  Узнайте, когда и как для создания переменных применяются понятия "let", "const", "var"
• Условные операторы
  Есть 8 операторов условий (>, <, >=, <=, ==, !=, ===, !==). Сюда же относятся &&, ||, if, else, else if. Научитесь правильно прописывать операторы условия в коде и разберитесь, для чего они используются
• Циклы
  Изучите правила использования циклов for loop и while loop. Еще необходимо усвоить, что "for of" для перебора элементов массива, а "for in" — для перебора элементов объекта
• Массивы
  Узнайте, как объявить массив, а также изучите, что означают и как работают в JavaScript такие термины как length, index, push, pop, indexOf и includes. Потренируйтесь работе с массивами, чтобы научиться находить в нем элементы, увидеть, как работает разделение и сращивание массивов

Типы данных

В JavaScript, есть 6 типов данных, которые делятся на 2 группы:

1. Примитивные или простые: number (число), string (строка), boolean (логический тип данных), undefined (отсутствие значения), null (ничто, пустота)
   
2. Составные: object (объект)

Для начала вам нужно получить базовое представление о каждом типе данных: в каких случаях и для чего используется, как прописывать, как преобразовать один тип данных в другой, как проверить тип данных. Что представляют собой строки, как прописывать дробные числа в скрипте, как превратить строку в переменную? Что такое изменяемые и неизменяемые строки? Чем отличается null от undefined? Как использовать логический тип данных (True и False)? Вы найдете ответы на эти вопросы, подробно изучив информацию о каждом типе данных.

Популярные библиотеки и плагины JavaScript

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

• jQuery
• D3.js
  
• Mocha
• Chart.js
  
• Grunt
• Gulp
  

Возможности API браузера

Начните знакомство с API браузера с изучения 3 моментов:

1. Что такое локальное хранилище и хранилище сессии, как ими пользоваться
   
2. Как пользоваться в браузере Location API и History API
   
3. Как получить данные, например, с веб-ресурса jsonplaceholder, и вывести их на странице создаваемого сайта

Объектная модель документа или DOM

Объектная модель документа или DOM нужна браузеру для того, чтобы на основе html-кода веб-страницы вывести все ее элементы, предусмотренные разработчиком. Но браузер не только использует DOM для отображения веб-страниц, но и предоставляет доступ к нему. Это значит, что средствами JavaScript вы можете изменять DOM.

Попрактикуйтесь и попробуйте изменять DOM веб-страниц. Можете добавить туда, к примеру, обработчик событий или другие дополнения, научиться извлекать данные и отображать их в интерфейсе пользователя. Выполните как минимум 3-4 тренировочных проекта, манипулируя DOM.

Инструменты отладки кода

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

• JavaScript Debugger
  
• Chrome Dev Tools
  
• ng-inspector
  
• встроенные средства отладки кода в браузере Google Chrome

Заключение

Предложенный в этой статье мини-гайд поможет вам сделать первые шаги в изучении и практической работе с языком программирования JavaScript. Помните, что самое сложное в изучении чего-то нового — начать занятия. Чем больше и чаще вы будете иметь дело с JavaScript, тем быстрее вы усвоите его ключевые понятия и сможете перейти на более высокий уровень. Главное — выработать привычку регулярно изучать возможности JavaScript, тестировать их на практике в учебных, а затем и в реальных проектах.