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>

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:

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.

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. 🗒️🌍