🎯 Цель урока

В этом уроке мы добавим интерактивность нашему генератору комплиментов с помощью JavaScript. Изучим работу с массивами данных, случайный выбор элементов, обработку пользовательского ввода и динамическое обновление интерфейса.

💡 Что вы узнаете:

• Работу с массивами и объектами данных
• Случайный выбор элементов
• Обработку полей ввода
• События клавиатуры
• Динамическое изменение содержимого

📚 Ключевые концепции JavaScript

Массивы (Arrays)

Структуры данных для хранения списков элементов: ['элемент1', 'элемент2', 'элемент3']

Math.random()

Генерирует случайное число от 0 до 1 для выбора случайных элементов

Math.floor()

Округляет число вниз до целого: Math.floor(3.7) = 3

document.getElementById()

Находит HTML элемент по его id для изменения содержимого

element.value

Получает или устанавливает значение в поле ввода

event.key

Определяет, какая клавиша была нажата (например, 'Enter')

🛠️ Добавляем логику

Давайте создадим JavaScript код для нашего генератора:

<script>
  // Переменная для хранения имени пользователя
  let userName = '';
  
  // Массив с комплиментами
  const compliments = [
    "Ты потрясающий человек!",
    "У тебя прекрасная улыбка!",
    "Ты делаешь мир лучше!",
    "Ты очень талантливый!",
    "С тобой всегда весело!",
    "Ты настоящий друг!",
    "У тебя золотое сердце!",
    "Ты источник вдохновения!",
    "Твоя доброта согревает!",
    "Ты умеешь дружить!"
  ];
  
  // Функция для установки имени
  function setName() {
    const nameInput = document.getElementById('nameInput');
    userName = nameInput.value.trim();
    
    if (userName) {
      alert(`Привет, ${userName}! Теперь комплименты будут персонально для тебя! 🌟`);
    } else {
      alert('Введи своё имя, чтобы комплименты стали персональными! 😊');
    }
  }
  
  // Функция для обработки нажатия Enter
  function handleKeyPress(event) {
    if (event.key === 'Enter') {
      setName();
    }
  }
  
  // Главная функция генерации комплимента
  function generateCompliment() {
    // Выбираем случайный комплимент
    const randomIndex = Math.floor(Math.random() * compliments.length);
    let compliment = compliments[randomIndex];
    
    // Если есть имя, добавляем его к комплименту
    if (userName) {
      compliment = `${userName}, ${compliment.toLowerCase()}`;
    }
    
    // Показываем комплимент
    document.getElementById('complimentDisplay').textContent = compliment;
  }
</script>

🔍 Разбор логики:

• let userName = '' — переменная для имени
• const compliments = [...] — массив с комплиментами
• Math.random() * compliments.length — случайный индекс
• nameInput.value.trim() — получаем значение без пробелов
• event.key === 'Enter' — проверяем нажатие Enter

🔧 Обновляем HTML

Добавим обработчики событий к нашему HTML:

<div class="input-section">
  <p>Как тебя зовут?</p>
  <input 
    type="text" 
    id="nameInput" 
    class="name-input" 
    placeholder="Твоё имя"
    onkeypress="handleKeyPress(event)">
  <br>
  <button class="category-button" onclick="setName()">
    ✨ Сохранить имя
  </button>
</div>

<button class="compliment-button" onclick="generateCompliment()">
  🎁 Получить комплимент!
</button>

<div class="compliment-display" id="complimentDisplay">
  Нажми на кнопку, чтобы получить свой первый комплимент! 🌈
</div>

Ключевые изменения:

onkeypress="handleKeyPress(event)" — обработка Enter
onclick="setName()" — сохранение имени
onclick="generateCompliment()" — генерация комплимента

🎮 Демонстрация работы

Попробуйте интерактивную версию нашего генератора:

😊 Генератор комплиментов 😊

Создай хорошее настроение себе и друзьям!

Как тебя зовут?

Нажми на кнопку, чтобы получить свой первый комплимент! 🌈

🧠 Алгоритм случайного выбора

Разберём пошагово, как работает выбор случайного комплимента:

// 1. У нас есть массив из 10 комплиментов (индексы 0-9)
const compliments = ["комплимент1", "комплимент2", ...]; // length = 10

// 2. Генерируем случайное число от 0 до 1
Math.random() // например, 0.7284

// 3. Умножаем на длину массива
Math.random() * compliments.length // 0.7284 * 10 = 7.284

// 4. Округляем вниз до целого числа
Math.floor(Math.random() * compliments.length) // Math.floor(7.284) = 7

// 5. Используем как индекс массива
compliments[7] // получаем комплимент с индексом 7

Почему Math.floor()?

Потому что индексы массива должны быть целыми числами: 0, 1, 2, 3... а не 2.5 или 7.8

📝 Работа с пользовательским вводом

Получение значения из поля:

const nameInput = document.getElementById('nameInput');
const userName = nameInput.value.trim();

Обработка клавиатуры:

function handleKeyPress(event) {
  if (event.key === 'Enter') {
    setName(); // Вызываем функцию при нажатии Enter
  }
}

Персонализация комплиментов:

if (userName) {
  compliment = `${userName}, ${compliment.toLowerCase()}`;
  // Результат: "Анна, ты потрясающий человек!"
}

💡 Полезные приёмы:

• .trim() убирает лишние пробелы
• .toLowerCase() делает текст строчным
• Шаблонные строки `${переменная}` вставляют значения
• Проверка if (userName) работает для непустых строк

🎓 Что вы изучили

Создание и использование массивов данных
Генерацию случайных чисел и выбор элементов
Работу с полями ввода и получение значений
Обработку событий клавиатуры
Персонализацию контента
Динамическое изменение содержимого страницы
Валидацию пользовательского ввода

🚀 Что дальше?

В следующем уроке мы добавим систему категорий комплиментов, статистику кликов и научимся создавать более сложную логику приложения!

⚡ JavaScript логика