Leerdoelen
- Je begrijpt het doel van functies
- Je kunt je eigen (custom-maid) functies defineren en deze vervolgens aanroepen
- Je kent de verschillende Events en weet welke elementen dit Event ontvangen
- Je kunt aan het plaatsvinden van een Event een functie koppelen, zodat deze functie wordt uitgevoerd, zodra het Event plaatsvindt
- Je kunt een functie debuggen met Firebug breakpoints te plaatsen
Functies
Functies zijn net als snoepautomaten; ze kunnen dingen voor je doen. Zie het als functionaliteit, sommige zijn al aanwezig in JavaScript andere kunnen we zelf verzinnen en schrijven. Zo kennen we al diverse JavaScript functies: document.write, window.alert enz.
Een functie kan je in Javascript gebruiken om een groep opdrachten te kunnen uitvoeren. Deze groep opdrachten heeft een aangegeven naam en kan meerdere keren worden aangeroepen. De opdrachten of statements die binnen de functie staan worden uitgevoerd wanneer de functie wordt aangeroepen. Een functie kan waarden ontvangen en retourneren naar de plaats van aanroep.
function toonZin(){
document.write('Een zin in een functie.');
}
Het sleutelwoord function wordt gebruikt om een functie aan te maken. Dit woord wordt gevolgd door de naam van de functie, deze naam kan je zelf kiezen. De naam van een functie schrijven we met kleine letters eventueel gebruik makent van camelCase. Na de naam van de functie noteer je een paar ronde haken ( ). Hier kun je evt argumenten noteren (zie Argumenten doorgeven).
De statements worden genoteerd tussen accolades: { }.
In het geval van het snoepautomaat, zou je aan hieraan dingen kunnen vragen. Je zou bijvoorbeeld om snikkers kunnen vragen.
var mijnSnoep = snoepautomaat.geefMijSnikkers();
De snoepautomaat doet het natuurlijk alleen maar als deze het verzoek (de functie) herkent. In het voorbeeld hierboven vraag ik de automaat of hij mij snikkers wil geven. Als de snoepautomaat je de gevraagde snikkers wil geven zou je deze kunnen bewaren in een variabele.
De meeste Snoepautomaten geven je echter geen Snoep cadeau. Je moet er eerst geld in stoppen. Ook bij functies moet je er soms eerst wat in stoppen voordat er wat uit komt. Tussen de haakjes schrijf je de waarde die je aan de functie mee wil geven
var mijnSnoep = snoepautomaat.verkoopSnikkers(1.00);
of de naam van de variabele waar de waarde in zit.
var mijnSnoep = snoepautomaat.verkoopSnikkers(bedrag);
Ook kan het zijn dat je er meer verschillende dingen in moet stoppen.
var mijnSnoep = snoepautomaat.verkoopSnoep(typeSnoep, bedrag);
Als ik zelf de snoepautomaat zou moeten ontwerpen en bouwen, dan moet ik er voor zorgen dat deze de functie herkent, door de functie zelf te schrijven.
Functies schrijven doe je op de zelfde manier als wanneer je een variabele wil declareren. Alleen gebruik je nu niet var maar function. Tussen de accollades schrijf je wat de functie voor je moet doen. Als de functie iets terug moet geven gebruik je het woord return om aan te geven welke variabele moet worden teruggegeven.
function geefMijSnikkers() {
// schrijf hier wat de functie voor je moet den
// return een_snikkers_object;
}
Let op: Zorg ervoor dat de functie helemaal gelezen is voordat je hem aanroept!
Functies aanroepen
Een functie doet niks op zich, de statements binnen de functies worden pas uitgevoerd wanneer de functie wordt aangeroepen.
Volgend voorbeeld toont een aanroep met een functie in een extern js bestand (bovenstaand script opgeslagen als test.js).
<html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <script>toonZin();</script> </body> </html>
Het aanroepen van deze functie gebeurt binnen de body van het document, daar de document.write-opdracht die zal worden uitgevoerd informatie op het zichtbare gebied van de webpagina moet plaatsen.
Argumenten doorgeven
We zorgen ervoor dat we zelf kunnen kiezen welke zin we op het scherm zetten.
Hiervoor doen we twee aanpassingen:
- we geven bij aanroep van de functie een argument mee: de weer te geven zin.
- we zorgen ervoor dat het argument bruikbaar is in de functie door het op te vangen in een variabele. De naam van deze variabele is in dit voorbeeld tekst, deze naam kan je zelf kiezen.
//in test.js
function toonzin(tekst){
document.write(tekst +'<br/>');
}
// in de body van de html
<script type="text/javascript">
<!--<![CDATA[
toonzin("Een eerste zin");
toonzin("Een tweede zin");
toonzin("Nog een zin");
// ]]>-->
</script>
Blz: 33 t/m 36
Events
Events vormen het hart van een Javascript-pagina. Event-handling staat toe dat de Javascript opdrachten op het juiste moment worden uitgevoerd, wanneer de juiste gebeurtenis heeft plaatsgevonden:
Een berekening wordt uitgevoerd wanneer een gebruiker op een knop klikt, een figuur verandert wanneer de gebruiker er met de muis over beweegt, een animatie wordt gestart wanneer de pagina geladen is ...
Hier vind je een overzicht van de belangrijkste events die je met Javascript op een webpagina kan afhandelen.
| Gebeurtenis | Beschrijving | Gebeurtenissen | |
|---|---|---|---|
| Muis | Reageren op muisacties van de gebruiker | click | Klikken |
| mouseover | Muisaanwijzer boven element | ||
| mouseout | Muisaanwijzer verlaat element | ||
| mousedown | Muisknop wordt ingedrukt | ||
| mouseup | Muisknop wordt losgelaten | ||
| dblclick | Dubbelklik | ||
| mousemove | Muisaanwijzer beweegt | ||
| mouseenter | MS mouseover-variant, zonder bubbling | ||
| mouseleave | MS mouseout-variant, zonder bubbling | ||
| Toets | Reageren op toetsaanslagen | keypress | Toets wordt aangeslagen |
| keydown | Toets wordt ingedrukt | ||
| keyup | Toets wordt losgelaten | ||
| Formulieren | Reageren op acties voor een formulier en formulierelementen | submit | Formulier wordt verstuurd |
| reset | Formulier wordt gereset | ||
| Interface | Acties als resultaat van gebruikersacties: vb. wanneer de gebruiker klikt op een formulierelement wordt dit element actief: het krijgt de focus. | focus | Een element krijgt de focus |
| blur | Een element verliest de focus | ||
| load | Een element is geladen | ||
| unload | Een element is niet meer geladen | ||
| resize | De afmetingen van een element worden veranderd | ||
| scroll | Er wordt gescrolld met een element | ||
Nu we een heel aantal events hebben leren kennen moeten we die events ook kunnen afhandelen op onze pagina's.
Algemeen kunnen we stellen dat een event kan worden afgehandeld met een event-handler die als naam het event heeft en een prefix 'on': onmouseover, onmouseout, onload, onfocus, onsubmit, ...
Een eerste manier om events af te handelen is inline-afhandeling. Deze manier van gebeurtenisafhandeling bestaat erin dat een event-handler wordt geplaatst als attribuut in de (X)HTML-tag. Deze manier van werken is de oorspronkelijke manier van gebeurtenisafhandeling en wordt door alle browsers ondersteund.
Een nadeel aan deze manier van werken is dat de event-handlers in de (X)HTML-tag ingebed zijn en je dus een mengeling hebt van logische programmacode in Javascript en inhoud van je document (X)HTML.
Voor grotere toepassingen en voor specifieke taken kan dit vervelend zijn, en moeilijk in onderhoud.
getElementById()
In JavaScript kun je met document.getElementById('id') elk element op een html-pagina benaderen.
Daarvoor geef je het element, in je html-code, een unieke id attribute mee:
<link id="css" ... / >
De css-kenmerken van een element bepaal je in een extern css bestand, bv:
#mijnElement {width:100px; border:1px solid #000000; padding:10px;}
Nu kun je stijlkenmerken van dit element wijzigen dmv de volgende functie:
function aanpassen(dit){
var nieuw=dit.firstChild.nodeValue;
document.getElementById("css").setAttribute("href",(nieuw+".css"));
}
Deze functie kan in een extern js bestand, en de onderstaande code is deel van een html bestand.
<div id="mijnElement"> ... </div> <a href="#" onclick="aanpassen(this); return false">style1</a>
return false zorgt ervoor dat de link niet werkt!
Lezen Blz 58 t/m 65.
Lesopdrachten
1. Probeer het voorbeeld van hierboven verder uit te werken. Maak een aantal totaal verschillende css bstanden met verschillende stylen voor een bepaald html element en gebruik hiervoor events voor het aanroepen van de functie.
De gebruikte functie staat natuurlijk in een extern bestand (evenals de css bestanden).
2. Maak een Image Gallery. Gebruik hiervoor een lijst met linken naar plaatjes en een plaatje ter grote van de plaatjes die je wil laten zien.
Gebruik this om de link waar je op klikt mee te sturen met de functie aanroep. Dit event staat dus als attribute bij het a (link) element;
onclick="laatZien(this); return false;
Haal in de functie het pad naar het plaatje uit de meegestuurde informatie en gebruik deze informatie in het img element.
Als dit lukt, probeer dan ook een dynamische titel te maken bij het plaatje!
Zie Hoofdstuk 4!
Boek
DOM Scripting: Web Design with JavaScript and the Document Object Model, Jeremy Keith
Friends of ED, English, ISBN: 1-59059-533-5
Lezen: Hoofdstuk 4!
Links