Веб-проект: делаем автотекст на странице для презентаций — Журнал «Код» программирование без снобизма

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

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

Проект будет состоять из трёх частей:

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

Делать будем в той же последовательности: страница → стили → скрипт, чтобы лучше понять, что происходит на каждом этапе.

Создаём веб-страницу

Так как вся механика работы происходит в скрипте, то всё, что требуется от страницы, — выделить место для появления текста. Мы используем обычный тег <p> — с ним мы сразу получаем автоматический перенос слов, если длина строки превышает ширину страницы.

Делаем сами: адаптивный сайт

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

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Автотекст</title>
  <!-- подключаем стили -->
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <!-- текст будет появляться в этом блоке -->
  <p></p>
  <!-- подключаем скрипт -->
  <script  src="script.js"></script>
</body>
</html>

Сохраняем код в файле index.html и открываем файл в браузере. Так как контента на странице нет, то мы не увидим ничего, кроме белого фона. Исправим это в стилях.

Настраиваем стили

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

10 полезных инструментов для создания роскошного CSS

чёрный фон;
белый текст;
настроим отступы, чтобы текст не прилипал к краям экрана;
вид и размер шрифта, чтобы он хорошо читался.

body {
  /* цвет фона */
  background: #000;
  /* цвет текста */
  color: #fff;
  /* моноширинный шрифт */
  font-family: monospace;
  /* размер шрифта */
  font-size: 34px;
  /* отступы */
  margin: 30px;
}

Для проверки добавим внутрь тега <p> простой текст (и уберём его после проверки). Кажется, что стили работают как нужно, можно переходить к скрипту.

Пишем скрипт

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

// текст, который будет появляться на экране
const text = ['Привет, это журнал «Код»! ',
  'Одно из полезных применений нейросетей — распознавание изображений. Мы уже рассказывали, как нейронки распознают лица. ',
  'Но с другими образами нейросети работают немного иначе — например, когда расшифровывают надписи или распознают различные объекты. ',
  'Сегодня разбираемся, как они это делают. '
];

Идея такая:

Почему в программировании счёт всегда начинается с нуля, а не с единицы

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

Для этого нам понадобятся переменные, чтобы следить, на какой позиции мы находимся:

// количество обработанных строк
let line = 0;
// текущий символ в строке
let count = 0;
// тут будет храниться то, что появится на экране
let result = '';

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

Делаем свой текстовый редактор с автосохранением

// функция для паузы, на вход она получает миллисекунды — сколько нужно подождать
function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

// функция получения случайного целого числа
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

А теперь самое интересное: функция, которая обрабатывает массив с текстом и перебирает символ за символом. Центральная идея функции — обернуть её в таймер, который отвечает за вывод нового символа. Задержка таймера выбирается случайным образом, чтобы печать выглядела естественно.

Делаем собственный таймер для спорта

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

Что такое рекурсия

Мы прокомментировали каждую строку кода, чтобы было проще разобраться, что происходит внутри:

// основная функция
function typeLine() {
  // устанавливаем таймер
  let interval = setTimeout(
    () => {
      // добавляем новый символ к строке для вывода
      result += text[line][count]
      // выводим текст на экран
      document.querySelector('p').innerHTML =result +'|';
    // увеличиваем счётчик символов
    count++;
    // если мы дошли до конца строки
    if (count >= text[line].length) {
      // обнуляем счётчик
      count = 0;
      // переходим к новой строке
      line++;
      // задерживаем текст на экране на 2 секунды
      sleep(2000);
      // очищаем текст на экране
      document.querySelector('p').innerHTML = '';
      // и в переменной
      result = '';
      // если обработали все линии
      if (line == text.length) {
        // останавливаем таймер
        clearTimeout(interval);
        // выводим финальный текст
        document.querySelector('p').innerHTML ='Спасибо за внимание! ';
        // заканчиваем работу функции
        return true;
      }
    }
    // рекурсивно вызываем функцию
    typeLine();
  // задаём в таймере время появления каждого нового символа
  }, getRandomInt(getRandomInt(100*2.5)))
}

Сохраняем всё это в новом файле script.js и снова открываем страницу в браузере:

Посмотреть на работу автотекста на странице проекта

Что дальше

Сейчас у нас уже есть полноценный рабочий инструмент, но его можно доработать:

сделать отдельный файл, где будут настройки внешнего вида и текст для вывода на экран;
добавить реакцию на нажатия — сделать так, чтобы новая мысль появлялась только по нажатию клавиши;
добавить навигацию, чтобы можно было в процессе вернуться к предыдущей или перейти к следующей мысли.

Сделаем это уже скоро в следующей версии проекта. Подпишитесь, чтобы не пропустить продолжение.

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Автотекст</title>
  <!-- подключаем стили -->
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <!-- текст будет появляться в этом блоке -->
  <p></p>
  <!-- подключаем скрипт -->
  <script  src="script.js"></script>
</body>
</html>

body {
  /* цвет фона */
  background: #000;
  /* цвет текста */
  color: #fff;
  /* моноширинный шрифт */
  font-family: monospace;
  /* размер шрифта */
  font-size: 34px;
  /* отступы */
  margin: 30px;
}

// текст, который будет появляться на экране
const text = ['Привет, это журнал «Код»! ',
  'Одно из полезных применений нейросетей — распознавание изображений. Мы уже рассказывали, как нейронки распознают лица. ',
  'Но с другими образами нейросети работают немного иначе — например, когда расшифровывают надписи или распознают различные объекты. ',
  'Сегодня разбираемся, как они это делают. '
];

// количество обработанных строк
let line = 0;
// текущий символ в строке
let count = 0;
// тут будет храниться то, что появится на экране
let result = '';

// функция для паузы, на вход она получает миллисекунды — сколько нужно подождать
function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

// функция получения случайного целого числа
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

// основная функция
function typeLine() {
  // устанавливаем таймер
  let interval = setTimeout(
    () => {
      // добавляем новый символ к строке для вывода
      result += text[line][count]
      // выводим текст на экран
      document.querySelector('p').innerHTML =result +'|';
    // увеличиваем счётчик символов
    count++;
    // если мы дошли до конца строки
    if (count >= text[line].length) {
      // обнуляем счётчик
      count = 0;
      // переходим к новой строке
      line++;
      // задерживаем текст на экране на 2 секунды
      sleep(2000);
      // очищаем текст на экране
      document.querySelector('p').innerHTML = '';
      // и в переменной
      result = '';
      // если обработали все линии
      if (line == text.length) {
        // останавливаем таймер
        clearTimeout(interval);
        // выводим финальный текст
        document.querySelector('p').innerHTML ='Спасибо за внимание! ';
        // заканчиваем работу функции
        return true;
      }
    }
    // рекурсивно вызываем функцию
    typeLine();
  // задаём в таймере время появления каждого нового символа
  }, getRandomInt(getRandomInt(100*2.5)))
}
// запускаем основную функцию
typeLine();

Текст:

Михаил Полянин

Редактор:

Михаил Полянин

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Юлия Зубарева

JavaScript — это веб-технологии

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