HTML-скрипты
Скрипт — это небольшой фрагмент кода, встроенный в веб-страницы для придания им динамичности и интерактивности. Например, с помощью скриптов можно создавать всплывающие окна, выпадающие меню и т. д. JavaScript — самый распространенный язык сценариев, используемый на веб-сайтах. Вы также можете использовать элемент [`<script>`](/learn-html/html-script-tag.html) с другими языками или типами (например, тип module или MIME-тип text/javascript).
Как добавить скрипты
Элемент [`<script>`](/learn-html/html-script-tag.html) используется для встраивания скрипта или ссылки на исполняемый скрипт в HTML-документ. Скрипты обычно размещают в [`<head>`](/learn-html/html-head-tag.html) или в конце элемента [`<body>`](/learn-html/html-body-tag.html). Чтобы предотвратить блокировку отрисовки страницы, используйте атрибуты defer или async при размещении скриптов в head. Атрибут defer загружает скрипт параллельно с разбором HTML и выполняет его после завершения разбора, тогда как async загружает скрипт параллельно и приостанавливает разбор HTML только тогда, когда скрипт готов к выполнению. Однако ограничений нет, и скрипт можно разместить в любом месте документа.
Если вам нужно, чтобы одни и те же скрипты были доступны для многих веб-страниц, поместите их в отдельный файл, а затем вызывайте из HTML-документа.
Вы можете вставить следующий фрагмент кода с тегом [`<script>`](/learn-html/html-script-tag.html) в свой HTML-код:
HTML-скрипты
<script src="scripts.js"></script>Примечание: В HTML5 атрибут type является необязательным (по умолчанию text/javascript) и считается устаревшим для скриптов JavaScript.
Как запустить скрипты
Вы можете указать, должен ли скрипт запускаться автоматически (сразу после загрузки страницы) или после того, как пользователь выполнит какое-либо действие (например, наведет курсор или щелкнет по ссылке). Если вы хотите, чтобы скрипт запускался при выполнении пользователем любого действия (так называемого события), используйте обработчики событий, чтобы сообщить браузеру, какое событие отвечает за запуск скрипта.
Обработчики событий можно указывать в виде атрибутов внутри HTML-тегов или подключать через JavaScript с помощью методов, таких как addEventListener.
Пример HTML-тега [`<script>`](/learn-html/html-script-tag.html) с обработчиком событий:
Пример обработчика событий — HTML-скрипты — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>Элемент [`<noscript>`](/learn-html/html-noscript-tag.html)
Хотя многие современные браузеры поддерживают JavaScript, некоторые старые браузеры не могут выполнять код JavaScript, а пользователи также могут отключить JavaScript в своих браузерах. Чтобы предоставить альтернативную информацию для браузеров без поддержки JavaScript или с отключенным JavaScript, используйте тег [`<noscript>`](/learn-html/html-noscript-tag.html). Содержимое этого тега отображается пользователю только тогда, когда JavaScript отключен или браузер не поддерживает JavaScript.
Пример HTML-тега [`<noscript>`](/learn-html/html-noscript-tag.html):
Мой первый пример JavaScript! — HTML-скрипты — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<p id="output"></p>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>In case JavaScript is disabled or the browser doesn't support it, the code will display the content inside the noscript element.</p>
</body>
</html>Результат
Практика
В каком месте HTML-документа можно разместить тег <script>?