<script>, навороты с модулями, а ещё расскажу, как не наступить на грабли.
Зачем вообще подключать JavaScript к HTML?
Всё просто: чтобы добавить интерактив. Хочешь ловить клики, отправлять формы без перезагрузки, строить динамические графики или тащить данные с сервера? Без JS никуда. Но чтобы он заработал, его надо правильно внедрить в HTML. И вот тут есть нюансы, которые могут здорово повлиять на производительность и удобство поддержки твоего кода.
Что потребуется
- Любая современная ОС: Windows, Mac, Linux — не важно.
- Браузер (Chrome, Firefox, Edge, Safari — любой, только не IE).
- Текстовый редактор: VSCode, Sublime, Notepad++ или даже
vim. - Железо? Подойдёт даже Raspberry Pi, если не запускаешь тяжёлые фреймворки.
- Интернет — чтобы посмотреть официальную доку, если что-то не работает.
Установка — пошаговая инструкция
- Создай HTML-файл.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Скрипт подключим ниже --> </head> <body> <h2>Пример JS-подключения</h2> </body> </html> - Вариант 1: Встраиваемый скрипт.
Просто вставь JS-код прямо в HTML-файл:<script> alert('Привет из JavaScript!'); </script>Обычно вставляют перед
</body>, чтобы страница успела загрузиться. - Вариант 2: Внешний JS-файл.
Создай файлmain.js:// main.js console.log('JS подключён!');Подключи его так:
<script src="main.js"></script>Опять же, лучше перед
</body>. - Вариант 3: Модули (ES6 Modules).
Модули позволяют импортировать/экспортировать функции и переменные между файлами. Для этого нуженtype="module":<script type="module" src="main.js"></script>Теперь в
main.jsможно писать:import { sayHello } from './utils.js'; sayHello();А в
utils.js:export function sayHello() { console.log('Привет из модуля!'); } - Атрибуты
deferиasyncдля оптимизации.defer— скрипт загрузится параллельно с HTML, но выполнится после полной загрузки DOM.async— скрипт загрузится и выполнится сразу, как только загрузится, не дожидаясь HTML.
Обычно для модулей
deferне нужен:<script type="module" src="..."></script>ведёт себя какdeferпо умолчанию.
Использование: полный список вариантов
- Встроенный JS:
<script> // твой код здесь </script> - Внешний файл:
<script src="script.js"></script> - Модуль:
<script type="module" src="module.js"></script> - defer:
<script src="script.js" defer></script> - async:
<script src="script.js" async></script> - Импорт модулей:
// module.js export function foo() { ... } // main.js import { foo } from './module.js'; foo();
Подробнее: MDN: <script>
Ошибки — как делать не надо
- Не пихай скрипты в
<head>безdeferилиasync. Блокируешь загрузку страницы, UX страдает. - Не подключай модули без
type="module". Импорт/экспорт работать не будет. - Пути к файлам.
src="js/main.js"— путь должен быть корректным относительно HTML-файла. - Не смешивай модули и обычные скрипты в одном файле. Будет больно дебажить.
- Не забудь про CORS. Если открываешь HTML-файл напрямую из файловой системы, import может не работать — лучше подними локальный сервер (например,
python3 -m http.server).
Пример реального использования
Допустим, ты делаешь dashboard и хочешь подгрузить статистику через модуль. Структура:
index.html
js/
main.js
stats.js
index.html:
<body>
<div id="stats"></div>
<script type="module" src="js/main.js"></script>
</body>
js/stats.js:
export function getStats() {
return { users: 42, uptime: '99.9%' };
}
js/main.js:
import { getStats } from './stats.js';
const stats = getStats();
document.getElementById('stats').textContent =
`Пользователей: ${stats.users}, Аптайм: ${stats.uptime}`;
Всё, теперь твой JS — модульный, современный и готов к масштабированию.
Заключение
Подключать JavaScript к HTML — не rocket science, но нюансы есть. Используй <script> с умом, не забывай про type="module" для модулей, и не бойся экспериментов. Пиши чисто, оптимизируй загрузку, и твой фронт будет летать. Если что-то не работает — MDN JavaScript Guide тебе в помощь.
Ваш отзыв