ОСНОВЫ JAVASCRIPT

HTML — это скелет страницы. Текст, картинки, кнопки — всё это HTML. Но HTML статичный — он не умеет реагировать на действия. Нажал кнопку — ничего не произойдёт. JavaScript добавляет логику: «когда нажали кнопку — сделай вот это». JS-код подключается к HTML через тег <script> или отдельный файл. Браузер читает HTML сверху вниз, находит скрипт и выполняет его.

const counter = document.getElementById('click-counter');
const btn = document.getElementById('click-btn');
let clicks = 0;

btn.addEventListener('click', () => {
  clicks = clicks + 1;
  counter.textContent = clicks;
});

Переменная — это коробка с надписью. Внутри лежат данные: число, текст, список. Надпись на коробке — имя переменной. По имени ты обращаешься к данным.

Два ключевых слова: const и let. const — коробка запечатана. Положил данные — больше не заменишь. let — коробка открыта. Данные можно заменить на другие.

Когда что использовать? По умолчанию пиши const. Если значение реально будет меняться (счётчик, состояние) — let.

const name = "Капи";     // имя не изменится
let age = 3;              // возраст растёт

age = age + 1;

console.log(name);  // Капи
console.log(age);   // 4

У каждого значения есть тип. Тип определяет, что с этим значением можно делать.

«Капи» — это строка (string). Текст в кавычках. Можно склеивать строки, искать символы, считать длину.

3 — это число (number). Целые и дробные. Можно складывать, вычитать, сравнивать.

true / false — это boolean. Логический тип. Всего два значения: да или нет. Используется в условиях: если true — делаем одно, если false — другое.

Важно: "3" (в кавычках) — это строка, а не число. Кавычки превращают что угодно в текст. typeof покажет тип любого значения.

const name = "Капи";         // строка
const age = 3;              // число
const isHungry = true;      // boolean

typeof name     // "string"
typeof age      // "number"
typeof isHungry // "boolean"

Когда нужно вставить переменную в текст, есть два способа. Старый: склейка через +. Неудобно — легко потерять пробел или кавычку. Новый: обратные кавычки ` и ${переменная} внутри. Читается как обычное предложение. ИИ генерирует так почти всегда.

Обратные кавычки — это не одинарные и не двойные. На клавиатуре — левый верхний угол, клавиша с тильдой ~ (на русской раскладке там Ё). Только в обратных кавычках работает ${}.

const name = "Капибара";
let score = 100;

// старый способ
console.log("Игрок " + name + " набрал " + score);

// новый — читается как обычное предложение
console.log(`Игрок ${name} набрал ${score} очков`);

Представь рецепт. Записал один раз «сварить борщ» — и каждый раз готовишь по нему, не вспоминая шаги заново. Функция работает так же: набор команд под одним именем. Вызвал по имени — команды выполнились.

У функции бывают параметры — пустые слоты для данных. Вызываешь функцию и передаёшь конкретные значения. Функция работает с ними и может вернуть результат через return.

Стрелочная запись: const feed = (food) => { ... } — то же самое, что function feed(food) { ... }, но короче. ИИ часто пишет именно так. => читается как «делает».

function feedCapybara(food, calories) {
  console.log(`Капибара съела ${food}`);
  return calories;
}

feedCapybara("Траву", 1);   // Капибара съела Траву
feedCapybara("Арбуз", 5);  // Капибара съела Арбуз

Массив — это пронумерованный список. Как полка с ячейками: в каждой ячейке лежит что-то, и у каждой есть номер.

Нумерация начинается с нуля, не с единицы. Первый элемент — [0], второй — [1]. Это правило, к нему привыкаешь.

Зачем массивы? Хранить списки: товары в корзине, сообщения в чате, пользователей в таблице. Без массивов пришлось бы создавать отдельную переменную для каждого элемента.

let backpack = ["Мандаринка", "Яблоко"];

backpack.push("Трава");       // добавить в конец
console.log(backpack[0]);     // Мандаринка
console.log(backpack.length); // 3
backpack.pop();               // убрать последний

Объект — набор свойств с именами. Если массив — это полка с номерами, то объект — это анкета: имя, возраст, роль. У каждого свойства есть ключ (имя) и значение.

Обращаешься через точку: capybara.name — «у объекта capybara возьми свойство name».

Важный нюанс: const защищает переменную, не содержимое. const capybara = {...} значит, что capybara нельзя заменить на другой объект. Но свойства внутри менять можно. Коробка приклеена к полке, но вещи внутри перекладываются.

const capybara = {
  name: "Капи",
  role: "Пловец",
  isHungry: true,
  friends: ["Бара", "Макс"]
};

console.log(capybara.name);        // Капи
console.log(capybara.friends[0]); // Бара

capybara.isHungry = false;        // меняем свойство

Программа принимает решения через if/else. Проверяет условие — если true, выполняет один код. Если false — другой.

=== — строгое сравнение. Всегда используй три знака равно. Двойное == сравнивает нестрого: "5" == 5 даёт true, что обычно не то, что нужно.

&& — логическое «И». Оба условия должны быть true. || — логическое «ИЛИ». Достаточно, чтобы хотя бы одно было true.

let mandarins = 0;

if (mandarins === 0) {
  console.log("Спит");
} else if (mandarins > 0 && mandarins < 4) {
  console.log("Кушает");
} else {
  console.log("Танцует");
}

Когда в массиве 100 элементов, обрабатывать каждый вручную невозможно. Нужен способ пройтись по всему списку за одну команду. Для этого есть три метода — каждый делает своё.

.filter() — фильтр. Проходит по массиву и проверяет каждый элемент. Подходит — оставляет. Не подходит — выбрасывает. Результат — новый массив, только с нужными элементами.

.map() — преобразователь. Берёт каждый элемент, что-то с ним делает и кладёт результат в новый массив. Как конвейер: на вход — объекты, на выход — только имена.

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

const capybaras = [
  { name: "Капи", weight: 45 },
  { name: "Бара", weight: 60 },
  { name: "Дон",  weight: 55 }
];

// filter — оставить только подходящих
const heavy = capybaras.filter(c => c.weight >= 50);

// map — преобразовать каждый элемент
const names = capybaras.map(c => c.name);

// forEach — пройти по списку
capybaras.forEach(c => {
  console.log(`${c.name}: ${c.weight} кг`);
});

DOM — это HTML-страница глазами JavaScript. Каждый элемент (кнопка, заголовок, абзац) — это объект, к которому JS может обращаться.

document.getElementById('id') — находит элемент по id. .textContent — меняет текст. .addEventListener — вешает реакцию на действие (клик, ввод текста, наведение мыши).

Это основа любого интерактива на странице. Когда ИИ генерирует код для кнопок, форм, всплывающих окон — это всё DOM + события.

const btn = document.getElementById('my-button');
const display = document.getElementById('result');

display.textContent = "Новый текст";

btn.addEventListener('click', () => {
  display.textContent = "Кнопка нажата";
});