Подключение скриптов (script) [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Если HTML — это скелет страницы, а CSS — её одежда, то JavaScript — это её нервная система, которая отвечает за движение и интерактивность. Чтобы 'оживить' страницу, мы подключаем скрипты. Для этого используется тег `<script>`. Его можно разместить как в `<head>`, так и в `<body>`, и у каждого способа есть свои особенности. В этих упражнениях мы разберемся, как встраивать скрипты прямо в код, как подключать внешние JS-файлы и как управлять их загрузкой с помощью специальных атрибутов, таких как defer и async. Эти навыки — ключ к созданию динамичных и быстрых сайтов.

Список тем

Базовый тег для скриптов

id: 37896_script-tag-01

Чтобы добавить на страницу интерактивность, используется язык JavaScript. Для вставки кода или подключения файла с ним предназначен специальный тег. Вставьте его имя в пропуск, чтобы подключить файл `app.js`.

CSS

body {
  font-family: sans-serif;
  padding: 20px;
}

p {
  font-style: italic;
  color: #555;
}

                     <head>
  <title>Подключение скрипта</title>
  <input1 src="app.js"></input1>
</head>
<body>
  <p>Скрипт подключен, но визуальных изменений не будет.</p>
</body>

HTML

<head>
  <title>Подключение скрипта</title>
  <input1 src="app.js"></input1>
</head>
<body>
  <p>Скрипт подключен, но визуальных изменений не будет.</p>
</body>

Для вставки или подключения JavaScript-кода используется парный тег `<script>`. Даже при подключении внешнего файла рекомендуется использовать закрывающий тег `</script>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут для указания источника

id: 37896_script-src-02

Мы уже знаем тег для скриптов, но как указать, какой именно файл нужно загрузить? Для этого используется специальный атрибут, который задает источник (source) файла. Вставьте имя этого атрибута.

CSS

body {
  font-family: sans-serif;
  padding: 20px;
}

.note {
  background-color: #fefcea;
  border-left: 4px solid #ffd700;
  padding: 10px;
}

                     <head>
  <title>Источник скрипта</title>
  <script input1="main.js"></script>
</head>
<body>
  <p class="note">Этот файл скрипта будет загружен браузером.</p>
</body>

HTML

<head>
  <title>Источник скрипта</title>
  <script input1="main.js"></script>
</head>
<body>
  <p class="note">Этот файл скрипта будет загружен браузером.</p>
</body>

Атрибут, который указывает URL-адрес внешнего файла скрипта, называется `src` (сокращение от 'source').

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Встраиваемый (inline) скрипт

id: 37896_script-inline-03

Иногда небольшой скрипт проще написать прямо в HTML-документе. В этом случае атрибут `src` не нужен, а код помещается непосредственно между открывающим и закрывающим тегами. Добавьте закрывающий тег.

CSS

body { font-family: sans-serif; padding: 15px; }
button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

                     <body>
  <button onclick="sayHi()">Нажми на меня</button>

  <script>
    function sayHi() {
      alert('Привет от встроенного скрипта!');
    }
  <input1>
</body>

HTML

<body>
  <button onclick="sayHi()">Нажми на меня</button>

  <script>
    function sayHi() {
      alert('Привет от встроенного скрипта!');
    }
  <input1>
</body>

Тег `<script>` является парным. Если вы пишете код внутри него, а не подключаете внешний файл, то нужно обязательно его закрыть с помощью `</script>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Размещение скрипта для производительности

id: 37896_script-placement-body-04

Чтобы страница отображалась быстрее, скрипты, которые не критичны для первоначального рендеринга, часто размещают в самом конце тела документа. Вставьте тег для подключения файла `main.js` перед закрывающим тегом `</body>`.

CSS

body { font-family: sans-serif; background: #f4f4f4; padding: 20px; }
.content { padding: 20px; background: white; border: 1px solid #ccc; }

                     <body>
  <div class="content">
    <h1>Контент страницы</h1>
    <p>Этот текст виден сразу.</p>
  </div>

  <input1 src="main.js"></input1>
</body>

HTML

<body>
  <div class="content">
    <h1>Контент страницы</h1>
    <p>Этот текст виден сразу.</p>
  </div>

  <input1 src="main.js"></input1>
</body>

Для лучшей производительности тег `<script>` с атрибутом `src` часто ставят прямо перед закрывающим тегом `</body>`. Это позволяет сначала загрузить и отобразить весь HTML и CSS.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Отложенная загрузка с `defer`

id: 37896_script-defer-05

Представьте, что скрипт зависит от HTML-элементов на странице. Чтобы он гарантированно выполнился после полной загрузки и разбора HTML, используется специальный атрибут. Добавьте его.

CSS

body { font-family: sans-serif; padding: 20px; }

                     <head>
  <title>Атрибут defer</title>
  <script src="app.js" input1></script>
</head>
<body>
  <p>Скрипт `app.js` загрузится, но подождет, пока вся страница не будет готова к работе.</p>
</body>

HTML

<head>
  <title>Атрибут defer</title>
  <script src="app.js" input1></script>
</head>
<body>
  <p>Скрипт `app.js` загрузится, но подождет, пока вся страница не будет готова к работе.</p>
</body>

Используйте булев атрибут `defer`. Он указывает браузеру скачать скрипт параллельно с разбором HTML, но выполнить его только после того, как весь документ будет готов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37896_script-async-06

Если скрипт полностью независим (например, счетчик аналитики), его можно загружать и выполнять, не дожидаясь остальной части страницы. Для этого есть другой атрибут. Укажите его.

CSS

body { font-family: sans-serif; padding: 20px; }

                     <head>
  <title>Атрибут async</title>
  <script src="analytics.js" input1></script>
</head>
<body>
  <p>Скрипт `analytics.js` загрузится и выполнится как можно скорее, не мешая странице.</p>
</body>

HTML

<head>
  <title>Атрибут async</title>
  <script src="analytics.js" input1></script>
</head>
<body>
  <p>Скрипт `analytics.js` загрузится и выполнится как можно скорее, не мешая странице.</p>
</body>

Используйте булев атрибут `async`. Он позволяет браузеру скачивать и выполнять скрипт асинхронно, как только он будет загружен, не блокируя при этом отрисовку остальной страницы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подключение JavaScript-модуля

id: 37896_script-module-07

Современный JavaScript активно использует модульную систему. Чтобы браузер понял, что подключаемый файл является модулем, а не обычным скриптом, нужно указать правильный `type`. Заполните имя атрибута и его значение.

CSS

body { font-family: sans-serif; padding: 20px; }

                     <body>
  <h1>Модульный JavaScript</h1>
  
  <script input1="input2" src="app.js"></script>
</body>

HTML

<body>
  <h1>Модульный JavaScript</h1>
  
  <script input1="input2" src="app.js"></script>
</body>

Для подключения ES-модулей используется атрибут `type` со значением `module`. Полная конструкция выглядит как `type="module"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку