Что такое JavaScript

JavaScript — язык программирования, который выполняется в браузере. HTML отвечает за структуру, CSS за вид, а JavaScript — за поведение: реакцию на клик, проверку формы, подгрузку данных без перезагрузки страницы.

Сегодня он работает не только в браузере: на Node.js пишут серверы, на React Native — мобильные приложения, на Electron — десктопные программы. Один язык закрывает почти весь стек.

Где подключать

Скрипт подключается тегом script. Ставьте его перед закрывающим body или добавляйте defer, чтобы не тормозить отрисовку страницы.

<script src="app.js" defer></script>

Основы, без которых не двинуться

• Переменные — let для изменяемых, const для постоянных. var устарел.
• Типы — строка, число, булево, объект, массив, null и undefined.
• Функции — обычные и стрелочные: const f = (x) => x * 2.
• Условия и циклы — if, for, for...of.
• Массивы — map, filter, find, reduce.
• Объекты — доступ через точку и деструктуризация: const { name } = user.

DOM: доступ к странице

DOM — это дерево элементов страницы. Через него скрипт читает и меняет разметку:

const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
  btn.textContent = "Готово";
});

Частая ошибка новичка — получить элемент до того, как он появился в документе. Скрипт со defer или вызов внутри DOMContentLoaded решает проблему.

Асинхронность

Запросы к серверу занимают время, но не должны блокировать страницу. Отсюда Promise и async/await:

async function load() {
  const res = await fetch("/api/posts");
  const data = await res.json();
  console.log(data);
}

Без понимания промисов дальше двигаться бесполезно: почти любой современный код их использует.

План изучения

Порядок, который работает: синтаксис и типы, функции и массивы, DOM и события, промисы и запросы, модули, затем инструменты — npm, сборщик, git. Фреймворк — в конце, когда язык уже понимается.

Практика обязательна: калькулятор, список задач, погода через API. Каждый проект маленький, но законченный — так видны ошибки и растёт скорость.

Когда фреймворк не нужен

Для меню, слайдера, маски телефона и валидации формы хватает 50–100 строк ванильного JavaScript. React или Vue добавляют сборку, зависимости и вес — это оправдано на больших интерфейсах, но не на лендинге.

Нужен сайт, а не статья?

Напишу фронтенд без лишних библиотек: интерактив, формы, интеграции с API. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: про React, примеры HTML, примеры CSS.