belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

3.7. Тег <script>

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

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

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

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

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

Пример 3.7. Использование элемента 'script'

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

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

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

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

Контрольные вопросы и задания

  1. Для чего используется элемент 'script'? .
  2. В какой последовательности выполняются скрипты в html-документе?
  3. Как изменить такое поведение?

Словарь новых английских слов

target ['ta:git] – цель, назначение.
base [beɪs] – база, основа.
main [meɪn] – основной, главный.
link [lɪŋk] – звено, связь, связывать.
relation [ri'lei∫ən] – отношение, взаимосвязь.
media [ˈmiːdɪə] – носители, каналы, среды.
all [ɔːl] – все.
handheld [ˈhandhɛld] – портативный, переносной.
screen [skriːn] – экран.
size [saɪz] – размер, величина, объем.
content [kənˈtɛnt] – содержимое, содержание, суть.
author [ˈɔːθə] – автор, инициатор.
speech [spiːtʃ] – речь.
static [ˈstatɪk] – статичный, неподвижный,
стационарный.
state [steɪt] – состояние.
dynamic [dʌɪˈnamɪk] – динамичный, активный,
изменяющийся.
follow [ˈfɒləʊ] – следовать за.
revisit [riːˈvɪzɪt] – посетить вновь.
sheet [ʃiːt] – лист бумаги.
title [ˈtʌɪt(ə)l] – заглавие, название.
style [stʌɪl] – стиль, манера.
source [sɔːs] – источник.
asynchronously [ə'siɳkrənəsli] – асинхронно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх