Генератор максимально российских названий для российских ИТ-продуктов — Журнал «Код» программирование без снобизма

В России сделали компьютеры. Назвали их не «Альфа», «Бета» и «Гамма»; не Intelligent Solutions или Megasystems; и даже не «ПК-1» и «ПК-У».

Нет. Их назвали «Бобёр» и «Ворон». А монитор — «Сова».

Если ты не можешь что-то остановить, ты должен это возглавить. Поэтому сегодня мы возглавим это безумие и сделаем собственный генератор исконно русских, хтонических, былинных, сермяжных названий.

Генератор максимально российских названий для российских ИТ-продуктов — Тот самый «Бобёр»

Логика проекта

Чтобы генератором было просто пользоваться, сделаем его в виде веб-страницы. На ней пользователь выберет один из продуктов: компьютер, смартфон, планшет или умные часы. Для этого используем переключатели — так мы точно будем уверены, что выбран только один вариант.

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

Готовим страницу

Основное, что нам нужно на странице, — радиопереключатели и кнопка действия. Чтобы браузер знал, что переключатели относятся друг к другу и можно выбрать только один вариант, у них должно быть одинаковое имя. В кнопке действия пропишем вызов функции generate() — её ещё нет, но мы это исправим.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Генератор названий</title>
	
</head>
<body>
  <!-- панель выбора устройства -->
  <p><b>Выберите прибор (устройство)</b></p>
  <p><input name="thecode" type="radio" value="computer" id="computer" checked> Компьютер</p>
  <p><input name="thecode" type="radio" value="smart" id="smart"> Смартфон</p>
  <p><input name="thecode" type="radio" value="tablet" id="tablet"> Планшет</p>
  <p><input name="thecode" type="radio" value="watch" id="watch"> Умные часы</p>
  <p><input type="submit" value="Выбрать" onclick="generate()"></p>

  <!-- раздел с названием -->
  <h2>Название:</h2>
  <!-- сюда отправим готовое название -->
  <div id = 'name'>
  </div>

</body>
</html>

Добавляем стили

У нас простой проект, поэтому стилей будет мало, и мы добавим их в тот же HTML-файл. Единственное, что мы в них сделаем, это поправим внешний вид шрифта и настроим отступы:

<style type="text/css">
  /*  общие стили для страницы  */
	body {
    text-align: left;
    margin: 10;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
  }
</style>

Создаём скрипт

Для наглядности скрипт тоже добавим в тот же HTML-файл: он довольно простой и компактный, поэтому можно сделать всё в одном месте.

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

Вид устройств тоже будем выбирать случайным образом, чтобы было больше разнообразия. Для этого сделаем отдельные массивы для каждого устройства и тоже выберем оттуда случайное название.

<script type="text/javascript">
  // формируем список названий для техники
  var all = ['Куница', 'Бобёр', 'Боров', 'Выхухоль', 'Вымпел', 'Компас', 'Огниво', 'Дуб', 'Бук', 'Кедр', 'Дубрава', 'Поле', 'Витязь', 'Богатырь', 'Елабуга', 'Мацеста', 'Тольятти', 'Былина', 'Яков', 'Изба', 'Сани', 'Горница', 'Тройка', 'Клевер', 'Самоцвет', 'Яхонт', 'Городничий', 'Лаванда', 'Костёр', 'Скиф', 'Сказ', 'Хорунжий', 'Кушак', 'Светлица', 'Луч', 'Ракета', 'Вымпел', 'Знак', 'Синь', 'Помощник', 'Заря', 'Закат', 'Буран', 'Сегмент', 'Гусли', 'Городничий', 'Клевер', 'Лиана', 'Лань', 'Скороход', 'Жимолость', 'Зубр', 'Замок', 'Рапира', 'Редут', 'Улей', 'Пасека', 'Целина', 'Полёт', 'Искра', 'Старт', 'Оберег', 'Блик' ];
  
  // список характеристик
  var spec_list = ['Универсальный', 'Специальный', 'Защищённый', 'Ударостойкий', 'Всепогодный', 'Малошумный', 'Малогабаритный', 'Скоростной', 'Криптозащищённый', 'Базовый', 'Двухсекционный', 'Единый', 'Коммуникационный', 'Интеграционный', 'Переносной', 'Энергоэффективный', 'Перспективный', 'Бронированный', 'Мультикомпонентный', 'Портативный'];

  // названия устройств
  var computer_name = ['комплекс', 'блок', 'компьютер', 'моноблок' ];
  var smart_name = ['телефон', 'смартфон', 'коммуникатор', 'КПК', 'радиопереговорный блок'];
  var tablet_name = ['планшет', 'электронный прибор общего назначения', 'переносной вычислетельный комплекс'];
  var watch_name = ['электронный носимый комплекс (часы)', 'хронограф', 'интерактивный циферблат', 'прибор измерения времени (часы)'];
</script>

Генерируем название

Это основная функция в скрипте, поэтому сразу сделаем её универсальной для всех устройств. Работать будет всё так:

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

Сейчас страница пока ничего делать не будет — эта функция не привязана к кнопке, поэтому внешне всё останется как есть.

// основная функция, которая генерирует названия
function setup(list, device) {
  //  выбираем случайное название
  var select_name = all[Math.floor(Math.random()*all.length)];
  // выбираем случайное определение устройства
  var select_device_name = device[Math.floor(Math.random()*device.length)];

  // переменные для итогового текста и аббревиатуры
  var final, final_short;
  final = '';
  final_short = '';
  // случайным образом получаем количество букв в аббревиатуре
  var count_num = Math.floor(Math.random() * (4) + 1);

  // создаём характеристики
  for (var i = 0; i <= count_num; i++) {
    // получаем случайный номер в массиве характеристик
    number = Math.floor(Math.random()*list.length);
    // добавляем характеристику с этим номером в список
    final = final + ' ' + list[number];
    // добавляем букву к аббревиатуре
    final_short = final_short + Array.from(list[number])[0];
    // убираем эту характеристику из массива, чтобы не было повторов
    list.splice(number, 1);
  }

  // формируем итоговое название
  final = final + ' ' + select_device_name + ' «' + select_name + '-' + final_short +'»';
  // отправляем его в блок с названием
  var div = document.getElementById('name');
  div.innerHTML = final;
}

Обрабатываем нажатие на кнопку

При создании страницы мы сразу прописали название функции, которая запустится после нажатия на кнопку — generate(). Добавим её в скрипт и привяжем выбор радиокнопки к нужному массиву характеристик. Также мы будем отправлять в основную функцию массив с названиями выбранного устройства, чтобы компьютер понял, откуда это брать.

👉 В предыдущей функции мы удаляли элементы из массива с характеристиками, чтобы не было повторов. Если мы будем отдавать туда исходный массив, то программа скоро перестанет работать, потому что закончатся характеристики. Чтобы избежать этого, мы будем создавать копию массива с характеристиками и отдавать на обработку именно её — так исходный массив будет в безопасности и можно будет брать характеристики снова и снова.

// обрабатываем нажатие на кнопку
function generate() {
  // создаём копию массива характеристик
  var list = Array.from(spec_list);

  // смотрим, что выбрано, и отправляем в функцию соответствующий список
  if(document.getElementById('computer').checked) {
    console.log(setup(list, computer_name));
  }else if(document.getElementById('smart').checked) {
    console.log(setup(list, smart_name));
  }else if(document.getElementById('tablet').checked) {
    console.log(setup(list, tablet_name));
  }else if(document.getElementById('watch').checked) {
    console.log(setup(list, watch_name));
  }
}

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