Ein Kernelement vieler Webapplikationen ist ja Interaktivität: Die Programmierung reagiert dabei auf Aktionen des Nutzers, etwa auf einen Klick auf einen Button (oder ein Tap auf einem mobilen Browser) oder auf die Eingabe eines Buchstabens per Tastatur. Diese Vorkommnisse, auf die der Browser reagieren soll, werden auch Events genannt. Um innerhalb der Programmierung auf Events reagieren zu können, kann man JavaScript dazu bringen, auf bestimmte Events zu hören. Abgeleitet vom Englischen bezeichnet man diese Anweisungen als EventListener. Um einen EventListener zu verwenden, muss man ihn einem bestimmten Element innerhalb des Browsers oder der HTML-Struktur zuweisen. Die Gesamtheit aller Knoten innerhalb der hierarchischen HTML-Struktur wird, wie schon vorher erwähnt, als DOM bezeichnet (Document Object Model). Wenn wir also per JavaScript darauf reagieren wollen, wenn der Nutzer auf einen bestimmten Button klickt, müssen wir diesen im DOM selektieren (finden) und ihm den EventListener für einen Klick zuweisen. Genau das werden wir jetzt machen: Wir erstellen einen Button und öffnen die Box mit der Uhr erst wenn der Nutzer auf diesen Button klickt oder tippt. Mit einem zweiten Button kann man die Uhr auch wieder ausblenden.
Zunächst erstellen wir also die Buttons, wir verwenden dazu den <button>-Tag, da dieser ohne viel Aufwand die Schaltflächen erzeugt. Um die Buttons per JavaScript selektieren zu können, vergeben wir jeweils wieder eine ID.
<body>
<button id="uhrher">Uhrzeit anzeigen</button>
<button id="uhrweg">Uhrzeit ausblenden</button>
<div id="uhr">
<div id="gruss"></div>
<div id="uhrzeit"></div>
</div>
</body>
Dann sollten wir die Uhr zunächst ausblenden, damit wir sie tatsächlich erst per Klick/Tap anzeigen können. So etwas lässt sich recht leicht über eine CSS-Deklaration erreichen. Wir fügen der Regel für den <div>-Container mit der ID "uhr" Folgendes hinzu: display:none;
Um die Uhr wieder anzeigen zu können, verwenden wir eine Klasse "aktiv", die wir dann per Skript hinzufügen und entfernen können. Auch diese Klasse nehmen wir schon in das Stylesheet auf. Wenn der Container mit der ID "uhr" zusätzlich die Klasse "aktiv" erhält, setzen wir die Eigenschaft display wieder auf den Wert block mit der Deklaration display:block;
Achtung: Ein CSS-Selektor für ein Element, das gleichzeitig eine ID und eine Klasse trägt, wird so formuliert: #IDname.klassenname
<style>
#uhr {
border: 1px solid #222;
position: fixed;
top: 10px;
right: 0;
display:none;
}
#uhr.aktiv {
display:block;
}
// ...
</style>
Wir checken die Änderung kurz im Browser. Wir haben nun zwei Buttons und keine sichtbare Uhr mehr, aber die Buttons funktionieren natürlich noch nicht. Das ist logisch, da wir noch keine Events abfragen. Um dem ersten Button einen EventListener zuweisen zu können, müssen wir ihn erst per ID und JavaScript selektieren: document.getElementById("uhrher");
Per Dot-Syntax hängen wir an diesen Selektor die Funktion addEventListener() an. Dies Funktion erwartet maximal drei Parameter, die ersten beiden sind für uns hier relevant: Als erstes übergeben wird die Art des Events, nach dem "gehorcht" werden soll. Im Fall unseres Buttons ist dies "click". Danach folgt die Funktion, die ausgeführt werden soll, wenn der Event auftritt. Wir erstellen für unser Beispiel eine entspreche Funktion zeigeuhr, die wir hier angeben können:
<script>
//EventListener auf Button 1 anwenden
document.getElementById("uhrher").addEventListener("click", zeigeuhr);
function zeigeuhr() {
//Uhr einblenden
}
//.. weiter mit bisherigem Skript
</script>
Wenn also auf den Button mit der ID "urher" geklickt wird, wird die Funktion "zeigeuhr" aufgerufen. Nun müssen wir uns noch darum kümmern, was in dieser Funktion passieren muss. Wir wollen innerhalb dieser Funktion dem (versteckten) <div> mit der Klasse "uhr" eine zweite Klasse "aktiv" zuweisen und ihn damit anzeigen. Einem Element zur Laufzeit mit JavaScript eine Klasse zu "verpassen" ist eine häufige Anforderung von Webapplikationen. Auch hier müssen wir zunächst das Zielelement (<div> mit der Klasse "uhr") selektieren:
document.getElementById("uhr");
Nun brauchen wir eine Funktion, die dem selektierten Element eine Klasse zuweist. Diese Funktion heißt setAttribute und sie erwartet (in Klammern) zwei Parameter: 1. den Namen der Eigenschaft und 2. den Wert der Eigenschaft. In unserem Fall brauchen wir die Eigenschaft "class" und den Namen der Klasse "aktiv". Dies ergibt für den neuen Abschnitt des Skripts:
<script>
//EventListener auf Button 1 anwenden
document.getElementById("uhrher").addEventListener("click", zeigeuhr);
function zeigeuhr() {
//Uhr einblenden
document.getElementById("uhr").setAttribute("class", "aktiv");
}
//.. weiter mit bisherigem Skript
</script>
Nun sollte der erste Button seine Aufgabe erfüllen, rufen Sie den aktuellen Stand auf, um sich davon zu überzeugen. Nun müssen wir noch den zweiten Button aktivieren, der die Uhr ausblendet. Die Aufgabenstellung ist dabei sehr ähnlich, wir müssen auf Klick die Klasse "aktiv" entfernen, dafür eignet sich die Funktion removeAttribute, der wir nur die zu entfernende Eigenschaft "class" als Parameter übergeben müssen:
<script>
//EventListener auf Button 1 anwenden
document.getElementById("uhrher").addEventListener("click", zeigeuhr);
document.getElementById("uhrweg").addEventListener("click", versteckeuhr);
function zeigeuhr() {
//Uhr einblenden
document.getElementById("uhr").setAttribute("class", "aktiv");
}
function versteckeuhr() {
//Uhr ausblenden
document.getElementById("uhr").removeAttribute("class");
}
//.. weiter mit bisherigem Skript
</script>
Wir testen wieder das Skript und haben nun erfolgreich unsere erste Interaktion hinzugefügt. Der komplette Markup sieht nun so aus:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
<style>
#uhr {
border: 1px solid #222;
position: fixed;
top: 10px;
right: 0;
display:none;
}
#uhr.aktiv {
display:block;
}
#gruss, #uhrzeit {
background-color: #dddddd;
width: 140px;
padding: 10px 0;
font-family: arial, sans-serif;
font-size: 16px;
text-align: center;
}
#uhrzeit {
background-color: #bbbbbb;
}
</style>
</head>
<body>
<button id="uhrher">Uhrzeit anzeigen</button>
<button id="uhrweg">Uhrzeit ausblenden</button>
<div id="uhr">
<div id="gruss"></div>
<div id="uhrzeit"></div>
</div>
<script>
//Eventlistener auf Button 1 anwenden
document.getElementById("uhrher").addEventListener("click", zeigeuhr);
document.getElementById("uhrweg").addEventListener("click", versteckeuhr);
function zeigeuhr() {
//Uhr einblenden
document.getElementById("uhr").setAttribute("class", "aktiv");
}
function versteckeuhr() {
//Uhr ausblenden
document.getElementById("uhr").removeAttribute("class");
}
//Funktion "uhrzeitanzeige" einmalig sofort aufrufen
uhrzeitanzeige();
//Jede Sekunde die Funktion "uhrzeitanzeige" aufrufen
setInterval(uhrzeitanzeige, 1000);
function uhrzeitanzeige() {
//Funktion gibt die Uhrzeit aus
//Uhrzeit anhand des Datums-Objektes auslesen
var datum = new Date();
var stunden = datum.getHours();
var minuten = datum.getMinutes();
var sekunden = datum.getSeconds();
//if-Anweisung für unterschiedliche Begrüßung
if(stunden > 4 && stunden < 11) {
var gruss = "Guten Morgen.";
} else if (stunden > 10 && stunden < 17) {
var gruss = "Guten Tag.";
} else if (stunden > 16 && stunden < 22) {
var gruss = "Guten Abend.";
} else {
var gruss = "Gute Nacht.";
}
//Einstellige Stunden- und Minutenwerte umformen
if(stunden < 10) {
stunden = "0" + stunden;
}
if(minuten < 10) {
minuten = "0" + minuten;
}
if(sekunden < 10) {
sekunden = "0" + sekunden;
}
//Ausgabetext generieren
document.getElementById("gruss").innerHTML=gruss;
document.getElementById("uhrzeit").innerHTML=stunden+":"+minuten+":"+sekunden;
} //function uhranzeige ende
</script>
</body>
</html>
Events/EventListeners und die dadurch möglichen Interaktionen sind zentrale Elemente vieler JavaScript-Anwendungen. Neben dem hier verwendeten "click"-Event gibt es noch einige weitere, die unterschiedlichste Anforderungen von Interaktionen abdecken.
Nachdem wir nun die wichtigsten Grundlagen der Programmierung in JavaScript in kleinen Schritten erlernt haben, können wir diese in weiteren Beispielen anwenden und vertiefen.
> weiter