Хранение данных на клиенте
Цель: основы работы с объектами, функция-конструктор, ключевое слово this, классы, создание экземпляра класса.
Содержание и порядок выполнения лабораторной работы:
- Изучить материал в источниках.
- Создать от ветки main ветку lab8.
- Создать документ html с H1 заголовком «ФИО - Лабораторная работа №8».
- Решить предложенные задачи используя JS.
- Подключить решения к созданной странице.
- Элементы интерфейса для задач разместить в отдельных секциях с соответствующими подзаголовками.
- Помните о валидности HTML и доступности!
- Провести ручное тестирование в браузере.
- Отформатировать документы.
- Убедиться, что нет замечаний от ESLint.
- Зафиксировать результаты работы с помощью системы контроля версий git и отправить ветку lab8 в репозиторий на github.
- Загрузить проект на Render через ручную загрузку (manual deploy).
Требования к JS:
- HTML код валиден.
- Отсутствуют ошибки ESLint в панели Problems в VS Code.
- Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
Результаты выполнения лабораторной работы:
Результаты работы проверены наставником.
Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.
Источники
- Основы объектов в JavaScript
- this
- Прототипы объектов
- Классы
- Конструктор
- Проверка класса: “instanceof”
- Чистый код
Вопросы для защиты
- Что такое функция конструктор?
- Как создать объект используя функцию конструктор?
- Как работает this?
- Какая есть особенность у стрелочной функции с this?
- Для чего применяются геттеры и сеттеры?
- Методы классов. Статически, приватные.
Задачи
Версионирование
Вам необходимо реализовать функцию-конструктор VersionManager. Она должна принимать необязательный параметр, представляющий начальную версию в формате MAJOR.MINOR.PATCH (например ‘1.2.4’). Если три составляющие не целые числа, то выбросите исключение “Некорректный формат версии!”. Если исходная версия не указана или представляет собой пустую строку, по умолчанию используйте “0.0.1”.
Объект должен поддерживать следующие методы, все из которых должны быть цепочечными (кроме release):
- major() - увеличить значение MAJOR на 1, установить значение MINOR и PATCH на 0
- minor() - увеличить значение MINOR на 1, установить значение PATCH на 0
- patch() - увеличить значение PATCH на 1
- rollback() - вернуть значения MAJOR, MINOR и PATCH к их значениям до предыдущего вызова major/minor/patch, или выдает исключение с сообщением “Невозможно выполнить откат!”, если нет версии, к которой можно выполнить откат.
- release() - возвращает строку в формате MAJOR.MINOR.PATCH.
На странице в интерфейс добавить поле для ввода версии и кнопку создания версии. При создании версии поле очищается, значение выводится текстом и появляются четыре кнопки для каждого метода. Нажатие на кнопку меняет значение, отображаемое текстом.
Прямоугольник и квадрат
Реализуйте класс Rectangle со свойствами ширины и высоты. Добавьте два метода для вычисления площади и периметра прямоугольника. Создайте экземпляр класса Rectangle и вычислите его площадь и периметр.
Напишите класс Square, который наследуется от Rectangle, но у конструктора только один параметр - длина стороны.
Температура
В интерфейсе создать поля для ввода двух значений температуры в градусах Кельвина. Рядом в виде текста указывается введенная температура с округлением до двух знаков после запятой и с учетом выбранных единиц измерения. Добавить радиокнопки для выбора градусов по Кельвину, Цельсию или Фаренгейту. Если пользователь выбрал другой вариант, то требуется обновить отображение значений. Также добавить радиокнопки для выбора варианта действия: сложения или вычитания. И кнопка для выполнения данной операции.
Реализовать класс температуры (Temperature), который принимает значение температуры в градусах Кельвина. Если температура ниже -273.16 К или выше 1.41e32 K, то выбросить исключение о неверном значении. Изменение значения температуры реализовать через сеттер, в котором проводится валидация указанного значения. Реализовать методы для конвертации температуры в градусы Цельсия и Фаренгейта с округлением до двух знаков и методы возвращают число. Реализовать метод toString, который возвращает строку с указанием температуры и К. Реализовать два статически метода для сложения и вычитания, которые принимают два экземпляра класса температуры и проверяют, что они относятся к этому классу и возвращают новый экземпляр класса температуры по вычисленному значению.