• title: "Примеры фигур на Processing/p5.js" doc: lab/examples/1114
    • title: "SVG — рисунки кодом" doc: lab/examples/1119
    • title: "Canvas 2D — программируемая графика" doc: encyclopedia/5-languages/5-01-javascript/47

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

ОБЯЗАТЕЛЬНО ДЛЯ НОВИЧКОВ

Начальный уровень

Интерактив

Демо ниже — нажимайте кнопки и смотрите, как это устроено. Ничего на компьютере не меняется.

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

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

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

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

Рисование фигур в браузере

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

На p5.js — Примеры фигур на Processing/p5.js (запуск в онлайн-редакторе).

На SVG — те же фигуры разметкой в HTML: SVG — рисунки кодом.

Теория холста — Canvas 2D; тег `<svg>` — справочник HTML.

Что такое "скриптовый язык"

Слово "скрипт" происходит от английского 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>
  1. Он превращает этот код в иерархию объектов — как генеалогическое древо:
    • корень: 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

Это инструкция: "обнови значение переменной".

Практика

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

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

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

  • [ ... ] — это массив: список значений, упорядоченный по номерам (начинаются с 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, если он у вас есть.

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

Сохраните этот файл как 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;
  • Меняет текст абзаца через 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 Инструкция, приложенная к письму Делать программу постоянной, а не одноразовой

Условия

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

Это реализуется с помощью условных конструкций — 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:

Циклы

Иногда нужно выполнить одно и то же действие много раз:
"Напечатай числа от 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>).

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

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

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

Тип Пример Зачем
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>

Мини-проект — игра "Угадай число"

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

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

Цель игры

Компьютер "загадывает" число от 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)

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

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

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

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

Условия и циклы — основа логики

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

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

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

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

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