JavaScript 1 Fehlerbehandlung
Fehlerbehandlung
The debugger is your friend
Alle modernen Browser stellen ausgezeichnete Entwickler Tools zu Verfügung.
- Öffnen der Entwickler Tools (in den gängigen Browsern):
- Right-Click und auf Untersuchen klicken, Keyboard Shortcut: STRG+Shift+I
- Hier ein gutes Video zum JavaScript Debugging in Chrome
Try, Catch
Ausnahmen für Laufzeitfehler erstellen:
- Im try-Block versucht das Programm die gewünschte Aktion auszuführen
- Ein try-Block darf niemals allein stehen. Es muss sich ein catch-Block anschließen
- Bei Laufzeitfehler, erzeugt JavaScript automatisch ein "Error" Objekt, das Details zum auftretenden Problem enthält (siehe 2. catch-Block im Beispiel unten:)
"use strict";
let a = 1.123456789123456789123456789;
let x = prompt("Wie viele Stellen sollen angezeigt werden?");
try {
// reduziert die Anzahl der Nachkommastellen auf die Zahl
// die der User eingibt
let b = a.toPrecision(x);
document.write("Wert mit der gewünschten Präzision: " + b + "<br>");
}
catch {
alert("Gib einen Wert zwischen 1 und 100 ein!");
}
document.write("Weitere Inhalte");
//Alternative für catch Block
//Mit err kann auf das Fehler-Objekt zugegriffen werden, Attribute name ist die Bezeichnung des Fehlers
//Attribut message ist die Fehlermeldung
catch(err) {
alert(err.name);
alert(err.message);
}
console.log() is your friend
- Gibt eine Nachricht auf der Web-Konsole aus.
- ist äußerst hilfreich beim Debugging
- Vorteil zu alert: JavaScript Programm kann ohne Pausieren weiterlaufen (beim alert() Befehl stoppt das Programm)
Beispiele für console.log():
let test = "Hallo";
console.log(test);
let obst = ["Apfel", "Banane", "Kiwi"];
console.log(obst);
console.log(obst[1]);
let zahl = 10;
console.log(`Meine Lieblingszahl ist ${zahl}`);
JavaScript und der Webbrowser
- JavaScript Events bieten die Möglichkeit auf Aktionen, die User im Browser durchführen, zu reagieren
- Wenn Anwender bestimmte Aktion durchführt, löst der Browser entsprechendes Event aus.
Browser-Object-Modell BOM
- Dient dazu, die grundlegenden Eigenschaften des Browsers zu steuern
- wird auch als Window-Objekt bezeichnet -> bezieht sich auf das Browser-Fenster
- alle globalen Objekte, Funktionen und Variablen sind teil des Window-Objektes
- auch das DOM (Document Object) ist eine Property des Window-Objektes
- Verfügt über grundlegende Eigenschaften des Fensters
- Fenstergröße festlegen (window.innerHeight, window.innerWidth)
- Ein Fenster öffnen window.open()
- Ein Fenster schließen window.close()
- Ein Fenster verschieben window.moveTo()
- Die Fenstergröße verändern window.resizeTo()
- alert()- und prompt()-Befehl gehören zum window-Objekt
- window-Objekt muss nicht ausdrücklich im Programm genannt werden (alert() ist eigentlich window.alert())
Liste der wichtigsten Browser-Events
- click: Klick auf ein beliebiges Element
- contextmenu: Klick mit der rechten Maustaste auf ein beliebiges Element
- mouseover: Cursor wird auf ein Element bewegt
- mouseout: Cursor wird von einem Element entfernt
- mousedown: Maustaste wird gedrückt
- mouseup: Maustaste wird losgelassen
- mousemove: Maus wird bewegt
- dblclick: Doppelklick auf das Element
- submit: Formular wird abgeschickt
- focus: Anwender setzt den Fokus auf ein Element
- keydown: Drücken einer Taste auf der Tastatur
- keyup: Loslassen einer Taste auf der Tastatur
- DOMContentLoaded: Wird ausgelöst, wenn der HTML-Inhalt der Seite geladen ist
- transitioned: Ende einer CSS-Animation
Auf Events reagieren
Wenn wir in JavaScript auf ein bestimmtes Event reagieren wollen, müssen wir einen Eventhandler registrieren.
Beispiel 1 - Event Handler Attribut im HTML
Durch das onclick Attribut wird ein Eventhandler hinzugefügt.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input value="Hier klicken!" onclick="alert('Du hast den Button geklickt!')" type="button">
</body>
</html>
Beispiel 2
Hier wird bei onclick die Funktion "verdoppelung()" aufgerufen.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input value="Hier klicken!" onclick="verdopplung()" type="button">
<script>
function verdopplung() {
let zahl = prompt("Gib eine Zahl ein:");
zahl *= 2;
alert("Doppelter Wert: " + zahl);
}
</script>
</body>
</html
Beispiel 3
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> Absatz 1</p>
<p id="absatz">Absatz 2</p>
<p>Absatz 3</p>
<script>
// Name des entsprechenden HTML-Elements nennen
// nach dem Punkt folgt Art des Events mit vorangestelltem Präfix "on"
// diesem Ausdruck dann eine Funktion zuweisen
absatz.onmouseover = function() {
alert("Hier befindet sich Absatz 2..");
}
// -------------------------------------
// Variante 2
function nachricht() {
alert("Hier befindet sich Absatz 2..");
}
absatz.onmouseover = nachricht;
// -------------------------------------
// Variante 3
function nachricht() {
alert("Hier befindet sich Absatz 2..");
}
// Hier wird die Methode '''.addEventListener()''' verwendet.
absatz.addEventListener("mouseover", nachricht);
</script>
</body>
</html>
Beispiel 4 - addEventlistener() Methode
Die Methode benötigt zwei Parameter:
- die Art des Events auf das reagiert werden soll ("click", "mouseover", ...) -> Achtung: hier müsst ihr das "on" weglassen, statt "onclick" -> einfach "click"
- die Callback-Funktion, die aufgerufen werden soll. -> immer ohne () -> statt nachricht1() -> einfach nachricht1;
- Event-Listener können mit .removeEventlistener() wieder entfernt werden
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button type="button" id="btn">Klick mich</button>
<script>
function nachricht1() {
alert("Nachricht 1");
btn.addEventListener("click", nachricht2);
btn.removeEventListener("click", nachricht1);
}
function nachricht2() {
alert("Nachricht 2");
btn.addEventListener("click", nachricht1);
btn.removeEventListener("click", nachricht2);
}
btn.addEventListener("click", nachricht1);
</script>
</body>
</html>
Event Bubbling
Event Handling ist ziemlich einfach, solange es nur ein Element gibt. Jedoch was passiert, wenn mehrere Eventhandler auf mehreren verschachtelten HTML Elementen registriert sind?
Es werden alle Eventhandler aufgerufen, und zwar in aufsteigender Reihenfolge. Zuerst wird der Event-Handler des Elements aufgerufen, dass in der HTML Struktur am tiefsten verschachtelt ist, danach der Handler des übergeordneten Elements und der des nächsten ...
Die Events "bubbeln" von Innen nach Außen.
In unserem unteren Beispiel (siehe Code Snippet unten):
<strong> -> <p> -> <div> -> <body>
Die Grafik soll dieses Verhalten noch verdeutlichen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling</title>
</head>
<body>
<div>
Das ist ein div-Element
<p>
Hier steht ein Text, bei dem ein Teil
<strong>Fett markiert</strong> ist.
</p>
</div>
<script>
function bodyTag() {
alert("Body-Tag");
this.style.backgroundColor = 'green';
}
function divTag() {
alert("Div-Tag");
this.style.backgroundColor = 'yellow';
}
function pTag() {
alert("P-Tag");
this.style.backgroundColor = 'grey';
}
function strongTag() {
alert("strong-Tag");
this.style.backgroundColor = 'lightblue';
}
document.body.onclick = bodyTag;
document.querySelector('div').onclick = divTag;
document.querySelector('p').onclick = pTag;
document.querySelector('strong').onclick = strongTag;
</script>
</body>
</html>
Hilfestellung dazu: https://www.mediaevent.de/javascript/event-handler-default-verhindern.html
b
<body id="bodypoint">
<div>
<p>Absatz 1</p>
<p>
Hier steht ein Text, bei dem ein Teil
<strong>Fett markiert</strong> ist.
</p>
<p>Absatz 3</p>
</div>
<script>
function hintergrund() {
// target = Zielelement auf das in diesem Beispiel geklickt wird
// closest = gibt das Element mit der entsprechenden Bezeichnung
// zurück, das das auslösende Element umfasst
let p = event.target.closest('p');
p.style.backgroundColor = 'green';
}
bodypoint.onclick = hintergrund;
</script>
</body>
Mouse- und Keyboard-Events
- onClick - eigentlicher Mausklick (ist eine Kombination aus onMouseDown und onMouseUp)
- onMouseDown - wenn Maustaste gedrückt wird
- onMouseUp - wenn Maustaste losgelassen wird
Beispiel 1
<body>
<input value="Hier klick" id="btn" type="button">
<script>
function click() {
alert("Click-Event");
}
function mdown() {
alert('Mousedown-Event');
}
function mup() {
alert("Mouseup-Event");
}
btn.onclick = click;
btn.onmousedown = mdown;
btn.onmouseup = mup;
</script>
</body>
Beispiel 2
<body>
<input id="eingabe" type="input">
<script>
function tastatureingabe(e) {
alert("Key: " + e.key + "\nCode: " + e.code);
}
eingabe.onkeypress = tastatureingabe;
</script>
</body>
Das window-Objekt
- Grundlage aller weiteren Objekte in JS, daher auch root-Objekt genannt
- Beispiele: alert-, confirm-,prompt-Befehl
- Der confirm-Befehl gibt ein true oder false zurück
let zahl = prompt("Gib eine Zahl ein");
alert("eingegebene Zahl: " + zahl);
let bestaetigung = confirm(decodeURI("Bestätige die Eingabe"));
if(bestaetigung) {
document.write("Eingabe bestätigt");
} else {
document.write("Eingabe nicht bestätigt");
}
Fenster schließen und neue Fenster öffnen
- Verhalten nicht vorhersehbar da Befehle bei vielen Browsern starken Einschränkungen unterliegen
- Weitere Befehle:
- window.resizeTo()
- window.resizeBy()
- window.moveTo()
- window.moveBy()
<!-- Hauptseite -->
<script>
window.open("stop.html");
</script>
<!-- stop.html -->
<script>
window.alert("Stop");
window.close();
</script>
<!-- Höhe und Breite abfragen -->
<script>
let hoehe = window.innerHeight;
let breite = window.innerWidth;
document.write(hoehe + "px Höhe<br>" + breite + "px Breite");
</script>
Den zeitlichen Ablauf steuern
- Zeitverzögerung durch setTimeout()
Beispiel 1
//HMTL:
<button onclick="start()">Start</button>
//JavaScript:
<script>
function nachricht() {
alert("Button vor 2 Sekunden gedrückt");
}
function start() {
setTimeout(nachricht, 2000);
}
</script>
Beispiel 2
//HMTL:
<button onclick="start()">Start</button>
//JavaScript
<script>
function nachricht() {
alert("Button vor 2 Sekunden gedrückt");
}
function nachricht2() {
alert("Button vor 4 Sekunden gedrückt");
}
function start() {
setTimeout(nachricht, 2000);
setTimeout(nachricht2, 4000);
}
</script>
Beispiel 3
//HTML
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
//JavaScript
<script>
let to;
function f() {
alert("Button vor 5 Sekunden gedrückt");
}
function stop() {
// Mit clearTimeout() kann Timeout unterbrochen werden
clearTimeout(to);
}
function start() {
to = setTimeout(f, 5000);
}
</script>
Beispiel 4
<script>
let i = 1;
function f() {
document.write(i + "<br>");
i++;
}
// setInterval() ähnlich, Programm ruft
// entsprechende Funktion immer wieder
// aufs Neue auf
setInterval(f, 1000);
</script>
Quelle: JavaScript Programmieren für Einsteiger ISBN: 978-3-96645-016-4