JS: DOM API

Теория: JavaScript в браузере

Полный доступ к материалам

Зарегистрируйтесь и получите доступ к этому и десяткам других курсов

В этом уроке мы изучим <script>. Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:

Инлайн-скриптинг
Внешний скриптинг

Инлайн-скрипты

Слово inline означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:

<html>
  <head>
  </head>
  <body>
    <!-- JavaScript внутри тега script -->
    <script>
      const greeting = 'hello, world!';
      // Он выводит приветствие на экран в модальном окне браузера
      alert(greeting);
    </script>

    <script>
      // На странице может быть любое количество этих тегов
    </script>
  </body>
</html>

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

Чаще всего, таким способом подключаются скрипты внешних сервисов, например, Google Analytics. Выглядит это так:

// Код минифицирован, чтобы занимать как можно меньше места
// Это ускоряет загрузку
(function (i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
    (i[r].q = i[r].q || []).push(arguments)
  }, i[r].l = 1 * new Date(); a = s.createElement(o),
  m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')

ga('create', 'UA-XXXXX-Y', 'auto')
ga('send', 'pageview')

Если вы откроете исходный код этой страницы, то увидите множество тегов <script> с аналогичными вставками внутри HTML. Большинство этих вставок находится ближе к началу HTML, поскольку для аналитических систем важно загружать их как можно раньше, чтобы отслеживать действия пользователя.

Внешние скрипты

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

<html>
  <head>
    <script src="/assets/application.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
  </head>
  <body>
  </body>
</html>

Обычно такой javascript-код проходит предварительную обработку системами сборки, например Webpack. Они оптимизируют код для браузеров, делают его меньше, удаляют ненужное и разбивают на файлы для ускорения загрузки. Подробнее об этом тут.

Порядок выполнения

По умолчанию тег <script> выполняется в том порядке, в котором он появляется в HTML. Это работает одинаково независимо от того, работаем ли мы с внешним файлом или инлайн-скриптом. Поэтому местоположение имеет большое значение. Чем дальше мы разместим скрипт, тем быстрее пользователь увидит страницу на экране. Оптимально, все скрипты должны находиться непосредственно перед </body>.

Порядок загрузки можно контролировать с помощью атрибутов defer и async. Об этом можно прочитать здесь.

REPL

Есть и третий способ запуска JavaScript-кода на странице, который отлично подходит для отладки и экспериментов.

В браузере существует аналог REPL — консоль. Чтобы воспользоваться ей, найдите DevTools в меню браузера и запустите его (для большинства браузеров также сработает нажатие клавиши F12). В нижней части экрана появится раздел с вкладкой Console. В этой вкладке вы можете выполнять любой код JavaScript, как и в серверном REPL.

Но это еще не все. Консоль связана со страницей, на которой она находится. Другими словами, отсюда мы можем управлять содержимым экрана. Обязательно обращайтесь к ней время от времени. Она понадобится нам для экспериментов в будущих уроках.

Кроме того, вы можете писать код и выполнять его в браузере, используя систему сниппетов. Для этого в инструмент��х разработчика нужно перейти на вкладку Sources и выбрать Snippets, после чего создать новый сниппет. Сниппеты позволяют писать код в более удобном формате, максимально приближенном к работе с JavaScript в редакторе кода.

Особенности браузерного JavaScript

Браузерный и серверный JavaScript — это один и тот же язык, который запускается в разных средах. Такими средами являются, например, Node.js и браузер. У каждой хост-среды есть свои особенности, о которых необходимо знать.

Вам наверняка известно, что в JavaScript не существует метода alert(), он доступен в браузере и если мы запустим код, который использует alert() в Node.js, то получим ошибку. Точно также в языке JavaScript не существует объекта console, но он предоставляется хост-средой. Сказанное верно и для setTimeout(), setInterval(), module, window или даже EventLoop. Это означает, что поведение console, setTimeout() и EventLoop() может отличаться, в зависимости от хост-среды, где запущен JavaScript. Можете самостоятельно посмотреть, что будет если мы вызовем следующий код в браузере и в Node.js:

setTimeout(() => this, 0)

Более того, если мы запустим наш JavaScript внутри другой хост-среды, например v8, то можем не обнаружить там объекта console, вместо этого для выведения кода на экран будет доступен метод print().

Объекты хост-среды

Спецификация ECMAScript описывает JavaScript как скриптовый язык, возможности которого дополняются хост-средами. Например, в JavaScript не существует средств ввода и вывода, и именно поэтому все объекты для взаимодействия с внешней средой, (например alert() в браузере, console в браузере и Node.js, fs в Node.js и другие) предоставлены самой хост-средой. Хотя объекты, предоставляемые браузером, могут называться точно так же как и аналогичные объекты Node.js, они отличаются в реализации. Фактически это разные объекты, которые иногда стараются быть похожими друг на друга. В том случае, если нужного нам объекта нет в конкретной хост-среде, мы можем заменить его библиотекой.

Версии

Версию JavaScript на сервере определяет программист, который ставит конкретную версию Node.js.

При фронтенд-разработке невозможно контролировать версию JavaScript, потому что мы не знаем, через какой браузер люди будут загружать страницу с нашим кодом. Что если это будет браузер, встроенный в телевизор или машину?

Вот поэтому нам не следует использовать новейшие возможности JavaScript в фронтенде. Эти функции могут не поддерживаться браузерами, поэтому некоторые пользователи вместо страницы увидят ошибки. Как решить эту проблему, мы узнаем в следующих уроках.

Браузер и контент

JavaScript в браузере должен уметь взаимодействовать с самим браузером и структурой страницы. Иначе мы не смогли бы делать те вещи, которые делают современные веб-приложения.

Для этого браузер встраивает в JavaScript объекты, которые мы можем использовать для того, чтобы манипулировать происходящим на экране. Большая часть этого курса будет посвящена изучению этих объектов.