Het starten van je codeerreis kan ontmoedigend lijken te midden van een overweldigende keuze aan talen en frameworks. Je zou er zelfs aan kunnen denken om een AI alles te laten regelen! Toch kan programmeren voor het web spannend, toegankelijk en helemaal gratis zijn!
Wat je gaat bouwen
In deze tutorial maakt u een eenvoudige webapplicatie waarmee u tekstnotities kunt opslaan en tegelijkertijd de tekens en woorden in die notities kunt tellen.
Deze applicatie slaat gegevens permanent op, waardoor het tekst kan ophalen, zelfs na het vernieuwen van de pagina of het opnieuw openen ervan. Het is een praktische oplossing om snel toegang te houden tot belangrijke tekst, of het nu adressen, URL’s of iets anders zijn.
Bovendien houdt de app het aantal tekens en woorden bij, wat een uitstekende introductie biedt tot stringmanipulatie. Hoewel de applicatie een eenvoudig ontwerp heeft, leert deze tutorial u fundamentele vaardigheden voor web-app-ontwikkeling, waardoor u enorme mogelijkheden krijgt in codering.
Hoe je het gaat bouwen
Hoewel webapplicaties aanzienlijk kunnen verschillen, integreren ze doorgaans drie essentiële technologieën: HTML, CSS en JavaScript. Elk van deze componenten vervult een cruciale functie in webontwikkeling:
- HTML: Dit is de structuur van uw webapplicatie, die vastlegt hoe content is georganiseerd. HTML definieert of tekst een alinea, kop of een lijstitem is.
- CSS: Cascading Style Sheets voegen stijl toe aan uw content, zodat u kleuren, lettertypen en lay-out kunt wijzigen. U kunt CSS gebruiken om elementen vet te maken, randen aan te passen en elementen op het scherm te positioneren.
- JavaScript: Deze programmeertaal is essentieel voor het toevoegen van functionaliteit aan uw webapplicatie. JavaScript kan interactieve ervaringen creëren, zoals het tonen/verbergen van elementen of het bouwen van complexe applicaties zoals games.
De app-structuur
De applicatie die u gaat bouwen, bestaat uit drie eenvoudige bestanden: index.html, styles.css, en script.js.
Er zijn geen geavanceerde vereisten om deze app te draaien: een webbrowser is voldoende. Omdat dit een front-end app is, zijn back-end scripttalen zoals PHP of lokale servers niet nodig. Na voltooiing opent u de app gewoon index.htmlin uw browser om uw app in actie te zien.
Deze app maakt gebruik van de Web Storage API om tekst op te slaan. Zo kan informatie worden bewaard zonder dat er naar schijfbestanden hoeft te worden geschreven, omdat JavaScript geen toegang heeft tot het bestandssysteem.
Hoe je de Note Taker bouwt
Begin met het maken van de drie benodigde bestanden in dezelfde directory. U kunt de bestanden ook downloaden van deze GitHub-repository .
De structuur bouwen met HTML
Het index.htmlbestand legt de inhoudsstructuur van uw app vast. Het bevat verwijzingen naar de CSS- en JavaScript-bestanden, zodat de browser deze kan samenvoegen tot een naadloze ervaring.
Net als elk HTML-document bestaat het hoofdframework uit een head-sectie met metagegevens en een body met de inhoud:
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
Het kopgedeelte bevat korte metagegevens, waaronder de paginatitel (zichtbaar in de titelbalk van de browser) en een link naar het styles.cssbestand:
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
De body is gedetailleerder, inclusief de belangrijkste onderdelen:
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
Het divelement, geïdentificeerd als “counter”, herbergt het aantal woorden en tekens. Het blijft bovenaan staan en wordt dynamisch bijgewerkt als de tekst verandert.
Het is belangrijk om op het gebruik van idkenmerken te letten: hun unieke waarden helpen bij het vormgeven van deze elementen en bij het bepalen van de functionaliteit.
Het textareabiedt een gebied voor gebruikers om tekst in te voeren met het autofocuskenmerk, zodat het klaar is om te typen bij het laden van de pagina. Ten slotte verwijst de HTML naar het script.jsbestand.
Open op dit punt index.htmlin een browser. Het zal nog niet werken en het ziet er misschien niet helemaal goed uit, maar het is handig om je voortgang in elke fase te controleren.
Dingen er goed uit laten zien met CSS
Hoewel deze basis-app geen uitgebreide ontwerpaanpassingen nodig heeft, kunnen we de lay-out verbeteren met wat styling.
Eerst stellen we de carrosserievorm vast om het algehele uiterlijk te schetsen:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
Deze CSS gebruikt rasterlay-out om woord- en tekentellingen in een smalle rij boven het tekstvak te rangschikken. De grid-template-rowseigenschap bepaalt dat de tellingrij zo min mogelijk ruimte in beslag moet nemen (min-content) terwijl het tekstvak de resterende ruimte vult (1fr).
De tellerrij krijgt een basisopmaak om hem te onderscheiden van het tekstvak, voornamelijk via de achtergrond:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
Het tekstvak is zo vormgegeven dat de tekst leesbaar is en er voldoende witruimte is:
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
Functionaliteit toevoegen met JavaScript
Nu de basis is gelegd, is het tijd om functionaliteit aan uw applicatie toe te voegen: de code die uw applicatie tot leven brengt!
Voordat u in de codering duikt, is het essentieel om de beoogde functionaliteit te schetsen. Voor deze toepassing richt u zich op twee primaire doelen:
- Ingevoerde tekst behouden en opnieuw laden.
- Werk het aantal tekens en woorden dynamisch bij.
Deze functies vereisen updates voor bepaalde documentelementen. Begin daarom met het verkrijgen van referenties naar deze knooppunten met behulp van de getElementByIdmethode:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
Hier komen words, chars, en textareaovereen met hun respectievelijke secties in het document, geïdentificeerd door hun ID-attributen.
Zorg vervolgens voor interactiviteit door de app zo in te stellen dat deze reageert wanneer de tekst wordt gewijzigd:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
De addEventListenermethode bindt een functie om te triggeren wanneer een opgegeven gebeurtenis optreedt. In dit geval triggert de gebeurtenis “input” de functie zodra de gebruiker met het tekstgebied interageert.
Vervolgens wordt de Web Storage API gebruikt om de huidige inhoud van het tekstvak te bewaren, die toegankelijk is via ev.target.value. De setItemmethode koppelt een sleutel aan de gegevens die moeten worden opgeslagen.
Om ervoor te zorgen dat de tekst wordt geladen wanneer de app wordt geïnitialiseerd of vernieuwd, voegt u een andere listener toe:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
Deze listener reageert op de load-gebeurtenis van het venster. Bij het laden van het venster haalt het de opgeslagen tekst op en stelt de waarde van het tekstvak dienovereenkomstig in, terwijl het wordt aangeroepen update_counts()om het aantal woorden en tekens te vernieuwen.
De overige functionaliteit bevindt zich in de update_counts()functie, die er als volgt uitziet:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
In tegenstelling tot een textarea, mist platte tekst een waardeattribuut; daarom innerHTMLwordt in plaats daarvan de eigenschap gebruikt. De lengtheigenschap van een string haalt het totale aantal tekens op.
Om de tekst in woorden op te splitsen, gebruiken we text.split(' '), die de string bij elk spatieteken verdeelt, wat een array van woorden oplevert. De length-eigenschap van de resulterende array geeft het aantal woorden.
Er kunnen zich echter een aantal uitdagingen voordoen bij het gebruik van deze code:
- Losse woorden op een regel zonder omringende spaties worden niet correct geteld.
- Als er geen tekst aanwezig is, zal het een enkel woord onjuist rapporteren vanwege de manier
splitwaarop het werkt.
Om het eerste probleem aan te pakken, kunt u overwegen om te splitsen op een reguliere expressie om rekening te houden met witruimtetekens: \s. Om het tweede probleem op te lossen, filtert u alle lege strings eruit:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
Met slechts een paar basisbestanden kunt u nuttige webapplicaties maken! U kunt deze eenvoudige notitie-app uitbreiden door extra functies te integreren, zoals het gebruiken van de eigenschap window.location om toegang te krijgen tot URL’s of het toestaan dat meerdere notities worden opgeslagen door de namen die worden doorgegeven aan te variëren localStorage.setItem.
Extra inzichten
1. Wat zijn de vereisten voor deze web-app-zelfstudie?
Het enige wat u nodig hebt is een basiskennis van HTML, CSS en JavaScript. Hulpmiddelen zoals een teksteditor (bijv. VSCode) en een webbrowser zijn ook handig.
2. Kan ik deze web-app aanpassen om meer functies toe te voegen?
Absoluut! Deze tutorial biedt een basis. Je kunt functionaliteit toevoegen zoals het opslaan van meerdere notities, het categoriseren van notities of zelfs het implementeren van een zoekfunctie!
3. Hoe werkt de Web Storage API?
Met de Web Storage API kunnen webapplicaties gegevens opslaan in de browser. Het slaat gegevens op in sleutel-waardeparen die blijven bestaan, zelfs nadat de browser is gesloten, waardoor ze later eenvoudig kunnen worden opgehaald.
Geef een reactie