HTML :: Тег <script>

Использование тега <script>

Элемент «script» формируется парным тегом <script> (от англ. script – скрипт) и служит для встраивания и подключения программных скриптов (в основном JavaScript) к html-документам. В то время, как элемент «style» используется в качестве контейнера для внутренних таблиц стилей CSS, а «link» ссылается на внешние таблицы, элемент «script» может служить и в качестве контейнера для хранения различных скриптов внутри html-кода, и в качестве ссылки на внешние файлы с кодом требуемого языка. Кроме того, элемент «script» разрешается применять практически в любом месте документа по мере необходимости. Однако скрипты, которые должны выполняться в первую очередь, обычно размещаются выше, поскольку все скрипты в html-документе по умолчанию выполняются последовательно согласно их появлению в коде.

Атрибут type тега <script>

Скрипты могут писаться не только на языке JavaScript. Компанией Microsoft, например, был разработан свой скриптовый язык VBScript. Поэтому, чтобы браузер знал, как правильно интерпретировать программный код, применяется атрибут type, который указывает MIME-тип данных скрипта. По умолчанию применяется type="text/javascript", поэтому его можно не указывать. Но, если потребуется вставить скрипт на языке VBScript, нужно будет указать значение type="text/vbscript".

Подключение внешних скриптов
при помощи атрибута src тега <script>

В большинстве случаев скрипты располагаются во внешних файлах. Это дает ряд преимуществ:

после первого обращения к файлу со скриптом, он сохраняется в кэше браузера и в дальнейшем загружается оттуда, ускоряя процесс последующей загрузки страниц;
одни и те же блоки кода, например, функции, могут применяться сразу для нескольких страниц;
в разы упрощается контроль и редактирование исходного кода скриптов, так как отпадает необходимость править одни и те же функции на каждой странице.

Для подключения к странице внешнего файла со скриптами применяется атрибут src (от англ. source), который в качестве значения принимает абсолютный или относительный путь к файлу, который обычно имеет расширение .js. Когда данный атрибут присутствует, между открывающим и закрывающим тегом элемента «script» код не пишется, хотя сами теги указываются (см. пример №1).

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Определяем базовый адрес -->
	<base href="https://site.name/">
	<!-- Не забываем про заголовок документа -->
	<title>Использование элемента «script»</title>
	
	<!-- Подключаем 1-й внешний файл со скриптами -->
	<script src="javascript/file_1.js"></script>
	
	<!-- Используем внутренний сценарий. Атрибут type можно не указывать -->
	<script type="text/javascript">
		//Метод alert() выводит на экран диалоговое окно.  
		alert("Я - 1-й внутренний сценарий!");
	</script>
</head>
<body>
	<!-- Подключать внешние файлы со скриптами можно -->
	<!-- в любом месте страницы по мере необходимости -->
	<script src="javascript/file_2.js"></script>
	
	<p>
		Я - содержимое первого абзаца в теле документа. 
	</p>
	
	<!-- Тоже самое касается и внутренних сценариев JavaScript -->
	<script>
		alert("Я - 2-й внутренний сценарий!");
	</script>
	
	<p>
		Я - содержимое второго абзаца в теле документа.
	</p>
	
</body>
</html>

Пример №1. Использование элемента «script»

Атрибут async тега <script>

Иногда бывают случаи, когда требуется, чтобы скрипт загружался и выполнялся одновременно (параллельно) с загрузкой страницы не оказывая влияния на ход загрузки и не тормозя отображение содержимого страницы в окне браузера (например, при использовании на сайте сторонних скриптов со счетчиками посещений или рекламных скриптов, которые могут задерживать загрузку основного содержимого страницы). Для этих целей применяется атрибут async (от англ. asynchronously), который сообщает браузеру о том, что данный скрипт нужно выполнять одновременно (параллельно) с загрузкой страницы и выполнением других скриптов. Атрибут употребляется без значений и по умолчанию выключен.

Атрибут defer тега <script>

Если необходимо, чтобы требуемые скрипты загружались и выполнялись одновременно (параллельно) с загрузкой страницы, но при этом порядок выполнения данных скриптов сохранился, т.е. чтобы скрипты выполнялись в порядке появления соответствующих элементов «script» в коде документа, то нужно указывать атрибут defer, который также не имеет значений и по умолчанию выключен. Это может понадобиться, например, в том случае, когда второй скрипт, который идет в исходном коде ниже, зависит от первого скрипта, который идет в исходном коде выше. Подробнее от этих атрибутах мы поговорим уже в курсе изучения языка JavaScript.

Атрибуты defer и async работают только, если указан атрибут src. Кроме того, если указаны оба атрибута, то предпочтение отдается атрибуту defer, соответственно, async игнорируется.

В конце лишь добавим, что активно пользоваться элементами «script» мы начнем в процессе изучения языка программирования JavaScript. Пока же нужно просто иметь общее представление о предназначении данного элемента.