Читать книгу: «JavaScript: От Основ до Full-Stack Разработки»
Преждевременная оптимизация — корень всех зол. Сначала сделайте так, чтобы это работало, затем сделайте так, чтобы это работало правильно, и только потом делайте так, чтобы это работало быстро.
Вступление
Добро пожаловать в мир JavaScript!
JavaScript — ключевая технология современной веб-разработки, обеспечивающая интерактивность и динамическое поведение клиентской части приложений.
Освоение этого языка открывает возможности для создания полнофункциональных веб-платформ — от адаптивных пользовательских интерфейсов до сложных одностраничных приложений (SPA).
Методология и структура руководства
Данное руководство построено по принципу поэтапного погружения: от базового синтаксиса к созданию полноценных приложений. Основной акцент сделан на формировании практических навыков через решение прикладных задач и понимание внутренних механизмов языка, а не на простом перечислении конструкций.
JavaScript уникален своей универсальностью: он является стандартом для клиентской разработки (frontend) и активно применяется на серверной стороне (backend) благодаря платформе Node.js. Такой охват делает его одним из наиболее востребованных инструментов в индустрии.
Ключевые принципы обучения:
Последовательность: Каждая глава логически вытекает из предыдущей и закладывает основу для следующих тем.
Практика: Теоретические концепции подкрепляются реальными примерами кода и проектными заданиями.
Глубина понимания: Особое внимание уделяется не только тому, «как» работает язык, но и «почему» он работает именно так.
Рекомендации по работе с материалом:
Выполняйте все практические задания и экспериментируйте с кодом.
Анализируйте ошибки — они являются critical частью процесса обучения.
Возвращайтесь к сложным темам после освоения последующих глав.
Структура программы:
Основы веб-технологий и введение в JavaScript
Фундаментальные конструкции языка и работа с DOM
Асинхронное программирование и сетевое взаимодействие
Инструменты разработки и современные фреймворки
Продвинутые паттерны и промышленная разработка
Такой подход позволяет систематизировать изучение и последовательно перейти от написания простых скриптов к проектированию архитектуры сложных приложений.
Глава 1: Основы Веб-Технологий: Где Живет JavaScript.
Прежде чем мы начнем писать код на JavaScript, давайте разберемся, в какой среде он существует и какую роль играет.
Представьте интернет как огромную библиотеку, а веб-сайты — как книги на полках.
1.1. Как работает Интернет: Клиент и Сервер
Когда вы набираете адрес сайта в браузере (например, google.com), происходит следующее:
Ваш браузер (например, Chrome, Firefox, Safari) выступает в роли клиента. Он отправляет запрос на сервер, где хранится информация о сайте.
Сервер — это мощный компьютер, который, как бы “слушает” ваши запросы. Получив такой запрос, он находит нужные файлы (текст, картинки, код) и отправляет их обратно вашему браузеру.
Браузер получает эти файлы и рендерит (отображает) их так, чтобы вы увидели знакомую страницу.
Процесс выглядит примерно так: Вы (Браузер/Клиент) <--- Запрос ---> Сервер <--- Ответ ---> Вы (Браузер/Клиент)
1.2. Три кита веб-разработки: HTML, CSS, JavaScript
Чтобы страница выглядела и работала так, как мы привыкли, используются три основные технологии:
HTML (HyperText Markup Language): Это “скелет” веб-страницы. HTML определяет структуру контента: заголовки, абзацы, списки, изображения, ссылки. Он говорит браузеру, что находится на странице.
Пример:
html<h1>Заголовок страницы</h1>
<p>Это абзац текста.</p>
<img src="" alt="Описание изображения">
CSS (Cascading Style Sheets): Это “внешний вид” или “одежда” веб-страницы. CSS отвечает за оформление: цвета, шрифты, размеры, отступы, расположение элементов. Он говорит браузеру, как должен выглядеть контент.Пример:cssh1 {
color: blue; /* Заголовок будет синим */
font-size: 24px; /* Размер шрифта 24 пикселя */
}
p {
line-height: 1.5; /* Межстрочный интервал 1.5 */
}
JavaScript (JS): Это “мозг” или “двигатель” веб-страницы. JavaScript добавляет интерактивность и динамику. Он позволяет реагировать на действия пользователя, изменять контент “на лету”, загружать новые данные без перезагрузки страницы, создавать анимации и многое другое. Он говорит браузеру, что делать.
Пример:
javascript// При нажатии на кнопку, изменить заголовок
document.querySelector('button').addEventListener('click', function() {
document.querySelector('h1').textContent = 'Кнопка нажата!';
});
1.3. Роль JavaScript: Оживление веб-страниц
Без JavaScript веб-сайты были бы статичными. Вы могли бы читать текст, смотреть картинки, переходить по ссылкам. Но вы не могли бы:
Заполнять формы и отправлять данные.
Просматривать галереи изображений с переключением.
Видеть уведомления или всплывающие окна.
Играть в игры прямо в браузере.
Следить за обновлениями ленты новостей в реальном времени.
JavaScript делает веб интерактивным и динамичным.
1.4. Где еще используется JavaScript?
Хотя JavaScript изначально создавался для браузеров, его возможности расширились:
Node.js: Позволяет запускать JavaScript на сервере. Это значит, что вы можете использовать один язык для всей веб-разработки (full-stack development).
Мобильная разработка: С помощью фреймворков вроде React Native можно создавать нативные мобильные приложения для iOS и Android, используя JavaScript.
Десктопные приложения: С помощью Electron можно создавать приложения для Windows, macOS и Linux.
Это показывает, насколько мощным и универсальным инструментом стал JavaScript.
Глава 2: Ваш Первый Код: Инструменты и Запуск.
Настало время сделать первые шаги и написать свой собственный JavaScript-код. Для этого нам понадобятся два основных инструмента: браузер и его инструменты разработчика.
2.1. Что нам понадобится: Браузеры и их инструменты
Любой современный веб-браузер (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari) обладает встроенными инструментами для разработчиков. Они позволяют нам:
Просматривать HTML-структуру страницы.
Редактировать CSS-стили “на лету”.
Выполнять JavaScript-код.
Отлаживать ошибки.
Анализировать сетевую активность.
Как открыть инструменты разработчика:
Google Chrome / Mozilla Firefox / Microsoft Edge: Нажмите F12 на клавиатуре, или щелкните правой кнопкой мыши в любом месте страницы и выберите “Просмотреть код” (Inspect) или “Исследовать элемент”.
Safari: Сначала нужно включить меню “Разработка” в настройках (Safari -> Настройки -> Дополнения -> Поставить галочку “Показывать меню Разработка в строке меню”). Затем, когда меню “Разработка” появится, выберите “Показать веб-инспектор”.
Когда вы откроете инструменты разработчика, вы увидите несколько вкладок. Нам особенно важна вкладка “Console” (Консоль) — это место, где мы будем писать и выполнять наш JavaScript-код.
2.2. Написание и выполнение JavaScript: В браузере и в файле
Есть два основных способа запустить JavaScript:
А) В Консоли Браузера (для быстрых тестов и экспериментов)
Это самый простой способ начать. Вы можете вводить команды JavaScript прямо в консоль, и браузер будет выполнять их немедленно.
Пример 1: Ваша первая команда
Откройте любой веб-сайт (можно даже пустую вкладку, если хотите).
Откройте инструменты разработчика (F12).
Перейдите на вкладку “Console”.
Введите следующую строку и нажмите Enter:javascriptconsole.log("Привет, мир!");
Вы должны увидеть текст Привет, мир! прямо под вашей командой в консоли.
Что здесь произошло?
console — это специальный объект, который предоставляет доступ к консоли браузера.
.log() — это метод (функция) объекта console, который выводит переданные ему данные в консоль.
"Привет, мир!" — это строка. Мы передали ее как аргумент методу log(). Строки в JavaScript заключаются в одинарные (') или двойные (") кавычки.
Пример 2: Простые вычисления
Вы можете использовать консоль как калькулятор:
javascript
2 + 2
Нажмите Enter. Результат: 4
javascript
10 * 5
Нажмите Enter. Результат: 50
javascript
25 / 5
Нажмите Enter. Результат: 5
Б) В HTML-файле (для создания реальных веб-страниц)
Чтобы JavaScript стал частью вашей веб-страницы, его нужно встроить в HTML-документ. Это делается с помощью тега <script>.
Пример 3: JavaScript внутри HTML
Откройте ваш любимый текстовый редактор (например, VS Code, Sublime Text, Notepad++ или даже Блокнот).
Создайте новый файл и сохраните его с расширением .html (например, index.html).
Скопируйте и вставьте следующий код в этот файл:html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая JS страница</title>
</head>
<body>
<h1>Приветствую!</h1>
<p>Это моя первая веб-страница с JavaScript.</p>
<script>
// Этот код будет выполнен браузером
console.log("JavaScript загружен и работает!");
// Найдем заголовок и изменим его текст
let heading = document.querySelector('h1'); // Находим элемент h1
heading.textContent = "JavaScript изменил заголовок!"; // Меняем его текст
</script>
</body>
</html>
Сохраните файл.
Откройте этот файл в браузере (дважды щелкните по нему).
Что вы увидите:
На странице появится текст “JavaScript изменил заголовок!”.
Если вы откроете инструменты разработчика (F12) и перейдете на вкладку “Console”, вы увидите сообщение JavaScript загружен и работает!.
Где размещать тег <script>:
Внутри <head>: Если скрипт размещен в <head>, он будет загружен и выполнен до того, как браузер начнет обрабатывать содержимое <body>. Это может вызвать проблему, если ваш скрипт пытается работать с элементами, которые еще не существуют на странице (например, найти <h1> до того, как он был создан).
Перед закрывающим тегом </body>: Это рекомендуемый способ для большинства случаев. Скрипт будет выполнен после того, как весь HTML-контент страницы будет загружен и готов. Это гарантирует, что элементы, с которыми ваш скрипт должен работать (например, <h1>), уже существуют.
Использование внешних файлов JavaScript:
Когда ваш JavaScript-код становится большим, лучше вынести его в отдельный файл. Это улучшает читаемость, позволяет кэшировать скрипт браузером и упрощает его повторное использование.
Пример 4: Внешний файл JavaScript
Создайте в той же папке, где лежит index.html, новый файл и сохраните его как script.js.
В файл script.js скопируйте JavaScript-код из предыдущего примера:javascript// script.js
console.log("JavaScript из внешнего файла загружен!");
let heading = document.querySelector('h1');
heading.textContent = "JavaScript из внешнего файла изменил заголовок!";
Измените ваш index.html следующим образом:html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая JS страница</title>
</head>
<body>
<h1>Приветствую!</h1>
<p>Это моя первая веб-страница с JavaScript.</p>
<!-- Подключаем внешний файл скрипта -->
<script src="https://www.litres.ruscript.js"></script>
</body>
</html>
Сохраните оба файла.
Откройте index.html в браузере.
Теперь JavaScript-код выполняется из отдельного файла script.js. Тег <script src="https://www.litres.ruscript.js"></script> сообщает браузеру, где найти код.
2.3. Консоль разработчика: Ваш основной инструмент
Консоль — это не просто место для вывода сообщений. Это мощный инструмент для отладки и исследования.
Вывод информации: console.log() — самый частый помощник. Вы можете выводить значения переменных, результаты вычислений, сообщения о ходе выполнения программы.javascriptlet count = 10;
console.log("Текущее значение count:", count); // Выведет: Текущее значение count: 10
Вывод ошибок: console.error() — для сообщений об ошибках.javascriptconsole.error("Что-то пошло не так!");
Предупреждения: console.warn() — для предупреждений.javascriptconsole.warn("Это предупреждение, обратите внимание!");
Таблицы: console.table() — очень удобно для отображения массивов объектов в виде таблицы.javascriptlet users = [
{ id: 1, name: "Алиса" },
{ id: 2, name: "Боб" }
];
console.table(users);
Группировка сообщений: console.group() и console.groupEnd().javascriptconsole.group("Логи операции");
console.log("Шаг 1 выполнен.");
console.log("Шаг 2 выполнен.");
console.groupEnd();
Измерение времени: console.time() и console.timeEnd().javascriptconsole.time("Время выполнения задачи");
// ... какой-то код, который занимает время ...
for (let i = 0; i < 1000000; i++) {
// Делаем что-то
}
console.timeEnd("Время выполнения задачи"); // Покажет, сколько времени занял цикл
2.4. Комментарии: Как делать код понятным
Комментарии — это текст в вашем коде, который игнорируется браузером. Они нужны для того, чтобы объяснить самому себе (или другим разработчикам), что делает тот или иной участок кода.
Однострочные комментарии: Начинаются с двух слешей (//). Все, что идет после // до конца строки, считается комментарием.javascript// Это однострочный комментарий. Он объясняет следующую строку.
let x = 10; // Можно комментировать и строки кода.
Многострочные комментарии: Начинаются с /* и заканчиваются */. Полезны для больших пояснений.javascript/*
Этот комментарий
занимает несколько строк
и объясняет более сложный участок кода.
*/
let y = 20;
Зачем нужны комментарии:
Объяснение логики: Помогает понять сложные алгоритмы.
Пометка “TODO”: Оставить напоминание себе о том, что нужно доделать.javascript// TODO: Добавить обработку ошибок
Временное отключение кода: Можно закомментировать строки, чтобы они не выполнялись.javascript// console.log("Эта строка сейчас не будет выполнена.");
Практическое задание:
Создайте HTML-файл с тремя разными сообщениями в консоли, используя console.log, console.warn, console.error.
Создайте массив из 3-4 объектов (например, информация о пользователях: id, name, age) и выведите его в консоли в виде таблицы с помощью console.table().
Попробуйте написать простой скрипт, который вычисляет сумму двух чисел, введенных пользователем (для этого нам пока придется использовать “жестко заданные” числа, так как ввод мы рассмотрим позже), и выводит результат в консоль.
Глава 3: Основы Языка: Переменные, Типы и Операторы.
Теперь, когда мы умеем писать и выполнять JavaScript, давайте перейдем к самым фундаментальным строительным блокам языка: переменным, типам данных и операторам.
3.1. Объявление переменных: var, let, const — когда что использовать
Переменная — это именованная область в памяти, где мы можем хранить информацию (данные). Представьте ее как контейнер с ярлычком (именем).
Исторически в JavaScript использовалось ключевое слово var. Однако с появлением современных стандартов ECMAScript 2015 (ES6) появились let и const, которые предлагают более предсказуемое и безопасное поведение.
let: Объявляет переменную, которая может быть изменена. Это наш основной инструмент для переменных, чьи значения будут меняться в процессе выполнения программы.javascriptlet message = "Привет"; // Объявили переменную message и присвоили ей значение "Привет"
console.log(message); // Выведет: Привет
message = "Привет, мир!"; // Теперь мы можем изменить значение переменной
console.log(message); // Выведет: Привет, мир!
Область видимости let: Переменные, объявленные с помощью let, имеют блочную область видимости. Это означает, что они существуют только внутри того блока кода (например, внутри фигурных скобок {} для циклов или условий), где были объявлены.javascriptif (true) {
let blockVar = "Я внутри блока";
console.log(blockVar); // Работает
}
// console.log(blockVar); // Ошибка! blockVar не существует вне блока if
const: Объявляет переменную, значение которой не может быть изменено после первого присваивания. Используйте const для значений, которые должны оставаться постоянными. Это помогает избежать случайных изменений и делает код более читаемым.javascriptconst PI = 3.14159;
console.log(PI); // Выведет: 3.14159
// PI = 3.14; // Ошибка! Нельзя переприсвоить значение константе.
Важно: const означает, что переменной нельзя присвоить новое значение. Если переменная хранит объект или массив, сами объекты/массивы можно изменять (например, добавлять элементы в массив), но нельзя присвоить этой переменной другой массив или объект.javascriptconst person = { name: "Алиса" };
person.name = "Боб"; // Можно изменять свойства объекта
console.log(person.name); // Выведет: Боб
// person = { name: "Чарли" }; // Ошибка! Нельзя переприсвоить новый объект.
var: Объявляет переменную, которая имеет функциональную область видимости (а не блочную, как let). В современном JavaScript let и const предпочтительнее из-за более предсказуемого поведения. Тем не менее, вы можете встретить var в старом коде.javascript// Пример с var, чтобы показать разницу
if (true) {
var oldVar = "Я существую везде";
console.log(oldVar); // Работает
}
console.log(oldVar); // Работает! oldVar видна вне блока if.
Из-за такого поведения var может приводить к трудноуловимым ошибкам, поэтому старайтесь использовать let и const.
Правило: Всегда старайтесь использовать const по умолчанию. Если вам нужно изменить значение переменной, тогда используйте let. Избегайте var.
3.2. Типы данных: Строки, числа, булевы значения и другие
JavaScript — это язык с динамической типизацией. Это значит, что тип переменной определяется в момент присваивания значения, и вы можете менять его позже.
Существуют примитивные типы данных (неизменяемые) и объекты (изменяемые).
Примитивные типы:
String (Строка): Последовательность символов. Используется для представления текста.
Примеры: "Привет", 'JavaScript', `Шаблонная строка`
Заметьте, что строки могут заключаться в одинарные ('), двойные (") или обратные (`) кавычки. Обратные кавычки (шаблонные строки) позволяют встраивать выражения с помощью ${выражение}.javascriptlet firstName = "Алексей";
let lastName = 'Петров';
let greeting = `Привет, ${firstName} ${lastName}!`; // Шаблонная строка
console.log(greeting); // Выведет: Привет, Алексей Петров!
Number (Число): Используется для целых и дробных чисел.Примеры: 10, 3.14, -5, 1000
JavaScript также имеет специальные числовые значения:Infinity: Бесконечность (например, 1 / 0).
-Infinity: Отрицательная бесконечность.
NaN (Not a Number): Результат некорректных числовых операций (например, 'abc' / 2).
Boolean (Булево значение): Имеет только два возможных значения: true (истина) или false (ложь). Часто используется в условиях.Примеры: true, false
Undefined (Неопределенное): Переменная, которая была объявлена, но ей не было присвоено никакого значения.Пример: let someVariable; console.log(someVariable); // Выведет: undefined
Null (Пустое значение): Явно указывает на отсутствие какого-либо объекта или значения. В отличие от undefined, null присваивается намеренно.Пример: let emptyValue = null;
Symbol (Символ): Уникальное и неизменяемое примитивное значение, часто используется как ключ свойства объекта, чтобы избежать конфликтов имен. (Более продвинутая тема, для начала можно не углубляться).
BigInt (Большое целое число): Для работы с целыми числами, которые превышают максимальное безопасное целочисленное значение для типа Number.
Объекты (Object):
Это более сложный тип данных, который может содержать коллекции данных (свойства) и функции (методы). Объекты не являются примитивными.
Примеры: { name: "Алиса", age: 30 }, [1, 2, 3] (массивы — это тоже объекты).
Как узнать тип переменной:
Используйте оператор typeof.
javascript
let str = "Текст";
console.log(typeof str); // Выведет: string
let num = 100;
console.log(typeof num); // Выведет: number
let isTrue = true;
console.log(typeof isTrue); // Выведет: boolean
let emptyVar;
console.log(typeof emptyVar); // Выведет: undefined
let nullValue = null;
console.log(typeof nullValue); // Внимание! Выведет: object (это историческая особенность JavaScript)
let person = { name: "Иван" };
console.log(typeof person); // Выведет: object
let arr = [1, 2, 3];
console.log(typeof arr); // Выведет: object (массивы - это объекты)
3.3. Основные операторы: Арифметические, сравнения, логические
Операторы — это символы, которые выполняют операции над значениями (операндами).
Арифметические операторы:
+ : Сложение (также конкатенация строк)javascriptlet sum = 10 + 5; // 15
let greeting = "Привет" + " " + "мир!"; // "Привет мир!"
- : Вычитаниеjavascriptlet difference = 10 - 5; // 5
* : Умножениеjavascriptlet product = 10 * 5; // 50
/ : Делениеjavascriptlet quotient = 10 / 5; // 2
% : Остаток от деления (оператор модуля)javascriptlet remainder = 10 % 3; // 1 (10 = 3*3 + 1)
let evenOrOdd = 7 % 2; // 1 (нечетное), 6 % 2 // 0 (четное)
++ : Инкремент (увеличение на 1)javascriptlet counter = 5;
counter++; // counter теперь 6
console.log(counter); // 6
Важно: ++ и -- могут использоваться как перед переменной (префиксная форма), так и после (постфиксная). Их поведение немного отличается, когда они используются внутри выражения (об этом позже).-- : Декремент (уменьшение на 1)javascriptlet counter = 5;
counter--; // counter теперь 4
console.log(counter); // 4
Операторы присваивания:
= : Простое присваивание (мы уже видели его)javascriptlet a = 10;
+=, -=, *=, /=, %= : Сокращенные операторы.javascriptlet x = 10;
x += 5; // То же, что x = x + 5; x теперь 15
x -= 2; // То же, что x = x - 2; x теперь 13
x *= 3; // То же, что x = x * 3; x теперь 39
Операторы сравнения: Возвращают true или false.
== : Равенство (с учетом преобразования типов)javascriptconsole.log(5 == "5"); // true (строка "5" преобразуется в число 5)
console.log(0 == false); // true (false преобразуется в 0)
=== : Строгое равенство (без преобразования типов) — предпочтительный вариант!javascriptconsole.log(5 === "5"); // false (тип Number не равен типу String)
console.log(0 === false); // false
console.log(5 === 5); // true
!= : Неравенство (с учетом преобразования типов)javascriptconsole.log(5 != "5"); // false
!== : Строгое неравенство (без преобразования типов) — предпочтительный вариант!javascriptconsole.log(5 !== "5"); // true
> : Больше
< : Меньше
>= : Больше или равно
<= : Меньше или равно
Логические операторы: Используются для объединения или инвертирования булевых значений.
&& (Логическое И): Возвращает true, если оба операнда true.javascriptlet isLogged = true;
let isAdmin = true;
console.log(isLogged && isAdmin); // true
let isUser = true;
let isGuest = false;
console.log(isUser && isGuest); // false
|| (Логическое ИЛИ): Возвращает true, если хотя бы один из операндов true.javascriptlet hasPermission = true;
let hasAccess = false;
console.log(hasPermission || hasAccess); // true
let isWeekend = false;
let isHoliday = false;
console.log(isWeekend || isHoliday); // false
! (Логическое НЕ): Инвертирует булево значение.javascriptlet isOnline = false;
console.log(!isOnline); // true
let isEmpty = true;
console.log(!isEmpty); // false
3.4. Преобразование типов: Явное и неявное
JavaScript часто пытается автоматически преобразовать типы данных, чтобы выполнить операцию. Это называется неявным преобразованием. Хотя иногда это удобно, оно может приводить к неожиданным результатам. Гораздо безопаснее и понятнее использовать явное преобразование.
Неявное преобразование (когда JavaScript делает сам):
При использовании + со строкой: Любое число или булево значение будет преобразовано в строку.javascriptconsole.log("Значение: " + 5); // "Значение: 5"
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. Исходные данные
Начислим +7
Покупайте книги и получайте бонусы в Литрес, Читай-городе и Буквоеде.
Участвовать в бонусной программе
