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

Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev ;)

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

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

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

Все мои уроки по Javascript здесь.

Пусть содержимое файла 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. О том, как создать javascript файл я писал здесь.

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

21-10-2014 13-04-21

Как теперь подключить скрипт к 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 документу.

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

Все мои уроки по Javascript здесь.

Комментарии