Basisprincipes van JavaScript: Werken met datum en tijd

Inleiding

Datum en tijd zijn niet alleen cruciale componenten van het dagelijks leven, maar ook een onderdeel van computerprogrammering. Of je ze nu nodig hebt om afspraken te boeken of een kalender weer te geven, er zijn veel redenen waarom je een datum en tijd nodig zou hebben. De toepassingen van datum- en tijdfuncties zijn uitgebreid en uiterst veelzijdig. De veelzijdigheid komt voort uit het feit dat je de tijd en datum kunt configureren op basis van de gebruiker. Elke gebruiker op een andere geografische locatie krijgt een ander resultaat op basis van hun tijdzone. Deze functies worden gebruikt voor websites met afsprakeninterfaces en boekingssystemen zoals restaurants.

Programmeurs gebruiken vaak JavaScript om de datum- en tijdfuncties aan hun website toe te voegen. Dit is omdat JavaScript al een ingebouwde functie heeft voor deze aspecten. In deze handleiding zullen we het Date-object in meer detail verkennen. We zullen het hebben over de methoden die je kunt gebruiken om de ideale instellingen voor de datum en tijd op je website te configureren. We zullen ook behandelen hoe je de indeling kunt wijzigen en meer.

Wat is het Date-object?

Zoals we net al zeiden, heeft JavaScript een ingebouwde functie voor de datum en tijd. Deze heet het Date-object. Met dit object kun je bijbehorende gegevens voor datum en tijd wijzigen en beheren. Wanneer je een instantie maakt voor de Date, wordt er een nieuw object gemaakt. Dit object komt overeen met de datum- en tijdinstellingen van je computer op dat moment.

Om de werking van dit object beter te begrijpen, nemen we een voorbeeld. We maken eerst een variabele. Vervolgens wijzen we er een bepaalde datum aan toe. Laten we aannemen dat de dag woensdag is en de datum 18 oktober in de tijdzone van Londen (GMT). Bekijk deze configuratie eens:

Onze uitvoer toont een datumreeks. Deze bestaat uit de volgende gegevens:

Dag van de week	Maand	Dag	Jaar	Uur	Minuut	Seconde	Tijdzone
Wed	Oct	18	2017	12	41	34	GMT+0000 (UTC)

JavaScript ontvangt de gegevens via een tijdstempel. Deze tijdstempel is afkomstig van Unix-tijd. Dit is een waarde die het aantal milliseconden weergeeft dat is verstreken sinds 1 januari 1970 om middernacht. Voor de gebruiker verschijnt de datum in een begrijpelijke indeling. Als je deze tijdstempel wilt ophalen, moet je de getTime()-methode als volgt gebruiken:

Hoewel deze waarde er verwarrend uitziet, vertegenwoordigt deze hetzelfde als de datumreeks. Het is simpelweg 18 oktober 2017.

Wat is Epoch-tijd?

Het volgende concept dat we gaan leren is epoch-tijd. Het wordt ook wel nultijd genoemd. Je kunt het beter begrijpen als de gegevensreeks 01 januari, 1970 00:00:00 Universal Time (UTC) en de 0 tijdstempel. Maak een nieuwe variabele om dit te testen. Wijs deze vervolgens toe aan een nieuwe Date-instantie op een 0 tijdstempel:

Epoch-tijd was vroeger de standaard voor programmeurs. Het is ook de methode die JavaScript gebruikt om tijd te meten.

Indelingen voor het maken van datums in JavaScript

Nu we weten hoe we een nieuwe Date-instantie kunnen maken met een reeks en tijdstempel, kunnen we het hebben over de verschillende indelingen. Er zijn vier indelingen die als volgt worden beschreven:

Dit betekent dat het mogelijk is om specifieke datums en tijden te vermelden wanneer dat nodig is. Je kunt ook gewoon een gegevensreeks of tijdstempel gebruiken, zoals we eerder hebben besproken. Om dit te begrijpen, zullen we bekijken hoe we nieuwe Date-objecten op drie verschillende manieren kunnen maken. Ervan uitgaande dat onze datum en tijd 4 juli 1776 om 12:30 uur GMT is:

Zoals je kunt zien, geven alle drie de methoden dezelfde datum als uitvoer. Een verschil is dat als je een tijd gebruikt van vóór de Epoch-tijd, de timestamp een negatief getal zal tonen. Daarnaast zijn de seconden en milliseconden standaard 0 in de datum- en tijd-methode. Als je vergeet een getal in te voeren, wordt dit standaard ook op 0 ingesteld.

Een ander verwarrend aspect is dat juli wordt weergegeven door 6 in plaats van 7. Dit komt omdat de nummering begint bij 0. Houd hier rekening mee wanneer je de instanties aanmaakt.

De get-opdracht gebruiken om de datum op te halen

Nu de datum is ingesteld, laten we eens kijken hoe je toegang krijgt tot de onderdelen ervan. Eén manier is om de get-opdracht te gebruiken. Deze tabel toont alle get-methoden voor het Date object:

In dit voorbeeld wijzen we een nieuwe datum toe aan een nieuwe variabele, 31 juli 1980:

Dit is hoe het eruit zou zien als je alle afzonderlijke datumcomponenten zou ophalen met deze methode:

In sommige situaties heb je misschien maar een bepaald deel van de datum nodig. Je kunt deze methoden gebruiken om dat te doen. Hier is hoe je kunt testen of het 3 oktober is:

Dat is de uitvoer die je zou krijgen als de datum niet 3 oktober was en je hierop zou testen.

De set-opdracht gebruiken om de datum te wijzigen

Vergelijkbaar met de get-opdrachten, heb je de set tegenhangers. Met deze opdracht kun je de datumcomponenten wijzigen. Deze tabel toont alle methoden:

Stel dat we de variabele birthday van 1997 naar 1980:

Nu toont onze uitvoer het nieuwe jaar. Je kunt op vergelijkbare wijze ook andere componenten van de datum wijzigen.

UTC-datummethoden in JavaScript

Als je de datumcomponenten extraheert met de get-methode, ontvang je ze op basis van de lokale systeeminstellingen van de tijdzone van de gebruiker. Als alternatief kun je deze configureren om de tijd te berekenen op basis van de UTC-standaard. UTC staat voor Coordinated Universal Time. Je kunt dit doen met de getUTC-methode. Deze tabel toont alle UTC-methoden voor het Date object in JavaScript:

Zoals je kunt zien, zijn alle methoden vergelijkbaar met de get opdrachten. De uitvoer zal echter anders zijn. Je kunt het verschil testen met deze code:

Deze code toont je het huidige uur en het uur in de UTC-tijdzone. De getallen zijn hetzelfde als je je al in de UTC-tijdzone bevindt. De reden waarom je UTC zou gebruiken, is dat het zorgt voor consistentie over internationale zones en regio's heen.

Conclusie

We hebben de verschillende methoden behandeld voor het Date-object in deze handleiding. Dit omvatte hoe je de datumcomponenten kunt ophalen met get en hoe je ze kunt wijzigen met set. We hebben ook de UTC-tijdzones verkend en hoe je ze in JavaScript gebruikt.

Uiteindelijk heeft JavaScript een heleboel ingebouwde functies voor datum en tijd. Dit maakt het programmeren van complexe websites vrij eenvoudig. Je kunt meer lezen over de datum- en tijdfuncties van JavaScript op het Mozilla Developer Network. Deze handleiding zou je echter moeten helpen om de basisbeginselen onder de knie te krijgen.

Hier zijn meer bronnen van onze blog die het programmeren met JavaScript gemakkelijker maken:

• JavaScript: een handleiding over het indexeren, splitsen en manipuleren van strings
• Werken met JavaScript: hoe prototypen en overervingen werken
• Een gids voor het toevoegen van JavaScript aan HTML
• Een overzicht van het JSON-formaat voor gegevensdeling

Veel programmeerplezier!