Что такое JavaScript и что он делает на сайте
Основы3 минРедакция Innovialabs
Коротко
JavaScript — язык программирования, который делает страницу живой: реагирует на действия пользователя, проверяет формы и подгружает данные без перезагрузки, тогда как HTML задаёт содержимое, а CSS — внешний вид.
Коротко: что такое JavaScript
JavaScript (JS) — это язык программирования, который браузер выполняет прямо на странице. Если сайт — это дом, то HTML — стены и комнаты, CSS — отделка и мебель, а JavaScript — электричество: свет, лифт, дверной звонок.
Без JS страница показывает текст и картинки и переходит по ссылкам. С JS она начинает реагировать: открывать меню, считать стоимость в калькуляторе, отправлять заявку без перезагрузки, показывать новые товары при прокрутке.
Что JavaScript делает на странице
- Интерактивность. Выпадающие меню, вкладки, модальные окна, слайдеры, кнопка «показать ещё».
- Формы. Проверка полей до отправки («введите корректный телефон»), маски ввода, подсказки, отправка данных на сервер в фоне.
- Загрузка данных. JS запрашивает данные у сервера через API и обновляет часть страницы: корзина, фильтры каталога, чат, уведомления.
- Анимации и эффекты. Появление блоков при прокрутке, сложная анимация, графики. Простые переходы часто можно сделать на CSS, но всё, что зависит от логики, — задача JS.
- Аналитика и интеграции. Счётчики посещаемости, виджеты оплаты, карты, онлайн-чаты — почти всё это подключается скриптами.
HTML, CSS и JavaScript: кто за что отвечает
| Технология | Роль | Пример |
|---|---|---|
| HTML | Структура и содержимое | Заголовок, текст, кнопка, форма |
| CSS | Внешний вид | Цвета, шрифты, отступы, адаптивность |
| JavaScript | Поведение и логика | Что происходит по клику на кнопку |
Хорошее правило: содержимое — в HTML, оформление — в CSS, поведение — в JS. Когда текст страницы существует только внутри JavaScript, его хуже видят поисковики и пользователи с медленным интернетом.
Пример простейшего поведения:
<button id="btn">Показать телефон</button>
<p id="phone" hidden>+998 00 000 00 00</p>
<script>
document.getElementById('btn').addEventListener('click', () => {
document.getElementById('phone').hidden = false;
});
</script>
Где выполняется JavaScript
В браузере. Это классический случай: код скачивается вместе со страницей и работает на устройстве пользователя. Поэтому тяжёлые скрипты замедляют сайт именно на слабых телефонах.
На сервере (Node.js). Тот же язык можно запускать на сервере: принимать заявки, работать с базой данных, отдавать API. Фреймворки вроде Next.js используют JS и там, и там: сервер заранее собирает HTML, а браузер «оживляет» его.
Важно: код в браузере виден любому пользователю. Пароли, секретные ключи и проверку прав нельзя держать только на стороне клиента — это задача сервера.
Что будет, если JavaScript отключён или упал
Это случается чаще, чем кажется: скрипт не загрузился из-за плохой связи, его заблокировало расширение, в коде ошибка после обновления.
Что происходит дальше, зависит от того, как сделан сайт:
- Сайт с серверной отрисовкой показывает текст, картинки и ссылки. Перестают работать только интерактивные части — меню, калькулятор, фильтры.
- Сайт, полностью собранный в браузере, может показать пустой белый экран, потому что вся разметка создаётся скриптом.
- Формы, отправляемые только через JS, перестают работать, и заявка теряется молча.
Подход прогрессивного улучшения снижает риск: базовая версия (контент, ссылки, обычная отправка формы) работает без JS, а скрипты добавляют удобство поверх.
Частые ошибки
- Подключать десятки сторонних скриптов «на всякий случай» — каждый замедляет загрузку.
- Делать ссылки и кнопки на
divс обработчиком клика — их не видят клавиатура и экранные дикторы. - Не следить за ошибками: без мониторинга вы узнаете о сломанной форме от клиентов, а не из логов.
- Проверять данные только в браузере и доверять им на сервере.