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 HMTL
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
<!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';
console.log(this);
}
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