• Over ons
  • Aankondigen
  • Privacybeleid
  • Neem contact met ons op
MasterTrend Nieuws
  • Thuis
    • BLOG
    • TECHNISCHE SERVICE
    • WINKEL
  • Zelfstudies
  • Hardware
  • Gamen
  • Mobiele telefoons
  • Beveiliging
  • Ramen
  • KI
  • Software
  • Netwerken
  • Nieuws
  • nl_NLDutch
    • 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
    • sv_SESwedish
Geen resultaat
Bekijk alle resultaten
  • Thuis
    • BLOG
    • TECHNISCHE SERVICE
    • WINKEL
  • Zelfstudies
  • Hardware
  • Gamen
  • Mobiele telefoons
  • Beveiliging
  • Ramen
  • KI
  • Software
  • Netwerken
  • Nieuws
  • nl_NLDutch
    • 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
    • sv_SESwedish
Geen resultaat
Bekijk alle resultaten
MasterTrend Nieuws
Geen resultaat
Bekijk alle resultaten
Begin Zelfstudies

Maak je eerste webapp en leer programmeren zonder stress 🚀💻

MasterTrend inzichten door MasterTrend inzichten
13 mei 2025
in Zelfstudies
Leesduur:Lezing van 10 minuten
NAAR NAAR
0
Maak eenvoudig en snel uw eerste webapp-notities en -teller
1
GEDEELD
4
Uitzichten
Delen op FacebookDelen op Twitter

Inhoud

  1. Maak je eerste webapp: notities + teller eenvoudig en snel 📝⚡
  2. Wat je gaat bouwen
  3. Hoe ga je het bouwen?
  4. De structuur van de app
  5. Hoe je de Note Taker bouwt
    1. De structuur bouwen met HTML
    2. Ze er goed uit laten zien met CSS
    3. Functionaliteit toevoegen met JavaScript
    4. Gerelateerde berichten

Maak je eerste webapp: notities + teller eenvoudig en snel 📝⚡

Beginnen met programmeren kan overweldigend lijken, met zoveel programmeertalen, frameworks en methodologieën om te overwegen. Soms lijkt het misschien makkelijker om alles aan een AI te delegeren. Maak je geen zorgen! Programmeren voor het web kan eenvoudig, leuk en bovendien helemaal gratis zijn! 🌐✨

Wat je gaat bouwen

Met deze tutorial maakt u een eenvoudige webapplicatie waarmee u tekstnotities kunt opslaan en tekens en woorden kunt tellen.

De app bewaart gegevens, zodat de tekst wordt onthouden wanneer je de pagina opnieuw laadt of opent. Dit betekent dat je gemakkelijk tekst kunt opslaan die je later wilt raadplegen, zoals adressen, URL's, enzovoort. 📄🔗

Een voorbeeld van een eenvoudige tekstgebaseerde webtoepassing die notities weergeeft, inclusief een agenda-item en een lijst met URL's.

Het telt ook tekens en woorden, wat een goede introductie is tot het manipuleren van strings (tekst). Natuurlijk is de app heel eenvoudig – dat is juist de bedoeling! Maar met deze tutorial leer je de basisprincipes van het ontwikkelen van een webapp, en dan ligt de wereld aan je voeten. 🦪💻

Hoe ga je het bouwen?

Hoewel webapplicaties zeer divers zijn, maken ze doorgaans gebruik van drie hoofdtechnologieën: HTML, CSS en JavaScript. Het is essentieel dat je hun rol begrijpt voordat je begint.

  • Met HTML: Hypertext Markup Language kun je de structuur van je content definiëren. Je kunt er tekst mee markeren op basis van de betekenis, bijvoorbeeld om aan te geven of het een alinea, een kop of een item in een lijst betreft.
  • CSS: Met Cascading Style Sheets kun je je content stylen. Met deze taal kun je een alinea groen kleuren, alle links vetgedrukt maken of een zijbalk naast je hoofdartikel plaatsen. 🎨
  • JavaScript: Met deze programmeertaal kun je functionaliteit aan je website toevoegen. Je kunt knoppen delen van je document laten weergeven of verbergen wanneer erop wordt geklikt, of een complete tekstverwerker of videogame implementeren. 🎮

Hij website.dev (geschreven door leden van het Chrome-team) en MDN, het Mozilla Developer Network, zijn twee uitstekende bronnen van informatie over fundamentele webtechnologieën.

De homepage van de web.dev-site met leermiddelen voor HTML, CSS en JavaScript.

De structuur van de app

De app die je bouwt, bestaat uit drie eenvoudige bestanden: index.html, styles.css en script.js. 🗂️

Er zijn geen speciale vereisten om de app te gebruiken; je hebt alleen een webbrowser nodig. Er is geen backendfunctionaliteit, dus je hebt geen scripttaal zoals PHP of een lokale webserver nodig. Zodra je klaar bent, kun je de app openen. index.html-bestand rechtstreeks in uw browser en alles komt goed. 😊

Het is belangrijk om te vermelden dat deze app je tekst opslaat zonder deze naar een specifiek bestand op schijf te schrijven, omdat JavaScript geen toegang heeft tot het bestandssysteem. Het maakt gebruik van de Web Storage API, een krachtig alternatief voor cookies. 🍪💾

Hoe je de Note Taker bouwt

Maak de volgende drie bestanden in dezelfde directory en open vervolgens index.html in een webbrowser. U kunt de bestanden ook downloaden van deze GitHub-repository. 📥

De structuur bouwen met HTML

Het bestand index.html definieert de structuur van de content van je app in HTML. Het bevat verwijzingen naar de andere twee bestanden, zodat een browser deze kan combineren tot het eindproduct.

Zoals bij alle HTML-documenten bestaat de hoofdstructuur uit een head-sectie met metagegevens en een body-sectie met de daadwerkelijke inhoud die op de pagina zal verschijnen:

html>
<html>
<hoofd>
    ...
hoofd>

<lichaam>
…
lichaam>
html>

De metagegevens in de head zijn heel beknopt, met alleen de paginatitel (die in de titelbalk van uw browser verschijnt) en een verwijzing naar het styles.css-bestand:

    <titel>Teksttitel>
    <link rel="stijlblad" href="stijlen.css" />

Het lichaam is ingewikkelder, maar er zijn slechts een paar belangrijke onderdelen:

    <div id="balie">
        woorden: <span id="woorden">0span>
        / tekens: <span id="tekens">0span>
    div>

<tekstvak id="tekst" autofocus=«1»>tekstvak>

<script bron=«script.js»>script>

Het div-element bevat het aantal woorden en tekens van de app. Het bevindt zich bovenaan de webapp en wordt bijgewerkt wanneer de tekst verandert.

Let op de id-attributen, die essentieel zijn voor de werking. De waarde van een id moet uniek zijn, zodat de app deze kan gebruiken om een specifiek element te identificeren. Dit kan ons helpen bij het stylen van deze elementen en bij het toevoegen van functionaliteit.

Het tekstvak is een ingebouwd formulierelement waarmee u eenvoudige tekst in een browser kunt typen. Dankzij het autofocus-attribuut is het klaar om te typen zodra de pagina geladen is. Ten slotte verwijst de pagina naar het JavaScript-bestand script.js.

Je kunt nu het bestand index.html in een browser openen. Het doet nu niets en het ziet er ook niet goed uit, maar het is nuttig om je app in elke fase te testen om er zeker van te zijn dat de basisfuncties werken zoals je verwacht.

Een weergave van de web-app voor het maken van notities met standaardbrowserstijlen, waarbij alles gegroepeerd is in de linkerbovenhoek.

Ze er goed uit laten zien met CSS

Met CSS kun je delen van je webpagina stylen door die delen te targeten en waarden op te geven voor eigenschappen zoals lettergrootte en achtergrondkleur. Deze voorbeeldapp heeft geen heel verfijnd ontwerp nodig omdat de interface zo basic is. We kunnen de ruwe kantjes echter wel gladstrijken met een vleugje stijl. 🎨✨

Style eerst het lichaam om het algehele ontwerp te definiëren:

lichaam {
    marge: 0;
    vulling: 0;
    weergave: rooster;
    min-hoogte: 100vh;
    raster-sjabloon-rijen: min-inhoud 1vr;
}

Deze CSS gebruikt de rasterindeling Om het aantal woorden en tekens in een smalle rij boven het tekstvak te plaatsen. De eigenschap grid-template-rows specificeert dat de rij met het aantal woorden zo kort mogelijk moet zijn (min-content) en dat het tekstvak de resterende ruimte (1 fr) moet vullen.

De tellerrij heeft een basisopmaak om hem te onderscheiden van de rest van de tekst, vooral door de achtergrond:

#-teller {
    lettertypefamilie: schreefloos;
    achtergrondkleur: #f7f7f7;
    tekst-uitlijning: centrum;
    breedte: 100%;
    vulling: 0.5em 0;
}

Ten slotte wordt het tekstgebied zo vormgegeven dat de tekst leesbaar is en voldoende ruimte biedt. De lijn die de aantallen van de tekst scheidt, is feitelijk de bovenrand van dit tekstgebied.

tekstvak {
    breedte: 100%;
    hoogte: 100%;
    lettergrootte: 16pt;
    vulling: 1in;
    doosformaat: grensvak;
    overzicht: 0;
    grens: geen;
    grens-boven: 1px stevig #999;
}
De notitie-app met aangepaste stijlen geeft de telbalk bovenaan weer met daaronder een tekstvak op volledige grootte.

Functionaliteit toevoegen met JavaScript

Nu de structuur en stijl op orde zijn, bent u klaar om functionaliteit toe te voegen: de code die ervoor zorgt dat deze eenvoudige app daadwerkelijk iets doet. 🛠️

Voordat je zelfs de eenvoudigste code begint te schrijven, is het een goed idee om te begrijpen wat je ermee wilt doen. In dit geval zijn er slechts een paar algemene vereisten:

  • Sla de ingevoerde tekst op en laad deze indien nodig opnieuw.
  • Werk het aantal tekens en woorden bij om realtime statistieken te krijgen. 📊

Beide vereisten vereisen het bijwerken van elementen in het document. Het script begint daarom met het verkrijgen van verwijzingen naar deze knooppunten met behulp van de getElementById-methode:

constant woorden = document.getElementById("woorden");
constant tekens = document.getElementById("tekens");
constant tekstvak = document.getElementById("tekst");

Houd er rekening mee dat woorden, tekens en tekst de ID's zijn van hun respectieve elementen in het document. Deze worden in het HTML-bestand toegewezen met het id-kenmerk.

Vervolgens moeten we ervoor zorgen dat de app reageert wanneer de tekst wordt gewijzigd:

tekstgebied.addEventListener("invoer", functie(ev) { lokaleOpslag.setItem("tekst", ev.doel.waarde); update_counts(ev.doel.waarde); });

Een event listener is een functie die JavaScript automatisch uitvoert wanneer een bepaalde gebeurtenis plaatsvindt. In dit geval koppelen we een listener aan het textarea-knooppunt, dat wordt uitgevoerd wanneer de "input"-gebeurtenis plaatsvindt. Dat wil zeggen, wanneer iemand interactie heeft met het textarea.

Vervolgens gebruiken we de Web Storage API om de huidige inhoud van het tekstvak op te slaan, dat afkomstig is van ev.target.value. In deze structuur is ev een object dat de gebeurtenis vertegenwoordigt die de listener heeft geactiveerd, ev.target is het knooppunt dat de gebeurtenis heeft ontvangen en ev.target.value is de tekst van dat tekstvak.

De setItem-methode accepteert twee parameters: een sleutelnaam om aan de gegevens te koppelen en de daadwerkelijke gegevens die moeten worden opgeslagen.

Vervolgens roepen we update_counts() aan, waarbij we dezelfde tekst doorgeven. We leggen die functie zo meteen uit.

Nu we de tekst opslaan, wil je deze opnieuw laden wanneer de app wordt geopend of opnieuw wordt geladen. We kunnen dit doen met een andere listener:

raam.addEventListener("laden", functie(ev) {
    var tekst = lokaleOpslag.getItem("tekst"); textarea.value = tekst; update_counts(tekst); });

Deze listener verwerkt de laadgebeurtenis die plaatsvindt op het vensterobject, een representatie op het hoogste niveau van het browservenster. Wanneer het venster laadt, retourneert een aanroep van getItem() de opgeslagen tekstwaarde uit de lokale opslag. Deze code stelt vervolgens de waarde van het tekstvak in op de geladen tekst en roept, net als de vorige listener, update_counts() aan met deze tekst.

Het resterende werk wordt gedaan in de functie update_counts() die er als volgt uitziet:

functie update_counts(tekst) { chars.innerHTML = tekst.lengte; woorden.innerHTML = tekst.split(' ').lengte; }

In tegenstelling tot een tekstvak heeft gewone tekst geen waarde-eigenschap, dus stellen we in plaats daarvan de innerHTML-eigenschap in. De lengte-eigenschap van een string is een eenvoudige alleen-lezen-eigenschap die ons het aantal tekens geeft.

text.split(' ') splitst de string op de spaties en retourneert het resultaat als een array van strings. Net als strings hebben arrays een lengte-eigenschap die het aantal elementen in een array aangeeft.

Als u deze code test, ziet u mogelijk een aantal fouten:

  1. Een woord op zichzelf op een regel wordt niet correct geteld, omdat er geen spaties omheen staan.
  2. Als er helemaal geen tekst is, wordt er één woord gerapporteerd vanwege de manier waarop de splitsing werkt.

Om het eerste probleem op te lossen, kunt u splitsen op een reguliere expressie (\s betekent "een leeg teken") in plaats van een spatie. Om het tweede probleem op te lossen, filtert u lege strings uit het resultaat:

    woorden.innerHTML = text.split(/\S/).filter(functie(N) { opbrengst n != ''; }).lengte;

Als je deze zin niet helemaal begrijpt, bekijk dan de MDN-pagina's voor split En filter.

De webapplicatie met voorbeeldtekst, met nauwkeurige teken- en woordtellingen.

Met slechts een paar bestanden kun je veel nuttige webapplicaties bouwen. Je kunt deze eenvoudige notitie-app ook uitbreiden met meer functionaliteit. Je kunt bijvoorbeeld de window.location-eigenschap om de huidige URL op te halen en meerdere notities te ondersteunen door de naam die u doorgeeft aan localStorage.setItem te variëren. 🗒️🌍

Deel dit:
49FacebookLinkedInPinterestXRedditTumblrBlauwhemelDradenDeel
49
AANDELEN

Gerelateerde berichten

  • Hoe je de foutmelding 'Er is iets misgegaan' op Twitter kunt oplossen
  • Hoe u in 2024 gratis ingesloten video's kunt downloaden
  • De beste diagnostische tools voor Windows 10/11
  • AMD Radeon RX 7000 5 en 6 nanometer
  • Intel Alder Lake P en U aspecten
  • Snelheid met SSD solid state drive – PC en Laptop
  • Boston Dynamics Atlas in actie
  • De Linux-directorystructuur uitgelegd
Trefwoorden: EvergreenContentTechnische tips
Vorige bericht

Bibliotheken weergeven of verbergen in Windows 11: stapsgewijze handleiding 🚀🔒

Volgende publicatie

RTS-games: waarom laten grote studio's ze in de steek? 🎮🔥

MasterTrend inzichten

MasterTrend inzichten

Ons redactieteam deelt diepgaande recensies, tutorials en aanbevelingen om u te helpen het maximale uit uw digitale apparaten en hulpmiddelen te halen.

Volgende publicatie
RTS-games: 5 indietitels die de strategie levend houden

RTS-games: waarom laten grote studio's ze in de steek? 🎮🔥

5 2 stemmen
Artikelbeoordeling
Abonneren
Toegang
Melden van
gast
gast
0 Reacties
Oudste
De nieuwe Meer gestemd
Reacties online
Bekijk alle reacties

Blijf verbonden

  • 976 Fans
  • 118 Volgers
  • 1,4k Volgers
  • 1,8k Abonnees

Mis het nieuwste op het gebied van technologie en gaming niet.
Dagelijks exclusieve tips, instructievideo's en analyses.

Inschrijfformulier
  • Tendensen
  • Reacties
  • Laatst
12 beste alternatieven voor Lucky Patcher voor Android

Lucky Patcher-alternatieven: 12 betere en gemakkelijke apps! 🎮⚡

12 mei 2025
Zo voegt u een klok toe aan uw Windows 11-bureaublad: 3 onfeilbare trucs!

Zo voeg je een klok toe aan je Windows 11-desktop: doe meer in een paar minuten! ⏱️

1 mei 2025
Hoe AdGuard DNS op Android te gebruiken in 2024

Hoe AdGuard DNS op Android te gebruiken in 2025

11 februari 2025
Hoe je de 4G LTE-only-modus op Android kunt forceren

Hoe je de 4G LTE-only-modus op Android in 2025 kunt forceren

10 februari 2025
Gmail-functies op Android: bespaar tijd met 5 tips

Gmail-functies op Android: 5 trucs die je nog niet kende! 📱✨

12
Moederbord Reparatie - Moederbord Reparatie

Reparatie van notebookmoederborden

10
Windows 11 Home installeren zonder internet

Windows 11 Home installeren zonder internet

10
Hoe u in 4 stappen een back-up van drivers in Windows 11/10 maakt!

Hoe maak je een back-up van drivers in Windows 11/10: Voorkom fouten! 🚨💾

10
Programmalocatie: 5 eenvoudige manieren om het te vinden in Windows 11 🔍

Programmalocatie: Ontdek binnen enkele seconden waar het is geïnstalleerd ⚡️

9 juli 2025
qBittorrent-virus gedetecteerd

qBittorrent-virus gedetecteerd? Snelle oplossing om blokkades te voorkomen ⚡🛡️

9 juli 2025
Zwart scherm op Instagram: los het nu op met deze 11 methoden!

Zwart scherm op Instagram: los het nu op met deze 11 methoden! ⚡📱

8 juli 2025
Fortnite Scorpion Hoe je de First Blood Medal krijgt

Fortnite Scorpion: Hoe je de eerste bloedmedaille krijgt 🥷🔥

8 juli 2025

Recent nieuws

Programmalocatie: 5 eenvoudige manieren om het te vinden in Windows 11 🔍

Programmalocatie: Ontdek binnen enkele seconden waar het is geïnstalleerd ⚡️

9 juli 2025
6
qBittorrent-virus gedetecteerd

qBittorrent-virus gedetecteerd? Snelle oplossing om blokkades te voorkomen ⚡🛡️

9 juli 2025
4
Zwart scherm op Instagram: los het nu op met deze 11 methoden!

Zwart scherm op Instagram: los het nu op met deze 11 methoden! ⚡📱

8 juli 2025
7
Fortnite Scorpion Hoe je de First Blood Medal krijgt

Fortnite Scorpion: Hoe je de eerste bloedmedaille krijgt 🥷🔥

8 juli 2025
5
MasterTrend Nieuws-logo

MasterTrend Info is dé bron voor technologie: ontdek nieuws, tutorials en analyses over hardware, software, gaming, mobiele apparaten en kunstmatige intelligentie. Abonneer u op onze nieuwsbrief en mis geen enkele trend.

Volg ons

Bladeren op categorie

  • Gamen
  • Hardware
  • KI
  • Mobiele telefoons
  • Nieuws
  • Netwerken
  • Beveiliging
  • Software
  • Zelfstudies
  • Ramen

Recent nieuws

Programmalocatie: 5 eenvoudige manieren om het te vinden in Windows 11 🔍

Programmalocatie: Ontdek binnen enkele seconden waar het is geïnstalleerd ⚡️

9 juli 2025
qBittorrent-virus gedetecteerd

qBittorrent-virus gedetecteerd? Snelle oplossing om blokkades te voorkomen ⚡🛡️

9 juli 2025
  • Over ons
  • Aankondigen
  • Privacybeleid
  • Neem contact met ons op

Copyright © 2025 https://mastertrend.info/ - Alle rechten voorbehouden. Alle handelsmerken zijn eigendom van hun respectievelijke eigenaren.

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
Geen resultaat
Bekijk alle resultaten
  • nl_NLDutch
    • 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
    • sv_SESwedish
  • Gamen
  • Hardware
  • KI
  • Mobiele telefoons
  • Nieuws
  • Netwerken
  • Beveiliging
  • Software
  • Zelfstudies
  • Ramen

Copyright © 2025 https://mastertrend.info/ - Alle rechten voorbehouden. Alle handelsmerken zijn eigendom van hun respectievelijke eigenaren.

Commentaar Auteur Info
:wpds_smile::wpds_grin::wpds_knipoog::wpds_mrgreen::wpds_neutraal::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_verdrietig::wpds_uitroepteken::wpds_vraag::wpds_idee::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth:
wpDiscuz
RedditBlauwhemelXMastodontHacker Nieuws
Deel dit:
MastodontVKWhatsAppTelegramSMSHacker NieuwsLijnBoodschapper
Uw Mastodon-instantie