У нас уже есть скелет (HTML) и одежда (CSS). Страница выглядит отлично — но пока она неподвижна. Это как красивая фотография: смотреть приятно, но потрогать нельзя. Чтобы страница ожила и начала реагировать на тебя, нужен третий слой — JavaScript.
JavaScript — это движение и жизнь
Соберём всё сравнение целиком:
- HTML — скелет. Структура страницы.
- CSS — одежда. Внешний вид.
- JavaScript — движение и жизнь. Поведение.
JavaScript отвечает за то, что происходит, когда ты что-то делаешь. Нажал на кнопку — что-то поменялось. Ввёл текст в поле — появилась подсказка. Прокрутил вниз — подгрузились новые записи. Всё это динамика, и за неё отвечает JavaScript.
Что умеет JavaScript
Вот что становится возможным благодаря этому слою:
- реакция на нажатия — кнопки, ссылки, переключатели делают что-то в ответ на клик;
- изменения без перезагрузки — часть страницы обновляется, а сама страница не моргает и не загружается заново;
- динамика — счётчики, всплывающие окна, галереи, формы, которые проверяют, что ты ввёл.
Мини-проверка
Страница собрана из HTML и CSS, но без JavaScript. На что она похожа?
Как выглядит JavaScript
Простой пример: по клику на кнопку меняем текст заголовка.
<h1 id="title">Привет</h1>
<button onclick="title.textContent = 'Пока!'">Нажми меня</button>
Пока ты не нажал кнопку, в заголовке написано «Привет». А как только нажмёшь — JavaScript заменит текст на «Пока!». Причём страница не перезагрузится: изменится только нужный кусочек. Именно это ощущение «страница живая» и даёт JavaScript.
Совет
Не переживай, если код пока выглядит непривычно. Сейчас твоя задача — просто понять идею: JavaScript отвечает за поведение. Подробно мы разберём его на уровне 10, шаг за шагом.
Зачем это знать
Теперь ты знаешь все три слоя веба. HTML говорит, что на странице. CSS говорит, как это выглядит. JavaScript говорит, как это себя ведёт. Любой сайт — от простой визитки до огромного сервиса — собран из этих трёх слоёв. А значит, ты уже понимаешь, как устроен веб изнутри.