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

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

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

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

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

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

В этом списке появилось новое понятие «условие». Что же это такое? Условие — любое выражение, которое можно свести либо к истинности, либо ко лжи. Например, выражение 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 Добро пожаловать

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

Использовать оператор логического отрицания !. В этом случае вычисляется результат выражения, а потом его значение инвертируется. Если было true, то станет false и наоборот. Конструкция примет следующий вид: if !isAdmin. Так как переменная isAdmin равна false, то при отрицании значение преобразуется в true.
Использование конструкции 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>

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

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

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

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

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов