No history yet

Основы и переменные

Ваш первый шаг в JavaScript

Если представить сайт как человеческое тело, то HTML — это скелет, а CSS — это кожа и одежда. А что же такое JavaScript? Это нервная система и мышцы. Он заставляет страницу реагировать на ваши действия: клики по кнопкам, заполнение форм, прокрутку. Без него веб-страницы были бы просто статичными документами, как страницы в книге.

Lesson image

JavaScript оживляет контент. Он может показывать и скрывать элементы, отправлять данные на сервер без перезагрузки страницы и создавать сложные анимации. Это язык программирования, который выполняется прямо в вашем браузере.

Инструменты разработчика

У каждого современного браузера есть встроенный набор инструментов для веб-разработчиков. Нам понадобится один из них — консоль. Это что-то вроде чата с вашим кодом, где вы можете давать команды и видеть результаты их выполнения.

Чтобы открыть консоль, нажмите Ctrl+Shift+I (или Cmd+Option+I на Mac) и перейдите на вкладку "Console".

Основная команда для вывода информации в консоль — это console.log(). Всё, что вы напишете внутри скобок, появится в консоли. Это невероятно полезно, чтобы проверять, как работает ваш код.

console.log('Привет, мир!');
// Попробуйте ввести это в консоли вашего браузера и нажать Enter.

Коробки для данных

Чтобы программа могла что-то делать, ей нужно где-то хранить информацию: имя пользователя, количество товаров в корзине, текущую дату. Для этого используются переменные.

Представьте, что переменная — это коробка с наклейкой. На наклейке написано имя коробки (имя переменной), а внутри лежит какое-то значение. Вы всегда можете узнать, что лежит в коробке, обратившись к ней по имени.

В современном JavaScript для создания «коробок» используют два ключевых слова: let и const.

let создает обычную коробку. Вы можете положить в нее что-то одно, а потом заменить это на что-то другое.

const (от слова «константа») создает коробку, которую после первого заполнения «запечатывают». Ее содержимое уже нельзя изменить. Это полезно для данных, которые не должны меняться, например, дата рождения пользователя или цвет по умолчанию.

// Используем let для имени, которое может измениться
let currentCity = 'Москва';
console.log(currentCity); // Выведет: Москва

currentCity = 'Санкт-Петербург';
console.log(currentCity); // Выведет: Санкт-Петербург

// Используем const для даты рождения
const yearOfBirth = 2005;
console.log(yearOfBirth); // Выведет: 2005

// Эта строка вызовет ошибку, потому что нельзя менять const
// yearOfBirth = 2006;

Есть несколько правил для «наклеек» на наши коробки:

  • Имена могут содержать буквы, цифры, символы \$ и _.
  • Имя не может начинаться с цифры.
  • Имена чувствительны к регистру: userName и username — это две разные переменные.
  • Нельзя использовать зарезервированные слова (например, let, const, class) в качестве имен.

Хорошей практикой считается использовать стиль camelCase для имен, состоящих из нескольких слов. Первое слово пишется с маленькой буквы, а все последующие — с большой, без пробелов. Например: myFavoriteBook.

Теперь, когда вы знаете, как хранить данные и выводить их в консоль, пора проверить свои знания.

Quiz Questions 1/4

Если сайт — это человеческое тело, где HTML — скелет, а CSS — кожа и одежда, то что такое JavaScript?

Quiz Questions 2/4

Для чего в первую очередь используется команда console.log()?