Opret din første webapplikation: En begyndervejledning til at bygge en Simple Notes-app og Word-tæller

At starte din kodningsrejse kan virke skræmmende midt i et overvældende udvalg af sprog og rammer. Du kan endda tænke på at lade en AI klare alt! Ikke desto mindre kan programmering til nettet være spændende, tilgængeligt og helt gratis!

Hvad du vil bygge

I denne øvelse vil du oprette en simpel webapplikation, der er designet til at gemme tekstnoter, mens du tæller tegnene og ordene i disse noter.

Denne applikation gemmer konstant data, hvilket gør den i stand til at hente tekst, selv efter at siden er blevet opdateret eller genåbnet. Det er en praktisk løsning til at opretholde hurtig adgang til vigtig tekst, hvad enten det er adresser, URL’er eller andet.

Et eksempel på den simple tekstwebapp, der viser noter, herunder en kalenderpost og en liste over URL'er.

Desuden sporer appen tegn- og ordantal, hvilket giver en fremragende introduktion til strengmanipulation. Selvom applikationen er grundlæggende i design, giver denne tutorial dig grundlæggende færdigheder til udvikling af webapps, hvilket frigør enorme muligheder inden for kodning.

Hvordan du vil bygge det

Mens webapplikationer kan variere betydeligt, integrerer de typisk tre essentielle teknologier: HTML, CSS og JavaScript. Hver af disse komponenter tjener en afgørende funktion i webudvikling:

HTML: Dette er strukturen af din webapplikation, der fastslår, hvordan indhold er organiseret. HTML definerer, om tekst er et afsnit, overskrift eller et listeelement.
CSS: Cascading Style Sheets tilføjer stil til dit indhold, så du kan ændre farver, skrifttyper og layout. Du kan bruge CSS til at gøre elementer fed, justere kanter og placere elementer på skærmen.
JavaScript: Dette programmeringssprog er integreret for at tilføre funktionalitet i din webapplikation. JavaScript kan skabe interaktive oplevelser, som at vise/skjule elementer eller bygge komplekse applikationer som spil.

Hjemmesiden for web.dev-webstedet med læringsressourcer til HTML, CSS og JavaScript.

App-strukturen

Den applikation, du er ved at bygge, består af tre enkle filer: index.html, styles.css, og script.js.

Der eksisterer ingen avancerede krav for at køre denne app – kun en webbrowser er tilstrækkelig. Da dette er en frontend-app, er der ikke behov for backend-scriptsprog som PHP eller lokale servere. Når du er færdig, skal du blot åbne index.htmli din browser for at se din app i aktion.

Denne app udnytter Web Storage API til at gemme tekst, hvilket gør den i stand til at beholde information uden at skulle skrive til diskfiler, da JavaScript mangler filsystemadgang.

Sådan bygger du notetageren

Begynd med at oprette de tre nødvendige filer i samme mappe. Alternativt kan du downloade filerne fra dette GitHub-lager .

Opbygning af strukturen med HTML

Filen index.htmlopstiller din apps indholdsstruktur. Det inkluderer referencer til CSS- og JavaScript-filerne, hvilket giver browseren mulighed for at flette dem sammen til en problemfri oplevelse.

Ligesom ethvert HTML-dokument består hovedrammen af en hovedsektion med metadata og en krop, der indeholder indholdet:

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

Hovedafsnittet indeholder korte metadata, herunder sidetitlen (synlig i browserens titellinje) og et link til styles.cssfilen:

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

Kroppen er mere detaljeret, herunder nøglekomponenter:

<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, identificeret som “tæller”, rummer ord- og tegntællingen. Den forbliver øverst og opdateres dynamisk, når teksten ændres.

Det er vigtigt at bemærke brugen af idattributter – deres unikke værdier hjælper med at style disse elementer og målrette dem til funktionalitet.

Den textareagiver et område, hvor brugere kan indtaste tekst med autofocusattributten, hvilket sikrer, at den er klar til at skrive ved sideindlæsning. Endelig refererer HTML til script.jsfilen.

På dette tidspunkt skal du åbne index.htmli en browser. Det fungerer ikke endnu og ser måske ikke helt rigtigt ud, men det er nyttigt at kontrollere dine fremskridt på hvert trin.

En visning af noteoptagelseswebappen med standardbrowserstile, der viser alt samlet i øverste venstre hjørne.

Få tingene til at se godt ud med CSS

Selvom denne grundlæggende app ikke kræver omfattende designjusteringer, kan vi forbedre dens layout med lidt styling.

Først etablerer vi kropsstilen for at skitsere det overordnede udseende:

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

Denne CSS anvender gitterlayout til at arrangere ord- og tegnantal i en smal række over tekstområdet. Egenskaben grid-template-rowsbestemmer, at tællerækken skal tage mindst mulig plads (min-indhold), mens tekstområdet fylder den resterende plads (1fr).

Tællerrækken modtager grundlæggende styling for at adskille den fra tekstområdet, primært gennem dens baggrund:

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

Tekstområdet er stylet for at sikre, at teksten er læselig, hvilket giver mulighed for tilstrækkelig hvid plads:

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

Note-appen med tilpassede stilarter viser tællerlinjen øverst med et tekstområde i fuld størrelse nedenfor.

Tilføjelse af funktionalitet med JavaScript

Med grundlaget lagt, er det tid til at tilføje funktionalitet i din applikation – koden, der bringer den til live!

Før du dykker ned i kodning, er det vigtigt at skitsere den tilsigtede funktionalitet. For denne ansøgning vil du fokusere på to primære mål:

Fortsæt og genindlæs indtastet tekst.
Opdater tegn- og ordtal dynamisk.

Disse funktioner kræver opdateringer af visse dokumentelementer. Begynd derfor med at indhente referencer til disse noder ved hjælp af getElementByIdmetoden:

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

Her, words, chars, og textareasvarer til deres respektive sektioner i dokumentet, identificeret ved deres ID-attributter.

Indfør derefter interaktivitet ved at indstille appen til at reagere, når teksten ændres:

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

Metoden addEventListenerbinder en funktion til at udløse, når en specificeret hændelse opstår. I dette tilfælde, når brugeren interagerer med tekstområdet, udløser “input”-hændelsen funktionen.

Dernæst bruges Web Storage API til at bevare tekstområdets nuværende indhold, der tilgås via ev.target.value. Metoden setItemknytter en nøgle til de data, der skal lagres.

For at sikre, at teksten indlæses, når appen initialiseres eller opdateres, skal du tilføje en anden lytter:

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

Denne lytter reagerer på vinduets indlæsningshændelse. Når vinduet indlæses, henter den den gemte tekst og indstiller tekstområdets værdi i overensstemmelse hermed, mens den påberåber sig update_counts()for at opdatere antallet af ord og tegn.

Den resterende funktionalitet ligger i update_counts()funktionen, som ser sådan ud:

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

I modsætning til et tekstområde mangler almindelig tekst en værdiattribut; således innerHTMLbruges ejendommen i stedet. Egenskaben lengthfor en streng henter det samlede antal tegn.

For at dele teksten op i ord, bruger vi text.split(' '), som deler strengen ved hvert mellemrumstegn, hvilket producerer en række ord. Længdeegenskaben for det resulterende array angiver antallet af ord.

Du kan dog støde på et par udfordringer med denne kode:

Det vil ikke tælle enkelte ord korrekt på en linje uden omgivende mellemrumstegn.
Hvis der ikke er nogen tekst til stede, vil den rapportere et enkelt ord unøjagtigt på grund af, hvordan splitden fungerer.

For at løse det første problem kan du overveje at opdele på et regulært udtryk for at tage højde for mellemrumstegn: \s. For at afhjælpe det andet problem skal du filtrere eventuelle tomme strenge fra:

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

Webappen med eksempeltekst, der viser nøjagtige tegn- og ordtællinger.

Oprettelse af nyttige webapplikationer kan opnås med blot nogle få grundlæggende filer! Du kan udvide denne enkle note-app ved at integrere yderligere funktioner, såsom at bruge egenskaben window.location til at få adgang til URL’er eller tillade, at flere noter gemmes ved at variere de navne, der sendes til localStorage.setItem.

Yderligere indsigt

1. Hvad er forudsætningerne for denne webapp-vejledning?

Alt du behøver er en grundlæggende forståelse af HTML, CSS og JavaScript. Værktøjer som en teksteditor (f.eks. VSCode) og en webbrowser vil også være nyttige.

2. Kan jeg ændre denne webapp for at tilføje flere funktioner?

Absolut! Denne tutorial giver et grundlag. Du kan tilføje funktionalitet såsom at gemme flere noter, kategorisere noter eller endda implementere en søgefunktion!

3. Hvordan fungerer Web Storage API?

Web Storage API tillader webapplikationer at gemme data i browseren. Det gemmer data i nøgle-værdi-par, der fortsætter, selv efter at browseren er lukket, hvilket gør det nemt at hente senere.

Kilde og billeder