Functies

Net zoals in de meeste programmeertalen kan u in JavaScript code in functies onderbrengen. Een functie is een programmablok waarbinnen alle instructies gezamenlijk worden uitgevoerd.

Een functie kan u vanaf meerdere plaatsen in het document oproepen. Meestal gebeurt dit vanuit een event (click, blur, ...). Desgewenst kan een functie het resultaat retourneren aan de oproeper.

Indien u een bepaalde functie regelmatig oproept vanuit meerdere pagina's binnen de site, kan u deze best in een apart js-bestand onderbrengen. Op deze manier hoeft u de functie maar op één plaats te onderhouden indien er wijzigingen moeten aangebracht worden.

Een functie begint met het sleutelwoord function gevolgd door de naam van de functie met op het einde ronde haakjes. De instructies binnen de functie worden omsloten door accolades.

Een functie kan optioneel één of meerdere parameters of argumenten ontvangen van de instructie die de functie oproept. Deze argumenten staan tussen de haakjes en worden gescheiden door een komma.

function functieNaam(param1,param2,...) {
    // voer instructies uit
    // return = resultaat dat wordt teruggegeven
}

Door de naam van de functie op een event te plaatsen of rechtstreeks binnen de script-tag, wordt de desbetreffende functie uitgevoerd. Onderstaande functie wordt dadelijk uitgevoerd zodra de script-tag is ingelezen.

<body>
    ...
    <script>
        functieNaam(param1,param2,...);
    </script>
    ...
</body>

In onderstaand voorbeeld wordt de functie uitgevoerd bij het click-event op een link en op het blur-event van een input veld.

<body>
    ...
    <a href="#" onClick="functieNaam(param1,param2,...)">...</a>
    <input ... onBlur="functieNaam(param1,param2,...)">
    ...
</body>

★ Open jsIntro/functies.html ★ Bekijk de broncode en test het resultaat in een browser.

Functie zonder parameters

In het eerste voorbeeld wordt de functie toonKnop1() opgeroepen door op de button met id #knop1 te klikken (click-event). Binnen de functie wordt het alertvenster (pop-upvenster) getoond met de boodschap U hebt op knop1 geklikt.

<body>
    ...
    <button class="button" id="knop1" onClick="toonKnop1()">knop 1</button>
    ...
    <script>
        ...
        function toonKnop1() {
            alert("U hebt op knop1 geklikt.");
        }
        ...
    </script>
</body>

Functie met parameters

Stel dat we vanuit meerdere knoppen een pop-upvenster willen activeren, maar telkens met een andere boodschap. Dan kunnen we hier één functie voor schrijven en sturen we een parameter mee. Deze parameter bepaalt wat uiteindelijk de boodschap wordt.

<body>
    ...
    <button class="button" id="knop2" onClick="toonKnopX('knop 2')">knop 2</button>
    <button class="button" id="knop3" onClick="toonKnopX('knop 3')">knop 3</button>
    ...
    <script>
        ...
        function toonKnopX(knop) {
            alert("U hebt op " + knop + " geklikt.");
        }
        ...
    </script>
</body>

Afhankelijk van de geklikte knop wordt de waarde knop2 of knop3 doorgestuurd naar de functie toonKnopX. Deze waarde wordt in de functie als variabele knop doorgegeven en als dusdanig in de alert-string verwerkt.

Functie met return-waarde

In de twee eerste functies gebeurt alles binnen de functie. Soms is het ook interessant dat de functie een aantal bewerkingen uitvoert en het resultaat teruggeeft aan de oproeper. In het volgend voorbeeld gaan we enkele malen de faculteit van een getal berekenen. (Faculteit van 5 = 1x2x3x4x5 = 120)

<body>
    <script>
        function berekenFaculteit(getal) { 
            resultaat = 1;
            for(i=1; i<=getal; i++) { 
                resultaat = resultaat * i;
            }
            return "Faculteit van " + getal + " = " + resultaat;
        }
        ...
    </script>
    <p>
        <script>document.write(berekenFaculteit(2)); </script><br>
        <script>document.write(berekenFaculteit(5)); </script><br>
        <script>document.write(berekenFaculteit(10)); </script>
    </p>
    ...
</body>

Anonieme functie

Een anonieme functie is een functie zonder naam. De functie is meestal gekoppeld aan een variabele of rechtstreeks gekoppeld aan een event.

// functie met naam abc 
function abc() {
    ...
}

// anonieme functie gekoppeld aan variabele abc 
var abc = function() {
    ...
}

Er is in feite geen verschil tussen de eerste en de tweede schrijfwijze. In beide gevallen wordt de functie op dezelfde manier opgeroepen.

<body>
    ...
    <button class="button" id="knop4" onClick="drukKnop('knop 4')">knop 4</button>
    <button class="button" id="knop5" onClick="drukKnop('knop 5')">knop 5</button>
    ...
    <script>
        ...
        var drukKnop = function(knop) {
            alert("U hebt op " + knop + " geklikt.");
        }
        ...
    </script>
</body>
PreviousLussenNextFuncties in jQuery

Last updated