JavaScript: От Основ до Full-Stack Разработки
- -
- 100%
- +
console.log("Статус: " + true); // "Статус: true"
При сравнении с ==: Один операнд может быть преобразован к типу другого.javascriptconsole.log(5 == "5"); // true (строка "5" стала числом 5)
console.log(true == 1); // true (true стало числом 1)
console.log(null == undefined); // true (особый случай)
Явное преобразование (когда мы говорим JavaScript, что делать):
В строку:
String(value): Преобразует любое значение в строку.javascriptconsole.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
value.toString(): Метод объектов (включая числа, но не null и undefined).javascriptconsole.log((123).toString()); // "123"
console.log(true.toString()); // "true"
// console.log(null.toString()); // Ошибка!
В число:
Number(value): Преобразует любое значение в число.javascriptconsole.log(Number("123")); // 123
console.log(Number("Привет")); // NaN (не число)
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
parseInt(string, radix): Парсит строку и возвращает целое число. radix – основание системы счисления (обычно 10).javascriptconsole.log(parseInt("123px", 10)); // 123 (игнорирует "px")
console.log(parseInt("0xFF", 16)); // 255 (шестнадцатеричная система)
console.log(parseInt("abc", 10)); // NaN
parseFloat(string): Парсит строку и возвращает число с плавающей точкой.javascriptconsole.log(parseFloat("3.14м")); // 3.14
Унарный плюс (+): Быстрый способ преобразовать в число.javascriptconsole.log(+"123"); // 123
console.log(+"Привет"); // NaN
console.log(+true); // 1
В булево значение:Boolean(value): Преобразует любое значение в true или false.
“Falsy” значения (преобразуются в false):false
0 (ноль)
"" (пустая строка)
null
undefined
NaN
Все остальные значения преобразуются в true (их называют “Truthy” значениями).
javascriptconsole.log(Boolean("Привет")); // true
console.log(Boolean("")); // false
console.log(Boolean(100)); // true
console.log(Boolean(0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean({})); // true (пустой объект – Truthy!)
console.log(Boolean([])); // true (пустой массив – Truthy!)
Практические задания:
Задание 1: Система учета товаров
javascript
// 1. Создайте константы для базовой информации о магазине:
// – Название магазина (строка)
// – Курс валюты (число)
// – Признак активности (булево значение)
// 2. Создайте переменные для:
// – Количества товара на складе
// – Цены товара
// – Названия товара
// 3. Проверьте типы всех созданных переменных
// 4. Попробуйте изменить константу с названием магазина
// и обработайте ошибку с помощью try/catch
Задание 2: Калькулятор скидок
javascript
// 1. Создайте переменные для:
// – Исходной цены товара
// – Процента скидки
// – Порога для дополнительной скидки
// 2. Рассчитайте:
// – Цену со скидкой
// – Разницу между исходной и конечной ценой
// – Итоговый процент скидки с точностью до 2 знаков
// 3. Используйте операторы сравнения для проверки:
// – Превышает ли скидка пороговое значение
// – Является ли цена положительным числом
Задание 3: Валидация данных формы
javascript
// Напишите функцию validateForm(data), которая принимает объект с полями:
// – name (строка)
// – age (число)
// – email (строка)
// – subscription (булево значение)
// Функция должна проверять типы данных и возвращать объект с результатами:
// – isValid (булево значение)
// – errors (массив строк с описанием ошибок)
Ответы и решения
Решение задания 1:
javascript
// 1. Создаем константы
const STORE_NAME = "TechMarket";
const CURRENCY_RATE = 97.5;
const IS_ACTIVE = true;
// 2. Создаем переменные
let stockQuantity = 150;
let itemPrice = 2990;
let itemName = "Смартфон";
// 3. Проверяем типы
console.log(typeof STORE_NAME); // "string"
console.log(typeof CURRENCY_RATE); // "number"
console.log(typeof IS_ACTIVE); // "boolean"
console.log(typeof stockQuantity); // "number"
// 4. Пытаемся изменить константу
try {
STORE_NAME = "NewMarket"; // Вызовет ошибку
} catch (error) {
console.log("Ошибка:", error.message);
// "Assignment to constant variable"
}
Решение задания 2:
javascript
// 1. Исходные данные
let originalPrice = 5000;
let discountPercent = 15;
let threshold = 10;
// 2. Расчеты
let discountAmount = originalPrice * (discountPercent / 100);
let finalPrice = originalPrice – discountAmount;
let priceDifference = originalPrice – finalPrice;
let actualDiscountPercent = (priceDifference / originalPrice) * 100;
// Округляем до 2 знаков
actualDiscountPercent = Number(actualDiscountPercent.toFixed(2));
// 3. Проверки
let isAboveThreshold = discountPercent > threshold;
let isPriceValid = originalPrice > 0;
console.log("Цена со скидкой:", finalPrice);
console.log("Реальная скидка:", actualDiscountPercent + "%");
console.log("Скидка выше порога:", isAboveThreshold);
console.log("Цена валидна:", isPriceValid);
Решение задания 3:
javascript
function validateForm(data) {
let errors = [];
// Проверка имени
if (typeof data.name !== 'string' || data.name.trim().length === 0) {
errors.push("Имя должно быть непустой строкой");
}
// Проверка возраста
if (typeof data.age !== 'number' || data.age < 0 || data.age > 150) {
errors.push("Возраст должен быть числом от 0 до 150");
}
// Проверка email
if (typeof data.email !== 'string' || !data.email.includes('@')) {
errors.push("Email должен быть строкой с символом @");
}
// Проверка подписки
if (typeof data.subscription !== 'boolean') {
errors.push("Подписка должна быть булевым значением");
}
return {
isValid: errors.length === 0,
errors: errors
};
}
// Пример использования:
const userData = {
name: "Иван Иванов",
age: 25,
email: "ivan@example.com",
subscription: true
};
console.log(validateForm(userData));
// { isValid: true, errors: [] }
Мы начали с самых азов: как работает веб, как открыть инструменты разработчика, как написать первую строку кода, как объявлять переменные и какие типы данных существуют. Это основа, на которой будет строиться все остальное.
Глава 4: Логика Программы: Условия и Циклы.
До сих пор мы писали код, который выполнялся последовательно, строка за строкой. Но настоящая мощь программирования заключается в способности принимать решения и повторять действия. Именно для этого нам нужны управляющие конструкции: условные операторы (для принятия решений) и циклы (для повторений).
4.1. Принятие решений: if, else if, elseУсловные операторы позволяют программе выполнять разные блоки кода в зависимости от того, истинно или ложно определенное условие.
Термин: Условие (Condition) – это выражение, которое может быть оценено как true (истина) или false (ложь). Чаще всего в качестве условий используются операторы сравнения (>, <, ===, !== и т.д.) или булевы переменные.
Конструкция if:
Самая простая форма условного оператора – if. Он выполняет блок кода, только если условие истинно.
javascript
// Пример: Проверка возраста для доступа
let age = 18;
if (age >= 18) {
console.log("Доступ разрешен.");
}
// Если условие (age >= 18) истинно, выполнится console.log.
// Если условие ложно, код внутри фигурных скобок {} будет проигнорирован.
Фигурные скобки {}: Они определяют блок кода, который будет выполнен, если условие истинно. Если внутри блока только одна строка кода, фигурные скобки можно опустить, но для читаемости и безопасности (чтобы случайно не пропустить строку) их лучше всегда использовать.
Конструкция if…else:
Что, если нам нужно выполнить один код, если условие истинно, и другой код, если оно ложно? Здесь на помощь приходит else.
javascript
let temperature = 15;
if (temperature > 25) {
console.log("Жарко! Идем купаться.");
} else {
console.log("Прохладно. Лучше прогуляться.");
}
// Выполнится "Прохладно. Лучше прогуляться."
Конструкция if…else if…else:
А что, если у нас несколько возможных условий? Например, классификация оценок: отличная, хорошая, удовлетворительная, неудовлетворительная. Для таких случаев используется цепочка else if.
javascript
let score = 75; // Оценка студента
if (score >= 90) {
console.log("Отлично!");
} else if (score >= 75) { // Если первое условие ложно, проверяем это
console.log("Хорошо.");
} else if (score >= 50) { // Если и предыдущее ложно, проверяем это
console.log("Удовлетворительно.");
} else { // Если ни одно из вышеперечисленных условий не истинно
console.log("Неудовлетворительно. Нужно подтянуться.");
}
// Выполнится "Хорошо."
Важные моменты:
Условия оцениваются строго по порядку, сверху вниз. Как только находится первое истинное условие, выполняется соответствующий блок кода, и вся цепочка if…else if…else завершается.
Блок else (если он есть) является необязательным и срабатывает только тогда, когда все предыдущие условия ложны.
Пример 4.1.1: Определение времени суток
javascript
let hour = 14; // Текущий час (от 0 до 23)
if (hour >= 6 && hour < 12) {
console.log("Доброе утро!");
} else if (hour >= 12 && hour < 18) {
console.log("Добрый день!");
} else if (hour >= 18 && hour < 22) {
console.log("Добрый вечер!");
} else {
console.log("Доброй ночи!");
}
// Выполнится "Добрый день!"
// Обратите внимание, что здесь мы использовали оператор && (логическое И)
// для объединения двух условий (начало интервала И конец интервала).
4.2. Тернарный оператор (Короткий if…else)Когда нам нужно присвоить переменной одно значение, если условие истинно, и другое, если оно ложно, тернарный оператор (также известный как условный оператор) становится удобной альтернативой if…else.
Синтаксис: условие ? значение_если_истинно : значение_если_ложно
javascript
let age = 20;
let canVote = (age >= 18) ? "Может голосовать" : "Не может голосовать";
console.log(canVote); // Выведет: Может голосовать
let weather = "солнечно";
let message = (weather === "солнечно") ? "Отличная погода!" : "Возьмите зонт.";
console.log(message); // Выведет: Отличная погода!
Тернарный оператор отлично подходит для простых присваиваний, но для более сложной логики лучше использовать if…else.
4.3. Оператор switch (Для множественных однотипных сравнений)Когда у вас есть переменная, и вы хотите выполнить разные действия в зависимости от ее конкретного значения (а не диапазона, как в if…else if), оператор switch может быть более читаемым и эффективным.
Термин: switch (переключатель) – конструкция, которая сравнивает значение выражения с несколькими возможными значениями (case) и выполняет соответствующий блок кода.
Синтаксис:
javascript
switch (выражение) {
case значение1:
// Код, если выражение === значение1
break; // Важно! Выход из switch
case значение2:
// Код, если выражение === значение2
break;
// … другие case …
default: // Необязательный блок
// Код, если ни один case не совпал
}
case: Обозначает конкретное значение, с которым будет сравниваться выражение.
break: Очень важен! Он выходит из конструкции switch. Если break отсутствует, выполнение кода продолжится до следующего case или до конца switch (это называется “сваливание” – fall-through).
default: Необязательный блок, который выполняется, если ни одно из значений case не совпало с выражением. Похож на else в if…else if.
Пример 4.3.1: Определение дня недели
javascript
let dayNumber = 3; // 0 – воскресенье, 1 – понедельник, …, 6 – суббота
let dayName;
switch (dayNumber) {
case 0:
dayName = "Воскресенье";
break;
case 1:
dayName = "Понедельник";
break;
case 2:
dayName = "Вторник";
break;
case 3:
dayName = "Среда";
break;
case 4:
dayName = "Четверг";
break;
case 5:
dayName = "Пятница";
break;
case 6:
dayName = "Суббота";
break;
default:
dayName = "Неизвестный день";
}
console.log(dayName); // Выведет: Среда
Пример 4.3.2: switch с отсутствием break (осторожно!)
javascript
let fruit = "яблоко";
let description;
switch (fruit) {
case "яблоко":
description = "Это фрукт.";
// Нет break! Код "свалится" в следующий case.
case "груша":
description += " Оно красное или зеленое."; // Добавится к предыдущему описанию
break; // Здесь break есть.
case "банан":
description = "Это желтый фрукт.";
break;
default:
description = "Неизвестный фрукт.";
}
console.log(description); // Выведет: Это фрукт. Оно красное или зеленое.
// Обратите внимание, как `case "груша"` добавил свою часть к `case "яблоко"`.
Итого: switch хорош для множественных проверок на равенство одного и того же значения. Для диапазонов или более сложных условий лучше использовать if…else if.
4.4. Циклы: for, while, do…while (Для повторения действий)Циклы позволяют нам выполнять один и тот же блок кода многократно, пока выполняется определенное условие. Это очень мощный инструмент для автоматизации задач.
Термин: Цикл (Loop) – конструкция, которая позволяет повторно выполнять блок кода.
Термин: Итерация (Iteration) – однократное выполнение блока кода внутри цикла.
А) Цикл for (Идеален, когда мы знаем, сколько раз нужно повторить)
Цикл for имеет три части, разделенные точкой с запятой:
Инициализация: Выполняется один раз перед началом цикла. Обычно здесь объявляется счетчик.
Условие: Проверяется перед каждой итерацией. Если условие истинно, цикл продолжается. Если ложно, цикл завершается.
Инкремент/Декремент (или шаг): Выполняется после каждой итерации. Обычно увеличивает или уменьшает счетчик.
Синтаксис: for (инициализация; условие; шаг) { // блок кода }
Пример 4.4.1: Вывод чисел от 1 до 5
javascript
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// Вывод:
// 1
// 2
// 3
// 4
// 5
Разбор:
let i = 1;: Перед началом цикла объявлена переменная i и ей присвоено значение 1 (инициализация).
i <= 5;: Перед каждой итерацией проверяется: i меньше или равно 5?i = 1: 1 <= 5 (истина) -> выполняем блок кода, затем i++.
i = 2: 2 <= 5 (истина) -> выполняем блок кода, затем i++.
…
i = 5: 5 <= 5 (истина) -> выполняем блок кода, затем i++.
i = 6: 6 <= 5 (ложь) -> цикл завершается.
i++: После каждой итерации значение i увеличивается на 1.
Пример 4.4.2: Вывод таблицы умножения на 7
javascript
console.log("Таблица умножения на 7:");
for (let multiplier = 1; multiplier <= 10; multiplier++) {
let result = 7 * multiplier;
console.log(`7 * ${multiplier} = ${result}`);
}
// Вывод:
// Таблица умножения на 7:
// 7 * 1 = 7
// 7 * 2 = 14
// …
// 7 * 10 = 70
Б) Цикл while (Идеален, когда мы не знаем точное количество повторений, но знаем условие продолжения)
Цикл while выполняет блок кода, пока условие истинно. Условие проверяется перед каждой итерацией.
Синтаксис: while (условие) { // блок кода }
Пример 4.4.3: Снижение баланса до нуля
javascript
let balance = 100;
let transactionAmount = 10;
let transactionsCount = 0;
while (balance > 0) {
balance = balance – transactionAmount; // Уменьшаем баланс
transactionsCount++; // Увеличиваем счетчик транзакций
console.log(`Баланс после транзакции ${transactionsCount}: ${balance}`);
}
console.log(`Всего транзакций: ${transactionsCount}`);
// Вывод:
// Баланс после транзакции 1: 90
// Баланс после транзакции 2: 80
// …
// Баланс после транзакции 10: 0
// Всего транзакций: 10
Важно: В цикле while вы должны самостоятельно позаботиться о том, чтобы условие в конечном итоге стало ложным. Если условие всегда будет истинным, вы получите бесконечный цикл, который “заморозит” вашу программу.
В) Цикл do…while (Похож на while, но выполняется хотя бы один раз)
Цикл do…while выполняет блок кода один раз, а затем проверяет условие. Если условие истинно, цикл повторяется.
Синтаксис: do { // блок кода } while (условие);
Пример 4.4.4: Гарантированное выполнение хотя бы раз
Представьте, что нам нужно запросить у пользователя число, и если оно отрицательное, запросить снова. Даже если первое введенное число отрицательное, мы должны его как-то обработать (например, показать сообщение), прежде чем запросить снова.
javascript
let userInput;
do {
userInput = prompt("Введите положительное число:"); // prompt() – функция, которая запрашивает ввод у пользователя
console.log("Вы ввели: " + userInput);
} while (userInput < 0); // Условие проверяется ПОСЛЕ первого выполнения
console.log("Спасибо! Вы ввели корректное число.");
(Примечание: prompt() – это функция браузера, которая может отсутствовать в некоторых средах выполнения JS. Для полноты картины мы ее здесь упомянули.)
Когда использовать какой цикл:
for: Когда вы заранее знаете или можете вычислить количество повторений (например, пройти по всем элементам массива, сделать 10 итераций).
while: Когда вам нужно повторять действия до тех пор, пока выполняется некоторое условие, но точное количество повторений заранее неизвестно (например, ждать, пока сервер ответит, или пока баланс не станет меньше нуля).
do…while: Когда блок кода должен выполниться как минимум один раз, даже если условие изначально ложно.
4.5. Специальные циклы for…in и for…ofЭти циклы предназначены для итерации (перебора) по элементам объектов и массивов.
А) Цикл for…in (для перебора свойств объектов)
Он перебирает имена (ключи) свойств объекта.
Синтаксис: for (let key in object) { // код с использованием object[key] }
javascript
let car = {
brand: "Toyota",
model: "Camry",
year: 2022
};
for (let key in car) {
console.log(`Ключ: ${key}, Значение: ${car[key]}`);
}
// Вывод:
// Ключ: brand, Значение: Toyota
// Ключ: model, Значение: Camry
// Ключ: year, Значение: 2022
Важно: for…in может перебирать свойства, унаследованные из прототипа объекта. Для простого перебора собственных свойств обычно используют Object.keys(object) в сочетании с обычным циклом for или forEach.
Б) Цикл for…of (для перебора значений итерируемых объектов)
Этот цикл предназначен для перебора значений элементов в итерируемых объектах, таких как массивы, строки, Map, Set.
Синтаксис: for (let value of iterable) { // код с использованием value }
Пример 4.5.1: Перебор массива
javascript
let colors = ["красный", "зеленый", "синий"];
for (let color of colors) {
console.log(color);
}
// Вывод:
// красный
// зеленый
// синий
Пример 4.5.2: Перебор строки
javascript
let text = "JS";
for (let char of text) {
console.log(char);
}
// Вывод:
// J
// S
Когда что использовать:
for…of – для перебора значений элементов массивов, строк и других итерируемых коллекций.
for…in – для перебора ключей (имен свойств) объектов.
Практические задания:Задание 1: Система аутентификации пользователей
javascript
// 1. Напишите функцию checkUserAccess(user), которая принимает объект пользователя
// с полями: role (строка), isActive (булево), subscriptionType (строка)
// 2. Реализуйте проверки:
// – Если пользователь не активен, вернуть "Доступ заблокирован"
// – Если роль "admin", вернуть "Полный доступ"
// – Если роль "user" и подписка "premium", вернуть "Расширенный доступ"
// – Если роль "user" и подписка "basic", вернуть "Базовый доступ"
// – Для всех остальных случаев – "Неизвестная роль"
// 3. Используйте конструкцию if…else if…else
Задание 2: Умный калькулятор скидок
javascript
// 1. Создайте функцию calculateDiscount(price, userType, purchaseCount)
// 2. Реализуйте логику расчета скидки с помощью switch и тернарных операторов:
// Базовая скидка:
// – "vip" – 20%
// – "regular" – 10%
// – "new" – 5%
// Дополнительная скидка за количество покупок:
// – Если purchaseCount > 10 – дополнительно 5%
// – Если purchaseCount > 5 – дополнительно 3%
// 3. Верните итоговую цену и размер скидки в процентах
Задание 3: Анализатор данных массива
javascript
// 1. Создайте функцию analyzeArray(numbers), которая принимает массив чисел
// 2. Используя циклы, найдите:
// – Максимальное и минимальное значение
// – Среднее арифметическое
// – Количество четных и нечетных чисел
// – Все простые числа в массиве
// 3. Верните объект с результатами анализа
Задание 4: Генератор отчетов
javascript
// 1. Дан массив объектов с товарами:
const products = [
{ name: "Телефон", price: 500, category: "electronics", stock: 15 },
{ name: "Книга", price: 20, category: "education", stock: 0 },
{ name: "Наушники", price: 100, category: "electronics", stock: 8 }
];
// 2. Используя циклы и условия, создайте отчеты:
// – Список товаров, которых нет в наличии
// – Общую стоимость всех товаров в категории "electronics"
// – Товары с ценой выше 50 и остатком менее 10
Ответы и решенияРешение задания 1:
javascript
function checkUserAccess(user) {
if (!user.isActive) {
return "Доступ заблокирован";
} else if (user.role === "admin") {
return "Полный доступ";
} else if (user.role === "user") {
return user.subscriptionType === "premium"
? "Расширенный доступ"
: "Базовый доступ";
} else {
return "Неизвестная роль";
}
}
// Примеры использования:
console.log(checkUserAccess({
role: "admin",
isActive: true,
subscriptionType: "premium"
})); // "Полный доступ"
console.log(checkUserAccess({
role: "user",
isActive: true,
subscriptionType: "basic"
})); // "Базовый доступ"
Решение задания 2:
javascript
function calculateDiscount(price, userType, purchaseCount) {
let baseDiscount = 0;
// Базовая скидка по типу пользователя
switch (userType) {
case "vip":
baseDiscount = 20;
break;
case "regular":
baseDiscount = 10;
break;
case "new":
baseDiscount = 5;
break;
default:
baseDiscount = 0;
}
// Дополнительная скидка за количество покупок
let extraDiscount = purchaseCount > 10 ? 5 : purchaseCount > 5 ? 3 : 0;
const totalDiscount = baseDiscount + extraDiscount;
const finalPrice = price * (1 – totalDiscount / 100);
return {
originalPrice: price,
finalPrice: finalPrice,
totalDiscount: totalDiscount,
baseDiscount: baseDiscount,
extraDiscount: extraDiscount
};
}
// Пример использования:
console.log(calculateDiscount(1000, "vip", 12));
// { originalPrice: 1000, finalPrice: 750, totalDiscount: 25, … }
Решение задания 3:
javascript
function analyzeArray(numbers) {
if (numbers.length === 0) {
return { error: "Массив пуст" };