În primul articol ne-am uitat la modul de a modifica DOM, pentru a arăta ceva. și apoi ne-am uitat la modul în care să se ocupe de evenimente de utilizator. De data aceasta vom vedea cum pentru a obține unele date introduse de utilizator, și să le conecteze cu alții pentru a face o simplă pagină care vă urează bun venit.
În acest exemplu, avem un pic mai mult HTML, decât oricând înainte. În plus, butonul și div. în cazul în care vom arăta rezultatele noastre, avem, de asemenea, două elemente de intrare. Fiecare cu ID-ul propriu.
Dacă faceți clic pe link-ul de încercare, veți vedea două câmpuri de intrare și butoane:
Vom aplica această metodă pentru a prelua conținutul ambelor elemente de intrare și atribuie valoarea celor două variabile: fname și lname.
Apoi, folosind aceste variabile, vom crea HTML-fragment și atribuiți-l la un nou html variabilă.
Apoi ne-am stabilit atributul innerHTML (așa cum am făcut mai devreme) pentru a afișa HTML generat. Rezultatul ar putea arata astfel:
Greoaie crea HTML
Chiar și într-o astfel de simplu HTML + ar trebui să folosim de câteva ori, și codurile sunt destul de imposibil de citit. Imaginați-vă ce s-ar întâmpla dacă ne-am dorit să creeze o aplicație mai complexă, în cazul în care ne-ar dori să genereze liste de elemente sau chiar de masă. Generați HTML pe zbor și introduceți-l în DOM ar fi destul de neplăcut.
În backend, scrise în Perl, Python sau Ruby, oamenii se confruntă cu aceleași probleme. Solutia a fost de a crea diferite templating. În principiu, șablonul este un fragment HTML cu unele Placeholders (cuvinte cheie), un fel de funcție devine acest fragment de cod HTML (șablon) ca parametru, precum și mai multe perechi cheie-valoare. Funcția returnează apoi un nou fragment de cod HTML în care substituenților se înlocuiesc cu valorile obținute tastele corespunzătoare.
