Перейти к основному содержимому

Тренажёр

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

Тренажёр прямо здесь:

Можете поэкспериментировать с JavaScript прямо здесь:

📜 Правила и ограничения​

  • 📜 Общий принцип - всё, что укажем в return - будет выведено ниже. Так можно быстро и просто, как в песочнице, опробовать некоторые вещи, узнав, что выведется. Все примеры — React-компоненты, потому что именно так работает live-режим: → обязательно должна быть функция, возвращающая JSX, строку, число или массив.

  • ✅ Работает:
    React, useState, useEffect, window, location, URL, Date, Math, JSON, Intl, Array.prototype.*, String.prototype.*.

  • ❌ Не работает:
    console.log() (не отображается), import/require, fetch (ограничен CORS), Node.js-специфика.

  • 🔒 Безопасность:
    Код исполняется только у вас — в браузере.

🛠 Основные шаблоны​

1. Приветствие (строка)​

Интерактивный редактор
function Greeting() {
  return "Привет из Вселенной IT! 🌌";
}
Результат
Loading...

2. Арифметика и логика​

Интерактивный редактор
function MathDemo() {
  const a = 17, b = 5;
  return (
    <div>
      <p>{a} + {b} = {a + b}</p>
      <p>{a} % {b} = {a % b} (остаток)</p>
      <p>{a} > {b} ? <b>да</b> : нет</p>
    </div>
  );
}
Результат
Loading...

3. Работа с window.location​

Интерактивный редактор
function LocationInfo() {
  return (
    <div style={{ fontFamily: 'monospace' }}>
      <div>📍 Протокол: <b>{window.location.protocol}</b></div>
      <div>🌐 Хост: <b>{window.location.host}</b></div>
      <div>📁 Путь: <b>{window.location.pathname}</b></div>
      <div>🔗 Полный URL: <b>{window.location.href}</b></div>
    </div>
  );
}
Результат
Loading...

4. Парсинг URL-параметров​

Интерактивный редактор
function URLParams() {
  const search = new URLSearchParams(window.location.search);
  const params = {};
  for (let [key, value] of search) {
    params[key] = value;
  }
  return Object.keys(params).length > 0 ? (
    <div>
      <b>Параметры URL:</b>
      <pre>{JSON.stringify(params, null, 2)}</pre>
    </div>
  ) : (
    <div>Нет параметров в URL (попробуйте добавить в адресную строку: <code>?debug=true&lang=ru</code>)</div>
  );
}
Результат
Loading...

5. Дата и время​

Интерактивный редактор
function DateTime() {
  const now = new Date();
  return (
    <div>
      <p>📅 Сегодня: <b>{now.toLocaleDateString('ru-RU')}</b></p>
      <p>🕒 Сейчас: <b>{now.toLocaleTimeString('ru-RU')}</b></p>
      <p>🌍 Часовой пояс: <b>{Intl.DateTimeFormat().resolvedOptions().timeZone}</b></p>
    </div>
  );
}
Результат
Loading...

6. Работа с массивами​

Интерактивный редактор
function ArrayDemo() {
  const numbers = [3, 1, 4, 1, 5, 9];
  return (
    <div>
      <p>Исходный: <code>[{numbers.join(', ')}]</code></p>
      <p>Отсортирован: <code>[{[...numbers].sort((a, b) => a - b).join(', ')}]</code></p>
      <p>Квадраты: <code>[{numbers.map(x => x * x).join(', ')}]</code></p>
      <p>Сумма: <b>{numbers.reduce((s, x) => s + x, 0)}</b></p>
    </div>
  );
}
Результат
Loading...

7. Счётчик (состояние)​

Интерактивный редактор
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div style={{ fontFamily: 'sans-serif' }}>
      <p style={{ fontSize: '1.2em', margin: '8px 0' }}>
        Счётчик: <b style={{ color: '#7B68EE' }}>{count}</b>
      </p>
      <button
        style={{
          padding: '6px 16px',
          margin: '4px',
          backgroundColor: '#7B68EE',
          color: 'white',
          border: 'none',
          borderRadius: '6px',
          cursor: 'pointer',
        }}
        onClick={() => setCount(c => c + 1)}
      >
        +1
      </button>
      <button
        style={{
          padding: '6px 16px',
          margin: '4px',
          backgroundColor: '#ccc',
          border: 'none',
          borderRadius: '6px',
          cursor: 'pointer',
        }}
        onClick={() => setCount(0)}
      >
        Сброс
      </button>
    </div>
  );
}
Результат
Loading...

🚀 Ваша очередь!​

Интерактивный редактор
// 👇 Скопируйте эту заготовку и измените содержимое
function Playground() {
  // Примеры:
  // return "Ваш текст";
  // return <b>Жирный текст</b>;
  // return 42;
  // return [1, 2, 3].map(n => <div key={n}>• {n}</div>);
  
  return "Готово к экспериментам!";
}
Результат
Loading...