Как подключить js к html
Перейти к содержимому

Как подключить js к html

  • автор:

Внешние скрипты, порядок исполнения

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.

Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).

Браузер сам скачает скрипт и выполнит.

Можно указать и полный URL, например:

Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.

Чтобы подключить несколько скриптов, используйте несколько тегов:

На заметку:

Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.

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

Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.

Если указан атрибут src , то содержимое тега игнорируется.

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не сработает:

  

Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:

   

Асинхронные скрипты: defer/async

Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.

Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Например, в примере ниже – пока все кролики не будут посчитаны – нижний

не будет показан:

    

Начинаем считать:

Кролики посчитаны!

Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.

Если скрипт – внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.

То есть, в таком документе, пока не загрузится и не выполнится big.js , содержимое будет скрыто:

  Этот текст не будет показан, пока браузер не выполнит big.js. 

И здесь вопрос – действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?

Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.

Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся – оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функциональность.

А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!

Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):

Важная информация не покажется, пока не загрузится скрипт.

. Важная информация!

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

Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.

Поэтому «расположить скрипты внизу» – не лучший выход.

Кардинально решить эту проблему помогут атрибуты async или defer :

Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async .

Первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.

То есть, в таком коде (с async ) первым сработает тот скрипт, который раньше загрузится:

А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать.

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js , к примеру – использует что-то, описанное первым скриптом.

Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.

Например, если документ достаточно большой…

 Много много много букв

…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.

Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

async вместе с defer

При одновременном указании async и defer в современных браузерах будет использован только async , в IE9- – только defer (не понимает async ).

Атрибуты async/defer – только для внешних скриптов

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .

При попытке назначить их на обычные скрипты , они будут проигнорированы.

Тот же пример с async :

Важная информация теперь не ждёт, пока загрузится скрипт.

. Важная информация!

При запуске вы увидите, что вся страница отобразилась тут же, а alert из внешнего скрипта появится позже, когда загрузится скрипт.

Эти атрибуты давно «в ходу»

Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их.

Перед вставкой внешнего тега понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.

Забегая вперёд

Для продвинутого читателя, который знает, что теги можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как async . То есть, выполняются как только загрузятся, без сохранения относительного порядка.

Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство script.async = false .

Выглядит это примерно так:

function addScript(src) < var script = document.createElement('script'); script.src = src; script.async = false; // чтобы гарантировать порядок document.head.appendChild(script); >addScript('1.js'); // загружаться эти скрипты начнут сразу addScript('2.js'); // выполнятся, как только загрузятся addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3

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

Итого

  • Скрипты вставляются на страницу как текст в теге , либо как внешний файл через
  • Специальные атрибуты async и defer используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
  • Разница между async и defer : атрибут defer сохраняет относительную последовательность скриптов, а async – нет. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async – нет.

Очень важно не только читать учебник, но делать что-то самостоятельно.

Решите задачки, чтобы удостовериться, что вы всё правильно поняли.

Задачи

Какой скрипт выполнится первым?

важность: 4

В примере ниже подключены два скрипта small.js и big.js .

Если предположить, что small.js загружается гораздо быстрее, чем big.js – какой выполнится первым?

Как подключить js к html

В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега

Итак, в прошлой теме мы создали html-страницу index.html , которая находится в каталоге app . Теперь создадим в этом каталоге новый подкаталог. Назовем его js . Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем main.js . Файлы с кодом javascript имеют расширение .js . То есть у нас получится следующая структура проекта в папке app :

Структура программы на JavaScript

Откроем файл main.js в текстовом редакторе и определим в нем следующий код:

document.write("

Первая программа на JavaScript

"); // выводим заголовок document.write("Привет мир!"); // выводим обычный текст

Здесь для добавления на веб-страницу некоторого содержимого применяется метод document.write . Первый вызов метода document.write выводит заголовок , а второй вызов — обычный текст.

Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот редактор автоматически устанавливает кодировку UTF-8.

Теперь подключим этот файл на веб-страницу index.html :

    METANIT.COM     

Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег , у которого устанавливается атрибут src . Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/main.js .

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

И после открытия файла index.html в браузере отобразится сообщение:

Подключение внешних скриптов javascript

В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:

  • Мы можем повторно использовать один и тот же код на нескольких веб-страницах
  • Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
  • Код веб-страницы становится «чище». Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript

Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.

Асинхронная загрузка и отложенное выполнение

Нередко веб-страницы имеют сложную структуру, какие-то блоки на html-странице, где подключаются файлы javascript, формируются динамически, что может усложнять управление файлами javascript. И для управления загрузкой файла с кодом JavaScript браузер предоставляет два атрибута: async и defer .

Атрибут async гарантирует, что обработка HTML-кода не будет приостановлена, когда браузер встретит элемент . Файл JavaScript загружается асинхронно (отсюда и название атрибута — async ). В этом случае HTML-код продолжает обрабатываться до тех пор, пока не будет загружен соответствующий файл JavaScript. Когда будет загружен файл JavaScript, обработка HTML останавливается, и начинает выполняться загруженный файл JS. После выполнения кода JavaScript продолжается обработка HTML.

Асинхронная загрузка файла JavaScript и атрибут async

Пример применения атрибута async :

Атрибут defer также гарантирует, что обработка HTML-кода не будет приостановлена. С другой стороны, исходный код JavaScript выполняется только после полной обработки HTML-кода. Таким образом, выполнение кода JavaScript откладывается (отсюда и название — defer (в переводе на английский).

Отложенное выполенние файла JavaScript и атрибут defer

Пример применения атрибута defer :

Как подключить Javascript файл к html документу?

Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться. Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js.

Проблема, которая очень часто появляется у начинающих пользователей: Как подключить javacript-код или файл к html документу?

В этой небольшой заметке мы рассмотрим, как это можно сделать.

Все мои уроки по Javascript здесь.

Пусть содержимое файла html будет следующее:

    Документ без названия  Содержимое html-файла 

Ничего лишнего. Теперь код, который необходимо подключить:

alert("Javacript подключен");

Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что «Javacript подключен» при открытии файла html-документа. Итак, рассматриваем два варианта подключения скрипта.

Вариант 1. Подключение внутри html-файла.

Делается это с помощью конструкции:

  

Вставим этот код можно внутри тэга , либо внутри тега . В итоге, содержимое html файла может буть следующим:

    Документ без названия    Содержимое html-файла 

Проверяем, что все работает:

21-10-2014 13-05-32

Отлично. Окно с сообщением появилось.

Вариант 2. Подключение внешнего файла скрипта с кодом.

Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим. Пусть такой файл называется script.js. О том, как создать javascript файл я писал здесь.

В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.

21-10-2014 13-04-21

Как теперь подключить скрипт к html файлу? В этом случае нужно воспользоваться тэгом

Об адресах и как их правильно выставлять информация здесь.

Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:

    Документ без названия  Содержимое html-файла 

Как правило, скрипты подключаются в области документа. Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что «javascript подключен». Это два основных способа, как вы можете подключить код javascript к html документу.

Пользуйтесь этим на практике.

Все мои уроки по Javascript здесь.

Как встроить JavaScript в HTML

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

Что такое JavaScript

JavaScript (часто сокращается до JS) – это высокоуровневый, интерпретируемый язык программирования, который используется для создания динамических и интерактивных элементов на веб-сайтах.

JavaScript позволяет разработчикам добавлять функциональность к веб-страницам, делать их более отзывчивыми к действиям пользователя и обеспечивать взаимодействие с веб-серверами для загрузки или отправки данных без необходимости перезагрузки страницы.

Вместе с HTML и CSS JavaScript является частью трех основных технологий, необходимых для создания веб-сайтов. Помимо JS, в них входят:

  • HTML (язык гипертекстовой разметки) обеспечивает структуру веб-контента. Например, определяет заголовки, таблицы данных и списки маркированных пунктов.
  • CSS (каскадные таблицы стилей) применяет стиль и макет к содержимому HTML: настраивает цвет фона и шрифта, стандартизирует расстояние между элементами и добавляет фоновые изображения.

Для чего нужен JavaScript

JavaScript можно использовать для создания сложных веб-сайтов, браузерных игр и приложений, а также для подключения серверов к веб-сайтам и веб-приложениям.

Многие известные сайты и приложения используют JavaScript – включая Netflix, Google и YouTube.

С JavaScript разработчики могут:

  • отображать своевременные и актуальные обновления контента;
  • вставлять раскрывающиеся меню;
  • воспроизводить аудио и видео;
  • увеличивать и уменьшать изображения;
  • добавлять 2D/3D графику и анимацию;
  • вставлять эффекты, которые приходят в действие при наведении курсора;
  • отображать и скрывать меню;
  • предупреждать пользователей о недопустимых символах при вводе паролей;
  • создавать сложные браузерные игры.

Также в последние годы появилось множество технологий, которые позволяют использовать возможности JavaScript. К примеру, JS имеет обширную коллекцию фреймворков для создания веб- и мобильных приложений.

Но что такое «фреймворки»?

Фреймворки – это библиотеки предварительно написанного кода JavaScript. Иными словами, их можно назвать своеобразными «чертежами» в мире программирования, ведь фреймворки помогают разработчикам создавать приложения и веб-сайты с большей функциональностью.

Три самых популярных фреймворка приложений JavaScript:

  • React – используется при создании пользовательских интерфейсов для веб-приложений.
  • React Native – используется при создании мобильных приложений.
  • Node.js – обеспечивает двустороннюю связь с серверами для обмена данными.

О Node.js мы уже рассказывали более подробно в другой статье.

Java и JavaScript: одно и то же?

Несмотря на то что Java и JavaScript имеют схожий синтаксис и стандартные библиотеки, эти два языка программирования совершенно разные: Java является языком объектно-ориентированного программирования (ООП) – то есть запускается на виртуальной машине или в браузере.

JavaScript же – это язык сценариев ООП, который работает только в браузере.

Благодаря своей универсальности JavaScript остается одним из наиболее широко используемых языков программирования среди разработчиков. Однако, как мы упоминали ранее, при создании сайтов JS – не единственная технология, которая интересует разработчиков.

Часто встает вопрос о том, как встроить JavaScript в HTML. Об этом мы и поговорим далее.

Как добавить JavaScript в HTML

Мы уже рассмотрели, почему HTML, CSS и JavaScript необходимы для создания функциональных и динамических веб-страниц.

Но, говоря простыми словами, сайт состоит из трех уровней: HTML в качестве основы, CSS как средний слой и JavaScript – верхний.

Сначала вы структурируете контент на веб-странице с помощью HTML, затем добавляете стилистические элементы и правильный макет с помощью CSS. Далее добавляете динамические и интерактивные функции с помощью JavaScript.

Есть два способа добавить JavaScript в HTML:

  1. встроить JavaScript в теги HTML,
  2. создать внешний JavaScript-файл.

Способ 1. Разместите JS-код внутри парного тега

Код JavaScript можно встроить в документ HTML с помощью специального тега HTML . Его можно разместить либо в разделе вашего HTML, либо в разделе .

Размещение полностью зависит от того, когда именно вы хотите загрузить код.

Как добавить Javascript в тег

JavaScript-код можно вставить в раздел HTML-страницы. Это делается для того, чтобы функция оставалась изолированной от основного содержимого вашего HTML-проекта.

Вот пример того, как добавить JavaScript в раздел HTML-страницы:

document.getElementById(“demo”).innerHTML = “Paragraph changed.”;

Demo JavaScript in Head

Как добавить Javascript в тег

Если скрипт должен запускаться в определенной точке макета вашей веб-страницы, вам нужно будет вставить его в то место, где он должен вызывать функцию. Размещение обычно находится в разделе .

Вот пример того, как добавить JavaScript в раздел HTML-страницы:

Demo JavaScript in Body

document.getElementById(“demo”).innerHTML = “Paragraph changed.”;

Способ 2. Вставьте внешний JavaScript в HTML

Это достаточно простой способ вставить JS-код в HTML-страницу, который поможет вам, если ваш JS-скрипт большой или вы хотите распределить его по нескольким веб-страницам.

Использование отдельных файлов JavaScript позволяет разработчикам отделить разметку HTML от кода JS и предотвращает путаницу. Это также упрощает текущее обслуживание и ускоряет загрузку веб-страниц при кэшировании файлов JavaScript.

Вот пример внешнего сценария JavaScript:

document.getElementById(“demo”).innerHTML = “Paragraph changed.”;

Чтобы использовать этот внешний скрипт, вам необходимо добавить имя файла скрипта в атрибут src (source) тега :

Где «myScript» – имя файла вашего скрипта.

Советы по добавлению JavaScript в HTML

  1. Если сценарии должны запускаться только при их вызове, добавьте нужные функции в раздел . Таким образом, скрипт не помешает содержимому вашей страницы.
  2. Если ваш скрипт записывает содержимое страницы, оно должно находиться в разделе . В идеале скрипт должен располагаться в конце раздела , чтобы повысить скорость загрузки страницы.
  3. Если ваш сайт использует HTML5, добавление JS-кода в тег не потребуется.
  4. Некоторые программисты рекомендуют хранить сценарии HTML, CSS и JavaScript в отдельных папках. Самое главное – это правильно их связать.

Оптимизация JavaScript на странице

Оптимизация кода – это любой метод модификации кода для улучшения качества и эффективности кода.

Зачем нужна оптимизация JavaScript?

  • Производительность. Неоптимизированный код JavaScript может снижать производительность веб-страницы, делая ее медленной и менее отзывчивой. Быстрая загрузка и выполнение кода JavaScript – это ключевые факторы для обеспечения плавности и отзывчивости пользовательского интерфейса.
  • Экономия ресурсов клиента. Неэффективный код JavaScript может потреблять больше ресурсов: например, процессорное время и оперативную память на устройстве пользователя. Это может вызвать замедление работы браузера и даже вынудить пользователя закрыть вкладку или перезагрузить страницу.
  • Экономия трафика. Код JavaScript также участвует в объеме данных, передаваемых между сервером и браузером. Большие скрипты могут увеличивать время загрузки страницы, особенно при медленном интернет-соединении или при работе на мобильных устройствах. Оптимизированный JavaScript сокращает этот объем данных.
  • Совместимость. Разные браузеры могут по-разному интерпретировать JavaScript, и неоптимизированный код может вызвать проблемы на некоторых платформах. Оптимизация обеспечивает лучшую совместимость и устойчивость вашего веб-сайта.
  • Лучший пользовательский опыт. Быстрая загрузка и отзывчивость веб-страницы, а также экономия ресурсов и трафика, делают пользовательский опыт более приятным. Это приведет к увеличению уровня удовлетворенности пользователей и повышению вероятности их возвращения на ваш сайт.
  • Снижение нагрузки на сервер. Оптимизированный код JavaScript не только улучшает производительность на стороне клиента, но также снижает нагрузку на ваш сервер. Меньший объем передаваемых данных и меньшая нагрузка на браузеры означают меньшую нагрузку на сервер и снижение затрат на хостинг.

Аренда сервера

Если вы уже работаете над собственными сайтами, то, возможно, задумывались над арендой сервера для своих проектов.

Линейка хостинговых продуктов RU-CENTER крайне обширна и включает в себя всё: от доступного хостинга для небольших сайтов до аренды выделенных серверов для масштабных проектов.

Наши серверы – это мощные системы с отказоустойчивой инфраструктурой, которые соответствуют самым современным стандартам индустрии. Они станут надежным решением для размещения новых или переноса уже существующих сайтов.

Как оптимизировать JavaScript на странице

  1. Обратите внимание на порядок загрузки элементов

Важно, чтобы все элементы в разделе были предварительно загружены, прежде чем посетитель увидит что-либо в браузере. В таком случае все последующие элементы будут загружаться логическим образом.

Любой код JavaScript внутри раздела может замедлить загрузку страницы.

Когда загружается неоптимизированная страница, скорее всего, пользователь увидит «белый экран» до загрузки полной страницы.

Оптимизированная загрузка страницы (фактически рендеринг) происходит поэтапно, позволяя пользователю постепенно видеть некоторый контент, пока страница не загрузится полностью.

  1. Минимизируйте код JavaScript вручную

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

Разрывы строк, дополнительные пробелы или комментарии – всё это увеличивает размер JavaScript-файла и влияет на скорость загрузки страницы. Сжатие кода хорошо решает эту проблему.

  1. Оптимизируйте Javascript с помощью сторонних программ

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

  • Google Closure Compiler,
  • UglifyJAVASCRIPT,
  • Microsoft AJAX Minifier.

Как выглядит оптимизированный код? Давайте рассмотрим на примере.

До оптимизации

После оптимизации

var parent = node.parentNode;

alert( «We are Ru-Center!» );

function test(){alert(«We are Ru-Center!»)}

Что именно произошло при оптимизации?

  • Переменная родительского класса для выполнения кода не потребуется, поэтому её удалили.
  • «if(0) {…}» в этом случае считается мертвый кодом.
  • Также удалили «return» – это еще один мертвый код.
  1. Воспользуйтесь асинхронной загрузкой JavaScript

Асинхронная загрузка JavaScript означает, что браузер может одновременно загружать несколько ресурсов (в том числе и скрипты) без блокировки отображения остального контента на странице. Это существенно улучшает производительность, так как браузер не ожидает загрузки каждого скрипта перед продолжением обработки страницы.

Для выполнения асинхронной загрузки отлично подходят атрибуты: «async» и «defer». Их применение позволяет оптимизировать процесс загрузки и выполнения скриптов, чтобы ускорить отображение страницы для пользователей.

Атрибут «async». При его использовании браузер начнет загрузку скриптов параллельно с остальными ресурсами страницы, и он не будет блокировать отображение контента. Скрипты будут выполняться, как только загрузятся, и порядок выполнения может быть непредсказуемым.

Это полезно для скриптов, которые не зависят от других и могут быть выполнены независимо.

Атрибут «defer». При его использовании скрипты также загружаются асинхронно, но браузер гарантирует, что они будут выполнены в том порядке, в котором они расположены на странице.

Важно отметить, что выполнение скриптов будет отложено до тех пор, пока весь HTML-контент страницы не будет обработан браузером. Это полезно, если скрипты зависят друг от друга или от содержимого страницы.

Таким образом, атрибут «async» подходит для независимых скриптов, которые можно выполнять параллельно, в то время как атрибут «defer» подходит для скриптов, которые зависят от порядка выполнения и контента страницы.

Эти методы помогают улучшить производительность и восприятие пользователей при загрузке веб-страниц.

Важно! Атрибуты «defer» и «async» доступны только для внешних скриптов (с тегом src=»»). Они не будут выполняться во внутренних скриптах ().

Итак, в этом руководстве вы узнали, что внедрение JavaScript в HTML предоставляет веб-разработчикам мощный инструмент для создания интерактивных и динамичных веб-страниц. С помощью этой техники они могут улучшить пользовательский опыт, добавить функциональность и сделать веб-сайты более отзывчивыми.

Правильное использование JavaScript в HTML открывает двери к бесконечным возможностям для создания более современных и удобных веб-приложений.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *