Какими способами можно вставить JavaScript в документ?
JavaScript – это мощный язык программирования, который используется для добавления интерактивности на веб-страницы. Существует несколько способов вставки JavaScript в HTML-документ. Рассмотрим их более подробно.
1. Встроенный (inline) JavaScript
Это самый простой способ добавить JavaScript в HTML-документ. Вы можете написать JavaScript прямо в теге <script>
внутри HTML.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Встраивание JavaScript</title>
</head>
<body>
<h1>Пример встроенного JavaScript</h1>
<button onclick="alert('Привет, мир!')">Нажми меня</button>
<script>
console.log("Это встроенный JavaScript.");
</script>
</body>
</html>
2. Внешний JavaScript
Для лучшей организации кода рекомендуется использовать внешний файл JavaScript. Вы создаете файл с расширением .js и
подключаете его к HTML-документу с помощью тега <script>.
Файл script.js:
console.log("Это внешний JavaScript.");
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Внешний JavaScript</title>
<script src="script.js" defer></script> <!-- defer для отложенной загрузки -->
</head>
<body>
<h1>Пример внешнего JavaScript</h1>
</body>
</html>
3. JavaScript внутри атрибутов HTML
JavaScript также можно вставлять в атрибуты HTML-тегов. Это используется реже, но также является допустимым способом.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>JavaScript в атрибуте</title>
</head>
<body>
<h1>Пример JavaScript в атрибуте</h1>
<button onclick="console.log('Кнопка нажата!')">Нажми меня</button>
</body>
</html>
Заключение
На этом примере мы рассмотрели основные способы вставки JavaScript в HTML-документ. На практике обычно предпочтительнее
использовать внешний JavaScript, чтобы разделить логику и разметку, а также упростить поддержку кода. Важно помнить о
загрузке скриптов: атрибут defer позволяет загружать скрипты асинхронно, не блокируя отрисовку страницы, что особенно
важно для производительности.