Подключение JavaScript к HTML может быть выполнено несколькими способами. В этой статье мы рассмотрим основные из них, а также приведем примеры использования каждого способа.
Встроенный JavaScript
Встроенный JavaScript означает, что код написан прямо внутри HTML-документа. Для этого используется тег <script>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Встроенный JavaScript</title>
</head>
<body>
<h1>Пример встроенного JavaScript</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Привет, мир!";
</script>
</body>
</html>
Внешний JavaScript
Внешний JavaScript означает, что код хранится в отдельном файле и подключается к HTML-документу с помощью атрибута src тега <script>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Внешний JavaScript</title>
</head>
<body>
<h1>Пример внешнего JavaScript</h1>
<p id="demo"></p>
<script src="myscripts.js"></script>
</body>
</html>
В файле myscripts.js:
document.getElementById("demo").innerHTML = "Привет, мир!";
Подключение с помощью атрибута defer
Атрибут defer указывает браузеру, что скрипт должен быть загружен после того, как HTML-документ будет полностью загружен и обработан. Это может быть полезно для скриптов, которые зависят от полной загрузки DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript с атрибутом defer</title>
</head>
<body>
<h1>Пример использования атрибута defer</h1>
<p id="demo"></p>
<script src="myscripts.js" defer></script>
</body>
</html>
Подключение с помощью атрибута async
Атрибут async указывает браузеру, что скрипт может быть выполнен асинхронно, то есть во время загрузки HTML-документа. Это полезно для скриптов, которые не зависят от DOM и не блокируют отображение страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript с атрибутом async</title>
</head>
<body>
<h1>Пример использования атрибута async</h1>
<p id="demo"></p>
<script src="myscripts.js" async></script>
</body>
</html>
Теперь вы знаете основные способы подключения JavaScript к HTML. Экспериментируйте и выбирайте тот способ, который наиболее подходит для вашего проекта. Удачи в обучении! 😉
Добавить комментарий