Editing JavaScript 1 Fehlerbehandlung

==Fehlerbehandlung==

===Try, Catch===
<u>Ausnahmen für Laufzeitfehler erstellen:</u>


*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:)


<pre>
"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);
}
</pre>

===console.log() is your friend===
*Gibt eine Nachricht auf der Web-Konsole aus.
*ist äußerst hilfreich beim Debugging
*wenn du nicht weißt, welchen Wert eine Variable hat, oder ob/wie sie sich verändert, verwende console.log()!
*Vorteil zu alert: JavaScript Programm kann ohne Pausieren weiterlaufen (beim alert() Befehl stoppt das Programm)


<u>Beispiele für console.log():</u>

<pre>

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}`);
</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===
*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

<pre>
    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>
Quelle: JavaScript
Programmieren für Einsteiger
ISBN: 978-3-96645-016-4
</pre>