JavaScript добавляет странице поведение: реагирует на действия, меняет текст и отправляет запросы. Гайд начинается с небольших программ и заканчивается работающим интерфейсом без сторонних библиотек.
Как пользоваться гайдом
Нужны браузер, редактор кода и базовые знания HTML. Знание CSS поможет оформить результат, но для первых упражнений не обязательно. Откройте консоль разработчика: туда можно выводить промежуточные значения.
1. Подключаем JavaScript к странице
Сохраните код в файле app.js и подключите его в HTML с атрибутом defer. Тогда браузер выполнит скрипт после разбора документа, не блокируя разметку.
<button id="hello" type="button">Приветствие</button>
<script src="app.js" defer></script>Создайте app.js со строкой console.log("Скрипт подключён"); и найдите сообщение в консоли браузера.
2. Переменные и значения
Используйте const, если переменной не нужно новое присваивание, и let, если значение будет меняться. Строки, числа, логические значения и null ведут себя по-разному; проверяйте результат через typeof.
const project = "Сайт студии";
let tasksDone = 0;
tasksDone += 1;
console.log(project, tasksDone, typeof tasksDone);Создайте переменные для названия проекта, числа страниц и признака публикации. Выведите каждую в консоль.
3. Условия и сравнения
Условие выбирает действие по значению выражения. Для сравнения значений и типов используйте ===; запись = выполняет присваивание и здесь не подходит.
const width = window.innerWidth;
if (width < 600) {
console.log("Узкий экран");
} else {
console.log("Широкий экран");
}Измените порог с 600 на 800 и проверьте сообщение при разной ширине окна.
4. Массивы, объекты и циклы
Массив хранит упорядоченный набор значений, объект — именованные свойства. Цикл for...of помогает обработать каждый элемент массива. Избегайте повторения одинаковых строк кода вручную.
const services = [
{ name: "Сайт", price: 100000 },
{ name: "Поддержка", price: 15000 }
];
for (const service of services) {
console.log(service.name, service.price);
}Добавьте третью услугу и выведите только те, у которых цена больше 20 000.
5. Функции и возвращаемые значения
Функция объединяет действие с понятным именем. Параметры передают данные внутрь, а return отдаёт результат. Старайтесь, чтобы функция решала одну задачу и не зависела от скрытых переменных.
function formatPrice(value) {
return new Intl.NumberFormat("ru-RU").format(value) + " ₽";
}
console.log(formatPrice(15000));Напишите функцию, которая получает имя и возвращает строку приветствия, не выводя её сама.
6. Находим элементы в DOM
DOM — представление HTML-документа в браузере. querySelector находит первый элемент по CSS-селектору. Если элемент не найден, результат будет null, поэтому при изменении страницы это стоит учитывать.
const heading = document.querySelector("h1");
if (heading) {
heading.textContent = "Привет, JavaScript!";
}Добавьте абзац с классом .status и измените его текст через JavaScript.
7. События и кнопки
Обработчик события запускается после действия пользователя. Не записывайте обработчик прямо в HTML через onclick: отдельный файл проще поддерживать и проверять.
const button = document.querySelector("#hello");
const status = document.querySelector(".status");
button.addEventListener("click", () => {
status.textContent = "Кнопка нажата";
});Добавьте счётчик нажатий. При каждом клике обновляйте число в тексте страницы.
8. Формы и проверка данных
Событие submit происходит при отправке формы, в том числе клавишей Enter. Простейшая проверка на клиенте улучшает подсказки, но на сервере данные всё равно нужно проверять повторно.
const form = document.querySelector("#contact-form");
form.addEventListener("submit", (event) => {
const name = form.elements.name.value.trim();
if (!name) {
event.preventDefault();
form.elements.name.focus();
}
});Создайте форму с полем name и сообщением об ошибке. Проверьте пустой ввод и ввод с пробелами.
9. Запросы и асинхронный код
fetch получает данные по сети. Ответ может быть ошибочным даже без сетевого сбоя, поэтому проверяйте response.ok. Для учебного проекта используйте тестовый JSON-файл, размещённый рядом со страницей.
async function loadData() {
try {
const response = await fetch("data.json");
if (!response.ok) throw new Error("Не удалось загрузить данные");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}Создайте data.json с массивом услуг и выведите его в консоль. Запускайте страницу через локальный сервер, а не file://.
10. Итоговый проект: список задач
Соберите небольшую страницу со строкой ввода, кнопкой и списком. По нажатию добавляйте непустую задачу в DOM через createElement и textContent. Так текст пользователя не интерпретируется как HTML.
const input = document.querySelector("#task");
const list = document.querySelector("#tasks");
document.querySelector("#add").addEventListener("click", () => {
const value = input.value.trim();
if (!value) return;
const item = document.createElement("li");
item.textContent = value;
list.append(item);
input.value = "";
});Добавьте удаление задачи отдельной кнопкой. Проверьте пустую строку, длинный текст и ввод с символами < и >.
Что изучать дальше
Если нужен справочный синтаксис, откройте справочник JavaScript. Для продолжения посмотрите учебный раздел MDN по JavaScript. Чтобы понять серверную часть сайта, переходите к гайду по PHP.