Основной способ добавить 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 и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт