JavaScript в браузере — JS: DOM API

Основной способ добавить JavaScript код на страницу — это использование тега <script>.

Инлайн скрипты

Подобных тегов может быть любое количество в любых местах внутри <body> или <head>. Правда, от места расположения зависят возможности, но этот вопрос мы рассмотрим позже.

<html>
  <body>
    <script>
      const greeting = 'hello, world!';
      // Выводит приветствие на экран в модальном окне браузера
      alert(greeting);
    </script>
  </body>
</html>

Самый простой способ начать взаимодействовать с браузером — вызвать функцию alert(). Хотя в реальном коде она почти не используется, но её очень любят создатели курсов, в которых обучение программированию ведётся через браузер. Нажмите , чтобы увидеть результат выполнения этой функции.

Кроме alert(), для взаимодействия с пользователем можно использовать функции и .

Все эти функции присутствуют только в браузерах и недоступны в серверных версиях JavaScript. Это первый пример, когда мы видим как браузер "расширяет" JavaScript, добавляя туда новые возможности. Но не возможности самого языка, а возможности по взаимодействию со средой. Язык остаётся тем же.

Внешние скрипты

Инлайн-скриптинг, как правило, используется для небольших кусков кода, или для вызова кода, загруженного из внешних скриптов. Загружаются внешние скрипты следующим образом:

<body>
<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, значит должен быть способ это сделать и без взаимодействия с сайтами. Такой способ действительно существует. Современные браузеры неплохо оснащены функциями не только для конечных пользователей, но и для разработчиков. В каждом браузере можно найти (покопавшись в настройках) панель, называемую DevTools. Эта утилита важна в жизни каждого веб-разработчика.

Модули, библиотеки, кроссбраузерность

Один существенный недостаток JavaScript в браузере в том, что реализация js в разных браузерах отличается и иногда весьма существенно. Более того, даже разные версии одного и того же браузера могут отличаться катастрофически. Причём эту проблему решить невозможно, она является следствием самой природы фронтенда. У каждого пользователя будет стоять тот браузер, который ему нравится, той версии, до которой он не забыл обновиться. Но мы можем пользоваться всеми (почти) современными фишками JavaScript в любых браузерах благодаря таким инструментам, как транспайлеры и сборщики.

Самыми популярными инструментами для сборки в настоящее время является Babel и Webpack.

Безопасность

Во всех браузерах поддерживается механизм под названием Cookies, который мы изучали в курсе по протоколу HTTP. Этот механизм играет центральную роль в реализации такой вещи, как аутентификация (вход на сайт). После того, как сайт опознал пользователя, он выставляет специальную куку и на основе неё определяет, залогинен пользователь или нет.

JavaScript позволяет обращаться к кукам в браузере. Это автоматически означает, что если злоумышленнику удастся разместить произвольный код на странице сайта, то он сможет прочитать куку с данными аутентификации и передать её злоумышленнику. Так легко и беззаботно уводятся сессии и пользователи внезапно оказываются без своего аккаунта. Ни антивирус, ни фаервол в такой ситуации ничем помочь не смогут.

Внедрение произвольного кода на сайт называется XSS (Cross-Site Scripting) и является популярным способом атаки, кроме него так же распространен CSRF (Cross-Site Request Forgery).

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

Откройте консоль в своем браузере.
Попробуйте позапускать в ней код на выполнение, например обычные арифметические операции
Поиграйтесь с вызовами функции alert(), confirm() и prompt().

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

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

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

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

Нашли опечатку или неточность?

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

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

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

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

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

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ

120

курсов

900

упражнения

2000+

часов теории

3200

тестов