Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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 объекты, через которые мы можем манипулировать происходящим на экране. Дальнейшие уроки, во многом, посвящены изучению этих объектов.


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

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

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

  1. Гайд "Зачем нужно собирать фронтенд"
  2. Урок по DevTools
  3. Курс "Протокол HTTP"
  4. Как увеличить скорость загрузки страницы со скриптами с помощью defer и async

Аватары экспертов Хекслета

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

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

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

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

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

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

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

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

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

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

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»