Gelukkig is er met Javascript veel meer mogelijk! Zo kun je bijvoorbeeld iets uit laten voeren aan de hand van een actie. Bijvoorbeeld: een gebruiker klikt op een plaatje, waarna er een waarschuwingvenster verschijnt. Of een gebruiker schuift met zijn muis over een plaatje, waarna het plaatje veranderd. Hoe je dit doet gaan we nu bespreken.
Om deze event handlers te bespreken beginnen we met een voorbeeld:
Bijbehorende code:
<img src="plaatje.png" alt="beschrijving" onclick="alert('Je hebt geklikt!');" >
Zoals je kunt zien staat er nu opeens javascript in de img-tag! In dit geval heb je geen script-tag nodig. Alle javascript opdrachten die bij onclick horen worden alleen uitgevoerd als je op het plaatje klikt. (on click betekend in het Nederlands bij het klikken) Uiteraard kun je meerdere opdrachten kwijt, gescheiden door puntkomma's. In dit geval kun je geen document.write gebruiken, omdat de webpagina dan al "af" is.
Je moet alle andere event handlers net zoals onclick gebruiken. Daarom geven we eerst een overzicht, bespreken ze en ik geef een voorbeeld.
| onclick | Gaat in bij het klikken op iets |
| onmouseover | Gaat in als je er met de muis overheen gaat |
| onmouseout | Gaat in als je er met de muis vanaf gaat. |
| onfocus | Gaat in bij het focussen erop (de cursor in een vakje plaatsen bijvoorbeeld) |
| onblur | Gaat in als de focus weggaat (tegenhanger van onfocus) |
| onload | Gaat in bij het laden van de pagina |
| onunload | Gaat in bij het verlaten van de pagina |
Onthoud dat je elke event handler op elk HTML element kunt gebruiken, maar dat het niet overal even handig is.
Met onmouseover kun je een effect bereiken zoals hiernaast.Ga met je muis op het plaatje staan. Er zijn veel leuke dingen mee te doen, maar dat bespreken we later. De code van dit voorbeeld:
<img src="../../../images/tutorials/javascript1.png" alt="beschrijving" onmouseover="alert('Je muis stond op het plaatje!');" />
Met onmouseout kun je een effect bereiken zoals hiernaast gebeurd. Ga met je muis over het plaatje, en ga er weer vanaf. Ook hiernee zijn veel leuke dingen mee te doen, maar dat bespreken we later. De code:
<img src="../../../images/tutorials/javascript1.png" alt="beschrijving" onmouseout="prompt('Hoeveel seconden heb je op het plaatje gestaan met je muis?!');" />
Zet je muis eens in het vak hieronder (of nog beter: ga ernaartoe met dce tab knop op je toetsenbord!) en zie wat er gebeurd! De code:
<input type="text" onfocus="alert('Je hebt gefocust!')" />
Onblur werkt hetzelfde als onfocus, alleen wordt er nu een actie uitgevoerd als de focus weggaat. Probeer het maar met het vak hieronder. De code:
<input type="text" onblur="alert('Ga je alweer weg?')" />
Onload gaat in als iets geladen wordt, en onunload gaat in als er ietrs verl aat. Dit klinkt misscheen een beetje moeilijk, maar dit voorbeeld verhelderd het vast:
<html>
<head>
<title></title>
</head>
<body onload="alert('De pagina wordt geladen...')" onunload="alert('Je verlaat de pagina....')">
Tekst
</body>
</html>
Je kunt hier zien wat er gebeurd. Let erop dat sommige browsers niet goed werken met onunload, omdat die bijna altijd wordt gebruikt voor reclame pop-ups en dus snel doelwit is van een pop-up blocker.
Dit was de 2e javascript tutorial. Je kunt verder naar de 3e.
