Übungsaufgaben zu Eventhandlern

Aufgabe 1 - onclick

Erstellen Sie eine HTML-Seite mit einem Button, welcher dafür sorgt, dass bei Anklicken eine Alertbox geöffnet wird mit der Meldung "Hallo".

Aufgabe 2 - onchange, onblur

Erstellen Sie ein Formular mit einem Textfeld. Sobald sich die Eingabe im Textfeld geändert hat, soll die Eingabe geprüft werden. Der Nutzer der Seite wird bei falscher Eingabe aufgefordert, diese korrekt vorzunehmen.
Was ist genau der Unterschied zwischen onchange und onblur?

Aufgabe 3 - onload

Wenn die HTML-Seite geladen wurde, soll
a) (für Anfänger) eine Funktion aufgerufen werden, welche mit einem Alert ein "Hallo" ausgibt.
b) (für Fortgeschrittene) eine Funktion aufgerufen werden, welche mit document.getElementById("out").innerHTML einen Text einem <div>-Tag erzeugt.

Aufgabe 4 - onmouseover

Sobald ein Bereich der Seite (zu realisieren mit <div>-Tag) mit der Maus überfahren wird, ändert sich zufällig die Farbe des Hintergrunds des Ausgabebereichs.
Hinweis:
  • document.getElementbyId("out").style.backgroundColor="yellow";
    <div onMouseOver="this.bgColor='white';" onMouseOut="this.bgColor='black';">Lalala</div>
    Welche Konsequenzen die Wahl von bgColor, backgroundColor oder einfach nur color hat sollten Sie testen!
  • Für die Farben muss man zusätzlich z.B. noch einen Zufallsgenerator einsetzen
    bzw. ein Konstrukt wie z.B. farben[i++%5]
  • siehe auch:
    http://stackoverflow.com/questions/1874560/how-to-use-javascript-to-change-div-backgroundcolor

Aufgabe 5 - Bildschirmtastatur

Jede Eingabe eines Passworts über die Tastatur kann möglicherweise von einem Keylogger mitgelesen werden. Zu diesem Zweck empfiehlt es sich, das Passwort über andere Wege einzugeben, wie z.B. über das Anklicken von Buttons in einer HTML-Seite. Erstellen Sie ein Programm, welches eine 4-stellige PIN einliest, welche aus den Zahlen 0-9 bestehen kann!

Aufgabe 6 - Drucken

Erläutern Sie, wie das folgende Tag funktioniert!
<span onclick="showPopup()"><img src="/images/icon.png">Drucken</span>
 
Hinweis: Für eigene Realisierungen ggf. nach showElementInPopup und fancybox suchen!