![\"Et](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Et")
<\/figure>\nDesuden sporer appen tegn- og ordantal, hvilket giver en fremragende introduktion til strengmanipulation. Selvom applikationen er grundl\u00e6ggende i design, giver denne tutorial dig grundl\u00e6ggende f\u00e6rdigheder til udvikling af webapps, hvilket frig\u00f8r enorme muligheder inden for kodning.<\/p>\n
Hvordan du vil bygge det<\/h2>\n
Mens webapplikationer kan variere betydeligt, integrerer de typisk tre essentielle teknologier: HTML, CSS og JavaScript. Hver af disse komponenter tjener en afg\u00f8rende funktion i webudvikling:<\/p>\n
- \n
- HTML:<\/strong> Dette er strukturen af \u200b\u200bdin webapplikation, der fastsl\u00e5r, hvordan indhold er organiseret. HTML definerer, om tekst er et afsnit, overskrift eller et listeelement.<\/li>\n
- CSS:<\/strong> Cascading Style Sheets tilf\u00f8jer stil til dit indhold, s\u00e5 du kan \u00e6ndre farver, skrifttyper og layout. Du kan bruge CSS til at g\u00f8re elementer fed, justere kanter og placere elementer p\u00e5 sk\u00e6rmen.<\/li>\n
- JavaScript:<\/strong> Dette programmeringssprog er integreret for at tilf\u00f8re funktionalitet i din webapplikation. JavaScript kan skabe interaktive oplevelser, som at vise\/skjule elementer eller bygge komplekse applikationer som spil.<\/li>\n<\/ul>\n
![\"Hjemmesiden](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"Hjemmesiden")
<\/figure>\nApp-strukturen<\/h2>\n
Den applikation, du er ved at bygge, best\u00e5r af tre enkle filer:
index.html<\/code>,styles.css<\/code>, ogscript.js<\/code>.<\/p>\nDer eksisterer ingen avancerede krav for at k\u00f8re denne app – kun en webbrowser er tilstr\u00e6kkelig. Da dette er en frontend-app, er der ikke behov for backend-scriptsprog som PHP eller lokale servere. N\u00e5r du er f\u00e6rdig, skal du blot \u00e5bne
index.html<\/code>i din browser for at se din app i aktion.<\/p>\nDenne app udnytter Web Storage API til at gemme tekst, hvilket g\u00f8r den i stand til at beholde information uden at skulle skrive til diskfiler, da JavaScript mangler filsystemadgang.<\/p>\n
S\u00e5dan bygger du notetageren<\/h2>\n
Begynd med at oprette de tre n\u00f8dvendige filer i samme mappe. Alternativt kan du downloade filerne fra dette GitHub-lager<\/a> .<\/p>\n
Opbygning af strukturen med HTML<\/h3>\n
Filen
index.html<\/code>opstiller din apps indholdsstruktur. Det inkluderer referencer til CSS- og JavaScript-filerne, hvilket giver browseren mulighed for at flette dem sammen til en problemfri oplevelse.<\/p>\nLigesom ethvert HTML-dokument best\u00e5r hovedrammen af \u200b\u200ben hovedsektion med metadata og en krop, der indeholder indholdet:<\/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>\nHovedafsnittet indeholder korte metadata, herunder sidetitlen (synlig i browserens titellinje) og et link til
styles.css<\/code>filen:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nKroppen er mere detaljeret, herunder n\u00f8glekomponenter:<\/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>\nElementet
div<\/code>, identificeret som “t\u00e6ller”, rummer ord- og tegnt\u00e6llingen. Den forbliver \u00f8verst og opdateres dynamisk, n\u00e5r teksten \u00e6ndres.<\/p>\nDet er vigtigt at bem\u00e6rke brugen af
id<\/code>\u200b\u200battributter \u2013 deres unikke v\u00e6rdier hj\u00e6lper med at style disse elementer og m\u00e5lrette dem til funktionalitet.<\/p>\nDen
textarea<\/code>giver et omr\u00e5de, hvor brugere kan indtaste tekst medautofocus<\/code>attributten, hvilket sikrer, at den er klar til at skrive ved sideindl\u00e6sning. Endelig refererer HTML tilscript.js<\/code>filen.<\/p>\nP\u00e5 dette tidspunkt skal du \u00e5bne
index.html<\/code>i en browser. Det fungerer ikke endnu og ser m\u00e5ske ikke helt rigtigt ud, men det er nyttigt at kontrollere dine fremskridt p\u00e5 hvert trin.<\/p>\n![\"En](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"En")
<\/figure>\nF\u00e5 tingene til at se godt ud med CSS<\/h3>\n
Selvom denne grundl\u00e6ggende app ikke kr\u00e6ver omfattende designjusteringer, kan vi forbedre dens layout med lidt styling.<\/p>\n
F\u00f8rst etablerer vi kropsstilen for at skitsere det overordnede udseende:<\/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>\nDenne CSS anvender gitterlayout<\/a> til at arrangere ord- og tegnantal i en smal r\u00e6kke over tekstomr\u00e5det. Egenskaben
grid-template-rows<\/code>bestemmer, at t\u00e6ller\u00e6kken skal tage mindst mulig plads (min-indhold), mens tekstomr\u00e5det fylder den resterende plads (1fr).<\/p>\nT\u00e6llerr\u00e6kken modtager grundl\u00e6ggende styling for at adskille den fra tekstomr\u00e5det, prim\u00e6rt gennem dens baggrund:<\/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>\nTekstomr\u00e5det er stylet for at sikre, at teksten er l\u00e6selig, hvilket giver mulighed for tilstr\u00e6kkelig hvid plads:<\/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![\"Note-appen](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"Note-appen")
<\/figure>\nTilf\u00f8jelse af funktionalitet med JavaScript<\/h3>\n
Med grundlaget lagt, er det tid til at tilf\u00f8je funktionalitet i din applikation \u2013 koden, der bringer den til live!<\/p>\n
F\u00f8r du dykker ned i kodning, er det vigtigt at skitsere den tilsigtede funktionalitet. For denne ans\u00f8gning vil du fokusere p\u00e5 to prim\u00e6re m\u00e5l:<\/p>\n
- \n
- Forts\u00e6t og genindl\u00e6s indtastet tekst.<\/li>\n
- Opdater tegn- og ordtal dynamisk.<\/li>\n<\/ul>\n
Disse funktioner kr\u00e6ver opdateringer af visse dokumentelementer. Begynd derfor med at indhente referencer til disse noder ved hj\u00e6lp af
getElementById<\/code>metoden:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nHer,
words<\/code>,chars<\/code>, ogtextarea<\/code>svarer til deres respektive sektioner i dokumentet, identificeret ved deres ID-attributter.<\/p>\nIndf\u00f8r derefter interaktivitet ved at indstille appen til at reagere, n\u00e5r teksten \u00e6ndres:<\/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>\nMetoden
addEventListener<\/code>binder en funktion til at udl\u00f8se, n\u00e5r en specificeret h\u00e6ndelse opst\u00e5r. I dette tilf\u00e6lde, n\u00e5r brugeren interagerer med tekstomr\u00e5det, udl\u00f8ser “input”-h\u00e6ndelsen funktionen.<\/p>\nDern\u00e6st bruges Web Storage API til at bevare tekstomr\u00e5dets nuv\u00e6rende indhold, der tilg\u00e5s via
ev.target.value<\/code>. MetodensetItem<\/code>knytter en n\u00f8gle til de data, der skal lagres.<\/p>\nFor at sikre, at teksten indl\u00e6ses, n\u00e5r appen initialiseres eller opdateres, skal du tilf\u00f8je en anden lytter:<\/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>\nDenne lytter reagerer p\u00e5 vinduets indl\u00e6sningsh\u00e6ndelse. N\u00e5r vinduet indl\u00e6ses, henter den den gemte tekst og indstiller tekstomr\u00e5dets v\u00e6rdi i overensstemmelse hermed, mens den p\u00e5ber\u00e5ber sig
update_counts()<\/code>for at opdatere antallet af ord og tegn.<\/p>\nDen resterende funktionalitet ligger i
update_counts()<\/code>funktionen, som ser s\u00e5dan ud:<\/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>\nI mods\u00e6tning til et tekstomr\u00e5de mangler almindelig tekst en v\u00e6rdiattribut; s\u00e5ledes
innerHTML<\/code>bruges ejendommen i stedet. Egenskabenlength<\/code>for en streng henter det samlede antal tegn.<\/p>\nFor at dele teksten op i ord, bruger vi
text.split(' ')<\/code>, som deler strengen ved hvert mellemrumstegn, hvilket producerer en r\u00e6kke ord. L\u00e6ngdeegenskaben for det resulterende array angiver antallet af ord.<\/p>\nDu kan dog st\u00f8de p\u00e5 et par udfordringer med denne kode:<\/p>\n
- \n
- Det vil ikke t\u00e6lle enkelte ord korrekt p\u00e5 en linje uden omgivende mellemrumstegn.<\/li>\n
- Hvis der ikke er nogen tekst til stede, vil den rapportere et enkelt ord un\u00f8jagtigt p\u00e5 grund af, hvordan
split<\/code>den fungerer.<\/li>\n<\/ol>\nFor at l\u00f8se det f\u00f8rste problem kan du overveje at opdele p\u00e5 et regul\u00e6rt udtryk for at tage h\u00f8jde for mellemrumstegn:
\\s<\/code>. For at afhj\u00e6lpe det andet problem skal du filtrere eventuelle tomme strenge fra:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"Webappen](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"Webappen")
<\/figure>\nOprettelse af nyttige webapplikationer kan opn\u00e5s med blot nogle f\u00e5 grundl\u00e6ggende filer! Du kan udvide denne enkle note-app ved at integrere yderligere funktioner, s\u00e5som at bruge egenskaben window.location<\/a> til at f\u00e5 adgang til URL’er eller tillade, at flere noter gemmes ved at variere de navne, der sendes til
localStorage.setItem<\/code>.<\/p>\nYderligere indsigt<\/h3>\n
1. Hvad er foruds\u00e6tningerne for denne webapp-vejledning?<\/strong><\/h4>\n
Alt du beh\u00f8ver er en grundl\u00e6ggende forst\u00e5else af HTML, CSS og JavaScript. V\u00e6rkt\u00f8jer som en teksteditor (f.eks. VSCode) og en webbrowser vil ogs\u00e5 v\u00e6re nyttige.<\/p>\n
2. Kan jeg \u00e6ndre denne webapp for at tilf\u00f8je flere funktioner?<\/strong><\/h4>\n
Absolut! Denne tutorial giver et grundlag. Du kan tilf\u00f8je funktionalitet s\u00e5som at gemme flere noter, kategorisere noter eller endda implementere en s\u00f8gefunktion!<\/p>\n
3. Hvordan fungerer Web Storage API?<\/strong><\/h4>\n
Web Storage API tillader webapplikationer at gemme data i browseren. Det gemmer data i n\u00f8gle-v\u00e6rdi-par, der forts\u00e6tter, selv efter at browseren er lukket, hvilket g\u00f8r det nemt at hente senere.<\/p>\n
- CSS:<\/strong> Cascading Style Sheets tilf\u00f8jer stil til dit indhold, s\u00e5 du kan \u00e6ndre farver, skrifttyper og layout. Du kan bruge CSS til at g\u00f8re elementer fed, justere kanter og placere elementer p\u00e5 sk\u00e6rmen.<\/li>\n