Файлы .js: синтаксис, способы загрузки, частые ошибки

Раздел: Программирование -> Общие темы

Основы работы с JavaScript файлами

Файлы JavaScript (расширение .js) содержат программный код на одноименном языке. Для использования на веб-странице их подключают через тег <script>. Наиболее эффективным решением для размещения скриптов является использование внешнего файла с атрибутом defer. Этот способ позволяет браузеру загружать скрипт параллельно с HTML, выполнять его строго после завершения парсинга документа, сохраняя порядок. Такой подход не блокирует рендеринг и обеспечивает доступ к полному DOM.

<!DOCTYPE html>
<html>
<head>
  <script src="app.js" defer></script>
</head>
<body>
  <div>Контент</div>
</body>
</html>

Device js (определение устройств в javascript)

В данном примере файл app.js загрузится без ожидания, а выполнится только после того, как весь HTML будет проанализирован. Это особенно полезно для скриптов, которые манипулируют элементами страницы.

Типичные ошибки и проблемы:

Использование defer для скриптов, которые должны выполниться до построения DOM (например, для полифилов).
Порядок выполнения нескольких скриптов с defer сохраняется, но если один из них зависит от DOM, а другой нет, возможны логические ошибки.
Необходимо указывать корректный путь к файлу (относительный или абсолютный).

Как сделать подключение внутреннего скрипта без отдельного файла?

Код можно разместить непосредственно в HTML внутри тега <script>. Этот метод применяется для небольших фрагментов или для начальной инициализации.

<script>
  console.log("Внутренний скрипт");
  document.body.style.backgroundColor = "lightblue";
</script>

Javascript разработка (разработка на javascript)

Такой способ не требует дополнительных HTTP-запросов, но усложняет поддержку при увеличении объема кода. Часто внутренние скрипты помещают в конце body, чтобы гарантировать доступ к элементам.

Проблемы: если скрипт находится в head, он выполняется до загрузки body, и DOM может быть недоступен. Решение - обернуть код в DOMContentLoaded или переместить в конец body.

Как подключить внешний JS файл без атрибутов и что при этом происходит?

Простое указание src без дополнительных атрибутов приводит к синхронной загрузке и немедленному выполнению скрипта. Браузер останавливает парсинг HTML до полной загрузки и выполнения кода. Такой подход используют для скриптов, которые должны быть выполнены до начала рендеринга (например, полифилы для старых браузеров).

<head>
  <script src="polyfill.js"></script>
</head>

файл javascript (файлы javascript)

Этот вариант прост, но снижает скорость загрузки страницы. Его не рекомендуется использовать для крупных скриптов.

Проблемы: блокировка отображения контента, увеличение времени до интерактивности. Для решения применяют async или defer.

Как загрузить скрипт асинхронно с помощью атрибута async?

Атрибут async позволяет браузеру загружать скрипт в фоне, не блокируя HTML. Скрипт выполняется сразу после загрузки, независимо от состояния DOM. Подходит для независимых скриптов, таких как аналитика или реклама.

<script src="analytics.js" async></script>

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

Проблемы: нельзя полагаться на порядок выполнения. Если скрипт обращается к DOM до его готовности, возникнет ошибка. Решение - использовать defer или проверять DOMContentLoaded внутри скрипта.

Как использовать модули JavaScript (type="module") в браузере?

Современный способ организации кода с изоляцией областей видимости. Модули загружаются асинхронно (как с defer), поддерживают импорт и экспорт. Файлы могут иметь расширение .mjs или .js.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

Модули выполняются после парсинга документа, автоматически используют строгий режим. Позволяют избежать глобальных переменных.

Проблемы: модули требуют сервера (не работают при открытии HTML из файловой системы из-за CORS). Старые браузеры не поддерживают type="module", поэтому добавляют nomodule для резервного скрипта.

Как динамически загрузить JavaScript файл после определённого события?

Создание элемента script через DOM и добавление его в документ позволяет загружать код по требованию. Это часто используется для оптимизации загрузки (lazy loading) или для загрузки скриптов по взаимодействию пользователя.

const script = document.createElement('script');
script.src = 'lazy.js';
script.async = true;
document.head.appendChild(script);

При таком подходе можно контролировать момент загрузки и даже оборачивать её в Promise для асинхронной обработки.

Проблемы: необходимо следить за тем, чтобы скрипт не загружался повторно. Также возможны конфликты с уже существующими обработчиками.

Расширенные примеры использования JavaScript файлов

Пример 1: Модульная структура с импортом и экспортом

Создадим два файла: math.mjs и app.mjs. Модули позволяют чётко разделить функциональность.

Пример

// math.mjs
export function sum(a, b) { return a + b; }
export const PI = 3.14159;

// app.mjs
import { sum, PI } from './math.mjs';
console.log('Сумма 5 и 3:', sum(5, 3));
console.log('Число PI:', PI);

Сумма 5 и 3: 8
Число PI: 3.14159

Пример 2: Динамическая загрузка с обработкой ошибок и Promise

Утилита для загрузки скриптов с возможностью повторных попыток и таймаутами.

Пример

function loadScript(src, timeout = 10000) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(`Загружен: ${src}`);
    script.onerror = () => reject(new Error(`Ошибка загрузки ${src}`));
    setTimeout(() => reject(new Error(`Таймаут для ${src}`)), timeout);
    document.head.appendChild(script);
  });
}

loadScript('analytics.js')
  .then(msg => console.log(msg))
  .catch(err => console.error(err));

 (вывод зависит от наличия файла) 
При успехе: "Загружен: analytics.js"
При ошибке: Error: Ошибка загрузки analytics.js

Пример 3: Комбинация async и defer для разных типов скриптов

Для аналитики (независима) используем async, а для основного кода (требует DOM) - defer.

Пример

<!DOCTYPE html>
<html>
<head>
  <script src="analytics.js" async></script>
  <script src="main.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Порядок выполнения: аналитика может выполниться в любой момент (даже до загрузки body), а main.js - строго после полного HTML.

Пример 4: Использование атрибута nomodule для обратной совместимости

Для браузеров, не поддерживающих модули, загружаем классический скрипт.

Пример

<script type="module" src="modern.mjs"></script>
<script nomodule src="legacy.js"></script>

Современные браузеры загрузят modern.mjs, старые - legacy.js.

Пример 5: Загрузка нескольких скриптов с сохранением порядка через Promise.all

Используем динамическую загрузку и дожидаемся завершения всех.

Пример

function loadScriptAsync(src) {
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

Promise.all([loadScriptAsync('lib.js'), loadScriptAsync('app.js')])
  .then(() => console.log('Все скрипты загружены'))
  .catch(err => console.error('Ошибка:', err));

Все скрипты загружены

Пример 6: Проверка загрузки скрипта через событие load на window

Если скрипт не использует defer/async, можно дождаться полной загрузки страницы.

Пример

window.addEventListener('load', () => {
  // Здесь скрипты уже выполнены
  console.log('Страница полностью загружена, all scripts done');
});

Этот способ гарантирует, что все ресурсы, включая скрипты, загружены.

Файлы JavaScript - comments

файл javascript (javascript)