Scripts

In dit onderdeel komen aan de orde Introductie, Elementen, Het SCRIPT element, Verbergen inhoud script, Commentaar in scripts, Extern scriptdocument, Scripts niet ondersteund en Scripts en gebeurtenissen.

Introductie

Een script is programmacode, waarmee je extra mogelijkheden aan je HTML-documenten toe kunt voegen. Bekende voorbeelden zijn het openen van nieuwe browser-vensters, het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk. In tegenstelling tot gewone programma's of bijvoorbeeld Java applets, is een script niet gecompileerd en moet de code direct door de browser geïnterpreteerd worden.

Het SCRIPT element kan worden gebruikt om een script te definiëren. Omdat er meerdere scripttalen bestaan (waarvan JavaScript de bekendste is), moet je de attributen TYPE en LANGUAGE opnemen, om aan de browser kenbaar te maken om welke taal het gaat. Het SRC attribuut gebruik je als het script zich niet in het document zelf bevindt, maar in een extern scriptdocument. Omdat niet elke browser scripts ondersteunt en niet elke gebruiker de ondersteuning voor scripts heeft aanstaan, neem je het NOSCRIPT element op. Je kunt dan aan de gebruiker kenbaar maken wat hij/zij mist.

Scripts kunnen automatisch uitgevoerd worden als de browser ze tegenkomt in het document, maar ook als reactie op een door de gebruiker veroorzaakte gebeurtenis. Bijvoorbeeld het openen of sluiten van een document, het klikken op een hyperlink en muisbewegingen. Je kunt van deze mogelijkheid gebruik maken, door attributen aan elementen toe te voegen, welke reageren op die gebeurtenissen.

Hoewel het programmeren van scripts buiten het bestek van de Handleiding HTML valt, zijn in dit onderdeel toch enkele voorbeelden opgenomen. Daarnaast kunnen in het onderdeel JavaScript voorbeelden een aantal veel gevraagde toepassingen bekeken worden.

Elementen

Voor het opnemen van scripts zijn de volgende elementen beschikbaar:

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

Het SCRIPT element

Het SCRIPT element kun je gebruiken als je een script in het document wilt opnemen, dat door de browser uitgevoerd moet worden. Om aan de browser bekend te maken om welke scripttaal het gaat, bijvoorbeeld JavaScript of VBscript (Visual Basic), moet aan het SCRIPT element minimaal het TYPE attribuut worden toegevoegd. Met dit TYPE attribuut specificeer je het zogenoemde Internet Media (MIME) type van de scripttaal. Voor JavaScript is het MIME type "text/javascript", voor VBScript "text/vbscript".
Omdat lang niet alle gangbare browsers het in HTML 4.0 geïntroduceerde TYPE attribuut reeds ondersteunen, moet je voorlopig in ieder geval ook het LANGUAGE attribuut opnemen. Als waarden voor het LANGUAGE attribuut kunnen bijvoorbeeld "JavaScript" of "VBScript" gebruikt worden. Netscape Navigator 3 en 4 ondersteunen daarnaast de waarde "JavaScript1.1" en Netscape Navigator 4 bovendien de waarde "JavaScript1.2". Met het gebruik van deze laatste waarden moet voorzichtig omgegaan worden, omdat een browser die de waarde niet kent, het script negeert. Zo voeren Microsoft Internet Explorer 3 en Netscape Navigator 2 het script echter niet uit als de waarden JavaScript1.1 of JavaScript1.2 gebruikt zijn en doet Netscape Navigator 3 dit niet als de waarde JavaScript1.2 gebruikt is.
Het SCRIPT element mag meerdere malen in het document voorkomen. Meestal plaats je het in de head, maar soms is het nodig het in de body op te nemen.

Het volgende voorbeeld betreft een JavaScript in de body van het document:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

document.write("<P><FONT SIZE=\"3\" COLOR=\"red\">Deze browser ondersteunt JavaScript.<\/FONT><\/P>");

</SCRIPT>

De backslash in <\/FONT> en <\/P> is een zogenaamd escape teken, dat moet worden toegevoegd, omdat de inhoud van het SCRIPT element als beëindigd wordt beschouwd na de eerste keer dat de tekens "</" voorkomen. Omdat de tekenreeks van de document.write methode geplaatst is tussen dubbele aanhalingstekens, kunnen deze niet gelijktijdig binnen de tekenreeks zelf gebruikt worden. Daarom is ook voor de aanhalingstekens bij de attributen van het FONT element het escape teken geplaatst.
De tekst ingesloten door de haakjes van de document.write methode mag in het document niet onderbroken worden door een harde overgang naar de volgende regel.

Op de plaats waar het script in het document staat, geeft een browser die JavaScript ondersteunt het volgende weer:

Verbergen inhoud script

Om te voorkomen dat browsers die het SCRIPT element niet ondersteunen de inhoud ervan (de script-code) weergeven als tekst, wordt deze meestal tussen de HTML-code voor commentaar (<!--   -->) geplaatst. De beëindiging van het commentaar moet je bij JavaScript door twee slashes (//) en bij VBScript door een enkele quote (') vooraf laten gaan, zodat deze vervolgens binnen het script weer als commentaar wordt gezien (zie bij Commentaar in scripts).

Voor JavaScript wordt de opbouw als volgt:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
... script-code ...
//-->
</SCRIPT>

Voor VBScript is de opbouw de volgende:

<SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript">
<!--
... script-code ...
'-->
</SCRIPT>

Commentaar in scripts

Soms wil je binnen het SCRIPT element commentaar opnemen, bijvoorbeeld om het copyright vermelden, of om de code toe te lichten. Hoe je dat doet, hangt af van de gebruikte scripttaal.

Bij JavaScript heb je de volgende mogelijkheden:

• wanneer je de inhoud van het script hebt verborgen voor browsers die het SCRIPT element niet ondersteunen, kun je direct na de tekens "<!--" commentaar over één regel plaatsen;
• wanneer je het commentaar elders in het script wilt plaatsen en het op de huidige regel past, plaats je voor het commentaar twee slashes (//); als het commentaar niet op de huidige regel past, kun je van deze mogelijkheid alleen gebruik maken, als je het commentaar in kleinere delen splitst;
• wanneer het commentaar doorloopt over meerdere regels, laat je het vooraf gaan door een slash gevolgd door een asterix (/*) en eindigen met een asterix gevolgd door een slash (*/).

In het volgende voorbeeld zijn voor JavaScript de verschillende mogelijkheden te zien:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- Begin verbergen voor oudere browsers
// Dit is commentaar dat op één regel past
/*
Dit commentaar beslaat
meerdere regels
*/
...
// Einde verbergen voor oudere browsers -->
</SCRIPT>

In VBScript laat je commentaar per regel voorafgaan door een enkele quote (').

Extern scriptdocument

Netscape Navigator vanaf versie 3.0, Microsoft Internet Explorer vanaf versie 3.0 en Opera vanaf versie 3.0 ondersteunen de mogelijkheid om een extern scriptdocument te gebruiken. Om aan te geven om welk scriptdocument het gaat, voeg je het SRC attribuut aan het SCRIPT element toe. Bijvoorbeeld:

<SCRIPT SRC="voorbld.js" TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT>

Het externe scriptdocument bevat uitsluitend de code van het script (dus geen <SCRIPT> </SCRIPT>). Omdat Internet Explorer 3 crasht op externe scripts die proberen in het document te schrijven (via document.write), is aangegeven dat het script in het voorbeeld in deze browser niet uigevoerd moet worden.

if (navigator.userAgent.indexOf("MSIE 3") == -1) {
document.write("<P><FONT SIZE=\"3\" COLOR=\"red\">Dit is een voorbeeld van het gebruik van een extern scriptdocument.<\/FONT><\/P>");
}

Op de plaats waar het script in het document staat, geeft een browser die externe scripts ondersteunt het volgende weer:

Scripts niet ondersteund

Niet elke browser ondersteunt het gebruik van scripts. Die ondersteuning wordt wel geboden door Netscape Navigator vanaf versie 2.0, Microsoft Internet Explorer vanaf versie 3.0 en Opera vanaf versie 3.0, maar ook dan nog kunnen bezoekers van je pagina's de ondersteuning uitgezet hebben. Dat betekent dat sommige bezoekers van je pagina's een deel van de inhoud niet zien, of van verschillende mogelijkheden geen gebruik kunnen maken. Je kunt ze daarop wijzen door in de body van het document het NOSCRIPT element op te nemen.

<NOSCRIPT>Uw browser ondersteunt het gebruik van scripts niet ...</NOSCRIPT>

De tekst, die je plaatst tussen de activering en de beëindiging van het NOSCRIPT element, wordt niet weergegeven door Netscape Navigator 3.0 en hoger, Microsoft Internet Explorer 3.0 en hoger en Opera 3.0 en hoger. Browsers die het gebruik van scripts niet ondersteunen, geven de inhoud van het NOSCRIPT element wel weer. Houdt er rekening mee dat Netscape Navigator 2.0 wel JavaScript, maar niet het NOSCRIPT element ondersteunt en de inhoud dus ook weergeeft.

Scripts en gebeurtenissen

De eerder gegeven voorbeelden betreffen scripts welke door de browser uitgevoerd worden, als deze de code tegenkomt in het document. Je kunt echter ook scripts opnemen, welke pas uitgevoerd worden, wanneer zich een bepaalde door de gebruiker veroorzaakte gebeurtenis (event) voordoet. Een voorbeeld van zo'n gebeurtenis is het klikken met de muis op een element: de click gebeurtenis. Andere voorbeelden zijn het schuiven van de muis op een element en er weer vanaf: de gebeurtenissen mouseover en mouseout.

De koppeling van een gebeurtenis aan een element vindt plaats met een event handler: een attribuut, dat de naam draagt van de gebeurtenis, voorafgegaan door "on". De click gebeurtenis bijvoorbeeld kent als event handler onclick.
Een overzicht van de verschillende event handlers is opgenomen in het onderdeel Gebeurtenis-attributen.

De waarde van het gebeurtenis-attribuut betreft script-code, welke verwerkt moet worden als de event handler de bijbehorende gebeurtenis opmerkt.
De activering van een element met een event handler heeft de volgende opbouw:

<Element ongebeurtenis="script-code">

Als script-code wordt soms het complete script opgenomen. Vaak echter gaat het bij de script-code alleen om de naam van een functie, al dan niet voorzien van argumenten, en wordt de functie zelf in een apart script beschreven:

<Element ongebeurtenis="functie_naam(argumenten)">

In het volgende voorbeeld is het onclick attribuut opgenomen voor het A element, met als waarde een compleet JavaScript om een nieuw venster te openen. Als je met de muis op de hyperlink klikt, treedt de click gebeurtenis op en wordt het script uitgevoerd.

<A HREF="script1.htm" TARGET="voorbeeld" onclick="window.open('script1.htm', 'voorbeeld', 'width=280,height=240');return false;">Klik op deze hyperlink</A>

Klik op deze hyperlink

Aan een A element wordt nu het onmouseover attribuut toegevoegd, met als waarde niet het complete script, maar een functie met als argument een bericht. Als je de muis op de hyperlink schuift, treedt de mouseover gebeurtenis op en wordt de functie BeweegMuisOp geactiveerd. Deze functie zorgt ervoor dat het bericht in de statusbalk verschijnt.

<A HREF="js/js-begin" onmouseover="BeweegMuisOp('Volg ... voorbeelden');return true;">Beweeg de muis op de link</A>

Beweeg de muis op de link en bekijk het resultaat in de statusbalk.

Het script in de head van dit document waarin de functie BeweegMuisOp is gedefinieerd, heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function BeweegMuisOp(txt) {
window.status = txt;
setTimeout("erase()",3000);
}

function erase() {
window.status="";
}
//-->
</SCRIPT>

Aan een element kun je meerdere gebeurtenissen koppelen. Als voorbeeld is dat gedaan met de hiervoor gebruikte gebeurtenissen click en mouseover:

<A HREF="script1.htm" TARGET="voorbeeld" onclick="window.open('script1.htm', 'voorbeeld', 'width=280,height=240');return false;" onmouseover="BeweegMuisOp('Bekijk ... venster');return true;">Klik op deze hyperlink</A>

Klik op deze hyperlink

Aan een gebeurtenis kun je meerdere acties koppelen. In het volgende voorbeeld van de load gebeurtenis, welke optreedt als een document geopend wordt, worden twee functies geactiveerd. De eerste zorgt ervoor dat er een bericht in de statusbalk wordt weergegeven, de tweede dat gelijktijdig een document in een ander frame geopend wordt.

<BODY onload="StatusbalkTekst('Copyright 1995-1999 Hans de Jong.');UpdateNavigatieFrame();"> </BODY>

Wanneer je een compleet script als waarde van een gebeurtenis-attribuut opneemt, moet je het META element met de attributen HTTP-EQUIV en CONTENT gebruiken, om aan de browser kenbaar te maken om welke scripttaal het gaat. Je doet dat door bijvoorbeeld de volgende regel in de head van het document te plaatsen:

<META HTTP-EQUIV="content-script-type" CONTENT="text/javascript">

  Inhoud Handleiding HTML   Index   Inhoud scripts

Laatste wijziging 8 oktober 1999
Copyright © 1995-2000 Hans de Jong