JavaScript 1 Fehlerbehandlung
Fehlerbehandlung
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 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
- JS besitzt zahlreiche vorgefertigte Funktionen
Browser-Object-Modell BOM
- Dient dazu, die grundlegenden Eigenschaften des Browsers zu steuern
- wid auch als window-Objekt bezeichnet
- Verfügt über grundlegende Eigenschaften des Fensters,wie Fenstergröße festlegen
- 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
Beispiel 1
<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
<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 ein Event-Listener verwendet // In diesem Beispiel bringt er keinen Vorteil absatz.addEventListener("mouseover", nachricht); </script> </body> </html>
Beispiel 4
<php> <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> </php>
Beispiel 5
<html> <head> <meta charset="UTF-8"> <style> body { padding: 25px; } </style> </head> <body id="b"> <div id="d"> Das ist ein div-Element <p id="p"> Hier steht ein Text, bei dem ein Teil <strong>Fett markiert</strong> ist. </p> </div> <script> function bodyTag() { alert("Body-Tag"); // das Event wirkt sich nicht mehr auf // die übergeordneten Bereiche aus // mit event.stopPropagation() this.style.backgroundColor = 'green'; event.stopPropagation(); } b.onclick = bodyTag; function divTag() { alert("Div-Tag"); this.style.backgroundColor = 'yellow'; event.stopPropagation(); } d.onclick = divTag; function pTag() { alert("P-Tag"); this.style.backgroundColor = 'grey'; event.stopPropagation(); } p.onclick = pTag; function strongTag() { alert("strong-Tag"); this.style.backgroundColor = 'lightblue'; event.stopPropagation(); } p.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