JavaScript в браузере: первая программа

JavaScript позволяет странице выполнять действия: выбирать данные, реагировать на изменение формы, создавать элементы и обращаться к серверу. Начнём с более простого результата: браузер загрузит отдельный файл программы и выведет сообщение. Так мы отделим правильное подключение от ошибок будущего каталога.

В этой серии будем создавать catalog-lab — маленький каталог из четырёх курсов. Сначала изучим язык на его данных, затем добавим карточки и форму. Базовый HTML уже должен быть знаком: вы умеете создать документ и открыть его в браузере. Устанавливать среду Node.js, библиотеку интерфейса или сборщик для первых уроков не требуется.

Документ и файл программы

Создайте папку catalog-lab, а в ней два файла: index.html и app.js. Следующий листинг представляет весь первоначальный документ. В нём пока нет интерактивных элементов; заголовок нужен, чтобы убедиться, что открыт нужный файл.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Учебный каталог</title>
  <script src="./app.js" defer></script>
</head>
<body>
  <main><h1>Учебный каталог</h1></main>
</body>
</html>

Путь ./app.js вычисляется относительно адреса HTML-документа. Обе точки здесь не нужны: одна точка обозначает текущую папку, две точки обозначали бы родительскую. Если файл находится рядом с документом, показанный путь соответствует именно этому размещению. Имя и регистр букв должны совпадать с реальным именем файла.

Атрибут defer используется у обычного внешнего скрипта. Он позволяет браузеру продолжить разбор документа во время загрузки программы; выполнение происходит после разбора HTML. Позже это будет важно, когда программа начнёт искать элементы страницы. Свойства загрузки и выполнения описаны в справочнике элемента script.

Теперь запишите весь первоначальный app.js:

console.log('Учебный каталог: программа подключена');
console.log('Курсов пока нет');

console — предоставленный браузером объект для диагностических сообщений. Через точку мы обращаемся к его операции log, а в круглых скобках передаём текст. Кавычки ограничивают строку и не входят в её содержание. Завершающая точка с запятой делает границу инструкции явной.

Откройте index.html, затем инструменты разработчика и вкладку Console. Название команды открытия зависит от браузера; обычно она находится в меню разработчика или контекстном меню страницы. Ожидаются две строки:

Учебный каталог: программа подключена
Курсов пока нет

Это именно ожидаемый результат программы. При подготовке серии учебные файлы не запускались. Ваша ручная проверка должна подтвердить и наличие сообщений, и отсутствие ошибок рядом с ними. Заголовок в документе сам по себе подтверждает только загрузку HTML: он может отображаться даже при неправильном пути к скрипту.

Выполнение и наблюдение

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

Измените вторую строку на сообщение Готовим четыре курса, сохраните app.js и обновите документ. Браузер не обязан заметить изменение исходного файла без обновления страницы. Редактор хранит текст программы на диске, а вкладка выполняет уже загруженную версию. Если остаётся прежнее сообщение, сначала проверьте сохранение файла и адрес открытого документа.

Для маленького учебного проекта открытие через file:// пока допустимо. Начиная с модулей и загрузки JSON будем показывать те же файлы через локальный HTTP-сервер: у этих механизмов есть ограничения, которые нельзя проверить простым двойным щелчком по документу. Не меняйте способ запуска раньше, чем понадобится новый механизм; сейчас задача — увидеть связь документа, пути и программы.

Консоль также позволяет вводить отдельные выражения. Попробуйте написать 2 + 3 и нажать Enter: ожидаемое значение равно пяти. Это удобно для знакомства с операцией, однако постоянные изменения проекта сохраняйте в app.js. Иначе после обновления вкладки исчезнет история введённого кода, а другой читатель не сможет восстановить ваши действия.

Ошибка подключения и ошибка программы

Рассмотрим две разные ситуации. Если переименовать файл в catalog.js, но оставить прежний src, программа не будет найдена. В инструментах появится сообщение о невозможности загрузить ресурс. Исправлять здесь синтаксис JavaScript бессмысленно: браузер ещё не получил нужный текст. Восстановите имя или измените путь, затем обновите страницу.

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

Не вставляйте в файл HTML-тег script: он нужен документу для подключения, но не является частью содержимого внешней программы. Аналогично, строки ожидаемого вывода из блока text не копируются в app.js. В учебных листингах язык блока помогает отличить программу от результата её работы.

Добавьте над первым вызовом комментарий // Сообщаем о подключении программы. Комментарий объясняет намерение человеку и не становится сообщением консоли. Лучше описывать в комментарии причину решения, чем повторять очевидное название операции. Когда появятся реальные вычисления, основное объяснение будем выражать именами переменных и функций.

Как понять, какой файл открыт

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

В сетевой панели инструментов можно увидеть запрос внешнего скрипта при HTTP-показе. Его успешная загрузка подтверждает получение файла, но ещё не означает отсутствие синтаксической ошибки. Наблюдайте цепочку последовательно: нужный документ, правильный путь, полученный ресурс, сообщения программы. Если включено сохранение истории консоли, прежние сообщения могут оставаться рядом с новыми; очистите журнал или ориентируйтесь на отметку обновления. Не принимайте старую строку за доказательство выполнения текущей версии.

Есть ещё разница между результатом команды в интерактивной консоли и сообщением вашей программы. Инструмент может показывать undefined после вызова console.log, потому что возвращаемое значение самой операции вывода не является переданным текстом. Это не третья строка, которую вы записали в файле, и не признак поломки. Смотрите отдельно сообщение и значение выражения, которое инструмент показывает при ручном вводе.

Для первого опыта храните подключение в одном месте. Если случайно добавить одинаковый внешний скрипт в начало и конец документа, обычная программа может выполниться дважды. Два одинаковых сообщения не означают два курса или автоматический повтор браузера. Сравните количество подключений с количеством ожидаемых запусков. Пока каждый запуск страницы должен давать один проход файла с двумя сообщениями.

Удалив временную диагностическую строку, вы не удаляете исходные данные будущего каталога: их пока ещё нет. На этом шаге программа сообщает только о собственной работе. Именно поэтому не стоит сразу вводить сеть, таймер и сложную разметку. Если базовая связь не подтверждена, дополнительный код сделает причину отсутствия результата менее заметной.

В результате у нас есть документ, внешний файл и понятный способ наблюдения. Оставьте эти два файла для следующего урока: вместо готовых фраз введём название курса и число уроков, затем посмотрим, как тип значения влияет на вычисление.

Оглавление курса