1 added
32 removed
Original
2026-01-01
Modified
2026-02-26
1
-
<p>В этом уроке мы изучим <script>. Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:</p>
1
+
error code: 502
2
-
<ul><li>Инлайн-скриптинг</li>
3
-
<li>Внешний скриптинг</li>
4
-
</ul><h2>Инлайн-скрипты</h2>
5
-
<p>Слово<em>inline</em>означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:</p>
6
-
<p>В примере используется функция alert(). Она выводит на экран модальное окно с указанным текстом. В реальном коде alert() почти не используется, но ее иногда используют для обучения. Нажмите , чтобы увидеть результат выполнения этой функции.</p>
7
-
<p>Чаще всего, таким способом подключаются скрипты внешних сервисов, например,<a>Google Analytics</a>. Выглядит это так:</p>
8
-
<p>Если вы откроете исходный код этой страницы, то увидите множество тегов <script> с аналогичными вставками внутри HTML. Большинство этих вставок находится ближе к началу HTML, поскольку для аналитических систем важно загружать их как можно раньше, чтобы отслеживать действия пользователя.</p>
9
-
<h2>Внешние скрипты</h2>
10
-
<p>Во фронтенд-приложениях инлайн-скриптинг не используется. Весь код грузится через подключаемые файлы. Загружаются внешние скрипты следующим образом:</p>
11
-
<p>Обычно такой javascript-код проходит предварительную обработку системами сборки, например Webpack. Они оптимизируют код для браузеров, делают его меньше, удаляют ненужное и разбивают на файлы для ускорения загрузки. Подробнее об этом<a>тут</a>.</p>
12
-
<h2>Порядок выполнения</h2>
13
-
<p>По умолчанию тег <script> выполняется в том порядке, в котором он появляется в HTML. Это работает одинаково независимо от того, работаем ли мы с внешним файлом или инлайн-скриптом. Поэтому местоположение имеет большое значение. Чем дальше мы разместим скрипт, тем быстрее пользователь увидит страницу на экране. Оптимально, все скрипты должны находиться непосредственно перед </body>.</p>
14
-
<p>Порядок загрузки можно контролировать с помощью атрибутов defer и async. Об этом можно прочитать<a>здесь</a>.</p>
15
-
<h2>REPL</h2>
16
-
<p>Есть и третий способ запуска JavaScript-кода на странице, который отлично подходит для отладки и экспериментов.</p>
17
-
<p>В браузере существует аналог REPL - консоль. Чтобы воспользоваться ей, найдите DevTools в меню браузера и запустите его (для большинства браузеров также сработает нажатие клавиши<strong>F12</strong>). В нижней части экрана появится раздел с вкладкой Console. В этой вкладке вы можете выполнять любой код JavaScript, как и в серверном REPL.</p>
18
-
<p>Но это еще не все. Консоль связана со страницей, на которой она находится. Другими словами, отсюда мы можем управлять содержимым экрана. Обязательно обращайтесь к ней время от времени. Она понадобится нам для экспериментов в будущих уроках.</p>
19
-
<p>Кроме того, вы можете писать код и выполнять его в браузере, используя систему сниппетов. Для этого в инструментах разработчика нужно перейти на вкладку<strong>Sources</strong>и выбрать<strong>Snippets</strong>, после чего создать новый сниппет. Сниппеты позволяют писать код в более удобном формате, максимально приближенном к работе с JavaScript в редакторе кода.</p>
20
-
<h2>Особенности браузерного JavaScript</h2>
21
-
<p>Браузерный и серверный JavaScript - это один и тот же язык, который запускается в разных средах. Такими средами являются, например,<strong>Node.js</strong>и браузер. У каждой хост-среды есть свои особенности, о которых необходимо знать.</p>
22
-
<p>Вам наверняка известно, что в JavaScript не существует метода alert(), он доступен в браузере и если мы запустим код, который использует alert() в Node.js, то получим ошибку. Точно также в языке JavaScript не существует объекта console, но он предоставляется хост-средой. Сказанное верно и для setTimeout(), setInterval(), module, window или даже EventLoop. Это означает, что поведение console, setTimeout() и EventLoop() может отличаться, в зависимости от хост-среды, где запущен JavaScript. Можете самостоятельно посмотреть, что будет если мы вызовем следующий код в браузере и в Node.js:</p>
23
-
<p>Более того, если мы запустим наш JavaScript внутри другой хост-среды, например<strong>v8</strong>, то можем не обнаружить там объекта console, вместо этого для выведения кода на экран будет доступен метод print().</p>
24
-
<h3>Объекты хост-среды</h3>
25
-
<p>Спецификация ECMAScript описывает JavaScript как скриптовый язык, возможности которого дополняются хост-средами. Например, в JavaScript не существует средств ввода и вывода, и именно поэтому все объекты для взаимодействия с внешней средой, (например alert() в браузере, console в браузере и Node.js, fs в Node.js и другие) предоставлены самой хост-средой. Хотя объекты, предоставляемые браузером, могут называться точно так же как и аналогичные объекты Node.js, они отличаются в реализации. Фактически это разные объекты, которые иногда стараются быть похожими друг на друга. В том случае, если нужного нам объекта нет в конкретной хост-среде, мы можем заменить его библиотекой.</p>
26
-
<h3>Версии</h3>
27
-
<p>Версию JavaScript на сервере определяет программист, который ставит конкретную версию Node.js.</p>
28
-
<p>При фронтенд-разработке невозможно контролировать версию JavaScript, потому что мы не знаем, через какой браузер люди будут загружать страницу с нашим кодом. Что если это будет браузер, встроенный в телевизор или машину?</p>
29
-
<p>Вот поэтому нам не следует использовать новейшие возможности JavaScript в фронтенде. Эти функции могут не поддерживаться браузерами, поэтому некоторые пользователи вместо страницы увидят ошибки. Как решить эту проблему, мы узнаем в следующих уроках.</p>
30
-
<h3>Браузер и контент</h3>
31
-
<p>JavaScript в браузере должен уметь взаимодействовать с самим браузером и структурой страницы. Иначе мы не смогли бы делать те вещи, которые делают современные веб-приложения.</p>
32
-
<p>Для этого браузер встраивает в JavaScript объекты, которые мы можем использовать для того, чтобы манипулировать происходящим на экране. Большая часть этого курса будет посвящена изучению этих объектов.</p>