5. Objecten

Zowel in java als in javascript gebruik je objecten: entiteiten, 'dingen' met eigenschappen (properties) en methoden (methods), opdrachten.
Beschouw je bv. een auto als een object, dan heeft die als eigenschappen o.a. kleur en vorm en als methoden rijden en remmen.

5.1. De syntaxis van objecten

HTML-tags zijn objecten volgens het hiërarchisch model HTML DOM (document object model), met het grootste geheel, het venster, als basisobject (parent object) en daarin steeds kleinere subobjecten (child objects).
Algemeen bepaal je de tekst in een tag met tagNaam.innerHTML en andere inhoud met tagNaam.nodeValue.

De creatie van een object gebeurt via een speciale functie, een constructor.
Met new definieer je expliciet een object en met delete wis je het uit het geheugen.

Je kan een object declareren en initialiseren tegelijk: var auto = {merk:"Peugeot", kleur:"geel", deuren:5};.

Om typwerk te besparen kan je verwijzen naar een object met this of with, afhankelijk van de situatie.
Bekijk maar eens de broncode van dit voorbeeld.

Het opvragen van een objecteigenschap gebeurt in de vorm object.eigenschap.
bv: var automerk = auto.merk;

Het uitvoeren van een opdracht, instructie op een object gebeurt in de vorm object.methode(), bv: auto.rijden();

5.2. Standaardobjecten

Hieronder enkele standaardobjecten met hun courante eigenschappen en methoden.
Je kan een standaardobject creëren met keyword new (behalve Math), maar best doe je dat niet, want objecten werken trager dan primitieve waarden, variabelen met een letterlijke toekenning.

5.2.1. String

Meestal declareer en initialiseer je een tekstvariabele niet expliciet, bv: var mijnTekst = "Hallo";

Maar je kan een expliciete Stringconstructor gebruiken:
var mijnTekst = new String();   creëert een lege tekenreeks
var mijnTekst = new String("Hallo");   creëert een tekenreeks met waarde "Hallo".
Tussen haakjes: gebruik best geen expliciete stringconstructor, dat vertraagt de uitvoering van je code.

Een Stringobject heeft maar één veelgebruikte eigenschap:
string.length:   aantal tekens in het tekstobject

Je kan echter heel wat bewerkingen uitvoeren op een tekenreeks; er bestaan dan ook vele methoden:

string.bold() zet de tekenreeks in het vet
string.charAt(n) vraagt het teken op positie n in de tekenreeks op (eerste positie = 0)
string.concat(string2) voegt tekenreeks string2 toe aan de oorspronkelijke tekenreeks
string.fontcolor(kleur) zet de tekenreeks in de gekozen kleur; de kleurwaarde is een woord (red, black, ...), code #RRGGBB of functie rgb(255,255,255)
string.fontsize(n) zet de tekenreeks in lettergrootte n
string.indexOf("s") geeft de positie van teken "s" in de tekenreeks (niet gevonden: pos -1)
string.indexOf("s",n) geeft de positie van teken "s", beginnend vanaf positie n
string.italics() zet de tekenreeks cursief
string.lastIndexOf("s") geeft de laatste positie waarop teken "s" voorkomt in de tekenreeks
string.replace("t1","t2") vervangt in de hele string teken(s) t1 door teken(s) t2
string.slice(pos1,pos2) splits de tekst op beginpositie pos1 (eerste teken = positie 0) en geef de overblijvende tekst ofwel tot het einde (geen pos2 opgeven) ofwel tot positie pos2
string.split(" ") splits de tekst op elke spatie (je kan ook een ander teken opgeven) en zet alle stukjes in een array
string.substr(n,l) geeft de substring, deeltekenreeks van l tekens lang vanaf positie n
string.substring(m,n) geeft de substring, deeltekenreeks vanaf positie m tot positie n (n niet inbegrepen)
string.toLowerCase() zet alle letters uit de tekenreeks om in kleine letters
string.toUpperCase() zet alle letters uit de tekenreeks om in hoofdletters

Zo kan je bv. een banner maken, tekst die horizontaal over het scherm schuift.
Of je kan de stringmethodes gebruiken om een bankrekeningnummer te controleren.

Opmerking: om binnen een string een nieuwe regel te beginnen kan je escapecode \n gebruiken, bv: "Eerste regel\nTweede regel"

5.2.2. Date

Een leuk "gadget" op je website, is het tonen van datum en tijd.
Als die info in het Engels mag verschijnen, voldoet in feite één regel javascript, zoals je kan zien in de broncode van dit voorbeeld.

Met het object DATE kan je wel meer dan de huidige datum tonen; er bestaan heel wat methodes (zie voorbeeld).

De belangrijkste constructors zijn:

  • var datum = new Date(); creëert een variabele met de actuele datum en tijd
    Datums worden berekend in milliseconden vanaf 01 januari 1970 00:00:00 Universal Time (UTC); een dag bevat 86.400.000 milliseconden.
  • var datum = new Date(jaar, maand, dag, uur, minuten, seconden, ms);
    creëert een string waarbij
    • jaar (verplicht): bestaat uit 4 cijfers
    • maand (verplicht): cijfer tussen 0 (januari) en 11 (december)
    • dag: cijfer van 1 tot 31
    • uur: cijfer van 0 tot 23
    • minuten: cijfer van 0 tot 59
    • seconden: cijfer van 0 tot 59
    • ms = milliseconden: getal van 0 tot 999

En dan heb je een heleboel methoden om datum en tijd op te vragen (get) en aan te passen (set).

datum.getDate()geeft de dag van de maand: 1 tot 31
datum.getDay()geeft de weekdag: 0 (zondag) tot 6 (zaterdag)
datum.getMonth()geeft het cijfer van de maand: 0 (januari) tot 11 (december)
datum.getFullYear()geeft jaartal van Datum in 4 cijfers
(getYear geeft het jaartal in 2 cijfers, maar dat is niet compatibel met 2000)
datum.getHours()geeft het uur uit Datum: 0 tot 23
datum.getMinutes()geeft de minuten: 0 tot 59
datum.getSeconds()geeft de seconden: 0 tot 59
datum.getMilliseconds()geeft de milliseconden uit Datum
datum.getTime()geeft het aantal milliseconden sinds 1 januari 1970
datum.getTimezoneOffset()geeft het tijdsverschil tussen de huidige tijdzone en GMT
datum.setDate()definieert de dag van de maand: 1 tot 31
datum.setMonth()definieert het cijfer van de maand: 0 (januari) tot 11 (december)
datum.setFullYear()geeft object Datum een jaartal in 4 cijfers
(setYear geeft het jaartal in 2 cijfers, maar dat is niet compatibel met 2000)
datum.setHours()definieert het uur voor Datum: 0 tot 23
datum.setMinutes()definieert de minuten: 0 tot 59
datum.setSeconds()definieert de seconden: 0 tot 59
datum.setMilliseconds()definieert de milliseconden
datum.setTime()definieert het aantal milliseconden sinds 1 januari 1970
datum.toString()zet het datumobject om in een string

Wil je bv. een digitale klok op je webpagina?
Of een datum keurig met maandnaam en weekdagnaam?

5.2.3. Math

Math.PIgeeft het getal pi = 3,14...
Math.abs(getal)geeft de absolute waarde van getal
Math.ceil(x)geeft het dichtsbijzijnde geheel getal, gelijk aan of net groter dan x
Math.cos(x)geeft de cosinus van x, met x in radialen
Math.exp(x)geeft ex, waarbij e (Math.E, grondtal van natuurlijke logaritme) = 2,7183...
Math.floor(x)geeft het dichtsbijzijnde geheel getal, gelijk aan of net kleiner dan x
Math.max(x,y)geeft het grootste getal van x en y
Math.min(x,y)geeft het kleinste getal van x en y
Math.pow(x,y)geeft getal x tot de y-de macht
Math.random()geeft een willekeurig getal tussen 0 en 1
Math.round(getal)rondt getal af op de eenheid
Math.sin(x)geeft de sinus van x, met x in radialen
Math.sqrt(getal)geeft de vierkantswortel uit getal

Vervolgens nog enkele functies en methods in verband met getallen:

isNaN(var)test of de variabele geen getal is (not a number)
parseFloat("tekst")zet "tekst" indien mogelijk om in een kommagetal (floating point)
parseInt("tekst")zet "tekst" indien mogelijk om in een geheel getal (integer)
getalVar.toString()zet het getal om in een decimaal getal-in-tekstvorm
getalVar.toString(16)zet het getal om in een hexadecimaal getal-in-tekstvorm
getalVar.toString(2)zet het getal om in een binair getal-in-tekstvorm

5.3. Prototypes

Je kan in JavaScript ook classes definiëren – prototypes genoemd – en daarvan instances creëren.

In JavaScript bevat de constructor zowel de eigenschappen als de methods. Bijvoorbeeld:
function Persoon(vn, fam, leeftijd, oogkleur) {
  this.voornaam = vn;
  this.familienaam = fam;
  this.leeftijd = leeftijd;
  this.oogkleur = oogkleur;

  this.setVoornaam = function (naam) {
    this.voornaam = naam;
  }
  this.print = function () {
    return this.voornaam + “ “ + this.familienaam;
  }
}

Vervolgens maken we enkele instances:
var iemand = new Persoon("John", "Doe", 50, "blauw");
var nogIemand = new Persoon("Sally", "Jans", 18, "bruin");

Je kan een instance ook extra eigenschappen toekennen, bv: iemand.nationaliteit = "BE"
Een eigenschap toevoegen aan constructor Persoon gebeurt met: Persoon.prototype.nationaliteit = "BE";

Op gelijkaardige wijze kan je een method toevoegen aan constructor Persoon:
Persoon.prototype.getVoornaam = function() {
  return this.voornaam;
}

Een method aanroepen is simpel, bv.: iemand.setVoornaam("Jan");

Het is ook mogelijk om te werken met inheritance.
Zo kan je bv. een subclass maken van Persoon:
Kind.prototype = new Persoon();
Kind.prototype.constructor = Kind; //anders blijft constructor Persoon()
Kind.prototype.parent = Persoon.prototype;

En dan krijg je bv. als constructor:
function Kind(vn, fam, leeftijd, oogkleur, vader, moeder) {
  Persoon.call(this, vn, fam, leeftijd, oogkleur);
  this.vader = vader;
  this.moeder = moeder;
}

Meer info:

tekenen

Een voorbeeld: Vormen tekenen op canvas.