9.05. Программа на JavaScript

ДЛЯ ДЕТЕЙОБЯЗАТЕЛЬНО

Родителям и детям

Как работает JavaScript
Можно выполнить что-то прямо в браузере
переменная
console.log(переменная)

Представьте: вы открываете сайт — и там всё живое. Кнопки реагируют на нажатие, картинки появляются и исчезают, формы проверяют, правильно ли вы ввели email, а иногда даже игра запускается прямо в окне браузера. Всё это — не просто «так устроено». За этим стоит программа, написанная на языке JavaScript.

JavaScript — один из самых распространённых языков программирования в мире. Его главная особенность в том, что он встроен почти во все современные браузеры. Это значит: чтобы начать с ним работать, вам не нужно устанавливать гигабайты программ, регистрироваться, ждать одобрения — достаточно открыть браузер (например, Google Chrome, Яндекс.Браузер или Firefox), нажать одну комбинацию клавиш — и можно писать и запускать код сразу.

Именно эта доступность делает JavaScript отличной отправной точкой для первого знакомства с программированием.

---

Что такое «скриптовый язык» — и почему JavaScript такой удобный

Слово «скрипт» происходит от английского script — сценарий. Как в театре: актёры получают сценарий — чёткую последовательность реплик и действий, и исполняют её по порядку. Точно так же скрипт — это последовательность инструкций для компьютера.

Скриптовые языки — это такие языки программирования, которые не требуют сложной подготовки перед запуском. Обычно программы на «компиляторных» языках (например, C++ или Rust) нужно собрать: перевести с человеческого языка в машинный код, проверить всё заранее, убедиться, что нет ошибок, и только потом запустить. Это как собрать настоящий самолёт перед полётом — надёжно, но долго.

JavaScript работает иначе. Он интерпретируемый: браузер читает код по мере выполнения, строка за строкой, и сразу делает то, что вы написали. Это как читать книгу вслух: вы произносите предложение — и слушатели сразу его понимают. Если вдруг вы ошиблись и сказали «кошка лает», — слушатели удивятся в тот же момент, а не после того, как вы прочитаете всю книгу.

Это даёт три важных преимущества:

1. Мгновенный результат. Вы пишете команду — и сразу видите, что она сделала.
2. Простота старта. Никаких компиляторов, сборок, настроек среды — только текст и браузер.
3. Безопасность. Скрипт работает только внутри браузера и не может случайно стереть файлы на вашем компьютере (в отличие от «полноправных» программ).

💡 Попробуйте прямо сейчас:
Откройте любой сайт (даже этот!), нажмите F12 на клавиатуре (или Ctrl+Shift+I на Windows/Linux, Cmd+Option+I на Mac). Откроется инструменты разработчика. Перейдите во вкладку Console («Консоль»). Введите:

console.log("Привет, Вселенная IT!");

Нажмите Enter.
Вы увидите эту фразу в ответ.
Поздравляем — вы только что запустили свою первую программу на JavaScript.

Вот и весь процесс: написали — запустили — увидели результат. Это и есть суть скриптовых языков.

---

Что такое консоль и DOM-дерево

Чтобы понимать, как JavaScript взаимодействует со страницей, нужно знать две ключевые вещи, которые браузер держит «под капотом»: консоль и DOM-дерево.

Консоль

Консоль — это специальное окно в браузере, где можно:

• писать и выполнять JavaScript-код в реальном времени;
• видеть сообщения, которые сама страница или ваш код выводят туда (например, ошибки или промежуточные результаты);
• задавать вопросы браузеру: «А сколько элементов у тебя на странице?», «Чему равна эта переменная?» — и получать честные ответы.

Консоль не влияет на внешний вид сайта — она внутренняя. Это как диагностический порт у робота: вы подключаетесь и спрашиваете: «Как у тебя с батареей?» — он отвечает цифрами, но при этом продолжает ходить или махать рукой.

Функция console.log() — это команда «напечатай это в консоли». Она не показывает сообщение пользователю на экране (для этого есть другие команды), но оставляет след внутри — для вас, программиста, как заметка в лабораторном журнале.

Пример:

console.log(2 + 2);        // → 4
console.log("Солнце " + "взошло");  // → "Солнце взошло"

DOM-дерево

DOM (Document Object Model — модель объектов документа) — это структура, которую браузер строит, когда загружает веб-страницу.

Вот как это происходит:

1. Браузер получает HTML-код страницы — например:

   <html>
     <head><title>Моя страница</title></head>
     <body>
       <h1>Заголовок</h1>
       <p>Первый абзац</p>
     </body>
   </html>

2. Он превращает этот код в иерархию объектов — как генеалогическое древо:
   • корень: document
     • дочерний: html
       • дочерний: head
         • дочерний: title
       • дочерний: body
         • дочерний: h1
         • дочерний: p

Каждый элемент (<h1>, <p>, <button> и т.д.) становится объектом с набором свойств (например, textContent — текст внутри, style — оформление) и возможностями (методами): «покажись», «скройся», «измени цвет».

JavaScript может читать и изменять это дерево. Например:

// Найти первый абзац на странице
let paragraph = document.querySelector("p");

// Изменить его текст
paragraph.textContent = "Теперь я другой абзац!";

// Сделать его жёлтым
paragraph.style.backgroundColor = "yellow";

После выполнения этого кода вы увидите, как текст и фон абзаца изменились — прямо на глазах.

То есть:

• HTML — это исходный план страницы (как чертёж дома).
• DOM-дерево — это собранный дом, в котором можно передвигать мебель, включать свет, красить стены.
• JavaScript — это работник, который умеет читать план и делать всё это по вашей команде.

---

Как работает JavaScript

JavaScript — язык с однопоточным выполнением. Это означает: он выполняет команды одну за другой, строго по порядку, как ученик, решающий примеры в тетради.

Но! Чтобы не «зависать» на долгих операциях (например, загрузка картинки из интернета), JavaScript использует асинхронную модель событий. Это как почтальон, который не ждёт, пока вы прочитаете письмо, а бросает его в ящик и идёт дальше по маршруту. Когда вы готовы прочитать — вы подходите к ящику.

Однако для начала достаточно понимать базовый принцип:
Команды читаются сверху вниз. Если что-то написано раньше — оно выполнится раньше.

Пример:

console.log("Шаг 1");
console.log("Шаг 2");
console.log("Шаг 3");

В консоли вы увидите:

Шаг 1
Шаг 2
Шаг 3

— и никогда в другом порядке.

Но что, если вы напишете:

console.log(привет);

(без кавычек, и с маленькой буквы)?
Браузер скажет: ReferenceError: привет is not defined.
Почему? Потому что он ищет переменную с именем привет, а не просто слово. А переменной такой нет — значит, ошибка.

Отсюда — важный вывод: в программировании всё имеет точный смысл. Кавычки, большие и маленькие буквы, скобки — всё важно. Это не каприз, а необходимость: компьютер не умеет «догадываться», он делает ровно то, что написано.

---

Переменная

Самое фундаментальное понятие — переменная.

Переменная — это именованное хранилище для данных. Представьте коробку. На ней наклеена этикетка: например, возраст. Внутри коробки лежит число: 12. Если завтра вам исполнится 13 — вы просто замените содержимое коробки, а этикетка останется той же.

В JavaScript переменную создают с помощью ключевого слова let (можно и const, но let проще для начала):

let возраст = 12;
console.log(возраст);  // → 12

Что здесь произошло:

• let — команда: «создай новую переменную»;
• возраст — имя переменной (идентификатор). Оно должно быть уникальным в своей области видимости;
• = — оператор присваивания: «положи в коробку возраст значение справа»;
• 12 — значение (число);
• console.log(возраст) — «покажи в консоли, что сейчас внутри коробки возраст».

Переменные могут хранить разные типы данных:

• числа: let год = 2025;
• строки (текст в кавычках): let имя = "Алёна";
• логические значения: let готов = true; или let устал = false;
• и даже более сложные структуры — но об этом позже.

Важно: имя переменной не может быть на русском в реальных проектах (лучше использовать английский: age, name, isReady). Но для обучения — можно и по-русски, чтобы было понятнее сейчас. Главное — не смешивать: либо всё по-русски, либо всё по-английски.

Также: JavaScript чувствителен к регистру.
Возраст, возраст, vozrast — три разные переменные.

Можно изменить значение позже:

let счёт = 0;
console.log(счёт);  // → 0

счёт = счёт + 1;    // взять текущее значение счёта, прибавить 1, положить обратно
console.log(счёт);  // → 1

счёт += 5;          // короткая запись: счёт = счёт + 5;
console.log(счёт);  // → 6

Это не математическое равенство (в математике x = x + 1 — бессмыслица), а инструкция: «обнови значение переменной».

---

Практика

Давайте соберём всё вместе. Напишем небольшую программу, которая:

1. хранит список комплиментов в переменной;
2. выбирает один случайным образом;
3. выводит его в консоль.

// Шаг 1: создаём переменную — массив комплиментов
let комплименты = [
  "Ты отлично соображаешь!",
  "У тебя золотые руки!",
  "Ты задаёшь самые умные вопросы!",
  "Ты — настоящий исследователь!",
  "Ты умеешь замечать детали — это редкий дар!"
];

// Шаг 2: выбираем случайный индекс (от 0 до 4)
let случайныйИндекс = Math.floor(Math.random() * комплименты.length);

// Шаг 3: получаем комплимент по этому индексу
let комплимент = комплименты[случайныйИндекс];

// Шаг 4: выводим в консоль
console.log("🌟 " + комплимент);

Разберём по частям:

• [ ... ] — это массив: список значений, упорядоченный по номерам (начинаются с 0!).
• комплименты.length — сколько элементов в массиве (в нашем случае — 5).
• Math.random() — встроенный метод, возвращающий случайное число от 0 (включительно) до 1 (не включая 1).
• Math.random() * 5 → число от 0 до почти 5.
• Math.floor(...) — округляет вниз, до ближайшего целого: 0, 1, 2, 3 или 4.
• комплименты[2] — «достань элемент из массива под номером 2» (это третий по счёту!).

Каждый раз, когда вы запускаете этот код — появляется новый комплимент. Попробуйте выполнить его 5 раз подряд в консоли.

---

Направления для самостоятельных экспериментов

Теперь у вас есть фундамент:

• вы знаете, как открыть консоль;
• можете писать команды и видеть результат;
• понимаете, что такое переменная и как её использовать;
• знаете, что JavaScript «живёт» внутри браузера и умеет менять страницу через DOM.

Предлагаю вам попробовать эти задания (все — в консоли браузера):

1. Создайте две переменные: a = 5, b = 7. Выведите в консоль их сумму, разность и произведение.
2. Напишите let имя = "ваше имя";, затем выведите фразу: "Привет, " + имя + "!"
3. Откройте любой сайт с кнопками (например, YouTube). В консоли введите:
   document.querySelector("button") — что вернётся?
   А если document.querySelectorAll("button").length?
4. **Измените заголовок этой (или любой другой) страницы:

   document.title = "Я — программист!";

   Что изменилось в браузере?**
5. **Добавьте на страницу новый элемент:

   let элемент = document.createElement("div");
   элемент.textContent = "Это появилось по магии JavaScript!";
   элемент.style.color = "blue";
   элемент.style.fontSize = "20px";
   document.body.appendChild(элемент);
   ```**

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

---

Ваша первая «настоящая» программа

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

Это проще, чем кажется.

Шаг 1. Создайте HTML-файл

Откройте Блокнот (Windows), TextEdit (в режиме «простой текст», Mac) или любой текстовый редактор — даже VS Code, если он у вас есть.

Вставьте следующее:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая программа</title>
</head>
<body>
  <h1>Добро пожаловать в JavaScript!</h1>
  <p>Откройте консоль (F12 → Console), чтобы увидеть приветствие.</p>

  <!-- Подключаем JavaScript-файл -->
  <script src="script.js"></script>
</body>
</html>

Сохраните этот файл как index.html (важно: расширение именно .html).

Шаг 2. Создайте JavaScript-файл

В той же папке создайте новый файл и назовите его script.js.

В него впишите:

// Это комментарий — его браузер игнорирует.
// Здесь можно писать пояснения для себя и других.

console.log("Здравствуйте! Вы только что запустили JavaScript-файл.");
console.log("Этот код выполняется автоматически при открытии страницы.");

let приветствие = "Я работаю из файла!";
console.log(приветствие);

Шаг 3. Запустите

Дважды кликните по index.html — он откроется в браузере.
Теперь нажмите F12, перейдите в Console — и вы увидите три сообщения.

Поздравляем: вы создали полноправную веб-страницу с собственной программой.
Это — точка входа в настоящую разработку. Отныне вы не просто экспериментируете, а создаёте.

💡 Почему это важно?
Когда код лежит в файле, его можно:

• редактировать, сохранять, делиться;
• подключать к разным страницам;
• дополнять другими файлами (стили, картинки, библиотеки);
• запускать на телефоне, планшете, компьютере — везде, где есть браузер.

---

Функция

Допустим, вы часто складываете два числа. Писать каждый раз a + b и console.log(...) утомительно. Хотелось бы сказать: «Сделай сложение для этих двух чисел» — и получить результат.

Для этого существуют функции.

Функция — это именованный блок кода, который можно вызвать в любой момент.

Пример:

// Объявление функции
function сложить(первое, второе) {
  let сумма = первое + второе;
  console.log("Сумма: " + сумма);
  return сумма; // возвращает результат наружу
}

// Вызов функции
сложить(3, 5);      // → Сумма: 8
сложить(10, -2);    // → Сумма: 8

let результат = сложить(7, 4);  // → Сумма: 11
console.log("Результат равен " + результат);  // → Результат равен 11

Разберём структуру:

• function — ключевое слово: «вот будет функция»;
• сложить — её имя (должно быть уникальным и понятным);
• (первое, второе) — параметры («входные данные», как ингредиенты для рецепта);
• { ... } — тело функции: что делать с этими данными;
• return — команда: «останови выполнение и выдай это значение наружу».

Функцию можно вызывать сколько угодно раз — и каждый раз она будет работать с теми данными, которые вы ей передали.

📌 Важно:

• Параметры внутри функции — это локальные переменные. За пределами функции они не существуют.
• Если не написать return, функция вернёт undefined («ничего»).
• Имя функции пишется с маленькой буквы и без пробелов: посчитатьСреднее, показатьОкно, обновитьСчёт.

Пример: функция-поздравление

function поздравить(имя, возраст) {
  let сообщение = "С Днём Рождения, " + имя + "! Тебе уже " + возраст + " лет — это круто!";
  console.log(сообщение);
  return сообщение;
}

поздравить("Маша", 10);
// → С Днём Рождения, Маша! Тебе уже 10 лет — это круто!

Теперь, если у вас список имён и возрастов, вы можете поздравить всех — одной строкой кода на человека.

Функции превращают хаос команд в организованную систему, где каждая часть отвечает за свою задачу. Это как в конструкторе: у вас есть блок «двигатель», «колесо», «фара» — и вы собираете из них машину, не вырезая каждый раз всё заново из картона.

---

События

До сих пор программа выполнялась сама по себе — сразу при загрузке. Но настоящие программы реагируют на действия: клик, нажатие клавиши, прокрутку, ввод текста.

Для этого существует система событий (events).

Событие — это сигнал от браузера: «Пользователь нажал», «Курсор наведён», «Страница загружена».

Чтобы на событие отреагировать, нужно:

1. выбрать элемент (например, кнопку);
2. назначить ему обработчик события — функцию, которая вызовется при наступлении события.

Практика

Добавим в index.html кнопку:

<button id="кнопка">Нажми меня!</button>

А в script.js — следующий код (лучше в самый конец файла, после всего остального):

// 1. Найти кнопку по её id
let кнопка = document.getElementById("кнопка");

// 2. Назначить обработчик события "click"
кнопка.addEventListener("click", function() {
  console.log("Вы нажали кнопку! 👏");
});

Объяснение:

• document.getElementById("кнопка") — ищет элемент с id="кнопка";
• .addEventListener(...) — метод: «когда случится событие X, выполни функцию Y»;
• "click" — название события (есть и "keydown", "mouseover", "submit" и др.);
• function() { ... } — анонимная функция: она не имеет имени, потому что нужна только здесь.

Теперь обновите страницу и нажмите на кнопку. В консоли появится сообщение — каждый раз, когда вы нажимаете.

Можно сделать и красивее — не в консоли, а на странице:

кнопка.addEventListener("click", function() {
  let сообщение = document.createElement("p");
  сообщение.textContent = "🎉 Ура! Кнопка сработала!";
  сообщение.style.color = "green";
  document.body.appendChild(сообщение);
});

Теперь при каждом нажатии под кнопкой появляется новый абзац.

Это — начало интерактивности. Именно так работают:

• формы регистрации (проверка пароля при вводе);
• игры (реакция на стрелки);
• фильтры (отбор товаров при клике на «цена по возрастанию»).

А что, если элемента ещё нет?

Иногда JavaScript-файл подключают в <head>, а сам HTML ещё не загружен — тогда document.getElementById не найдёт кнопку.

Чтобы избежать ошибки, можно «подождать», пока страница полностью построит DOM-дерево:

document.addEventListener("DOMContentLoaded", function() {
  // Здесь можно безопасно искать элементы
  let кнопка = document.getElementById("кнопка");
  кнопка.addEventListener("click", function() {
    console.log("Страница готова. Клик обработан.");
  });
});

Событие DOMContentLoaded означает: «Всё, DOM построен. Можно работать».

---

Как браузер «видит» ваш код

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

Упрощённая схема:

1. Загружает HTML.
2. По мере чтения:
   • создаёт DOM-элементы;
   • если встречает <script src="..."> — останавливается, скачивает и выполняет файл;
   • если встречает <script> без src — выполняет код в этом месте.
3. Когда весь HTML прочитан и все скрипты выполнены — отправляет событие DOMContentLoaded.
4. Потом, когда загружены картинки и стили — событие load.

Поэтому:

• Если скрипт находится до кнопки в HTML — он не найдёт кнопку.
• Если скрипт в <head> — почти наверняка не найдёт тело страницы.
• Решения:
  • ставить <script> в самый конец <body>;
  • или использовать DOMContentLoaded.

Пример правильной структуры:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Правильная загрузка</title>
</head>
<body>
  <button id="btn">Нажми</button>

  <!-- Скрипт в конце — DOM уже готов -->
  <script src="script.js"></script>
</body>
</html>

---

Мини-проект: «Счётчик кликов»

Теперь соберём всё вместе: переменные, функции, события, DOM.

Задача: сделать кнопку, которая считает, сколько раз по ней кликнули, и показывает число на странице.

HTML (index.html):

<button id="счётчик">Кликни меня!</button>
<p id="результат">Нажатий: 0</p>
<script src="script.js"></script>

JavaScript (script.js):

// 1. Ищем элементы
let кнопка = document.getElementById("счётчик");
let поле = document.getElementById("результат");

// 2. Создаём переменную-счётчик
let нажатия = 0;

// 3. Определяем функцию обновления
function обновитьСчёт() {
  нажатия = нажатия + 1;
  поле.textContent = "Нажатий: " + нажатия;
}

// 4. Привязываем функцию к кнопке
кнопка.addEventListener("click", обновитьСчёт);

Что происходит:

• При каждом клике вызывается обновитьСчёт;
• Она увеличивает нажатия на 1;
• Меняет текст абзаца через textContent.

Можно усложнить:

• Добавить кнопку «Сброс»;
• Менять цвет при чётных/нечётных кликах;
• Показывать сообщение при 10 кликах.

Это уже — маленькая программа. И она работает везде: на компьютере, на телефоне, в браузере без интернета (если файлы локальные).

---

Почему JavaScript — не просто «язык для сайтов»

Многие думают: JavaScript — только для браузера. Это было верно 20 лет назад. Сегодня:

• Node.js позволяет запускать JavaScript на сервере (как Python или Java);
• Electron — делать полноценные программы для Windows/macOS/Linux (например, VS Code, Discord);
• React Native, Capacitor — создавать мобильные приложения под Android и iOS;
• WebAssembly + JS — писать высокопроизводительные игры и редакторы (Figma, Photoshop в браузере).

Но фундамент остаётся тем же: переменные, функции, события, работа с данными.

Освоив JavaScript здесь, в браузере, вы получаете ключ ко всем этим дверям.

---

Что запомнить (без зубрёжки — через понимание)

Понятие	Аналогия	Зачем нужно
Консоль	Лабораторный журнал	Видеть промежуточные результаты, искать ошибки
DOM-дерево	Карта здания	Находить и менять элементы страницы
Переменная	Коробка с этикеткой	Хранить данные и переиспользовать их
Функция	Рецепт или кнопка	Упаковать логику для повторного вызова
Событие	Звонок в дверь	Реагировать на действия пользователя
Файл .js	Инструкция, приложенная к письму	Делать программу постоянной, а не одноразовой

---

Домашнее задание (на выбор — делайте то, что интересно)

1. «Цветная кнопка»
   Сделайте кнопку, которая при каждом клике меняет цвет фона страницы на случайный.
   Подсказка: document.body.style.backgroundColor = "rgb(255, 100, 50)".

2. «Калькулятор-однокнопочник»
   Добавьте два поля ввода (<input type="number" id="a">), кнопку «Сложить» и поле вывода. При нажатии — складывайте числа и показывайте результат.
   Подсказка: parseInt(document.getElementById("a").value).

3. «Генератор имени супергероя»
   Пусть есть два массива:
   let прилагательные = ["Молниеносный", "Невидимый", ...];
let существительные = ["Пингвин", "Тостер", ...];
   Напишите функцию, которая при клике создаёт имя вида «Молниеносный Тостер» и показывает его на странице.

4. «Живой заголовок»
   Сделайте так, чтобы заголовок страницы (вкладка браузера) менялся каждые 2 секунды:

   setInterval(function() {
     document.title = "Тик-так: " + new Date().getSeconds();
   }, 2000);

---

Условия

Компьютер не «думает», но он умеет сравнивать — и в зависимости от результата выполнять разные действия.

Это реализуется с помощью условных конструкций: if, else if, else.

Базовый синтаксис

if (условие) {
  // код, который выполнится, если условие ИСТИННО (true)
} else {
  // код, который выполнится, если условие ЛОЖНО (false)
}

Условие — это выражение, которое в итоге даёт либо true, либо false.
Оно может включать:

• сравнения: >, <, >=, <=, == (равно), === (строгое равенство — рекомендуется), !=, !==;
• логические операторы: && (и), || (или), ! (не).

Примеры:

let возраст = 13;

if (возраст >= 12) {
  console.log("Вы можете смотреть фильм без родителей.");
} else {
  console.log("Нужно разрешение взрослого.");
}

let логин = "admin";
let пароль = "12345";

if (логин === "admin" && пароль === "12345") {
  console.log("Доступ разрешён.");
} else {
  console.log("Неверный логин или пароль.");
}

Цепочка условий: else if

Если вариантов больше двух — можно добавлять промежуточные проверки:

let баллы = 85;

if (баллы >= 90) {
  console.log("Отлично! Оценка: 5");
} else if (баллы >= 75) {
  console.log("Хорошо! Оценка: 4");
} else if (баллы >= 60) {
  console.log("Удовлетворительно. Оценка: 3");
} else {
  console.log("Нужно повторить. Оценка: 2");
}

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

💡 Почему ===, а не ==?
В JavaScript == делает неявное приведение типов:
"5" == 5 → true (строка превратилась в число).
Это часто ведёт к ошибкам.
=== требует совпадения и значения, и типа:
"5" === 5 → false — и это честно.
Всегда используйте === и !==, если специально не нужна гибкость ==.

Практика: возраст и доступ

Добавьте в script.js:

function проверитьВозраст(возраст) {
  if (возраст < 0) {
    return "Возраст не может быть отрицательным.";
  } else if (возраст < 6) {
    return "Добро пожаловать в детский сад!";
  } else if (возраст < 12) {
    return "Пора в школу!";
  } else if (возраст < 18) {
    return "Вы уже почти взрослый.";
  } else {
    return "Добро пожаловать во взрослую жизнь!";
  }
}

console.log(проверитьВозраст(10));  // → Пора в школу!
console.log(проверитьВозраст(20));  // → Добро пожаловать во взрослую жизнь!

---

Циклы

Иногда нужно выполнить одно и то же действие много раз:
«Напечатай числа от 1 до 10»,
«Проверь все элементы в списке»,
«Жди, пока пользователь не введёт правильный ответ».

Для этого — циклы.

Цикл for: когда известно, сколько раз повторять

Синтаксис:

for (начало; условие; шаг) {
  // тело цикла
}

Пример: вывести квадраты чисел от 1 до 5.

for (let i = 1; i <= 5; i = i + 1) {
  console.log(i + " в квадрате = " + (i * i));
}

Результат:

1 в квадрате = 1
2 в квадрате = 4
3 в квадрате = 9
4 в квадрате = 16
5 в квадрате = 25

Разбор:

• let i = 1 — создаём счётчик, начинаем с 1;
• i <= 5 — пока i не превысит 5, продолжать;
• i = i + 1 — после каждой итерации увеличить i на 1 (можно писать i++ — короткая форма).

Цикл while: пока условие истинно

Используется, когда заранее неизвестно, сколько раз повторять.

Пример: уменьшать число до нуля, но не меньше.

let счёт = 3;

while (счёт > 0) {
  console.log("Обратный отсчёт: " + счёт);
  счёт = счёт - 1;
}

console.log("Пуск!");

Вывод:

Обратный отсчёт: 3
Обратный отсчёт: 2
Обратный отсчёт: 1
Пуск!

⚠️ Осторожно: если условие while никогда не станет ложным — программа «зависнет».
Это называется бесконечный цикл. Чтобы прервать — закройте вкладку или нажмите Ctrl+C в консоли Node.js.

Практика: таблица умножения

for (let множитель = 1; множитель <= 10; множитель++) {
  console.log("Таблица на " + множитель + ":");
  for (let n = 1; n <= 10; n++) {
    console.log("  " + множитель + " × " + n + " = " + (множитель * n));
  }
  console.log("---");
}

Здесь цикл внутри цикла — так можно строить таблицы, матрицы, шахматные доски.

---

Формы

До сих пор мы работали с console.log и DOM-элементами, созданными вручную. Но чтобы программа взаимодействовала, нужно принимать ввод.

Для этого — HTML-формы и поля ввода.

Базовый элемент: <input>

<input type="text" id="имя" placeholder="Введите имя">
<button id="приветствовать">Поздороваться</button>
<p id="ответ"></p>

• type="text" — поле для текста;
• placeholder — подсказка внутри поля;
• id — чтобы найти его из JavaScript.

Чтение значения

let полеИмени = document.getElementById("имя");
let имя = полеИмени.value;  // ← именно .value, не .textContent!

🔍 Важно:

• .textContent — для текста внутри элемента (<p>текст</p>);
• .value — для введённого пользователем значения (<input> и <textarea>).

Полный пример: приветствие по имени

let кнопка = document.getElementById("приветствовать");
let полеИмени = document.getElementById("имя");
let полеОтвета = document.getElementById("ответ");

кнопка.addEventListener("click", function() {
  let введённоеИмя = полеИмени.value.trim(); // .trim() убирает пробелы по краям

  if (введённоеИмя === "") {
    полеОтвета.textContent = "Пожалуйста, введите имя.";
    полеОтвета.style.color = "red";
  } else {
    полеОтвета.textContent = "Привет, " + введённоеИмя + "! Рады тебя видеть.";
    полеОтвета.style.color = "green";
  }
});

Теперь программа проверяет, ввёл ли человек что-то — и реагирует по-разному.

Типы полей ввода

Тип	Пример	Зачем
type="text"	Любое слово	Имя, город
type="number"	42	Число — браузер блокирует буквы
type="email"	tim@example.com	Проверяет формат email
type="range"	ползунок от 1 до 100	Громкость, яркость
type="checkbox"	✔️	«Согласен с правилами»
type="color"	палитра	Выбор цвета

Пример с числом:

<label>Сколько вам лет? <input type="number" id="возраст" min="1" max="150"></label>
<button id="проверить">Проверить</button>
<p id="результатВозраста"></p>

document.getElementById("проверить").addEventListener("click", function() {
  let возраст = parseInt(document.getElementById("возраст").value);
  // parseInt — превращает строку "15" в число 15

  if (isNaN(возраст)) {
    // isNaN = is Not a Number
    document.getElementById("результатВозраста").textContent = "Введите число!";
  } else if (возраст < 6) {
    document.getElementById("результатВозраста").textContent = "Детский сад ждёт!";
  } else if (возраст < 12) {
    document.getElementById("результатВозраста").textContent = "Пора за парту!";
  } else {
    document.getElementById("результатВозраста").textContent = "Вы уже знаете JavaScript — это круто!";
  }
});

---

Мини-проект: игра «Угадай число»

Теперь соберём всё:

• генерация случайного числа,
• цикл попыток (на самом деле — событие «нажал»),
• условия сравнения,
• работа с формой и выводом.

Цель игры

Компьютер «загадывает» число от 1 до 100.
Пользователь вводит свою версию.
Программа отвечает:

• «Загаданное число больше»,
• «Загаданное число меньше»,
• или «Поздравляем! Вы угадали за N попыток!»

HTML (index.html)

<h2>🎮 Угадай число (от 1 до 100)</h2>
<input type="number" id="ввод" min="1" max="100" placeholder="Ваш вариант">
<button id="отправить">Отправить</button>
<button id="сбросить">Новая игра</button>
<p id="подсказка">Компьютер загадал число. Попробуйте угадать!</p>
<p id="счётчик">Попыток: 0</p>

JavaScript (script.js)

// Глобальные переменные (доступны во всех функциях)
let загаданноеЧисло;
let попыток = 0;

// Функция инициализации игры
function начатьИгру() {
  загаданноеЧисло = Math.floor(Math.random() * 100) + 1; // от 1 до 100
  попыток = 0;
  document.getElementById("подсказка").textContent = "Число загадано! Попробуйте угадать.";
  document.getElementById("подсказка").style.color = "black";
  document.getElementById("счётчик").textContent = "Попыток: 0";
  document.getElementById("ввод").value = ""; // очистить поле
}

// Запуск игры при загрузке
начатьИгру();

// Обработчик кнопки "Отправить"
document.getElementById("отправить").addEventListener("click", function() {
  let введённоеЧисло = parseInt(document.getElementById("ввод").value);

  // Проверка корректности ввода
  if (isNaN(введённоеЧисло) || введённоеЧисло < 1 || введённоеЧисло > 100) {
    document.getElementById("подсказка").textContent = "Введите число от 1 до 100.";
    document.getElementById("подсказка").style.color = "orange";
    return; // прервать выполнение функции
  }

  попыток++;

  if (введённоеЧисло === загаданноеЧисло) {
    document.getElementById("подсказка").textContent = 
      "🎉 Поздравляем! Вы угадали число " + загаданноеЧисло + " за " + попыток + " попыток!";
    document.getElementById("подсказка").style.color = "green";
  } else if (введённоеЧисло < загаданноеЧисло) {
    document.getElementById("подсказка").textContent = "Загаданное число больше.";
    document.getElementById("подсказка").style.color = "blue";
  } else {
    document.getElementById("подсказка").textContent = "Загаданное число меньше.";
    document.getElementById("подсказка").style.color = "purple";
  }

  document.getElementById("счётчик").textContent = "Попыток: " + попыток;
});

// Обработчик кнопки "Новая игра"
document.getElementById("сбросить").addEventListener("click", начатьИгру);

Как это работает

1. При открытии страницы вызывается начатьИгру() — число загадано.
2. Пользователь вводит число и нажимает «Отправить».
3. Программа:
   • проверяет, что введено корректное число;
   • увеличивает счётчик попыток;
   • сравнивает с загаданным;
   • даёт подсказку или объявляет победу.
4. Кнопка «Новая игра» сбрасывает всё и генерирует новое число.

Возможные улучшения (для самостоятельной доработки)

• Добавить ограничение: «Максимум 7 попыток» — и проигрыш, если не угадал.
• Хранить рекорд: сколько попыток было минимально — и показывать после победы.
• Менять фон: красный при «меньше», синий при «больше», зелёный при победе.
• Добавить звуковые эффекты через new Audio("sound.mp3").play() (если есть файл).

---

Почему условия и циклы — основа логики

Вся программа — это последовательность вопросов и повторений:

• «Если пользователь нажал Enter — отправить форму»
• «Пока не найдено совпадение — перебирай массив»
• «Если файл загружен — показать превью, иначе — ошибку»

Без if и for мы могли бы только показывать статичные надписи.
С ними — создаём алгоритмы: чёткие инструкции для решения задач.

Именно поэтому программирование — не про «запоминание синтаксиса», а про структурирование мышления:

1. Как разбить задачу на шаги?
2. Где нужно сравнить?
3. Что повторять — и когда остановиться?

---