Почему и когда тег <script> видимый при display:block в CSS

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

Если вам нужно исполнить JavaScript на вашем сайте, используйте <script> с внешними ссылками:

HTML

Скопировать код

<script src="your-script.js"></script>

Стоит размещать скрипты в отдельных файлах: это позволяет улучшить производительность за счёт кэширования и поддерживать порядок в HTML. Отныне, следует избегать встраивания скриптов в код, чтобы не создать уязвимости для безопасности и не захламлять код. Однако в ряде ситуаций теги <script> могут быть использованы видимо, для демонстрации кода, например, или вложения данных, которые не относятся к структуре страницы.

Кинга Идем в IT: пошаговый план для смены профессии

Ситуации, где видимость будет полезна

Есть несколько обстоятельств, при которых обращение к видимым тегам <script> может оказаться крайне полезным. Так, это может пригодиться в процессе обучения, для хранения данных, а также во время отладки или шаблонизации.

Примеры кода в обучающих материалах

В учебных материалах или документации использование видимых <script> для демонстрации кода будет представлять собой полезное решение:

HTML

Скопировать код

<script type="text/plain" style="display: block;">
  // "Привет, мир" на JavaScript
  console.log("Привет, Stackoverflow!"); // Приветствие для пользователей SO
</script>

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

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

Данные в HTML

В случае размещения больших объёмов данных прямо в HTML, оказывается уместным использование тега <script> :

HTML

Скопировать код

<script type="application/json" id="myData">
  // Здесь могут быть ваши данные
  {
    "joke": "Почему программисты не любят природу? Слишком много багов."
  }
</script>

Этот подход считается удобным для хранения необработанных данных, особенно если данные представлены в формате JSON.

Отладка

Тег <script> может окажет помощь в отладке, путем показа адреса файла скрипта перед его исполнением.

Шаблонизация

Тэги <script> отлично подходят для хранения HTML-шаблонов, которые затем могут быть использованы в JavaScript:

HTML

Скопировать код

<script type="text/template" id="profile-template">
  <div class="profile">
    <img src="" alt="Фотография профиля">
    <h3></h3>
    <!-- Дополнительная информация -->
  </div>
</script>

С помощью свойства innerHTML, вы сможете получить строковое представление HTML для последующего использования.

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

Тег <script> можно сравнить с инструментом строителя:

Markdown

Скопировать код

🏗️ Построение веб-страницы

🧰 <script> (Скрыт)
    – Поддерживает порядок на стройплощадке

👷‍♂️ <script> (Видимый)
    – Инструменты всегда под рукой у разработчиков

🧰 <script> (Открыт для посетителей)
    – Внимание! Раскиданные инструменты – прямой путь к неприятностям

Обычно, тег <script> располагают в конце <body>, это способствует лучшей загрузке страницы и обеспечивает повышенную безопасность.

Улучшение пользовательского опыта

Видимый <script> может играть свою роль в создании интерактивных обучающих материалов. Благодаря индicator, указывающему источник скрипта, процесс отладки становится более понятным для разработчиков.

CSS

Скопировать код

script[src]:before {
  content: attr(src);
  display: block;
}

Повышенная прозрачность кода улучшает комфорт использования сайта.

Вопросы безопасности

Безопасность всегда приоритетна: важно гарантировать, что не произойдёт утечки важных данных, и обезопаситься от внешних угроз.

А что насчёт стилизации?

Вполне допустимо настроить стили для отображения <script>, главное — не позволить этому испортить внешний вид страницы.

Завершение о выполнении скрипта

Что произойдет, если убрать тег <script> после его исполнения? Ничего особенного, исполненный скрипт будет продолжать работать даже без своего тега. Заметим, что видимость <script> никак не влияет на его функциональность.

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

<script>: Элемент Script – HTML: Язык разметки гипертекста | MDN — Полное руководство по элементу <script>.
HTML script tag — Интерактивный учебник по тегу <script>.
Скрипты: async, defer — Пояснения к атрибутам скриптов с примерами.
Оптимизация производительности за счет использования Resource Hints — Smashing Magazine — Изучение стратегий загрузки JavaScript.
Детальное рассмотрение процесса загрузки скриптов | Статьи | web.dev — Руководство по стратегиям оптимизации загрузки скриптов.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

В каких ситуациях использование видимого тега <script> может быть полезным?

1 / 5

Свежие материалы

Как настроить HTTPS на вашем сайте

6 сентября 2024

Видео уроки по веб-разработке

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024