Как подключить JS к HTML

основыфронтенд

Когда браузер читает HTML-страничку и составляет DOM Tree и видит <script>, то он первым делом читает и выполняет JS код, а только потом продолжает парсить страницу дальше.

DOM (Документно-объектная модель) - схема объектов, созданных из HTML элементов браузером в процессе парсинга страницы перед рендером. JS-код работает с DOM элементами, а не конечным HTML.

Чтобы подключить к условному HTML файлу JavaScript файл main.js, в HTML код нужно вставить строку:

<script src="main.js"></script>

JavaScript код будет выполнен непосредственно после того, как парсинг html дойдёт до тега <script>. Поэтому обычно JS файлы подключают в <head>, если JS не меняет DOM, или же перед закрытием </body>, если он работает с DOM. Например, jquery подключат в начале страницы, а скрипт, использующий библиотеку, в конце.

Async и defer

В браузерах новее IE 10 (97.45% устройств) появляются другие методы подключения JavaScript.

<script defer src="..."> - JS код будет загружаться параллельно HTML, но выполнится только после окончания парсинга. То есть мы можем подключить код, меняющий DOM в любом месте страницы.
<script async src="..."> - JS код загрузится параллельно HTML и выполнится сразу после загрузки, не ожидая готовность DOM дерева.

Если вы только начинаете разбираться в JavaScript, то вам вряд ли придётся использовать <script async>, но последние два метода подключения позволяют заметно ускорить загрузку страницы за счёт параллельной загрузки/исполнения HTML и JS.

Динамические скрипты

Также можно подключить JavaScript из другого JavaScript файла путём модификации DOM:

let script = document.createElement('script');
script.src = "/somefile.js";
document.body.append(script); // (*)

Загрузка скрипта начнётся как только элемент будет добавлен к дереву, по умолчанию он будет загружен как async.

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