Просмотров: 44 876

Как подключить 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>

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

21-10-2014 13-05-32

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

Вариант 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 документу. Пользуйтесь этим на практике.

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

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.

  • сергей

    спасибочки

  • https://www.facebook.com/app_scoped_user_id/745749112249669/ Oxana Korsun

    Спасио!

  • Серега

    Спасибо)

  • yrj

    норм