⚡ JavaScript

Введение: история, особенности, где применяется — JavaScript

Урок 1 / 35 • Полная теория для чтения

Что это и зачем?

Представь, что ты — режиссёр собственного фильма, а твой компьютер — это киностудия. HTML — это как сценарий и декорации (текст, картинки, кнопки, таблицы). CSS — это художник по костюмам и осветитель (цвета, шрифты, красивое расположение). А JavaScript — это актёры и спецэффекты! Именно JS заставляет всё двигаться, реагировать на нажатия кнопок, считать, показывать всплывающие окошки, менять картинки и даже создавать игры.

Если бы сайт был человеком, то:

HTML — скелет и кожа (структура).
CSS — одежда и макияж (внешний вид).
JavaScript — мозг и мышцы (логика и действия).

Без JavaScript сайт был бы просто скучной книжкой, которую можно только читать, но нельзя листать, нажимать на ссылки, играть или заполнять формы. JS делает веб-страницы "живыми".

Где применяется JavaScript?

Везде в интернете: ВКонтакте, YouTube, игры в браузере (например, Agar.io), онлайн-калькуляторы, карты (Яндекс.Карты), редакторы кода (как тот, в котором ты сейчас читаешь эту статью).
Даже на серверах (с помощью Node.js) — например, чтобы обрабатывать сообщения в чатах или хранить данные.
В мобильных приложениях (React Native) и на десктопах (Electron — на нём написан Discord и VS Code).

JavaScript — самый популярный язык в мире! Почему? Потому что он встроен прямо в браузер. Тебе не нужно ничего устанавливать (в отличие от Python, который надо скачивать). Открыл блокнот, написал код, сохранил как .html — и готово! Можно запустить двойным щелчком.

Важное отличие от Python: в Python код выполняется сам по себе в консоли, а в JavaScript он всегда привязан к веб-странице. JS не умеет сам создавать графические окна (как pygame), но зато умеет управлять тем, что уже есть на экране — кнопками, текстом, картинками.

Примеры кода с объяснением

Самый простой способ начать — написать код прямо в браузере. Нажми F12 (или ПКМ → "Посмотреть код") и перейди на вкладку "Console" (Консоль). Туда можно вводить команды. Но мы будем писать полноценные страницы.

Создай на компьютере файл test.html, открой его блокнотом и вставь туда код из примеров. Потом сохрани и открой в браузере.

Пример 1: Привет, мир! (самая первая программа)

// Это однострочный комментарий. Он не выполняется.
/* А это многострочный комментарий.
   Он нужен, чтобы объяснять код. */

// Команда alert() показывает всплывающее окошко с сообщением.
alert("Привет, мир! JavaScript работает!");

// Команда console.log() выводит текст в консоль разработчика.
// Чтобы увидеть результат, нажми F12 и открой вкладку Console.
console.log("Это сообщение в консоли. Ты молодец!");

// Команда document.write() пишет текст прямо на страницу.
document.write("<h1>Это заголовок, созданный JavaScript!</h1>");

Что произойдёт?

Сначала выскочит окошко с текстом.
Потом в консоли (F12) появится второе сообщение.
В самом конце на странице появится большой заголовок.

В Python первая программа — это просто print("Привет"). В JS мы используем alert() или console.log(). Разница в том, что JS живёт в браузере, поэтому у него есть доступ к окнам и к самой странице.

Пример 2: Переменные — коробочки для данных

// Переменная — это как коробка с наклейкой.
// В Python ты пишешь: name = "Вася"
// В JS мы используем ключевое слово let (современный способ).

let имя = "Маша";           // Строка (текст)
let возраст = 12;            // Число
let любитПиццу = true;       // Логическое значение (да/нет)
let пустаяКоробка = null;    // Пустота (ничего)

// Выведем всё в консоль:
console.log("Имя:", имя);
console.log("Возраст:", возраст);
console.log("Любит пиццу?", любитПиццу);

// Можно складывать строки (конкатенация):
let приветствие = "Привет, " + имя + "! Тебе " + возраст + " лет.";
console.log(приветствие);

// А можно использовать шаблонные строки (как f-строки в Python, только с ${}):
let лучшеПриветствие = `Привет, ${имя}! Тебе ${возраст} лет.`;
console.log(лучшеПриветствие);

// Изменим значение переменной:
возраст = 13;  // У Маши был день рождения!
console.log("Теперь возраст:", возраст);

Объяснение: Переменные нужны, чтобы хранить информацию. let — это как var в Python, только в JS нужно обязательно писать let (или const для констант). Обрати внимание на точку с запятой ; в конце каждой строки — в Python её нет, а в JS она ставится (хотя иногда работает и без неё, но лучше всегда ставить).

Шаблонные строки (с обратными кавычками `` ` ``) очень удобны — вставляешь переменные прямо в текст через ${}.

Пример 3: Условный оператор if (как в жизни: "Если... то...")

let возрастПользователя = 15;

// Если возраст больше или равен 18:
if (возрастПользователя >= 18) {
    console.log("Ты взрослый! Можно смотреть фильмы ужасов.");
} else if (возрастПользователя >= 12) {
    console.log("Ты подросток! Можно играть в большинство игр.");
} else {
    console.log("Ты ребёнок. Лучше почитай книжку.");
}

// Ещё пример: проверка на чётность числа
let число = 7;
if (число % 2 === 0) {  // % — это остаток от деления
    console.log("Число чётное.");
} else {
    console.log("Число нечётное.");
}

// Обрати внимание: в JS для сравнения используется === (три равно),
// а не == (два равно). Два равно — это "нестрогое" сравнение, оно может
// давать странные результаты (например, 5 == "5" — это правда, хотя
// число и строка — разные типы). Всегда используй ===.

Объяснение: if работает точно так же, как в Python. Разница только в скобках: в JS условие обязательно берётся в круглые скобки (), а блок кода — в фигурные {}. В Python вместо фигурных скобок используются отступы (пробелы). В JS отступы не важны для работы кода, но их ставят для красоты.

Обрати внимание на === — это строгое сравнение. В Python аналог — == (одно равно — это присваивание, как и в JS). Запомни: = — положить в коробку, === — проверить, одинаковое ли содержимое.

Пример 4: Циклы (повторение — мать учения)

// Цикл while — повторяй, пока условие верно.
let счетчик = 1;
while (счетчик <= 5) {
    console.log("Счётчик равен:", счетчик);
    счетчик = счетчик + 1;  // Увеличиваем на 1. Можно записать короче: счетчик++;
}
// Выведет: 1,2,3,4,5

// Цикл for — самый популярный. Он как while, но компактнее.
// for (начало; условие; шаг)
for (let i = 1; i <= 5; i++) {
    console.log("i =", i);
}
// Результат тот же.

// А теперь интересное: выведем таблицу умножения на 3:
for (let множитель = 1; множитель <= 10; множитель++) {
    let результат = 3 * множитель;
    console.log(`3 × ${множитель} = ${результат}`);
}

Объяснение: Циклы нужны, чтобы не писать одно и то же сто раз. for состоит из трёх частей: 1) создаём счётчик (let i = 1), 2) проверяем условие (i <= 5), 3) делаем шаг (i++ — это то же самое, что i = i + 1).

В Python цикл for выглядит иначе: for i in range(1, 6):. В JS мы сами управляем счётчиком. Это даёт больше гибкости, но требует внимательности — легко забыть увеличить счётчик, и цикл станет бесконечным (зависнет страница).

Пример 5: Функции — твои личные мини-программы

// Функция — это как рецепт. Ты даёшь ей ингредиенты (аргументы),
// она делает что-то и возвращает результат.

// Объявляем функцию:
function приветствие(имя) {
    // Это тело функции
    let сообщение = "Здравствуй, " + имя + "!";
    return сообщение;  // Возвращаем результат
}

// Вызываем функцию:
let результат1 = приветствие("Анна");
console.log(результат1);  // "Здравствуй, Анна!"

// Можно вызвать ещё раз с другим именем:
let результат2 = приветствие("Пётр");
console.log(результат2);  // "Здравствуй, Пётр!"

// Функция может считать:
function сумма(a, b) {
    return a + b;
}

let x = 10;
let y = 20;
console.log("Сумма:", сумма(x, y));  // 30

// Функция может ничего не возвращать, а просто делать действие:
function показатьОшибку() {
    alert("Что-то пошло не так! Проверь ввод.");
}

// Вызовем:
показатьОшибку();  // Появится окошко с ошибкой

Объяснение: Функции — это кирпичики любой программы. Ты пишешь код один раз, а потом используешь его много раз. В Python функции объявляются через def, в JS — через function. В Python нет фигурных скобок, а есть двоеточие и отступы. В JS фигурные скобки обязательны.

Функции могут принимать параметры (то, что в скобках) и возвращать значение через return. Если return не написать, функция вернёт undefined (ничего).

Типичные ошибки

Даже опытные программисты иногда ошибаются. Вот что чаще всего ловит новичков в JavaScript:

1. Забыл точку с запятой (хотя это не всегда критично)

let a = 5
let b = 10
console.log(a + b)

Это сработает, но лучше всегда ставить ; в конце строки. Без точки с запятой JS иногда неправильно понимает, где заканчивается команда, и выдаёт ошибку.

2. Неправильные кавычки

// Ошибка: смесь кавычек
let name = 'Привет, "друг"';  // Так можно (одинарные внутри двойных)
let name2 = "Привет, 'друг'"; // И так можно
// А вот так — ошибка:
let name3 = 'Привет, "друг"';  // Нет, подожди, это тоже работает!
// Главное: нельзя начать строку с одинарной, а закончить двойной:
let name4 = 'Привет";  // ОШИБКА!

Всегда используй одинаковые кавычки для одной строки. Или обратные кавычки для шаблонов.

3. Путаница с = и ===

let x = 5;
// if (x = 10) {  // ОШИБКА! Одно равно — это присваивание, а не сравнение!
//     console.log("x равен 10");
// }
// Правильно:
if (x === 10) {
    console.log("x равен 10");
} else {
    console.log("x не равен 10");
}

Запомни: = — положить значение, === — проверить равенство. В Python одно равно — это присваивание, два — сравнение. В JS два равно (==) тоже есть, но оно "ленивое" и может считать число 5 и строку "5" одинаковыми. Используй === всегда.

4. Бесконечный цикл

// ОПАСНО! Этот код зависнет браузер!
// let i = 0;
// while (i < 10) {
//     console.log(i);
//     // Забыли написать i++;
// }
// Будет крутиться вечно, пока не закроешь вкладку.

Всегда проверяй, что счётчик в цикле меняется. Если страница зависла — нажми Ctrl+C в консоли или закрой вкладку.

5. Регистр букв имеет значение

// JavaScript чувствителен к регистру!
let myVariable = 10;
console.log(MyVariable);  // ОШИБКА! MyVariable не объявлена (с большой буквы)
console.log(myvariable);  // ОШИБКА! Всё маленькими — тоже другое имя

В Python тоже регистр важен, но новички часто путают. Привыкай: myVariable и myvariable — это две разные переменные.

6. Неправильное имя переменной

// Нельзя начинать с цифры:
// let 1number = 5;  // ОШИБКА!

// Нельзя использовать дефис:
// let my-name = "Вася";  // ОШИБКА! Дефис — это минус.

// Можно использовать подчёркивание и знак доллара:
let _private = "секрет";
let $currency = 100

Вперёд → Установка и первая программа Hello World — JavaScr