skip to main content

<script>

html

Кратко 🔗

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

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

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

Пример 🔗

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

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

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

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

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

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

Как пишется 🔗

Тег <script> — парный, его всегда нужно закрывать с помощью </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>
var 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 с путями до разных файлов.

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

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

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

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


Автор: Макс 👨‍🔧