Логотип Хекслета

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>

Рекомендуемые программы

Навигация
Теория
Тесты
Упражнение