Учебный вариант 00 — пара 19

Это полный постоянный пример преподавателя. Он принадлежит паре 19 и не зависит от смены студенческого комплекта. Для него достаточно двух файлов; переносить прежний трёхстраничный сайт и изображения не нужно.

Задание: собрать учебный расчёт стоимости наборов с одной доставкой. Количество задано строкой, перед вычислением оно преобразуется в число. Итог выводится в консоли браузера. Форма ввода и обработка её элементов в это задание не входят.

Объяснение действий и типов — в статье пары 19. Этот расчёт разбирается как образец. Затем студенты самостоятельно пишут расчёт по своему индивидуальному листу в script.js, подключённом к прежней главной странице; отдельный HTML ниже нужен для автономного преподавательского показа.

Данные и ожидаемый результат

Все значения вымышлены и используются только для обучения.

Формула: 150 × 2 + 50 = 350. Признак isTraining только выводится, в расчёте не участвует. Доставка прибавляется один раз ко всему заказу.

Файл index.html

Создайте папку Variant00-js. В ней создайте index.html и вставьте весь текст:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Учебный расчёт · V00</title>
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>Учебный расчёт</h1>
    <p>Откройте консоль браузера: результат программы выводится туда.</p>
    <p>Изменяйте количество в файле script.js, сохраняйте и обновляйте страницу.</p>
  </main>
</body>
</html>

Отдельный CSS не требуется. Страница содержит пояснение, а не вычисляемую сумму.

Файл script.js

Рядом с index.html создайте script.js и вставьте весь код:

const itemName = "Учебный набор";
const unitPrice = 150;
let quantityText = "2";
const deliveryPrice = 50;
const isTraining = true;

const quantity = Number(quantityText);
const totalPrice = unitPrice * quantity + deliveryPrice;

console.log("Название:", itemName);
console.log("Учебные данные:", isTraining);
console.log("Количество:", quantity);
console.log("Итого:", totalPrice);

Сохраните оба файла в кодировке UTF-8. Откройте index.html в браузере, затем F12 → Console / Консоль и обновите страницу. Если клавиша не открывает инструменты, выберите их в меню браузера → дополнительные инструменты.

Ожидаемый вывод:

Название: Учебный набор
Учебные данные: true
Количество: 2
Итого: 350

Проверка изменением

В script.js замените только "2" на "3" в строке объявления quantityText. Сохраните и обновите страницу: ожидаются количество 3 и итог 500. Верните "2", сохраните и обновите: итог снова 350.

В строке консоли браузера проверьте по одному два выражения:

"2" + 1

Number("2") + 1

Получится строка "21" и число 3. У первого выражения + присоединяет текст, у второго складывает числа. В сохранённом расчёте преобразование выполняется отдельной строкой const quantity = Number(quantityText);.

Готово, когда оба файла сохранены, исходный расчёт даёт 350, после изменения количества получается 500 и вы можете объяснить различие двух выражений. Отдельный отчёт и дополнительные обязательные задания не нужны.