1. Основы JavaScript: переменные, типы данных и операторы
Переменные, типы данных и операторы в JavaScript
JavaScript — это язык программирования, который оживляет веб-страницы. Если HTML — это стены и мебель дома, а CSS — обои и освещение, то JavaScript — это электричество: именно он заставляет всё работать, реагировать на нажатия кнопок и меняться прямо у вас на глазах (coursme.com).
Чтобы начать писать код, не нужно ничего устанавливать. Откройте любой браузер (лучше всего Google Chrome), нажмите F12, перейдите на вкладку Console — и вы уже можете вводить JavaScript-код и сразу видеть результат. Именно так мы и будем работать в этой статье.
Что такое переменная и зачем она нужна
Переменная — это именованная ячейка памяти, в которой хранится какое-то значение. Представьте коробку с наклейкой: на наклейке написано имя, а внутри лежит что-то конкретное — число, слово, список. Когда вам нужно это значение, вы обращаетесь к коробке по имени.
В JavaScript переменные объявляются тремя способами: с помощью ключевых слов let, const и var.
let — современный способ объявить переменную, значение которой может меняться. Используйте его по умолчанию.const — переменная-константа: значение задаётся один раз и больше не меняется. Подходит для фиксированных данных: курс валюты, имя сайта, максимальное количество попыток.var — старый способ, существовавший до 2015 года. У него есть неочевидные особенности поведения, поэтому в новом коде его лучше не использовать.> Хорошее правило: сначала пробуй const. Если понимаешь, что значение будет меняться — используй let. var не трогай вовсе.
Попробуйте прямо сейчас в консоли браузера:
console.log() — это команда, которая выводит значение в консоль. Очень полезна для проверки того, что происходит в коде.
Типы данных: что можно хранить в переменной
В JavaScript каждое значение имеет свой тип данных. Тип определяет, что это за значение и что с ним можно делать. Например, числа можно складывать, а строки — соединять.
!Типы данных JavaScript: схема основных типов и примеры значений
Число (Number)
Любое число — целое или дробное. JavaScript не разделяет их на разные типы.
Строка (String)
Текст, заключённый в кавычки. Можно использовать одинарные ', двойные " или обратные ` ` (шаблонные строки).
javascript let isLoggedIn = true; let hasDiscount = false; javascript let selectedCity = null; // намеренно пусто let futureValue; // undefined — значение не задано javascript console.log(typeof 42); // "number" console.log(typeof "Привет"); // "string" console.log(typeof true); // "boolean" console.log(typeof null); // "object" — историческая ошибка в JS, запомните этот нюанс! javascript let a = 10; let b = 3;
console.log(a + b); // 13 — сложение console.log(a - b); // 7 — вычитание console.log(a * b); // 30 — умножение console.log(a / b); // 3.333... — деление console.log(a % b); // 1 — остаток от деления (модуль) console.log(a ** b); // 1000 — возведение в степень (10³) javascript console.log(5 > 3); // true console.log(5 < 3); // false console.log(5 >= 5); // true console.log(5 <= 4); // false console.log(5 == "5"); // true — нестрогое равенство (сравнивает только значение) console.log(5 === "5"); // false — строгое равенство (сравнивает значение И тип) console.log(5 !== "5"); // true — строгое неравенство javascript console.log(0 == false); // true — неожиданно! console.log(0 === false); // false — правильно console.log("" == false); // true — снова неожиданно! javascript let age = 20; let hasTicket = true;
// && (И) — оба условия должны быть true console.log(age >= 18 && hasTicket); // true
// || (ИЛИ) — хотя бы одно условие должно быть true console.log(age < 18 || hasTicket); // true
// ! (НЕ) — инвертирует значение console.log(!hasTicket); // false javascript let score = 10;
score += 5; // то же самое, что score = score + 5 → 15 score -= 3; // score = score - 3 → 12 score = 2; // score = score 2 → 24 score /= 4; // score = score / 4 → 6 score++; // score = score + 1 → 7 (инкремент) score--; // score = score - 1 → 6 (декремент) javascript console.log("5" + 3); // "53" — строка, не число! console.log(5 + 3); // 8 — число console.log("Счёт: " + 10); // "Счёт: 10" javascript let input = "42"; console.log(input + 1); // "421" — неправильно console.log(Number(input) + 1); // 43 — правильно console.log(parseInt(input) + 1); // 43 — тоже работает html <!DOCTYPE html> <html> <head> <title>Мой первый JS</title> </head> <body> <h1>Привет от JavaScript!</h1> <script> const userName = "Алексей"; const currentYear = 2025; const birthYear = 1998; const userAge = currentYear - birthYear;
console.log(Привет, {userAge} лет.);
console.log(Через 10 лет тебе будет ${userAge + 10} лет.);
</script>
</body>
</html>
``
Откройте консоль браузера (F12 → Console) — и увидите три строки с результатами. Обратите внимание: JavaScript вычислил возраст и прибавил 10 прямо внутри шаблонной строки. Это и есть живой, работающий код (mngb.ru).
!Интерактивный тренажёр: попробуйте изменить значения переменных и сразу увидьте результат
Понимание переменных, типов и операторов — это фундамент, на котором строится всё остальное в JavaScript. Условия, циклы, функции и работа с DOM — всё это использует именно эти базовые строительные блоки. Чем увереннее вы чувствуете себя с ними, тем легче будет двигаться дальше.