![\"Ett](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nDen r\u00e4knar \u00e4ven tecken och ord, vilket \u00e4r en bra introduktion till str\u00e4ngmanipulation (text). Sj\u00e4lvklart \u00e4r appen v\u00e4ldigt enkel \u2013 det \u00e4r po\u00e4ngen! Men med den h\u00e4r handledningen l\u00e4r du dig grunderna i att utveckla en webbapp, och sedan ligger v\u00e4rlden f\u00f6r din sida. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Hur ska du bygga den?<\/h2>\n
\u00c4ven om webbapplikationer \u00e4r v\u00e4ldigt olika, anv\u00e4nder de vanligtvis tre huvudsakliga tekniker: HTML, CSS och JavaScript. Det \u00e4r viktigt att du f\u00f6rst\u00e5r deras roller innan du b\u00f6rjar. \ud83d\udcda<\/p>\n
- \n
- HTML: Hypertext Markup Language l\u00e5ter dig definiera strukturen f\u00f6r ditt inneh\u00e5ll. Med det kan du markera text baserat p\u00e5 dess betydelse, till exempel ange om det \u00e4r ett stycke, en rubrik eller ett objekt i en lista.<\/li>\n
- CSS: Cascading Style Sheets l\u00e5ter dig formatera ditt inneh\u00e5ll. Med hj\u00e4lp av detta spr\u00e5k kan du f\u00e4rga ett stycke gr\u00f6nt, g\u00f6ra alla dina l\u00e4nkar fetstilta eller placera en sidof\u00e4lt bredvid din huvudartikel. \ud83c\udfa8<\/li>\n
- JavaScript: Med detta programmeringsspr\u00e5k kan du l\u00e4gga till funktionalitet p\u00e5 din webbplats. Du kan f\u00e5 knappar att visa eller d\u00f6lja delar av ditt dokument n\u00e4r du klickar p\u00e5 dem, eller implementera en fullfj\u00e4drad ordbehandlare eller ett videospel. \ud83c\udfae<\/li>\n<\/ul>\n
Han webbplats.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"Hemsidan](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nAppens struktur<\/h2>\n
Appen du kommer att bygga kommer att best\u00e5 av tre enkla filer: index.html, styles.css och script.js. \ud83d\uddc2\ufe0f<\/p>\n
Det finns inga speciella krav f\u00f6r att k\u00f6ra appen; du beh\u00f6ver bara en webbl\u00e4sare. Det finns ingen backend-funktionalitet, s\u00e5 du beh\u00f6ver inget skriptspr\u00e5k som PHP eller en lokal webbserver. N\u00e4r du \u00e4r klar kan du \u00f6ppna index.html-filen direkt i din webbl\u00e4sare<\/a> och allt kommer att ordna sig. \ud83d\ude0a<\/p>\n
Det \u00e4r viktigt att n\u00e4mna att den h\u00e4r appen sparar din text utan att skriva den till en specifik fil p\u00e5 disken, eftersom JavaScript inte kan komma \u00e5t filsystemet. Den anv\u00e4nder Web Storage API, ett kraftfullt alternativ till cookies. \ud83c\udf6a\ud83d\udcbe<\/p>\n
Hur man bygger anteckningsenheten<\/h2>\n
Skapa f\u00f6ljande tre filer i samma katalog och \u00f6ppna sedan index.html i en webbl\u00e4sare. Alternativt kan du ladda ner filerna fr\u00e5n detta GitHub-arkiv<\/a>. \ud83d\udce5<\/p>\n
Bygga strukturen med HTML<\/h3>\n
Filen index.html definierar strukturen f\u00f6r din apps inneh\u00e5ll i HTML. Den inneh\u00e5ller referenser till de andra tv\u00e5 filerna s\u00e5 att en webbl\u00e4sare kan kombinera dem till slutprodukten.<\/p>\n
Liksom alla HTML-dokument inneh\u00e5ller den \u00f6versta strukturen en huvuddel som inneh\u00e5ller metadata och en br\u00f6dtextdel som inneh\u00e5ller det faktiska inneh\u00e5llet som kommer att visas p\u00e5 sidan:<\/p>\n
html<\/span>>\r\n<html<\/span>><\/span>\r\n<huvud<\/span>><\/span>\r\n ...\r\nhuvud<\/span>><\/span><\/code><\/pre>\n<kropp<\/span>><\/span>
\n…
\nkropp<\/span>><\/span>
\nhtml<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nMetadata i huvudet \u00e4r mycket kortfattad, med bara en sidtitel (som visas i webbl\u00e4sarens titelf\u00e4lt) och en referens till styles.css-filen:<\/p>\n
<titel<\/span>><\/span>Texttitel<\/span>><\/span>\r\n <l\u00e4nk<\/span> relation<\/span>="stilmall"<\/span> href<\/span>="styles.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nKroppen \u00e4r mer komplicerad, men det finns bara n\u00e5gra f\u00e5 viktiga delar:<\/p>\n
<div<\/span> id<\/span>="disk"<\/span>><\/span>\r\n ord: <sp\u00e4nna<\/span> id<\/span>="ord"<\/span>><\/span>0sp\u00e4nna<\/span>><\/span>\r\n \/ tecken: <sp\u00e4nna<\/span> id<\/span>="tecken"<\/span>><\/span>0sp\u00e4nna<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<textomr\u00e5de<\/span> id<\/span>="text"<\/span> autofokus<\/span>=\u00ab1\u00bb<\/span>><\/span>textomr\u00e5de<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<manus<\/span> k\u00e4lla<\/span>=\u00abscript.js\u00bb<\/span>><\/span>manus<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nDiv-elementet inneh\u00e5ller appens ord- och teckenantal. Det kommer att finnas h\u00f6gst upp i webbappen och uppdateras n\u00e4r texten \u00e4ndras.<\/p>\n
Notera id-attributen, som \u00e4r avg\u00f6rande f\u00f6r \u00e5tg\u00e4rden. V\u00e4rdet p\u00e5 ett id m\u00e5ste vara unikt s\u00e5 att appen kan anv\u00e4nda det f\u00f6r att identifiera ett specifikt element. Att g\u00f6ra detta kan hj\u00e4lpa oss att utforma dessa element och \u00e4ven rikta in dem n\u00e4r vi l\u00e4gger till funktionalitet.<\/p>\n
Textarea \u00e4r ett inbyggt formul\u00e4relement som l\u00e5ter dig skriva enkel text i en webbl\u00e4sare. Med attributet autofocus \u00e4r det klart att skriva s\u00e5 snart sidan laddas. Slutligen refererar sidan till JavaScript-filen script.js.<\/p>\n
Nu kan du \u00f6ppna index.html-filen i en webbl\u00e4sare. Den kommer inte att g\u00f6ra n\u00e5gonting just nu, och den kommer inte ens att se bra ut, men det \u00e4r bra att testa din app i varje steg f\u00f6r att se till att grunderna fungerar som f\u00f6rv\u00e4ntat.<\/p>\n
![\"En](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nF\u00e5 dem att se bra ut med CSS<\/h3>\n
Med CSS kan du utforma delar av din webbsida genom att rikta in dig p\u00e5 just dessa delar och ange v\u00e4rden f\u00f6r egenskaper som teckenstorlek och bakgrundsf\u00e4rg. Den h\u00e4r exempelappen beh\u00f6ver inte en s\u00e4rskilt f\u00f6rfinad design eftersom dess gr\u00e4nssnitt \u00e4r s\u00e5 grundl\u00e4ggande. Vi kan dock sl\u00e4ta ut de oj\u00e4mna kanterna med en touch av stil. \ud83c\udfa8\u2728<\/p>\n
F\u00f6rst, utforma kroppen f\u00f6r att definiera den \u00f6vergripande designen:<\/p>\n
kropp<\/span> {\r\n marginal<\/span>: 0;\r\n stoppning<\/span>: 0;\r\n visa<\/span>: rutn\u00e4t<\/span>;\r\n min-h\u00f6jd<\/span>: 100vh<\/span>;\r\n rutn\u00e4tsmallrader<\/span>: min-inneh\u00e5ll<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
R\u00e4kneraden har en grundl\u00e4ggande stil f\u00f6r att skilja den fr\u00e5n resten av texten, fr\u00e4mst genom sin bakgrund:<\/p>\n
#-r\u00e4knare<\/span> {\r\n typsnittsfamilj<\/span>: sans-serif<\/span>;\r\n bakgrundsf\u00e4rg<\/span>: #f7f7f7<\/span>;\r\n textjustering<\/span>: centrum<\/span>;\r\n bredd<\/span>: 100%;\r\n stoppning<\/span>: 00,5 em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nSlutligen \u00e4r textomr\u00e5det utformat f\u00f6r att visa l\u00e4sbar text med gott om utrymme att andas. Linjen som skiljer r\u00e4kningarna fr\u00e5n texten \u00e4r faktiskt den \u00f6vre kanten av detta textomr\u00e5de.<\/p>\n
textomr\u00e5de<\/span> {\r\n bredd<\/span>: 100%;\r\n h\u00f6jd<\/span>: 100%;\r\n teckenstorlek<\/span>: 16delstat<\/span>;\r\n stoppning<\/span>: 1i<\/span>;\r\n l\u00e5dstorlek<\/span>: kantruta<\/span>;\r\n skissera<\/span>: 0;\r\n gr\u00e4ns<\/span>: ingen<\/span>;\r\n kant-topp<\/span>: 1px<\/span> fast<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"Anteckningsappen](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nL\u00e4gga till funktionalitet med JavaScript<\/h3>\n
Med strukturen och stilen p\u00e5 plats \u00e4r du redo att l\u00e4gga till funktionalitet: koden som g\u00f6r att den h\u00e4r enkla appen faktiskt g\u00f6r n\u00e5got. \ud83d\udee0\ufe0f<\/p>\n
Innan du b\u00f6rjar skriva \u00e4ven den enklaste koden \u00e4r det en bra id\u00e9 att f\u00f6rst\u00e5 vad du vill att den ska g\u00f6ra. I det h\u00e4r fallet finns det bara ett par allm\u00e4nna krav:<\/p>\n
- \n
- Spara den inmatade texten och ladda om den vid behov.<\/li>\n
- Uppdatera tecken- och ordantal f\u00f6r att f\u00e5 statistik i realtid. \ud83d\udcca<\/li>\n<\/ul>\n
B\u00e5da kraven inneb\u00e4r att element i dokumentet uppdateras. S\u00e5 skriptet b\u00f6rjar med att h\u00e4mta referenser till dessa noder med hj\u00e4lp av metoden getElementById:<\/p>\n
konstant<\/span> ord = dokumentera<\/span>.getElementById("ord"<\/span>);\r\nkonstant<\/span> tecken = dokumentera<\/span>.getElementById("tecken"<\/span>);\r\nkonstant<\/span> textarea = dokumentera<\/span>.getElementById("text"<\/span>);\r\n<\/code><\/pre>\nObservera att ord, tecken och text \u00e4r ID:n f\u00f6r respektive element i dokumentet, tilldelade i HTML-filen med id-attributet.<\/p>\n
N\u00e4sta steg \u00e4r att appen ska reagera n\u00e4r texten \u00e4ndras:<\/p>\n
textarea.addEventListener("input"<\/span>, fungera<\/span>(ev<\/span>) <\/span>{ lokallagring.setItem("text"<\/span>, ev.m\u00e5l.v\u00e4rde); uppdatera_antal(ev.m\u00e5l.v\u00e4rde); });\r\n<\/code><\/pre>\nEn h\u00e4ndelselyssnare \u00e4r en funktion som JavaScript automatiskt k\u00f6r n\u00e4r en viss h\u00e4ndelse intr\u00e4ffar. I det h\u00e4r fallet kopplar vi en lyssnare till textarea-noden, som k\u00f6rs n\u00e4r "input"-h\u00e4ndelsen intr\u00e4ffar. Det vill s\u00e4ga n\u00e4r n\u00e5gon interagerar med textarea.<\/p>\n
D\u00e4refter anv\u00e4nder vi Web Storage API f\u00f6r att spara det aktuella inneh\u00e5llet i textomr\u00e5det, vilket kommer fr\u00e5n ev.target.value. I den h\u00e4r strukturen \u00e4r ev ett objekt som representerar h\u00e4ndelsen som utl\u00f6ste lyssnaren, ev.target \u00e4r noden som tog emot h\u00e4ndelsen och ev.target.value \u00e4r texten i det textomr\u00e5det.<\/p>\n
Metoden setItem tar tv\u00e5 parametrar: ett nyckelnamn som ska associeras med data och de faktiska data som ska lagras.<\/p>\n
N\u00e4sta steg \u00e4r att anropa update_counts() och skicka samma text. Vi ska f\u00f6rklara den funktionen strax.<\/p>\n
Nu n\u00e4r vi sparar texten vill du ladda den igen n\u00e4r appen \u00f6ppnas eller laddas om. Vi kan ta hand om det med hj\u00e4lp av en annan lyssnare:<\/p>\n
f\u00f6nster<\/span>.addEventListener("ladda"<\/span>, fungera<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> text = localStorage.getItem("text"<\/span>); textarea.v\u00e4rde = text; uppdatera_antal(text); });\r\n<\/code><\/pre>\nDenna lyssnare hanterar load-h\u00e4ndelsen som intr\u00e4ffar p\u00e5 window-objektet, en representation p\u00e5 toppniv\u00e5 av webbl\u00e4sarf\u00f6nstret. N\u00e4r f\u00f6nstret laddas returnerar ett anrop till getItem() det lagrade textv\u00e4rdet fr\u00e5n lokal lagring. Denna kod st\u00e4ller sedan in v\u00e4rdet f\u00f6r textarea till den laddade texten och anropar, liksom den f\u00f6reg\u00e5ende lyssnaren, update_counts() med denna text.<\/p>\n
Det \u00e5terst\u00e5ende arbetet g\u00f6rs i funktionen update_counts() som ser ut s\u00e5 h\u00e4r:<\/p>\n
fungera<\/span>\u00a0uppdateringsantal<\/span>(text<\/span>) <\/span>{ tecken.innerHTML = text.l\u00e4ngd; ord.innerHTML = text.split()' '<\/span>).l\u00e4ngd; }\r\n<\/code><\/pre>\nTill skillnad fr\u00e5n ett textarea-tecken har vanlig text inte en value-egenskap, s\u00e5 vi st\u00e4ller in innerHTML-egenskapen ist\u00e4llet. Length-egenskapen f\u00f6r en str\u00e4ng \u00e4r en enkel skrivskyddad egenskap som ger oss antalet tecken.<\/p>\n
text.split(' ') delar str\u00e4ngen vid mellanslagstecknen och returnerar resultatet som en array av str\u00e4ngar. Liksom str\u00e4ngar har arrayer en length-egenskap som anger antalet element i en array.<\/p>\n
Om du testar den h\u00e4r koden kan du dock uppt\u00e4cka ett par fel:<\/p>\n
- \n
- Den kommer inte att r\u00e4kna ett ord korrekt p\u00e5 en rad, eftersom det inte finns n\u00e5gra mellanslag runt det.<\/li>\n
- Utan n\u00e5gon text alls kommer den att rapportera ett enda ord p\u00e5 grund av hur delning fungerar.<\/li>\n<\/ol>\n
F\u00f6r att l\u00f6sa det f\u00f6rsta problemet kan du dela p\u00e5 ett regulj\u00e4rt uttryck (\\s betyder "ett tomt tecken") ist\u00e4llet f\u00f6r ett mellanslag. F\u00f6r att l\u00f6sa det andra problemet, filtrera bort tomma str\u00e4ngar fr\u00e5n resultatet:<\/p>\n
ord.innerHTML = text.split(\/\\s\/<\/span>).filtrera(fungera<\/span>(n<\/span>) <\/span>{ \u00e5terv\u00e4nda<\/span> n != ''<\/span>; }).l\u00e4ngd;\r\n<\/code><\/pre>\nOm du inte helt f\u00f6rst\u00e5r den raden, kolla in MDN-sidorna f\u00f6r split<\/a> och filtrera<\/a>.<\/p>\n
![\"Webbapplikationen](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n