10 полезных JavaScript-сниппетов для любого сайта

Когда начинаешь изучать JavaScript, кажется, что нужно знать «всё и сразу».
На самом деле, 80% задач на сайте решаются одними и теми же простыми приёмами.

В этой статье я собрал 10 JavaScript-сниппетов, которые:

• используются почти в каждом проекте
• легко запоминаются
• помогают понять логику JS

1️⃣ Как получить элемент со страницы

Что происходит:

• мы ищем элемент по CSS-селектору
• сохраняем его в переменную
• дальше можем с ним работать

Без этого не работает ни один интерактив.

2️⃣ Как отследить клик

Этот код говорит браузеру:

«Когда пользователь нажмёт на кнопку — выполни действие»

Используется для:

• кнопок
• меню
• форм
• модальных окон

3️⃣ Переключение класса (очень важно)

Один из самых полезных приёмов:

• добавляет класс, если его нет
• убирает, если он есть

Чаще всего используется для:

• открытия меню
• показа модальных окон
• переключения тем

4️⃣ Проверка ширины экрана

Полезно, когда нужно:

• изменить логику для телефона
• отключить тяжёлые эффекты

5️⃣ Плавная прокрутка страницы

Пример:

• кнопка «Наверх»
• переход к секции

6️⃣ Задержка выполнения кода

Используется для:

• анимаций
• уведомлений
• задержек действий

7️⃣ Проверка input на пустоту

Основа любой формы.

8️⃣ Отключение кнопки

Например:

• после отправки формы
• во время загрузки

9️⃣ Получение значения input

Используется в:

• формах
• поиске
• фильтрации

🔟 Проверка наличия класса

Позволяет понять текущее состояние элемента.

Итог

Если ты освоишь эти 10 приёмов — большая часть JS перестанет быть страшной.

👉 В следующей статье соберём интерактивное меню с нуля.