Подключение JavaScript к HTML может быть выполнено несколькими способами. В этой статье мы рассмотрим основные из них, а также приведем примеры использования каждого способа.
Разработка на Java — востребованное направление, такие специалисты будут нужны на рынке еще долго. На курсе «Java-разработчик» от Skypro освоить профессию можно с нуля за 11 месяцев, даже если вы гуманитарий и ничего не знаете об IT. Программа составлена от простого к сложному и адаптирована для новичков. Преподаватели — практикующие специалисты из крупных компаний: «Сбер», «Самокат» и других.
Встроенный 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>
Освойте Java на курсе онлайн-университета Skypro. Учебе нужно будет уделять всего 10 часов в неделю: сможете совмещать с работой и личными делами. Вас ждут 440 часов теории и практики, мастер-классы с реальными рабочими задачами, опытные преподаватели, кураторы и наставники. За время обучения сделаете два полноценных проекта для портфолио и множество домашних заданий, чтобы отработать навыки.
Подключение с помощью атрибута 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. Экспериментируйте и выбирайте тот способ, который наиболее подходит для вашего проекта. Удачи в обучении! 😉
Добавить комментарий