JavaScript — переменные, типы, операции и преобразование пользовательского ввода

HTML задаёт содержимое страницы, CSS — оформление, JavaScript позволяет выполнять действия и вычисления. На этой практике разберём первый расчёт в script.js, затем самостоятельно напишем расчёт для своего проекта и проверим его в консоли браузера.

Результат: свой script.js с расчётом по теме вашего прежнего проекта. Вы сможете изменить исходное количество, сверить результат со своим заданием и объяснить преобразование строки в число. Ниже сначала разобран общий учебный пример.

Продолжайте свою папку VariantNN-web после адаптации страниц. Для разбора используем одинаковый вымышленный пример: один набор стоит 150 условных рублей, доставка — 50. После объяснения откройте свой номер в списке выше: там задача по теме вашего каталога, исходные данные и ожидаемый текст консоли без готовой программы. Все новые числа условные и учебные; добавлять их в HTML-каталог и переделывать форму не требуется.

Вариант 00 содержит самостоятельное задание, HTML-страницу и готовый код для показа преподавателем.

1. Подключите файл

В своей папке рядом с index.html и style.css создайте обычный текстовый файл script.js. Проверьте расширение: script.js.txt браузер не найдёт по нашему пути.

В index.html, между <head> и </head>, сразу после подключения CSS добавьте одну строку:

<script src="script.js" defer></script>

src указывает путь к файлу. defer откладывает выполнение до завершения разбора HTML. Вставлять JavaScript внутрь этого тега не нужно: программа хранится в отдельном файле. На этой практике достаточно подключить её на главной странице.

В пустом script.js напишите:

console.log("Расчёт запущен");

Сохраните оба файла. Откройте главную в браузере, нажмите F12 и выберите вкладку Console / Консоль. Если F12 не открывает инструменты, используйте меню браузера → дополнительные инструменты → инструменты разработчика. Обновите страницу.

Самопроверка: в консоли есть строка «Расчёт запущен». На самой странице новый текст не появляется: console.log(...) выводит сообщение в консоль. В скобках — то, что нужно вывести; точка с запятой завершает команду.

2. Дайте значениям имена

В script.js замените пробную строку следующим блоком:

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

console.log(itemName);
console.log(quantityText);
console.log(isTraining);

Переменная — именованное место для значения. = записывает значение справа в имя слева. Команды выполняются сверху вниз.

Имена чувствительны к регистру: unitPrice и UnitPrice — разные имена. В числах не пишем единицу измерения: 150, а не 150 рублей. Текст записываем в кавычках.

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

Маленький опыт: сразу после строки let quantityText = "2"; временно вставьте:

quantityText = "3";

После сохранения и обновления выводится уже 3. При повторном присваивании let не пишут. Удалите временную строку и обновите страницу: снова выводится 2. const используем там, где повторного присваивания в программе не планируем. Редактировать исходный текст строки с const перед новым запуском можно.

3. Различайте три типа

Значение имеет тип: он определяет, как с ним работает программа.

isTraining = true обозначает, что пример учебный. Пока мы только выводим этот признак: он не меняет формулу.

В конец script.js, после трёх строк вывода, добавьте:

console.log(typeof quantityText);
console.log(typeof unitPrice);
console.log(typeof isTraining);

typeof показывает тип значения. Сохраните и обновите страницу. Последние три строки консоли — string, number, boolean. Поэтому одинаково выглядящие при выводе "2" и 2 ещё не означают одинаковые данные.

4. Проверьте сложение и преобразование

Следующие два выражения вводите по одному в строку консоли браузера, нажимая Enter. Перед запуском попробуйте предсказать результат:

"2" + 1

Number("2") + 1

В первом случае получится строка "21": + присоединяет текст, если один из этих операндов — строка. Во втором — число 3: Number("2") преобразует строку в число, и затем выполняется сложение.

"2" — строка → Number("2") → 2 — число → 2 + 1 → 3

При чтении значения поля веб-страницы программа обычно получает строку, даже если это числовое поле. К чтению полей перейдём позже. Сейчас quantityText = "2" только изображает уже полученную строку ввода: настоящую форму программа ещё не читает.

Основные арифметические операции можно проверить там же:

Умножение и деление выполняются раньше сложения и вычитания. Скобки задают нужный порядок: (150 + 50) * 2 даст 400. Строки перед вычислениями преобразуем явно, даже если отдельная операция могла бы сделать это сама.

5. Соберите расчёт

В script.js оставьте первые пять объявлений из шага 2. Все строки console.log(...) ниже них замените блоком:

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

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

В console.log можно передать несколько значений через запятую: сначала подпись, затем значение. Подпись в кавычках — текст, имя без кавычек — обращение к переменной.

Формула: цена одного набора × количество + одна доставка. Сначала строка превращается в число, затем вычисляется сумма.

Сохраните файл и обновите главную. Ожидаемый вывод:

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

Самопроверка изменением: в исходной строке let quantityText = "2"; замените "2" на "3", сохраните файл и обновите страницу. Теперь количество — 3, итог — 500. Затем верните "2" и снова обновите: итог — 350.

Программа вычисляет сумму при запуске. Редактирование файла без сохранения и обновления страницы не запускает расчёт заново.

6. Пустой текст ещё не означает корректное число

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

Number("")

Number("два")

Первое выражение даёт 0: JavaScript так преобразует пустую строку. Это не доказывает, что человек ввёл количество. Второе даёт NaN — специальное числовое значение, означающее неудачный числовой результат. Умножение такого значения на цену тоже даст NaN.

Number преобразует данные, но само по себе не проверяет допустимость количества. В разобранном примере используем известную строку "2". В самостоятельной работе исходную строку возьмите из своего задания. Проверять пустой ввод и показывать сообщение пользователю научимся после знакомства с условиями и обработкой формы.

7. Выполните свой вариант и покажите результат

После разбора примера откройте свой номер из списка «Индивидуальные задания» в начале статьи. Напишите в script.js самостоятельный расчёт по условию своего листа. В нём даны исходные значения и текст ожидаемого вывода консоли, а команды JavaScript нужно подобрать самому. При необходимости возвращайтесь к объяснению переменных, типов и преобразования выше.

Сохраните проект, обновите главную страницу и сверьте один запуск с текстовым образцом консоли в своём листе. Покажите преподавателю подключение script.js и полученный вывод. Сам итог числом в программу не вписывайте: он должен вычисляться из данных. Второй запуск для сдачи не требуется.

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

Отдельный письменный отчёт не требуется. После показа сохраните папку проекта с исходными данными своего варианта.