Lag din første nettapplikasjon: En nybegynnerveiledning for å bygge en Simple Notes-app og Word-teller

Å starte kodingsreisen kan virke skremmende midt i et overveldende utvalg av språk og rammer. Du kan til og med tenke på å la en AI håndtere alt! Likevel kan programmering for nettet være spennende, tilgjengelig og helt gratis!

Hva du skal bygge

I denne opplæringen skal du lage en enkel nettapplikasjon designet for å lagre tekstnotater mens du teller tegnene og ordene i disse notatene.

Denne applikasjonen lagrer data kontinuerlig, slik at den kan hente tekst selv etter at siden er oppdatert eller åpnet på nytt. Det er en praktisk løsning for å opprettholde rask tilgang til viktig tekst, enten det er adresser, URL-er eller noe annet.

Et eksempel på den enkle tekstnettappen som viser notater inkludert en kalenderoppføring og en liste over nettadresser.

Videre sporer appen tegn- og ordtellinger, og gir en utmerket introduksjon til strengmanipulering. Selv om applikasjonen er grunnleggende i design, gir denne opplæringen deg grunnleggende ferdigheter i utvikling av nettapper, og låser opp enorme muligheter innen koding.

Hvordan du bygger det

Mens nettapplikasjoner kan variere betydelig, integrerer de vanligvis tre essensielle teknologier: HTML, CSS og JavaScript. Hver av disse komponentene har en avgjørende funksjon i webutvikling:

HTML: Dette er strukturen til webapplikasjonen din, som fastslår hvordan innhold er organisert. HTML definerer om tekst er et avsnitt, overskrift eller et listeelement.
CSS: Cascading Style Sheets legger stil til innholdet ditt, slik at du kan endre farger, fonter og layout. Du kan bruke CSS til å gjøre elementer fete, justere kanter og plassere elementer på skjermen.
JavaScript: Dette programmeringsspråket er integrert for å tilføre funksjonalitet til webapplikasjonen din. JavaScript kan skape interaktive opplevelser, som å vise/gjemme elementer eller bygge komplekse applikasjoner som spill.

Hjemmesiden til web.dev-nettstedet med læringsressurser for HTML, CSS og JavaScript.

Appstrukturen

Programmet du skal bygge består av tre enkle filer: index.html, styles.css, og script.js.

Det finnes ingen avanserte krav for å kjøre denne appen – bare en nettleser er tilstrekkelig. Siden dette er en frontend-app, er det ikke behov for backend-skriptspråk som PHP eller lokale servere. Når du er ferdig, åpner du bare index.htmli nettleseren din for å se appen din i aksjon.

Denne appen bruker Web Storage API for å lagre tekst, slik at den kan beholde informasjon uten å måtte skrive til diskfiler, siden JavaScript mangler filsystemtilgang.

Hvordan bygge notattakeren

Begynn med å lage de tre nødvendige filene i samme katalog. Alternativt kan du laste ned filene fra dette GitHub-depotet .

Bygge strukturen med HTML

Filen index.htmllegger opp appens innholdsstruktur. Den inkluderer referanser til CSS- og JavaScript-filene, slik at nettleseren kan slå dem sammen til en sømløs opplevelse.

Akkurat som ethvert HTML-dokument, består hovedrammeverket av en hodeseksjon med metadata og en kropp som inneholder innholdet:

<!DOCTYPE html> <html> <head> ...</head> <body> ...</body> </html>

Hoveddelen inneholder korte metadata, inkludert sidetittelen (synlig i nettleserens tittellinje) og en lenke til styles.cssfilen:

<title>Text</title> <link rel="stylesheet"href="styles.css"/>

Kroppen er mer detaljert, inkludert nøkkelkomponenter:

<div id="counter"> words: <span id="words">0</span> / characters: <span id="chars">0</span> </div> <textarea id="text"autofocus="1"></textarea> <script src="script.js"></script>

Elementet div, identifisert som «teller», inneholder antall ord og tegn. Den forblir på toppen og oppdateres dynamisk etter hvert som teksten endres.

Det er viktig å merke seg bruken av idattributter – deres unike verdier hjelper til med å style disse elementene og målrette dem for funksjonalitet.

Den textareagir et område for brukere å legge inn tekst med autofocusattributtet, noe som sikrer at den er klar for skriving ved sideinnlasting. Til slutt refererer HTML til script.jsfilen.

På dette tidspunktet åpner du index.htmli en nettleser. Den vil ikke fungere ennå og ser kanskje ikke helt riktig ut, men det er nyttig å sjekke fremgangen på hvert trinn.

En visning av nettappen for notater med standard nettleserstiler, som viser alt samlet i øverste venstre hjørne.

Få ting til å se bra ut med CSS

Selv om denne grunnleggende appen ikke krever omfattende designjusteringer, kan vi forbedre layouten med litt styling.

Først etablerer vi kroppsstilen for å skissere det generelle utseendet:

body { margin: 0; padding: 0; display: grid; min-height: 100vh; grid-template-rows: min-content 1fr; }

Denne CSS-en bruker rutenettoppsett for å ordne antall ord og tegn i en smal rad over tekstområdet. Egenskapen grid-template-rowsbestemmer at telleraden skal ta minst mulig plass (min-innhold) mens tekstområdet fyller den gjenværende plassen (1fr).

Tellerraden får grunnleggende styling for å skille den fra tekstområdet, først og fremst gjennom bakgrunnen:

#counter { font-family: sans-serif; background-color: #f7f7f7; text-align: center; width: 100%; padding: 0 0.5em 0; }

Tekstområdet er stylet for å sikre at teksten er lesbar, slik at det er tilstrekkelig hvitt mellomrom:

textarea { width: 100%; height: 100%; font-size: 16pt; padding: 1em; box-sizing: border-box; outline: 0; border: none; border-top: 1px solid #999; }

Notat-appen med tilpassede stiler viser telleverket øverst med et tekstområde i full størrelse nedenfor.

Legge til funksjonalitet med JavaScript

Med grunnlaget lagt ut, er det på tide å sette inn funksjonalitet i applikasjonen din – koden som bringer den til live!

Før du går inn i koding, er det viktig å skissere den tiltenkte funksjonaliteten. For denne applikasjonen vil du fokusere på to hovedmål:

Fortsett og last inn tekst på nytt.
Oppdater tegn- og ordtellinger dynamisk.

Disse funksjonene krever oppdateringer av visse dokumentelementer. Begynn derfor med å skaffe referanser til disse nodene ved å bruke getElementByIdmetoden:

const words = document.getElementById("words"); const chars = document.getElementById("chars"); const textarea = document.getElementById("text");

Her, words, chars, og textareatilsvarer deres respektive seksjoner i dokumentet, identifisert av deres ID-attributter.

Deretter introduserer du interaktivitet ved å stille inn appen til å svare når teksten endres:

textarea.addEventListener("input", function(ev) { localStorage.setItem("text", ev.target.value); update_counts(ev.target.value); });

Metoden addEventListenerbinder en funksjon til å utløse når en spesifisert hendelse inntreffer. I dette tilfellet, når brukeren samhandler med tekstområdet, utløser «input»-hendelsen funksjonen.

Deretter brukes Web Storage API for å bevare tekstområdets nåværende innhold, tilgjengelig via ev.target.value. Metoden setItemknytter en nøkkel til dataene som skal lagres.

For å sikre at teksten lastes inn når appen initialiseres eller oppdateres, legg til en annen lytter:

window.addEventListener("load", function(ev) { var text = localStorage.getItem("text"); textarea.value = text; update_counts(text); });

Denne lytteren reagerer på vinduets innlastingshendelse. Ved innlasting av vinduet henter den den lagrede teksten og setter tekstområdets verdi deretter mens den påkaller update_counts()for å oppdatere antall ord og tegn.

Den gjenværende funksjonaliteten ligger i update_counts()funksjonen, som ser slik ut:

function update_counts(text) { chars.innerHTML = text.length; words.innerHTML = text.split(' ').length; }

I motsetning til et tekstområde mangler ren tekst et verdiattributt; dermed innerHTMLbrukes eiendommen i stedet. Egenskapen lengthtil en streng henter det totale antall tegn.

For å dele teksten inn i ord bruker vi text.split(' '), som deler strengen ved hvert mellomromstegn, og produserer en rekke ord. Lengdeegenskapen til den resulterende matrisen gir antall ord.

Du kan imidlertid støte på et par utfordringer med denne koden:

Det vil ikke telle enkeltord på en linje uten omgivende mellomrom.
Hvis ingen tekst er til stede, vil den rapportere et enkelt ord unøyaktig på grunn av hvordan splitden fungerer.

For å løse det første problemet bør du vurdere å dele på et regulært uttrykk for å ta hensyn til mellomrom: \s. For å løse det andre problemet, filtrer ut eventuelle tomme strenger:

words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;

Nettappen med eksempeltekst, som viser nøyaktige tegn- og ordtellinger.

Å lage nyttige webapplikasjoner kan oppnås med bare noen få grunnleggende filer! Du kan utvide denne enkle notatappen ved å integrere tilleggsfunksjoner, for eksempel å bruke egenskapen window.location for å få tilgang til nettadresser eller la flere notater lagres ved å variere navnene som sendes til localStorage.setItem.

Ytterligere innsikt

1. Hva er forutsetningene for denne nettappopplæringen?

Alt du trenger er en grunnleggende forståelse av HTML, CSS og JavaScript. Verktøy som et tekstredigeringsprogram (f.eks. VSCode) og en nettleser vil også være nyttige.

2. Kan jeg endre denne nettappen for å legge til flere funksjoner?

Absolutt! Denne opplæringen gir et grunnlag. Du kan legge til funksjonalitet som å lagre flere notater, kategorisere notater eller til og med implementere en søkefunksjon!

3. Hvordan fungerer Web Storage API?

Web Storage API lar webapplikasjoner lagre data i nettleseren. Den lagrer data i nøkkelverdi-par som vedvarer selv etter at nettleseren er lukket, noe som gjør det enkelt å hente ut senere.

Kilde og bilder