Кратко
СкопированоСкрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег <script>.
Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.
Теги <script> можно располагать в любом месте в заголовке <head> или теле <body> HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом <.
Пример
СкопированоВ этом примере мы подключим скрипты из внешнего файла с расширением .js. Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.
<script src="external.js"></script>
<script src="external.js"></script>
Как понять
СкопированоHTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.
Скрипты пишут на разных языках, самый популярный из которых — JavaScript.
Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.
Как пишется
СкопированоТег <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> в конце разметки, перед <?
При загрузке страницы браузер читает код сверху вниз. В момент, когда он доходит до тега <script> он останавливается и сперва читает что там, в этом теге <script>. В этот момент вся остальная страница простаивает и не загружается. Если код внутри <script> большой, то это может существенно повлиять на скорость загрузки страницы.
По этой причине принято ставить теги <script> в самом конце разметки, перед закрывающим тегом <. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.
Размещение <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 подключать остальной код библиотеки.
🛠 Библиотекой называют код, написанный сторонним разработчиком или группой разработчиков, и доступный для свободного использования в качестве готовой подпрограммы на вашем сайте. Например, эта библиотека пригодится, если нужен простой удобный слайдер.
На собеседовании
Скопировано отвечает
СкопированоКогда мы размещаем стили внутри тега <head>, браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега <link> co стилями в начало документа предотвращает повторную перерисовку.
Тег <script> обычно идёт перед закрывающимся тегом <. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.
Мы можем размещать скрипт в <head>, если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу <script>. Про их отличия можно почитать подробнее в доке про <script>.
defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.
Ещё один способ — указать атрибут <script type, который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть <script type равносильно <script type, и указание defer не будет иметь никакого эффекта.
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
