Правильно подключаем Javascript в HTML

Javascript (часто можно увидеть сокращенную для написания версию JS) это язык программирования, который очень часто применяется в web-разработке. В этой статье мы расскажем, как подключить javascript к html документу. Сделать это можно двумя способами: встроить js-код непосредственно в сам html файл, так и с помощью подключения внешнего файла javascript

Первый способ: вставляем js-код прямо в html

Вставить javascript-код можно просто добавив его в любое место вашей html страницы, внутри тега <script>

Например, вот так может выглядеть ваша html-страница с подключенным js-кодом:

<!DOCTYPE html>
<html lang="ru-RU">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS в HTML</title>
</head>

<body>

  <script>
      alert("Вот и вставили js код!");
  </script>

</body>

</html>

Вот мы и вставили js-код прямо в html файл. Но такое решение приемлемо, когда вы вставляете небольшой код, который нужно выполнить именно на этой странице. Тогда он не будет сильно тормозить загрузку страницы. Но лучше всего прописывать js-код в отдельном файле, а затем подключать его в html.

Второй способ: подключаем внешний файл

У этого метода есть ряд преимуществ.

  • Разделение файлов упрощает дальнейшую работу с ними. Представьте себе, когда у вас несколько тысяч строк js-кода, очень легко во всем этом потеряться.
  • Файлы js можно закешировать и тогда ваш сайт будет грузиться быстрее.
  • Вы можете загружать js-код только после того, как вся ваша верстка прогрузится.

Давайте предположим, что у вас вот такая структура:

site/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

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

<script src="js/script.js"></script>

Выглядеть это будет вот так:

<!DOCTYPE html>
<html lang="ru-RU">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS в HTML</title>
</head>

<body>

  <script src="js/script.js"></script>

</body>

</html>

Если же у вас немного другая структура или вам нужно подключить js файл в html документе, который не находится в корне, а лежит, к примеру в папке templates, то используйте символы «./» чтобы задать вложенность.

Для наглядности, предположим у вас такая структура:

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── templates
    └── contact.html

Тогда путь к файлу script.js из contact.html будет такой:

<script src="../js/script.js"></script>

Вот так можно подключать js к html файлам.

Кстати, обратите внимание, что и в первом и во втором способе можно не указывать type=»text/javascript» для тега script. Это уже необязательно.