JavaScript с нуля: полный учебник для начинающих

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

Что Вы научитесь делать

За 20–30 минут Вы:

• запустите первый JavaScript-код;
• разберётесь с переменными, условиями и функциями;
• поработаете с массивами;
• поменяете HTML через JavaScript;
• отправите первый запрос к API.

Что понадобится: только браузер. Ничего устанавливать не нужно.

JavaScript и его задачи

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

Стандарт языка называется ECMAScript. Название JavaScript часто сокращают до JS. С языком Java он не связан, несмотря на похожее имя.

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

Как браузер выполняет JavaScript

Браузер получает HTML-документ, строит структуру страницы и запускает подключённые скрипты. JavaScript-движок читает код, проверяет синтаксис и выполняет инструкции. Скрипт может вычислять значения, создавать функции, обращаться к элементам страницы и реагировать на события.

💡 Важно

JavaScript чувствителен к регистру:

1

userName

и

1

username

— две разные переменные.

Для небольшого эксперимента отдельная программа не нужна. Код можно запустить в консоли браузера или прямо в блоке ниже.

const userName = 'Мария';
const message = document.querySelector('#message');
message.textContent = `Привет, ${userName}! JavaScript работает.`;
console.log('Скрипт выполнен');

Что здесь происходит:

• 1	const userName = 'Алексей';

  создаёт переменную и записывает в неё строку;

• 1	document.querySelector('#message')

  находит HTML-элемент с

  1	id="message"

  ;

• 1	textContent

  записывает новый текст внутрь найденного элемента;

• 1	console.log()

  отправляет сообщение в консоль песочницы.

⚠ Частая ошибка

1	querySelector()

вернёт

1

null

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

Переменные и типы значений JavaScript

Переменная хранит значение, к которому программа обращается по имени. В современном JavaScript для объявления переменных чаще применяют

и

. Через

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

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

Можно пока пропустить

1

BigInt

и

1

Symbol

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

const language = 'JavaScript';
let lessonsCompleted = 4;
lessonsCompleted = lessonsCompleted + 1;
document.querySelector('#variableResult').textContent =
`${language}: выполнено уроков — ${lessonsCompleted}`;

Строка

создаёт переменную со значением

. Следующая строка берёт текущее число, прибавляет единицу и записывает результат обратно.

не переназначается, поэтому для него выбран

.

Условия if и else

Условие позволяет выбрать одну из веток программы. Конструкция

запускает блок кода при истинном выражении.

задаёт ветку для случая, когда проверка дала

.

const age = 18;
const result = document.querySelector('#accessResult');
if (age >= 18) {
result.textContent = 'Доступ разрешён';
} else {
result.textContent = 'Доступ закрыт';
}

Разберём код по строкам.

хранит возраст. Выражение

возвращает

или

. При

выполняется код внутри

. При

запускается блок

.

Циклы for и while

Цикл повторяет один участок программы несколько раз.

удобен, когда счётчик меняется по понятному правилу.

продолжает работу, пока его условие остаётся истинным.

let output = '';
for (let number = 1; number <= 10; number++) {
output += number + '\n';
}
document.querySelector('#loopResult').textContent = output;

В заголовке

находятся три части.

создаёт счётчик.

разрешает очередной проход цикла.

прибавляет единицу после прохода.

Функции: как не повторять один код

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

. Такой подход помогает делить программу на небольшие части.

function calculateTotal(price, quantity) {
return price * quantity;
}
const total = calculateTotal(750, 4);
document.querySelector('#totalResult').textContent = total;

Что здесь происходит:

• 1	calculateTotal

  — имя функции;

• 1

  price

  и

  1

  quantity

  — параметры функции;

• 1

  750

  — первый аргумент, он попадает в

  1

  price

  ;

• 1

  3

  — второй аргумент, он попадает в

  1

  quantity

  ;

• 1

  return

  возвращает результат умножения;

• 1

  total

  получает возвращённое значение.

Массивы и методы map, filter, reduce

Массив хранит упорядоченный набор значений. Элементы получают числовые индексы, отсчёт начинается с нуля. Размер массива JavaScript можно менять:

добавляет элемент в конец, а

удаляет последний.

const languages = ['JavaScript', 'Python', 'PHP'];
languages.push('C++');
languages.push('TypeScript');
document.querySelector('#arrayResult').textContent = languages.join(', ');

Для массивов есть методы, которые часто заменяют ручные циклы.

создаёт новый массив после преобразования элементов.

оставляет элементы, прошедшие проверку.

сворачивает набор значений в один результат. Эти методы удобнее разбирать после базового цикла

.

Объекты JavaScript

Объект хранит пары «ключ — значение». Такой формат подходит для сущностей с именованными свойствами: пользователя, товара, настройки или записи. К свойству можно обратиться через точку или квадратные скобки.

1
2
3
4
5
6
7
const user = {

  name: 'Анна',

  role: 'developer',

  experience: 2

};



console.log(user.name); // Анна

Здесь

хранит объект, а

,

и

являются его свойствами. Запись

читает значение свойства

.

DOM: связь JavaScript с HTML

DOM (Document Object Model) — программное представление HTML-документа в виде дерева объектов. Через DOM JavaScript находит элементы страницы, меняет текст и атрибуты, создаёт новые узлы и удаляет старые. Событие сообщает скрипту о действии пользователя: клике, вводе текста, отправке формы или нажатии клавиши.

let clicks = 0;
const button = document.querySelector('#counterButton');
const counter = document.querySelector('#counter');
button.addEventListener('click', () => {
clicks += 2;
counter.textContent = clicks;
});

⚠ Частая ошибка

Обработчик события нужно передавать функции

1	addEventListener()

, а не вызывать заранее. Запись

1	button.addEventListener('click', handler)

передаёт функцию. Запись

1

handler()

запускает её сразу.

Асинхронный код, Promise и запросы к API

Сетевой запрос требует времени, поэтому браузер не должен останавливать страницу на период ожидания ответа. Для таких задач JavaScript работает с асинхронными операциями. Объект

хранит будущий результат операции, а

помогает записывать асинхронный код последовательно и читаемо.

async function loadPost() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/2');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const post = await response.json();
document.querySelector('#apiResult').textContent = post.title;
console.log(post);
}
loadPost().catch(error => {
document.querySelector('#apiResult').textContent = `Ошибка: ${error.message}`;
});

отправляет HTTP-запрос и возвращает Promise.

ждёт его завершения внутри функции с

. Свойство

проверяет успешный HTTP-статус. Метод

читает JSON-ответ и преобразует его в значение JavaScript.

💡 Важно

1

fetch()

обычно не создаёт исключение из-за HTTP-статуса 404 или 500. Такие ответы нужно проверять через

1	response.ok

или

1	response.status

.

Как учить JavaScript без пробелов в базе

Удобный порядок: синтаксис и переменные, условия, циклы, функции, массивы и объекты, DOM и события, затем Promise,

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

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

Для закрепления базы подойдут маленькие проекты: счётчик, калькулятор, список задач, форма с проверкой полей, фильтр карточек или загрузка информации из открытого API. Один законченный мини-проект обычно даёт больше понимания, чем длинная серия примеров, которые были просто перепечатаны.

Типичные ошибки начинающих

Частая ошибка — переход к React, Vue или другому фреймворку до свободной работы с функциями, массивами, объектами и асинхронным кодом. Фреймворк скрывает часть деталей, поэтому пробелы в базе проявляются позже при отладке. Ещё одна проблема — копирование готового кода без проверки каждой строки.

Следите за консолью браузера: синтаксические ошибки и исключения обычно сразу показывают описание проблемы и строку, где она возникла. Проверяйте небольшие фрагменты отдельно, называйте переменные по смыслу и не помещайте всю логику в одну функцию. Такой стиль упрощает поиск ошибок и дальнейшую работу с проектом.

Куда двигаться дальше

Дальше переходите к отдельным темам JavaScript и отрабатывайте каждую на коде. Ближайший полезный набор — переменные, типы, функции, массивы, DOM, события, Promise,

и Fetch API. Эти темы покрывают базу, которая нужна для большинства браузерных проектов.

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