{"id":6633,"date":"2025-01-11T12:35:01","date_gmt":"2025-01-11T12:35:01","guid":{"rendered":"https:\/\/howtogeek.blog\/lv\/?p=6633"},"modified":"2025-01-11T12:35:01","modified_gmt":"2025-01-11T12:35:01","slug":"create-your-first-web-application-a-beginners-guide-to-building-a-simple-notes-app-and-word-counter","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/lv\/create-your-first-web-application-a-beginners-guide-to-building-a-simple-notes-app-and-word-counter\/","title":{"rendered":"Izveidojiet savu pirmo t\u012bmek\u013ca lietojumprogrammu: rokasgr\u0101mata ies\u0101c\u0113jiem vienk\u0101r\u0161as piez\u012bmju lietotnes un v\u0101rdu skait\u012bt\u0101ja izveidei"},"content":{"rendered":"<p>Kod\u0113\u0161anas ce\u013cojuma s\u0101k\u0161ana var \u0161\u0137ist bied\u0113jo\u0161a, \u0146emot v\u0113r\u0101 milz\u012bgo valodu un sist\u0113mu izv\u0113li. J\u016bs pat var\u0113tu dom\u0101t par to, ka AI var\u0113tu visu apstr\u0101d\u0101t! Tom\u0113r programm\u0113\u0161ana t\u012bmeklim var b\u016bt aizraujo\u0161a, pieejama un piln\u012bgi bez maksas!<\/p>\n<h2 id=\"what-youll-build\">Ko j\u016bs uzb\u016bv\u0113sit<\/h2>\n<p>\u0160aj\u0101 apm\u0101c\u012bb\u0101 j\u016bs izveidosit vienk\u0101r\u0161u t\u012bmek\u013ca lietojumprogrammu, kas paredz\u0113ta teksta piez\u012bmju glab\u0101\u0161anai, vienlaikus skaitot \u0161aj\u0101s piez\u012bm\u0113s eso\u0161\u0101s rakstz\u012bmes un v\u0101rdus.<\/p>\n<p>\u0160\u012b lietojumprogramma past\u0101v\u012bgi saglab\u0101 datus, \u013caujot tai izg\u016bt tekstu pat p\u0113c lapas atsvaidzin\u0101\u0161anas vai atk\u0101rtotas atv\u0113r\u0161anas. Tas ir praktisks risin\u0101jums, lai nodro\u0161in\u0101tu \u0101tru piek\u013cuvi svar\u012bgam tekstam, neatkar\u012bgi no t\u0101, vai t\u0101s ir adreses, URL vai jebkas cits.<\/p>\n<figure class=\"wp-block-image\"><img alt=\"Piem\u0113rs vienk\u0101r\u0161ai teksta t\u012bmek\u013ca lietotnei, kur\u0101 tiek r\u0101d\u012btas piez\u012bmes, tostarp kalend\u0101ra ieraksts un URL saraksts.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" title=\"Piem\u0113rs vienk\u0101r\u0161ai teksta t\u012bmek\u013ca lietotnei, kur\u0101 tiek r\u0101d\u012btas piez\u012bmes, tostarp kalend\u0101ra ieraksts un URL saraksts.\" width=\"960\"\/><\/figure>\n<p>Turkl\u0101t lietotne izseko rakstz\u012bmju un v\u0101rdu skaitu, nodro\u0161inot lielisku ievadu virk\u0146u manipul\u0101cij\u0101s. Lai gan lietojumprogrammas dizains ir vienk\u0101r\u0161s, \u0161\u012b apm\u0101c\u012bba sniedz jums pamata t\u012bmek\u013ca lietot\u0146u izstr\u0101des prasmes, paverot pla\u0161as kod\u0113\u0161anas iesp\u0113jas.<\/p>\n<h2 id=\"how-youll-build-it\">K\u0101 j\u016bs to izveidosit<\/h2>\n<p>Lai gan t\u012bmek\u013ca lietojumprogrammas var iev\u0113rojami at\u0161\u0137irties, t\u0101s parasti integr\u0113 tr\u012bs b\u016btiskas tehnolo\u0123ijas: HTML, CSS un JavaScript. Katrs no \u0161iem komponentiem pilda svar\u012bgu funkciju t\u012bmek\u013ca izstr\u0101d\u0113:<\/p>\n<ul>\n<li><strong>HTML:<\/strong> \u0161\u012b ir j\u016bsu t\u012bmek\u013ca lietojumprogrammas strukt\u016bra, kas nosaka satura organiz\u0113\u0161anu. HTML nosaka, vai teksts ir rindkopa, virsraksts vai saraksta vienums.<\/li>\n<li><strong>CSS:<\/strong> kask\u0101des stila lapas pie\u0161\u0137ir j\u016bsu saturam stilu, \u013caujot main\u012bt kr\u0101sas, fontus un izk\u0101rtojumu. Varat izmantot CSS, lai padar\u012btu elementus treknrakst\u0101, piel\u0101gotu apmales un novietotu elementus ekr\u0101n\u0101.<\/li>\n<li><strong>JavaScript:<\/strong> \u0161\u012b programm\u0113\u0161anas valoda ir neat\u0146emama sast\u0101vda\u013ca funkcionalit\u0101tes ievad\u012b\u0161anai j\u016bsu t\u012bmek\u013ca lietojumprogramm\u0101. JavaScript var rad\u012bt interakt\u012bvu pieredzi, piem\u0113ram, par\u0101d\u012bt\/sl\u0113pt elementus vai veidot sare\u017e\u0123\u012btas lietojumprogrammas, piem\u0113ram, sp\u0113les.<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img alt=\"Web.dev vietnes s\u0101kumlapa ar m\u0101c\u012bbu resursiem HTML, CSS un JavaScript.\" class=\"wp-image\" decoding=\"async\" height=\"734\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" title=\"Web.dev vietnes s\u0101kumlapa ar m\u0101c\u012bbu resursiem HTML, CSS un JavaScript.\" width=\"1388\"\/><\/figure>\n<h2 id=\"the-app-structure\">Lietotnes strukt\u016bra<\/h2>\n<p>Lietojumprogramm\u0101, kuru gatavojaties izveidot, ir tr\u012bs vienk\u0101r\u0161i faili: <code>index.html<\/code>, <code>styles.css<\/code>, un <code>script.js<\/code>.<\/p>\n<p>Lai palaistu \u0161o lietotni, nav papildu pras\u012bbu \u2014 pietiek ar t\u012bmek\u013ca p\u0101rl\u016bkprogrammu. T\u0101 k\u0101 \u0161\u012b ir priek\u0161gala lietotne, nav vajadz\u012bgas aizmugures skriptu valodas, piem\u0113ram, PHP vai viet\u0113jie serveri. P\u0113c pabeig\u0161anas vienk\u0101r\u0161i atveriet to <code>index.html<\/code>sav\u0101 p\u0101rl\u016bkprogramm\u0101, lai redz\u0113tu, k\u0101 j\u016bsu lietotne darbojas.<\/p>\n<p>\u0160\u012b lietotne izmanto Web Storage API, lai saglab\u0101tu tekstu, \u013caujot tai saglab\u0101t inform\u0101ciju bez nepiecie\u0161am\u012bbas rakst\u012bt diska failos, jo JavaScript nav piek\u013cuves failu sist\u0113mai.<\/p>\n<h2 id=\"how-to-build-the-note-taker\">K\u0101 izveidot piez\u012bmju \u0146\u0113m\u0113ju<\/h2>\n<p>S\u0101ciet, izveidojot tr\u012bs nepiecie\u0161amos failus vien\u0101 direktorij\u0101. Varat ar\u012b lejupiel\u0101d\u0113t failus no <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\">\u0161\u012bs GitHub kr\u0101tuves<\/a> .<\/p>\n<h3 id=\"building-the-structure-with-html\">Strukt\u016bras veido\u0161ana, izmantojot HTML<\/h3>\n<p>Fail\u0101 <code>index.html<\/code>ir izkl\u0101st\u012bta j\u016bsu lietotnes satura strukt\u016bra. Taj\u0101 ir iek\u013cautas atsauces uz CSS un JavaScript failiem, \u013caujot p\u0101rl\u016bkprogrammai tos apvienot viendab\u012bg\u0101 pieredz\u0113.<\/p>\n<p>T\u0101pat k\u0101 jebkur\u0161 HTML dokuments, galvenais ietvars sast\u0101v no galvas sada\u013cas ar metadatiem un pamatteksta, kur\u0101 ir saturs:<\/p>\n<p> <code><br \/>\n<span>&lt;!DOCTYPE html&gt;<\/span><br \/>\n<span>&lt;html&gt;<\/span><br \/>\n<span>&lt;head&gt;<\/span><br \/>\n<span>...&lt;\/head&gt;<\/span><br \/>\n<span>&lt;body&gt;<\/span><br \/>\n<span>...&lt;\/body&gt;<\/span><br \/>\n<span>&lt;\/html&gt;<\/span><br \/>\n<\/code><\/p>\n<p>Galvenaj\u0101 sada\u013c\u0101 ir \u012bsi metadati, tostarp lapas nosaukums (redzams p\u0101rl\u016bkprogrammas virsrakstjosl\u0101) un saite uz <code>styles.css<\/code>failu:<\/p>\n<p> <code><br \/>\n<span>&lt;title&gt;Text&lt;\/title&gt;<\/span><br \/>\n<span>&lt;link rel=\"stylesheet\"href=\"styles.css\"\/&gt;<\/span><br \/>\n<\/code><\/p>\n<p>Korpuss ir detaliz\u0113t\u0101ks, ieskaitot galven\u0101s sast\u0101vda\u013cas:<\/p>\n<p> <code><br \/>\n<span>&lt;div id=\"counter\"&gt;<\/span><br \/>\n<span>words: &lt;span id=\"words\"&gt;0&lt;\/span&gt;<\/span><br \/>\n<span>\/ characters: &lt;span id=\"chars\"&gt;0&lt;\/span&gt;<\/span><br \/>\n<span>&lt;\/div&gt;<\/span><br \/>\n<span>&lt;textarea id=\"text\"autofocus=\"1\"&gt;&lt;\/textarea&gt;<\/span><br \/>\n<span>&lt;script src=\"script.js\"&gt;&lt;\/script&gt;<\/span><br \/>\n<\/code><\/p>\n<p>Element\u0101 <code>div<\/code>, kas apz\u012bm\u0113ts k\u0101 \u201cskait\u012bt\u0101js\u201d, ir ietverts v\u0101rdu un rakstz\u012bmju skaits. Tas paliek aug\u0161pus\u0113 un tiek dinamiski atjaunin\u0101ts, mainoties tekstam.<\/p>\n<p>Ir \u013coti svar\u012bgi \u0146emt v\u0113r\u0101 atrib\u016btu izmanto\u0161anu<code>id<\/code>\u00a0\u2014 to unik\u0101l\u0101s v\u0113rt\u012bbas pal\u012bdz veidot \u0161os elementus un piel\u0101got to funkcionalit\u0101ti.<\/p>\n<p>Tas <code>textarea<\/code>nodro\u0161ina apgabalu, kur\u0101 lietot\u0101ji var ievad\u012bt tekstu ar <code>autofocus<\/code>atrib\u016btu, nodro\u0161inot, ka tas ir gatavs rakst\u012b\u0161anai p\u0113c lapas iel\u0101des. Visbeidzot, HTML atsaucas uz <code>script.js<\/code>failu.<\/p>\n<p>\u0160aj\u0101 br\u012bd\u012b atveriet <code>index.html<\/code>p\u0101rl\u016bkprogramm\u0101. Tas v\u0113l nedarbosies un var izskat\u012bties ne visai pareizi, ta\u010du ir noder\u012bgi p\u0101rbaud\u012bt progresu katr\u0101 posm\u0101.<\/p>\n<figure class=\"wp-block-image\"><img alt=\"Piez\u012bmju veik\u0161anas t\u012bmek\u013ca lietotnes skats ar noklus\u0113juma p\u0101rl\u016bkprogrammas stiliem, kas par\u0101da visu, kas ir salikts aug\u0161\u0113j\u0101 kreisaj\u0101 st\u016br\u012b.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" title=\"Piez\u012bmju veik\u0161anas t\u012bmek\u013ca lietotnes skats ar noklus\u0113juma p\u0101rl\u016bkprogrammas stiliem, kas par\u0101da visu, kas ir salikts aug\u0161\u0113j\u0101 kreisaj\u0101 st\u016br\u012b.\" width=\"960\"\/><\/figure>\n<h3 id=\"making-things-look-good-with-css\">Lai lietas izskat\u012btos labi, izmantojot CSS<\/h3>\n<p>Lai gan \u0161ai pamata lietotnei nav nepiecie\u0161ami lieli dizaina piel\u0101gojumi, m\u0113s varam uzlabot t\u0101s izk\u0101rtojumu, izmantojot da\u017eus stilus.<\/p>\n<p>Pirmk\u0101rt, m\u0113s izveidojam \u0137erme\u0146a stilu, lai iez\u012bm\u0113tu kop\u0113jo izskatu:<\/p>\n<p> <code><br \/>\n<span>body {<\/span><br \/>\n<span> margin: 0;<\/span><br \/>\n<span> padding: 0;<\/span><br \/>\n<span> display: grid;<\/span><br \/>\n<span> min-height: 100vh;<\/span><br \/>\n<span> grid-template-rows: min-content 1fr;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>\u0160aj\u0101 CSS tiek izmantots <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\" target=\"_blank\">re\u017e\u0123a izk\u0101rtojums<\/a> , lai sak\u0101rtotu v\u0101rdu un rakstz\u012bmju skaitu \u0161aur\u0101 rind\u0101 virs teksta apgabala. Rekviz\u012bts <code>grid-template-rows<\/code>nosaka, ka skait\u012b\u0161anas rindai ir j\u0101aiz\u0146em vismaz\u0101k vietas (minim\u0101lais saturs), kam\u0113r teksta apgabals aizpilda atliku\u0161o vietu (1fr).<\/p>\n<p>Skait\u012bt\u0101ja rinda sa\u0146em pamata stilu, lai to at\u0161\u0137irtu no teksta apgabala, galvenok\u0101rt ar fonu:<\/p>\n<p> <code><br \/>\n<span>#counter {<\/span><br \/>\n<span> font-family: sans-serif;<\/span><br \/>\n<span> background-color: #f7f7f7;<\/span><br \/>\n<span> text-align: center;<\/span><br \/>\n<span> width: 100%;<\/span><br \/>\n<span> padding: 0 0.5em 0;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>Teksta apgabals ir veidots t\u0101, lai teksts b\u016btu salas\u0101ms, nodro\u0161inot pietiekamu atstarpi:<\/p>\n<p> <code><br \/>\n<span>textarea {<\/span><br \/>\n<span> width: 100%;<\/span><br \/>\n<span> height: 100%;<\/span><br \/>\n<span> font-size: 16pt;<\/span><br \/>\n<span> padding: 1em;<\/span><br \/>\n<span> box-sizing: border-box;<\/span><br \/>\n<span> outline: 0;<\/span><br \/>\n<span> border: none;<\/span><br \/>\n<span> border-top: 1px solid #999;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"Piez\u012bmju veik\u0161anas lietotne ar piel\u0101gotiem stiliem par\u0101da skait\u012bt\u0101ja joslu aug\u0161pus\u0113 ar pilna izm\u0113ra teksta apgabalu zem\u0101k.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" title=\"Piez\u012bmju veik\u0161anas lietotne ar piel\u0101gotiem stiliem par\u0101da skait\u012bt\u0101ja joslu aug\u0161pus\u0113 ar pilna izm\u0113ra teksta apgabalu zem\u0101k.\" width=\"960\"\/><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">Funkcionalit\u0101tes pievieno\u0161ana ar JavaScript<\/h3>\n<p>T\u0101 k\u0101 pamatdarbs ir izveidots, ir pien\u0101cis laiks ieviest lietojumprogramm\u0101 funkcionalit\u0101ti\u00a0\u2014 kodu, kas to atdz\u012bvina!<\/p>\n<p>Pirms iedzi\u013cin\u0101ties kod\u0113\u0161an\u0101, ir svar\u012bgi ieskic\u0113t paredz\u0113to funkcionalit\u0101ti. \u0160aj\u0101 lietojumprogramm\u0101 j\u016bs koncentr\u0113sities uz diviem galvenajiem m\u0113r\u0137iem:<\/p>\n<ul>\n<li>Turpiniet un atk\u0101rtoti iel\u0101d\u0113jiet ievad\u012bto tekstu.<\/li>\n<li>Dinamiski atjauniniet rakstz\u012bmju un v\u0101rdu skaitu.<\/li>\n<\/ul>\n<p>\u0160\u012bm funkcij\u0101m ir j\u0101atjaunina noteikti dokumenta elementi. T\u0101p\u0113c s\u0101ciet, ieg\u016bstot atsauces uz \u0161iem mezgliem, izmantojot <code>getElementById<\/code>metodi:<\/p>\n<p> <code><br \/>\n<span>const words = document.getElementById(\"words\");<\/span><br \/>\n<span>const chars = document.getElementById(\"chars\");<\/span><br \/>\n<span>const textarea = document.getElementById(\"text\");<\/span><br \/>\n<\/code><\/p>\n<p>\u0160eit <code>words<\/code>, <code>chars<\/code>, un <code>textarea<\/code>atbilst to attiec\u012bgaj\u0101m dokumenta sada\u013c\u0101m, kas identific\u0113tas p\u0113c to ID atrib\u016btiem.<\/p>\n<p>P\u0113c tam ieviesiet interaktivit\u0101ti, iestatot lietotni rea\u0123\u0113t, kad teksts tiek main\u012bts:<\/p>\n<p> <code><br \/>\n<span>textarea.addEventListener(\"input\", function(ev) {<\/span><br \/>\n<span> localStorage.setItem(\"text\", ev.target.value);<\/span><br \/>\n<span> update_counts(ev.target.value);<\/span><br \/>\n<span>});<\/span><br \/>\n<\/code><\/p>\n<p>Metode <code>addEventListener<\/code>saista funkciju, lai aktiviz\u0113tu, kad notiek noteikts notikums. \u0160\u0101d\u0101 gad\u012bjum\u0101, tikl\u012bdz lietot\u0101js mijiedarbojas ar teksta apgabalu, notikums \u201cievade\u201d aktiviz\u0113 funkciju.<\/p>\n<p>P\u0113c tam Web Storage API tiek izmantota, lai saglab\u0101tu teksta apgabala pa\u0161reiz\u0113jo saturu, kuram var piek\u013c\u016bt, izmantojot <code>ev.target.value<\/code>. Metode <code>setItem<\/code>saista atsl\u0113gu ar saglab\u0101jamajiem datiem.<\/p>\n<p>Lai nodro\u0161in\u0101tu teksta iel\u0101di, kad lietotne tiek inicializ\u0113ta vai atsvaidzin\u0101ta, pievienojiet citu klaus\u012bt\u0101ju:<\/p>\n<p> <code><br \/>\n<span>window.addEventListener(\"load\", function(ev) {<\/span><br \/>\n<span> var text = localStorage.getItem(\"text\");<\/span><br \/>\n<span> textarea.value = text;<\/span><br \/>\n<span> update_counts(text);<\/span><br \/>\n<span>});<\/span><br \/>\n<\/code><\/p>\n<p>\u0160is klaus\u012bt\u0101js rea\u0123\u0113 uz loga iel\u0101des notikumu. P\u0113c loga iel\u0101des tas izg\u016bst saglab\u0101to tekstu un attiec\u012bgi iestata teksta apgabala v\u0113rt\u012bbu, vienlaikus izsaucot <code>update_counts()<\/code>v\u0101rdu un rakstz\u012bmju skaita atsvaidzin\u0101\u0161anu.<\/p>\n<p>P\u0101r\u0113j\u0101 funkcionalit\u0101te atrodas funkcij\u0101 <code>update_counts()<\/code>, kas izskat\u0101s \u0161\u0101di:<\/p>\n<p> <code><br \/>\n<span>function update_counts(text) {<\/span><br \/>\n<span> chars.innerHTML = text.length;<\/span><br \/>\n<span> words.innerHTML = text.split(' ').length;<\/span><br \/>\n<span>}<\/span><br \/>\n<\/code><\/p>\n<p>At\u0161\u0137ir\u012bb\u0101 no teksta apgabala vienk\u0101r\u0161ajam tekstam tr\u016bkst v\u0113rt\u012bbas atrib\u016bta; t\u0101d\u0113j\u0101di <code>innerHTML<\/code>\u012bpa\u0161ums tiek izmantots t\u0101 viet\u0101. <code>length<\/code>Virknes rekviz\u012bts izg\u016bst kop\u0113jo rakstz\u012bmju skaitu .<\/p>\n<p>Lai sadal\u012btu tekstu v\u0101rdos, m\u0113s izmantojam <code>text.split(' ')<\/code>, kas sadala virkni pie katras atstarpes rakstz\u012bmes, veidojot v\u0101rdu mas\u012bvu. Ieg\u016bt\u0101 mas\u012bva garuma rekviz\u012bts nodro\u0161ina v\u0101rdu skaitu.<\/p>\n<p>Tom\u0113r ar \u0161o kodu var rasties da\u017eas probl\u0113mas:<\/p>\n<ol>\n<li>Tas nevar pareizi saskait\u012bt atsevi\u0161\u0137us v\u0101rdus rind\u0101 bez atstarpes rakstz\u012bm\u0113m.<\/li>\n<li>Ja teksta nav, tas neprec\u012bzi zi\u0146os par vienu v\u0101rdu <code>split<\/code>darb\u012bbas veida d\u0113\u013c.<\/li>\n<\/ol>\n<p>Lai risin\u0101tu pirmo probl\u0113mu, apsveriet iesp\u0113ju sadal\u012bt parasto izteiksmi, lai \u0146emtu v\u0113r\u0101 atstarpes rakstz\u012bmes: <code>\\s<\/code>. Lai nov\u0113rstu otro probl\u0113mu, filtr\u0113jiet visas tuk\u0161\u0101s virknes:<\/p>\n<p> <code><br \/>\n<span> words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span><br \/>\n<\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"T\u012bmek\u013ca lietotne ar teksta piem\u0113ru, kas par\u0101da prec\u012bzu rakstz\u012bmju un v\u0101rdu skaitu.\" class=\"wp-image\" decoding=\"async\" height=\"569\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" title=\"T\u012bmek\u013ca lietotne ar teksta piem\u0113ru, kas par\u0101da prec\u012bzu rakstz\u012bmju un v\u0101rdu skaitu.\" width=\"960\"\/><\/figure>\n<p>Noder\u012bgu t\u012bmek\u013ca lietojumprogrammu izveidi var pan\u0101kt tikai ar da\u017eiem pamata failiem! Varat papla\u0161in\u0101t \u0161o vienk\u0101r\u0161o piez\u012bmju veik\u0161anas lietotni, integr\u0113jot papildu funkcijas, piem\u0113ram, izmantojot rekviz\u012btu <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\">window.location<\/a> , lai piek\u013c\u016btu vietr\u0101\u017eiem URL, vai \u013caujot saglab\u0101t vair\u0101kas piez\u012bmes, mainot nosaukumus, kas tiek nodoti <code>localStorage.setItem<\/code>.<\/p>\n<h3>Papildu ieskati<\/h3>\n<h4><strong>1.\u00a0K\u0101di ir \u0161\u012bs t\u012bmek\u013ca lietotnes apm\u0101c\u012bbas priek\u0161noteikumi?<\/strong><\/h4>\n<p>Viss, kas jums nepiecie\u0161ams, ir pamatzin\u0101\u0161anas par HTML, CSS un JavaScript. Noder\u012bgi b\u016bs ar\u012b t\u0101di r\u012bki k\u0101 teksta redaktors (piem\u0113ram, VSCode) un t\u012bmek\u013ca p\u0101rl\u016bkprogramma.<\/p>\n<h4><strong>2.\u00a0Vai varu modific\u0113t \u0161o t\u012bmek\u013ca lietotni, lai pievienotu citas funkcijas?<\/strong><\/h4>\n<p>Piln\u012bgi noteikti! \u0160\u012b apm\u0101c\u012bba nodro\u0161ina pamatu. Varat pievienot funkcionalit\u0101ti, piem\u0113ram, vair\u0101ku piez\u012bmju saglab\u0101\u0161anu, piez\u012bmju klasific\u0113\u0161anu kategorij\u0101s vai pat mekl\u0113\u0161anas funkcijas ievie\u0161anu!<\/p>\n<h4><strong>3.\u00a0K\u0101 darbojas Web Storage API?<\/strong><\/h4>\n<p>Web Storage API \u013cauj t\u012bmek\u013ca lietojumprogramm\u0101m saglab\u0101t datus p\u0101rl\u016bkprogramm\u0101. Tas saglab\u0101 datus atsl\u0113gu-v\u0113rt\u012bbu p\u0101ros, kas saglab\u0101jas pat p\u0113c p\u0101rl\u016bkprogrammas aizv\u0113r\u0161anas, padarot tos viegli izguvi v\u0113l\u0101k.<\/p>\n<p><a class=\"xiaomi\" href=\"https:\/\/www.howtogeek.com\/build-your-first-web-app-a-simple-word-counter\/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">Avots un att\u0113li<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kod\u0113\u0161anas ce\u013cojuma s\u0101k\u0161ana var \u0161\u0137ist bied\u0113jo\u0161a, \u0146emot v\u0113r\u0101 milz\u012bgo valodu un sist\u0113mu izv\u0113li. J\u016bs pat var\u0113tu dom\u0101t par to, ka AI var\u0113tu visu apstr\u0101d\u0101t! Tom\u0113r programm\u0113\u0161ana t\u012bmeklim var b\u016bt aizraujo\u0161a, pieejama un piln\u012bgi bez maksas! Ko j\u016bs uzb\u016bv\u0113sit \u0160aj\u0101 apm\u0101c\u012bb\u0101 j\u016bs izveidosit vienk\u0101r\u0161u t\u012bmek\u013ca lietojumprogrammu, kas paredz\u0113ta teksta piez\u012bmju glab\u0101\u0161anai, vienlaikus skaitot \u0161aj\u0101s piez\u012bm\u0113s eso\u0161\u0101s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[866,205,9],"class_list":["post-6633","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-apps-web-apps","tag-programming","tag-windows"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/6633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/comments?post=6633"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/6633\/revisions"}],"predecessor-version":[{"id":6634,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/6633\/revisions\/6634"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/media?parent=6633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/categories?post=6633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/tags?post=6633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}