<script>

Вставляет код JavaScript на страницу или подключает внешние файлы скриптов.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Скрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег <script>.

Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.

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

Пример

Секция статьи "Пример"

В этом примере мы подключим скрипты из внешнего файла с расширением .js. Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.

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

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

HTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.

Скрипты пишут на разных языках, самый популярный из которых — JavaScript.

Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.

Как пишется

Секция статьи "Как пишется"

Тег <script> — парный, его всегда нужно закрывать с помощью </script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.

Если добавить скрипты в код, то выглядеть это будет так:

        
          
          <script>  window.alert("Добавили вот какой-то JavaScript-код")</script>
          <script>
  window.alert("Добавили вот какой-то JavaScript-код")
</script>

        
        
          
        
      

Атрибуты

Секция статьи "Атрибуты"
  • async — браузер запускает скрипт асинхронно, то есть не дожидаясь загрузки веб-страницы. Впрочем, и сама страница не будет ждать запуска скрипта и продолжит загружаться, как обычно. Если async не указать, то скрипты будут грузиться по очереди. Этот атрибут работает только когда скрипт задаётся внешним файлом.
  • defer — откладывает запуск скрипта, пока веб-страница не загрузится целиком.
  • src — указывает путь к файлу со скриптами. Это может быть полный URL-адрес файла или относительный адрес, например, src="/scripts/browser.js". Файл должен иметь расширение .js. Когда указываешь src, не пиши ничего внутри <script>...</script>.

Подсказки

Секция статьи "Подсказки"

💡 Обычно скрипты, которые должны выполняться первыми, помещают в заголовок страницы.

Ещё примеры

Секция статьи "Ещё примеры"

Попробуем с помощью скрипта сделать так, чтобы текст увеличивался и уменьшался через каждую пару секунд:

        
          
          <!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Подключение скриптов</title>    <link rel="stylesheet" href="style.css">  </head>  <body>    <h1>Подключение скриптов</h1>    <p id="blinking">      Скрипты можно подключить разными способами. Например, описать их прямо      внутри HTML-страницы. Но лучше всё же в отдельном файле.    </p>    <script>      const p = document.getElementById("blinking")      setInterval(function () {        if (p.style.fontSize !== "10px") {          p.style.fontSize = "10px"        } else {          p.style.fontSize = "20px"        }      }, 2000)    </script>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Подключение скриптов</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Подключение скриптов</h1>
    <p id="blinking">
      Скрипты можно подключить разными способами. Например, описать их прямо
      внутри HTML-страницы. Но лучше всё же в отдельном файле.
    </p>
    <script>
      const p = document.getElementById("blinking")
      setInterval(function () {
        if (p.style.fontSize !== "10px") {
          p.style.fontSize = "10px"
        } else {
          p.style.fontSize = "20px"
        }
      }, 2000)
    </script>
  </body>
</html>

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Почему нужно писать <script> в конце разметки, перед </body>?

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

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

Размещение <script> в других частях разметки без очевидной надобности считается плохой практикой.

🛠 Один скрипт — один <script>.

Нельзя одновременно написать код внутри тега <script> и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.

HTML

        
          
          <!-- ТАК ДЕЛАТЬ НЕЛЬЗЯ --><script src="./js/main.js">  console.log("Hello, world!"); // Этот код будет проигнорирован</script><!-- END ТАК ДЕЛАТЬ НЕЛЬЗЯ -->
          <!-- ТАК ДЕЛАТЬ НЕЛЬЗЯ -->
<script src="./js/main.js">
  console.log("Hello, world!"); // Этот код будет проигнорирован
</script>
<!-- END ТАК ДЕЛАТЬ НЕЛЬЗЯ -->

        
        
          
        
      

Поэтому если нужно и подключить внешний файл и написать код внутри разметки — используй два отдельных тега.

🛠 Порядок имеет значение.

Если ты используешь какие-то сторонние библиотеки при разработке сайта, то обрати внимание на порядок подключения скриптов — на порядок, в котором следуют теги script с путями до разных файлов.

Обычно достаточно в точности скопировать код из инструкции по работе с библиотекой.

Начинающие разработчики частенько игнорируют порядок подключения и потом ищут причины почему у них не работает то, что работать должно 🙃

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

🛠 Библиотекой называют код, написанный сторонним разработчиком или группой разработчиков, и доступный для свободного использования в качестве готовой подпрограммы на вашем сайте. Например, эта библиотека пригодится, если нужен простой удобный слайдер.