В первой статье мы посмотрели как изменить 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>
В этом примере у нас немного больше HTML, чем раньше. Кроме button</h> и div, где мы будем показывать наши результаты, у нас также есть два элемента input`. Каждый со своим ID.
Если вы нажмете на ссылку Try, то увидите два поля для ввода и кнопку:
В коде JavaScript у нас есть функция say_hi. Она использует метод getElementById, который мы рассмотрели ранее,
чтобы получить DOM элемент, представляющий input с id first_name. Возвращенный объект имеет метод value,
который вернет текст, введенный пользователем в это поле.
Мы применяем этот способ для получения содержимого обоих элементов input и присваиваем полученные значения двум переменным:
fname и lname.
Затем, используя эти переменные, мы создаем HTML-сниппет и присваиваем его новой переменной html.
Потом мы устанавливаем атрибут innerHTML (как мы делали это ранее)
чтобы показать сгенерированный HTML. Результат может выглядеть вот так:
Громоздкое создание HTML
Даже в таком простом HTML мы должны использовать + несколько раз, и код получается достаточно нечитаемый.
Представьте, что бы произошло, если бы мы захотели создать более сложное приложение, где мы бы хотели генерировать списки элементов
или даже таблицы. Генерация HTML на лету и вставка его в DOM была бы довольно неприятной.
В бекенде, написанном на Perl, Python или Ruby, люди сталкивались с теми же самыми проблемами. Решением было создание различных шаблонизаторов. В принципе, шаблон это HTML сниппет с некоторыми плейсхолдерами (ключевыми словами), некая функция получает этот HTML сниппет (шаблон) в качестве параметра, а также несколько пар ключ-значение. Затем функция возвращает новый HTML сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.
Точно так же и в Javascript есть много шаблонизаторов. Мы собираемся посмотреть на HandlebarsJS, шаблонизатор JavaScript.
