HTML-тег <script>

HTML-тег <script> используется для встраивания исполняемого кода JavaScript в HTML-документ или ссылки на него. Он позволяет добавлять интерактивность, управлять поведением страницы и динамически обновлять контент. Скрипты можно включать как встроенные, так и ссылаться на них извне с помощью атрибута src .

Тег <script> — это универсальный элемент, необходимый для добавления динамических функций на веб-страницы, таких как проверка форм, анимация и обработка событий.

Базовый синтаксис HTML-тега <script>

Базовая структура тега <script> : 

<script>
// JavaScript code goes here
</script>

Чтобы сослаться на внешний файл скрипта: 

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

Атрибут src указывает URL внешнего файла JavaScript.

Пример встроенного JavaScript

Вот пример встраивания JavaScript непосредственно в тег <script> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Hello World Example</h2>
        <p id="demo"></p>

        <script>
            document.getElementById("demo").textContent = "Hello, World!";
        </script>
    </body>
</html>
Пример встроенного JavaScript с использованием тега script

Объяснение: Скрипт динамически обновляет содержимое абзаца с идентификатором «demo» для отображения «Hello, World!»

Пример внешнего JavaScript

Вот пример ссылки на внешний файл JavaScript: 

<!DOCTYPE html>
<html>
    <body>
        <h2>External Script Example</h2>
        <p id="demo"></p>

        <script src="script.js"></script>
    </body>
</html>

скрипт.js 

document.getElementById("demo").textContent = "Hello from an external file!";
Пример внешнего JavaScript с использованием тега script

Пояснение: Внешний файл «script.js» обновляет содержимое абзаца с идентификатором «demo» на «Привет из внешнего файла!»

Атрибуты HTML-тега <script>

  • src: Указывает URL внешнего файла JavaScript.
  • Тип: определяет тип MIME скрипта. Значение по умолчанию — text/javascript .
  • async: Указывает, что скрипт должен выполняться асинхронно(только для внешних скриптов).
  • defer: указывает, что скрипт должен быть выполнен после анализа документа(только для внешних скриптов).
  • crossorigin: указывает, как следует обрабатывать скрипт для запросов между источниками(например, anonymous или use-credentials ).

Разница между асинхронностью и отсрочкой

  • асинхронно: скрипт загружается и выполняется как можно скорее, не блокируя парсинг HTML.
  • defer: скрипт загружается во время анализа HTML, но выполняется только после полного анализа документа.

Оба атрибута применимы только к внешним скриптам.

Стилизация и размещение тега <script>

Скрипты можно размещать в разных частях HTML-документа:

  • В <head>: используется для скриптов, которые должны загружаться до полной отрисовки страницы.
  • Внизу <body>: предпочтительно для скриптов, которые повышают интерактивность после загрузки страницы. 
<script>
// Example of inline script in the head
</script>

<script src="example.js" defer></script>

Лучшая практика: используйте defer для внешних скриптов и размещайте встроенные скрипты в нижней части <body> для повышения производительности загрузки страницы.

Практическое применение тега <script>

  • Проверка форм: динамическая проверка введенных пользователем данных без обновления страницы.
  • Интерактивный контент: добавьте интерактивность, например анимацию, раскрывающиеся меню или ползунки.
  • Динамический контент: извлечение и отображение данных с помощью API(например, через AJAX или Fetch API).
  • Обработка событий: реагирование на действия пользователя, такие как щелчки, наведения курсора или нажатия клавиш.
  • Аналитика: отслеживайте поведение пользователей с помощью таких инструментов, как Google Analytics.

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