Как подключить Javascript файл к html документу?


Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться. Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js. 


Проблема, которая очень часто появляется у начинающих пользователей: Как подключить javacript-код или файл к html документу? 


В этой небольшой заметке мы рассмотрим, как это можно сделать. 




Пусть содержимое файла html будет следующее:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
Содержимое html-файла
</body>
</html>


Ничего лишнего. Теперь код, который необходимо подключить:


alert("Javacript подключен");


Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что "Javacript подключен" при открытии файла html-документа. Итак, рассматриваем два варианта подключения скрипта. 


Вариант 1. Подключение внутри html-файла. 


Делается это с помощью конструкции:


<script type="text/javascript">
…
Код javascript
…
</script>


Вставим этот код можно внутри тэга <body>, либо внутри тега <head>. В итоге, содержимое html файла может буть следующим:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<script type="text/javascript">
alert("Javacript подключен");
</script>
Содержимое html-файла
</body>
</html>


Проверяем, что все работает:


  



Отлично. Окно с сообщением появилось. 


Вариант 2. Подключение внешнего файла скрипта с кодом. 


Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим. Пусть такой файл называется script.js.


В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.


  


Как теперь подключить скрипт к html файлу? В этом случае нужно воспользоваться тэгом


<script src="путь_к_файлу_скрипта/script.js"></script>


Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="script.js"></script>
</head>
<body>
Содержимое html-файла
</body>
</html>


Как правило, скрипты подключаются в области <head> документа. Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что "javascript подключен". Это два основных способа, как вы можете подключить код javascript к html документу. 


Пользуйтесь этим на практике.