In de voorbeeldscripts die we tot nu toe gezien hebben, werd de JavaScript code direct uitgevoerd.
Maar wat nu als we de code pas willen laten uitvoeren bijvoorbeeld als de bezoeker eerst een bepaalde actie uitvoert?
Dat kunnen we doen door gebruik te maken van functies in JavaScript.
Bekijk het onderstaande script maar eens.
<html>
<head>
<script language="JavaScript">
<!--
/* hier wordt de functie gedeclareerd, d.w.z. de functie wordt geheel beschreven */
function mijnfunctie()
{
alert("Deze functie is uitgevoerd!");
}
// -->
</script>
</head>
<body>
<form name="mijnformulier">
<input type="button" value="Klik Hier" onClick="mijnfunctie()">
</form>
</body>
</html>
Voer het bovenstaande script maar uit.
Deze functie werd opgeroepen door deze regel:
<input type="button" value="Klik Hier" onClick="mijnfunctie()">
Het onClick in bovenstaande code is een voorbeeld van een event. De events worden afzondelijk behandeld in de volgende les.
De structuur van een functie is als volgt:
function functieNaam(parameters)
{
statements (als laatste statement kan een returnwaarde gegeven worden)
}
Met behulp van de parameters die tussen de ( en ) staan kun je bepaalde waarden vaststellen die in de functie gebruikt zullen worden.
Je kunt meerdere statements opgeven door ze te scheiden met een komma.
Je kunt ook een functie gebruiken zonder parameters. Het voorbeeld in deze les was een voorbeeld daarvan.
De statements in de JavaScript functie staan altijd binnen de gekrulde haakjes: { en }.
Je kunt een functie oproepen door de naam van de functie in te typen en er de eventuele parameters bij te gebruiken. Zie bijvoorbeeld ons voorbeeld hierboven. Daar riepen we de functie in het formulier op met onClick="mijnfunctie()".
Belangrijk om te onthouden is dat de functie-naam case-sensitive is. Dat wil dus zeggen dat functienaam iets anders is dan functieNaam. Let altijd op het gebruik van kleine letters en hoofdletters bij het vaststellen en het oproepen van een bepaalde functie. Dit is een bron van vele fouten in scripts.
Je wilt een functie schrijven die een bepaald bedrag verdeelt over een aantal personen.
De functie moet 'weten': welk bedrag het betreft, en over hoeveel personen dit verdeeld wordt. Dat zijn de parameters, die tussen haakjes achter de functienaam staan.
Het resultaat van de functie wordt 'teruggeven' aan het programma dat de functie aanroept. Dat is de return-waarde, die meestal aan het eind van de functie staat (dus voor het } teken )
Bekijk dit voorbeeld:
<html>
<head>
<script language="JavaScript"><!--
function verdelen( bedrag, aantal)
/* deze functie verdeelt een bedrag over een aantal personen
returnwaarde is het gemiddelde bedrag per persoon */
{
var bedragperpersoon;
bedragperpersoon = bedrag / aantal;
return bedragperpersoon;
}
// -->
</script>
</head><body>
<script language="JavaScript">
<!--
var euro = window.prompt( "Hoeveel euro?", "" );
var personen = window.prompt( "Hoeveel personen?", "");
var voorieder = verdelen( euro, personen ); //hier wordt de functie aangeroepen
document.write ( "Ieder ontvangt " + voorieder + " euro" );
// -->
</script>
</body>
</html>
Voer het bovenstaande script uit in HTML-kit, en test het met enkele getallen.
Zoals elke programmeertaal kent javascript een aantal 'ingebouwde' functies.
Een aantal heb je al gezien, bijv.:
alert ( "....."); //plaatst een boodschap op het scherm
window.prompt ("....", "...."); //vraagt om invoer
window.confirm ("..."); //vraagt om een bevestiging of ontkenning
Maar er zijn er nog veel meer. We noemen er enkele
window.open( "URL", "vensternaam" ) //opent een nieuw venster, en laadt daarin de webpagina URL
document.clear(); //maakt het venster leeg
Math.pow( x , y ); //geeft als returnwaarde x tot de macht y
Math.random(); //geeft als returnwaarde een willekeurig getal tussen 0 en 1
Kijk eens op deze sites voor een overzicht van de standaardfuncties in javascript:
http://www.w3schools.com/js/default.asp (links in het venster onder JS objects)
http://www.sitemasters.be/?pagina=overzicht/overzicht&cat=4 (rechts in het venster onder 'overzicht')
In deze les heb je kennisgemaakt met functies in JavaScript. Ook werden de events al even genoemd in deze les. In de volgende les gaan we de events uitgebreider behandelen.