Objecten

Als laatste gaan we nog een zeer belangrijk onderdeel van JavaScript behandelen, namelijk objecten. Bijna alles binnen JavaScript, en ook binnen jQuery, is gebaseerd op objecten. JavaScript is immers een OOP (Object-Oriented Programming) taal.

Het is de bedoeling dat u wat meer inzicht krijgt in het begrip object en de bijbehorende termen zoals properties, methods, constructor, enz... zodat u later de jQuery documentatie beter zal begrijpen.

Wat is een object?

Een object is een voorwerp met eigenschappen en functies. Neem bijvoorbeeld het object auto. Een auto heeft als eigenschappen het vermogen, de kleur, ... en als functies rijden, parkeren ....

• Eigenschappen van een object noemt men properties.

• Functies van een object noemt men methodes (methods).

Een object aanmaken

U kan objecten op verschillende manieren definiëren.

• Via een object literal: door dadelijk waardes aan het object toe te kennen.

  {eigenschap1: waarde1, eigenschap2: waarde2, ...}

• Via een object() constructor:

  var obj = new Object();

• Via een constructor functie:

  var obj = function(){...};

De twee laatste constructors genereren als het ware een sjabloon waarop we onze eigenlijke objecten kunnen baseren. Objecten afleiden van een sjabloon noemt men prototyping. Dit wil zeggen dat alle publieke variabelen binnen het sjabloon kunnen uitgelezen en aangepast worden en dat u alle interne functies kan uitvoeren.

Als voorbeeld gaan we een eenvoudige constructor functie bekijken.

Eerst definieert u het basissjabloon van bijvoorbeeld een auto. Daarna kan u een specifieke auto koppelen aan het type Auto en kan u vervolgens waardes toekennen en de interne functies (de methodes) uitvoeren.

// constructor functie (sjabloon) voor het auto object 
var Auto = function(kleur,vermogen){
    this.kleur = kleur; 
    this.vermogen = vermogen; 
    this.rijden = function(){
        // rij acties
    };
    this.parkeren = function(){
        // parkeer acties
    }
}

// Het object ford
var ford = new Auto('grijs',190); 
ford.rijden()       // laat de auto rijden
ford.parkeren()     // laat de auto parkeren
ford.kleur          // wat is de kleur? 
ford.vermogen       // wat is het vermogen?

Binnen een constructor functie verwijst het kernwoord this naar het object dat erop gebaseerd wordt. Dus voor de ford wagen staat this.kleur voor ford.kleur. U kan vervolgens een object koppelen aan deze functie door het kernwoord new voor de functievariabele te plaatsen.

Indien we het datatype van Auto en ford opvragen, dan geeft dit respectievelijk function en object. De functie op zich is dus nog geen object!

Variabelen gekoppeld aan constructor functies beginnen steeds met een hoofdletter. Dit is in principe niet verplicht, maar zo merkt u snel het verschil tussen een gewone variabele en een constructor. Ook de ingebouwde JavaScriptobjecten gebruiken deze notatie. Dadelijk gaan we enkele ingebouwde objecten bespreken, maar hier alvast een voorbeeld om een nieuw Datum object aan te maken.:

var vandaag = new Date();

Een constructor functie

Laat ons de theorie omzetten in een praktisch voorbeeld.

Open jsIntro/constructorFunctie.html.

In dit voorbeeld gaan we een banner object ontwerpen. Onze banner heeft twee eigenschappen (twee properties), namelijk een achtergrondkleur kleur en een tag tag . Verder heeft de banner één actie (één methode), teken de banner tekenBanner().

We starten dus met een constructor functie die als basis (als sjabloon) dient voor onze objecten.

// constructor functie (sjabloon) voor het banner object 
var Banner = function(tag, kleur){
    this.tag = tag;
    this.bgKleur = kleur;
    this.tekenBanner = function(){
        $(this.tag).css('background-color', this.bgKleur);
    }
};

De methode tekenBanner() wordt ook hier weer met een jQuery statement uitgevoerd.

• $(this.tag): selecteer de opgegeven selector.

• .css('background-color', this.bgKleur): en pas de CSS-eigenschap

  background-color aan met de opgegeven kleur.

Vervolgens gaan we drie objecten aanmaken, gebaseerd op deze functie.

// banner 1
var banner1 = new Banner('h1', 'lightGreen'); 
banner1.tekenBanner();

// banner 2
var banner2 = new Banner('p strong', 'yellow'); 
banner2.tekenBanner();

// banner 3
var banner3 = new Banner(); 
banner3.tag = 'h2'; 
banner3.bgKleur = 'orange'; 
banner3.tekenBanner();

Merk op dat we een object op twee manieren kunnen aanmaken.

In banner1 en banner2 worden de eigenschappen rechtstreeks als parameters naar de functie gestuurd. In banner3 krijgt de functie geen parameters, maar worden de waarden aan de properties rechtstreeks toegekend.

Als we dadelijk enkele ingebouwde JavaScriptobjecten bekijken, zal u merken dat we hoofdzakelijk de tweede manier gebruiken.

Ziehier het resultaat:

Constructor zonder variabelen

Een constructor functie met default eigenschappen

De constructor functie die we net hebben aangemaakt heeft geen default waardes voor de verschillende eigenschappen. Dus telkens u een object aanmaakt, moet u ALLE eigenschappen doorgeven aan de functie. Vergeet u één eigenschap, dan zal de methode tekenBanner() niet over voldoende informatie beschikken en kan dus niet worden uitgevoerd. Een tweede probleem stelt zich bij het rechtstreeks doorgeven van de parameters naar de functie. De volgorde ligt namelijk vast. Eerst komt de parameter tag en daarna de parameter kleur.

U merkt al dat deze manier van werken niet echt handig is als het object bijvoorbeeld 10 eigenschappen bevat. Bijvoorbeeld:

var obj1 = new Obj(waarde1,waarde2,waarde3 ...,waarde10);

Daarom gaan we onze functie nu op een andere manier opstellen. De functie krijgt default waardes waardoor we niet alle parameters hoeven door te sturen en, belangrijker nog, we gaan de parameters niet meer apart (in de juiste volgorde) doorsturen. Hoe lossen we dit op?

We sturen maar één parameter door, maar wel volgens een speciale constructie. Namelijk in de vorm van een object. (Een object literal om precies te zijn.). U hoeft dan nog enkel de parameters door te sturen waarvan we de default waarde wensen te overschrijven. Zelfs de volgorde is niet meer belangrijk. Stel dat we voor parameters 1, 3 en 5 default waarde wensen te overschrijven, dan wordt dit:

var obj1 = new Obj({par1:waarde1, par3:waarde3, par5:waarde5});

Let vooral op de syntax van een object literal. Het object is omsloten door accolades. De parameters en waardes worden van elkaar gescheiden door een dubbelepunt.

De parameter/waardeparen worden gescheiden door een komma.

In dit voorbeeld gaan we onze banner van daarnet van default waardes voorzien en gaan we nog wat meer CSS-eigenschappen wijzigen.

★ Open jsIntro/constructorFunctieDefault.html.

Deze functie gebruikt zeven parameters. De parameter tag selecteert het element en de zes overige parameters wijzigen de CSS-eigenschappen (achtergrondkleur, tekstkleur, font, ...) van tag. De zeven eigenschappen krijgen nu een default waarde (sommige gewoon een lege string). De methode tekenBanner() verwerkt de eigenschappen opnieuw in de css() methode van jQuery.

De methode css() wordt later nog wel verder verduidelijkt, maar voorlopig volstaat deze syntax.

Eén CSS-eigenschap wijzigen:

$(selector).css(parameter, waarde);

Meerdere CSS-eigenschappen gelijktijdig wijzigen:

$(selector).css({parameter1: waarde1, parameter2: waarde2, ...});

Ook binnen jQuery gebruiken we vaak object literals om waardes door te geven!

Merk op dat er geen vaste parameters via function() worden doorgegeven en dat deze dus ook niet meer aan this.xxx worden gekoppeld.

// constructor functie voor het banner object 
var Banner =  function(){
    this.tag = 'h2'; 
    this.bgKleur = 'lightGreen'; 
    this.kleur = 'red'; 
    this.font = ''; 
    this.fontSize = ''; 
    this.align = '';
    this.border = ''; 
    this.tekenBanner = function(){
        $(this.tag).css({ 
            'background-color': this.bgKleur,
            'color': this.kleur,
            'font-family': this.font,
            'font-size': this.fontSize,
            'text-align': this.align,
            'border': this.border
        });
    };
    // Deze for-lus hoeft u voorlopig nog niet te begrijpen.
    for(var i in arguments[0]) { 
        this[i] = arguments[0][i];
    }
};

Verder op de pagina worden de drie objecten aangemaakt.

// banner 1
var banner1 = new Banner(); 
banner1.tekenBanner();

// banner 2
var banner2 = new Banner({tag:'p strong', bgKleur: 'yellow'}); 
banner2.tekenBanner();

// banner 3
var banner3 = new Banner(); 
banner3.tag = 'h1'; 
banner3.bgKleur = 'orange'; 
banner3.align = 'center'; 
banner3.border = 'solid 3px blue'; 
banner3.tekenBanner();

De eerste banner banner1, wordt afgeleid van de bannerfunctie en behoudt al zijn default waardes. Resultaat: maak binnen de h2-tag de tekst rood en de achtergrondkleur lichtgroen.

Voor de tweede banner wordt een object doorgestuurd, maar hoe lezen we deze waardes uit? Elke JavaScript functie heeft automatisch het object arguments in zich. De for-in lus op het einde van de functie doorloopt alle parameter/waardeparen die we doorgeven en koppelt de verschillende waardes aan de juiste eigenschap.

Voor de eigenschappen die we via banner2 doorsturen is dit het resultaat:

• this.tag = 'p strong'

• this.bgKleur = 'yellow'

• alle overige eigenschappen behouden hun default waardes.

Voor de derde banner geven we alle eigenschappen apart door. Ook deze manier van werken blijft dus geldig.

Ziehier het resultaat:

Constructor met variabelen