Три слоя

JS Шаг 3 · 25 минут

JavaScript. Что происходит

Третий слой — поведение: что происходит, когда пользователь действует или приходят данные.

После этого шага ты сможешь

  • увидеть в любом JS схему «найти элемент → слушать событие → изменить»;
  • объяснить, как JS меняет HTML и CSS, не зная ни одного цвета;
  • показать, где в интерфейсе данные с сервера и кто их туда принёс.

3.1

Prototype → JavaScript

В Prototype ты связываешь триггер и действие: On click → Change to. делает то же, только действий больше и они умеют ходить на сервер.

ТриггерOn click ДействиеChange to «Вы подписаны»

Любой JS для интерфейса — это три шага:

  1. Найтиэлемент на странице — по имени. Вот зачем был класс.
  2. Слушать: клик, ввод, наведение.
  3. Изменитьтекст, имя класса, показать или скрыть.

ДЕМО 3A Клик

  1. Нажми на кнопку в результате. Потом поменяй текст "Вы подписаны", который появляется после клика, на свой и нажми ещё раз.

Это единственное место на сайте, где код разобран построчно. Вот перевод JS из демо:

JSПо-человечески
const button = document.querySelector(".follow");

Найди элемент с именем follow, назовём его button.Найти

button.addEventListener("click", () => {

Когда по нему кликнут, сделай вот что:Слушать

  button.textContent = "Вы подписаны";

Поменяй его текст.Изменить

});

Конец.

const, скобки, стрелка — грамматика. Её не надо понимать. Надо видеть три шага: найти, слушать, изменить.

3.2

JS меняет CSS, но не знает цветов

JavaScript не красит кнопку. Он добавляет или убирает имя класса. Как это имя выглядит — написано в CSS.

Поэтому, когда что-то «после клика выглядит не так», это может быть любой из двух слоёв: JS не переключил имя или CSS описал имя не так.

ДЕМО 3B Тёмная тема

  1. Нажми кнопку «Тёмная тема» в результате. Потом в правиле body.dark поменяй цвет фона #1a1a1a на любой другой, например #2a1f3d или darkslateblue, и нажми кнопку снова.

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

3.3

Данные приходят через JS

Список подписчиков не написан в HTML: открой вкладку HTML в демо, там пустой список. Его просит у сервера JS и сам создаёт элементы. Это та самая связка с первым занятием: , ответ, страница.

ДЕМО 3C С сервера

  1. Нажми «Показать подписчиков» и следи за кодом: строки подсвечиваются, когда срабатывают.
  2. Нажми ещё раз и посмотри, какая строка горит, пока JS ждёт сервер.

В настоящем коде вместо server.getFollowers() стоит запрос, который ты видела во вкладке Network. Пока он идёт, интерфейс показывает статус — это то самое состояние загрузки, которое ты рисуешь в макетах.

3.4

Оживляем карточку

Полная карточка: HTML из шага 1, CSS из шага 2 и шесть строк JS.

ДЕМО 3D Карточка: поведение

  1. Нажми «Подписаться». Потом поменяй текст "Вы подписаны" на свой и нажми снова.
  2. Найди в JS строку, где меняется имя класса, и правило в CSS, которое описывает это имя.
Показать ответ ко второму заданию

В JS: button.classList.add("following"). В CSS: .follow.following { … }. JS добавляет имя, CSS решает, как оно выглядит.

Это карточка с первого экрана. Три слоя, три файла, и ты знаешь, что в каком.

?

Проверь себя

  1. Что делает JS, когда «после клика кнопка становится серой»?

    Переключает имя класса. Серый цвет написан в CSS.

  2. Откуда на странице список подписчиков, если в HTML его нет?

    Его запросил у сервера JS и сам создал элементы.

  3. Кнопка меняет цвет при наведении. Нужен ли JS?

    Нет, это CSS: вариант Hover.