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

examples/js/pure_js_greating.html

<html>
<head>
  <title>Hello World</title>
</head>
<body>

First name: <input id="first_name">
Last name: <input id="last_name">
<button id="say">Say hi!</button>

<hr>
<div id="result"></div>

<script>
function say_hi() {
    var fname = document.getElementById('first_name').value;
    var lname = document.getElementById('last_name').value;

    var html = 'Hello <b>' + fname + '</b> ' + lname;

    document.getElementById('result').innerHTML = html;
}

document.getElementById('say').addEventListener('click', say_hi);
</script>

</body>
</html>
Try!

В этом примере у нас немного больше HTML, чем раньше. Кроме button и div, где мы будем показывать наши результаты, у нас также есть два элемента input. Каждый со своим ID.

Если вы нажмете на ссылку Try, то увидите два поля для ввода и кнопку:

Input form

В коде JavaScript у нас есть функция say_hi. Она использует метод getElementById, который мы рассмотрели ранее, чтобы получить DOM элемент, представляющий input с id first_name. Возвращенный объект имеет метод value, который вернет текст, введенный пользователем в это поле.

Мы применяем этот способ для получения содержимого обоих элементов input и присваиваем полученные значения двум переменным: fname и lname.

Затем, используя эти переменные, мы создаем HTML-сниппет и присваиваем его новой переменной html.

Потом мы устанавливаем атрибут innerHTML (как мы делали это ранее) чтобы показать сгенерированный HTML. Результат может выглядеть вот так:

Input form and output

Громоздкое создание HTML

Даже в таком простом HTML мы должны использовать + несколько раз, и код получается достаточно нечитаемый. Представьте, что бы произошло, если бы мы захотели создать более сложное приложение, где мы бы хотели генерировать списки элементов или даже таблицы. Генерация HTML на лету и вставка его в DOM была бы довольно неприятной.

В бекенде, написанном на Perl, Python или Ruby, люди сталкивались с теми же самыми проблемами. Решением было создание различных шаблонизаторов. В принципе, шаблон это HTML сниппет с некоторыми плейсхолдерами (ключевыми словами), некая функция получает этот HTML сниппет (шаблон) в качестве параметра, а также несколько пар ключ-значение. Затем функция возвращает новый HTML сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.

Точно так же и в Javascript есть много шаблонизаторов. Мы собираемся посмотреть на HandlebarsJS, шаблонизатор JavaScript.