Три слоя

Шаг 4 · 20 минут

Всё вместе

Карточка целиком, три слоя сразу. И как найти те же три слоя на любом сайте.

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

  • взять готовый компонент и показать, какая его часть в каком слое;
  • открыть любой сайт в DevTools и найти там три слоя.

4.1

Карточка целиком

Весь код карточки в трёх вкладках. Над результатом — переключатели слоёв, как на первом экране. Теперь ты знаешь, что именно выключаешь.

ДЕМО 4A Карточка: три слоя

  1. HTML Поменяй число подписчиков.
  2. CSS Поменяй цвет кнопки.
  3. JS Поменяй текст, который появляется после подписки.

Три задачи, три файла. Так же ты будешь формулировать задачи Claude: что поменять и в каком слое.

Если ты поменяла число подписчиков и нажала «Подписаться», число всё равно стало 129. Это число записано в JS, и он не знает, что ты поправила HTML. Хороший пример бага на стыке слоёв.

4.2

Карта слоёв

Та же карточка, разобранная по элементам. Наведи на сноску, чтобы увидеть элемент.

Фото Марии

Мария

Дизайнер. Делаю интерфейсы, которые не надо объяснять.

128 подписчиков

Подписаться

  1. Карточка

    • HTMLкоробка, в которой лежит всё остальное
    • CSSфон, скругление, тень, auto layout по вертикали

  2. Фото

    • HTMLкартинка и откуда её взять
    • CSSразмер, круг

  3. Имя

    • HTMLтекст «Мария»
    • CSSразмер, цвет

  4. Описание

    • HTMLтекст
    • CSSсерый цвет, размер

  5. Подписчики

    • HTMLтекст и число с именем count
    • CSSразмер
    • JSпосле подписки меняет число

  6. Кнопка

    • HTMLесть, имя follow
    • CSSвид, hover, вид после подписки
    • JSклик меняет текст и имя

У любого элемента на экране может быть все три слоя: у кнопки они есть все, у фото — два. Вопрос «какой слой?» — это вопрос, что именно ты хочешь изменить.

4.3

Класс — общий язык

Одно и то же имя проходит через все три файла.

HTML 
<button class="follow">

даёт имя

CSS 
.follow { … }
.follow.following { … }

описывает, как имя выглядит

JS 
querySelector(".follow")
classList.add("following")

находит по имени и переключает имена

HTML даёт имя. CSS описывает, как имя выглядит. JS переключает имена. Это и есть связь трёх языков.

4.4

DevTools на настоящем сайте

В каждом браузере есть — панель, где видны три слоя любой страницы. Лучше всего в Chrome.

  1. 1Elements — HTML страницы. Дерево, как панель слоёв.
  2. 2Styles — CSS выбранного элемента. Design-панель.
  3. 3Console — здесь живёт JS.
  1. Открой любой знакомый сайт. Нажми Cmd + Option + I на Mac или F12 на Windows. Или правый клик → «Просмотреть код» (Inspect).
  2. Вкладка Elements — HTML страницы. Дерево, как панель слоёв. Наведи на строки: элементы на странице подсвечиваются.
  3. Справа Styles — CSS выбранного элемента. Это Design-панель. Кликни на цвет и поменяй его.
  4. Дважды кликни на текст кнопки или заголовка в Elements и перепиши.
  5. Вкладка Console — здесь живёт JS. Скопируй строку, вставь в Console и нажми Enter. Заголовок изменился.
    document.querySelector("h1").textContent = "Привет"

    Chrome может не дать вставить код и попросить сначала напечатать allow pasting. Это защита от мошенников, которые просят вставить чужой код. Напечатай, нажми Enter и вставь строку ещё раз.

  6. Обнови страницу. Всё вернулось: ты меняла свою копию в браузере, сервер ничего не узнал. Это из первого занятия.

4.5

Этот сайт тоже из трёх слоёв

Этот сайт написан теми же HTML, CSS и JS. Нажми Cmd + Option + I прямо здесь и посмотри на дерево слоёв. Имена классов понятные: demo, step-nav, summary. Комментарии в CSS и JS — на русском.

?

Проверь себя

  1. Что про кнопку «Подписаться» знает каждый из трёх слоёв?

    HTML — что кнопка есть, её текст и имя follow. CSS — как она выглядит, при наведении и после подписки. JS — что делать по клику: поменять текст и имя.

  2. Ты поменяла цвет в Styles на чужом сайте. Что увидят другие посетители?

    Ничего. Ты меняла копию страницы в своём браузере. После обновления она вернётся к тому, что отдаёт сервер.