Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Условные конструкции HTML: Препроцессор Pug

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

Для создания таких ветвлений в программировании используются условные конструкции или условные выражения. Что можно принять за ветвление? Представьте, что пользователь заходит на страницу профиля. В зависимости от того, залогинен он или нет выполнится следующее действие:

  • Если пользователь залогинен: вывести страницу профиля.
  • Если пользователь не залогинен: вывести страницу регистрации.

Как оформить это в виде кода? Если вы уже знакомы с программированием, то знаете о чём пойдёт речь. Необходимо определить:

  1. Условную конструкцию.
  2. Условие, по которому происходит ветвление.
  3. Блоки кода для условий.

В этом списке появилось новое понятие «условие». Что же это такое? Условие — любое выражение, которое можно свести либо к истинности, либо ко лжи. Например, выражение 2 + 2 = 4 истинно, а 2 + 5 = 1 — нет. В зависимости от этого условия выполнится соответствующий блок кода.

- const isLogin = true;

.container
  .row
    .col
      if isLogin == true
        section.profile
          h1 Добро пожаловать!
      else
        section.registration
          h1 Зарегистрируйтесь!

Результат, если переменная isLogin равна true:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="profile">
        <h1>Добро пожаловать!</h1>
      </section>
    </div>
  </div>
</div>

Результат, если переменная isLogin равна false:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="registration">
        <h1>Зарегистрируйтесь!</h1>
      </section>
    </div>
  </div>
</div>

Так как конструкция if проверяет истинность true или ложность false выражения, то в прошлом примере можно убрать сравнение с true. Такой код будет работать точно так же:

if isLogin
  .profile
    h1 Добро пожаловать!
else
  .registration
    h1 Зарегистрируйтесь!

Разберём ещё один пример. Объект с пользователем содержит несколько полей: имя, фамилия, логин. Если имя и фамилия заданы, то вывести их, иначе вывести логин.

-
  const user = {
    name: 'Кодовёнок',
    surname: 'Хекслетович',
    login: 'hexlet-code',
  }

section.user-profile
  p.name
    if user.name && user.surname
      | #{user.name} #{user.surname}
    else
      | #{user.login}
<section class="user-profile">
  <p class="name">Кодовенок Хекслетович</p>
</section>

Важно: обратите внимание на объявление объекта. Символ - и сам объект находятся на разных строчках. Таким образом можно записывать многострочный JavaScript код. Это полезно при создании объектов, функций, циклов и так далее.


В прошлых примерах основной упор был на существование того или иного объекта. Условные конструкции могут проверять абсолютно любое выражение:

-
  const titles = {
    home: "Домашняя страница",
    product: "Наши продукты",
  }

- const url = 'home';

doctype
html(lang="ru")
  head
    if url == 'home'
      title= titles.home
    else if url == 'product'
      title= titles.product
    else
      title А вот такой страницы нет :(
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Домашняя страница</title>
  </head>
</html>

Во время разработки продукта может возникнуть ситуация, когда нужно проверить не истинность, а ложность высказывания. Это может быть проверка пользователя на администратора при заходе на страницу управления. В этом случае нужно проверить, является ли пользователь администратором или нет. Если пользователь не обладает нужными правами, то показать ему сообщение об ошибке. Решить эту задачу можно через отрицание в условии:

- const isAdmin = false;

if isAdmin == false
  h1 Недостаточно прав для просмотра страницы
else
  h1 Добро пожаловать

Такое сравнение может быть избыточным, так как конструкция условного выражения подразумевает проверку на истинность, а не ложность. Есть два пути сделать код чище:

  1. Использовать оператор логического отрицания !. В этом случае вычисляется результат выражения, а потом его значение инвертируется. Если было true, то станет false и наоборот. Конструкция примет следующий вид: if !isAdmin. Так как переменная isAdmin равна false, то при отрицании значение преобразуется в true.
  2. Использование конструкции unless. В отличие от if, unless проверяет ложность условия.
- const isAdmin = false;

unless isAdmin
  h1 Недостаточно прав для просмотра страницы
else
  h1 Добро пожаловать
<h1>Недостаточно прав для просмотра страницы</h1>

Дополнительное задание

Проект имеет структуру файлов:

├── include/
│   ├── head.pug
├── index.pug
├── product.pug

Внутри файлов index.pug и product.pug существует переменная title с уникальным описанием страницы. Файл head.pug содержит секцию <head> страниц. Используя подключения файлов и условную конструкцию подставьте уникальное описание в файл head.pug. Если значение переменной title пустое, то выдаётся заранее подготовленный текст.

Пример страницы:

<!doctype html>
<html>
  <head>
    <title>Главная страница сайта</title>
  </head>
</html>

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»