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

🗓️ Обновлено: 17.08.2022
💬Комментариев: 0
👁️Просмотров: 614

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. Это уже необязательно.

Статья была полезной?
👍
Да - 2
👎
Нет - 1
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18273
Появление элементов при скролле
Просмотров: 16834
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8524
Как выровнять картинку по центру с помощью CSS
Просмотров: 6944
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6784
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab