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
. Об этом можно прочитать тут.
Существует и третий способ выполнения JavaScript кода на странице, который подходит для отладки и экспериментов. В браузере есть аналог REPL Node.js. Для этого в меню браузера нужно найти DevTools (инструменты разработчика) и вызвать их. Тогда снизу откроется блок, внутри которого будет вкладка console (консоль). В этой вкладке можно выполнять любой JavaScript код как и в серверном REPL. Но это не все, консоль соединена с той страницей, на которой она находится. То есть отсюда мы можем управлять содержимым экрана. Обязательно доберитесь до нее, она нам понадобится для экспериментов во всех последующих уроках.
JavaScript в браузере и на сервере (через Node.js) это один и тот же язык. То есть Node.js это не отдельный язык программирования. Несмотря на это, у каждой из сред есть свои особенности, о которых нужно знать:
Большая часть встроенных модулей в Node.js недоступна в браузере. Поэтому их приходится заменять отдельными библиотеками. Некоторые модули доступны как глобальные объекты, например URL
в браузере доступен по умолчанию.
Версия JavaScript на сервере определяется программистами, которые ставят конкретную версию Node.js. Во фронтенде контролировать версию JavaScript невозможно, так как мы не знаем в каком браузере загружается страница с нашим кодом. Вдруг это браузер, встроенный в телевизор или машину? Поэтому во фронтенде очень опасно использовать новейшие возможности языка. Они могут просто не поддерживаться браузерами и часть пользователей увидит ошибки вместо сайта. Как решается эта проблема - в одном из следующих уроков.
JavaScript в браузере должен уметь взаимодействовать с самим браузером и структурой страницы. Иначе мы бы не смогли сделать ничего полезного, что делают современные веб-приложения. Для этого браузер встраивает в JavaScript объекты, через которые мы можем манипулировать происходящим на экране. Дальнейшие уроки, во многом, посвящены изучению этих объектов.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт