JavaScript с нуля: как оживить страницу

Мы прошли два этапа: собрали скелет (HTML) и надели на него костюм (CSS). Страница «О себе» теперь выглядит прилично — карточка по центру, красивые заголовки, стрелочки в списках, круглая аватарка. Но она мертва. Кликаете по ссылке — переход. Наводите на кнопку — ничего. Страница не реагирует, не считает, не запоминает.

Сегодня добавим третий и последний язык фронтенда — JavaScript. Он отвечает за поведение: реакции на клики, анимации, подсчеты, сохранение данных. К концу статьи ваша страница получит кнопку «Показать/скрыть хобби», счетчик посещений и плавную прокрутку.

Что такое JavaScript и зачем он нужен

Три языка фронтенда делят одну работу:

HTML — структура («здесь заголовок, здесь абзац»).
CSS — внешний вид («заголовок синий, отступ 20px»).
JavaScript — поведение («по клику на кнопку скрой этот блок»).

HTML и CSS — декларативные: вы описываете, что должно быть, но не пишете, как это сделать. JavaScript — императивный: вы даете браузеру команды одну за другой, как повар по рецепту. «Найди кнопку. Подожди клика. Когда кликнули — найди блок. Если блок виден — скрой. Иначе — покажи».

Именно JavaScript делает сайты интерактивными: подгружает комментарии без перезагрузки, валидирует формы, открывает модальные окна, анимирует меню.

Как подключить JavaScript

Как и CSS, JS подключается отдельным файлом. Создайте в папке с проектом файл script.js и добавьте перед закрывающим тегом </body>:

<body>
    <div class="container">
        <!-- ... ваш контент ... -->
    </div>

    <script src="script.js"></script>
</body>

💡 Почему перед </body>, а не в <head>? Браузер читает HTML сверху вниз. Если скрипт стоит в <head>, он выполнится до того, как браузер увидит кнопки и блоки на странице. Скрипт попытается найти кнопку — а ее еще нет. Размещение перед </body> гарантирует, что весь HTML уже загружен.

Синтаксис: переменные, типы, вывод

Переменные

Переменная — это коробка с именем, в которой лежит значение.

let count = 0;          // можно менять
const name = "Иван";    // нельзя переприсвоить

let — для значений, которые будут меняться (счетчик, текст).
const — для того, что задано раз и навсегда (ссылка на элемент, имя).

var — устаревший способ, не используйте его в новых проектах.

Типы данных

let number = 42;              // число
let text = "Привет";          // строка
let isVisible = true;         // булево (true/false)
let items = [1, 2, 3];        // массив
let user = { name: "Иван" };  // объект

Вывод в консоль

console.log("Привет, мир!");

Откройте страницу в браузере, нажмите F12 (или правой кнопкой → «Посмотреть код») и перейдите на вкладку Console. Там появится ваше сообщение. Консоль — главный инструмент отладки: всё, что вы захотите проверить, выводите сюда.

Ищем элементы на странице

Прежде чем что-то менять, JavaScript должен найти элемент. Главный инструмент — document.querySelector():

const title = document.querySelector("h1");           // первый <h1>
const button = document.querySelector("#toggle-btn"); // по id
const container = document.querySelector(".container"); // по классу

Синтаксис селекторов — тот же, что в CSS: тег, #id, .класс. Это удобно: вы уже умеете искать элементы.

Если элементов несколько — document.querySelectorAll() вернет список:

const allLinks = document.querySelectorAll("a");
console.log(allLinks.length); // сколько ссылок на странице

Реагируем на события

Событие — это действие пользователя: клик, наведение, нажатие клавиши, прокрутка. Подписываются на событие методом addEventListener:

button.addEventListener("click", function () {
    console.log("Кнопка нажата!");
});

Разберем: button — элемент, "click" — тип события, function () { ... } — что сделать, когда событие произойдет. Такая безымянная функция называется колбэк — «перезвони мне, когда случится клик».

Другие популярные события:

"mouseover" / "mouseout" — наведение и уход курсора.
"keydown" — нажатие клавиши.
"submit" — отправка формы.
"scroll" — прокрутка страницы.

Меняем страницу: классы, текст, стили

Переключение классов — главный прием

Самый чистый способ менять вид элемента — добавлять и убирать CSS-классы. Стили живут в CSS, логика — в JS. Они не смешиваются.

element.classList.add("hidden");      // добавить класс
element.classList.remove("hidden");   // убрать класс
element.classList.toggle("hidden");   // добавить, если нет; убрать, если есть

toggle — это if/else в одной строке. Идеален для «показать/скрыть».

Изменение текста

title.textContent = "Новый заголовок";

Изменение стилей напрямую

element.style.color = "red";

Работает, но считается плохой практикой: стили должны быть в CSS. Используйте classList и заранее описанные классы.

Условия и проверки

if (count > 0) {
    console.log("Счетчик положительный");
} else {
    console.log("Счетчик на нуле или отрицательный");
}

Сравнения: === (равно), !== (не равно), >, <, >=, <=. Используйте именно ===, а не == — второе делает неожиданные приведения типов и приводит к багам.

Собираем всё вместе: три фичи для страницы «О себе»

Обновим HTML. Добавим кнопку для блока с хобби и счетчик посещений:

<body>
    <div class="container">
        <h1>Привет, я Иван 👋</h1>

        <p>Начинающий веб-разработчик. Учусь делать сайты с нуля.</p>

        <h2>Мои навыки</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript (в процессе)</li>
        </ul>

        <h2>Мои хобби</h2>
        <button id="toggle-btn" class="btn">Скрыть хобби</button>

        <ul id="hobbies">
            <li>Фотография</li>
            <li>Бег по утрам</li>
            <li>Чтение технических блогов</li>
        </ul>

        <h2>Связаться со мной</h2>
        <p>
            Мой профиль на
            <a href="https://github.com" target="_blank">GitHub</a>.
        </p>

        <img src="avatar.jpg" alt="Фото Ивана Петрова">

        <p class="visits">
            Вы посетили эту страницу <span id="visit-count">0</span> раз(а).
        </p>
    </div>

    <script src="script.js"></script>
</body>

Добавим в style.css пару классов:

.btn {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 18px;
    background-color: #4a6cf7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #3554d1;
}

.hidden {
    display: none;
}

.visits {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e8e8f0;
    font-size: 14px;
    color: #999999;
    text-align: center;
}

И теперь главное — script.js:

// ===== Фича 1: Показать/скрыть хобби =====
const toggleBtn = document.querySelector("#toggle-btn");
const hobbies = document.querySelector("#hobbies");

toggleBtn.addEventListener("click", function () {
    hobbies.classList.toggle("hidden");

    if (hobbies.classList.contains("hidden")) {
        toggleBtn.textContent = "Показать хобби";
    } else {
        toggleBtn.textContent = "Скрыть хобби";
    }
});

// ===== Фича 2: Счетчик посещений =====
const visitCount = document.querySelector("#visit-count");

let visits = localStorage.getItem("visits");

if (visits === null) {
    visits = 0;
} else {
    visits = Number(visits);
}

visits = visits + 1;
localStorage.setItem("visits", visits);
visitCount.textContent = visits;

// ===== Фича 3: Плавная прокрутка к разделам =====
document.querySelectorAll("h2").forEach(function (heading) {
    heading.addEventListener("click", function () {
        heading.scrollIntoView({ behavior: "smooth" });
    });
});

Что произойдет:

Кнопка «Скрыть хобби» прячет список и меняет текст на «Показать хобби». Повторный клик возвращает всё обратно.
При каждом обновлении страницы счетчик посещений увеличивается на 1 — и запоминается между перезагрузками.
Клик по любому заголовку <h2> плавно прокручивает страницу к этому заголовку.

Разбираем самые интересные места

`localStorage` — память браузера

localStorage.setItem("visits", 5);     // сохранить
let visits = localStorage.getItem("visits"); // прочитать ("5")

localStorage — хранилище в браузере, которое переживает перезагрузку страницы и даже закрытие браузера. Данные хранятся как строки, поэтому Number(visits) — обязательное преобразование, иначе вы получите "5" + 1 = "51" вместо 6.

Проверить сохраненное можно в DevTools → вкладка Application → Local Storage.

`forEach` — цикл по списку

document.querySelectorAll("h2").forEach(function (heading) {
    // ...
});

querySelectorAll возвращает список всех заголовков. forEach проходит по нему и для каждого выполняет функцию. Это идиома, которую вы будете использовать постоянно.

`scrollIntoView` — плавная прокрутка

heading.scrollIntoView({ behavior: "smooth" });

Объект в аргументе { behavior: "smooth" } — это настройка: "smooth" включает плавную анимацию вместо мгновенного прыжка. Браузер сам делает всю работу.

`classList.contains` — проверка

if (hobbies.classList.contains("hidden")) { ... }

Возвращает true, если класс есть, и false, если нет. Мы спрашиваем у элемента: «Ты сейчас скрыт?» — и в зависимости от ответа меняем текст кнопки.

Частые ошибки новичков

Скрипт в <head>. Элементы еще не загружены, querySelector возвращает null, и попытка addEventListener на null роняет страницу. Решение: скрипт перед </body> или атрибут defer.
Забыли # или . в селекторе. querySelector("toggle-btn") ищет тег <toggle-btn> — и ничего не находит. Нужно #toggle-btn для id.
== вместо ===. 0 == "" вернет true, и вы получите неожиданный баг.
localStorage возвращает строку. "5" + 1 дает "51". Всегда используйте Number() или parseInt().
Меняете стили напрямую вместо классов. element.style.display = "none" работает, но переключать видимость через classList.toggle("hidden") чище и поддается стилизации.
Перезаписываете innerHTML без нужды. innerHTML парсит HTML заново — это медленно и открывает дыру для XSS-атак. Для простого текста есть textContent.

Итог: три языка — один сайт

Мы прошли полный путь от пустого файла до интерактивной страницы:

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

Три файла — index.html, style.css, script.js — и у вас в руках рабочий сайт-визитка. Не шаблон с конструктора, а собранный вами с нуля. Понимание каждого тега, каждого свойства и каждой строки скрипта.

Что дальше

Это была последняя базовая статья рубрики «Основы веб-разработки» — вы освоили фундамент. Дальше блог пойдет вглубь:

«Выбор технологии» — когда хватит статического HTML, а когда нужен WordPress или React. Сравнение без хайпа.
«Дизайн и UX» — как из нашего «костюма» сделать действительно красивый сайт: типографика, сетка, воздух.
«SEO и продвижение» — чтобы ваш сайт нашли в Google, а не только вы и мама.
«Кейсы и разборы» — пошагово соберем лендинг и интернет-магазин на реальном примере.

Подписывайтесь, чтобы не пропустить: «HTML, WordPress или React: что выбрать новичку в 2026-2027» — разберем на пальцах без маркетингового шума.

Не работает какая-то из фич? Откройте консоль (F12), скопируйте ошибку в комментарии — разберем.

Теги

#javascript #localstorage #верстка #гайд #новичкам #основы #туториал

JavaScript с нуля: как оживить страницу

Что такое JavaScript и зачем он нужен

Как подключить JavaScript

Синтаксис: переменные, типы, вывод

Переменные

Типы данных

Вывод в консоль

Ищем элементы на странице

Реагируем на события

Меняем страницу: классы, текст, стили

Переключение классов — главный прием

Изменение текста

Изменение стилей напрямую

Условия и проверки

Собираем всё вместе: три фичи для страницы «О себе»

Разбираем самые интересные места

`localStorage` — память браузера

`forEach` — цикл по списку

`scrollIntoView` — плавная прокрутка

`classList.contains` — проверка

Частые ошибки новичков

Итог: три языка — один сайт

Что дальше

Комментарии 0

Рекомендуемые статьи

JavaScript с нуля: как оживить страницу

Что такое JavaScript и зачем он нужен

Как подключить JavaScript

Синтаксис: переменные, типы, вывод

Переменные

Типы данных

Вывод в консоль

Ищем элементы на странице

Реагируем на события

Меняем страницу: классы, текст, стили

Переключение классов — главный прием

Изменение текста

Изменение стилей напрямую

Условия и проверки

Собираем всё вместе: три фичи для страницы «О себе»

Разбираем самые интересные места

localStorage — память браузера

forEach — цикл по списку

scrollIntoView — плавная прокрутка

classList.contains — проверка

Частые ошибки новичков

Итог: три языка — один сайт

Что дальше

Комментарии 0

Рекомендуемые статьи

Предложить статью

Мы используем cookie

Настройки cookie

`localStorage` — память браузера

`forEach` — цикл по списку

`scrollIntoView` — плавная прокрутка

`classList.contains` — проверка