Правильно підключаємо Javascript до HTML
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. Це вже необов’язково.
