In deze les gaan we kijken naar twee belangrijke concepten in JavaScript:
Functiedeclaratie – Hoe je een herbruikbaar stuk code maakt dat je later kunt aanroepen.
Event Listener – Hoe je een functie aanroept wanneer een gebruiker op een knop klikt.

We gebruiken een eenvoudig script waarin een gebruiker iets in een tekstveld typt en dat na een klik op de knop wordt weergegeven op de pagina.

De functiedeclaratie: Wat gebeurt hier?

Op regel 1 van het script wordt een functie gedeclareerd.
De functie heet geklikt.
De functie ontvangt een parameter (invoer), wat betekent dat er een waarde wordt meegegeven bij het aanroepen van de functie.
Binnen de functie wordt met jQuery ($(“#resultaat”)) de HTML van een element met id=”resultaat” aangepast.
De tekst “Je hebt [invoer] getypt!” wordt weergegeven in een <p>-element.

Waarom gebruiken we een functie?

Dit zorgt ervoor dat we herbruikbare code hebben. We kunnen de functie meerdere keren aanroepen zonder dezelfde code te herhalen.

De event listener click-event op de knop

Op regel 6 voegen we een event listener toe aan de knop met id=”btListner”.
Dit betekent: wanneer iemand op de knop klikt, wordt de functie binnen de click() uitgevoerd.

Wat gebeurt er binnen de event listener?

De waarde uit $(“#textInput”) wordt opgeslagen in variabele invoer.

In een if-statement wordt gecontroleerd of er iets is ingevoerd.

• Als invoer leeg is, gebeurt er niets.
• Als invoer wél een waarde heeft, wordt de functie geklikt aangeroepen.

In de regel geklikt(invoer); roepen we de functie geklikt aan. De waarde van invoer wordt als parameter doorgegeven aan de functie.

In de functie wordt dit opgevangen door de parameter invoer, en verwerkt in de output.