Editie 2: Javascript: tutorial

In deze editie ga ik jullie uitleggen hoe event handlers werken en wat je ermee kan. Ook zal ik jullie uitleggen hoe de variables werken.

Event Handlers

Ooit gezien dat je op een link klikt en er openen schermpjes? Of je gaat met je muis over een link en er veranderd iets? Dat is allemaal gedaan met event handlers. In de event handlers kan bv een alert laten oproepen maar ook een functie oproepen je kan er vele kanten mee uit. Ik zal jullie een voorbeeld geven van een link waar je op klikt en waardoor er een alert verschijnt. Daarna zal ik het kort uitleggen.

<a href="#"onClick="alert('Een alert.')">Klik hier</a>

■ We zetten hier een "#" aangezien we niet willen dat je ergens naartoe gaat maar toch is dit verplicht. Inplaats van dat je naar een pagina gaat zal de event handler worden uitgevoerd.

■ De event handler zelf, er zijn er heel wat die ik hieronder in een tabel heb geplaatst.

■ Een voorbeeld van een alert de alert is een functie die Javascript zelf al bevatte. De tekst zet je tussen ' ' of " ".

[table=header]Event Handler | Element | Betekenis

onAbort | image | Als je het laden stopt.

onBlur | select, text, textarea, window | Wanneer een element nog niet "gefocust" dus niet actief of aangeduid.

onChange | selext, text, textarea | Wanneer er iets in het element gewijzigd is.

onClick | Formulier, Link | Als je het element aanklikt.

onDblClick | Formulier, Link | Als je dubbelklikt op het element.

onDragDrop | window | Als een element word verplaatst.

onError | image, window | Als er een error optreed bij het laden van het element.

onFocus | select, text, textarea, window | Als het element "gefocust" is dus echt actief.

onKeyDown | document, image link, text, textarea | Wanneer je een toets indrukt.

onKeyPress | document, image link, text, textarea | Wanneer je een toets ingedrukt houd.

onKeyDown | document, image link, text, textarea | Wanneer je een toets loslaat.

onLoad | document, frame, window | Als het element geladen is.

onMouseDown | button, document, link | Wanneer je met de muis klikt.

onMouseMove | window | Wanneer je de muis beweegt.

onMouseLeave | area, link | Wanneer je een element met de muis verlaat.

onMouseOver | area, link | Wanneer je met je muis over het element gaat.

onMouseUp | button, document, link | Als je de muistoets loslaat.

onMove | frame, window | Als het element word verplaatst.

onReset | formulier | Als het element word gereset.

onResize | frame, window | Als de grootte van het element aangepast word.

onSelect | text, textarea | Als je het element geselecteerd hebt.

onSubmit | formulier | Als je een formulier "verzend".

onUnload | document, frame, window | Als het element terug unload.[/table]

Variables

Nu zal ik het nog kort hebben over variables later zal ik hier nog verder in gaan maar ik leg hier kort uit hoe je moet een variable omgaat. In een variable kan je iets opslaan of het nu tekst is of een integer en deze later weer ophalen. Een variable maak je simpelweg aan met "var" en daarachter de variablenaam. Indien je al een waarde wil meegeven zoals een tekst dan gebruik je "=" en daarachter de tekst tussen " ". Je sluit dit af met een ";" hoe je een variable ophaalt en wat je er nog mee kan leg ik uit in de volgende editie.

Tot de volgende editie.