Objecten in javascript
1. Objecten
2. Eigenschappen
2.1 document-object
2.2 history-object
2.3 navigator-object
2.4 window/frame-object
2.5 array-object
2.6 boolean-object
2.7 date-object
2.8 form-object
2.9 function-object
2.10 image-object
2.11 location-object
2.12 number-object
2.13 math-object
2.14 screen-object
2.15 string-object
3. Methoden
3.1 document-object
3.2 history-object
3.3 navigator-object
3.4 window/frame-object
3.5 array-object
3.6 boolean-object
3.7 date-object
3.8 form-object
3.9 function-object
3.10 image-object
3.11 location-object
3.12 number-object
3.13 math-object
3.14 screen-object
3.15 string-object
4. Events
Voorwoordje
Het kan soms handig zijn, vanuit een pop-up een smiley-tag toevoegen aan een veld in het venster vanwaar je kwam. Of laten we het anders
stellen: voeg een smiley toe in een iframe.
Door deze laatste situatie ben ik me in de objecten gaan verdiepen, en aldus tot deze tutorial gekomen. Er is nog enigszins wat creativiteit
nodig om eigen situaties uit te werken, maar dit mag toch een grote stap 'in de richting van' wezen. Succes!
1] Objecten
Hieronder krijg je een lijstje met de belangrijkste objecten (meest gebruikt) en hun respectievelijke eigenschappen & methoden.
Object:
Eign/Meth
Omschrijving:
document
Eign | Meth
Het documentobject representeert datgene dat in het huidige browservenster vertoond wordt.
history
Eign | Meth
De geschiedenis van het venster, of meerbepaald de lijst url's dat geladen is in dit venster.
navigator
Eign | Meth
Een handig object waarmee je info over je browser kunt te weten komen.
window/frame
Eign | Meth
Het windowobject omvat het venster van je browser, of een enkele frame in een browservenster. Een frameobject is steeds een windowobject en kan bijgevolg identieke methoden & eigenschappen gebruiken.
top
Enkele minder relevante objecten, doch handig in gebruik:
Object:
Eign/Meth
Omschrijving:
array
Eign | Meth
Bevat een collectie van gegevens, die geassocieerd worden met een enkele variabele.
boolean
Eign | Meth
Converteert andere objecten naar een booleaanse waarde.
Waarden als undefined, null, 0, -0, false, NaN of een lege string retourneren de waarde 'false'. Alle andere waarden zullen resulteren in de waarde 'true'.
date
Eign | Meth
Object dat gebruikt worden om te communiceren met je systeemtijd en -datum.
form
Eign | Meth
Vertegenwoordigt alles wat ingevuld is tssn de <form> en </form> tags.
function
Eign | Meth
Geeft informatie weer over bepaalde functies.
image
Eign | Meth
Representeert alles wat met de <img>-tag gemaakt is.
location
Eign | Meth
Het locatieobject van het huidige venster (window).
number
Eign | Meth
Dit object levert ondersteuning voor enkele speciale constanten, die eventueel platformafhankelijk zijn (Slechts 1 converteermethode).
math
Eign | Meth
Hiermee kan je allerlei berekeningen uitvoeren.
screen
Eign | Meth
Levert specifieke informatie (voor het platform) weer over het scherm van de gebruiker.
string
Eign | Meth
Representeert een verzameling van karakters. Elk object naar dat naar het string-object is geconverteerd kan string-methodes gebruiken.
top
2] Eigenschappen
2.1] document-object
Eigenschap:
Omschrijving:
activeElement
Element dat momenteel in focus is. | Bekijk zelf .
AlinkColor
Kleur van de actieve link (meestal gedefenieerd in de <body>-tag). | Bekijk zelf .
all[ ]
Array die verwijst naar alle HTML elementen van je document.
anchors[ ]
Array die verwijst naar al de ankers in je document.
BgColor
Geef BgColor terug, indien die gespecifieerd is in de <body>-tag. | Bekijk zelf .
Charset
De huidige karaktertekenklasse. | Bekijk zelf .
children[ ]
Array die verwijst naar alle kinderen (frames) in je document.
Classes
Definieert klassen voor een bepaalde stijl. | Bekijk zelf .
Cookie
Specifieert een cookie voor het huidige document. | Bekijk zelf .
defaultCharset
Retourneert de standaard karaktertekenklasse van je document. | Bekijk zelf .
Domain
Domeinnaam van de server waarop je document geplaatst is. | Bekijk zelf .
embeds[ ]
Array die verwijst naar de ActiveX besturingselementen en plugins in je document.
Expando
Deze eigenschap laat niet toe om nieuwe eigenschappen te creëren. | Bekijk zelf .
FgColor
Retourneert voorgrondkleur zoals gedefinieerd is in de <body>-tag. | Bekijk zelf .
forms[ ]
Array die verwijst naar de formulieren in je document.
Height
Retourneert hoogte van je document. | Bekijk zelf .
Ids
Definieert stijlen voor aparte tags. | Bekijk zelf .
images[ ]
Array die verwijst naar alle figuren in je document.
lastModified
Retourneert de datumstring van wanneer je document het laatst is aangepast. | Bekijk zelf .
Layers
Beschrijft DHTML layers in je document. | Bekijk zelf .
linkColor
Retourneert linkkleur zoals gedefinieerd in <body>-tag. | Bekijk zelf .
links[ ]
Array die verwijst naar alle links in je document.
location
De url van je document. | Bekijk zelf .
parentWindow
Verwijst naar het venster van je document. | Bekijk zelf .
plugins[ ]
Array die alle objecten in je document verzamelt.
readyState
Status van je document bij het laden. | Bekijk zelf .
referrer
Url van het document dat uitvoer gaf aan het huidige document. | Bekijk zelf .
Tags
Stijlen voor HTML-tags. | Bekijk zelf .
Title
Retourneert de titel-waarde, zoals gedefinieerd is in de <title>-tag van je document (in <head>). | Bekijk zelf .
URL
Url van het huidige document. | Bekijk zelf .
vlinkColor
Kleur van de reeds bezochte links zoals gedefinieerd in <body>-tag. | Bekijk zelf .
Width
Breedte van je document. | Bekijk zelf .
top
2.2] history-object
Eigenschap:
Omschrijving:
Current
Url van het huidige document. | Bekijk zelf .
Length
Retourneert een numerieke waarde die gelijk is aan het aantal documenten dat reeds geopend is sinds het begin van de sessie.
| Bekijk zelf .
Next
Url van het volgende document in de geschiedenis-array. | Bekijk zelf .
Previous
Url van het vorige document in de geschiedenis-array. | Bekijk zelf .
top
2.3] navigator-object
Eigenschap:
Omschrijving:
appCodeName
De code-naam van je web browser. | Bekijk zelf .
appName
De naam van je web browser. | Bekijk zelf .
appVersion
De versie van je web browser. | Bekijk zelf .
cookieEnabled
Retourneert booleaanse waarde indien geactiveerd. | Bekijk zelf .
language
Taal gebruikt door de webbrowser. | Bekijk zelf .
mimeTypes[ ]
Array die alle MIME-types bevat die door je browser ondersteund worden.
onLine
Systeem verbonden in netwerk (true of false). | Bekijk zelf .
platform
OS-systeem in gebruik. | Bekijk zelf .
plugins[ ]
Array die alle geïnstalleerde plugins bevat.
systemLanguage
Standaard taal van het systeem. | Bekijk zelf .
userAgent
Gebuikersmanagment, bvb. Mozilla/5.0. | Bekijk zelf .
userLanguage
Taal ingesteld door de client op het huidige moment. | Bekijk zelf .
top
2.4] window/frame-object
Eigenschap:
Omschrijving:
closed
Retourneert booleaanse waarde als het venster gesloten is. | Bekijk zelf .
defaultStatus
Standaard tekst om weer te geven in de statusbalk. | Bekijk zelf .
document
Referentie naar document-object. | Bekijk zelf .
farmes[ ]
Array die alle frames in je venster bevat.
history
Referentie naar history-object. | Bekijk zelf .
length
Het aantal frames in een venster. | Bekijk zelf .
location
Referentie naar location-object. | Bekijk zelf .
name
Naam van het venster. | Bekijk zelf .
navigator
Verwijst naar het navigator-object van de browser. | Bekijk zelf .
offscreenBuffering
Booleaanse waarde om te bepalen of er zich updates van het huidige venster in een buffer bevinden. | Bekijk zelf .
opener
Window-object dat een ander window object geopend heeft. | Bekijk zelf .
parent
Ouderframe dat huidig frame omvat. | Bekijk zelf .
screen
Scherminformatie waar de browser functioneert. | Bekijk zelf .
self
Eigen-verwijzing naar het window-object. | Bekijk zelf .
status
Tijdelijk weer te geven tekst in de statusbalk. | Bekijk zelf .
top
Meest uiterlijke venster dat huidig frame omvat. | Bekijk zelf .
window
Eigen-verwijzing naar het window-object. | Bekijk zelf .
top
2.5] array-object
Eigenschap:
Omschrijving:
index
Voor een array, geconstrueerd door een overkomstige reguliere expressie, wordt de met 0 corresponderende overeenkomst met de string terug gegeven.
input
Voor een array, geconstrueerd door een overkomstige reguliere expressie, wordt de originele string teruggegegeven waarmee de reguliere expressie overeenkwam.
length
retourneert het aantal elementen in de array.
top
2.6] boolean-object
Geen eigenschappen voor dit object. Ga naar methoden voor boolean-object .
top
2.7] date-object
Geen eigenschappen voor dit object. Ga naar methoden voor date-object .
top
2.8] form-object
Eigenschap:
Omschrijving:
action
Url naar waar het formulier verzonden moet worden.
Method
Methode waarin het formulier verzonden moet worden (POST of GET).
Encoding
Dataformaat van verzending.
Target
Venster waarin welke informatie je ook terugkrijgt van de webserver wordt weergegeven.
name
Naam van het formulier.
elements[ ]
Array die alle elementen van het formulier bevat.
elements.length
Het aantal elementen van je verzonden formulier.
top
2.9] function-object
Eigenschap:
Omschrijving:
arguments[ ]
Array die alle argumenten bevat die meegegeven zijn aan de functie.
arity
Het aantal argumenten dat gedeclareerd is bij de functie.
caller
Functienaam van de functie die de huidige heeft opgeroepen.
length
Het aantal argumenten dat gedeclareerd is bij de functie.
prototype
Prototype voor een klasse van objecten.
top
2.10] image-object
Eigenschap:
Omschrijving:
border
Alleen-lezen eigenschap waarbij de border-waarde meegegeven aan <img>-tag wordt geretourneerd (in pixels).
complete
Retourneert booleaanse waarde. Indien de figuur volledig is geladen 'true', anders 'false'.
height
Alleen-lezen eigenschap waarbij de height-waarde meegegeven aan <img>-tag wordt geretourneerd (in pixels).
hspace
Alleen-lezen eigenschap waarbij de hspace-waarde meegegeven aan <img>-tag wordt geretourneerd (in pixels). Het gaat hier om de horizontale ruimte.
lowsrc
Url van alternatieve figuur met lage resolutie.
name
Figuurnaam meegegeven in tag.
Src
Url van weergegeven figuur.
vspace
Alleen-lezen eigenschap waarbij de vspace-waarde meegegeven aan <img>-tag wordt geretourneerd (in pixels). Het gaat hier om de verticale ruimte.
width
Alleen-lezen eigenschap waarbij de width-waarde meegegeven aan <img>-tag wordt geretourneerd (in pixels).
top
2.11] location-object
Eigenschap:
Omschrijving:
hash
Url's anker.
host
Combinatie van url's hostnaam & poortnummer.
hostname
Url's hostnaam.
href
Volledig url adres.
pathname
Url's path.
port
Url's port.
protocol
Url's protocol.
search
Url's zoek- of query portie.
top
2.12] number-object
Eigenschap:
Omschrijving:
MAX_VALUE
Maximale numerieke waarde.
MIN_VALUE
Minimale numerieke waarde.
NaN
Geen numerieke waarde.
NEGATIVE_INFINITY
Min oneindig.
POSITIVE_INFINITY
Plus oneindig.
top
2.13] math-object
Eigenschap:
Omschrijving:
E
Basis van natuurlijk logaritme.
LN10
Natuurlijk logaritme van 10.
LN2
Natuurlijk logaritme van 2.
LOG2E
Basis 2 logaritme van e.
LOG10E
Basis 10 logaritme van e.
PI
Alombekende getal Pi.
SQRTI_2
1 gedeeld door wortel 2.
SQRT2
Wortel 2.
top
2.14] screen-object
Eigenschap:
Omschrijving:
availHeight
Beschikbare schermhoogte.
availLeft
Eerste beschikbare horizontale pixels.
availTop
Eerste beschikbare verticale pixels.
availWidth
Beschikbare schermbreedte.
colorDepth
Diepte van het kleurenpalet van de browser.
height
Schermhoogte.
pixelDepth
Diepte van het browserscherm.
width
Schermbreedte.
top
2.15] string-object
Eigenschap:
Omschrijving:
length
Specifieert de lengte van een string.
top
3] Methoden
3.1] document-object
Methode:
Omschrijving:
captureEvents()
Geeft alle event types, die verzameld worden, een naam.
clear()
Maakt het document leeg.
close()
Laat de browser weten dat alle schrijftaken voor het venster en/of de frame beëindigd zijn en dat het document mag weergegeven worden.
contextual()
Definieert een contextuele stijl.
elementFromPoint()
Specifieert welk HTML element zich bevindt op welke plaats.
getSelection()
Retourneert de geselecteerde tekst.
open()
Opent een nieuw venster of frame, en wordt meestal gebruikt in combinatie met write() en writeln()-methoden.
releaseEvents()
Beëindigd het verzamelen van events.
routeEvents()
Verwijst alle evenst door naar een nieuwe event handler.
write()
Creëert nieuwe tekst op een webpagina.
writeln()
Creëert nieuwe tekst op een webpagina, gevolgd door een return.
top
3.2] history-object
Methode:
Omschrijving:
back()
Identiek aan de "Vorige"-knop van je browser, waarmee je dus naar je vorige document gaat.
forward()
Omgekeerde van vorige methode: daarmee ga je verder naar het volgende document (indien je al een keer back() hebt toegepast).
go()
Integer is hierbij een numerieke waarde die meegegeven moet worden aan de methode. Indien deze '0' bedraagt, zal de pagina vernieuwd worden (reload), indien deze meer dan '0' bedraagt, gaat het document net 'dat' precieze aantal url's verder in je geschiedenis en laadt het die url. Indien de waarde kleiner is dan '0' keert de methode dat aantal url's terug in de geschiedenis en wordt die pagina weergegeven.
top
3.3] navigator-object
Methode:
Omschrijving:
javaEnabled()
Retourneert booleaanse waarde indien geactiveerd. | Bekijk zelf .
plugins.refresh()
Activeert nieuw geïnstalleerde plugins.
preference()
Haalt een gebruikersinstelling op of definieert er een.
savePreferences()
Deze methode bewaart alle instellingen.
taintEnabled()
Retourneert booleaanse waarde indien geactiveerd. | Bekijk zelf .
top
3.4] window/frame-object
Methode:
Omschrijving:
alert()
Geeft een berichtenbox met "OK" weer. | Bekijk zelf .
blur()
Verwijdert de focuc op het venster. | Bekijk zelf .
clearTimeout()
Annuleert een timeout set. | Bekijk zelf .
close
Sluit een venster. | Bekijk zelf .
confirm()
Geeft een berichtenbox met "OK" en "CANCEL" weer. | Bekijk zelf .
focus()
Maakt het window-object het actieve venster. | Bekijk zelf .
open()
Opent een nieuw venster. | Bekijk zelf .
prompt()
Geeft een berichtenbox weer waar de gebruiker verplicht wordt informatie in te vullen. | Bekijk zelf .
setTimeout()
Voert een functie uit na het verloop van een opgegeven aantal milliseconden. | Bekijk zelf .
top
3.5] array-object
Methode:
Omschrijving:
concat()
Voegt twee arrays samen en retourneert die ene array.
join()
Voegt alle elementen uit een array samen in één string.
pop()
Verwijdert het laatste element uit een array en retourneert dit element.
push()
Voegt een of meer elementen toe aan het einde van de array en retourneert het nieuwe aantal elementen van deze array.
reverse()
Keert de volgorde van de elementen om: het eerste wordt het laatste element, het laatste het eerste.
shift()
Verwijdert het eerste element uit de array en retourneert dit element.
slice()
Haalt een nieuwe array van opgegeven index & lengte uit de oorspronkelijke array.
splice()
Voegt toe en/of verwijdert elementen uit een array.
sort()
Sorteert de elementen van een array (alfabetisch).
toSource()
Deze methode kopieert de oorspronkelijk string op identieke wijze. Overschrijft de Object.toSource-methode.
toString()
Retourneert een string die de array met zijn elementen omvat. Overschrijft de Object.toString-methode.
unshift()
Voegt een of meer elementen toe vooraan de array en retourneert de nieuwe lengte van de array.
top
3.6] boolean-object
Methode:
Omschrijving:
toSource
Retourneert een identiek object aan het opgegeven booleaanse object. Bruikbaar om zelf een booleaans object te creëren. Overschrijft Object.toSource-methode.
toString
Retourneert een string die het opgegeven object omvat. Overschrijft Object.toString-methode.
top
3.7] date-object
Methode:
Omschrijving:
getDate()
Datum van het datumobject.
getDay()
Retourneert de dag.
getFullYear()
Retourneert het jaartal (4-cijferig).
getHours()
Retourneert het uur.
getMilliseconds()
Retourneert milliseconden.
getMinutes()
Retourneert minuten.
getMonth()
Retourneert maand.
getSeconds()
Retourneert seconden.
getTime()
Retourneert het volledige uur.
getTimesoneOffset()
Retourneert de locale tijdzone in minuten (verhouding huidige datum & GMT).
parse()
Hakt de datum in stukjes.
setDate()
Aanpassen van datum.
setFullYear()
Aanpassen jaartal.
setHours()
Aanpassen uur.
setMilliseconds()
Aanpassen milliseconden.
setMinutes()
Aanpassen minuten.
setMonth()
Aanpassen maand.
setSeconds()
Aanpassen seconden.
setTime()
Aanpassen tijdwaarde.
toGMTString()
Retourneert string van datum, aangepast in GMT-tijdzone.
toLocaleString()
Retourneert string van datum, aangepast in locale tijdzone.
toString()
Retourneert volledig datum in stringformaat.
valueOf()
Retourneert datumwaarde in millisecondenformaat.
top
3.8] form-object
Methode:
Omschrijving:
reset()
Wist alle gegevens die ingevuld zijn.
submit()
Verzendt een formulier naar een webserver.
top
3.9] function-object
Methode:
Omschrijving:
apply()
Gebruik een functie als methode voor een object.
toString()
Converteert een functie naar een stringwaarde.
top
3.10] image-object
Methode:
Omschrijving:
onload
Figuur beëindigt het laden.
onabort
Wanneer de gebruiker het laden van de figuur beëindigd (meestal door op "STOP"-button te klikken in het menu).
onerror
Wanneer een error teruggegeven wordt bij het laden van de figuur.
top
3.11] location-object
Methode:
Omschrijving:
reload()
Herlaadt de pagina die momenteel in de browser wordt weergegeven.
replace()
Vervangt de huidige weergegeven pagina door een nieuwe (via url).
top
3.12] number-object
Methode:
Omschrijving:
toString()
Converteert een numerieke waarde naar een string.
top
3.13] math-object
Methode:
Omschrijving:
abs(x)
Absolute waarde van x.
acos(x)
Boogcosinus van x.
asin(x)
Boogsinus van x.
atan(x)
Boogtangens van x.
atan2(x,y)
Boog tot de x-as.
ceil(x)
Naar boven afronden van x naar integer. Bvb. 5.678... geeft 6.
cos(x)
Cosinus van x.
exp(x)
Exponent van x.
floor(x)
Naar beneden afronden van x naar integer.. Bvb. 5.678... geeft 5.
log(x)
Natuurlijk logaritme van x.
max(x,y)
Maximum van twee waarden.
min(x,y)
Minimum van twee waarden.
pow(x,y)
x wordt met y geëxponeerd.
random()
Random nummer.
round(x)
Afronden van x naar dichtsbijgelegen integer. Bvb. 5.678... geeft 6.
sin(x)
Sinus van x.
sqrt(x)
Vierkantswortel van x.
tan(x)
Tangens van x.
top
3.14] screen-object
Geen methoden voor screen-object.
top
3.15] string-object
Methode:
Omschrijving:
anchor()
Creëert een hypertext doel.
big()
Geeft tekst in een groot lettertype weer.
blink()
Geeft tekst weer als tussen <blink>-tag .
bold()
Geeft tekst vetgedrukt weer.
charAt()
Retourneert het karakter van de opgegeven positie.
charCodeAt()
Retourneert een numerieke waarde die de UNICODE respresenteert van het karakter op de opgegeven positie.
concat()
Combineert de tekst van twee strings.
fixed()
Geeft de tekst weer in fixed-pitch font.
fontcolor()
Geeft de tekst weer in een bepaalde kleur.
fontsize()
Geeft de tekst weer in een bepaalde grootte.
fromCharCode()
Creëert een string gebruik makend van de volgorde van opgegeven UNICODE waarden.
indexOf()
Retourneert de index van de eerstgevonden overeenkomende waarde, indien geen zoekresultaat -1.
intalics()
Geeft de tekst schuin weer.
lastIndexOf()
Retourneert de index van de laatstgevonden overeenkomende waarde, indien geen zoekresultaat -1.
link()
Maakt een HTML hypertext aan die een andere url aanvraagt.
match()
Controleert de overeenkomst van een reguliere expressie met een string.
replace()
Controleert de overeenkomst van een reguliere expressie met een string, en vervangt die substring door een nieuwe substring.
search()
Zoekt de overeenkomst tussen een reguliere expressie en een opgegeven string.
slice()
Retourneert een nieuwe string uit een bestaande string.
small()
Geeft de tekst weer in kleine lettertekens .
split()
Splitst een string in een array van substrings.
strike()
Geeft een stuk tekst doorstreept weer.
sub()
Geeft een tekst weer als sub: O2 .
substr()
Retourneert de karakters in een string startend bij opgegeven waarde met opgegeven lengte.
substring()
Retourneert een substring van een string.
sup()
Geeft een tekst weer als sup: x2 .
toLowerCase()
Converteert een string naar een string met allemaal kleine tekens.
toSource()
Retourneert de bron van de aangemaakte instantie. Overschrijft de Object.toSource-methode.
toString()
Retourneert het objecttype of de naam van de constructor die het object gemaakt heeft. Overschrijft de Object.toString-methode.
toUpperCase()
Converteert een string naar een string met allemaal kapitale tekens.
top
4] Events
Javascript geeft ons de mogelijkheid om dynamisch te zijn, en net de events zorgen ervoor dat het allemaal wat mooier en vlottend
oogt, en alles aan de hand van acties van de gebruiker gebeurt. Elke code wordt dan ook dadelijk uitgevoerd wanneer een event voorkomt.
Om van event handling gebruik te maken, raad ik je aan van Joël 's tutorial gebruik te maken:
Event-handling .
top