Условия if-else и elseif в HTML: примеры и лучшие практики

Быстрый ответ

Для реализации условного отображения контента в HTML вы можете использовать JavaScript и тернарный оператор:

<script>
  document.getElementById('conditional-content').innerHTML =
    условие ? '<div>Текст, если условие выполняется</div>' : '<div>Текст, если условие не выполняется</div>';
</script>

Следует размещать скрипт там, где требуется проверка if-else. В соответствии с этим, элемент с идентификатором conditional-content будет наполнен необходимым div. Это желательнее использования document.write.

PHP и HTML: дружественное взаимодействие

Работаем с PHP и HTML

Прямое встраивание условных конструкций PHP if-else в HTML делает код более читаемым:

<?php if ($userIsOnline): ?>
  <div>Добро пожаловать!</div>
<?php else: ?>
  <div>Пожалуйста, войдите в систему.</div>
<?php endif; ?>

Используйте полную запись PHP-тегов, поскольку короткие теги <? могут не поддерживаться в некоторых серверных настройках.

Подробнее об этом расскажет наш спикер на видео

Сокращаем PHP код

Для упрощения кодирования условных конструкций PHP можно применить короткий синтаксис:

<p>Статус: <?= $isLoggedIn ? 'В сети' : 'Не в сети' ?></p>

Однако статический PHP код не дает возможность обновлять страницу динамически без ее перезагрузки.

Используем JavaScript для динамичности

Используйте JavaScript и фреймворки для создания интерактивных пользовательских интерфейсов, которые позволяют обновлять страницу без перезагрузки:

<script>
  if (userIsOnline) {
    // Код для интерактивного контента
  }
</script>

Визуализация

Вообразите обработку if-else в HTML как аналогию со сценой:

HTML – это ваш театр (🎭), а условия – это выступление в качестве актёра (🎦).

Если **условие** выполняется (🌟):
  на сцену выходит основной актёр (👨‍🎤).

Если **условие** не выполняется (🌧️):
  на сцену выходит дублёр (👩‍🎭).

Следующий код иллюстрирует эту идею:

<!-- Основной актёр или дублёр? -->
<div>
  <!-- Вступаем на сцену 🎦 -->
  <?php if ($mainActReady): ?>
    <!-- На сцене основной актёр (👨‍🎤) -->
    <p>👨‍🎤 "Жизнь — это сцена, а мы в ней актёры".</p>
  <?php else: ?>
    <!-- На сцене дублёр (👩‍🎭) -->
    <p>👩‍🎭 "Сыграй роль так, чтобы все хлопали стоя, даже если роль незначительна".</p>
  <?php endif; ?>
</div>

В HTML, как и в театре, сценарий определяет главного героя спектакля!

Серверная и клиентская части: два аспекта веб-разработки

Что нужно знать о серверной стороне

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

Динамичность клиентской стороны

В свою очередь, JavaScript превращает вашу страницу в энергичное шоу уличных танцев, позволяя мгновенно реагировать на действия пользователя, что невозможно для консервативного PHP:

<script>
  if (userIsOnline) {
    // JavaScript готов к действию прямо в браузере пользователя!
  }
</script>

Сохраняем баланс производительности

Выбирая между PHP и JavaScript, стремитесь к балансу производительности. Избыточное использование серверной стороны может перегрузить сервер, тогда как чрезмерное применение JavaScript может замедлить браузер пользователя.

Соблюдаем кодекс хорошей практики

Следуйте принципам качественного программирования: добавляйте комментарии к коду, делайте его аккуратным и понятным, с учетом кооперации с коллегами.

Применение условного кодирования

Статичность и интерактивность

PHP подходит для генерации статического контента, который загружается при открытии страницы:

<img src="<?= $userIsLoggedIn ? '/images/happy-face.jpg' : '/images/sad-face.jpg' ?>">
<!-- Мы выбираем выражение лица, и оно не изменится. -->

Но PHP не может реагировать на дальнейшие действия пользователя без полного обновления страницы.

Применяем JavaScript для сложных условий

JavaScript хорошо подходит для более сложных условий и интерактивных элементов:

<script>
  // Здесь ваш код для реализации сложной логики
</script>

Поддерживаем чистоту и понятность кода

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

Полезные материалы

1. Условные операторы в вашем коде — Учебные материалы по веб-разработке | MDN
2. Как переключать видимость элемента
3. Шаблонные литералы (строки) — JavaScript | MDN
4. Условный рендеринг | Vue.js
5. Условный рендеринг – React
6. PHP: elseif/else if — Руководство
7. Выражения | Handlebars