top2. Properties van een object
De properties, waar ik het daarnet over had, kunnen worden aangeroepen op een heel simpele manier.
naam_van_het_object.naam_van_de_property
Maar voor dat je ze kan aanroepen moet je ze eerst 'aan maken'.
Hier zijn 2 manieren voor:
1) een object-initializer gebruiken.
2) een constructor maken.
top3. Object aanmaken: object-initializer
Als je maar 1 object van 1 soort wil maken is de object-initializer erg handig, voor meerdere objecten is het handig om de constructor-methode te gebruiken.
De objet-initializer werkt als volgt:
naam_van_het_object = {property1 : waarde1, property2 : waarde2, ...}
// je kan ook een object binnen een object aanmaken:
object1 = {property1 : waarde1, object2 : {property2.1 : waarde2.1, property2.2 : waarde2.2,...},...}
Dit ziet er allemaal ingewikkeld uit, maar ik ga even een klein voorbeeldje geven waardoor dit allemaal wat duidelijker word.
// je kan heel gemakelijk nieuwe property's toevoegen:
nemesiskoen.heeft_computer = true;
nemesiskoen.computer = {geheugen : '...', videokaart : '...', ...};
// enz
Nu zie je waarschijnlijk hoe handig objecten kunnen zijn.
Toch, als je bv. voor elk personage een nieuw object moet gaan aanmaken en telkens zeggen welke property's er zijn en dan pas de waarde in stellen, dan ga je veel tijd verliezen.
Hier is een handige oplossing voor, namelijk via de constructor methode. top4. Object aanmaken: constructor
Je maakt een functie aan, die als constructor dient en hierin initializeer je alle property's.
Stel we willen murfy een nieuwe property geven, namelijk de 'heeft_computer' property.
Dan kunnen we simpel de syntax gebruiken die we hierboven ook hebben gebruikt.
if(murfy.heeftComputer)
alert(murfy.naam + ' heef een computer');
else
alert(murfy.naam + ' heeft geen computer');
Nu is er nog een leuk mogelijkheid bij objecten, en dit is namelijk objecten binnen objecten.
Hetgeen ik daarnet al heb aangetoond met de 'computer' binnen het object 'nemesiskoen'.
Dit gaat ook via een constructor.
z3 = new auto('BMW', 1998);
murfy = new mens('maarten', 16, z3);
alert(murfy.auto.merk);
Ik hoop dat je nu begint te zien hoe fijn het werken met objecten binnen javascript is.
Nu kunnen we alles nog een stapje verder zetten en methodes (functies) aan het object gaan toevoegen.
function getNaam() {
alert(this.naam);
}
function getLeeftijd(leeftijd) {
alert(this.leeftijd);
}
function mens(naam, leeftijd) {
this.naam = naam;
this.leeftijd = leeftijd;
this.getNaam = getNaam;
this.getLeeftijd = getLeeftijd;
}
fangorn = new mens('thomas', 26);
fangorn.getLeeftijd();
top5. HTML objecten aanmaken
Zoals je misschien wel weet kent HTML ook objecten.
Deze hebben ook properties, attributen genaamd.
Een voorbeeld.
<input type="text" name="foo" value="bar" />
Hier zie je het object input met de properties 'type', 'name' en 'value'.
In het echt heeft input er nog meer (id, class, ...) maar we zullen ons beperken tot deze 3.
Nu kan je het maken van deze 'velden' automatiseren via javascript.
Namelijk door zelf een object input aan te maken en deze waardes in te stellen.
We beginnen met de constructor.
Hiermee kunnen we de volgende objecten mee aanmaken.
pass = new input('password', 'pass', '***');
naam = new input('text', 'naam', '');
Nu hebben we een input van het type 'password' en van het type 'text'.
Maar eigenlijk hebben we hier niets aan, omdat er niets op het scherm komt.
Dat kunnen we oplossen door een functie hier aan vast te maken.
Namelijk 'printinput()'.
function printinput() {
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}
En om af te sluiten moeten we dit koppelen aan het object, en de functie aanroepen.
function printinput() {
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}
Nu zouden we kunnen automatiseren door het printen automatisch te laten verlopen.
We laten printen binnen de constructor.
function input(type, name, value) {
this.type = type;
this.name = name;
this.value = value;
document.write('<input type="'+ this.type +'" name = "'+ this.name +'" value = "'+ this.value +'">');
}
pass = new input('password', 'pass', '***');
naam = new input('text', 'naam', '');
En zo kan je nog op honderden andere manieren automatiseren. top6. Prototypes
Buiten het aanmaken en manipuleren van objecten is het ook mogelijk deze te extenden.
Dit betekend dat je de constructor van het object alle eigenschappen van de constructor van een ander object laat 'overerven' zodat het deze ook heeft.
Zo kun je onderscheid maken tussen verschillende 'groepen' binnen 1 object.
Bv. voertuig.
Dit kan opgesplitst worden in vliegtuigen, rijtuigen en vaartuigen.
Deze kunnen op hun beert weer opgesplitst worden, en zo kan je blijven doorgaan.
Hierdoor maak je een soort van hiėrarchie.
In javascript word een object waaruit een ander object word afgeleid een 'prototype' genoemd.
Een soort van 1e versie die nog kan 'verbeterd' en 'uitgebreid' worden.
Om te beginnen ga ik eerst laten zien hoe je zo'n prototype aanmaakt en een ander object hieruit afleid.
function voertuig() {
this.beweegt = false; // het staat stil
this.soort = "geen soort"; // kan nog worden ingevuld
}
function rijtuig() {
this.heeft_wielen = true;
}
rijtuig.prototype = new voertuig;
auto = new rijtuig;
if(auto.beweegt)
alert('Vroem!');
else
alert('auto staat stil');
// we gaan de auto laten bewegen
auto.beweegt = true;
if(auto.beweegt)
alert('Vroem!');
else
alert('auto staat stil');
Nu kan je een klein trukje uithalen met auto, namelijk deze meegeven als argument met een functie speciaal hiervoor ontworpen.
Dit toon ik in onderstaand voorbeeld.
Nu is dit maar een kleinigheidje vergeleken met wat je allemaal kan doen met 'extenden'.
Onderstaand voorbeeld laat zien hoe je een 'property' kunt toevoegen aan een 'prototype' van een bepaalde 'constructor'.
Bovenstaande zin klinkt misschien moeilijk, maar dit wil hetzelfde zeggen als: we geven het object rijtuig een nieuwe property via auto.
rijtuig.prototype.heeft_wielen = false; // standaard waarde is false
auto.heeft_wielen = true; // een auto heeft wielen;)
boot = new voertuig;
boot.soort = "boot";
if(boot.heeft_wielen)
alert('Vroem met de boot?');
else
alert('Boot heeft geen wielen');
Een andere handigheid is dat je 'flexibele' constructors kan maken.
Zodat je kan kiezen of je een argument meegeeft of niet.
Je kan dus kiezen of je een naam geeft aan het voertuig of niet.
function voertuig(naam, beweegt) {
this.naam = naam || "geen naam";
this.beweegt = beweegt || false;
}
boot1 = new voertuig('Speedboot');
boot2 = new voertuig;
boot2.beweegt = true;
/*
boot1 ziet er zo uit:
boot1.naam == 'Speedboot'
boot1.beweegt == false
boot2 ziet er zo uit:
boot2.naam == 'geen naam';
boot2.beweegt == true
*/
En het in beweging zetten kunnen we natuurlijk ook automatiseren.
function beweeg() {
this.beweegt = true;
}
function stop() {
this.beweegt = false;
}
function printBeweeg() {
if(this.beweegt)
alert('Beweging!');
else
alert('Staat stil!');
}
boot = new voertuig('Speedboot', true);
boot.printBeweeg();
boot.stop();
boot.printBeweeg();
boot.beweeg();
boot.printBeweeg();
Zoals je kan zien heb ik drie methodes aan de constructor gekoppeld: stop, beweeg en printBeweeg.
De eerste laat het voertuig stoppen, de tweede zet het in gang en de derde laat op het scherm weergeven 'wat' er gebeurt (bewegen of stil staan).
Nu kunnen we dit allemaal nog een stapje verderzetten en de 'richting' dat het voertuig beweegt aangeven, de snelheid en nog veel veel meer.
Beide eigenschappen horen bij voertuig, hoewel bij het printen je de methode beter los kan koppelen van elkaar.
De snelheid van de boot is immers in knopen en die van auto in km/h.
Hier een laatste voorbeeld om te laten zien hoe ver je dit kan trekken.
boot.setSnelheid(10);
boot.printBeweeg(); // output: Beweging!
boot.printVaarSnelheid(); // output: De speedboot beweegt met een snelheid van 10 knopen
auto.setSnelheid(100);
auto.printBeweeg('Vroem!'); // output: Vroem!
auto.setSnelheid(0); // motor afzetten;)
auto.printBeweeg('Vroem!'); // output: Staat stil
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
