Ingebouwde JavaScriptobjecten
Last updated
Last updated
Nu we weten wat objecten zijn en hoe we zelf objecten kunnen aanmaken, zal ook de objectstructuur binnen JavaScript snel duidelijk worden. Het is niet de bedoeling van dit boek om alle JavaScriptobjecten in detail te bespreken, maar we gaan wel eens kijken welke types objecten er zijn en waar we de properties en methodes terug vinden. Ter illustratie gaan we enkele objecten aan de hand van een voorbeeld bespreken.
De eerste vraag is natuurlijk waar we een overzicht en beschrijving van alle objecten vinden. Persoonlijk gebruik ik vaak de referentiesite w3schools.com.
Deze site beschrijft kort en bondig de belangrijkste objecten geïllustreerd aan de hand van korte voorbeelden. De objecten die hier beschreven staan, worden door alle recente browsers ondersteund.
Merk op dat we de objecten in drie categorieën kunnen opdelen.
JavaScriptobjecten: de ingebouwde JavaScriptobjecten.
Dit zijn voor ons de interessantste objecten omdat we deze nog vaak in onze toepassingen verwerken.
Browser objecten: objecten specifiek gebonden aan de browser.
Met het History object kunnen we bijvoorbeeld de historiek van het browserwindow (de back button) uitlezen en vanuit JavaScript naar de vorige pagina terugkeren.
HTLM DOM objecten: bevat informatie over alle objecten binnen de pagina.
Zo kunnen we bijvoorbeeld het aantal links op een pagina tellen of de waarde van een invulveld uitlezen en aanpassen. Deze objecten gaan we niet bespreken. : Alle DOM objecten zijn immers veel makkelijker vanuit jQuery te benaderen.
Laat ons van de twee eerste categorieën enkele objecten van naderbij bekijken.
Een datum en/of tijd verwerken binnen een script, gaat enkel via het Date object.
Het Date object kent maar twee properties, namelijk constructor en prototype.
De constructor kennen we al. Met het kernwoord new kunnen we een nieuwe datum aanmaken. De parameters bepalen welke datum we aan ons object toekennen. De constructor zonder parameters geeft de datum en tijd van dit moment. Met prototype kan u een object uitbreiden met nieuwe methodes en properties. Dit hoort echter niet echt thuis in een basiscursus en daarom gaan we hier ook niet verder op in.
Het Date object heeft heel wat methodes. Om delen van de datum op te vragen (zoals dag, maand, jaar, enz..) gebruiken we methodes die beginnen met get...(). Om delen van een datum aan te passen, gebruiken we de methodes beginnend met set...().
★ Open jsIntro/date.html.
In het eerste voorbeeld wordt eerst een nieuw datum object aangemaakt en gekoppeld aan de variabele vandaag. Uit dit object halen we achtereenvolgens:
var datum
(is een combinatie van dag, maand en jaar, gescheiden door een streepje.)
var uur
var minuten
vandaag.getMonth() geeft een getal tussen 0 (januari) en 11 (december). Om het maandnummer op een normale manier te tonen, tellen we bij getMonth() nog één bij.
De minuten gaan we altijd met twee cijfers tonen. Dus vijf na tien tonen we als 10:05. Indien het aantal minuten kleiner is dan 10, nemen we de minuten en plakken er de string 0 voor. Dit gebeurt in de eerste if functie.
De tweede if-else controleert of het nu voor- of namiddag is en plaats respectievelijk AM of PM in de variabele APm.
Uiteindelijk worden al deze gegevens samengevoegd tot één string en in de paragraaf met id #datum1 getoond.
In het tweede voorbeeld gaan we ook de dagnaam tonen. Deze gegevens zijn echter niet als dusdanig beschikbaar vanuit het Date object. Wat we wel kunnen opvragen, is het cijfer van de dag. vandaag.getDay() geeft een cijfer tussen 0 (zondag) en 6 (zaterdag). Om deze cijfers te vertalen in woorden, maken we gebruik van een array.
Een array is een variabele met een lijst van soortgelijke gegevens. Een reeks van dagnamen is bijgevolg ideaal om in een array opgenomen te worden. De gegevens in een array worden van elkaar gescheiden door een komma en in zijn geheel omsloten door vierkante haakjes. Onze array met dagnamen kan er dus als volgt uitzien:
var arDagen = ['zo','ma','di','wo','do','vr','za'];
Met arDagen[index] kunnen we één bepaald element uit de array ophalen. Let op: de index start vanaf 0. Enkele voorbeelden:
arDagen[0] geeft 'zo'.
arDagen[3] geeft 'wo'.
arDagen[6] geeft 'za'.
Of in ons voorbeeld:
var arDagen = ['zo','ma','di','wo','do','vr','za'];
var dag = vandaag.getDay();
$('#datum2').html(... + arDagen[dag] + ...);
Op zondag is variabele dag gelijk aan 0 en is arDagen[dag] gelijk aan 'zo'.
Op woensdag is variabele dag gelijk aan 3 en is arDagen[dag] gelijk aan 'wo'.
Op zaterdag is variabele dag gelijk aan 6 en is arDagen[dag] gelijk aan 'za'.
Het resultaat van deze bewerking plus de datum komt in de paragraaf met id #datum2 terecht.
In tegenstelling tot het Date object kent het Math object geen constructor. Je kan het object dus zonder het kernwoord new gebruiken. De properties bevatten enkele wiskundige constanten zoals π.
Bij de methodes vinden we hoofdzakelijk wiskundige functies zoals sinus, cosinus, getallen afronden en een willekeurig getal genereren.
★ Open jsIntro/math.html.
Het eerste voorbeeld berekent het volume van een cilinder.
De straal en de hoogte zijn afkomstig van de twee invulvelden op het formulier. Het volume is gelijk aan straal * straal * π * hoogte.
Het resultaat toont vrij veel cijfers na de komma.
★ Rond het volume af met de methode Math.round().
★ Voeg één extra lijn (lijn 6) toe:
De methode rondt het getal altijd af tot een geheel getal. Met een eenvoudig wiskundig trucje kunnen we het getal makkelijk afronden tot op bijvoorbeeld twee cijfers na de komma. Vermenigvuldig het volume eerst met 100. Rond het getal vervolgens af en deel dit resultaat daarna door 100.
★ Rond op lijn 6 het volume op 2 cijfers na de komma af.
Het tweede voorbeeld simuleert het gooien met drie dobbelstenen.
Voor een dobbelsteen maken we gebruik van de methode Math.random(). Deze methode geeft ons een willekeurig getal tussen 0 en 0,999...
Vermenigvuldig dit getal vervolgens met 6. Dit resulteert in een getal tussen 0 en 5,999... Vervolgens ronden we dit getal naar onder af met Math.floor(). Zo bekomen we een geheel getal tussen 0 en 5. Als laatste tellen we hier nog één bij.
JavaScript kent drie methodes om een getal af te ronden:
Math.round(): rond vanaf x.5 het getal naar boven af of naar onder indien kleiner.
Math.floor(): rond het getal steeds naar onder af.
Math.ceil(): rond het getal steeds naar boven af.
De constructor eigenschap van het String object gaan we in de praktijk zelden of nooit gebruiken. Zoals we reeds weten, kunnen we een string ook rechtstreeks aan een variabele koppelen. Gelukkig kunnen we alle methodes van het String object wel blijven gebruiken zonder dat we de string met het kernwoord new hoeven te definiëren.
★ Open jsIntro/string.html.
In dit voorbeeld gaan we een spamvrij mailadres genereren door @ te converteren naar het woord AT en de punt te vervangen door het woord DOT.
Het resultaat van het tekstveld komt in de variabele mailadres. Eerst wordt gekeken of het veld wel is ingevuld. Indien de string geen waarde bevat (mailadres.length == 0) wordt een boodschap in de p-tag met id #resultaat getoond.
Indien de string niet leeg is, wordt met de methode search() gecontroleerd of de string het @-symbool bevat. search() geeft de positie van het @-symbool weer. Indien het symbool ontbreekt, geeft de methode de waarde -1 terug. Ook hier wordt weer een gepaste boodschap getoond. Bevat de string een @-symbool, dan gaat de methode replace() het @-symbool vervangen door het woord AT.
★ Pas de functie als volgt aan:
mailadres = mailadres.replace('@', ' AT '); wordt:
mailadres = mailadres.replace('@', ' AT ').replace('.', ' DOT ');
Door tweemaal de methode replace() toe te passen, kunnen we zowel het @-symbool als het puntsymbool in het mailadres vervangen.
Maar wat blijkt nu: enkel het eerste punt is vervangen. Het tweede punt nog niet.
De werkmethode die we nu gebruiken heeft nog wel enkele nadelen. Nu testen we immers uitsluitend op karakters, maar de structuur van een mailadres is net iets ingewikkelder. Een mailadres is immers opgebouwd volgens een bepaald patroon. Zo moet een mailadres steeds eindigen op een punt, gevolgd door een extensie bestaande uit twee, drie of meerdere letters. Dit kunnen we onmogelijk testen via een string.
De methode replace() kan u nog op een tweede manier gebruiken. In plaats van te testen op een string, kan u ook testen op een reguliere expressie (kortweg regex). Een reguliere expressie is in feite een testpatroon.
Hoe u een regex samenstelt, vindt u o.a. hier: http://www.w3schools.com/jsref/jsref_obj_regexp.asp
Gelukkig hoeft u niet alle expressies zelf te ontwerpen. Zo bestaan er verschillende sites waar u de meest voorkomende expressies kan downloaden. Bijvoorbeeld via: http://www.regexlib.com/
Reguliere expressies laten we verder buiten beschouwing, maar in het tweede voorbeeld gaan we toch heel even kijken hoe we in een string niet één, maar alle gevonden karakters kunnen vervangen.
Door een druk op de knop, wordt de tekst uit section2 in de variabele jq geplaatst. Vervolgens wordt binnen de string het woord JavaScript vervangen door het woord jQuery. (Let op: de woorden zijn hoofdlettergevoelig.) Het resultaat wordt daarna in section3 geplaatst. Zoals we uit voorgaand voorbeeld weten, wordt enkel het eerste woord vervangen. De vier andere woorden blijven onaangeroerd.
In plaats van te zoeken naar de string JavaScript, gaan we nu vergelijken met een regex. Dit is in onze toepassing vrij simpel. Vervang de aanhalingstekens door een slash. Dus 'JavaScript' wordt /JavaScript/.
★ Pas de code als volgt aan en test het resultaat in een browser.
Voorlopig merkt u nog geen verschil met de vorige oplossing. We hebben in de expressie ook nog niet aangegeven dat we naar alle woorden op zoek zijn. Om te zoeken naar alle overeenkomstige woorden, voegt u op het einde van de expressie de kleine letter g toe.
★ Pas de code als volgt aan en test het resultaat opnieuw in een browser.
Als laatste nog een voorbeeld van één van de vijf browser objecten. In tegenstelling tot de eerder geziene objecten kan u deze objecten niet zelf aanmaken met een constructor. De objecten zijn immers al aangemaakt vanuit de browser. Net als andere objecten hebben de browser objecten ook properties en methodes.
Neem bijvoorbeeld het History object. Met het History object kan u de geschiedenis van het browservenster ondervragen.
★ Open jsIntro/history.html.
Zoals u in onderstaande afbeelding merkt, heb ik deze pagina niet rechtstreeks in een nieuw venster geopend, maar zit er nog een hele geschiedenis voor. Achter de terugknop van de browser vindt u de verschillende pagina's die dit browservenster heeft doorlopen.
De eigenschap history.length geeft het aantal pagina's in de historiek weer. In mijn voorbeeld sta ik momenteel op het vijfde venster.
Verder heeft het history object drie methodes:
history.back(): ga één stap terug in de historiek.
history.forward(): ga één stap verder in de historiek.
history.go(n): ga n stappen verder (positief getal) of terug (negatief getal) in de historiek.
Om terug te keren naar de eerste pagina uit de historiek, neemt u de lengte van de historiek min één en maakt u dit getal negatief.
In onderstaand voorbeeld wordt dit history.go(-3).
