Практическая работа №6

Цель работы

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

Основные теоретические положения

1. Создание объекта

Объект хранит связанные данные в виде свойств.

const product = {
    id: 1,
    name: "Клавиатура",
    price: 3500,
    quantity: 7,
};

Получить значение свойства можно через точку:

console.log(product.name);
console.log(product.price);

или через квадратные скобки:

console.log(product["name"]);

---

2. Изменение и добавление свойств

Существующее свойство можно изменить:

product.quantity = 5;

Новое свойство можно добавить:

product.category = "Периферия";

Удалить свойство:

delete product.category;

---

3. Вложенные объекты

Свойством объекта может быть другой объект.

const server = {
    name: "web-01",
    online: true,

    metrics: {
        cpu: 42,
        memory: 68,
    },
};

Обращение к вложенному свойству:

console.log(server.metrics.cpu);

Изменение:

server.metrics.cpu = 75;

---

4. Массив объектов

Несколько однотипных объектов удобно хранить в массиве.

const products = [
    {
        id: 1,
        name: "Клавиатура",
        price: 3500,
        quantity: 7,
    },
    {
        id: 2,
        name: "Мышь",
        price: 1800,
        quantity: 3,
    },
];

Перебор:

for (const product of products) {
    console.log(product.name);
}

---

5. Поиск объекта в массиве

Поиск можно реализовать уже известным циклом.

function findProductById(products, id) {
    for (const product of products) {
        if (product.id === id) {
            return product;
        }
    }

    return null;
}

Использование:

const product = findProductById(products, 2);

if (product === null) {
    console.log("Товар не найден");
} else {
    console.log(product.name);
}

---

6. Добавление нового объекта в массив

Новый объект можно создать из пользовательских данных:

const name = prompt("Название товара:");
const price = Number(prompt("Цена товара:"));
const quantity = Number(prompt("Количество:"));

const product = {
    id: 3,
    name: name,
    price: price,
    quantity: quantity,
};

products.push(product);

В сокращённой форме:

const product = {
    id,
    name,
    price,
    quantity,
};

если переменные имеют такие же имена, как свойства.

---

7. Изменение состояния объекта

После поиска объекта можно изменить его свойства.

function changeQuantity(products, id, amount) {
    const product = findProductById(products, id);

    if (product === null) {
        return false;
    }

    if (product.quantity + amount < 0) {
        return false;
    }

    product.quantity += amount;

    return true;
}

Такой подход позволяет отделить правила изменения данных от пользовательского интерфейса.

---

8. Обработка массива объектов

Например, рассчитаем общую стоимость складских остатков:

function calculateInventoryValue(products) {
    let total = 0;

    for (const product of products) {
        total += product.price * product.quantity;
    }

    return total;
}

Можно также выполнять выборку по условию:

function showLowStock(products, limit) {
    for (const product of products) {
        if (product.quantity <= limit) {
            console.log(product.name);
        }
    }
}

---

9. Интерактивное меню

Для небольшой программы можно организовать меню:

while (true) {
    const action = prompt(`
1 — показать данные
2 — найти запись
3 — добавить запись
4 — изменить запись
0 — выход
`);

    if (action === null || action === "0") {
        break;
    }

    if (action === "1") {
        // ...
    } else if (action === "2") {
        // ...
    } else {
        alert("Неизвестная команда");
    }
}

Меню и бизнес-логика

Не следует помещать всю программу внутрь одного большого while.

Меню должно только получать команду пользователя и вызывать отдельные функции:

showProducts();
findProduct();
addProduct();
changeQuantity();

Основная логика должна находиться внутри функций.

---

10. Разделение данных, логики и взаимодействия с пользователем

Для этой работы используйте структуру:

Исходные данные
↓
Функции поиска
↓
Функции изменения
↓
Функции расчётов и статистики
↓
Интерактивное меню

Это подготовит программу к дальнейшему переходу к объектно-ориентированной и модульной организации кода.

Задания для выполнения

Часть 1. Исследование объектов и массивов объектов

Выполните задания 1–3 полностью. Они используются как общая подготовка перед комплексным индивидуальным вариантом.

---

Задание 1.1. Работа с объектом

Создайте объект:

const user = {
    id: 1,
    name: "Алексей",
    age: 20,
    active: true,

    contacts: {
        email: "alex@example.com",
        phone: "+79990000000",
    },
};

Выполните:

1. выведите имя пользователя;
2. выведите email;
3. измените возраст на 21;
4. измените телефон;
5. добавьте свойство role со значением "user";
6. выведите получившийся объект через console.log().

Ответьте:

1. чем user.name отличается от user["name"];
2. как обратиться к user.contacts.email;
3. что произойдёт при обращении к несуществующему свойству.

---

Задание 1.2. Массив объектов

Создайте:

const products = [
    { id: 1, name: "Клавиатура", price: 3500, quantity: 7 },
    { id: 2, name: "Мышь", price: 1800, quantity: 3 },
    { id: 3, name: "SSD 1 TB", price: 7200, quantity: 0 },
    { id: 4, name: "Монитор", price: 18500, quantity: 2 },
];

С помощью цикла:

1. выведите название и стоимость каждого товара;
2. определите количество товаров с нулевым остатком;
3. определите количество товаров дороже 5000 ₽;
4. рассчитайте общую стоимость всех товаров на складе с учётом количества.

---

Задание 1.3. Поиск и изменение объекта

Реализуйте:

findProductById(products, id)

Затем через prompt() запросите идентификатор товара.

Если товар найден:

Товар: Мышь
Цена: 1800 руб.
Остаток: 3

Если нет:

Товар не найден

После этого запросите новое количество и измените свойство quantity.

Не допускайте отрицательный остаток.

Часть 2. Комплексное индивидуальное задание

Порядок выполнения варианта

Выполните один комплексный вариант, назначенный преподавателем.

Номер варианта соответствует порядковому номеру студента в списке группы. Если студентов больше десяти, варианты повторяются по кругу.

Каждая работа должна представлять собой небольшое интерактивное приложение, а не набор несвязанных фрагментов кода.

Обязательные требования для всех вариантов:

• хранить основные данные в массиве объектов;
• использовать хотя бы один вложенный объект или вложенный массив;
• реализовать не менее пяти отдельных функций;
• реализовать поиск объекта;
• реализовать добавление новой записи;
• реализовать изменение состояния или свойств существующего объекта;
• выполнить хотя бы один расчёт или статистическую обработку;
• использовать prompt() для пользовательского ввода;
• использовать alert() для сообщений о результатах операций и ошибках;
• использовать console.log() для вывода полного состояния данных;
• создать небольшое меню минимум из четырёх команд и команды выхода;
• проверять некорректные данные;
• не использовать class, прототипы, DOM, localStorage, модули и другие темы следующих практических работ.

---

Вариант 1. Система складского инвентаря

Исходные данные:

const inventory = [
    {
        id: 1,
        name: "Клавиатура",
        category: "Периферия",
        price: 3500,
        quantity: 7,
    },
    {
        id: 2,
        name: "Мышь",
        category: "Периферия",
        price: 1800,
        quantity: 3,
    },
    {
        id: 3,
        name: "SSD 1 TB",
        category: "Комплектующие",
        price: 7200,
        quantity: 0,
    },
];

Реализуйте функции:

showInventory()
findProductById()
addProduct()
changeQuantity()
showLowStock()
calculateInventoryValue()

Программа должна позволять:

1. просмотреть все товары;
2. найти товар по id;
3. добавить новый товар;
4. выполнить поступление или списание товара;
5. показать товары с остатком не более 3;
6. вывести общую стоимость складских остатков.

Списание, приводящее к отрицательному остатку, запрещено.

---

Вариант 2. RPG-персонаж и монстры

Исходный персонаж:

const player = {
    name: "Arin",
    level: 1,
    experience: 0,
    health: 100,

    stats: {
        attack: 12,
        defense: 8,
    },

    inventory: [
        "Малое зелье",
        "Железный меч",
    ],
};

Монстры:

const monsters = [
    {
        id: 1,
        name: "Слизень",
        level: 1,
        experience: 30,
        defeated: false,
    },
    {
        id: 2,
        name: "Гоблин",
        level: 2,
        experience: 55,
        defeated: false,
    },
    {
        id: 3,
        name: "Орк",
        level: 3,
        experience: 90,
        defeated: false,
    },
];

Реализуйте:

showPlayer()
showMonsters()
findMonsterById()
defeatMonster()
addItem()
checkLevelUp()

Правила:

• уже побеждённого монстра нельзя победить повторно;
• персонаж может победить монстра, если его уровень не ниже уровня монстра;
• после победы начисляется опыт;
• каждые 100 опыта повышают уровень;
• при повышении уровня увеличьте attack и defense на 2;
• пользователь может добавить найденный предмет в inventory.

Меню должно позволять посмотреть персонажа, список монстров, выбрать монстра для боя и добавить предмет.

---

Вариант 3. Система заказов интернет-магазина

const orders = [
    {
        id: 101,
        customer: {
            name: "Иван",
            phone: "+79990000001",
        },
        total: 7200,
        status: "new",
    },
    {
        id: 102,
        customer: {
            name: "Анна",
            phone: "+79990000002",
        },
        total: 3100,
        status: "processing",
    },
];

Реализуйте:

showOrders()
findOrderById()
addOrder()
changeOrderStatus()
calculateRevenue()
showOrdersByStatus()

Допустимые статусы:

new
processing
shipped
delivered
cancelled

Не разрешайте устанавливать неизвестный статус.

Дополнительно:

• посчитайте сумму заказов без статуса cancelled;
• покажите заказы с выбранным пользователем статусом;
• при добавлении заказа запросите имя клиента, телефон и сумму.

---

Вариант 4. Служба технической поддержки

const tickets = [
    {
        id: 201,
        title: "Не работает интернет",
        priority: "high",
        status: "new",

        user: {
            name: "Иван",
            department: "Бухгалтерия",
        },
    },
    {
        id: 202,
        title: "Ошибка приложения",
        priority: "medium",
        status: "in_progress",

        user: {
            name: "Анна",
            department: "Отдел продаж",
        },
    },
];

Реализуйте:

showTickets()
findTicketById()
createTicket()
changeStatus()
showTicketsByStatus()
calculateStatistics()

Допустимые статусы:

new
in_progress
waiting
resolved

Статистика должна содержать количество заявок каждого статуса и количество заявок с приоритетом high.

---

Вариант 5. Электронный журнал

const students = [
    {
        id: 1,
        name: "Иван Петров",
        group: "5981",
        grades: [5, 4, 4, 3],
    },
    {
        id: 2,
        name: "Анна Смирнова",
        group: "5981",
        grades: [5, 5, 4, 5],
    },
];

Реализуйте:

showStudents()
findStudentById()
addStudent()
addGrade()
calculateAverageGrade()
showStudentStatistics()

Программа должна:

• находить студента;
• добавлять нового студента;
• добавлять оценку от 2 до 5;
• рассчитывать средний балл;
• показывать студента с наибольшим средним баллом;
• выводить количество студентов со средним баллом не ниже 4.

---

Вариант 6. Библиотечная система

const books = [
    {
        id: 1,
        title: "Чистый код",
        author: "Роберт Мартин",
        available: true,

        borrower: {
            name: null,
        },
    },
    {
        id: 2,
        title: "JavaScript. Подробное руководство",
        author: "Дэвид Флэнаган",
        available: false,

        borrower: {
            name: "Иван",
        },
    },
];

Реализуйте:

showBooks()
findBookById()
addBook()
borrowBook()
returnBook()
showAvailableBooks()

Правила:

• нельзя выдать уже выданную книгу;
• нельзя вернуть книгу, которая уже находится в библиотеке;
• при выдаче сохраняйте имя читателя;
• при возврате очищайте данные читателя.

---

Вариант 7. Мониторинг серверов

const servers = [
    {
        id: 1,
        name: "web-01",
        online: true,

        metrics: {
            cpu: 42,
            memory: 68,
        },
    },
    {
        id: 2,
        name: "db-01",
        online: true,

        metrics: {
            cpu: 91,
            memory: 87,
        },
    },
];

Реализуйте:

showServers()
findServerById()
addServer()
updateMetrics()
getServerState()
showCriticalServers()

Состояние сервера:

• offline — сервер выключен;
• normal — CPU и память ниже 80%;
• warning — хотя бы один показатель от 80%;
• critical — хотя бы один показатель от 95%.

Не допускайте показатели меньше 0 или больше 100.

---

Вариант 8. Система бронирования гостиницы

const rooms = [
    {
        id: 101,
        category: "standard",
        pricePerNight: 3500,
        occupied: false,

        guest: {
            name: null,
            nights: 0,
        },
    },
    {
        id: 102,
        category: "comfort",
        pricePerNight: 5000,
        occupied: true,

        guest: {
            name: "Анна",
            nights: 3,
        },
    },
];

Реализуйте:

showRooms()
findRoomById()
addRoom()
bookRoom()
checkoutRoom()
calculateBookingPrice()

Правила:

• занятый номер нельзя забронировать;
• при бронировании сохраняются имя гостя и число ночей;
• при выселении данные гостя очищаются;
• стоимость проживания равна pricePerNight × nights;
• покажите все свободные номера.

---

Вариант 9. Трекер задач

const tasks = [
    {
        id: 1,
        title: "Исправить форму авторизации",
        status: "todo",
        priority: "high",

        assignee: {
            name: "Иван",
        },
    },
    {
        id: 2,
        title: "Обновить документацию",
        status: "in_progress",
        priority: "medium",

        assignee: {
            name: "Анна",
        },
    },
];

Реализуйте:

showTasks()
findTaskById()
addTask()
changeTaskStatus()
assignTask()
showTaskStatistics()

Допустимые статусы:

todo
in_progress
done

Статистика должна содержать:

• количество задач каждого статуса;
• количество задач высокого приоритета;
• процент завершённых задач.

---

Вариант 10. Система проката автомобилей

const cars = [
    {
        id: 1,
        brand: "Toyota",
        model: "Corolla",
        pricePerDay: 3500,
        available: true,

        rental: {
            customer: null,
            days: 0,
        },
    },
    {
        id: 2,
        brand: "Kia",
        model: "Rio",
        pricePerDay: 2800,
        available: false,

        rental: {
            customer: "Иван",
            days: 4,
        },
    },
];

Реализуйте:

showCars()
findCarById()
addCar()
rentCar()
returnCar()
calculateRentalPrice()

Правила:

• нельзя выдать уже арендованный автомобиль;
• при аренде сохраняются клиент и количество дней;
• стоимость равна pricePerDay × days;
• при возврате данные аренды очищаются;
• покажите список доступных автомобилей;
• рассчитайте стоимость текущих аренд.

Требования к результату

Индивидуальная программа должна:

• запускаться без синтаксических ошибок;
• иметь исходный набор данных;
• использовать объекты и массив объектов;
• содержать вложенную структуру данных;
• состоять минимум из пяти функций;
• позволять выполнить основные операции через интерактивное меню;
• выполнять поиск, добавление и изменение данных;
• содержать хотя бы один расчёт или статистический показатель;
• проверять пользовательский ввод;
• корректно обрабатывать ситуацию, когда объект не найден;
• не допускать заведомо некорректное изменение состояния данных.

Рекомендуемая структура программы

// 1. Исходные данные
const data = [
    // ...
];

// 2. Функции поиска
function findById(...) {
    // ...
}

// 3. Функции просмотра
function showAll(...) {
    // ...
}

// 4. Функции изменения
function addItem(...) {
    // ...
}

function updateItem(...) {
    // ...
}

// 5. Функции расчёта
function calculateStatistics(...) {
    // ...
}

// 6. Главное меню
while (true) {
    // ...
}

Контрольные вопросы

1. Что называется объектом в JavaScript?
2. Как создать объект?
3. Какими способами можно получить значение свойства?
4. Как добавить новое свойство?
5. Как изменить существующее свойство?
6. Как удалить свойство?
7. Что представляет собой вложенный объект?
8. Как обратиться к свойству вложенного объекта?
9. Что представляет собой массив объектов?
10. Как перебрать массив объектов?
11. Как найти объект по идентификатору без использования find()?
12. Что следует вернуть из функции, если объект не найден?
13. Что происходит, если изменить свойство объекта, найденного внутри массива?
14. Для чего используются функции поиска?
15. Почему не стоит размещать всю программу внутри одного обработчика меню?
16. Чем данные приложения отличаются от функций, которые их обрабатывают?
17. Для чего нужна проверка пользовательского ввода?
18. Почему при изменении состояния объекта необходимо проверять допустимость операции?
19. Чем массив обычных значений отличается от массива объектов?
20. Каким образом эта работа подготавливает программу к дальнейшему использованию классов?

При защите будьте готовы найти указанный преподавателем объект, изменить правило одной операции или добавить новое поле в используемую структуру данных.

Рекомендуемая литература

1. MDN Web Docs — Working with objects
2. MDN Web Docs — Object
3. MDN Web Docs — Array
4. JavaScript.info — Objects
5. JavaScript.info — Objects: the basics
6. JavaScript.info — Arrays