JS - OBJECTEN
ALGEMEEN

Koppelingen
Voorbeelden bij dit hoofdstuk

Het onderdeel objecten wordt op drie plaatsen behandeld:

  • Onder Object. De inhoud van dit deel staat hierondervermeld
  • Onder Ingebouwd. In dit deel komen de ingebouwde objectenaan de orde.
  • Onder JS-DOM. In dit deel komen de Javascript DOM objecten aan de orde.

 

HOOFDSTUKKEN

Object
Object - Overzicht
Zelfgemaakte Objecten
Events
Inheritance



Object

Terug naar de top

 

JavaScript is een objectgeoriënteerde scripttaal. Objecten zijn elementen waaruit de HTML-pagina is opgebouwd, zoals vensters, tekstknoppen, frames, plaatjes en links. Objecten kunnen deel uitmaken van JavaScript, maar ook elders vandaan komen en door JavaScript gemanipuleerd worden. Al deze objecten hebben eigenschappen (properties; eigenschappen / variabelen / waarden die bij het object horen) die zijn aan te roepen. Zo hebben plaatjes een bepaalde naam of waarde waarnaar kan worden verwezen (denk hierbij aan het attribuut name).
In het volgende voorbeeld wordt de lenght property van een string object gebruikt om het aantal karakters in een string weer te geven

<script type="text/javascript">

var txt="Hallo Wereld!"
document.write(txt.length)

</script>

De output van de bovenstaande code is:

13

Aan objecten kunnen ook methods worden gekoppeld. Bij methodes gaat het om acties / bewerkingen die kunnen worden uitgevoerd op objecten. Zo kunt u het window-object methodes meegeven waarmee een extra venster wordt geopend of gesloten. Ieder object kent binnen JavaScript zijn eigen methodes. In het volgende voorbeeld wordt de toUpperCase() method van het string object gebruikt om een tekst in hoofdletters weer te geven

<script type="text/javascript">

var str="Hallo wereld!"
document.write(str.toUpperCase())

</script>
 

De output van de bovenstaande code is:

HALLO WERELD!

Objecten zijn op twee plaatsen gedefinieerd: Binnen JavaScript en binnen het Document Object Model van HTML (HTML DOM). JavaScript is de meest gebruikte scripttaal om HTML DOM te manipuleren. Om deze reden wordt HTML DOM veelal gelijktijdig met JavaScript behandeld en wordt er nauwelijks tot geen onderscheid gemaakt. Overzicht van objecten:

  • window
    • frames
    • document (alle HTML-tags)
    • history
    • location
  • navigator
  • Screen

JavaScript beschouwt document als vallend onder window. Document, waarbinnen alle HTML-tags vallen, wordt echter gedefinieerd binnen het Document Object Model van HTML (HTML DOM)

 

Alle onderdelen van een webpagina zijn objecten met bepaalde properties (eigenschappen). Veel objecte ondersteunen daarnaast verschillende methods (methoden). Voor verwijzing naar objecten, eigenschappen en methodes gebruikt JavaScript een puntnotatie. Bij objecten die een hiërarchische relatie hebben, waaronder de window-objecten, wordt de vorm ouder.kind.kleinkind (parent.child.grandchild) gebruikt.

De window- (venster-) objecten (niet te verwarren met de ingebouwde en zelfgemaakte objecten van JavaScript) hebben een hiërarchische structuur. Aan de top van die hiërarchie staat het window-object, het is dan ook de ouder van alle andere objecten.
Het window-object heeft een aantal kind-objecten, waarvan de belangrijkste zijn: document, location en history.
Het document-object heeft op zijn beurt weer een aantal kinderen met als belangrijkste: de links, anchors, plaatjes en formulieren. Deze kunnen deels nog verder in elementen onderverdeeld worden.

Een verwijzing naar een eigenschap heeft veelal de vorm object.eigenschap. Voor het aanroepen van een methode wordt veelal object.methode() gebruikt, waarbij tussen de haakjes een waarde doorgegeven kan worden.

Object - Overzicht

Terug naar de top

 

Standaard kan gebruik gemaakt worden van een groot aantal objecten met bijbehorende properties en methods. Er zijn daarbij drie soorten objecten te onderkennen:
1. Ingebouwde objecten
2. Document Object Model / Objecten van browsers (gastobjecten)
3. Zelfgemaakte objecten

Ingebouwde objecten
JavaScript kent vijf ingebouwde objecten:

  1. String object.
    Het string-object wordt gebruikt om een opgeslagen stuk tekst te manipuleren.
  2. Date object
    Dit object wordt gebruikt om te werken met datum en tijd.
  3. Array object
    Een array is een hoeveelheid waarden di in één variabele naam is opgeslagen.
  4. Boolean object
    Deze werkt met de booleaanse waarden true en false
  5. Math object
    Met het math object kunnen rekenkundige taken worden uitgevoerd. Het bevat diverse rekenkundige constanten en functies.

op deze objecten kunnen ook top level properties en functions worden toegepast. Het gaat hier om properties en functions die op alle ingebouwde objecten toepasbaar zijn. Voorbeelden zijn NaN en eval().
Ingebouwde objecten komen in een volgend hoofdstuk aan de orde.

 

Document Object Model / Objecten van browsers
Met JavaScript kan men ook toegang krijgen tot andere objecten; objecten die gedefinieerd zijn in de (browser) omgeving waarin JavaScript werkt. Hieronder vallen de DOM objecten (bijvoorbeeld window en document). Deze behoren deels tot Javascript en deels tot HTML maar kunnen allen gemanipuleerd worden met JavaScript. W3C en ECMA definiërent daarbij beide een standaard set objecten voor DOM en een standaardwijze waarop deze benaderd en gemanipuleerd kunnen worden.

De navolgende objecten zijn Javascript-DOM Objecten:

ObjectBeschrijvingWindowHet top level object in de JavaScript hierarchie. Het Window object vertegenwoordigt een browser venster. Een Window object wordt automatisch gecreeërd elke keer wanneer een <body> of <frameset> tag wordt gebruikt.
Direct onder window vindt men onder andere document en framesNavigatorBevat informatie over de browser van de gebruikerScreenBevat informatie over het beeldscherm van de gebruikerHistoryBevat de bezochte URLs in het browser vensterLocationBevat informatie over de huidige URL

In een volgend hoofdstuk wordt nader ingegaan op deze JS-DOM objecten.

De navolgende objecten zijn HTML-DOM Objecten:

ObjectBeschrijving
Document Vertegenwoordigt het gehele HTML document en kan worden gebruikt om toegang te krijgen tot alle elementen van een pagina. Gedefinieerd in DOM. Maakt in JavaScript deel uit van het window-object
Anchor Vertegenwoordigt een <a> element
Area Vertegenwoordigt een <area> element binnen een image-map
Base Vertegenwoordigt een <base> element
Body Vertegenwoordigt het <body> element
Button Vertegenwoordigt een <button> element
Event Vertegenwoordigt de staat van een event
Form Vertegenwoordigt een <form> element
Frame Vertegenwoordigt een <frame> element
Frameset Vertegenwoordigt een <frameset> element
Iframe Vertegenwoordigt een <iframe> element
Image Vertegenwoordigt een <img> element
Input button Vertegenwoordigt een button in een HTML formulier
Input checkbox Vertegenwoordigt een checkbox in een HTML formulier
Input file Vertegenwoordigt een fileupload in een HTML formulier
Input hidden Vertegenwoordigt een hidden field in een HTML formulier
Input password Vertegenwoordigt een password field in een HTML formulier
Input radio Vertegenwoordigt een radio button in een HTML formulier
Input reset Vertegenwoordigt een reset button in een HTML formulier
Input submit Vertegenwoordigt een submit button in een HTML formulier
Input text Vertegenwoordigt een text-input field in een HTML formulier
Link Vertegenwoordigt een <link> element
Meta Vertegenwoordigt een <meta> element
Option Vertegenwoordigt een <option> element
Select Vertegenwoordigt een selection list in een HTML formulier
Style Vertegenwoordigt een individueel style statement
Table Vertegenwoordigt een <table> element
TableData Vertegenwoordigt een <td> element
TableRow Vertegenwoordigt een <tr> element
Textarea Vertegenwoordigt een <textarea> element

Op deze objecten wordt hier niet verder ingegaan. Deze worden, met de wijze waarop JavaScript daarmee omgaat verder behandeld in HTML-DOM.

Zelfgemaakte objecten
Een object is in feite een bijzonder gegeven met daaraan gekoppeld een verzameling properties en methods. JavaScript maakt het mogelijk om eigen objecten te maken. In het volgende hoofdstuk wordt hier uitgebreid op ingegaan.

Zelfgemaakte objecten

Terug naar de top

 

Eerder hebben we gezien, dat JavaScript over ingebouwde objecten beschikt als Array, Boolean, Date, Function, Math, Number, Object, RegExp en String.Daarnaast zijn er "gastobjecten" die niet gedefinieert zijn door JavaScript, maar door de omgeving waarin ze werken. Bijvoorbeeld: In een browser behoren typische gastobjecten tot de DOM Window, form, links, etc.). In aanvulling op ingebouwde en gastobjecten is het ook mogelijk eigen objecten te creeëren.
Een object is een bijzondere vorm van data met een verzameling eigenschappen en methodes. Bijvoorbeeld:
Een persoon is een object. Eigenschappen (properties) zijn de waarden die verbonden zijn aan de persoon. De eigenschappen van de persoon omvatten bijvoorbeeld naam, lengte, gewicht, leeftijd. Alle personen hebben die, maar de waarden behorende bij de eigenschappen verschillen. Objecten hebben ook methodes. Methodes zijn de acties die uitgevoerd kunnen worden door het object. Voorbeelden van methodes van persoon zijn: eten(), slapen(), werken().

Eigenschappen / Properties
De schrijfwijze om toegang te krijgen tot een property is als volgt:

objName.propName

Je kunt op eenvoudige wijze properties aan een object toevoegen door het geven van een waarde. Stel dat persoonObj al bestaat, dan kun je het op de volgende wijze properties geven als voornaam, achternaam, leeftijd en kleurogen:

persoonObj.voornaam="Piet"
persoonObj.achternaam="Pietersen"
persoonObj.leeftijd=88
persoonObj.kleurogen="blauw"
document.write(persoonObj.voornaam

De code hierboven levert het volgende resultaat op:

Piet

Methods
Een object kan ook methodes bevatten. Methodes kunnen met de volgende schrijfwijze aangeroepen worden:

objName.methodName()

NB. Parameters benodigd voor de methode kunnen tussen haakjes geplaatst worden.

Oproepen van de methode slapen() voor persoonObj

personObj.sleep()

Creeëren van je eigen Objects
Er zijn verschillende methodes om een nieuw object te creeëren:reeëren

1. Direct creeëren van een ingevuld Object (direct instance / declaration)

De navolgende code maakt direct een nieuw object en voegt daar vier eigenschappen aan toe:

persoonObj=new Object()
persoonObj.voornaam="Piet"
persoonObj.achternaam="Pietersen"
persoonObj.leeftijd=88
persoonObj.kleurogen="blauw"

Een method toevoegen is ook eenvoudig. De volgend code voegt de method eten toe aan persoonObj:

persoonObj.eat=eat

2. Maken van een opzet van een object (objectklasse) (template / initialiser)

De opzet definieert de structuur van een object door middel van een functie:

function persoon(voornaam,achternaam,leeftijd,kleurogen)
{
this.voornaam=voornaam
this.achternaam=achternaam
this.leeftijd=leeftijd
this.kleurogen=kleurogen
}

Merk op dat de template alleen maar een functie is. Binnen de functie moet je allerhande zaken toevoegen aan this.propertyName. De reden voor al deze "this" zaken is, dat er telkens meer dan één persoon aanwezig is (en de poersoon waar je mee omgaat moet duidelijk zijn). Dat is wat "this" is; de template van het object waar je mee bezig bent. Als je het template eenmaal hebt, kun je het object steeds opnieuw vullen. Dat gaat als volgt:

mijnVader=new persoon
("Piet","Pietersen",88,"blauw")
mijnMoeder=new persoon("Carla","Claassen",77,"groen")

Je kunt ook methoden toevoegen aan het persoon object. Dit gebeurt ook binnen de template:

function persoon(voornaam,achternaam,leeftijd,kleurogen)
{
this.voornaam=voornaam
this.achternaam=achternaam
this.leeftijd=leeftijd
this.kleurogen=kleurogen
this.nieuwewachternaam=nieuweachternaam
}

er zijn dus nu alleen functies toegewezen aan het object. Vervolgens moeten een we nieuwewachternaam() function schrijven:

function nieuweachternaam(nieuwe_achternaam)
{
this.achternaam=nieuwe_achternaam
}

De nieuweachternaam() function beschrijft de nieuwe achternaam van de persoon en voegt dat aan de persoon toe. JavaScript weet over welke persoon je het hebt als je "this." gebruikt. Je kunt dus nu schrijven:

mijnMoeder nieuweachternaam ("Pietersen")

3. Gebruik maken van bouwer (constructor)

Constructor functies bieden een mogelijkheid om meerdere copieën (instances) van hetzelfde object te maken. Properties en methods kunnen toegevoegd worden door de constructor of ze kunnen achteraf worden toegevoegd. Om dit te doen voor alle instances, gecree&eunl;rd met een enkelvoudige contructor functie wordt de prototype property van de contructor gebruikt, om daarmee toegang te krijgen tot het prototype object. Verwijderen van een object is niet nodig omdat JavaScript alle variabelen verwijdert waar niet naar verwezen wordt.

Voorbeeld: Manipuleren van een object.

// constructor functie
function MyObject(attributeA, attributeB) {
this.attributeA = attributeA;
this.attributeB = attributeB;
}

// maak een Object
obj = new MyObject('red', 1000);

// neem toegang tot een attribute of object
alert(obj.attributeA);

// neem toegang tot een attribute met gebruik making
// van vierkante haken
alert(obj["attributeA"]);

// voeg een nieuwe property toe
obj.attributeC = new Date();

// verwijder een property of object
delete obj.attributeB;

// verwijder het hele Object
delete obj;

4. Werken met een zelfgemaakt object.

Uitgangspunt in het voorbeeld van het werrken met zelfgemaakte objecten zijn de navolgende functie en objecten:

function persoon(voornaam,achternaam,leeftijd,kleurogen)
{
this.voornaam=voornaam
this.achternaam=achternaam
this.leeftijd=leeftijd
this.kleurogen=kleurogen
}

mijnVader=new persoon
("Piet","Pietersen",88,"blauw")
mijnMoeder=new persoon("Carla","Claassen",77,"groen")

Om alle eigenschappen van de desbetreffende instances in één keer te kunnen weergeven, kan de voilgende functie zinvol zijn:

function weergave() {
with (document) {
write('Voornaam van de persoon: ' + this.voornaam + '<BR>')
write('Achternaam van de persoon: ' + this.achternaam + '<BR>')
write('Leeftijd: ' + this.leeftijd + '<BR>')
write('Kleur ogen: ' + this.kleurogen + '<BR>')
}
}

Met deze functie hebben we een nieuwe methode gemaakt bij het object persoon. Om de methode ater ook te kunnen oproepen, wordt deze ook in het object ingesloten:

function persoon(voornaam,achternaam,leeftijd,kleurogen)
{
this.voornaam=voornaam
this.achternaam=achternaam
this.leeftijd=leeftijd
this.kleurogen=kleurogen
this.weergave=weergave
}

Wil je alle eigenschappen van mijnVader weergeven, dan volstaat de volgende instructie:

mijnVader.weergave()

5. 'This" en 'New'

Bij het maken van eigen objecten zijn de woorden this en new gebruikt. Deze woorden zijn een vast omnderrdeel van de syntaxis voor het maken van objecten.
Met het woord new wordt een nieuwe objectklasse gemaakt.
Door het woord this wordt altijd naar het huidige object verwezen. Met this wordt dus naar de methoden en eigenschappen van de gemaakte objecten verwezen. Daarnaast kan het in combinatie met event handlers worden gebruikt.

In het navolgende voorbeeld staat een standaardwaarde in het tekstvak (TEST). Het woord thiswordt gebruikt voor het weergeven van deze waarde. Als je als gebruiker de waarde wijzigt, verschijnt er een alertvenster met de nieuwe tekst.

<FORM>
<INPUT TYPE=TEXT VALUE=" TEST " onClick="alert(this.value)">
</FORM>

6. Prototype

De objecteigenschap prototype wordt gebruikt om nieuwe eigenschappen en methodes aan objecten die met het woord new gemaakt zijn, toe te voegen. prototype kan voor elke eigen objectklasse en ingebouwde objecten zoals strings en arrays gebruikt worden.
Stel men wil een tekst met verschillende tekstgroottes weergeven. Dat kan door voor elk tekstdeel een aparte HTML-instructie te schrijven. Het kan echter, dankzij de eigenschap prototype ook met een eigen methode. In het voorbeeld wordt een nieuwe methode voor het object string()gemaakt.

tekst = new String('Dit is een voorbeeldtekst voor '+
' de eigenschap prototype')
String.prototype.grootte = 2

Met deze instructie is voor het object string() de nieuwe eigenschap grootte gemaakt. De hier aangegeven waarde vertegenwoordigt de standaardwaarde voor alle nieuwe string()-objecten. Nu maken we een functie die de overeenkomstige parameter voor de tekengrootte van de HTML-instructie overdraagt.

function Tekstgrootte() {
return "<FONT SIZE='" + this.grootte + "'>" + this
+ "</FONT>"
}

Om deze functie voor string()-objecten beschikbaar te maken, is nog een methode nodig waarin de zojuist gemaakte functie wordt opgeslagen.

String.prototype.fontgrootte = Tekstgrootte

 

De tekst kan nu met de methode document.write() naar wens worden weergegeven en aangepast.

document.write(tekst.fontgrootte())

Deze schrijfwijze geeft een tekst aan met de standaardgrootte 2. Wil men een tekstgrootte 7 hebben, dan wordt dat als volgt gerealiseerd:

tekst.grootte = 7
document.write(tekst.fontgrootte())

De methode fontgrootte()kan voor nog meer string-instructies worden gebruikt.

document.write('Nog een tekst!' .fontgrootte().bold())

NB. Het object string bezit onder andere de methode fontsize(). Bovenstaand voorbeeld is alleen ter illustratie van de mogelijkheden om eigen methodes te definiëren.

Events

Terug naar de top

 

Functionaliteiten van een object kunnen automatisch opgestart worden, maar het is ook mogelijk om dit pas te doen bij een bepaalde actie van de gebruiker. Dan spreekt men over events. Events maken geen deel uit van JavaScript, maar van HTML. In HTML 4.01 werd de mogelijkheid geschapen om HTML-elementen acties te laten triggeren in de HTML-browser. Voorbeelden van het uitvoeren van een JavaScript door het gebruiken van een HTML-event:
De gebruiker klikt op een knop of beweegt met zijn muis over een plaatje.
Het enige wat een event doet is registreren dat er een handeling heeft plaatsgevonden. Daarna wordt (veelal) een JavaScript-functie geactiveerd. De event-handler geeft aan welke actie de gebruiker moet plegen.
Voorbeeld
Een html-pagina bevat een formulier waarop de bezoeker een aantal gegevens moet invullen. Afhankelijk van de invoer kan de bezoeker een foutboodschap krijgen, bijvoorbeeld wanneer een bepaald veld niet is ingevuld. Dit proces kan gekoppeld worden aan een event-handler: Pas wanneer het veld is ingevoerd wordt een bepaalde programmacode uitgevoerd.
Event handlers zijn dus in feite HTML-attributen, die uitgevoerd worden in een HTML-tag. Zij worden normaliter gecombineerd met JavaScript functions. Die functions worden pas uitgevoerd als de gebeurtenis (het event) zich voordoet.

Events zijn, net als gastobjecten niet gedefinieerd door JavaScript, maar als reeds vermeld door HTML 4.01. en behoren daarom tot het DOM (Document Object Model). Op deze events wordt niet verder ingegaan. Deze worden, met de wijze waarop JavaScript daarmee omgaat verder behandeld in DOM - Events. Om een idee te geven welke event handlers er zijn volgt hier een overzicht.

Overzicht van events

onAbort Als het binnenhalen van een afbeelding wordt onderbroken.
onBlur Er wordt met de muis buiten een formulier geklikt. Een geselecteerd onderdeel wordt gedeselecteerd.
onChange Als de inhoud van een formulier wordt gewijzigd.
onClick
onDblClick
Als er op een object wordt (dubbel) geklikt.
Bij het aanklikken van een link:
<A HREF="link" onClick="JSCode"> (de pagina wordt geladen èn de JavaScript code wordt uitgevoerd)
<A HREF="JavaScript:JSCode"> (alleen de JavaScript code wordt uitgevoerd)
onDragDrop Wanneer een onderdeel naar een browservenster wordt gesleept.
onError Wanneer het binnenhalen mislukt.
onFocus Er wordt met de muis binnen een formulier geklikt. Een onderdeel wordt geselecteerd en krijgt een ander uiterlijk.
onKeyDown
onKeyPress
onKeyUp
Event wordt uitgevoerd wanneer op het toetsenbord wordt gedrukt; wanneer via het toetsenbord iets ingevoerd wordt en de toetsen ingedrukt worden gehouden; wanneer een ingedrukte toets weer losgelaten wordt.
onLoad
onUnload
Wanneer een onderdeel compleet is binnengehaald cq compleet is verlaten. Bij het laden van de pagina: <BODY onLoad="JSCode"> Voorbeelden van gebruik van onLoad: Doorverwijzen naar andere site of verwijzen naar andere pagina als op gegeven site of pagina technische problemen zijn ontstaan.
onMouseDown Als de muisknop wordt ingedrukt.
onMouseMove Als de muis over het beeldscherm beweegt.
onMouseOut Als de muis weer van het onderdeel afgaat.
Bij het met de muis weer van de link af gaan:
<A HREF="link" onMouseOut="JSCode">
onMouseOver Als de muisknop wordt losgelaten.
onMouseUp Als de muis weer van het onderdeel afgaat.
Bij het met de muis weer van de link af gaan:
<A HREF="link" onMouseOut="JSCode">
onMove Als de gebruiker of een script het venster beweegt. Wordt (nog) niet ondersteund door IE.
onReset Wordt uitgevoerd zodra op de resetknop wordt gedrukt.
onResize Wordt uitgevoerd wanneer het browservenster wordt veranderd.
onSelect Wanneer de tekst in een formulier wordt geselecteerd.
onSubmit Als er met de submit-knop iets wordt verstuurd.
Bij het versturen van een formulier:
<FORM onSubmit="JSCode">

Inheritance

Terug naar de top

 

JavaScript ondersteunt opvolgingshierarchiën (inheritance hierarchies) door middel van prototyping. Bijvoorbeeld:

function Base() {
this.Override = function() {
alert("Base::Override()");
}

this.BaseFunction = function() {
alert("Base::BaseFunction()");
}
}

function Derive() {
this.Override = function() {
alert("Derive::Override()");
}
}

Derive.prototype = new Base();

d = new Derive();
d.Override();
d.BaseFunction();

Dit resulteert in het weergeven van:

Derive::Override()
Base::BaseFunction()

Een andere manier om de override methode te implementeren is:

// Base class.

function Base(paramA) {
this.paramA = paramA;
}

Base.prototype.Override = function() {
alert("Base::Override()");
}

Base.prototype.BaseFunction = function() {
alert("Base::BaseFunction()");
}

// Derived class.

function Derive(paramA, paramB) {
this.parent = Base;
this.parent(paramA);
this.paramB = paramB;
}

Derive.prototype = new Base();
Derive.prototype.Override = function() {
alert("Derive::Override()");
}

d = new Derive();
d.Override();
d.BaseFunction();



Terug naar de top