8 дек. 2023 г. Время чтения: Около 4 мин. Веб-разработка

Программирование на 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 знаний, которые понадобятся, чтобы стать полноценным веб-разработчиком. Но без этой базы вы не сможете двигаться дальше. Самостоятельное обучение трудное, но не невозможное дело.