login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Javascript


Gegevens:
Geschreven door:
Addow
Moeilijkheidsgraad:
Normaal
Hits:
16212
Punten:
Aantal punten:
 (3.8)
Aantal stemmen:
10
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (2)
 


Tutorial:

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

« Vorige tutorial : Event-handling Volgende tutorial : Beginnen met JavaScript »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.012s