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 объекты, через которые мы можем манипулировать происходящим на экране. Дальнейшие уроки, во многом, посвящены изучению этих объектов.
Самостоятельная работа
- Откройте консоль в своем браузере.
- Попробуйте позапускать в ней код на выполнение, например обычные арифметические операции
Дополнительные материалы
- Гайд "Зачем нужно собирать фронтенд"
- Урок по DevTools
- Курс "Протокол HTTP"
- Как увеличить скорость загрузки страницы со скриптами с помощью defer и async
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Используйте Хекслет по-максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт