Подключение JavaScript может быть реализовано несколькими способами. И как всегда каждый из них имеет свои плюсы и свои минусы.
Тег <script>
JavaScript программы могут быть встроены в любое место документа HTML. Для этого используется парный тег <script></script>
Код внутри данного тега выполнится в тот момент когда браузер его прогрузит и обработает.
Пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мой первый сайт</title> </head> <body>
<H1 align="center"> Привет МИР!!!</H1>
<script>
alert( 'Привет, мир!' );
</script>
<p>Дорогой друг я рад видеть тебя на моем первом сайте!</p>
</body> </html>
Код из примера при загрузке HTML документа создаст всплывающее окно ALERT.
Атрибуты тега <script></script>
Тег <script></script> имеет несколько атрибутов, многие из них уже редко используются и не обязательны, но их можно еще встретить.
Атрибут type. Старые стандарты HTML, до HTML5, требовали обязательное наличие данного атрибута. в новом стандарте данный атрибут не является обязательным, но многие по старой привычке его прописывают до сих пор. Обычно в качестве значения он принимал: type=»text\javascript».
Атрибут language. По задумке данный атрибут должен задавать язык скрипта. Но JavaScript является языком по умолчанию для данного тега, поэтому необходимость в данном атрибуте отпадает.
Далее мы рассмотрим не совсем атрибут. Это вариант написания скрипта для очень старых браузеров. Такой вариант написания можно встретить на очень старых сайтах, не обновленных под новые стандарты. Это обертывание скрипта в комментарий HTML.
Пример:
<script>
<!--
alert( 'Привет, мир!' );
-->
</script>
Данный способ использовался для того чтобы браузеры, не понимающие тег <script> не стали его обрабатывать и пропускали его. Но браузеры и обновления браузеров за последние 10-15 лет исключили данную проблему и скрывать код скрипта в комментарий больше нет необходимости.
Подключение внешнего скрипта
В большинстве случаев скрипты JavaScript подключаются с помощью внешнего файла. Подключение внешних скриптов очень напоминает подключение стилей CSS к документу HTML. Данный способ используется если у вас много JavaScript кода и если он должен выполняться не только на одной странице а на нескольких. Файл скрипта подключается с помощью тега <script> и его атрибута src, который содержит путь к файлу JS.
<script src="js/script.js"></script><script src="site.com/mood.js"></script>
Атрибут src может содержать не только локальный путь к файлу скриптов, но и путь к файлу скриптов на стороннем ресурсе. Это помогает уменьшить место занимаемое сайтом на сервере или хостинге. Но немного может увеличиваться время загрузки сайта, так как ему придется подгружать файл скриптов с другого сайта.
В качестве достоинства можно выделить то что большинство браузеров отдельно подгружают внешний файл со скриптами JS и может хранить его в своем кеше. А другие страницы использующие этот же файл будут использовать тот который уже сохранен в кеше. Это сокращает расход трафика на сервере и позволяет ускорить загрузку страниц.
Если у тега установлен атрибут src, то содержимое тега будет игнорироваться.
это работать не будет:
<script src="js/script.js">alert("Привет мир!")</script>
Точнее команда alert внутри тега <script> выполняться не будет. Будет выполняться внешний файл путь к которому указан в атрибуте src.