JavaScript в браузере — JS: DOM API

JavaScript подключается на страницы сайта через тег <script>. Причем двумя разными способами: инлайн и внешним скриптом.

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

Инлайн (in line) означает то, что JavaScript находится прямо внутри HTML. Такой способ подходит для самых простых сценариев, когда кода мало:

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

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

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

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

// Код минифицирован, чтобы занимать как можно меньше места (ускоряет загрузку)
(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');

Если прямо сейчас открыть исходный код этой страницы, внутри HTML вы увидите множество тегов <script> с подобными вставками. Большая часть этих вставок находится ближе к началу 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 Node.js. Для этого в меню браузера нужно найти DevTools (инструменты разработчика) и вызвать их. Тогда снизу откроется блок, внутри которого будет вкладка console (консоль). В этой вкладке можно выполнять любой JavaScript код как и в серверном REPL. Но это не все, консоль соединена с той страницей, на которой она находится. То есть отсюда мы можем управлять содержимым экрана. Обязательно доберитесь до нее, она нам понадобится для экспериментов во всех последующих уроках.

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

JavaScript в браузере и на сервере (через Node.js) это один и тот же язык. То есть Node.js это не отдельный язык программирования. Несмотря на это, у каждой из сред есть свои особенности, о которых нужно знать:

Модули

Большая часть встроенных модулей в Node.js недоступна в браузере. Поэтому их приходится заменять отдельными библиотеками. Некоторые модули доступны как глобальные объекты, например URL в браузере доступен по умолчанию.

Версии

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

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

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

Самостоятельная работа

Откройте консоль в своем браузере.
Попробуйте позапускать в ней код на выполнение, например обычные арифметические операции

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

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

Получить доступ

130

курсов

900

упражнений

2000+

часов теории

3200

тестов