Продолжим серию статей "Браузер. Сайты. Автоматизация" и сегодня поговорим про кнопки, работу с ними. Первую часть про автоматизацию работы с сайтами Вы можете найти в соответствующей подборке или по ссылке.
Каждый из нас ежедневно нажимает сотни, даже тысячи кнопок на различных сайтах. «Оплатить», «Войти», «Зарегистрироваться» или «Забронировать», например.
Со стороны кажется, что всё происходит само собой: нажал кнопку — получил результат. Но на самом деле за этим простым действием скрывается гораздо более сложный процесс. Давайте разберемся, как это работает на самом деле.
Кнопка на сайте — это элемент интерфейса, с помощью которого пользователь подаёт сигнал системе. Она лишь сообщает браузеру: пользователь совершил определенное действие.
Кнопка на HTML
HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки текста. Он нужен, чтобы размещать на
веб-странице элементы: текст, картинки, таблицы и видео.
На HTML кнопка является стандартным тегом, то есть ключевым словом языка. Самый простой вариант создания кнопки выглядит так:
При написании такой строчки кода в браузере отобразится кнопка с текстом «Нажми меня». Так как всё, что находится между открывающим и закрывающим тегом, браузер воспринимает как текст (или содержимое) кнопки. Она будет кликабельной, видимой и доступной для взаимодействия, но не выполнит никаких действий, пока для неё не будет описана логика.
Как сайт понимает, что кнопку нажали?
Логика действий описывается отдельно, обычно с помощью языка JavaScrpit.
JavaScript – это язык программирования, который используется для создания интерактивных веб-страниц. Функции JavaScript могут улучшить удобство взаимодействия пользователя с веб-сайтом.
Сначала необходимо найти кнопку на странице. Так код получает доступ к нужному элементу и может с ним взаимодействовать. Далее мы указываем, на какое действие необходимо реагировать.
Когда пользователь нажимает кнопку:
1. браузер фиксирует клик,
2. понимает, что на это событие есть определенная цепочка действий,
3. запускает описанный сценарий
На этом этапе кнопка выполнила все поставленные задачи.
Жизнь после нажатия кнопки
После того как пользователь нажал кнопку и браузер запустил описанный сценарий, система должна как-то отреагировать. Именно в этот момент пользователь видит результат и делает вывод: «кнопка сработала» или «что-то пошло не так».
На самом деле, сценарий, запущенный нажатием кнопки, может закончиться по-разному. В одном случае система возвращает успешный результат, то есть
появляется сообщение, меняется содержимое страницы, открывается новое окно или пользователь переходит на другой экран. В другом случае система сообщает об ошибке: данные не прошли проверку корректности, действие недоступно или обозначенные условия не были выполнены.
Иногда пользователь вообще не видит никакого явного результата. Например, кнопка может сохранить данные в фоне или отправить запрос, не меняя интерфейс сразу. В таком случае создаётся ощущение, что ничего не произошло, хотя система уже обработала действие.
Итак, алгоритм невидимой части работы сайта выглядит следующим образом:
Пользователь → Браузер → Сервер → Ответ → Результат
Именно на этапе между нажатием кнопки и результатом чаще всего возникают проблемы и недопонимание. Пользователь ожидает одно, а система работает по своим правилам и ограничениям. В таких ситуациях мы начинаем с анализа логики обработки запросов и состояния системы. Как мы подходим к подобным задачам, обязательно посмотрите на нашем сайте.
Почему пользователь видит только результат?
С точки зрения пользователя всё выглядит просто: нажал кнопку → получил желаемое.
Интерфейс намеренно скрывает проверку данных и состояния системы, выполнение логики. Пользователь не должен видеть внутреннюю работу системы, ему важен только итог. Поэтому сайты создают иллюзию мгновенного действия, даже если на самом деле происходит сложная последовательность проверок.
Понимание устройства работы процессов, описанных в статье, позволяет иначе смотреть на работу сайтов и цифровых сервисов как на систему процессов, скрытых от пользователя.
Если вам интересно глубже разбираться в том, как на самом деле работают сайты и цифровые системы мы делимся своим подходом и кейсами в нашем Telegram-канале.