В этой статье вы узнаете о внедрении кода JavaScript в HTML-документ, возможных способах этого, различиях между этими способами и многом другом!
Предпосылки
Вы должны иметь некоторое представление о HTML / CSS. Предварительный опыт программирования не требуется.
Тег ‹script›
В HTML код JavaScript вставляется между тегами <script> и </script>.
<script> // Here goes your JS code </script>
Вы можете разместить любое количество скриптов в HTML-документе. Сценарии могут быть размещены в <body>, или в <head> разделе HTML-страницы, или в обоих.
Есть разница?
Я рад, что вы спросили, потому что разница есть, и это очень важно.
Лучше всего размещать теги JavaScript <script> только перед закрывающим </body> тегом, а не в разделе <head> вашего HTML.
Причина этого в том, что HTML загружается сверху вниз. Сначала нагружается голова, затем тело, а потом все внутри тела. Если мы поместим наш JavaScript в раздел head, весь JavaScript загрузится перед загрузкой любого HTML, что может вызвать несколько проблем:
- Если у вас есть код в вашем JavaScript, который изменяет HTML, как только он загружается, на самом деле не будет никаких HTML-элементов, на которые он мог бы повлиять, поэтому будет казаться, что код JavaScript не работает, и вы могут появиться ошибки.
- Если у вас много JavaScript, это может заметно замедлить загрузку вашей страницы, потому что он загружает весь JavaScript до того, как загрузит какой-либо HTML.
Когда вы размещаете свой JavaScript в нижней части тела HTML, это дает HTML-код для загрузки до любой загрузки JavaScript, что может предотвратить ошибки и ускорить время отклика веб-сайта.
Давайте разберемся с примером (и не беспокойтесь о синтаксисе, который я использую, вам просто нужно понять, что мы пытаемся сделать).
В приведенном выше коде я попытался изменить цвет абзаца на зеленый, написав свой JavaScript в <head>tag. Результат для этого:
Таким образом, код не повлиял на цвет абзаца, потому что, как мы упоминали ранее, скрипт загружался перед самим абзацем, поэтому в этот конкретный момент нет абзаца, цвет которого мы можем изменить.
Давайте теперь попробуем наоборот, в нижней части тела:
И, конечно же, мы получаем то, что хотим, потому что теперь код JS знает абзац.
И еще одно: хотя лучше всего включать JavaScript в конце HTML <body>, размещение JavaScript в <head> HTML не ВСЕГДА вызывает ошибки.
Внешний JavaScript
JavaScript также можно использовать во внешних файлах. Файлы JavaScript имеют расширение ".js". Чтобы использовать внешний сценарий, поместите имя файла сценария в атрибут src тега сценария.
|<scriptsrc="myScript.js"></script>
Преимущества внешнего JavaScript:
Размещение кода JavaScript во внешних файлах js имеет некоторые преимущества перед встроенными скриптами:
- Разделение кода HTML и JavaScript поможет легче управлять базой кода.
- Дизайнеры могут работать вместе с кодировщиками параллельно без конфликтов кода.
- Хорошо работает с современными системами контроля версий исходного кода, такими как GIT. Это означает, что для каждого из этих файлов будет храниться история, и его могут регистрировать и проверять несколько программистов.
- Код, как и HTML, легко читается.
- Внешние файлы JavaScript кэшируются браузерами и могут ускорить загрузку страницы.
- Многие популярные пакеты JavaScript доступны как размещенные в сетях доставки контента (cdn), и вы можете просто указать на них, используя URL-адрес в src, таким образом избегая копирования файла js в локальную папку.
Стоит упомянуть, что есть и другие преимущества, но, поскольку эта статья предназначена для неопытных разработчиков, я решил не говорить об этом.
асинхронный и отложить
Есть способы загрузить свой внешний JavaScript, не беспокоясь о том, куда его следует включить. Это изображение объясняет, как работают эти два атрибута и в чем разница.
На сегодня, ребята! Надеюсь, вам понравился этот урок, и я надеюсь, что он помог вам разобраться в теме. Спасибо за то, что прочитали это, до новых встреч! 😄
