![\"P\u0159\u00edklad](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"P\u0159\u00edklad")
<\/figure>\nKrom\u011b toho aplikace sleduje po\u010det znak\u016f a slov, co\u017e poskytuje vynikaj\u00edc\u00ed \u00favod do manipulace s \u0159et\u011bzci. I kdy\u017e je aplikace z\u00e1kladn\u00ed z hlediska designu, tento tutori\u00e1l v\u00e1m umo\u017en\u00ed z\u00e1kladn\u00ed dovednosti pro v\u00fdvoj webov\u00fdch aplikac\u00ed a odemkne obrovsk\u00e9 mo\u017enosti v k\u00f3dov\u00e1n\u00ed.<\/p>\n
Jak to postav\u00edte<\/h2>\n
I kdy\u017e se webov\u00e9 aplikace mohou v\u00fdrazn\u011b li\u0161it, obvykle integruj\u00ed t\u0159i z\u00e1kladn\u00ed technologie: HTML, CSS a JavaScript. Ka\u017ed\u00e1 z t\u011bchto komponent pln\u00ed p\u0159i v\u00fdvoji webu kl\u00ed\u010dovou funkci:<\/p>\n
- \n
- HTML:<\/strong> Toto je struktura va\u0161\u00ed webov\u00e9 aplikace, kter\u00e1 ur\u010duje, jak je obsah organizov\u00e1n. HTML definuje, zda je text odstavcem, nadpisem nebo polo\u017ekou seznamu.<\/li>\n
- CSS:<\/strong> Kask\u00e1dov\u00e9 styly dod\u00e1vaj\u00ed va\u0161emu obsahu styl a umo\u017e\u0148uj\u00ed v\u00e1m m\u011bnit barvy, p\u00edsma a rozvr\u017een\u00ed. Pomoc\u00ed CSS m\u016f\u017eete vytvo\u0159it tu\u010dn\u00e9 prvky, upravit okraje a um\u00edstit prvky na obrazovce.<\/li>\n
- JavaScript:<\/strong> Tento programovac\u00ed jazyk je ned\u00edlnou sou\u010d\u00e1st\u00ed pro vkl\u00e1d\u00e1n\u00ed funkc\u00ed do va\u0161\u00ed webov\u00e9 aplikace. JavaScript m\u016f\u017ee vytv\u00e1\u0159et interaktivn\u00ed z\u00e1\u017eitky, jako je zobrazen\u00ed\/skryt\u00ed prvk\u016f nebo vytv\u00e1\u0159en\u00ed slo\u017eit\u00fdch aplikac\u00ed, jako jsou hry.<\/li>\n<\/ul>\n
![\"Domovsk\u00e1](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"Domovsk\u00e1")
<\/figure>\nStruktura aplikace<\/h2>\n
Aplikace, kterou se chyst\u00e1te vytvo\u0159it, obsahuje t\u0159i jednoduch\u00e9 soubory:
index.html<\/code>,styles.css<\/code>ascript.js<\/code>.<\/p>\nPro spu\u0161t\u011bn\u00ed t\u00e9to aplikace neexistuj\u00ed \u017e\u00e1dn\u00e9 pokro\u010dil\u00e9 po\u017eadavky \u2013 sta\u010d\u00ed pouze webov\u00fd prohl\u00ed\u017ee\u010d. Jeliko\u017e se jedn\u00e1 o front-endovou aplikaci, nejsou pot\u0159eba skriptovac\u00ed jazyky typu PHP nebo m\u00edstn\u00ed servery. Po dokon\u010den\u00ed jednodu\u0161e otev\u0159ete
index.html<\/code>v prohl\u00ed\u017ee\u010di a uvid\u00edte svou aplikaci v akci.<\/p>\nTato aplikace vyu\u017e\u00edv\u00e1 rozhran\u00ed Web Storage API k ukl\u00e1d\u00e1n\u00ed textu, co\u017e j\u00ed umo\u017e\u0148uje uchov\u00e1vat informace bez nutnosti zapisovat na diskov\u00e9 soubory, proto\u017ee JavaScript nem\u00e1 p\u0159\u00edstup k syst\u00e9mu soubor\u016f.<\/p>\n
Jak sestavit Note Taker<\/h2>\n
Za\u010dn\u011bte vytvo\u0159en\u00edm t\u0159\u00ed pot\u0159ebn\u00fdch soubor\u016f ve stejn\u00e9m adres\u00e1\u0159i. P\u0159\u00edpadn\u011b si m\u016f\u017eete soubory st\u00e1hnout z tohoto \u00falo\u017ei\u0161t\u011b GitHub<\/a> .<\/p>\n
Budov\u00e1n\u00ed struktury pomoc\u00ed HTML<\/h3>\n
Soubor
index.html<\/code>obsahuje strukturu obsahu va\u0161\u00ed aplikace. Obsahuje odkazy na soubory CSS a JavaScript, co\u017e prohl\u00ed\u017ee\u010di umo\u017e\u0148uje slou\u010dit je do hladk\u00e9ho prost\u0159ed\u00ed.<\/p>\nStejn\u011b jako jak\u00fdkoli dokument HTML se hlavn\u00ed r\u00e1mec skl\u00e1d\u00e1 z hlavn\u00ed \u010d\u00e1sti s metadaty a t\u011bla obsahuj\u00edc\u00edho obsah:<\/p>\n
\n<!DOCTYPE html><\/span>
\n<html><\/span>
\n<head><\/span>
\n...<\/head><\/span>
\n<body><\/span>
\n...<\/body><\/span>
\n<\/html><\/span>
\n<\/code><\/p>\nSekce head obsahuje stru\u010dn\u00e1 metadata, v\u010detn\u011b n\u00e1zvu str\u00e1nky (viditeln\u00e9ho v z\u00e1hlav\u00ed prohl\u00ed\u017ee\u010de) a odkazu na
styles.css<\/code>soubor:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nKaroserie je podrobn\u011bj\u0161\u00ed, v\u010detn\u011b kl\u00ed\u010dov\u00fdch sou\u010d\u00e1st\u00ed:<\/p>\n
\n<div id=\"counter\"><\/span>
\nwords: <span id=\"words\">0<\/span><\/span>
\n\/ characters: <span id=\"chars\">0<\/span><\/span>
\n<\/div><\/span>
\n<textarea id=\"text\"autofocus=\"1\"><\/textarea><\/span>
\n<script src=\"script.js\"><\/script><\/span>
\n<\/code><\/p>\nPrvek
div<\/code>ozna\u010den\u00fd jako \u201epo\u010d\u00edtadlo\u201c obsahuje po\u010det slov a znak\u016f. Z\u016fst\u00e1v\u00e1 naho\u0159e a dynamicky se aktualizuje podle zm\u011bn textu.<\/p>\nJe d\u016fle\u017eit\u00e9 poznamenat si pou\u017eit\u00ed
id<\/code>atribut\u016f \u2013 jejich jedine\u010dn\u00e9 hodnoty pom\u00e1haj\u00ed stylizovat tyto prvky a zam\u011b\u0159ovat je na funk\u010dnost.<\/p>\nPoskytuje
textarea<\/code>u\u017eivatel\u016fm prostor pro zad\u00e1v\u00e1n\u00ed textu sautofocus<\/code>atributem, kter\u00fd zaji\u0161\u0165uje, \u017ee je p\u0159ipraven k psan\u00ed po na\u010dten\u00ed str\u00e1nky. Nakonec HTML odkazuje nascript.js<\/code>soubor.<\/p>\nV tomto okam\u017eiku otev\u0159ete
index.html<\/code>v prohl\u00ed\u017ee\u010di. Zat\u00edm to nebude fungovat a nemus\u00ed vypadat \u00fapln\u011b spr\u00e1vn\u011b, ale kontrola va\u0161eho pokroku v ka\u017ed\u00e9 f\u00e1zi je u\u017eite\u010dn\u00e1.<\/p>\n![\"Pohled](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"Pohled")
<\/figure>\nAby v\u011bci vypadaly dob\u0159e pomoc\u00ed CSS<\/h3>\n
I kdy\u017e tato z\u00e1kladn\u00ed aplikace nevy\u017eaduje rozs\u00e1hl\u00e9 \u00fapravy designu, m\u016f\u017eeme vylep\u0161it jej\u00ed rozvr\u017een\u00ed pomoc\u00ed ur\u010dit\u00e9ho stylu.<\/p>\n
Nejprve stanov\u00edme styl karoserie, abychom nast\u00ednili celkov\u00fd vzhled:<\/p>\n
\nbody {<\/span>
\n margin: 0;<\/span>
\n padding: 0;<\/span>
\n display: grid;<\/span>
\n min-height: 100vh;<\/span>
\n grid-template-rows: min-content 1fr;<\/span>
\n}<\/span>
\n<\/code><\/p>\nTento CSS vyu\u017e\u00edv\u00e1 rozlo\u017een\u00ed m\u0159\u00ed\u017eky<\/a> k uspo\u0159\u00e1d\u00e1n\u00ed po\u010dtu slov a znak\u016f v \u00fazk\u00e9m \u0159\u00e1dku nad textovou oblast\u00ed. Tato
grid-template-rows<\/code>vlastnost ur\u010duje, \u017ee \u0159\u00e1dek po\u010dtu by m\u011bl zab\u00edrat co nejmen\u0161\u00ed prostor (minim\u00e1ln\u00ed obsah), zat\u00edmco textarea vypln\u00ed zb\u00fdvaj\u00edc\u00ed prostor (1fr).<\/p>\n\u0158\u00e1dek pultu dost\u00e1v\u00e1 z\u00e1kladn\u00ed styl, aby se odli\u0161il od textov\u00e9 oblasti, p\u0159edev\u0161\u00edm prost\u0159ednictv\u00edm pozad\u00ed:<\/p>\n
\n#counter {<\/span>
\n font-family: sans-serif;<\/span>
\n background-color: #f7f7f7;<\/span>
\n text-align: center;<\/span>
\n width: 100%;<\/span>
\n padding: 0 0.5em 0;<\/span>
\n}<\/span>
\n<\/code><\/p>\nTextarea je upravena tak, aby zajistila \u010ditelnost textu a umo\u017enila dostate\u010dn\u00e9 b\u00edl\u00e9 m\u00edsto:<\/p>\n
\ntextarea {<\/span>
\n width: 100%;<\/span>
\n height: 100%;<\/span>
\n font-size: 16pt;<\/span>
\n padding: 1em;<\/span>
\n box-sizing: border-box;<\/span>
\n outline: 0;<\/span>
\n border: none;<\/span>
\n border-top: 1px solid #999;<\/span>
\n}<\/span>
\n<\/code><\/p>\n![\"Aplikace](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"Aplikace")
<\/figure>\nP\u0159id\u00e1n\u00ed funkc\u00ed pomoc\u00ed JavaScriptu<\/h3>\n
S p\u0159ipraven\u00fdmi z\u00e1klady je \u010das vlo\u017eit do va\u0161\u00ed aplikace funk\u010dnost \u2013 k\u00f3d, kter\u00fd ji p\u0159ivede k \u017eivotu!<\/p>\n
Ne\u017e se pono\u0159\u00edte do k\u00f3dov\u00e1n\u00ed, je nezbytn\u00e9 nast\u00ednit zam\u00fd\u0161lenou funkci. U t\u00e9to aplikace se zam\u011b\u0159\u00edte na dva hlavn\u00ed c\u00edle:<\/p>\n
- \n
- Vytrvejte a znovu na\u010dt\u011bte zadan\u00fd text.<\/li>\n
- Dynamicky aktualizujte po\u010dty znak\u016f a slov.<\/li>\n<\/ul>\n
Tyto funkce vy\u017eaduj\u00ed aktualizace ur\u010dit\u00fdch prvk\u016f dokumentu. Za\u010dn\u011bte proto z\u00edsk\u00e1n\u00edm odkaz\u016f na tyto uzly pomoc\u00ed
getElementById<\/code>metody:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nZde ,
words<\/code>,chars<\/code>atextarea<\/code>odpov\u00eddaj\u00ed jejich p\u0159\u00edslu\u0161n\u00fdm sekc\u00edm v dokumentu, identifikovan\u00fdm pomoc\u00ed atribut\u016f ID.<\/p>\nD\u00e1le zave\u010fte interaktivitu nastaven\u00edm aplikace, aby reagovala na zm\u011bnu textu:<\/p>\n
\ntextarea.addEventListener(\"input\", function(ev) {<\/span>
\n localStorage.setItem(\"text\", ev.target.value);<\/span>
\n update_counts(ev.target.value);<\/span>
\n});<\/span>
\n<\/code><\/p>\nMetoda
addEventListener<\/code>v\u00e1\u017ee funkci ke spu\u0161t\u011bn\u00ed, kdy\u017e nastane zadan\u00e1 ud\u00e1lost. V tomto p\u0159\u00edpad\u011b, jakmile u\u017eivatel interaguje s textovou oblast\u00ed, ud\u00e1lost \u201evstup\u201c spust\u00ed funkci.<\/p>\nD\u00e1le se rozhran\u00ed Web Storage API pou\u017e\u00edv\u00e1 k zachov\u00e1n\u00ed aktu\u00e1ln\u00edho obsahu textov\u00e9 oblasti, ke kter\u00e9mu se p\u0159istupuje p\u0159es
ev.target.value<\/code>. MetodasetItem<\/code>spojuje kl\u00ed\u010d s daty, kter\u00e1 maj\u00ed b\u00fdt ulo\u017eena.<\/p>\nChcete-li zajistit, aby se text na\u010detl p\u0159i inicializaci nebo aktualizaci aplikace, p\u0159idejte dal\u0161\u00ed poslucha\u010d:<\/p>\n
\nwindow.addEventListener(\"load\", function(ev) {<\/span>
\n var text = localStorage.getItem(\"text\");<\/span>
\n textarea.value = text;<\/span>
\n update_counts(text);<\/span>
\n});<\/span>
\n<\/code><\/p>\nTento poslucha\u010d reaguje na ud\u00e1lost zat\u00ed\u017een\u00ed okna. Po na\u010dten\u00ed okna na\u010dte ulo\u017een\u00fd text a podle toho nastav\u00ed hodnotu textarea, zat\u00edmco vyvol\u00e1
update_counts()<\/code>obnoven\u00ed po\u010dtu slov a znak\u016f.<\/p>\nZb\u00fdvaj\u00edc\u00ed funkce se nach\u00e1z\u00ed ve
update_counts()<\/code>funkci, kter\u00e1 vypad\u00e1 takto:<\/p>\n
\nfunction update_counts(text) {<\/span>
\n chars.innerHTML = text.length;<\/span>
\n words.innerHTML = text.split(' ').length;<\/span>
\n}<\/span>
\n<\/code><\/p>\nNa rozd\u00edl od textarea prost\u00fd text postr\u00e1d\u00e1 atribut value; m\u00edsto toho se tedy
innerHTML<\/code>pou\u017eije vlastnost. Vlastnostlength<\/code>\u0159et\u011bzce z\u00edsk\u00e1 celkov\u00fd po\u010det znak\u016f.<\/p>\nK rozd\u011blen\u00ed textu na slova pou\u017e\u00edv\u00e1me
text.split(' ')<\/code>, kter\u00fd rozd\u011bluje \u0159et\u011bzec na ka\u017ed\u00fd znak mezery a vytv\u00e1\u0159\u00ed pole slov. Vlastnost length v\u00fdsledn\u00e9ho pole poskytuje po\u010det slov.<\/p>\nS t\u00edmto k\u00f3dem v\u0161ak m\u016f\u017eete narazit na n\u011bkolik probl\u00e9m\u016f:<\/p>\n
- \n
- Nebude spr\u00e1vn\u011b po\u010d\u00edtat jednotliv\u00e1 slova na \u0159\u00e1dku bez okoln\u00edch mezer.<\/li>\n
- Pokud nen\u00ed p\u0159\u00edtomen \u017e\u00e1dn\u00fd text, bude nep\u0159esn\u011b hl\u00e1sit jedin\u00e9 slovo kv\u016fli tomu, jak
split<\/code>funguje.<\/li>\n<\/ol>\nChcete-li vy\u0159e\u0161it prvn\u00ed probl\u00e9m, zva\u017ete rozd\u011blen\u00ed na regul\u00e1rn\u00ed v\u00fdraz, aby se zohlednily mezery:
\\s<\/code>. Chcete-li vy\u0159e\u0161it druh\u00fd probl\u00e9m, odfiltrujte v\u0161echny pr\u00e1zdn\u00e9 \u0159et\u011bzce:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"Webov\u00e1](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"Webov\u00e1")
<\/figure>\nVytv\u00e1\u0159en\u00ed u\u017eite\u010dn\u00fdch webov\u00fdch aplikac\u00ed lze dos\u00e1hnout pomoc\u00ed n\u011bkolika z\u00e1kladn\u00edch soubor\u016f! Tuto jednoduchou aplikaci na psan\u00ed pozn\u00e1mek m\u016f\u017eete roz\u0161\u00ed\u0159it integrac\u00ed dal\u0161\u00edch funkc\u00ed, jako je vyu\u017eit\u00ed vlastnosti window.location<\/a> pro p\u0159\u00edstup k URL nebo umo\u017en\u011bn\u00ed ukl\u00e1d\u00e1n\u00ed v\u00edce pozn\u00e1mek zm\u011bnou n\u00e1zv\u016f p\u0159ed\u00e1van\u00fdch do
localStorage.setItem<\/code>.<\/p>\nDal\u0161\u00ed statistiky<\/h3>\n
1. Jak\u00e9 jsou p\u0159edpoklady pro tento tutori\u00e1l webov\u00e9 aplikace?<\/strong><\/h4>\n
V\u0161e, co pot\u0159ebujete, je z\u00e1kladn\u00ed znalost HTML, CSS a JavaScriptu. U\u017eite\u010dn\u00e9 budou tak\u00e9 n\u00e1stroje jako textov\u00fd editor (nap\u0159. VSCode) a webov\u00fd prohl\u00ed\u017ee\u010d.<\/p>\n
2. Mohu upravit tuto webovou aplikaci a p\u0159idat dal\u0161\u00ed funkce?<\/strong><\/h4>\n
Absolutn\u011b! Tento tutori\u00e1l poskytuje z\u00e1klad. M\u016f\u017eete p\u0159idat funkce, jako je ukl\u00e1d\u00e1n\u00ed v\u00edce pozn\u00e1mek, kategorizace pozn\u00e1mek nebo dokonce implementace funkce vyhled\u00e1v\u00e1n\u00ed!<\/p>\n
3. Jak funguje rozhran\u00ed Web Storage API?<\/strong><\/h4>\n
Web Storage API umo\u017e\u0148uje webov\u00fdm aplikac\u00edm ukl\u00e1dat data v prohl\u00ed\u017ee\u010di. Ukl\u00e1d\u00e1 data v p\u00e1rech kl\u00ed\u010d\u2013hodnota, kter\u00e9 p\u0159etrv\u00e1vaj\u00ed i po zav\u0159en\u00ed prohl\u00ed\u017ee\u010de, co\u017e usnad\u0148uje pozd\u011bj\u0161\u00ed na\u010dten\u00ed.<\/p>\n
- CSS:<\/strong> Kask\u00e1dov\u00e9 styly dod\u00e1vaj\u00ed va\u0161emu obsahu styl a umo\u017e\u0148uj\u00ed v\u00e1m m\u011bnit barvy, p\u00edsma a rozvr\u017een\u00ed. Pomoc\u00ed CSS m\u016f\u017eete vytvo\u0159it tu\u010dn\u00e9 prvky, upravit okraje a um\u00edstit prvky na obrazovce.<\/li>\n