Главная2 курс UX/UI4 занятие. Основы JS: подключение, типы данных1. Подключение JavaScript к HTML
4 занятие

1. Подключение JavaScript к HTML

Встроенный (inline) JavaScript

JavaScript код пишется непосредственно в HTML-файле внутри тега <script>.

В <head> или <body>:

<!DOCTYPE html>
<html>
<head>
    <title>Пример встроенного JS</title>
    <script>
        // Код выполнится при загрузке страницы
        console.log("Скрипт в head выполнен!");
    </script>
</head>
<body>
    <h1>Привет, мир!</h1>
    
    <script>
        // Код выполнится, когда браузер дойдет до этого места
        document.querySelector('h1').style.color = 'blue';
    </script>
</body>
</html>

Недостатки:

  • Загромождает HTML-код
  • Нельзя кэшировать отдельно
  • Сложно поддерживать

Подключение внешнего файла (рекомендуется)

Самый правильный и распространенный способ — вынос кода в отдельный файл с расширением .js.

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Внешний JS файл</title>
    <!-- Подключение в head -->
    <script src="script.js" defer></script>
</head>
<body>
    <h1 id="title">Заголовок</h1>
    <button onclick="changeText()">Нажми меня</button>
    
    <!-- Подключение в конце body (альтернативный способ) -->
    <!-- <script src="script.js"></script> -->
</body>
</html>

JavaScript (script.js):

// Весь JavaScript код в отдельном файле

function changeText() {
    document.getElementById('title').textContent = 'Текст изменен!';
    console.log('Функция вызвана!');
}

// Код, который выполнится при загрузке
console.log('Внешний скрипт загружен');

Атрибуты тега script

defer — отложенная загрузка (рекомендуется)

  • Скрипт загружается параллельно с HTML
  • Выполняется ПОСЛЕ полной загрузки DOM
  • Сохраняется порядок выполнения скриптов
<script src="script.js" defer></script>

async — асинхронная загрузка

  • Скрипт загружается параллельно с HTML
  • Выполняется СРАЗУ после загрузки (не ждет DOM)
  • Порядок выполнения не гарантирован
<script src="script.js" async></script>

Современные подходы и лучшие практики

Рекомендуемое расположение:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Лучшие практики</title>
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- Подключение JS с defer -->
    <script src="main.js" defer></script>
</head>
<body>
    <!-- Контент страницы -->
    
    <!-- Альтернатива: скрипты перед закрывающим </body> -->
    <!-- <script src="main.js"></script> -->
</body>
</html>

Несколько скриптов:

<!-- С defer - сохраняется порядок -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Выполнится: 1) library.js, 2) app.js -->

<!-- С async - порядок не гарантирован -->
<script src="widget1.js" async></script>
<script src="widget2.js" async></script>
<!-- Может выполниться widget2.js раньше widget1.js -->
Далее