Difference between revisions of "JavaScript 1 Fehlerbehandlung"
Jump to navigation
Jump to search
Line 184: | Line 184: | ||
# die Art des Events auf das reagiert werden soll ("click", "mouseover", ...) -> '''Achtung:''' hier müsst ihr das "on" weglassen, statt "onclick" -> einfach "click" | # 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'''; | # die Callback-Funktion, die aufgerufen werden soll. -> immer ohne () -> statt '''nachricht1()''' -> einfach '''nachricht1'''; | ||
* Event-Listener können mit '''.removeEventlistener()''' wieder entfernt werden | |||
<pre> | <pre> |
Revision as of 11:45, 27 April 2022
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>
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