Получить профессию в Skypro
Почему и когда тег <script> видимый при display:block в CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Если вам нужно исполнить JavaScript на вашем сайте, используйте <script> с внешними ссылками:
<script src="your-script.js"></script>Стоит размещать скрипты в отдельных файлах: это позволяет улучшить производительность за счёт кэширования и поддерживать порядок в HTML. Отныне, следует избегать встраивания скриптов в код, чтобы не создать уязвимости для безопасности и не захламлять код. Однако в ряде ситуаций теги <script> могут быть использованы видимо, для демонстрации кода, например, или вложения данных, которые не относятся к структуре страницы.
Ситуации, где видимость будет полезна
Есть несколько обстоятельств, при которых обращение к видимым тегам <script> может оказаться крайне полезным. Так, это может пригодиться в процессе обучения, для хранения данных, а также во время отладки или шаблонизации.
Примеры кода в обучающих материалах
В учебных материалах или документации использование видимых <script> для демонстрации кода будет представлять собой полезное решение:
<script type="text/plain" style="display: block;">
// "Привет, мир" на JavaScript
console.log("Привет, Stackoverflow!"); // Приветствие для пользователей SO
</script>Такие блоки должны быть видимы, и для их отображения не потребуется экранирование символов < и >.
Данные в HTML
В случае размещения больших объёмов данных прямо в HTML, оказывается уместным использование тега <script> :
<script type="application/json" id="myData">
// Здесь могут быть ваши данные
{
"joke": "Почему программисты не любят природу? Слишком много багов."
}
</script>Этот подход считается удобным для хранения необработанных данных, особенно если данные представлены в формате JSON.
Отладка
Тег <script> может окажет помощь в отладке, путем показа адреса файла скрипта перед его исполнением.
Шаблонизация
Тэги <script> отлично подходят для хранения HTML-шаблонов, которые затем могут быть использованы в JavaScript:
<script type="text/template" id="profile-template">
<div class="profile">
<img src="" alt="Фотография профиля">
<h3></h3>
<!-- Дополнительная информация -->
</div>
</script>С помощью свойства innerHTML, вы сможете получить строковое представление HTML для последующего использования.
Визуализация
Тег <script> можно сравнить с инструментом строителя:
🏗️ Построение веб-страницы
🧰 <script> (Скрыт)
– Поддерживает порядок на стройплощадке
👷♂️ <script> (Видимый)
– Инструменты всегда под рукой у разработчиков
🧰 <script> (Открыт для посетителей)
– Внимание! Раскиданные инструменты – прямой путь к неприятностямОбычно, тег <script> располагают в конце <body>, это способствует лучшей загрузке страницы и обеспечивает повышенную безопасность.
Улучшение пользовательского опыта
Видимый <script> может играть свою роль в создании интерактивных обучающих материалов. Благодаря индicator, указывающему источник скрипта, процесс отладки становится более понятным для разработчиков.
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 — Руководство по стратегиям оптимизации загрузки скриптов.