Тег <script>

Тег <script> (укр. – “скрипт”) в HTML використовується для вставлення або підключення скриптів JavaScript до веб-сторінки. Цей тег дозволяє додавати динамічний функціонал, обробку подій, взаємодію з користувачем та інші програмні можливості.

Тег <script> може містити внутрішній код JavaScript або посилання на зовнішній скрипт через атрибут src. Його можна розміщувати як у <head>, так і в <body> веб-сторінки.

Атрибути

Специфічні атрибути

  • src — шлях до зовнішнього файлу JavaScript. Наприклад:
<script src="script.js"></script>
  • async — вказує, що скрипт завантажується асинхронно, не блокуючи обробку HTML-документа. Наприклад:
<script src="script.js" async></script>
  • defer — відтерміновує виконання скрипту до моменту повного завантаження HTML-документа. Наприклад:
<script src="script.js" defer></script>
  • type — вказує тип скрипту. За замовчуванням це text/javascript. Наприклад:
<script type="text/javascript">
    console.log("Hello World!");
</script>
  • crossorigin — визначає, чи дозволений доступ до ресурсу з інших доменів. Використовується при роботі з CORS (Cross-Origin Resource Sharing). Наприклад:
<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Глобальні атрибути

Тег <script> підтримує всі глобальні атрибути HTML, включаючи:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<script id="main-script" src="app.js"></script>
  • class — дозволяє додати CSS-класи для взаємодії зі скриптами. Наприклад:
<script class="script-class">console.log("Script loaded");</script>
  • style — інлайн-стилі для елемента. Наприклад:
<script style="display: none;">console.log("Hidden script");</script>

Приклади використання

1. Внутрішній скрипт

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад з внутрішнім скриптом</title>
</head>
<body>
    <h1>Вітання!</h1>
    <script>
        document.write("Це текст, доданий за допомогою JavaScript.");
    </script>
</body>
</html>

Пояснення: Код JavaScript написаний всередині тегу <script> і виконується відразу після його завантаження.

2. Зовнішній скрипт

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад із зовнішнім скриптом</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Вітання!</h1>
</body>
</html>

Пояснення: Код JavaScript підключається із зовнішнього файлу script.js.

Додаткові моменти

  • Порядок виконання:
    • Без атрибутів — скрипт виконується відразу, коли він завантажується.
    • async — скрипт завантажується асинхронно та виконується відразу після завантаження.
    • defer — скрипт виконується після завершення обробки HTML.
  • Рекомендується підключати скрипти перед закриваючим тегом </body>, щоб не блокувати завантаження сторінки.
  • Використовуйте defer для скриптів, які не залежать від інших скриптів.
  • За замовчуванням для <script> використовується тип text/javascript. У сучасних браузерах цей атрибут можна не вказувати.
  • Атрибут crossorigin дозволяє завантажувати скрипти з інших доменів за допомогою політики CORS.
  • Уникайте використання eval() та динамічних скриптів із ненадійних джерел.
  • Використовуйте Content Security Policy (CSP) для підвищення безпеки.