• Om oss
  • Meddela
  • Integritetspolicy
  • Kontakta oss
MasterTrend Nyheter
  • Hem
    • BLOGG
    • TEKNISK SERVICE
    • LAGRA
  • Handledningar
  • Hårdvara
  • Spel
  • Mobiltelefoner
  • Säkerhet
  • Fönster
  • AI
  • Programvara
  • Nätverk
  • Nyheter
  • sv_SESwedish
    • es_ESSpanish
    • en_USEnglish
    • pt_BRPortuguese
    • fr_FRFrench
    • it_ITItalian
    • de_DEGerman
    • ko_KRKorean
    • jaJapanese
    • zh_CNChinese
    • ru_RURussian
    • thThai
    • pl_PLPolish
    • tr_TRTurkish
    • id_IDIndonesian
    • hi_INHindi
    • arArabic
    • nl_NLDutch
Inget resultat
Se alla resultat
  • Hem
    • BLOGG
    • TEKNISK SERVICE
    • LAGRA
  • Handledningar
  • Hårdvara
  • Spel
  • Mobiltelefoner
  • Säkerhet
  • Fönster
  • AI
  • Programvara
  • Nätverk
  • Nyheter
  • sv_SESwedish
    • es_ESSpanish
    • en_USEnglish
    • pt_BRPortuguese
    • fr_FRFrench
    • it_ITItalian
    • de_DEGerman
    • ko_KRKorean
    • jaJapanese
    • zh_CNChinese
    • ru_RURussian
    • thThai
    • pl_PLPolish
    • tr_TRTurkish
    • id_IDIndonesian
    • hi_INHindi
    • arArabic
    • nl_NLDutch
Inget resultat
Se alla resultat
MasterTrend Nyheter
Inget resultat
Se alla resultat
Start Handledningar

Skapa din första webbapp och bemästra programmering utan stress 🚀💻

MasterTrend Insights av MasterTrend Insights
13 maj 2025
i Handledningar
Lästid:10 minuters föreläsning
TILL TILL
0
Skapa dina första webbappanteckningar + räknare enkelt och snabbt
1
DELAD
4
Visningar
Dela på FacebookDela på Twitter

Innehåll

  1. Skapa din första webbapp: anteckningar + räknare enkelt och snabbt 📝⚡
  2. Vad du ska bygga
  3. Hur ska du bygga den?
  4. Appens struktur
  5. Hur man bygger anteckningsenheten
    1. Bygga strukturen med HTML
    2. Få dem att se bra ut med CSS
    3. Lägga till funktionalitet med JavaScript
    4. Relaterade inlägg

Skapa din första webbapp: anteckningar + räknare enkelt och snabbt 📝⚡

Att komma igång med programmering kan verka överväldigande, med så många språk, ramverk och metoder att ta hänsyn till. Ibland kan det verka enklare att delegera allt till en AI. Oroa dig inte! Programmering för webben kan vara enkelt, roligt och bäst av allt, helt gratis! 🌐✨

Vad du ska bygga

Genom att följa den här handledningen skapar du en enkel webbapplikation för att lagra textanteckningar och räkna tecken och ord.

Appen lagrar data, så den kommer ihåg texten när du laddar om eller öppnar sidan igen. Det betyder att du har ett bekvämt sätt att spara all text du vill referera till senare, till exempel adresser, webbadresser etc. 📄🔗

Ett exempel på en enkel textbaserad webbapplikation som visar anteckningar, inklusive en kalenderpost och en lista med URL:er.

Den räknar även tecken och ord, vilket är en bra introduktion till strängmanipulation (text). Självklart är appen väldigt enkel – det är poängen! Men med den här handledningen lär du dig grunderna i att utveckla en webbapp, och sedan ligger världen för din sida. 🦪💻

Hur ska du bygga den?

Även om webbapplikationer är väldigt olika, använder de vanligtvis tre huvudsakliga tekniker: HTML, CSS och JavaScript. Det är viktigt att du förstår deras roller innan du börjar. 📚

  • HTML: Hypertext Markup Language låter dig definiera strukturen för ditt innehåll. Med det kan du markera text baserat på dess betydelse, till exempel ange om det är ett stycke, en rubrik eller ett objekt i en lista.
  • CSS: Cascading Style Sheets låter dig formatera ditt innehåll. Med hjälp av detta språk kan du färga ett stycke grönt, göra alla dina länkar fetstilta eller placera en sidofält bredvid din huvudartikel. 🎨
  • JavaScript: Med detta programmeringsspråk kan du lägga till funktionalitet på din webbplats. Du kan få knappar att visa eller dölja delar av ditt dokument när du klickar på dem, eller implementera en fullfjädrad ordbehandlare eller ett videospel. 🎮

Han webbplats.dev (skrivet av medlemmar i Chrome-teamet) och MDN, Mozillas utvecklarnätverk, är två utmärkta informationskällor om grundläggande webbtekniker.

Hemsidan för web.dev-webbplatsen med utbildningsresurser för HTML, CSS och JavaScript.

Appens struktur

Appen du kommer att bygga kommer att bestå av tre enkla filer: index.html, styles.css och script.js. 🗂️

Det finns inga speciella krav för att köra appen; du behöver bara en webbläsare. Det finns ingen backend-funktionalitet, så du behöver inget skriptspråk som PHP eller en lokal webbserver. När du är klar kan du öppna index.html-filen direkt i din webbläsare och allt kommer att ordna sig. 😊

Det är viktigt att nämna att den här appen sparar din text utan att skriva den till en specifik fil på disken, eftersom JavaScript inte kan komma åt filsystemet. Den använder Web Storage API, ett kraftfullt alternativ till cookies. 🍪💾

Hur man bygger anteckningsenheten

Skapa följande tre filer i samma katalog och öppna sedan index.html i en webbläsare. Alternativt kan du ladda ner filerna från detta GitHub-arkiv. 📥

Bygga strukturen med HTML

Filen index.html definierar strukturen för din apps innehåll i HTML. Den innehåller referenser till de andra två filerna så att en webbläsare kan kombinera dem till slutprodukten.

Liksom alla HTML-dokument innehåller den översta strukturen en huvuddel som innehåller metadata och en brödtextdel som innehåller det faktiska innehållet som kommer att visas på sidan:

html>
<html>
<huvud>
    ...
huvud>

<kropp>
…
kropp>
html>

Metadata i huvudet är mycket kortfattad, med bara en sidtitel (som visas i webbläsarens titelfält) och en referens till styles.css-filen:

    <titel>Texttitel>
    <länk relation="stilmall" href="styles.css" />

Kroppen är mer komplicerad, men det finns bara några få viktiga delar:

    <div id="disk">
        ord: <spänna id="ord">0spänna>
        / tecken: <spänna id="tecken">0spänna>
    div>

<textområde id="text" autofokus=«1»>textområde>

<manus källa=«script.js»>manus>

Div-elementet innehåller appens ord- och teckenantal. Det kommer att finnas högst upp i webbappen och uppdateras när texten ändras.

Notera id-attributen, som är avgörande för åtgärden. Värdet på ett id måste vara unikt så att appen kan använda det för att identifiera ett specifikt element. Att göra detta kan hjälpa oss att utforma dessa element och även rikta in dem när vi lägger till funktionalitet.

Textarea är ett inbyggt formulärelement som låter dig skriva enkel text i en webbläsare. Med attributet autofocus är det klart att skriva så snart sidan laddas. Slutligen refererar sidan till JavaScript-filen script.js.

Nu kan du öppna index.html-filen i en webbläsare. Den kommer inte att göra någonting just nu, och den kommer inte ens att se bra ut, men det är bra att testa din app i varje steg för att se till att grunderna fungerar som förväntat.

En vy av webbappen för anteckningar med standardwebbläsarstilar, där allt grupperas i det övre vänstra hörnet.

Få dem att se bra ut med CSS

Med CSS kan du utforma delar av din webbsida genom att rikta in dig på just dessa delar och ange värden för egenskaper som teckenstorlek och bakgrundsfärg. Den här exempelappen behöver inte en särskilt förfinad design eftersom dess gränssnitt är så grundläggande. Vi kan dock släta ut de ojämna kanterna med en touch av stil. 🎨✨

Först, utforma kroppen för att definiera den övergripande designen:

kropp {
    marginal: 0;
    stoppning: 0;
    visa: rutnät;
    min-höjd: 100vh;
    rutnätsmallrader: min-innehåll 1fr;
}

Denna CSS använder rutnätslayouten för att placera ord- och teckenantalet i en smal rad ovanför textområdet. Egenskapen grid-template-rows anger att raden med antal ska vara så kort som möjligt (min-innehåll) och att textområdet ska fylla det återstående utrymmet (1fr).

Räkneraden har en grundläggande stil för att skilja den från resten av texten, främst genom sin bakgrund:

#-räknare {
    typsnittsfamilj: sans-serif;
    bakgrundsfärg: #f7f7f7;
    textjustering: centrum;
    bredd: 100%;
    stoppning: 00,5 em 0;
}

Slutligen är textområdet utformat för att visa läsbar text med gott om utrymme att andas. Linjen som skiljer räkningarna från texten är faktiskt den övre kanten av detta textområde.

textområde {
    bredd: 100%;
    höjd: 100%;
    teckenstorlek: 16delstat;
    stoppning: 1i;
    lådstorlek: kantruta;
    skissera: 0;
    gräns: ingen;
    kant-topp: 1px fast #999;
}
Anteckningsappen med anpassade stilar visar räkningsfältet högst upp med ett textområde i full storlek nedanför.

Lägga till funktionalitet med JavaScript

Med strukturen och stilen på plats är du redo att lägga till funktionalitet: koden som gör att den här enkla appen faktiskt gör något. 🛠️

Innan du börjar skriva även den enklaste koden är det en bra idé att förstå vad du vill att den ska göra. I det här fallet finns det bara ett par allmänna krav:

  • Spara den inmatade texten och ladda om den vid behov.
  • Uppdatera tecken- och ordantal för att få statistik i realtid. 📊

Båda kraven innebär att element i dokumentet uppdateras. Så skriptet börjar med att hämta referenser till dessa noder med hjälp av metoden getElementById:

konstant ord = dokumentera.getElementById("ord");
konstant tecken = dokumentera.getElementById("tecken");
konstant textarea = dokumentera.getElementById("text");

Observera att ord, tecken och text är ID:n för respektive element i dokumentet, tilldelade i HTML-filen med id-attributet.

Nästa steg är att appen ska reagera när texten ändras:

textarea.addEventListener("input", fungera(ev) { lokallagring.setItem("text", ev.mål.värde); uppdatera_antal(ev.mål.värde); });

En händelselyssnare är en funktion som JavaScript automatiskt kör när en viss händelse inträffar. I det här fallet kopplar vi en lyssnare till textarea-noden, som körs när "input"-händelsen inträffar. Det vill säga när någon interagerar med textarea.

Därefter använder vi Web Storage API för att spara det aktuella innehållet i textområdet, vilket kommer från ev.target.value. I den här strukturen är ev ett objekt som representerar händelsen som utlöste lyssnaren, ev.target är noden som tog emot händelsen och ev.target.value är texten i det textområdet.

Metoden setItem tar två parametrar: ett nyckelnamn som ska associeras med data och de faktiska data som ska lagras.

Nästa steg är att anropa update_counts() och skicka samma text. Vi ska förklara den funktionen strax.

Nu när vi sparar texten vill du ladda den igen när appen öppnas eller laddas om. Vi kan ta hand om det med hjälp av en annan lyssnare:

fönster.addEventListener("ladda", fungera(ev) {
    var text = localStorage.getItem("text"); textarea.värde = text; uppdatera_antal(text); });

Denna lyssnare hanterar load-händelsen som inträffar på window-objektet, en representation på toppnivå av webbläsarfönstret. När fönstret laddas returnerar ett anrop till getItem() det lagrade textvärdet från lokal lagring. Denna kod ställer sedan in värdet för textarea till den laddade texten och anropar, liksom den föregående lyssnaren, update_counts() med denna text.

Det återstående arbetet görs i funktionen update_counts() som ser ut så här:

fungera uppdateringsantal(text) { tecken.innerHTML = text.längd; ord.innerHTML = text.split()' ').längd; }

Till skillnad från ett textarea-tecken har vanlig text inte en value-egenskap, så vi ställer in innerHTML-egenskapen istället. Length-egenskapen för en sträng är en enkel skrivskyddad egenskap som ger oss antalet tecken.

text.split(' ') delar strängen vid mellanslagstecknen och returnerar resultatet som en array av strängar. Liksom strängar har arrayer en length-egenskap som anger antalet element i en array.

Om du testar den här koden kan du dock upptäcka ett par fel:

  1. Den kommer inte att räkna ett ord korrekt på en rad, eftersom det inte finns några mellanslag runt det.
  2. Utan någon text alls kommer den att rapportera ett enda ord på grund av hur delning fungerar.

För att lösa det första problemet kan du dela på ett reguljärt uttryck (\s betyder "ett tomt tecken") istället för ett mellanslag. För att lösa det andra problemet, filtrera bort tomma strängar från resultatet:

    ord.innerHTML = text.split(/\s/).filtrera(fungera(n) { återvända n != ''; }).längd;

Om du inte helt förstår den raden, kolla in MDN-sidorna för split och filtrera.

Webbapplikationen med exempeltext som visar korrekt tecken- och ordantal.

Du kan bygga många användbara webbapplikationer med bara några få filer. Du kan också utöka den här enkla anteckningsappen för att lägga till mer funktionalitet. Du kan till exempel använda window.location-egenskapen för att hämta den aktuella URL:en och stödja flera anteckningar genom att variera namnet du skickar till localStorage.setItem. 🗒️🌍

Dela detta:
49FacebookLinkedInPinterestXRedditTumblrBlå himmelTrådarDela
49
AKTIER

Relaterade inlägg

  • Så här åtgärdar du felmeddelandet "Något gick fel" på Twitter
  • Hur man laddar ner inbäddade videor gratis år 2024
  • De bästa diagnostikverktygen för Windows 10/11
  • AMD Radeon RX 7000 5 och 6 nanometer
  • Intel Alder Lake P- och U-aspekter
  • Hastighet med SSD-hårddisk – PC och bärbar dator
  • Boston Dynamics Atlas i aktion
  • Linux-katalogstrukturen, förklarad
Taggar: EvergreenContentTekniska tips
Föregående inlägg

Så här visar eller döljer du bibliotek i Windows 11: Steg-för-steg-guide 🚀🔒

Nästa publikation

RTS-spel: Varför överger stora studiospelare dem? 🎮🔥

MasterTrend Insights

MasterTrend Insights

Vårt redaktionsteam delar med sig av djupgående recensioner, handledningar och rekommendationer som hjälper dig att få ut det mesta av dina digitala enheter och verktyg.

Nästa publikation
RTS-spel: 5 indiespel som håller strategin vid liv

RTS-spel: Varför överger stora studiospelare dem? 🎮🔥

5 2 röster
Artikelbetyg
Prenumerera
Tillträde
Meddela om
gäst
gäst
0 Kommentarer
Äldre
Det nyaste Mer votado
Kommentarer online
Se alla kommentarer

Håll kontakten

  • 976 Fläktar
  • 118 Följare
  • 1,4 tusen Följare
  • 1,8 tusen Prenumeranter

Missa inte det senaste inom teknik och spel.
Exklusiva tips, instruktionsguider och analyser varje dag.

Prenumerationsformulär
  • Tendenser
  • Kommentarer
  • Sista
12 bästa alternativen till Lucky Patcher för Android

Alternativ till Lucky Patcher: 12 bättre och enklare appar! 🎮⚡

12 maj 2025
Så här lägger du till en klocka på ditt Windows 11-skrivbord: 3 idiotsäkra knep!

Så här lägger du till en klocka på ditt Windows 11-skrivbord: Få mer gjort på några minuter! ⏱️

1 maj 2025
Hur man använder AdGuard DNS på Android år 2024

Hur man använder AdGuard DNS på Android år 2025

11 februari 2025
Hur man tvingar fram 4G LTE-läge på Android

Hur man tvingar fram 4G LTE-läge på Android år 2025

10 februari 2025
Gmail-funktioner på Android: Spara tid med 5 tips

Gmail-funktioner på Android: 5 knep du inte visste om! 📱✨

12
Moderkortsreparation - Moderkortsreparation

Reparation av bärbara moderkort

10
Installera Windows 11 Home utan internet

Installera Windows 11 Home utan internet

10
Så här säkerhetskopierar du drivrutiner i Windows 11/10 i 4 steg!

Så här säkerhetskopierar du drivrutiner i Windows 11/10: Undvik fel! 🚨💾

10
Programplats: 5 enkla sätt att hitta den i Windows 11 🔍

Programplats: Ta reda på var det är installerat på några sekunder ⚡️

9 juli 2025
qBittorrent-virus upptäckt

qBittorrent-virus upptäckt? Snabb lösning för att undvika blockeringar ⚡🛡️

9 juli 2025
Svart skärm på Instagram: Åtgärda det nu med dessa 11 metoder!

Svart skärm på Instagram: Åtgärda det nu med dessa 11 metoder! ⚡📱

8 juli 2025
Fortnite Scorpion Hur man får den första blodmedaljen

Fortnite Scorpion: Hur man får den första blodmedaljen 🥷🔥

8 juli 2025

Senaste nyheterna

Programplats: 5 enkla sätt att hitta den i Windows 11 🔍

Programplats: Ta reda på var det är installerat på några sekunder ⚡️

9 juli 2025
5
qBittorrent-virus upptäckt

qBittorrent-virus upptäckt? Snabb lösning för att undvika blockeringar ⚡🛡️

9 juli 2025
4
Svart skärm på Instagram: Åtgärda det nu med dessa 11 metoder!

Svart skärm på Instagram: Åtgärda det nu med dessa 11 metoder! ⚡📱

8 juli 2025
7
Fortnite Scorpion Hur man får den första blodmedaljen

Fortnite Scorpion: Hur man får den första blodmedaljen 🥷🔥

8 juli 2025
5
MasterTrend News-logotyp

MasterTrend Info är din främsta källa för teknik: upptäck nyheter, handledningar och analyser om hårdvara, mjukvara, spel, mobila enheter och artificiell intelligens. Prenumerera på vårt nyhetsbrev och missa inga trender.

Följ oss

Bläddra efter kategori

  • Spel
  • Hårdvara
  • AI
  • Mobiltelefoner
  • Nyheter
  • Nätverk
  • Säkerhet
  • Programvara
  • Handledningar
  • Fönster

Senaste nyheterna

Programplats: 5 enkla sätt att hitta den i Windows 11 🔍

Programplats: Ta reda på var det är installerat på några sekunder ⚡️

9 juli 2025
qBittorrent-virus upptäckt

qBittorrent-virus upptäckt? Snabb lösning för att undvika blockeringar ⚡🛡️

9 juli 2025
  • Om oss
  • Meddela
  • Integritetspolicy
  • Kontakta oss

Upphovsrätt © 2025 https://mastertrend.info/ - Alla rättigheter förbehållna. Alla varumärken tillhör sina respektive ägare.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
nl_NL Dutch
sv_SE Swedish
Inget resultat
Se alla resultat
  • sv_SESwedish
    • es_ESSpanish
    • en_USEnglish
    • pt_BRPortuguese
    • fr_FRFrench
    • it_ITItalian
    • de_DEGerman
    • ko_KRKorean
    • jaJapanese
    • zh_CNChinese
    • ru_RURussian
    • pl_PLPolish
    • id_IDIndonesian
    • tr_TRTurkish
    • hi_INHindi
    • thThai
    • arArabic
    • nl_NLDutch
  • Spel
  • Hårdvara
  • AI
  • Mobiltelefoner
  • Nyheter
  • Nätverk
  • Säkerhet
  • Programvara
  • Handledningar
  • Fönster

Upphovsrätt © 2025 https://mastertrend.info/ - Alla rättigheter förbehållna. Alla varumärken tillhör sina respektive ägare.

Information om kommentarförfattare
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_chock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_utropstecken::wpds_fråga::wpds_idé::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth:
wpDiskussion
RedditBlå himmelXMastodontHackernyheter
Dela detta:
MastodontVKWhatsAppTelegramSMSHackernyheterLinjeBudbärare
Din Mastodon-instans