Cursus JavaScript - Het HTML-document

Het HTML-document

JavaScript hierarchie

JavaScript organiseert alle elementen van een webpagina volgens een bepaalde hierarchie. Ieder element wordt gezien als een object. Elk object kent verschillende properties en methods. Door middel van JavaScript kunnen we deze objecten gemakkelijk manipuleren. Hiervoor is het zeer belangrijk de hierarchie binnen de HTML-objecten te begrijpen. We zullen dit illustreren aan de hand van een voorbeeld. Bekijken we even de HTML-code van volgende webpagina.

<html>
<head>
<title>PC Aktief Computerclub - Registreer</title>
</head>
<body bgcolor=#ffffff>
<TABLE>
<TD width="100">
</TD>
<TD BORDER="3" BORDERCOLOR=#00FF00> 
<img src="pcaktief.gif" name="PC Aktief logo" width=100 height=76>
<a href="http://titan.glo.be/~debaerej/pcaktief.htm">
PC Aktief Computerclub - Homepage</a>
<form name="Registreer">
Naam en Voornaam : 
<input type="text" name="naam" value="" SIZE="25"><br>
E-Mail adres :
<input type="text" name="email" value="" SIZE="31"><br><br>
<input type="button" value="Registreer" name="RegistreerKnop" onClick=
"alert('Vanaf nu zult u bij elke wijziging van onze site
 verwittigd worden')">
</form>
</TD>
<p>
</TABLE>
<center>
<img src="rule2.gif" name="Ruler" width=582 height=9>
<p>
</center>
</body>
</html>

Hier volgt een screendump van deze webpagina (Ik heb de verschillende HTML-objecten aangeduid):

We hebben twee afbeeldingen, een hyperlink en een formulier met twee tekstvelden en een knop. Vanuit het oogpunt van JavaScript is ons browservenster een window-object. Dit window-object bevat bepaalde elementen zoals bijvoorbeeld de statusbalk onderaan ons venster. In een window-object kunnen we een HTML-document laden. Deze webpagina is een document-object. Dit betekent dat het document-object het HTML-document vertegenwoordigt dat op dat moment geladen is. Het document-object is een zeer belangrijk object in JavaScript - we zullen het telkens weer gebruiken. Properties van het document-object zijn bijvoorbeeld de achtergrondkleur van de pagina. Maar wat belangrijkst is, is dat alle HTML-objecten properties zijn van het document-object. Een HTML-object is bijvoorbeeld een hyperlink, of een formulier.
Het volgende schema illustreert de hierarchie binnen onze webpagina:

We willen informatie bekomen over de verschillende objecten en ze nadien manipuleren. Hiervoor moeten we toegang krijgen tot de verschillende objecten. In het bovenstaand schema zien we de naam van de verschillende objecten. Indien we het adres van de eerste afbeelding op onze HTML-pagina willen kennen dan moeten we de hierarchie volgen. We moeten bovenaan beginnen. Het eerste object heet document. De eerste afbeelding op de pagina is gekend als images[0]. Dit betekent dat we toegang hebben tot dit object dmw JavaScript via document.images[0].
Als we bijvoorbeeld willen weten wat de gebruiker heeft ingevuld in het eerste tekstveld van ons formulier dan moeten we de toegang vinden tot dat object. Daarvoor gaan we opnieuw kijken in ons schema. We volgen het pad dat leidt tot het object elements[0] - en we plaatsen de naam van alle objecten die we passeren na mekaar gescheiden dmv een punt. Dit betekent dus dat we toegang hebben tot het eerste tekstveld via: document.forms[0].elements[0]
Hoe kunnen we nu de ingevulde tekst opvragen ? Hiervoor moeten we de properties en methods van een bepaald object kennen. Deze informatie kunnen we terugvinden in de JavaScript reference-guide (bijvoorbeeld in de documentatie beschikbaar gesteld door Netscape). Daarin vinden we terug dat een tekstveld toegankelijk is via de property value. Deze bevat de tekst die we ingevuld hebben in ons tekstveld. We kunnen de waaarde van dat veld uitlezen dmv volgende code:

naam= document.forms[0].elements[0].value;

De tekststring wordt gestockeerd in de variabele naam. We kunnen nu verder werken met deze variabele. We kunnen bijvoorbeeld een popup-venster tonen met alert("Hallo " + naam). Indien de input 'Marc' is dan zal via het commando alert("Hallo " + naam) een popup-venster tevoorschijn komen met de tekst 'Hallo Marc'
Indien we grotere webpagina's hebben met meerdere formulieren dan wordt het misschien toch verwarrend als we de objecten gaan adresseren dmv hun nummer - bijvoorbeeld document.forms[3].elements[17] of was het nu document.forms[2].elements[18]? Om dit probleem te vermijden kunnen we ook een unieke naam toekennen aan de verschillende objecten. We zien dit in het volgende voorbeeld:

<form name="Registreer">
Naam en voornaam: 
<input type="text" name="naam" value=""><br>
...

Dit betekent dat ons formulier forms[0] ook gekend is als Registreer. Ipv elements[0] kunnen we ook naam gebruiken(zoals gespecifieerd in de name-property in de <input> tag) om toegang te krijgen tot ons eerste tekstveld. Dus in plaats van te schrijven

naam= document.forms[0].elements[0].value;

kunnen we ook schrijven

naam= document.Registreer.naam.value;

Dit maakt het veel gemakkelijker - vooral met grotere webpagina's die veel objecten bevatten. (Let op bij het gebruik van kleine letters en hoofdletters : registreer is niet hetzelfde als Registreer)
Verscheidene properties van JavaScript-objecten zijn niet beperkt tot read-operaties. Zo kunnen we nieuwe waarden toekennen aan bepaalde properties. In het volgende voorbeeld kennen we een nieuwe waarde toe aan een tekstveld: Hier volgt de code van voorgaand voorbeeld - het gedeelte wat ons interesseert vinden we in de onClick-property van de tweede <input> tag:

<form name="Registreer">
<input type="text" name="naam" value="Naam en Voornaam">
<input type="button" value="Verzenden" 
  onClick="document.Registreer.naam.value= 'Onbekend': ">

In het volgende voorbeeld illustreren we het gebruik van verschillende objecten dmv Javascript.
Laten we eerst even het resultaat bekijken:

Hier volgt de broncode:

<html>
<head>
<title>Cursus Javascript - Objecten</title>

<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function displaytekst() {

  // creer een popup-venster met de
  // tekst die werd ingebracht in het tekstveld

  alert("E-mailadres : " + 
    document.Formulier.Tekst.value);
}

function displaystatus() {

  // deze functie controleert de status van een checkbox

  var Status= "De klant is ";

  // is checkbox checked of niet ?
  if (document.Formulier.Checkbox.checked) Status+= "lid"
    else Status+= "nog geen lid";

     Status+= " van PC Aktief Computerclub"
  // output Status
  alert(Status);
}

// -->
</script>
</head>
<body bgcolor=lightblue>

<form name="Formulier">

E-mailadres :
<input type="text" name="Tekst" value="customer@provider.country " 
SIZE= "25">
<input type="button" name="Knop1" value="Verzenden"
  onClick="displaytekst()">
<br>
<input type="checkbox" name="Checkbox" CHECKED>
Lid PC Aktief Computerclub :
<input type="button" name="Knop2" value="OK"
  onClick="displaystatus()">
</form>

<p><br><br>

<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

document.write("De achtergrondkleur is: ");
document.write(document.bgColor + "<br>");

document.write("De tekst op de tweede knop is: ");
document.write(document.Formulier.Knop2.value);

// -->
</script>

</body>
</html>

Het location-object

Buiten het window- en document-object bestaat er nog een belangrijk object: het location-object. Dit object vertegenwoordigt het adres van ons HTML-document. Indien we bijvoorbeeld de webpagina http://titan.glo.be/~debaerej/pcaktief.htm opladen dan is location.href gelijk aan het adres van die pagina.
Belangrijk hierbij is dat we nieuwe waarden kunnen toekennen aan location.href. Deze knop bijvoorbeeld laadt een nieuwe webpagina in het actieve window:

<form>
<input type=button value="Intrestberekening" 
  onClick="location.href='intrest.htm'; ">
</form>

[vorig hoofdstuk] [inhoud] [volgend hoofdstuk]

Site monitored
by