JavaScript подключается к HTML-странице двумя основными способами: встроенным кодом внутри тега <script> и внешним файлом через атрибут src. Первый вариант подходит для коротких фрагментов кода, второй – для организации проекта с отдельной структурой.
При использовании встроенного скрипта код размещается между тегами <script> и </script> внутри HTML-документа. Чаще всего это делают перед закрывающим тегом </body>, чтобы загрузка страницы не замедлялась.
Подключение внешнего файла выполняется так: <script src=»script.js»></script>. Атрибут defer позволяет загружать скрипт параллельно с HTML и выполнять его после построения DOM, а async запускает выполнение сразу после загрузки файла, что полезно для независимых модулей.
Вызов функций из HTML возможен напрямую через атрибуты элементов, например onclick или onchange, однако такой подход применяют редко из-за сложности поддержки. Предпочтительнее связывать обработчики событий в самом JavaScript, используя метод addEventListener.
Подключение внешнего JavaScript файла через тег <script>
Для подключения кода из отдельного файла используется атрибут src тега <script>. Такой подход облегчает поддержку и повторное использование кода.
Пример базового подключения:
<script src="script.js"></script>
- Файл должен иметь расширение
.jsи корректную кодировку (обычно UTF-8 без BOM). - Относительный путь
srcуказывается относительно HTML-файла. - Абсолютные пути допустимы, например с CDN.
При использовании нескольких файлов важно учитывать порядок загрузки:
- Файлы, содержащие зависимости (например, библиотеки), подключаются первыми.
- Скрипты, использующие эти зависимости, подключаются позже.
Чтобы не блокировать отрисовку страницы, применяют атрибуты:
defer– выполняет скрипт после полной загрузки HTML, сохраняя порядок.async– выполняет скрипт сразу после загрузки, порядок не гарантирован.
Пример подключения с атрибутом defer:
<script src="main.js" defer></script>
Вставка встроенного кода JavaScript внутри HTML документа
Для размещения встроенного JavaScript используют тег <script>. Его можно поместить в разделе <head> или перед закрывающим тегом </body>. Первый вариант подходит для функций, которые должны быть загружены заранее, второй – для кода, связанного с элементами страницы.
Пример вставки скрипта внизу документа:
<script>
function showMessage() {
alert("Пример встроенного скрипта");
}
</script>
Чтобы вызвать функцию, достаточно привязать её к событию элемента:
<button onclick="showMessage()">Нажми меня</button>
Если код небольшой и используется однократно, его уместно вставлять прямо в HTML. Для сложной логики рекомендуется подключать внешний файл через атрибут src, чтобы избежать перегрузки документа.
Использование атрибута onclick для запуска функции
Атрибут onclick позволяет привязать вызов JavaScript-функции к событию щелчка по элементу. Например, кнопке можно назначить функцию, которая выполняет проверку формы или изменяет содержимое страницы.
Простейший пример: <button onclick="showMessage()">Показать</button>. При нажатии вызывается функция showMessage(), определённая в блоке <script>.
Функция должна быть определена заранее, например: <script>function showMessage(){alert('Привет!');}</script>. Если такой функции нет, произойдёт ошибка ReferenceError.
Через onclick можно передавать аргументы: <button onclick="calculate(5,10)">Вычислить</button>. Вызов calculate() выполнится с указанными значениями.
Рекомендуется выносить обработчики в отдельные функции, а не помещать длинный код внутри атрибута, чтобы облегчить поддержку и отладку.
Привязка JavaScript к событию через атрибут onload
Атрибут onload используется для вызова функции после полной загрузки документа или отдельного элемента. Чаще всего он применяется в теге <body> или для загрузки внешних ресурсов, например скриптов и стилей.
Пример вызова функции при загрузке всей страницы:
<body onload="initPage()">
...
<script>
function initPage() {
console.log("Страница загружена");
}
</script>
</body>
Атрибут можно использовать и для элементов, которые требуют предварительной загрузки. Например, для тега <iframe>:
<iframe src="content.html" onload="resizeFrame(this)"></iframe>
<script>
function resizeFrame(frame) {
frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
}
</script>
Краткое сравнение вариантов использования:
| Элемент | Назначение onload | Особенности |
|---|---|---|
| <body> | Запуск скрипта после загрузки всего документа | Гарантируется готовность DOM и ресурсов |
| <iframe> | Обработка после загрузки встроенного документа | Доступ к контенту ограничен политикой безопасности |
| <link> | Определение момента загрузки стилей | Используется для динамического управления CSS |
Рекомендация: при работе с onload в <body> используйте функцию-обертку, чтобы код был изолирован и легко расширяем.
Подключение скрипта с атрибутами defer и async
Атрибут defer откладывает выполнение скрипта до полной загрузки и разбора HTML-документа. При этом код запускается строго в порядке подключения, что важно при зависимостях между файлами.
Атрибут async загружает и выполняет скрипт параллельно с обработкой HTML. Выполнение начинается сразу после загрузки файла, порядок не гарантируется, поэтому его используют для независимых модулей, например аналитики.
Пример с defer:
<script src="main.js" defer></script>Пример с async:
<script src="analytics.js" async></script>Для скриптов, влияющих на DOM, безопаснее применять defer. Для вспомогательных и статистических решений оптимален async.
Запуск JavaScript при отправке формы через onsubmit
Для выполнения JavaScript при отправке формы используется атрибут onsubmit. Он присваивается тегу <form> и позволяет вызвать функцию перед отправкой данных на сервер. Синтаксис простой: <form onsubmit="имяФункции()">.
Если функция возвращает false, отправка формы будет отменена. Это полезно для валидации данных на клиентской стороне. Например, проверка заполненности полей или соответствия формата email:
<form onsubmit="return validateForm()">
<input type="text" id="username">
<input type="submit" value="Отправить">
</form>
<script>
function validateForm() {
const user = document.getElementById('username').value;
if (user.trim() === '') {
alert('Поле не может быть пустым');
return false;
}
return true;
}
</script>
Атрибут onsubmit можно комбинировать с другими событиями формы, например oninput или onchange, чтобы проверка выполнялась динамически до момента отправки.
При работе с onsubmit важно учитывать асинхронные операции. Если в функции используется fetch или Promise, необходимо предотвратить стандартное действие формы с помощью event.preventDefault(), иначе запрос может не успеть выполниться.
<form id="myForm">
<input type="text" id="email">
<input type="submit" value="Отправить">
</form>
<script>
document.getElementById('myForm').onsubmit = function(event) {
event.preventDefault();
fetch('/submit', { method: 'POST', body: new FormData(this) })
.then(response => response.json())
.then(data => console.log(data));
};
</script>
Использование onsubmit обеспечивает точный контроль над отправкой формы, позволяет интегрировать проверки и асинхронные операции без перезагрузки страницы.
Вопрос-ответ:
Как подключить внешний JavaScript-файл в HTML?
Чтобы подключить внешний JavaScript-файл, используют тег . Этот тег обычно размещают перед закрывающим тегом