Элементы интерфейса пользователя

interface

Ежедневно мы используем графические интерфейсы, предоставляемые операционной системой, браузером и всевозможными приложениями. С основными элементами графических интерфейсов интуитивно знаком каждый пользователь.

Элементы интерфейса пользователя — это всё, что мы видим и с чем можем взаимодействовать на экране.


Элементы интерфейса для ввода данных

Элемент Пример
Переключатель (radio button)
Чек-бокс (checkbox)
Поле для ввода (input field)
Область для ввода многострочного текста (textarea)
Выпадающий список (dropdown list)
Кнопка (button)

Раздел Elements в DevTools

Ранне мы уже пользовались разделом Network для просмотра подробностей запроса-ответа. На этот раз познакомимся с разделом Elements.

Выбрав раздел Elements мы можем увидеть HTML код страницы. Если нажать на стрелочку слева от Elements и навести курсор на любой участок на странице, то можно увидеть фактический элемент, скрывающийся за привычным нам визуальным отображением.

devtools-elements

Задача

Калькулятор, как и любой другой объект на странице, описан HTML кодом и состоит из графических элементов, названия которых можно посмотреть через DevTools.

Требования:

  • пользователь взаимодействует с калькулятором посредством нажатия кнопок
  • при нажатии пользователем на кнопку, поле ввода должно заполняться изображенным на кнопке символом за исключением кнопок
    C - сброс ввода и = - выполнение операции
  • калькулятор должен выполнять базовые операции: сложение, вычитание, деление и умножение