# Sukurkite banko programėlę 1 dalis: HTML šablonai ir maršrutai žiniatinklio programėlėje ## Prieš paskaitą: testas [Prieš paskaitą: testas](https://ff-quizzes.netlify.app/web/quiz/41) ### Įvadas Nuo tada, kai naršyklėse atsirado JavaScript, svetainės tapo interaktyvesnės ir sudėtingesnės nei bet kada anksčiau. Žiniatinklio technologijos dabar dažnai naudojamos kuriant visiškai funkcionalias programėles, kurios veikia tiesiogiai naršyklėje ir vadinamos [žiniatinklio programėlėmis](https://en.wikipedia.org/wiki/Web_application). Kadangi žiniatinklio programėlės yra labai interaktyvios, vartotojai nenori laukti, kol puslapis bus visiškai perkrautas kiekvieną kartą atliekant veiksmą. Todėl JavaScript naudojamas HTML atnaujinimui tiesiogiai per DOM, kad būtų užtikrinta sklandesnė vartotojo patirtis. Šioje pamokoje mes sukursime pagrindus banko žiniatinklio programėlei, naudodami HTML šablonus, kad sukurtume kelis ekranus, kurie gali būti rodomi ir atnaujinami be viso HTML puslapio perkrovimo. ### Būtinos žinios Jums reikės vietinio žiniatinklio serverio, kad galėtumėte išbandyti žiniatinklio programėlę, kurią kursime šioje pamokoje. Jei jo neturite, galite įdiegti [Node.js](https://nodejs.org) ir naudoti komandą `npx lite-server` iš savo projekto aplanko. Tai sukurs vietinį žiniatinklio serverį ir atidarys jūsų programėlę naršyklėje. ### Pasiruošimas Savo kompiuteryje sukurkite aplanką pavadinimu `bank` su failu `index.html` viduje. Pradėsime nuo šio HTML [šablono](https://en.wikipedia.org/wiki/Boilerplate_code): ```html Bank App ``` --- ## HTML šablonai Jei norite sukurti kelis ekranus žiniatinklio puslapiui, vienas sprendimas būtų sukurti po vieną HTML failą kiekvienam ekranui, kurį norite rodyti. Tačiau šis sprendimas turi tam tikrų nepatogumų: - Perjungiant ekraną reikia iš naujo įkelti visą HTML, o tai gali būti lėta. - Sunku dalintis duomenimis tarp skirtingų ekranų. Kitas požiūris yra turėti tik vieną HTML failą ir apibrėžti kelis [HTML šablonus](https://developer.mozilla.org/docs/Web/HTML/Element/template), naudojant `