# Objecten

Een object binnen een programmeertaal zoals JavaScript, is een stuk vooraf geschreven software, waar je eigenlijk niets van ziet, maar dat aan de basis ligt van veel gebruikte dingen. Eigenlijk komt het er op neer dat je een kopij neemt van een algemeen ding, en door er waarden aan te geven, je het een specifiek ding maakt. Dat klinkt heel moeilijk, maar eigenlijk is het heel eenvoudig. Om dit een beetje te verduidelijken, kan je het volgende als voorbeeld nemen.

Een auto is een object. Bijna alle auto's hebben wielen, plaats voor een bestuurder, een kleur, een motor, ... Dit zijn een aantal algemene kenmerken van een auto. Specifieker wordt het als we werkelijk waarden gaan koppelen aan deze eigenschappen. Vier wielen, een rode kleur, ...

Objecten werden uitgevonden omdat men ze nodig had bij Object Gericht Programmeren. Dat is een programmeer vorm die heden te dagen veel gebruikt wordt. En vermits we later zullen zien dat bijna alles uit objecten is samengesteld, kunnen we er niet omheen.

# Het Object model

Om de voorstelling en het gebruik van objecten te vergemakkelijken, hebben ze steeds dezelfde vorm. Vermits elk object eigenschappen of properties bevat die elk op zich een bepaalde waarde heeft, kunnen we het volgende schrijven:

Object.eigenschap = waarde;

Let op het puntje, dat de eigenschap van het object scheidt. Naar analogie met het voorbeeld van de auto zouden we het volgende kunnen schrijven:

Auto.merk = "Opel";
Auto.kleur = "rood";
Auto.aantalWielen = 3;

Elk object bezit naast zijn eigenschappen ook meestal een aantal methodes. Dit zijn functies die deel uitmaken van het object. Deze methodes bereiken we als volgt:

Object.methode();

Naar analogie met het voorbeeld van de auto zouden we het volgende kunnen schrijven:

Auto.startMotor();
Auto.pinkRechts();

Merk op dat objecten altijd met een hoofdletter worden geschreven. Natuurlijk moeten we eerst de verschillende objecten binnen JavaScript bekijken om ze dan te leren gebruiken.

# Werken met Strings

Zoals we reeds gezien hebben, is een String steeds omgeven door aanhalingstekens, dubbele of enkele, maar niet gemengd.

let myNumber = 200.6;
let phrase = 'Don't mix quotes.'; //--> niet ok!
let phrase = "Don't mix qoutes."; //--> ok
let phrase = "He said; "That's fine", and left."; //--> niet ok!

Die laatste zin lijkt onmogelijk te gebruiken. We kunnen hier echter gebruik maken van 'escape' karakers of backslash (\) voor de aanhalingstekens in de String.

let phrase = 'He said; "That\'s fine", and left.'; //--> ok!

Strings zijn in feite objecten en kunnen ook op die manier benaderd worden. Met andere woorden, ze hebben eigenschappen (properties) en methodes.

Als ik de lengte van een String wil weten, kan ik het volgende doen.

console.log(phrase.length);

Dit zal mij vertellen hoeveel karakters er in de String zitten. Als methodes, functies van een String, vinden we bijvoorbeeld toUpperCase() of toLowerCase() en uit die namen kunnen we al afleiden wat ze zullen doen.

We hebben ook een methode split(). Deze zal een String kunnen opsplitsen op basis van een scheidingsteken (spatie, komma, punt, ...) Het resultaat is een Array. vb:

let phrase = "Dit is een simpele zin.";
let splittedPhrase = phrase.split(" "); // scheiden op spatie
console.log(splittedPhrase);
//--> ["Dit", "is", "een", "simpele", "zin."]

De methode slice() laat ons dan weer toe om een aantal karakters uit een String te nemen wanneer we geen scheidingsteken kunnen gebruiken. slice() heeft twee parameters nodig. De index van het karakter waar we op willen slicen, en de index van het laatste karakters dat we willen hebben. vb:

let phrase = "Dit is een simpele zin.";
let segment = phrase.slice(4, 6);
console.log(segment);
// --> is

Als we Strings gaan vergelijken in condities, dan zijn er zeker een aantal punten waar we rekening mee moeten houden. Wat we zeker moeten onthouden is dat dit altijd hoofdlettergevoelig is. bv:

"Jan" == "jan"; // --> niet waar
"Jan" == "Jan"; // --> waar

Als we willen dat de hoofdlettergevoeligheid onbelangrijk wordt, dan kunnen we beide Strings omzetten via toUpperCase() of toLowerCase(). Maar hoe zit het als we willen weten of ze groter dan of kleiner dan zijn. Wat als we Strings willen gaan sorteren? Wat we moeten weten is dat elke String letter per letter wordt vergeleken. vb:

"Jan" < "Jef"; //--> waar
"Jan" > "Jef"; //--> niet waar

Waar het moeilijker wordt om te begrijpen is het volgende:

"Jan" < "jan"; //--> waar

Dit komt omdat alle Strings worden vergeleken via een tabel waarin de hoofdletters eerst komen (ASCII-tabel). Daarom is een hoofdletter 'J' kleiner dan een kleine letter 'j'.

Als je nieuw bent in programmeren, dan zijn al die regels, eigenschappen en methodes onthouden niet makkelijk. Wat veel belangrijker is, is dat je weet waar je de nodige informatie kan vinden. Een goede referentiegids is dus nodig. https://www.w3schools.com/ is er zo één.

# Werken met Datums

Een ander en handig object is het Date-object. Op de volgende manier maken we een nieuwe datum aan:

let datum = new Date(); // datum en tijd van vandaag

Terwijl je evengoed een aantal variabelen zou kunnen maken, ééntje voor het jaartal, ééntje voor de maand en zo verder, is dit veel handiger om mee te werken. Als je niets tussen de ronde haken zet, zal de variabele datum de waarde van 'nu' bezitten, de huidige datum én tijd. Dus ja, ook de tijd, zelfs tot op de milliseconde. We kunnen ook waarden meegeven tijdens de creatie van het Date-object. vb:

let toen = new Date(2000, 0, 1); // 1 januari 2000
// jaar, maand, dag

Let op: het tweede cijfer, wat de maand voorstelt, is een 0 omdat de maanden vanaf 0 beginnen tellen. December zal dan ook maand 11 zijn. In tegenstelling zijn de jaren en de dagen wel 'echte' getallen. We kunnen nog meer meegeven, tot aan de milliseconde. vb:

let tower1 = new Date(2001, 8, 11, 8, 46, 30, 0);
// 11 september 2001, 8u46:30 (0 milliseconden)

Eens je deze waarde in een Date-object hebt steken, kan je er allerlei dingen mee doen. We hebben een heleboel methodes ter onze beschikking die beginnen met het woord get. Zo kan je het volgende doen:

let vandaag = new Date();
vandaag.getFullYear(); // geeft het jaartal in 4 cijfers
vandaag.getMonth(); // geeft de maand via een getal op basis van 0
vandaag.getDay(); // geeft de weekdag via een getal op basis van 0
vandaag.getDate(); // geeft de dag van de maand via een getal op basis van 0

We kunnen ook deze waarden aanpassen via set...(). Kijk op https://www.w3schools.com/ voor meer info rond het Date-object.

# Werken met Objecten

JavaScript bevat slechts enkele objecten en met de meeste hebben we reeds gewerkt. Objecten onderscheiden zich steeds door het feit dat ze eigenschappen en methodes hebben. Zo gebruikten we reeds een Array, Date en String objecten.

Vanaf dat we onze HTML-pagina's aanspreken, hebben we andere objecten die al onze individuele delen van onze webpagina representeren. We noemen deze groep van objecten heel vaak de DOM of Document Object Model, waar we nog op terugkomen.

We kunnen echter ook onze eigen objecten maken. En eigenlijk is dit heel eenvoudig. Het is een container die eigenschappen en methodes kan bevatten. Als we weten hoe we variabelen en functie moeten maken, kunnen we een object maken.

Stel dat we een aantal gewone variabelen maken:

let playerName = "Jefke";
let playerScore = 203;
let playerRank = 34;

We stellen vast dat deze variabelen in feite bij elkaar horen. Beter is dan ook dat we de gegevens in een object kunnen verzamelen. We zouden dit in een Array kunnen doen, maar dan moeten we rekening houden met hun positie in de Array.

let player = ["Jefke", 203, 34];

We moeten dan weten dat de naam van de speler steeds op positie 0 staat, de score steeds op positie 1 en zo verder. Een object maakt dit veel handiger:

let player1 = new Object();
player1.name = "Jefke";
player1.score = 203;
player1.rank = 34;

Onze gegevens zitten nu opgeslagen in ons object. We kunnen de dot-syntax gebruiken om onze gegevens op te halen. Merk ook op dat we de namen van deze gegevens zelf hebben mogen aanmaken in ons object. Het zijn geen variabelen meer in het object, maar eigenschappen of 'properties'.

We kunnen deze eigenschappen van het object als volgt opvragen:

console.log(player.rank); // 34
console.log(player.name); // "Jefke"

Op die manier moeten we niet langer weten waar onze waarden staan in een Array, maar hoe ze heten in het object, wat veel makkelijker is.

Je kan de aanmaak van het object ook korter schrijven:

let player2 = { name: "Louis", score: 454, rank: 12 };
let player3 = { name: "Fred", score: 4000, rank: 1 };

Merk de accolades op, maar zeker de dubbelpunten die de namen van de eigenschappen scheidt van de waarden die ze bevatten.

Op deze manier hebben we nu al van 3 spelers informatie in de 3 objecten die we hebben aangemaakt.

Buiten waarden kan een object ook functies bevatten. Vermits ze in een object zitten, noemen we ze 'methodes'. Op deze manier kunnen we het object iets laten doen.

Stel dat we in deze objecten een functie willen inbouwen die de player details kan tonen. We zouden natuurlijk een onafhankelijke functie kunnen schrijven die dit oplost. Beter is dat het object deze functie zelf bevat zodat we bv het volgende kunnen doen:

player1.logDetails();
player2.logDetails();
player3.logDetails();

We moeten natuurlijk wel deze functie definiëren en aan het object koppelen.

player1.logDetails = showDetails;
player2.logDetails = showDetails;
player3.logDetails = showDetails;

Wat we hier doen is tegen elk object zeggen dat als we de methode 'logDetails()' oproepen, het object op zich de functie 'showDetails()' zal oproepen. We leggen hier bij wijze van spreken een link in het object naar een functie.

Deze functie moeten we nog maken:

function showDetails() {
	console.log(this.name);
	console.log(this.score);
	console.log(this.rank);
}

In de functie valt ons het woord this op. Waar komt dit vandaan? Normaal gezien zouden we in de functie de objecten moeten aanspreken. Maar omdat we niet op voorhand kunnen weten welk object we zullen opvragen, moeten we een andere oplossing vinden. JavaScript weet wie de functie heeft opgeroepen, namelijk het object. En dat is op dat moment this, dit object. Op die manier wordt de functie meerdere keren inzetbaar voor meerdere objecten die dezelfde inhoud hebben. En als we de functie showDetails() verder uitwerken, dan is dat ineens voor alle objecten die ze kan oproepen! En dat maakt het nu juist zo handig!

Volledige code:

// aanmaak objecten
let player1 = new Object();
player1.name = "Jefke";
player1.score = 203;
player1.rank = 34;
let player2 = { name: "Louis", score: 454, rank: 12 };
let player3 = { name: "Fred", score: 4000, rank: 1 };

// function calls
player1.logDetails();
player2.logDetails();
player3.logDetails();

// objectenmethode linken aan de functie
player1.logDetails = showDetails;
player2.logDetails = showDetails;
player3.logDetails = showDetails;

// functie die uitgevoerd wordt
function showDetails() {
	console.log(this.name);
	console.log(this.score);
	console.log(this.rank);
}