01 Июн 2023
3 мин
1448

Как подключить JavaScript к HTML

Узнайте основные способы подключения JavaScript к HTML, включая встроенный, внешний код, атрибуты defer и async.

Содержание

Подключение 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. Экспериментируйте и выбирайте тот способ, который наиболее подходит для вашего проекта. Удачи в обучении! 😉

Содержание

Добавить комментарий

Определи профессию по рисунку