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

Published on 2015-04-18