Пояснения к статье:
- <Script> — тег подключения скриптов.
- <Style> и <link> — теги подключения стилей.
- <Head> и <body> — главные теги-контейнеры HTML-документа. Содержат весь контент и внутреннюю информацию веб-страницы.
В этой статье мы поговорим с вами о том, как подключить JavaScript в HTML страницу. В этом нет ничего сложного, делается это так же, как и подключение CSS стилей.
Единственное отличие — JavaScript код можно вставлять в любой части HTML-документа. Если вы помните, то CSS код можно было подключить через тег <link> или же напрямую, записывая стили в парном теге style. Всё это можно было сделать только в теге head.
В этом плане JavaScript отличается от CSS — его можно подключить как в начале, так и в конце веб-страницы.
Внутреннее подключение скриптов
Для того, чтобы подключить скрипты внутри HTML страницы, добавьте в неё парный тег <script>, в котором и нужно записывать JavaScript код. Делается это так же, как и с тегом style.
Тег script можно добавлять в тег head, что делает большинство веб-разработчиков, но можно прописывать скрипты и в конце страницы. Это никак не влияет на их обработку, так как тег script считывается сразу, как только загружается веб-страница.
Подключение JavaScript в Head:
Подключение JavaScript в конце страницы:
Между первым и вторым примером нет особой страницы. В обоих случаях JavaScript-код будет обрабатываться быстрее чем остальная разметка страницы.
Главным плюсом является то, что вы сможете редактировать код не закрывая HTML документ — вам не нужно будет переключаться между документами.
Минусом считается то, что общий весь HTML-файла будет увеличен, что сказывается на его оптимизации. Кроме этого, на профессиональных веб-сайтах используется множество скриптов, которые отвечают за определенный функционал сайта. Для каждой функции принято использовать один JavaScript файл.
Подключение внешнего JavaScript файла
В CSS для подключения стилей использовалось 2 тега: <script> — для работы со стилями внутри HTML страницы, link — для подключения внешних стилей. Для подключения внешних JS файлов используется тот же тег script.
Создайте новый документ и сохраните его с расширением ".js". Чтобы подключить его создайте пустой тег script с атрибутом src. В нем прописываем путь к JavaScript файлу.
Пример:
Ещё одним преимуществом внешних стилей является то, что их намного удобнее использовать на больших сайтов. Представьте что вам приходилось бы писать скрипты для каждой HTML страницы, это очень долго и неудобно, не правда ли?
На страницу можно подключать неограниченное количество скриптов, просто создайте несколько документов и подключите их через тег <script>:
Есть также 1 нюанс, если тег <script> содержит атрибут "src", то внутреннее содержимое не обрабатывается. То есть, если вы подключите скрипты через тег <script> и попытаетесь записать в теге какой-то код, он обрабатываться не будет.
Кроме src принято вписывать атрибут type, в нем указывается язык скрипта. Пример:
Если вы забудете про данный атрибут, то на работе сайта это никак не отразится, но код будет считаться не валидным.
Заключение
В этой статье мы узнали о том, как подключать скрипты на HTML-страницу. Как мы уже поняли в этом нет ничего сложного, и лучше использовать внешние скрипты, так как это гораздо удобнее.
В следующих статьях мы поговорим с вами о синтаксисе языка и работе его некоторых элементов. Заранее создайте файл с расширением ".js" и подключите не свою тестовую страницу. Желаем удачи в изучении.