![\"Et](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Et")
<\/figure>\nVidere sporer appen tegn- og ordtellinger, og gir en utmerket introduksjon til strengmanipulering. Selv om applikasjonen er grunnleggende i design, gir denne oppl\u00e6ringen deg grunnleggende ferdigheter i utvikling av nettapper, og l\u00e5ser opp enorme muligheter innen koding.<\/p>\n
Hvordan du bygger det<\/h2>\n
Mens nettapplikasjoner kan variere betydelig, integrerer de vanligvis tre essensielle teknologier: HTML, CSS og JavaScript. Hver av disse komponentene har en avgj\u00f8rende funksjon i webutvikling:<\/p>\n
- \n
- HTML:<\/strong> Dette er strukturen til webapplikasjonen din, som fastsl\u00e5r hvordan innhold er organisert. HTML definerer om tekst er et avsnitt, overskrift eller et listeelement.<\/li>\n
- CSS:<\/strong> Cascading Style Sheets legger stil til innholdet ditt, slik at du kan endre farger, fonter og layout. Du kan bruke CSS til \u00e5 gj\u00f8re elementer fete, justere kanter og plassere elementer p\u00e5 skjermen.<\/li>\n
- JavaScript:<\/strong> Dette programmeringsspr\u00e5ket er integrert for \u00e5 tilf\u00f8re funksjonalitet til webapplikasjonen din. JavaScript kan skape interaktive opplevelser, som \u00e5 vise\/gjemme elementer eller bygge komplekse applikasjoner som spill.<\/li>\n<\/ul>\n
![\"Hjemmesiden](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"Hjemmesiden")
<\/figure>\nAppstrukturen<\/h2>\n
Programmet du skal bygge best\u00e5r av tre enkle filer:
index.html<\/code>,styles.css<\/code>, ogscript.js<\/code>.<\/p>\nDet finnes ingen avanserte krav for \u00e5 kj\u00f8re denne appen – bare en nettleser er tilstrekkelig. Siden dette er en frontend-app, er det ikke behov for backend-skriptspr\u00e5k som PHP eller lokale servere. N\u00e5r du er ferdig, \u00e5pner du bare
index.html<\/code>i nettleseren din for \u00e5 se appen din i aksjon.<\/p>\nDenne appen bruker Web Storage API for \u00e5 lagre tekst, slik at den kan beholde informasjon uten \u00e5 m\u00e5tte skrive til diskfiler, siden JavaScript mangler filsystemtilgang.<\/p>\n
Hvordan bygge notattakeren<\/h2>\n
Begynn med \u00e5 lage de tre n\u00f8dvendige filene i samme katalog. Alternativt kan du laste ned filene fra dette GitHub-depotet<\/a> .<\/p>\n
Bygge strukturen med HTML<\/h3>\n
Filen
index.html<\/code>legger opp appens innholdsstruktur. Den inkluderer referanser til CSS- og JavaScript-filene, slik at nettleseren kan sl\u00e5 dem sammen til en s\u00f8ml\u00f8s opplevelse.<\/p>\nAkkurat som ethvert HTML-dokument, best\u00e5r hovedrammeverket av en hodeseksjon med metadata og en kropp som inneholder innholdet:<\/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>\nHoveddelen inneholder korte metadata, inkludert sidetittelen (synlig i nettleserens tittellinje) og en lenke 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 mer detaljert, inkludert n\u00f8kkelkomponenter:<\/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>, identifisert som “teller”, inneholder antall ord og tegn. Den forblir p\u00e5 toppen og oppdateres dynamisk etter hvert som teksten endres.<\/p>\nDet er viktig \u00e5 merke seg bruken av
id<\/code>attributter \u2013 deres unike verdier hjelper til med \u00e5 style disse elementene og m\u00e5lrette dem for funksjonalitet.<\/p>\nDen
textarea<\/code>gir et omr\u00e5de for brukere \u00e5 legge inn tekst medautofocus<\/code>attributtet, noe som sikrer at den er klar for skriving ved sideinnlasting. Til slutt refererer HTML tilscript.js<\/code>filen.<\/p>\nP\u00e5 dette tidspunktet \u00e5pner du
index.html<\/code>i en nettleser. Den vil ikke fungere enn\u00e5 og ser kanskje ikke helt riktig ut, men det er nyttig \u00e5 sjekke fremgangen p\u00e5 hvert trinn.<\/p>\n![\"En](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"En")
<\/figure>\nF\u00e5 ting til \u00e5 se bra ut med CSS<\/h3>\n
Selv om denne grunnleggende appen ikke krever omfattende designjusteringer, kan vi forbedre layouten med litt styling.<\/p>\n
F\u00f8rst etablerer vi kroppsstilen for \u00e5 skissere det generelle utseendet:<\/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-en bruker rutenettoppsett<\/a> for \u00e5 ordne antall ord og tegn i en smal rad over tekstomr\u00e5det. Egenskapen
grid-template-rows<\/code>bestemmer at telleraden skal ta minst mulig plass (min-innhold) mens tekstomr\u00e5det fyller den gjenv\u00e6rende plassen (1fr).<\/p>\nTellerraden f\u00e5r grunnleggende styling for \u00e5 skille den fra tekstomr\u00e5det, f\u00f8rst og fremst gjennom bakgrunnen:<\/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 \u00e5 sikre at teksten er lesbar, slik at det er tilstrekkelig hvitt mellomrom:<\/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![\"Notat-appen](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"Notat-appen")
<\/figure>\nLegge til funksjonalitet med JavaScript<\/h3>\n
Med grunnlaget lagt ut, er det p\u00e5 tide \u00e5 sette inn funksjonalitet i applikasjonen din \u2013 koden som bringer den til live!<\/p>\n
F\u00f8r du g\u00e5r inn i koding, er det viktig \u00e5 skissere den tiltenkte funksjonaliteten. For denne applikasjonen vil du fokusere p\u00e5 to hovedm\u00e5l:<\/p>\n
- \n
- Fortsett og last inn tekst p\u00e5 nytt.<\/li>\n
- Oppdater tegn- og ordtellinger dynamisk.<\/li>\n<\/ul>\n
Disse funksjonene krever oppdateringer av visse dokumentelementer. Begynn derfor med \u00e5 skaffe referanser til disse nodene ved \u00e5 bruke
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>tilsvarer deres respektive seksjoner i dokumentet, identifisert av deres ID-attributter.<\/p>\nDeretter introduserer du interaktivitet ved \u00e5 stille inn appen til \u00e5 svare n\u00e5r teksten endres:<\/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 funksjon til \u00e5 utl\u00f8se n\u00e5r en spesifisert hendelse inntreffer. I dette tilfellet, n\u00e5r brukeren samhandler med tekstomr\u00e5det, utl\u00f8ser “input”-hendelsen funksjonen.<\/p>\nDeretter brukes Web Storage API for \u00e5 bevare tekstomr\u00e5dets n\u00e5v\u00e6rende innhold, tilgjengelig via
ev.target.value<\/code>. MetodensetItem<\/code>knytter en n\u00f8kkel til dataene som skal lagres.<\/p>\nFor \u00e5 sikre at teksten lastes inn n\u00e5r appen initialiseres eller oppdateres, legg til en annen 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 lytteren reagerer p\u00e5 vinduets innlastingshendelse. Ved innlasting av vinduet henter den den lagrede teksten og setter tekstomr\u00e5dets verdi deretter mens den p\u00e5kaller
update_counts()<\/code>for \u00e5 oppdatere antall ord og tegn.<\/p>\nDen gjenv\u00e6rende funksjonaliteten ligger i
update_counts()<\/code>funksjonen, som ser slik ut:<\/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 motsetning til et tekstomr\u00e5de mangler ren tekst et verdiattributt; dermed
innerHTML<\/code>brukes eiendommen i stedet. Egenskapenlength<\/code>til en streng henter det totale antall tegn.<\/p>\nFor \u00e5 dele teksten inn i ord bruker vi
text.split(' ')<\/code>, som deler strengen ved hvert mellomromstegn, og produserer en rekke ord. Lengdeegenskapen til den resulterende matrisen gir antall ord.<\/p>\nDu kan imidlertid st\u00f8te p\u00e5 et par utfordringer med denne koden:<\/p>\n
- \n
- Det vil ikke telle enkeltord p\u00e5 en linje uten omgivende mellomrom.<\/li>\n
- Hvis ingen tekst er til stede, vil den rapportere et enkelt ord un\u00f8yaktig p\u00e5 grunn av hvordan
split<\/code>den fungerer.<\/li>\n<\/ol>\nFor \u00e5 l\u00f8se det f\u00f8rste problemet b\u00f8r du vurdere \u00e5 dele p\u00e5 et regul\u00e6rt uttrykk for \u00e5 ta hensyn til mellomrom:
\\s<\/code>. For \u00e5 l\u00f8se det andre problemet, filtrer ut eventuelle tomme strenger:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"Nettappen](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"Nettappen")
<\/figure>\n\u00c5 lage nyttige webapplikasjoner kan oppn\u00e5s med bare noen f\u00e5 grunnleggende filer! Du kan utvide denne enkle notatappen ved \u00e5 integrere tilleggsfunksjoner, for eksempel \u00e5 bruke egenskapen window.location<\/a> for \u00e5 f\u00e5 tilgang til nettadresser eller la flere notater lagres ved \u00e5 variere navnene som sendes til
localStorage.setItem<\/code>.<\/p>\nYtterligere innsikt<\/h3>\n
1. Hva er forutsetningene for denne nettappoppl\u00e6ringen?<\/strong><\/h4>\n
Alt du trenger er en grunnleggende forst\u00e5else av HTML, CSS og JavaScript. Verkt\u00f8y som et tekstredigeringsprogram (f.eks. VSCode) og en nettleser vil ogs\u00e5 v\u00e6re nyttige.<\/p>\n
2. Kan jeg endre denne nettappen for \u00e5 legge til flere funksjoner?<\/strong><\/h4>\n
Absolutt! Denne oppl\u00e6ringen gir et grunnlag. Du kan legge til funksjonalitet som \u00e5 lagre flere notater, kategorisere notater eller til og med implementere en s\u00f8kefunksjon!<\/p>\n
3. Hvordan fungerer Web Storage API?<\/strong><\/h4>\n
Web Storage API lar webapplikasjoner lagre data i nettleseren. Den lagrer data i n\u00f8kkelverdi-par som vedvarer selv etter at nettleseren er lukket, noe som gj\u00f8r det enkelt \u00e5 hente ut senere.<\/p>\n
- CSS:<\/strong> Cascading Style Sheets legger stil til innholdet ditt, slik at du kan endre farger, fonter og layout. Du kan bruke CSS til \u00e5 gj\u00f8re elementer fete, justere kanter og plassere elementer p\u00e5 skjermen.<\/li>\n