Введення і виведення в простому javascript

У першій статті ми подивилися як змінити DOM, щоб показати чогось. а потім ми подивилися як обробляти події користувача. Цього разу ми збираємося розглянути, як отримати одні дані, введені користувачем, і з'єднати їх іншими, щоб зробити просту сторінку, вітає вас.

У цьому прикладі у нас трохи більше HTML, ніж раніше. Крім button і div. де ми будемо показувати наші результати, у нас також є два елементи input. Кожен зі своїм ID.

Якщо ви натиснете на посилання Try, то побачите два поля для введення і кнопку:

Ми застосовуємо цей спосіб для отримання вмісту обох елементів input і присвоюємо отримані значення двом змінним: fname і lname.

Потім, використовуючи ці змінні, ми створюємо HTML-сниппет і присвоюємо його нової змінної html.

Потім ми встановлюємо атрибут innerHTML (як ми робили це раніше) щоб показати згенерований HTML. Результат може виглядати ось так:

Громіздке створення HTML

Навіть в такому простому HTML ми повинні використовувати + кілька разів, і код виходить досить нечитаний. Уявіть, що б сталося, якби ми захотіли створити більш складний додаток, де ми б хотіли генерувати списки елементів або навіть таблиці. Генерація HTML на льоту і вставка його в DOM була б досить неприємною.

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