Программирование на JavaScript: чек-лист для быстрого старта

Программирование на JavaScript: чек-лист для быстрого старта

В этой статье собрано все, что нужно, чтобы начать кодить на JavaScript. Что предстоит выучить? Как тренировать навыки? Какие программы и расширения следует установить?

В 2023 году JavaScript занимает 1 место в списке самых популярных языков программирования. JS используют разработчики сайтов, игр, мобильных приложений и другие IT-специалисты для создания интерактивного и динамического контента.  Если из всех языков программирования вы выбрали джаваскрипт, но не знаете с чего начать обучение — эта статья поможет вам.

С чем нужно ознакомиться перед погружением в JavaScript

Основное применение JavaScript — это разработка сайтов. Она требует знания базовых инструментов, таких как:

  • HTML — стандартный язык гипертекстовой разметки, используемый для создания веб-страниц и веб-приложений. Он нужен для размещения на странице таких элементов, как: заголовки, текстовые блоки, списки, картинки, видео, аудиофайлы, таблицы и анимации.
  • CSS — язык программирования, который используется для декорирования веб-страниц. Он позволяет задавать стили для элементов и делать ваш проект привлекательным.

Что нужно установить

Google Chrome. С этим браузером лучше всего обучаться JS, потому что он является одним из самых часто используемых среди аналогов  и имеет понятный и удобный интерфейс для разработки.

VS Code. Текстовый редактор помогает ускорить написание кода. Он имеет такие функции как автодополнение, рефакторинг, подсветка синтаксиса, а также поддерживает различные плагины.

Git и Git Bash. Git нужен для фиксации изменений в проекте. Он хранит полную историю преобразований, создает резервные копии и может восстановить состояние проекта до изменений. А Git Bash обеспечивает работу Git в ОС.

Node.js. Серверная платформа позволяет разработчику создавать серверный код и расширяет возможности JS.

Что нужно сделать

Зарегистрироваться на веб-сервисе для хостинга GIT-проектов

* Веб-сервис для хостинга Git-проектов — это интернет-платформа для сохранения кода, работы над проектами и совместной разработки ПО.

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

Загрузить расширения для VS Code

Расширения упростят работу с JavaScript. Они «причесывают» код за вас, чтобы сделать его более удобным для чтения, исправляют ошибки и облегчает навигацию. Вот наиболее полезные расширения на наш взгляд:

  • Prettier автоматически форматирует код. Если вы забыли кавычки, отступы и точки с запятой, Prettier заботливо напомнит вам об этом
  • Live Server позволяет увидеть, как меняется проект в режиме реального времени. Как только вы сохраняете код, в браузере тут же отображается актуальная версия проекта
  • ESLint помогает разработчику найти и исправить ошибку в коде, не запуская его
  • Prettify JSON автоматически приводит в порядок JSON-код
  • JavaScript (ES6) code snippets пишет за вас целые строки кода по коротким сочетаниям клавиш
  • Todo сканирует код и выводит комментарии с пометкой TODO в отдельную панель
  • Auto Close Tag автоматически добавляет закрывающий тег  в HTML и XML по ходу написания кода
  • Code Runner запускает фрагменты кода на нескольких языках программирования
  • Material Icon Theme добавляет возможность поставить иконку к файлу для более быстрого ориентирования
  • Git Graph отображает историю изменения, ветки и слияния в репозитории Git. Позволяет осуществлять поиск по истории.

Выбрать удобную тему для глаз

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

  • One Dark Pro
  • GitHub Theme
  • Dracula Official
  • Monokai Pro
  • GitHub Theme
  • Winter is Coming
  • Night Owl/Light Owl.

Добавить во вкладки полезные сайты

  • CodePen — онлайн-редактор для создания фронтэнд-кода на HTML, CSS и JavaScript. Он позволяет разработчикам легко обмениваться кусочками кода, а также находить подходящие фичи для своего проекта
  • Habr — онлайн-площадка, где IT-специалисты создают личные блоги и публикуют свои полезные или просто любопытные статьи
  • Stack Overflow — здесь можно задать вопрос и получить ответ от других пользователей. Также HR-менеджеры используют Stack Overflow для поиска специалистов
  • MDN Web Docs - Mozilla — платформа для поиска документаций, учебных материалов, руководств и прочей полезной информации о веб-технологиях
  • learn.javascript.ru — онлайн-учебник по JavaScript.

Бесплатные тренажеры

В процессе обучения программированию важно применять полученные навыки на практике. Потому что работа в IT и есть решение цепочки задач с помощью всевозможных инструментов. Научиться применять знания на практике помогают тренажеры.

  • Elbrus Bootcamp тренажер: курс «Изучаем JavaScript» разбит на параграфы: от основ до методов массивов. Параграфы разбиты на уроки. Уроки содержат теорию и большинство из них включают в себя практические задачи. Пройдя все теоретические уроки и успешно решив 65 задач, вы получите необходимую базу знаний для дальнейшего обучения и работы. Уроки следуют друг за другом от простого к сложному. Материалы содержат ссылки на дополнительные источники, которые могут помочь в решении задач.
  • Codewars: англоязычный сайт с задачами. В Codewars программист решает не просто задачу, а ката. Слово «ката» пришло из японских боевых искусств. Это последовательность движений, которые необходимы, чтобы одолеть невидимого противника. Решая ката в Codewars, вы повышаете свой рейтинг и можете соревноваться с невидимыми противниками — другими пользователями. Сайт также предлагает объединяться в кланы, чтобы поддерживать мотивацию, наблюдая за прогрессом других членов клана. Минусом Codewars является полное отсутствие теоретического материала, что делает его непригодным для начинающих.
  • LeetCode: задачник, который помогает подготовиться к техническим собеседованиям. Здесь иногда появляются задачи с реальных тех. интервью. Но не стоит воспринимать этот сайт, как чит-код для успешного устройства на работу. Вероятность того, что на собеседовании вам попадется выученная наизусть задача крайне мала. Лучше относитесь к LeetCode как к тренажеру.

Что нужно изучить

  • Как подключить скрипт
  • Основы синтаксиса
  • Переменные и типы
  • Основные и логические операторы
  • Работу с числами и строками
  • Ветвления и область видимости
  • Массивы и популярные методы взаимодействия с ними
  • Функции
  • Объекты
  • Деструктуризацию + spread + rest
  • Callback и стрелочные функции
  • Ключевое слово this и понимание контекста
  • Объектно-ориентированное программирование
  • Прототипное наследование
  • Прототипы и классы
  • DOM
  • События и делегирования событий
  • Throttle и Debounce
  • Отложенную загрузку
  • Пакетный менеджер npm и основные команды
  • Webpack или Vite
  • Формат JSON
  • Веб-хранилище
  • Асинхронность
  • Таймеры и работу с датами и временем
  • Промисы
  • HTTP-запросы
  • Пагинацию
  • CRUD
  • Асинхронные функции
  • Базовое понимание алгоритмов
  • Рекурсию.

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

Vanilla JavaScript — это только 1/3 знаний, которые понадобятся, чтобы стать полноценным веб-разработчиком. Но без этой базы вы не сможете двигаться дальше. Самостоятельное обучение трудное, но не невозможное дело.

Помочь с обучением JavaScript вам поможет Elbrus Bootcamp.

Полезные ссылки

Софья Пирогова

Софья Пирогова

автор статей / копирайтер
Георгий Бабаян

Георгий Бабаян

Основатель и CEO Эльбрус Буткемп