Переменные и типы данных - Основы веб-разработки - ADivC

Что такое переменные

В прошлом уроке мы подключили JavaScript и вывели сообщения в консоль. Но это только начало. JavaScript это язык программирования, а программирование это работа с данными. Числа, текст, списки, объекты. Чтобы работать с данными, нужны переменные.

Представьте коробку. На коробке наклейка с названием. Внутри лежит что-то. Переменная это как коробка. Название переменной это наклейка. Содержимое переменной это то, что лежит внутри. Открываете коробку по названию, достаёте содержимое, используете.

Посмотрите на сайт ADC. Видите текст «Добро пожаловать в ADC…». Этот текст можно хранить в переменной. Видите год «2025»? Это число, тоже можно хранить в переменной.

Создание переменных с let

Создайте переменную в JavaScript. Откройте script.js и напишите:

JAVASCRIPT

let siteName = "ADC";
console.log(siteName);

Ключевое слово let создаёт переменную. siteName это название. Знак равно присваивает значение. 'ADC' это строка, текст в кавычках. console.log() выводит значение переменной в консоль.

Сохраните файл. Обновите страницу. Откройте консоль. Видите «ADC»? Вы создали переменную, положили туда текст, достали и показали.

Переменные можно менять. Поэтому они и называются переменными, от слова «меняться»:

JAVASCRIPT

let year = 2023;

console.log("Год основания:", year);

year = 2025;

console.log("Текущий год:", year);

Первый раз year равен 2023. Потом меняете на 2025. Переменная хранит новое значение. Как коробка, выкинули старое, положили новое.

Константы с const

Есть три способа создать переменную: let, const и var. let для переменных, которые меняются. const для констант, которые не меняются. var старый способ, не используйте его.

JAVASCRIPT

const siteUrl = "https://adc.ru";
console.log(siteUrl);

// Попытка изменить вызовет ошибку
// siteUrl = "https://example.com"; // Ошибка!

const гарантирует, что значение не изменится. Как постоянная величина. Адрес сайта не меняется каждый день, используйте const. Год может меняться, используйте let.

Строки (string)

Теперь типы данных. В JavaScript есть несколько основных типов. Представьте, что коробки бывают разные. Одни для обуви, другие для книг, третьи для посуды. Типы данных это виды коробок для разных данных.

Первый тип строка, string. Текст в кавычках:

JAVASCRIPT

let title = 'ADC';
let description = "Пространство для творчества";
let quote = `Проектный подход — это философия`;

console.log(title);
console.log(description);
console.log(quote);

Можете использовать одинарные кавычки, двойные или обратные. Обратные кавычки позволяют вставлять переменные внутрь текста:

JAVASCRIPT

let name = "ADC";
let greeting = `Добро пожаловать в ${name}!`;
console.log(greeting); // Добро пожаловать в ADC!

${name} вставляет значение переменной в строку. Это называется интерполяция. Удобно собирать текст из кусочков.

Числа (number)

Второй тип число, number. Целые и дробные числа:

JAVASCRIPT

let year = 2025;

let version = 2.5;

let attendees = 150;

console.log("Год:", year);
console.log("Версия:", version);
console.log("Участников:", attendees);

С числами можно проводить математические операции:

JAVASCRIPT

let a = 10;

let b = 5;

console.log("Сумма:", a + b); // 15
console.log("Разность:", a - b); // 5
console.log("Произведение:", a * b); // 50
console.log("Частное:", a / b); // 2

Посмотрите на дизайн сайта. Видите текст «В 2025 году состоялась встреча»? Год можно хранить как число, потом использовать в вычислениях или сравнениях.

Булевы значения (boolean)

Третий тип булев, boolean. Правда или ложь, true или false. Как переключатель, включен или выключен:

JAVASCRIPT

let isActive = true;

let isCompleted = false;

console.log("Активно:", isActive);
console.log("Завершено:", isCompleted);

Булевы значения используются для проверок. Мероприятие активно? true. Регистрация закрыта? false. Это основа логики программы.

Массивы (array)

Четвёртый тип массив, array. Список значений:

JAVASCRIPT

let events = ["ADC Meetup", "Creative Hub", "Design School"];

console.log(events);
console.log("Первое событие:", events[0]); //ADC Meetup
console.log("Второе событие:", events[1]); //Creative Hub

Массив это пронумерованный список. Нумерация начинается с нуля. events[0] это первый элемент. events[1] второй. Как полка с коробками, каждая на своём месте.

Объекты (object)

Пятый тип объект, object. Набор свойств с именами:

JAVASCRIPT

let hub = {
  name: "Creative Hub",
  address: "Пантелеевская, 53",
  year: 2025,
  active: true
};

console.log(hub.name);
console.log(hub.address);

Объект как картотека. У каждого свойства есть имя и значение. hub.name обращается к свойству name. Удобно хранить связанные данные вместе.

Заключение

Запомните главное. let для переменных, const для констант. Строки в кавычках. Числа без кавычек. Булевы значения true или false. Массивы в квадратных скобках. Объекты в фигурных скобках со свойствами.

Когда пишете JavaScript, думайте о данных. Что храните? Текст используйте строку. Число используйте number. Список используйте массив. Связанные данные используйте объект. Правильный тип данных делает код понятным и предсказуемым.

Какое ключевое слово используется для объявления переменной, которая может меняться?

const

let

var

variable

Какой тип данных используется для хранения текста?

number

string

text

boolean

С какого индекса начинается нумерация элементов в массиве?

С 1