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. 📄🔗
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. 🎮
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:
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.
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:
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:
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.
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:
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:
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:
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:
Een woord op zichzelf op een regel wordt niet correct geteld, omdat er geen spaties omheen staan.
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.
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. 🗒️🌍
Gratis pc-games - Beste gratis pc-games Ontdek de beste gratis pc-games die je nu kunt downloaden en geniet urenlang van plezier zonder een cent uit te geven...
Beste AI-spraakgeneratoren 2025: opties… Ontdek de beste AI-spraakgeneratoren van 2025 en transformeer uw projecten met slechts één klik in unieke ervaringen. 🚀
Ons redactieteam deelt diepgaande recensies, tutorials en aanbevelingen om u te helpen het maximale uit uw digitale apparaten en hulpmiddelen te halen.
