Object-Oriented Programmeren (OOP) met Javascript.
Ik las het topic "JavaScript / AJAX Tutorials" en ik zag dat er nog geen tutorial was over Object-Oriented Programmeren (OOP) in javascript vandaar deze
.
Nog 1 ding ik ga er al vanuit dat je (x)html en "gewoon" javascript kan daarom noem ik ook niet de complete html erbij en bovendien is het te veel werk
. Deze tutorial schrijven ook maar dat is maar een bijzaak
.
Dus daar gaan we
Wat is nu eigenlijk een object?
Een object in een OOP programmeertaal zoals javascript kun je het beste voorstellen als een dagelijks gebruiksvoorwerp of ding. Dit gebruiksvoorwerp of ding heeft bepaalde eigenschappen en acties.
We gaan een auto als Object gebruiken dus we gaan eerste denken welke eigenschappen en acties een auto heeft.
eigenschappen zijn bijvoorbeeld:
- kenteken
- merk
- kleur
- brandstof
acties zijn bijvoorbeeld
De eigenschappen en acties van een object kunnen we straks zo gebruiken in javascript
Auto.kenteken; als voorbeeld voor een eigenschap
Auto.starten(); als voorbeeld voor een actie
Maar dat moet je bekend voorkomen, aangezien document ook een javascript object is met verschillende methodes, als voorbeeld noem ik dan maar de meest bekende object actie document.write('string');
Waarom nu eigen objecten?
Je eigen object kun je vaker gebruiken op de pagina zonder de code te hoeven aanpassen.
belangrijke voordelen:
- meer structuur in je code waardoor het duidelijker word
- Makkelijker aan te passe
belangrijkste nadeel
- je moet het leren
Hoe maken we nu Objecten?
In feite schijf je een stuk code wat niets doet. Je schijft min of meer een bouwtekening wat je object voor eigenschappen en acties heeft. Als begin voorbeeld een Auto object met de bovengenoemde eigenschappen
Code:
function Auto(kenteken, merk, kleur, brandstof){
this.kenteken = kenteken;
this.merk = merk;
this.kleur = kleur;
this.brandstof = brandstof;
}
Deze functie wat ik geschrijven heb is de constructor van het object Auto samen met de eigenschappen van een auto.
De eigenschappen worden in de constructor als parameters doorgegeven. misschien komen de instructies tussen de accolades ( { } ) wat vreemd over dus dat ik ga het uitleggen this is een javascript sleutel woord en wijst naar het huidig object dus Auto.
Met de instructie this.kenteken = kenteken; zeg ik eigenlijk: "ken de waarde van uit kenteken toe aan de waarde van this.kenteken."
Met andere woorden de waarde die je invoert in de constructor bij kenteken wordt op deze manier opgegeslagen in het Auto object. Het daadwerkelijk maken van Objecten doen we zo let vooral op new
Code:
auto1 = new Auto('AA-11-11', 'opel', 'zwart', 'gas');
auto2 = new Auto('AA-11-12', 'fiat', 'blauw', 'benzine');
Nu zijn auto1 en auto2 object variabelen, wil je nu bijvoorbeeld het
kenteken zien van auto1 dan gebruik je
Code:
alert(auto1.kenteken);
ik maak nu een voorbeeld met een actie van een auto.
We nemen de zelfde code en voegen wat toe zie onderstaande code
Code:
function Auto(kenteken, merk, kleur, brandstof){
this.kenteken = kenteken;
this.merk = merk;
this.kleur = kleur;
this.brandstof = brandstof;
this.start = function(){
alert('wroem wroem');
}
}
Met de instructie this.start = function(){} zeg ik eigenlijk: "maak een function voor het huidig object met de naam start"
Het oproepen van de functie gaat zo we gaan er even van uit dat we nog steeds de twee auto objecten genaamd auto1 en auto2 hebben
Zoeken
Ledenlijst
Kalender
Help
