Вставляет код JavaScript на страницу или подключает внешние файлы скриптов.
Время чтения: меньше 5 мин
Кратко
Пример
Как понять
Как пишется
Атрибуты
Подсказки
Ещё примеры
На практике
Алёна Батицкая советует
Почему принято размещать со стилями внутри , а перед закрывающим тегом
? Когда можно нарушить это правило?
Объясните разницу между , и .
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Скрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег .
Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.
Теги можно располагать в любом месте в заголовке . . . < / head> или теле . . . < / body> HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом < / body>.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере мы подключим скрипты из внешнего файла с расширением .js . Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.
scriptsrc="external.js">script>
Как понять
Скопировать ссылку «Как понять» Скопировано
HTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.
Скрипты пишут на разных языках, самый популярный из которых — JavaScript.
Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег — парный, его всегда нужно закрывать с помощью < / script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.
Если добавить скрипты в код, то выглядеть это будет так:
window.alert("Добавили вот какой-то JavaScript-код")script>window.alert("Добавили вот какой-то JavaScript-код")script>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
async — браузер запускает скрипт асинхронно, то есть не дожидаясь загрузки веб-страницы. Впрочем, и сама страница не будет ждать запуска скрипта и продолжит загружаться, как обычно. Если async не указать, то скрипты будут грузиться по очереди. Этот атрибут работает только когда скрипт задаётся внешним файлом.
defer — откладывает запуск скрипта, пока веб-страница не загрузится целиком.
src — указывает путь к файлу со скриптами. Это может быть полный URL-адрес файла или относительный адрес, например, src = » / scripts / browser . js» . Файл должен иметь расширение .js . Когда указываешь src , не пиши ничего внутри . . . < / script>.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Обычно скрипты, которые должны выполняться первыми, помещают в заголовок страницы.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем с помощью скрипта сделать так, чтобы текст увеличивался и уменьшался через каждую пару секунд:
Подключение скриптов
Скрипты можно подключить разными способами. Например, описать их прямовнутри HTML-страницы. Но лучше всё же в отдельном файле.const p = document.getElementById("blinking")setInterval(function () if (p.style.fontSize !== "10px") p.style.fontSize = "10px"> else p.style.fontSize = "20px">>, 2000)DOCTYPEhtml>html>head>metacharset="utf-8">title>Подключение скриптовtitle>linkrel="stylesheet"href="style.css">head>body>h1>Подключение скриптовh1>pid="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>
🛠 Почему нужно писать в конце разметки, перед < / body>?
При загрузке страницы браузер читает код сверху вниз. В момент, когда он доходит до тега он останавливается и сперва читает что там, в этом теге . В этот момент вся остальная страница простаивает и не загружается. Если код внутри большой, то это может существенно повлиять на скорость загрузки страницы.
По этой причине принято ставить теги в самом конце разметки, перед закрывающим тегом < / body>. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.
Размещение в других частях разметки без очевидной надобности считается плохой практикой.
Нельзя одновременно написать код внутри тега и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.
console.log("Hello, world!"); // Этот код будет проигнорированscriptsrc="./js/main.js">console.log("Hello, world!");// Этот код будет проигнорированscript>
Поэтому если нужно и подключить внешний файл и написать код внутри разметки — используй два отдельных тега.
Если ты используешь какие-то сторонние библиотеки при разработке сайта, то обрати внимание на порядок подключения скриптов — на порядок, в котором следуют теги script с путями до разных файлов.
Обычно достаточно в точности скопировать код из инструкции по работе с библиотекой.
Начинающие разработчики частенько игнорируют порядок подключения и потом ищут причины почему у них не работает то, что работать должно 🙃
Самым частым примером является подключение библиотеки, написанной с использованием jQuery. Чтобы код верно работал, в первом теге script нужно подключить саму библиотеку jQuery, а уже затем, ниже, в следующем теге script подключать остальной код библиотеки.
🛠 Библиотекой называют код, написанный сторонним разработчиком или группой разработчиков, и доступный для свободного использования в качестве готовой подпрограммы на вашем сайте. Например, эта библиотека пригодится, если нужен простой удобный слайдер.
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Почему принято размещать со стилями внутри , а перед закрывающим тегом < / body>? Когда можно нарушить это правило?
Скопировать ссылку «Почему принято размещать link со стилями внутри head, а script перед закрывающим тегом /body? Когда можно нарушить это правило?» Скопировано
Когда мы размещаем стили внутри тега , браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега co стилями в начало документа предотвращает повторную перерисовку.
Тег обычно идёт перед закрывающимся тегом < / body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.
Мы можем размещать скрипт в , если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу . Про их отличия можно почитать подробнее в доке про .
defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.
Ещё один способ — указать атрибут , который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть равносильно , и указание defer не будет иметь никакого эффекта.
Скопировать ссылку «Объясните разницу между script, script async и script defer.» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Тег предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Синтаксис
Атрибуты
async Загружает скрипт асинхронно. defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. language Устанавливает язык программирования на котором написан скрипт. src Адрес скрипта из внешнего файла для импорта в текущий документ. type Определяет тип содержимого тега .