5. Unterrichtsblock

JavaScript Logo

Kursinhalte

Events (Ereignisse)

HTML-Events sind „Ereignisse“, die mit HTML-Elementen passieren. Wenn JavaScript in HTML-Seiten verwendet wird, kann JavaScript auf diese Ereignisse „reagieren“.

Ein HTML-Ereignis kann etwas sein, das der Browser oder ein Benutzer tut.
Hier sind einige Beispiele für HTML-Ereignisse:

  • Eine HTML-Webseite wurde vollständig geladen
  • Ein HTML-Eingabefeld wurde geändert
  • Es wurde auf eine HTML-Schaltfläche geklickt

Oft möchten Sie etwas tun, wenn Ereignisse eintreten. Mit JavaScript können Sie Code ausführen, wenn Ereignisse erkannt werden. HTML ermöglicht das Hinzufügen von Event-Handler-Attributen mit JavaScript-Code zu HTML-Elementen.

Beispiel

Maus über mich
Klick mich
<!-- SYNTAX -->

<element event='ein JavaScript'>

<!-- BEISPIEL-->
<button onclick="document.getElementById('demo').innerHTML = Date()">Wie spät ist es?</button>

Im obigen Beispiel ändert der JavaScript-Code den Inhalt des Elements mit id=“demo“.
Im nächsten Beispiel ändert der Code den Inhalt seines eigenen Elements (unter Verwendung von this.innerHTML):

<button onclick="this.innerHTML = Date()">Wie spät ist es?</button>

<!--
  JavaScript-Code ist oft mehrere Zeilen lang. Es kommt daher häufiger vor,
  dass Ereignisattribute Funktionen aufrufen:
-->
<button onclick="zeigeUhrzeit()">Wie spät ist es?</button> 

<script>
function zeigeUhrzeit() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

Beispiel „onclick“

Klicke auf den Text!

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Servus!'">Klicke auf den Text!</h1>

</body>
</html>

Beispiel HTML ändern

Hier wird einem Button per JavaScript eine Funktion hinzugefügt. 

<!--
    Der Button selbst hat noch keine Funktion und auch kein Event.
    Über die "id" wird dem Button eine Funktion hinzugefügt.
-->

<button id="meinButton">Klick mich</button>

<p id="demo1"></p>

<script>
document.getElementById("meinButton").onclick = zeigeDatum;

function zeigeDatum() {
  document.getElementById("demo1").innerHTML = Date();
}
</script>

</body>
</html>

Aufgabe

Erstelle eine Schrift „Hallo Welt“, welche durch Klick auf einen Button geändert wird in „Hallo schöne Welt“.

  • Die Funktion soll über das onclick-Event ausgelöst werden
  • Das Event darf jedoch nicht als Attribut im Button-Element hinterlegt werden, sondern soll wie in o.g. Beispiel hinzugefügt werden.

Häufige HTML-Events

Unten gezeigte Events sind nur die am häufigst verwendeten. Die Liste aller Events ist viel länger und hier zu finden: https://www.w3schools.com/jsref/dom_obj_event.asp

EventBeschreibung
onchangeEin HTML-Element wurde geändert
onclickDer Nutzer klickt auf ein HTML-Element
onmouseoverDer Nutzer fährt mit der Maus über ein HTML-Element
onmouseoutDer Nutzer fährt mit der Maus aus einem HTML-Element heraus
onkeydownDer Nutzer drückt eine Taste auf der Tastatur
onloadDer Browser hat die Seite vollständig geladen

JavaScript-Event-Listener

  • Die Methode addEventListener() fügt einen Event-Handler an das angegebene Element an.
  • Die Methode addEventListener() fügt einen Event-Handler an ein Element an, ohne vorhandene Event-Handler zu überschreiben.
  • Man kann einem Element mehrere Event-Handler hinzufügen.
  • Man kann einem Element viele Event-Handler des gleichen Typs hinzufügen, d. h. zwei „click“-Events.
  • Man kann Event-Listener zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen. d.h. auch das „window-object“.
  • Die Methode addEventListener() erleichtert die Steuerung der Reaktion des Ereignisses auf „bubbling“.
  • Bei Verwendung der addEventListener()-Methode wird das JavaScript vom HTML-Markup getrennt, um die Lesbarkeit zu verbessern, und man kann Event-Listener hinzufügen, selbst wenn man das HTML-Markup nicht steuert.
  • Man kann einen Event-Listener einfach entfernen, indem man Methode removeEventListener() verwendet.

Syntax

element.addEventListener(event, function, useCapture);
  • Der erste Parameter ist der Typ des Ereignisses (wie „click“ oder „mousedown“ oder irgendein anderes HTML-DOM-Ereignis.)
  • Der zweite Parameter ist die Funktion, die wir aufrufen möchten, wenn das Ereignis eintritt.
  • Der dritte Parameter ist ein boolescher Wert, der angibt, ob Event-Bubbling oder eine Ereigniserfassung verwendet werden soll. Dieser Parameter ist optional.

Merke: Das Präfix „on“ wird für nicht für Events über die addEventListener() Methode verwendet; Man verwendet „click“ anstelle von „onclick„.

Beispiel

<!--
    In diesem Beispiel wird der Event-Handler "click" mit einer anschließenden Funktion
    durch die addEventListener() Methode hinzugefügt.
-->

<button id="myBtn">Klick mich!</button>

<p id="demo2"></p>

<script>
document.getElementById("myBtn").addEventListener("click", zeigeDatum);

function zeigeDatum() {
  document.getElementById("demo2").innerHTML = Date();
}
</script>

JavaScript-Event-Handler (Ereignisverarbeiter)

Event-Handler sind ein anderes Wort für „Event inkl. Aktion / Funktion“ und können verwendet werden, um Benutzereingaben, Benutzeraktionen und Browseraktionen zu verarbeiten und zu überprüfen:

  • Dinge, die jedes Mal ausgeführt werden sollten, wenn eine Seite geladen wird
  • Dinge, die getan werden sollten, wenn die Seite geschlossen wird
  • Aktion, die ausgeführt werden soll, wenn ein Benutzer auf eine Schaltfläche klickt
  • Inhalt, der überprüft werden sollte, wenn ein Benutzer Daten eingibt
  • u.s.w. …

Viele verschiedene Methoden können verwendet werden, um JavaScript mit Ereignissen arbeiten zu lassen:

  • HTML-Ereignisattribute können JavaScript-Code direkt ausführen
  • HTML-Ereignisattribute können JavaScript-Funktionen aufrufen
  • Sie können HTML-Elementen eigene Event-Handler-Funktionen zuweisen
  • Sie können verhindern, dass Ereignisse gesendet oder verarbeitet werden
  • u.s.w. …

Beispiel mit verschiedenen Event-Handlern

In folgendem Beispiel wird einem Button-Element mehrere Event-Handler mit der Methode addEventListener() hinzugefügt

<button id="myButton">Try it</button>

<p id="demo4"></p>

<script>
var x = document.getElementById("myButton");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo4").innerHTML += "Überflieger!<br>";
}

function mySecondFunction() {
  document.getElementById("demo4").innerHTML += "Geklickt!<br>";
}

function myThirdFunction() {
  document.getElementById("demo4").innerHTML += "Rausgeflogen!<br>";
}
</script>

Beispiel mit zwei gleichen Event-Handlern

In nachfolgendem Beispiel werden zwei gleiche Events mit einem Klick ausgeführt

<!--
    Der Variable x wird eine Methode zur Identifikation des Buttons zugewiesen
    Im nächsten Schritt erhält x über die Methode addEventListener() zwei Event-Handler
-->

<button id="meinBtn">Klick mich</button>

<script>
var x = document.getElementById("meinBtn");
x.addEventListener("click", meineFnktn);
x.addEventListener("click", eineAndereFunktion);

function meineFnktn() {
  alert ("Servus!");
}

function eineAndereFunktion() {
  alert ("Diese Funktion wurde auch noch ausgeführt!");
}
</script>

Aufgabe

Erstelle eine rote Fläche mit weißer Schrift, welche bei Klick auf einen Button die Farbe blau erhält. Zusätzlich soll ein Alert erscheinen, der über die ausgeführte Änderung informiert.

  • Verwende hierfür die Methode addEventListener()

Boolesche Werte

Ein JavaScript-Boolean repräsentiert einen von zwei Werten: wahr oder falsch.

Sehr oft benötigt man beim Programmieren einen Datentyp, der nur einen von zwei Werten haben kann, wie z.B.

  • JA / NEIN
  • AN / AUS
  • WAHR / FALSCH

Dafür hat JavaScript einen booleschen Datentyp. Es kann nur die Werte true oder false annehmen.

Die Boolean()-Funktion

Man kann die Funktion Boolean() verwenden, um herauszufinden, ob ein Ausdruck (oder eine Variable) wahr ist:

Boolean(10 > 9)

Es geht auch einfacher:

(10 > 9)
10 > 9

Aufgabe

Lasse den o.g. Wert ausgeben. Versuche mehrere andere Vergleichsoperatoren, um ein Gefühl für die Funktion zu bekommen

Vergleiche und Bedingungen

Boolesche Werte werden oft für Bedingungen verwendet.

Hier sind einige Beispiele:

OperatorBeschreibungBeispiel
==ist gleichif (tag == „Montag“)
>größer alsif (bezahlung > 9000)
<kleiner alsif (alter < 18)

Merke: Der boolesche Wert eines Ausdrucks ist die Grundlage für alle JavaScript-Vergleiche und -Bedingungen.

Alles mit einem Wert ist „wahr“

<!--
    Folgende Aussagen bekommen den booleschen Wert "wahr"
-->
<p id="demo5"></p>

<script>
document.getElementById("demo").innerHTML =
"100 ist " + Boolean(100) + "<br>" +
"3.14 ist " + Boolean(3.14) + "<br>" +
"-15 ist " + Boolean(-15) + "<br>" +
"Irgendeine (nicht leere) Zeichenkette ist " + Boolean("Hallo") + "<br>" +
"Sogar der String 'false' ist " + Boolean('false') + "<br>" +
"Jede Aussage (außer null) ist " + Boolean(1 + 7 + 3.14);
</script>

Alles ohne Wert ist „falsch“

// Der boolesche Wert 0 ist falsch
let x = 0;
Boolean(x);


// Der boolesche Wert -0 ist falsch
let y = -0;
Boolean(y);


// Der boolesche Wert von "" (leeren Strings) ist falsch
let z = "";
Boolean(z);


// Der boolesche Wert von "undefined" ist falsch
let a;
Boolean(a);


// Der boolesche Wert von "null" ist falsch
let b = null;
Boolean(b);


// Der boolesche Wert von "false" ist falsch
let c = false;
Boolean(c);


// Der boolesche Wert von "NaN" (Not a Number) ist falsch
let d = 10 / "Hallo";
Boolean(d);

Aufgabe

Lasse die o.g. Werte ausgeben. Versuche mehrere andere Vergleichsoperatoren, um ein Gefühl für die booleschen Werte zu bekommen

Bedingte Anweisungen (if / else / else if)

Merke: Bedingte Anweisungen werden verwendet, um verschiedene Aktionen basierend auf verschiedenen Bedingungen auszuführen.

Sehr oft möchte man beim Schreiben von Code unterschiedliche Aktionen für unterschiedliche Entscheidungen ausführen.

Dazu kann man bedingte Anweisungen im Code verwenden. In JavaScript gibt es die folgenden bedingten Anweisungen:

  • Man verwendet if, um einen Codeblock anzugeben, der ausgeführt werden soll, wenn eine bestimmte Bedingung wahr ist
  • Man verwendet else, um einen Codeblock anzugeben, der ausgeführt werden soll, wenn dieselbe Bedingung falsch ist
  • Man verwendet else if, um eine neue zu testende Bedingung anzugeben, wenn die erste Bedingung falsch ist
  • Man verwendet switch, um viele alternative Codeblöcke anzugeben, die ausgeführt werden sollen

Die if-Anweisung

Die if-Anweisung wird verwendet, um einen JavaScript-Codeblock anzugeben, der ausgeführt werden soll, wenn eine Bedingung wahr ist.

// SYNTAX
if (Bedingung) {
  //  Block oder Code, der ausgeführt wird, wenn die Bedingung wahr ist
}

Merke: if wird kleingeschrieben. IF oder If wird einen Fehler produzieren

Beispiel

<p id="demo">Guten Abend!</p>

<script>
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = "Guten Tag!";
}
</script>

Aufgabe

Baue o.g. Script nach und probiere verschiedene Stundenwerte aus.

Die else-Anweisung

Man verwendet die else-Anweisung, um einen Codeblock anzugeben, der ausgeführt werden soll, wenn die Bedingung falsch ist.

// SYNTAX
if (Bedingung) {
  //  Block oder Code, der ausgeführt wird, wenn die Bedingung wahr ist
} else {
  //  Block oder Code, der ausgeführt wird, wenn die Bedingung falsch ist
}

Beispiel

<p id="demo"></p>

<script>
const hour = new Date().getHours(); 
let gruss;

if (hour < 18) {
  gruss = "Guten Tag";
} else {
  gruss = "Guten Abend";
}

document.getElementById("demo").innerHTML = gruss;
</script>

Aufgabe

Baue o.g. Script nach und probiere verschiedene Antworten und Stundenwerte aus.

Die else if-Anweisung

Man verwendet die else if-Anweisung, um eine neue Bedingung anzugeben, wenn die erste Bedingung falsch ist.

// SYNTAX
if (Bedingung1) {
  //  Block oder Code, der ausgeführt wird, wenn die 1. Bedingung wahr ist
} else if (Bedingung2) {
  // Block oder Code, der ausgeführt wird, wenn die 1. Bedingung flasch ist und die 2. Bedingung wahr ist
} else {
  //  Block oder Code, der ausgeführt wird, wenn die 1. Bedingung und die 2. Bedingung falsch ist
}

Beispiel:

Wenn die Uhrzeit unter 10:00 Uhr liegt, erstellen Sie eine „Guten Morgen“-Begrüßung, wenn nicht, aber die Uhrzeit unter 20:00 Uhr liegt, erstellen Sie eine „Guten Tag“-Begrüßung, ansonsten einen „Guten Abend“:

<p id="demo"></p>

<script>

const time = new Date().getHours();

let gruss;

if (time < 10) {
  gruss = "Guten Morgen";
} else if (time < 20) {
  gruss = "Guten Tag";
} else {
  gruss = "Guten Abend";
}
document.getElementById("demo").innerHTML = gruss;

</script>

Aufgabe

Baue o.g. Script nach und probiere verschiedene Antworten und Stundenwerte aus.

Übungsaufgaben

  • Versuche o.g. Lektionen mit Arrays und Objekten zu kombinieren
  • Schreibe z.B. eine if-else if-else Anweisung für Werte in einem Array, welche durch ein Event ausgelöst wird

Lösungen

5-unterricht.html