JavaScript

JavaScript biedt een relatief eenvoudige manier om interactieve elementen aan je site toe te voegen. JavaScript is bedacht door Netscape en heeft niets te maken met Java zoals Sun dat maakt (een C++-achtige programmeertaal). Deze pagina is geen volledige uitleg van JavaScript maar geeft een stel voorbeelden om je op weg te helpen.

Datum en tijd van het document

Met Javascript kun je de datum en tijd waarop een pagina bewerkt is invoegen in het document:

<SCRIPT TYPE="text/javascript">
<!--
document.write("Laatst bijgewerkt: ");
document.write(document.lastModified);
//-->
</SCRIPT>

De datum komt van de datum van het bestand op de webserver. In de praktijk is dat nogal eens de datum waarop je het document voor het laatst op de server hebt gezet.

E-mail adres verbergen

Spammers, de vuilakken die ongewenste e-mail rondsturen, gebruiken speciale software die het hele web afzoekt naar e-mailadressen. Je kunt JavaScript gebruiken om in ieder geval een deel van die software op het verkeerde spoor te zetten:

<SCRIPT TYPE="text/javascript">
<!--
document.write("<A HREF=" + "ma" + "il" + "to" + ":someone" + "@" + "somewhere" + ".com" + ">" + "e-mail" + "</A>")
//-->
</SCRIPT>

Je kunt ook een afbeelding gebruiken als link naar je e-mail adres. Let in dit voorbeeld ook op het gebruik van enkele aanhalingstekens ' en dubbele aanhalingstekens ". In JavaScript kun je enkele aanhalingstekens gebruiken binnen dubbele of omgekeerd. Als je enkele aanhalingstekens gebruikt binnen enkele, of dubbele binnen dubbele, zal je script niet werken.

<SCRIPT TYPE="text/javascript">
<!--
document.write('<A HREF=' + 'ma' + 'il' + 'to' + ':someone' + '@' + 'somewhere' + '.com' + '>' + '<IMG SRC="apple.gif" ALT="Klik om mij mail te sturen" WIDTH="56" HEIGHT="52"><' + '/A>')
//-->

Het principe in beide voorbeelden is heel simpel: het adres wordt in kleine stukjes gehakt in de hoop dat software die e-mailadressen zoekt het dan niet herkend. Een nadeel is dat browsers die geen JavaScript herkennen en gebruikers die JavaScript uitgeschakeld hebben je e-mail adres ook niet kunnen lezen. Er zijn overigens nog betere manieren om je e-mail te verbergen middels PHP.

Informatie over het systeem van de bezoeker

Als je soms werkt op computers met verschillende systeemsoftware zal het je opgevallen zijn dat bijvoorbeeld tekstgrootte behoorlijk kan verschillen op een Windows en een Mac computer. Met JavaScript kunt je informatie krijgen over het platform waarop je pagina bekeken wordt:

<SCRIPT TYPE="text/javascript">
<!--
if ( navigator.platform.substring(0,3).toLowerCase() == 'win')
  document.write('Welkom, windows gebruiker');
else if ( navigator.platform.substring(0,3).toLowerCase() == 'mac')
  document.write('Welkom, Mac gebruiker');
else document.write('Welkom, onbekende gebruiker');
// -->
</SCRIPT>

Het navigator.platform object bevat de naam van de het platform (operating system) van de browser. Met de substring(0,3) methode pak je de eerste drie letters daarvan met met de tolowercase() methode zet je die om in kleine letters. Als het resultaat vervolgens "win" is gaat het om een Windows computer. Is het "mac" dan gebruikt je bezoeker een Apple Mac.

Informatie over de bezoekende browser

Je kunt JavaScript gebruiken om nog meer informatie over de browser van je bezoeker op te halen. Eventueel kun je dat gebruiken om verschillende informatie aan te bieden:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write('navigator.platform: ' + navigator.platform + '<BR>')
document.write('navigator.appVersion: ' + navigator.appVersion + '<BR>')
document.write('navigator.appName: ' + navigator.appName)
// -->
</SCRIPT>

Hiermee kun je dynamische pagina's maken die verschillende informatie aanbieden afhankelijk van browser en platform van de lezer.

Meldingen tonen

Javascript geeft je de mogelijkheid meldingen te tonen. Je kunt een melding laten verschijnen als de muiswijzer over een link schuift:

<A HREF="index.php" onMouseOver="alert('Dit is een link naar de inhoudsopgave')">Inhoudsopgave</A>

Inhoudsopgave

Als je snel genoeg op de link klikt, verschijnt de melding niet. Als je de muiswijzer boven de link houdt verschijnt de melding maar één of twee keer. Overigens kun je het ONMOUSEOVER attribuut ook bij andere elementen gebruiken:

<P ONMOUSEOVER="alert('Dit is Latijnse tekst!')">Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.

Je kunt een melding ook pas laten verschijnen nadat de lezer op een link klikt:

<A HREF="index.php" onClick="if(confirm('Zeker weten?'))this.href='index.php'; else this.href='javascript.php#_alert'">Inhoudsopgave</A>

Inhoudsopgave

Hiermee kun je de lezer dus een keuze voor een link laten bevestigen. Als de lezer op "OK" klikt komt hij in de inhoudsopgave uit, als hij "annuleren" kiest blijft hij in deze pagina. Overigens leidt dat er bij sommige browsers toe dat de pagina opnieuw geladen wordt.

Beginwaarden in formulieren

JavaScript is heel handig om een beginwaarde in een formulier te zetten en die te laten verdwijnen zodra de tekstcursor in dat veld verschijnt.

<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Uw e-mail" onFocus="if(this.value=='Uw e-mail')this.value='';">

Zodra je in het tekstveld klikt, verdwijnt de tekst "Uw e-mail". Dit werkt ook met een TEXTAREA element:

<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Uw suggesties')this.value='';">
Uw suggesties</TEXTAREA>

Je kunt ook de beginwaarde weer terugzetten als de gebruiker niets invult:

<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Uw e-mail" onFocus="if(this.value=='Uw e-mail')this.value='';" onBlur="if(this.value=='')this.value='Uw e-mail';">

In dit voorbeeld kun je zien dat het tekstveld leeg wordt zodra de tekstcursor er in komt. Als je het veld verlaat zonder iets te typen komt de beginwaarde "Uw e-mail" weer terug. Als je iets intikt blijft je eigen tekst staan.

Het zelfde werkt ook voor een TEXTAREA element:

<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Uw suggesties')this.value='';" onBlur="if(this.value=='')this.value='Uw suggesties';">
Uw suggesties
</TEXTAREA>

Het ONBLUR attribuut kun je ook gebruiken om met JavaScript de invoer van de gebruiker te controleren.

Een knop als link

Je kunt een knop als link gebruiken:

<INPUT TYPE="button" onClick="location='index.php'" VALUE="Inhoudsopgave">

Een kind kan de was doen. Het INPUT element heeft een attribuut TYPE="button". Daarnaast is er een ONCLICK attribuut wat een heel klein stukje JavaScript bevat waarmee de browser wordt vertelt naar index.php te gaan.

Een menu als link

Met JavaScript kun je heel makkelijk een pop-up menu maken om van pagina te wisselen:

<SCRIPT TYPE="text/javascript">
<!--

function jump_around() {
  if (document.jumper.choice.value == 1) location = 'index.php';
    else if (document.jumper.choice.value == 2) location = '../index.php';
    else if (document.jumper.choice.value == 3) location = 'http://www.dederdekamer.org/';
}

//-->
</SCRIPT>

<FORM NAME="jumper" ACTION="">
<P><SELECT NAME="choice" ONCHANGE="jump_around();">
<OPTION SELECTED>Kies een hoofdstuk...
<OPTION VALUE="1">Webthings inhoudsopgave
<OPTION VALUE="2">Mijn homepage
<OPTION VALUE="3">Mijn werk
</SELECT></P>
</FORM>

De functie jump_around() in het JavaScript wordt aangeroepen als er een keuze uit het menu gemaakt wordt. Daarvoor zorgt het ONCHANGE="jump_around();" attribuut. In de functie zie je "document.jumper.choice.value". "document" verwijst naar dit document, "jumper" is de naam van het formulier en "choice" van het SELECT element. De value methode haalt vervolgens de waarde van het SELECT element op. Door formulieren en elementen namen te geven met een NAME attribuut kun je er in JavaScript makkelijk naar verwijzen.

Als je deze pagina laadt staat er in het formulier "Kies een hoofdstuk..." omdat dat OPTION element een SELECTED attribuut heeft. Als je die optie kiest gebeurt er niets omdat de functie jump_around() die keuze negeert.

Een menu met een knop

Je kunt het menu ook een bevestigingsknop geven. De lezer moet dan eerste iets kiezen uit de lijst en vervolgens die keuze bevestigen:

<SCRIPT TYPE="text/javascript">
<!--

function jump_around_again() {
  if (document.confirmjump.elements[0].selectedIndex == 0) location = 'index.php';
    else if (document.confirmjump.elements[0].selectedIndex == 1) location = '../index.php';
    else if (document.confirmjump.elements[0].selectedIndex == 2) location = 'http://www.dederdekamer.org/';
}

//-->
</SCRIPT>

<FORM ACTION="" NAME="confirmjump">
<P><SELECT>
<OPTION SELECTED>Webthings inhoudsopgave
<OPTION>Mijn homepage
<OPTION>Mijn werk
</SELECT>
<INPUT TYPE="button" onClick="jump_around_again()" VALUE="Ga!"></P>
</FORM>

Deze gebruikt het zelfde pop-up menu. In dit geval is het niet het SELECT element dat de functie jump_around_again() aanroept maar de knop. Je moet dus een keuze uit het menu maken en dan op de "Ga!" knop klikken. Zo ziet het formulier er uit:

De functie jump_around_again() bekijkt wat er in het menu gekozen is. De functie is bijna identiek aan jump_around() uit het eerdere voorbeeld. Ook hier wordt er naar het formulier verwezen met de naam (confirmjump). Het SELECT element wordt op een andere manier gekozen. Alle invoerelementen binnen een formulier worden genummerd, te beginnen met 0. Daarom kun je naar het SELECT element verwijzen met elements[0]. de selectedindex methode geeft het number van het OPTION element wat is gekozen. Ook daar begint de nummering met nul. Overigens worden ook alle formulieren binnen een pagina genummerd vanaf 0 dus je kunt naar formulieren ook verwijzen met forms[0], forms[1], enz.

Invoer formulieren controleren

Met Javascript kun je op twee manieren invoer in formulieren controleren. Je kunt per element van een formulier een controle inbouwen. Of je kunt het formulier controleren nadat op de submite knop is gedrukt. Hier is een voorbeeld van hoe je op invoer kunt reageren bij een element.

<FORM ACTION="formtester.php" METHOD="post" CLASS="example">
<INPUT TYPE="checkbox" ONCHANGE="javascript:alert('U hebt de status veranderd!')"> Status
</FORM>

Iedere keer als de status van de checkbox verandert, verschijnt het altert. Het kan ook intelligenter, maar daarvoor is iets meer programmeerwerk nodig. Bijvoorbeeld met dit script:

Als je in dit voorbeeld het vinkje aanzet verschijnt de waarschuwing. Als je het uitzet verschijnt de waarschuwing niet.