Вставляет код JavaScript на страницу или подключает внешние файлы скриптов.
Время чтения: меньше 5 мин
Обновлено 8 сентября 2022
Скопировать ссылку «Кратко» Скопировано
Скрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег .
Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.
Теги можно располагать в любом месте в заголовке . . . < / head> или теле . . . < / body> HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом < / body>.
Скопировать ссылку «Пример» Скопировано
В этом примере мы подключим скрипты из внешнего файла с расширением .js . Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.
script src="external.js"> script> Скопировать ссылку «Как понять» Скопировано
HTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.
Скрипты пишут на разных языках, самый популярный из которых — JavaScript.
Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.
Скопировать ссылку «Как пишется» Скопировано
Тег — парный, его всегда нужно закрывать с помощью < / script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.
Если добавить скрипты в код, то выглядеть это будет так:
window.alert("Добавили вот какой-то JavaScript-код")script> window.alert("Добавили вот какой-то JavaScript-код") script>
Скопировать ссылку «Атрибуты» Скопировано
Скопировать ссылку «Подсказки» Скопировано
💡 Обычно скрипты, которые должны выполняться первыми, помещают в заголовок страницы.
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем с помощью скрипта сделать так, чтобы текст увеличивался и уменьшался через каждую пару секунд:
Подключение скриптов
Скрипты можно подключить разными способами. Например, описать их прямо внутри HTML-страницы. Но лучше всё же в отдельном файле. const p = document.getElementById("blinking") setInterval(function () if (p.style.fontSize !== "10px") p.style.fontSize = "10px" > else p.style.fontSize = "20px" > >, 2000)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>
Скопировать ссылку «На практике» Скопировано
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Почему нужно писать в конце разметки, перед < / body>?
При загрузке страницы браузер читает код сверху вниз. В момент, когда он доходит до тега он останавливается и сперва читает что там, в этом теге . В этот момент вся остальная страница простаивает и не загружается. Если код внутри большой, то это может существенно повлиять на скорость загрузки страницы.
По этой причине принято ставить теги в самом конце разметки, перед закрывающим тегом < / body>. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.
Размещение в других частях разметки без очевидной надобности считается плохой практикой.
Нельзя одновременно написать код внутри тега и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.
console.log("Hello, world!"); // Этот код будет проигнорирован script src="./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.» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Putting CSS in Javascript is pretty much the norm these days — but what if we could do the opposite? Recently, I’ve been reading quite a bit about Houdini, which gives developers the ability to directly interact with the CSS Object Model. One of the coolest things about it, is that it lets us put Javascript in our CSS. In the example below, I’ve created a background effect where the Javascript is inside the CSS. Every time you refresh, the background is randomized. Check the CSS tab below to see Javascript inside the CSS. You can even use CSS variables directly in your Javascript code, letting you use standard colors and other settings you configured in your stylesheet.
As of now, these features only work in Google Chrome and Edge, and a few other browsers — so make sure you are using one of them when trying out the demo below.
Whenever you change the class of an element, the Javascript inside the CSS re-renders, meaning simply adding classes to an element can recreate complicated effects using different colors, as shown above! When you click on one of the options like Red/Blue — the only thing that changes is the class name of the div.
Houdini is a broad term for a mixture of different technologies that allow us to mix Javascript and CSS. Ultimately, Houdini conceptually lets us interact with CSS, and create CSS rules that the browser can understand. One of the most recognizable features of Houdini is the paint worklet. Paint worklets are a way to create images for your CSS using techniques familiar to you if you’ve used HTML canvas before. We can register custom CSS Paint Worklets by putting our worklet into a file and using the following line:
CSS.paintWorklet.addModule('paint-worklet.js'); We can then use these paint worklets directly in our CSS using the paint() function. Before we get to that, let’s look at how we can create our paint-worklet.js file.
Below, we will create our class, called BackgroundCanvas . The code I’ve written below then paints random circles on the canvas, which are of random size and vary in terms of how blurred they are.
Within this function are various configurable options, such as count, blur, and radius, which lets us adjust how the effect will be rendered.
class BackgroundCanvas rand(min, max) return Math.random() * ( max - min ) + min; > paint(ctx, geom, properties) // Colors for background gradient let backgroundColors = [ '#000', '#000' ]; // Colors for the circle colours let colors = [ '#202bc5', '#cc3d44' ]; // Number of circles to render let count = 200; // The range of blur and radius values let blur = [ 10, 100 ]; // Min, Max blur let radius = [ 1, 40 ]; // Min, max radius // Clear out the entire canvas ctx.clearRect( 0, 0, geom.width, geom.height ); // And use a blend mode to make the effect look cooler ctx.globalCompositeOperation = 'lighter'; // Apply the background gradient let grd = ctx.createLinearGradient(0, geom.height, geom.width, 0); grd.addColorStop(0, backgroundColors[0]); grd.addColorStop(1, backgroundColors[1]); ctx.fillStyle = grd; // Fill the rectangle with the gradient ctx.fillRect(0, 0, geom.width, geom.height); // Then draw a circle for each value of count while(count--) // Determine a random x, y, blur, and radius let thisRadius = this.rand( radius[0], radius[1] ); let thisBlur = this.rand( blur[0], blur[1] ); let x = this.rand( -100, geom.width + 100 ); let y = this.rand( -100, geom.height + 100 ); // Draw the circle, using the color, blur, and radius we defined ctx.beginPath(); ctx.filter = `blur($thisBlur>px)`; let grd = ctx.createLinearGradient(x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius); grd.addColorStop(0, colors[0]); grd.addColorStop(1, colors[1]); ctx.fillStyle = grd; ctx.arc( x, y, thisRadius, 0, Math.PI * 2 ); ctx.closePath(); ctx.fill(); > > > // Register the class 'BackgroundClass' as being called 'BackgroundCanvas' registerPaint('BackgroundCanvas', BackgroundCanvas); To register this paint module, add the following Javascript to your HTML document:
CSS.paintWorklet.addModule('paint-worklet.js');