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

🗓️ Оновлено: 17.08.2022
💬Коментарів: 0
👁️Переглядів: 615

Javascript (часто можна побачити скорочену для написання версію JS) це мова програмування, яка дуже часто застосовується у веб-розробці. У цій статті ми розповімо, як підключити 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
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18283
Поява елементів при скролі
Переглядів: 16838
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6953
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6789
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте 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