Есть разные способы добавить Javascript в HTML:
- Между тегами
<head>. - До или после тега
</body>. - В отдельном файле
Между тегами заголовка
Если мы хотим, чтобы скрипт запускался до отображения содержимого страницы, мы должны добавить его между тегами <head> и </head>.
Браузер читает HTML-документ сверху и, дойдя до скрипта, пытается выполнить строку 7, но не знает, что такое body, поскольку оно еще не создано. Другими словами, тело равно null.
Чтобы решить эту проблему, нам нужно запустить скрипт до или после тега </body>.
До или после закрывающего тега body
Если мы хотим, чтобы скрипт запускался после отображения содержимого страницы, нам нужно добавить его до или после тега </body>.
Перед закрывающим тегом body
После закрывающего тега body
Теперь, когда мы откроем эту страницу, мы увидим Hello world!
В отдельном файле
Обычно мы добавляем скрипт в отдельный файл, когда наш скрипт большой и/или мы будем использовать его на многих страницах. Сделав это, мы можем повторно использовать наш сценарий на многих страницах и сделать наш код более читабельным.
Как и ожидалось, на странице также будет отображаться Hello world!. То, как мы загрузили наш скрипт выше, является примером обычной загрузки.
Существует три различных способа загрузки внешнего файла Javascript:
- Нормальная загрузка
- Асинхронная загрузка
- Отложить его загрузку
Нормальная загрузка
В этом случае файл HTML будет анализироваться до тех пор, пока не встретит ссылку на файл Javascript, после чего файл Javascript будет загружен и выполнен. После завершения выполнения браузер продолжит синтаксический анализ остальной части HTML-файла.
<script src="script.js"></script>
Когда следует выбирать этот тип загрузки?
Обычно так вы ссылаетесь на скрипт. Пока вы ссылаетесь на свой скрипт до или после тега </body>, все должно работать нормально. Если по какой-то причине вам нужно сослаться на свой скрипт в других местах, например, между тегами <head> и </head>, то отложенная загрузка, вероятно, будет лучшим выбором.
Асинхронная загрузка файла Javascript
Когда мы загружаем файл Javascript асинхронно, он будет загружен вместе с файлом HTML. После того, как загрузка скрипта будет завершена, скрипт будет выполнен, и когда выполнение завершится, браузер продолжит синтаксический анализ HTML-файла.
<script src="script.js" async></script>
Если мы хотим загрузить файл сценария асинхронно, нам просто нужно добавить слово async.
Когда следует загружать скрипт асинхронно?
- Когда скрипт не имеет никаких зависимостей
- Когда скрипт не зависит от других файлов
Отсрочка загрузки файла Javascript
Отсрочка загрузки файла Javascript означает, что выполнение сценария будет отложено до полной загрузки HTML-документа.
<script src="script.js" defer></script>
Чтобы отложить загрузку, нам просто нужно добавить defer к ссылке.
Когда следует отложить загрузку скрипта?
В любое время, когда сценарию требуется полный анализ DOM. Например, если вы добавили ссылку (с ключевым словом defer) на внешний скрипт в заголовке HTML-документа, и этот скрипт каким-то образом взаимодействует с DOM, скрипт будет работать отлично, потому что он будет выполнен только один раз. DOM был загружен полностью.
