|
Een belangrijk onderdeel van de scripttaal JavaScript zijn de zogenaamde objecten. Hierover meer in dit artikel
Objecthiërarchie
Een belangrijk onderdeel van de scripttaal JavaScript zijn de zogenaamde
objecten. JavaScript is een objectgeoriënteerde scripttaal. Dit
betekent dat de opbouw gebaseerd is op een objectensysteem met methoden en
eigenschappen.
Om dit objectensysteem duidelijk te maken kijk je best even naar onderstaand
schema. Alle onderdelen die in een browser voorkomen zijn erin opgenomen met een
bepaalde hiërarchie.
Zo kun je zien dat het object window het hoogste in rang staat.
Alles wat je programmeert, wordt immers uitgevoerd in het venster van de
browser.
Nog niks gesnapt van al die objecten? Geen probleem, verduidelijken doen we
met enkele voorbeelden. Zonder dat je het goed besefte, heb je al met objecten
gewerkt.
In het eerste deel van de cursus maakte je gebruik van de opdracht
window.open() om een venster te openen. Het object in deze opdracht
is window en de actie die erop toegepast wordt, is open().
open() noemen we hier de methode oftewel de
actie die toegepast wordt op het object.
Je maakte ook gebruik
van de opdracht document.write(). Hier is het object document
en de actie is write(). In mensentaal betekent dat dat er
geschreven wordt in het object document.
Als je de objectenhiërarchie bekijkt zie je dat het hoogste object window
is. Eigenlijk is de correcte opdracht dus window.document.write()
maar in JavaScript mag je dat inkorten tot document.write() juist
omdat dit object voor elk ander object geldt.
Alles speelt zich immers af in het
object window.Voorbeelden van andere methoden zijn alert(), confirm()
en prompt().
Een ander onderdeel van objecten zijn de eigenschappen. Een
eigenschap is een kenmerk van een object. Eigenschappen van het object
document zijn bijvoorbeeld de titel van het document, de achtergrondkleur
e.d.
Genoeg theorie, laten we beginnen met een voorbeeldje.
Voorbeeld: We willen de bezoeker tonen op welke pagina hij zich bevindt.
Hiervoor gaan we een eigenschap gebruiken van het object document..
Het gaat immers om de titel van het document. De eigenschap die we hiervoor gaan
gebruiken, heet title. Plaats onderstaande code in de body van een
HTML-document:
<script type="text/javascript">
document.write(document.title);
</script>
We schrijven de titel met de opdracht document.write() die je al kende in het
document.
Deze manier van programmeren is wel snel, maar niet erg overzichtelijk. Het is
gebruikelijk om gebruik te maken van variabelen, zeker als je scripts
uitgebreider gaan worden. De "juistere" versie wordt dan:
<script type="text/javascript">
var titel;
titel=document.title;
document.write(titel);
</script>
Het script plaatst de eigenschap eerst in een variabele genaamd titel
en die variabele wordt dan geschreven in het document.
Hieronder vind je een overzicht van de eigenschappen bij de meest gebruikte
objecten.
Het object document
Het object document is zeker het meest gebruikte object. Als je
kijkt in het overzicht bovenaan de pagina zie je dat document
hoogste in rang staat na het object window.
Eén van de
eigenschappen van document leerde je al kennen in het voorbeeld
hierboven, namelijk title.
In onderstaande tabel heb ik voor je de andere eigenschappen opgesomd.
| object.eigenschap |
betekenis |
| document.alinkColor |
kleur van de geactiveerde links in het document |
| document.bgColor |
achtergrondkleur van het document |
| document.domain |
domein van het document |
| document.fgColor |
kleur van het lettertype |
| document.lastModified |
laatst bijgewerkte datum van het document |
| document.linkColor |
kleur van links |
| document.referrer |
adres van het vorige geopende document |
| document.title |
titel van het document |
| document.vlinkColor |
kleur van bezochte links |
De werkwijze om deze gegevens weer te geven is dezelfde als in ons voorbeeld
hierboven om de titel van het document weer te geven.
Het object history
Het object history haalt gegevens uit je browser i.v.m. de
browsergeschiedenis. Onderstaande tabel geeft je een overzicht van de
beschikbare opties.
| object.eigenschap |
betekenis |
| history.length |
aantal pagina's geopend |
| history.current |
huidig adres |
| history.next |
adres van volgende pagina |
| history.previous |
adres van vorige pagina |
| history.back() |
naar vorige pagina in geschiedenis gaan |
| history.forward() |
naar volgende pagina in geschiedenis gaan |
| history.go() |
naar zelf gekozen pagina gaan in geschiedenis |
De drie laatste eigenschappen uit de tabel (back, forward
en go) hebben wat extra uitleg nodig. Zij vervangen de knoppen
Vorige en Volgende van de browser:
Als je de eigenschap back() gebruikt, gaat de browser naar de
vorige pagina in de geschiedenislijst. Je kunt echter ook instellen dat hij nog
verder in de geschiedenis moet bladeren. Hiervoor kun je een getal meegeven
tussen de haakjes.
Voorbeeld: history.back(4); gaat 4 pagina's terug in de
geschiedenis.
De eigenschap forward() werkt op dezelfde manier, maar bladert
vooruit in de geschiedenis.
De eigenschap go() tenslotte is een combinatie van back()
en forward(). Deze eigenschap kun je voor beide doeleinden
gebruiken.
Voorbeeld: history.go(-8); gaat 8 pagina's terug in de geschiedenis
en history.go(4); gaat 4 pagina's verder in de geschiedenis.
Het object location
Het object location geeft de gebruiker allerlei informatie over
de locatie van de website die hij/zij nu bekijkt.
| object.eigenschap |
betekenis |
| location.host |
host |
| location.hostname |
host en domeinnaam |
| location.href |
URL van het bestand |
| location.pathname |
pad naar het bestand |
| location.port |
poort (andere dan 80) |
| location.protocol |
protocol (file,ftp,http) |
| location.target |
het kenmerk van target |
Het object navigator
Het object navigator geeft de gebruiker informatie over zijn
computer. Dit object is zeer handig voor webmasters omdat men met deze
eigenschappen de gebruikte browser kan achterhalen.
| object.eigenschap |
betekenis |
| navigator.userAgent |
browser en besturingssysteem |
| navigator.AppCodeName |
interne codenaam |
| navigator.AppName |
externe naam van de browser |
| navigator.AppVersion |
versienummer van de browser |
| navigator.language |
de taal van de browser |
| navigator.platform |
het besturingssysteem |
Het object screen
Het object screen is ook een handig object om de weergaven van
de website aan te passen aan de schermweergave.
| object.eigenschap |
betekenis |
| screen.height |
hoogte van het scherm in pixels |
| screen.width |
breedte van het scherm in pixels |
| screen.pixelDepth |
pixeldiepte van het scherm |
| screen.colorDepth |
de kleurdiepte van het scherm/ |
| screen.availHeight |
de beschikbare hoogte van het scherm |
| screen.availWidth |
de beschikbare breedte van het scherm |
Een interessante toepassing bij het object screen is dat je een
aangepaste webpagina kunt laten weergeven bij verschillende resoluties.
We maken hiervoor een functie aan:
<script type="text/javascript">
function resolutie()
{
var hoogte;
var breedte;
hoogte=screen.height;
breedte=screen.width;
if (breedte>=800 && breedte<1024)
{
alert("Deze pagina is geoptimaliseerd voor een resolutie van 1024 op 768
pixels. Verander je resolutie indien mogelijk.");
}
}
</script>
Ga naar het volgende deel van de Javascript basiscursus : Tijd en datum
|
Ontwerp je site