Home

Objecten en events in JavaScript

Inhoudsopgave
Objecten en events in JavaScript
Events in JavaScript
Verschillende events in JavaScript
Alle pagina's

Pagina 1 van 3

Objecten en events

Interactie met de gebruiker: dát is wat u wilt bereiken met het toepassen van JavaScript in uw webpagina's. Interactiviteit is snel te verkrijgen door gebruik te maken van de vensterobjecten in JavaScript en de events die daaraan kunnen worden gekoppeld.
JavaScript is een objectgeoriënteerde scripttaal. Objecten zijn elementen waaruit de HTML-pagina is opgebouwd, zoals bijvoorbeeld vensters, tekstknoppen, frames, plaatjes en links. Al deze objecten hebben eigenschappen die zijn aan te roepen. Zo hebben plaatjes een bepaalde naam of waarde waarnaar kan worden verwezen (denk hierbij aan het attribuut name).

Aan objecten kunnen ook methodes worden gekoppeld. Bij methodes gaat het om acties 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, welke dat zijn leest u verderop. Aan alle objecten zijn dan weer events te koppelen, die in werking worden gezet na een actie van de gebruiker. Dat gebeurt bijvoorbeeld als de gebruiker op een knop klikt of met zijn muis over een plaatje beweegt. Het enige wat een event doet is registreren dat er een handeling heeft plaatsgevonden. Daarna wordt een functie geactiveerd.

De venster-objecten (niet te verwarren met de ingebouwde en zelfgemaakte objecten van JavaScript) hebben een hiërarchische structuur. De onderlinge verhouding binnen die structuur wordt aangeduid met ouder-kindverhouding (parent-child). Aan de top van die hiërarchie staat het window-object (zie kader), het is dan ook de ouder van alle andere objecten. Het window-object heeft drie kind-objecten, te weten document, location en history. Het document-object heeft op zijn beurt weer vier kinderen: de links, anchors, plaatjes en formulieren. De laatste kan nog weer worden onderverdeeld in verschillende formulier-elementen.

Het window-object
Ieder object heeft zoals gezegd zijn eigen eigenschappen. Ik zal nu alleen een aantal eigenschappen van het window-object geven, zodat u een indruk krijgt waarvoor eigenschappen dienen. Het window-object heeft drie eigenschappen die u vaak tegen zult komen. De eerste is defaultStatus, deze wordt gebruikt om een standaardtekst in de statusbalk te tonen.

<SCRIPT language="JavaScript">

</SCRIPT>

Een andere mogelijkheid om tekst in de statusbalk te laten verschijnen is: gebruik maken van de eigenschapstatus. Deze moet wel worden verbonden aan een event:

Een andere mogelijkheid om tekst in de statusbalk te laten verschijnen is: gebruik maken van de eigenschapstatus. Deze moet wel worden verbonden aan een event:

<A href="/muziek.htm" OnMouseOver="status='De beste muzieksites';return true"><IMG src="/muziek.gif"></A>

De derde veelgebruikte eigenschap is parent. Deze eigenschap wordt gebruikt om naar een frame te kunnen verwijzen. Stel, u hebt twee frames met de namen één en twee. Als frame één het hoofdvenster is, dan hoeft hiernaar niet expliciet te worden verwezen. Met defaultStatus wordt de tekst gewoon in de statusbalk getoond. Wilt u echter een script activeren in frame twee, dan moet een omweg worden gevolgd. Er wordt dan eerst met parent verwezen naar het eerste frame, en vervolgens wordt de naam van het tweede frame genoemd:

<SCRIPT language="JavaScript">

</SCRIPT>

Methodes
Methodes kunnen aan objecten worden gekoppeld. Op het moment dat een object wordt benaderd wordt de methode geactiveerd. De verschillende venster-elementen kennen hun eigen methodes, die we hier groepsgewijs weergeven.

Window- en frame-object

alert Geef een bericht weer in een dialoogbox.
close() Sluit een venster.
confirm(bericht) Hiermee kunt u een bericht geven met een OK- en CANCEL-knop.
open(URL,name, eigenschappen) Met deze methode kunt u een nieuw venster openen; in dat venster kunt u een nieuwe pagina laden met URL, verwijzen naar een andere pagina met name en de eigenschappen van het nieuwe venster bepalen.
prompt() Geeft een bericht weer in een dialoogbox, waarbij de gebruiker de mogelijkheid heeft om iets in te vullen.
setTimeout(gebeurtenis, tijd) Hiermee kan na een bepaalde tijd automatisch een actie worden uitgevoerd, de tijd wordt uitgedrukt in milliseconden.
clearTimeout(naam) Beëindigt een eerder ingestelde Timeout. U kunt hiernaar verwijzen door de naam ervan op te geven.

Document-object

clear() Leegt de pagina, om vervolgens met 'write' iets te kunnen schrijven.
write() Om tekst naar een document te schrijven.
writeln() Schrijft ook tekst weg, maar plaatst aan het eind van de regel een return.
open() Opent een document, om er bewerkingen op uit te voeren.
close() Sluit het geschreven document af en toont de gegevens.

Form-object
submit() Verstuurt het formulier.
reset() Herstelt het formulier in de oorspronkelijke staat.

De verschillende formulier-elementen kunnen de volgende methodes hebben:

focus() Arceert het betreffende object.
blur() Maakt de arcering van het object ongedaan.
click() Geeft aan dat er op iets geklikt is.
select() Geeft de selectie aan van de ingevoerde tekst.

Vorige - Volgende >>

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden. U kunt zich inschrijven voor de volgende cursussen en trainingen:

Objecten en events in JavaScript

Objecten en events

Lente Actie!

Cursussen en trainingen

Testimonials

Populair

Techniek

HD

Tutorials

Video montage