Подключение JavaScript к html-документу
http://belarusweb.net
Основы создания сайтов

Подключение JavaScript к html-документу

Для того, чтобы сценарий JavaScript мог управлять веб-страницей, его нужно сперва к ней подключить. Для этого в HTML предусмотрен специальный парный тег <script>, который позволяет либо использовать встроенный сценарий JavaScript, т.е. писать код языка непосредственно внутри элемента 'script', либо дает возможность подключить к странице внешний файл с кодом JavaScript.

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

Важно помнить, что когда атрибут src присутствует, между открывающим и закрывающим тегом элемента 'script' код не пишется, хотя сами теги указываются. Кроме того, по умолчанию применяется type="text/javascript", поэтому указывать атрибут type необязательно.

Внимательно и неторопясь изучите пример 1.3.1 (здесь и далее, чтобы посмотреть код внешних файлов JavaScript, используйте значок загрузки под примером). Обратите внимание, что внутри элемента 'script' используются комментарии JavaScript, синтаксис которых имеет вид, отличный от синтаксиса комментариев HTML (подробно о комментариях мы поговорим немного позже).

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

Пример 1.3.1. Подключение JavaScript к веб-странице  

Как видно из примера, элементы 'script' могут быть расположены практически в любом месте исходного кода веб-страницы. Что касается порядка выполнения скриптов, то об этом мы поговорим в следующем пункте нашего учебника. Однако прежде, чем двигаться дальше, не поленитесь и освежите в памяти всю информацию по элементу 'script', совершив переход по ссылке здесь.