![\"Een](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nHet telt ook tekens en woorden, wat een goede introductie is tot het manipuleren van strings (tekst). Natuurlijk is de app heel eenvoudig \u2013 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. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Hoe ga je het bouwen?<\/h2>\n
Hoewel webapplicaties zeer divers zijn, maken ze doorgaans gebruik van drie hoofdtechnologie\u00ebn: HTML, CSS en JavaScript. Het is essentieel dat je hun rol begrijpt voordat je begint.<\/p>\n
- \n
- Met HTML: Hypertext Markup Language kun je de structuur van je content defini\u00ebren. 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.<\/li>\n
- 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. \ud83c\udfa8<\/li>\n
- 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. \ud83c\udfae<\/li>\n<\/ul>\n
Hij website.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"De](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nDe structuur van de app<\/h2>\n
De app die je bouwt, bestaat uit drie eenvoudige bestanden: index.html, styles.css en script.js. \ud83d\uddc2\ufe0f<\/p>\n
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<\/a> en alles komt goed. \ud83d\ude0a<\/p>\n
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. \ud83c\udf6a\ud83d\udcbe<\/p>\n
Hoe je de Note Taker bouwt<\/h2>\n
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<\/a>. \ud83d\udce5<\/p>\n
De structuur bouwen met HTML<\/h3>\n
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.<\/p>\n
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:<\/p>\n
html<\/span>>\r\n<html<\/span>><\/span>\r\n<hoofd<\/span>><\/span>\r\n ...\r\nhoofd<\/span>><\/span><\/code><\/pre>\n<lichaam<\/span>><\/span>
\n…
\nlichaam<\/span>><\/span>
\nhtml<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nDe 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:<\/p>\n
<titel<\/span>><\/span>Teksttitel<\/span>><\/span>\r\n <link<\/span> rel<\/span>="stijlblad"<\/span> href<\/span>="stijlen.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nHet lichaam is ingewikkelder, maar er zijn slechts een paar belangrijke onderdelen:<\/p>\n
<div<\/span> id<\/span>="balie"<\/span>><\/span>\r\n woorden: <span<\/span> id<\/span>="woorden"<\/span>><\/span>0span<\/span>><\/span>\r\n \/ tekens: <span<\/span> id<\/span>="tekens"<\/span>><\/span>0span<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<tekstvak<\/span> id<\/span>="tekst"<\/span> autofocus<\/span>=\u00ab1\u00bb<\/span>><\/span>tekstvak<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<script<\/span> bron<\/span>=\u00abscript.js\u00bb<\/span>><\/span>script<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nHet div-element bevat het aantal woorden en tekens van de app. Het bevindt zich bovenaan de webapp en wordt bijgewerkt wanneer de tekst verandert.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
![\"Een](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nZe er goed uit laten zien met CSS<\/h3>\n
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. \ud83c\udfa8\u2728<\/p>\n
Style eerst het lichaam om het algehele ontwerp te defini\u00ebren:<\/p>\n
lichaam<\/span> {\r\n marge<\/span>: 0;\r\n vulling<\/span>: 0;\r\n weergave<\/span>: rooster<\/span>;\r\n min-hoogte<\/span>: 100vh<\/span>;\r\n raster-sjabloon-rijen<\/span>: min-inhoud<\/span> 1vr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
De tellerrij heeft een basisopmaak om hem te onderscheiden van de rest van de tekst, vooral door de achtergrond:<\/p>\n
#-teller<\/span> {\r\n lettertypefamilie<\/span>: schreefloos<\/span>;\r\n achtergrondkleur<\/span>: #f7f7f7<\/span>;\r\n tekst-uitlijning<\/span>: centrum<\/span>;\r\n breedte<\/span>: 100%;\r\n vulling<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nTen 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.<\/p>\n
tekstvak<\/span> {\r\n breedte<\/span>: 100%;\r\n hoogte<\/span>: 100%;\r\n lettergrootte<\/span>: 16pt<\/span>;\r\n vulling<\/span>: 1in<\/span>;\r\n doosformaat<\/span>: grensvak<\/span>;\r\n overzicht<\/span>: 0;\r\n grens<\/span>: geen<\/span>;\r\n grens-boven<\/span>: 1px<\/span> stevig<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"De](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nFunctionaliteit toevoegen met JavaScript<\/h3>\n
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. \ud83d\udee0\ufe0f<\/p>\n
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:<\/p>\n
- \n
- Sla de ingevoerde tekst op en laad deze indien nodig opnieuw.<\/li>\n
- Werk het aantal tekens en woorden bij om realtime statistieken te krijgen. \ud83d\udcca<\/li>\n<\/ul>\n
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:<\/p>\n
constant<\/span> woorden = document<\/span>.getElementById("woorden"<\/span>);\r\nconstant<\/span> tekens = document<\/span>.getElementById("tekens"<\/span>);\r\nconstant<\/span> tekstvak = document<\/span>.getElementById("tekst"<\/span>);\r\n<\/code><\/pre>\nHoud 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.<\/p>\n
Vervolgens moeten we ervoor zorgen dat de app reageert wanneer de tekst wordt gewijzigd:<\/p>\n
tekstgebied.addEventListener("invoer"<\/span>, functie<\/span>(ev<\/span>) <\/span>{ lokaleOpslag.setItem("tekst"<\/span>, ev.doel.waarde); update_counts(ev.doel.waarde); });\r\n<\/code><\/pre>\nEen 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.<\/p>\n
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.<\/p>\n
De setItem-methode accepteert twee parameters: een sleutelnaam om aan de gegevens te koppelen en de daadwerkelijke gegevens die moeten worden opgeslagen.<\/p>\n
Vervolgens roepen we update_counts() aan, waarbij we dezelfde tekst doorgeven. We leggen die functie zo meteen uit.<\/p>\n
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:<\/p>\n
raam<\/span>.addEventListener("laden"<\/span>, functie<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> tekst = lokaleOpslag.getItem("tekst"<\/span>); textarea.value = tekst; update_counts(tekst); });\r\n<\/code><\/pre>\nDeze 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.<\/p>\n
Het resterende werk wordt gedaan in de functie update_counts() die er als volgt uitziet:<\/p>\n
functie<\/span>\u00a0update_counts<\/span>(tekst<\/span>) <\/span>{ chars.innerHTML = tekst.lengte; woorden.innerHTML = tekst.split(' '<\/span>).lengte; }\r\n<\/code><\/pre>\nIn 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.<\/p>\n
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.<\/p>\n
Als u deze code test, ziet u mogelijk een aantal fouten:<\/p>\n
- \n
- Een woord op zichzelf op een regel wordt niet correct geteld, omdat er geen spaties omheen staan.<\/li>\n
- Als er helemaal geen tekst is, wordt er \u00e9\u00e9n woord gerapporteerd vanwege de manier waarop de splitsing werkt.<\/li>\n<\/ol>\n
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:<\/p>\n
woorden.innerHTML = text.split(\/\\S\/<\/span>).filter(functie<\/span>(N<\/span>) <\/span>{ opbrengst<\/span> n != ''<\/span>; }).lengte;\r\n<\/code><\/pre>\nAls je deze zin niet helemaal begrijpt, bekijk dan de MDN-pagina's voor split<\/a> En filter<\/a>.<\/p>\n
![\"De](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n