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

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

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

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

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

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

HTML JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">	
	<!--  Не забываем про заголовок документа  -->
	<title>Подключение JavaScript к веб-странице</title>
	
	<!--  Подключаем 1-й внешний файл со скриптами  -->
	<script src="file_1.js"></script>
	
	<!--  Используем встроенный сценарий. Атрибут type можно не указывать  -->
	<script type="text/javascript">
		//Заполняем созданный элемент содержимым
		p1.innerHTML=('Я заполнен 1-м внутренним сценарием!');
	</script>
	
</head>
<body>
	
<!--  Подключать внешние файлы со скриптами можно  -->
<!--  в любом месте страницы по мере необходимости  -->
<script src="file_2.js"></script>

<p>
	В 1-м внешнем сценарии мы создали элемент 'Абзац'.<br>
	В 1-м внутреннем сценарии мы заполнили его.<br>
	Во 2-м внешнем сценарии мы вставили его в конец тела документа.<br>
	Во 2-м внутреннем сценарии мы проделали все в одном скрипте.	
</p>
		
<!--  Тоже самое касается и встроенных сценариев JavaScript  -->
<script>
	//Создаем элемент абзаца
	var p2=document.createElement('p');
	//Заполняем созданный элемент содержимым
	p2.innerHTML=('Я вставлен 2-м внутренним сценарием!');
	//Вставляем его в тело документа
	document.body.appendChild(p2);
</script>
	
</body>
</html>

//Код file_1.js
//Здесь теги script использовать уже не нужно
//Создаем элемент абзаца
var p1=document.createElement('p');

//Код file_2.js
//Здесь теги script использовать уже не нужно
//Вставляем его в тело документа
document.body.appendChild(p1);



















 

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

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

Быстрый переход к другим страницам