В этом уроке мы изучим <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 объекты, которые мы можем использовать для того, чтобы манипулировать происходящим на экране. Большая часть этого курса будет посвящена изучению этих объектов.
Самостоятельная работа
- Откройте консоль в своем браузере
- Попробуйте запустить в ней код на выполнение — например, обычные арифметические операции
Дополнительные материалы
- Гайд "Зачем нужно собирать фронтенд"
- Урок по DevTools
- Курс "Протокол HTTP"
- Как увеличить скорость загрузки страницы со скриптами с помощью defer и async
- Как дебажить js в браузере
- Как использовать точки останова в своем коде на JavaScript
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
