Difference between revisions of "JavaScript 1 Fehlerbehandlung"

From Coders.Bay Wiki
Jump to navigation Jump to search
 
(43 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==Fehlerbehandlung==
==Fehlerbehandlung==


===Der Debugger ist dein Freund===
===The debugger is your friend===
Alle modernen Browser stellen ausgezeichnete Entwickler Tools zu Verfügung.
Alle modernen Browser stellen ausgezeichnete Entwickler Tools zu Verfügung.
*Öffnen der Entwickler Tools (in den gängigen Browsern):
*Öffnen der Entwickler Tools (in den gängigen Browsern):
**Right-Click und auf '''Untersuchen''' klicken, Keyboard Shortcut: '''STRG+Shift+I'''
**Rechts-Click und auf '''Untersuchen''' klicken, Tastaturkürzel: '''STRG + Shift + I'''
 
[[File:Screenshot-debugger-chrome.png|800px]]
*Hier ein gutes Video zum JavaScript Debugging in Chrome
**Link: https://www.youtube.com/watch?v=H0XScE08hy8


===Try, Catch===
===Try, Catch===
Line 13: Line 15:
*Im '''try-Block''' versucht das Programm die gewünschte Aktion auszuführen
*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
*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:)
*Bei Laufzeitfehler, erzeugt JavaScript automatisch ein "Error" Objekt, das Details zum auftretenden Problem enthält (siehe 2. catch-Block im Beispiel unten:)




Line 46: Line 48:
*Gibt eine Nachricht auf der Web-Konsole aus.
*Gibt eine Nachricht auf der Web-Konsole aus.
*ist äußerst hilfreich beim Debugging
*ist äußerst hilfreich beim Debugging
*Vorteil zu alert: JavaScript Programm kann ohne Pausieren weiterlaufen (beim alert() Befehl stoppt das Programm)
*Vorteil zu alert: JavaScript Programm kann ohne Pausieren weiterlaufen (beim '''alert()''' Befehl stoppt das Programm)




Line 53: Line 55:
<pre>
<pre>


let test = "Hallo";
let testString = "Hallo";
console.log(test);
console.log(testString);
 
let obst = ["Apfel", "Banane", "Kiwi"];
console.log(obst);
console.log(obst[1]);
 
let zahl = 10;
 
console.log(`Meine Lieblingszahl ist ${zahl}`);
</pre>
 
==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====
<pre>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input value="Hier klicken!" onclick="alert('Du hast den Button geklickt!')" type="button">
    </body>
</html>
</pre>
 
====Beispiel 2====
<pre>
<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
</pre>
 
====Beispiel 3====
<pre>
<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>
</pre>
 
====Beispiel 4====
<pre>
<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>
</pre>
 
====Beispiel 5====
<pre>
<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>
</pre>
'''Hilfestellung dazu:''' https://www.mediaevent.de/javascript/event-handler-default-verhindern.html
b
<pre>
<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>
</pre>
 
 
===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====
<pre>
<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>
</pre>
 
====Beispiel 2====
<pre>
<body>
    <input id="eingabe" type="input">
    <script>
        function tastatureingabe(e) {
            alert("Key: " + e.key + "\nCode: " + e.code);
        }
        eingabe.onkeypress = tastatureingabe;
    </script>
</body>
</pre>
 


===Das window-Objekt===
let fruits = ["Apfel", "Banane", "Kiwi"];
*Grundlage aller weiteren Objekte in JS, daher auch root-Objekt genannt
console.log(fruits);
*Beispiele: alert-, confirm-,prompt-Befehl
console.log(fruits[1]);
*Der confirm-Befehl gibt ein true oder false zurück


<pre>
let number = 10;
    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");
    }
</pre>
 
 
====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()
 
<pre>
<!-- 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>
</pre>
 
 
====Den zeitlichen Ablauf steuern====
*Zeitverzögerung durch '''setTimeout()'''
 
====Beispiel 1====
<pre>
//HMTL:
<button onclick="start()">Start</button>
 
//JavaScript:
<script>
    function nachricht() {
        alert("Button vor 2 Sekunden gedrückt");
    }
    function start() {
        setTimeout(nachricht, 2000);
    }
</script>
</pre>
 
====Beispiel 2====
<pre>
//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>
</pre>
 
====Beispiel 3====
<pre>
//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>
</pre>
 
====Beispiel 4====
<pre>
<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>
</pre>


<blockquote>
console.log(`Meine Lieblingszahl ist ${number}`);
Quelle: JavaScript
Programmieren für Einsteiger
ISBN: 978-3-96645-016-4
</pre>
</pre>

Latest revision as of 10:50, 16 May 2022

Fehlerbehandlung[edit]

The debugger is your friend[edit]

Alle modernen Browser stellen ausgezeichnete Entwickler Tools zu Verfügung.

  • Öffnen der Entwickler Tools (in den gängigen Browsern):
    • Rechts-Click und auf Untersuchen klicken, Tastaturkürzel: STRG + Shift + I

Screenshot-debugger-chrome.png

Try, Catch[edit]

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[edit]

  • 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 testString = "Hallo";
console.log(testString);

let fruits = ["Apfel", "Banane", "Kiwi"];
console.log(fruits);
console.log(fruits[1]);

let number = 10;

console.log(`Meine Lieblingszahl ist ${number}`);
Retrieved from "http://wiki.streampy.at/index.php?title=JavaScript_1_Fehlerbehandlung&oldid=1728"