# data[].attributes.headline
Ergebnis Abschnitt 1 (andere Lösungen sind ebenfalls möglich!!!)

# data[].attributes.subject
Ergebnis Abschnitt 1 (andere Lösungen sind ebenfalls möglich!!!)

# data[].attributes.headline
Ergebnis Projekt Abschnitt 1 Haushaltsbuch

# data[].attributes.subject
Ergebnis Projekt Abschnitt 1 Haushaltsbuch

# data[].attributes.attachment_link.readable_text
"use strict";



//Eingabedaten holen
let titel_1 = prompt("Geben Sie den Titel ein");
console.log(titel_1);

let typ_1 = prompt("Typ (Einnahme oder Ausgabe)");
console.log(typ_1);

let betrag_1 = prompt("Betrag in Cent"); //Kommastellen werden später thematisiert, sodass zunächst die Eingabe in Cent erfolgen soll.
console.log(betrag_1);

let datum_1 = prompt("Geben Sie das Datum in der Form JJJJ-MM-TT an");
console.log(datum_1);

console.log(titel_1, typ_1, betrag_1, datum_1);

alert("Ich habe am " + datum_1 + betrag_1 + " Cent für " + titel_1 +" ausgegeben");

//Gesamtbilanz (Vorbereitung)
let einnahmen;
let ausgaben;
let bilanz;


# data[].attributes.headline
Ergebnis Projekt Abschnitt 3 Haushaltsbuch

# data[].attributes.subject
Ergebnis Projekt Abschnitt 3 Haushaltsbuch

# data[].attributes.attachment_link.readable_text
"use strict";

let einnahmen = 0;
let ausgaben = 0;
let bilanz = 0;

//Eingabedaten holen
let titel_1 = prompt("Geben Sie den Titel ein");
let typ_1 = prompt("(Einnahme oder Ausgabe)");
let betrag_1 = parseInt(prompt("Betrag in Cent")); //Kommastellen werden später thematisiert, sodass zunächst die Eingabe in Cent erfolgen soll.
let datum_1 = prompt("Datum JJJJ-MM-TT");

console.log(`Titel: ${titel_1}
Typ: ${typ_1}
Betrag: ${betrag_1} ct
Datum: ${datum_1}`);

if (typ_1 == "Einnahme") {
    einnahmen = einnahmen + betrag_1;
    bilanz = bilanz + betrag_1; 
} else if (typ_1 == "Ausgabe"){ 
    ausgaben = ausgaben + betrag_1;
    bilanz = bilanz - betrag_1;
} else {
    console.log(`Der Typ ${typ_1} ist nicht bekannt.`)
}

let titel_2 = prompt("Geben Sie den Titel ein");
let typ_2 = prompt("Einnahme oder Ausgabe");
let betrag_2 = parseInt(prompt("Betrag in Cent"));
let datum_2 = prompt("Datum JJJJ-MM-TT");

console.log(`Titel: ${titel_2}
Typ: ${typ_2}
Betrag: ${betrag_2} ct
Datum: ${datum_2}`);

if (typ_2 == "Einnahme") {
    einnahmen = einnahmen + betrag_2;
    bilanz = bilanz + betrag_2; 
} else if (typ_2 == "Ausgabe") {
    ausgaben = ausgaben + betrag_2;
    bilanz = bilanz - betrag_2;
} else {
    console.log(`Der Typ ${typ_2} ist nicht bekannt.`)
}


let titel_3 = prompt("Geben Sie den Titel ein");
let typ_3 = prompt("Einnahme oder Ausgabe");
let betrag_3 = parseInt(prompt("Betrag in Cent"));
let datum_3 = prompt("Datum JJJJ-MM-TT");

console.log(`Titel: ${titel_3}
Typ: ${typ_3}
Betrag: ${betrag_3} ct
Datum: ${datum_3}`);

if (typ_3 == "Einnahme") {
    einnahmen = einnahmen + betrag_3;
    bilanz = bilanz + betrag_3; 
} else if (typ_3 == "Ausgabe") {
    ausgaben = ausgaben + betrag_3;
    bilanz = bilanz - betrag_3;
} else {
    console.log(`Der Typ ${typ_3} ist nicht bekannt.`)
}



//Gesamtbilanz


console.log(`Bilanz: ${bilanz}`);

let positiv = bilanz >= 0;
console.log(
`Ausgaben: ${ausgaben} ct
Einnahmen: ${einnahmen} ct
Bilanz: ${bilanz} ct
Bilanz ist positiv: ${positiv}`);

# data[].attributes.headline
Ergebnis Projekt Abschnitt 2 Haushaltsbuch

# data[].attributes.subject
Ergebnis Projekt Abschnitt 2 Haushaltsbuch

# data[].attributes.attachment_link.readable_text
"use strict";


//Eingabedaten holen

let titel_1 = prompt("Geben Sie den Titel ein");
console.log(`Titel: ${titel_1}`);

let typ_1 = prompt("(Einnahme oder Ausgabe)");
console.log(`Typ: ${typ_1}`);

let betrag_1 = parseInt(prompt("Betrag in Cent")); //Kommastellen werden später thematisiert, sodass zunächst die Eingabe in Cent erfolgen soll.
console.log(`Betrag: ${betrag_1} ct`);

let datum_1 = prompt("Datum JJJJ-MM-TT");
console.log(`Datum: ${datum_1}`);



let titel_2 = prompt("Geben Sie den Titel ein");
console.log(`Titel: ${titel_2}`);

let typ_2 = prompt("Einnahme oder Ausgabe");
console.log(`Typ: ${typ_2}`);

let betrag_2 = parseInt(prompt("Betrag in Cent"));
console.log(`Betrag: ${betrag_2} ct`);

let datum_2 = prompt("Datum JJJJ-MM-TT");
console.log(`Datum: ${datum_2}`);


//Gesamtbilanz
let einnahmen;
let ausgaben;
let bilanz = betrag_1 + betrag_2;
console.log(`Bilanz: ${bilanz}`);

let positiv = bilanz >= 0;
console.log(`Die Bilanz ist positiv: ${positiv}`); 


//Aufgaben zum Wiederholen

# data[].attributes.headline
Funktionen mit Parametern und Default-Werten

# data[].attributes.subject
Funktionen mit Parametern und Default-Werten

# data[].attributes.attachment_link.readable_text
"use strict";

const haushaltsbuch = {
    gesamtbilanz: {
        einnahmen: 0,
        ausgaben: 0,
        bilanz: 0
    },
    neuer_eintrag: {
        titel: null,
        typ: null,
        betrag: null,
        datum:null
    },
    eintrag_erfassen() {
        this.neuer_eintrag.titel= prompt("Geben Sie den Titel ein");
        this.neuer_eintrag.typ=  prompt("(Einnahme oder Ausgabe)");
        this.neuer_eintrag.betrag= parseInt(prompt("Betrag in Cent"));
        this.neuer_eintrag.datum=  prompt("Datum JJJJ-MM-TT");
    },
    eintrag_ausgeben() {
       console.log(`Titel: ${this.neuer_eintrag.titel}
Typ: ${this.neuer_eintrag.typ}
Betrag: ${this.neuer_eintrag.betrag} ct
Datum: ${this.neuer_eintrag.datum}`);
    },
    eintrag_mit_gesamtbilanz_verrechnen () {
        switch(this.neuer_eintrag.typ) {
            case "Einnahme":
            case "einnahme":
            case "einname":
            case "rinnahmq":    
                this.gesamtbilanz.einnahmen +=  this.neuer_eintrag.betrag;
                this.gesamtbilanz.bilanz +=  this.neuer_eintrag.betrag;
                break;
            case "Ausgabe":
            case "ausgabe":
            case "ausgahbe":
                this.gesamtbilanz.ausgaben += this.neuer_eintrag.betrag;
                this.gesamtbilanz.bilanz -= this.neuer_eintrag.betrag;
                break;
            default:
                alert(`Der Typ ${this.neuer_eintrag.typ} ist nicht bekannt.`);
                console.log(`Der Typ ${this.neuer_eintrag.typ} ist nicht bekannt.`);
                break;
        }
    },
    gesamtbilanz_ausgeben (){
    console.log(`Einnahmen: ${this.gesamtbilanz.einnahmen} ct
Ausgaben: ${this.gesamtbilanz.ausgaben} ct
Bilanz: ${this.gesamtbilanz.bilanz} ct
Bilanz ist positiv: ${this.gesamtbilanz.bilanz >= 0}`
    );   
    },
    eintrag_hinzufuegen() {
    this.eintrag_erfassen();
    this.eintrag_ausgeben();
    this.eintrag_mit_gesamtbilanz_verrechnen();
    this.gesamtbilanz_ausgeben();
    }
};

haushaltsbuch.eintrag_hinzufuegen();
haushaltsbuch.eintrag_hinzufuegen();


# data[].attributes.attachment_link.readable_text
"use strict";

const haushaltsbuch = {
    gesamtbilanz: {
        einnahmen: 0,
        ausgaben: 0,
        bilanz: 0
    },
    eintraege:[],
    
   /* Zwischenschritt
    eintrag_erfassen() {
        let eintrag= {
            titel:prompt("Geben Sie den Titel ein"),
            typ:prompt("(Einnahme oder Ausgabe)"),
            betrag:parseInt(prompt("Betrag in Cent")),
            datum:prompt("Datum JJJJ-MM-TT")
        };
        this.eintraege.push(eintrag); */

    eintrag_erfassen() {
        this.eintraege.push({
            titel:prompt("Geben Sie den Titel ein"),
            typ:prompt("(Einnahme oder Ausgabe)"),
            betrag:parseInt(prompt("Betrag in Cent")),
            datum:prompt("Datum JJJJ-MM-TT")
        });
    },
/*    eintrag_ausgeben() {
       console.log(`Titel: ${this.neuer_eintrag.titel}
Typ: ${this.neuer_eintrag.typ}
Betrag: ${this.neuer_eintrag.betrag} ct
Datum: ${this.neuer_eintrag.datum}`);
    },
    eintrag_mit_gesamtbilanz_verrechnen () {
        switch(this.neuer_eintrag.typ) {
            case "Einnahme":
                this.gesamtbilanz.einnahmen +=  this.neuer_eintrag.betrag;
                this.gesamtbilanz.bilanz +=  this.neuer_eintrag.betrag;
                break;
            case "Ausgabe":
                this.gesamtbilanz.ausgaben += this.neuer_eintrag.betrag;
                this.gesamtbilanz.bilanz -= this.neuer_eintrag.betrag;
                break;
            default:
                console.log(`Der Typ ${this.neuer_eintrag.typ} ist nicht bekannt.`);
                break;
        }
    },
    gesamtbilanz_ausgeben (){
    console.log(`Einnahmen: ${this.gesamtbilanz.einnahmen} ct
Ausgaben: ${this.gesamtbilanz.ausgaben} ct
Bilanz: ${this.gesamtbilanz.bilanz} ct
Bilanz ist positiv: ${this.gesamtbilanz.bilanz >= 0}`
    );   
    },
    */
    eintrag_hinzufuegen() {
    this.eintrag_erfassen();
    //this.eintrag_ausgeben();
    //this.eintrag_mit_gesamtbilanz_verrechnen();
   // this.gesamtbilanz_ausgeben();
    }
};

haushaltsbuch.eintrag_hinzufuegen();
haushaltsbuch.eintrag_hinzufuegen();
haushaltsbuch.eintrag_hinzufuegen();
console.log(haushaltsbuch);

# data[].attributes.body
Die Datei ist auch als Aufgabe über Iserv abrufbar!

# data[].attributes.attachment_link.readable_text
"use strict"


// Beispiel für eine sich wiederholende Abfrage      FOR-Schleife

// let zahl = 10;
// //let zahl = parseInt(prompt("Geben Sie bitte eine Zahl ein"));

// let eingabe = parseInt(prompt("Erraten Sie die Zahl!"));
// console.log(eingabe);
// for (let i=0; zahl != eingabe; i++){
//     eingabe = prompt("Leider falsch! Bitte versuchen Sie es erneut! Welche Zahl wird gesucht?"); 
//     console.log(eingabe);
// };
// alert("Super!");




// Beispiel für eine Abfrage und gleichzeitige Erfassung in ein Array    WHILE-Schleife

// let warenkorb = [];


// let eintrag = confirm("Möchten Sie einen Artikel in Ihren Warenkorb legen?");

// while(eintrag == true){
// function einkauf (){
// warenkorb.push(prompt("Welches Obst möchten Sie kaufen?"));
// };
// einkauf();
// eintrag =confirm("Möchten Sie weiter einkaufen?");}

// console.log(warenkorb);


//Beispiel für die Ausgabe aller Array-Elemente 

// let personen = ["Peter","Anna", "Marc","Maximilian","Mia","Jule","Tina","Susanne","Yvonne","Esra"];


// for (let i = 0; i<personen.length; i++){
// console.log(`Hallo ${personen[i]}! Herzlich Willkommen in der Wifa!`);

// };

//Erweiterung des Beispiels mit verschachteltem Array, sodass die jeweiligen "Eigenschaften" der Personen ebenfalls ausgegeben werden.

// let personen_eigenschaften=[
//     ["Name: Peter"/* j an der Stelle 0 */,"Alter: 48"/*j an der Stelle 1*/,"Wohnort: Solingen"], // i an der Stelle 0
//     ["Name: Anna","Alter: 26","Wohnort: Wuppertal"], // i an der Stelle 1
//     ["Name: Marc","Alter: 41","Wohnort: Remscheid"], // i an der Stelle 2
//     ["Name: Maximilian","Alter: 39","Wohnort: Oberhausen"],
//     ["Name: Mia","Alter: 29","Wohnort: Köln"],
//     ["Name: Jule","Alter: 40","Wohnort: Essen"],
//     ["Name: Tina","Alter: 31","Wohnort: Bochum"]
// ];
//console.log(personen_eigenschaften);

// for (let i = 0; i<personen_eigenschaften.length;i++){
//     console.log(`Position ${i + 1} im Array`);
//     for (let j = 0; j<personen_eigenschaften[i].length;j++){
//         console.log(personen_eigenschaften[i][j]);
//     }
// };

// personen_eigenschaften.push(["Name: Ben","Alter: 21","Wohnort: Berlin"]);
// //console.log(personen_eigenschaften);




// personen_eigenschaften[2].push("Beruf: Kaufmann");
// console.log(personen_eigenschaften);





// personen_eigenschaften.forEach(eintrag =>                            FOR-EACH
//     console.log(eintrag)
// );


# data[].attributes.headline
Bitte tragen Sie sich hinter die entsprechenden Themen ein:

# data[].attributes.subject
Bitte tragen Sie sich hinter die entsprechenden Themen ein:

# data[].attributes.body
Kleingruppen bis 3 Personen je Thema. Bitte ergänzen Sie den theoretischen Teil um ein geeignetes Beispiel, Video oder andere sinnvolle Lernhilfen. Ziel sollte sein, dass mit Hilfe der erstellten Unterlagen das Themengebiet vollständig in Eigenarbeit erfasst werden kann.

Grundlagen von Events und Eventlistener in JavaScript: Bitte alle recherchieren, keine direkte Bearbeitung notwendig. Die Erarbeitung dient jedoch zum besseren Verständnis der Einzelthemen!

(https://www.mediaevent.de/javascript/events.html)

Maus-Events:

(https://www.heise.de/developer/artikel/Mouse-Events-und-Touch-Events-aber-einfacher-die-Pointer-Events-API-2648006.html)

Captering und Bubbeling:

(https://www.mediaevent.de/javascript/event-listener-bubble-capture.html)

Tastatur-Events:  Fabienne, Vanessa, Magdalena

(https://www.mediaevent.de/javascript/Extras-Javascript-Keycodes.html)

Formular-Events:

(https://www.homepage-webhilfe.de/JavaScript/events.php)

Veränderungs-Events: Anastasia, Ludmilla, Nils

(https://www.mediaevent.de/javascript/onchange.html)

Window-Events: Hofmann, Nölling, Vieregge

(https://www.mediaevent.de/javascript/onload.html)

Events auslösen: Bitte alle recherchieren, keine direkte Bearbeitung notwendig. Die Erarbeitung dient jedoch zum besseren Verständnis der Einzelthemen!

Eine kleine Auswahl an Infomaterial/ bzw. geeignete Seiten stelle ich in den nächsten Tagen hier ein. Nutzen Sie aber das Internet für Ihre Recherche!

# data[].attributes.attachment_link.readable_text
Events reisen vom Root zum Element

Aus der Sicht des DOM reist ein Ereignis in der Capture-Phase vom ROOT des Dokuments zu seinem Ziel und benachrichtigt auf dem Weg nach unten jedes Element. Liegt für die betroffenen Elemente auf dem Weg zum getriggerten Element kein Event Handler an, überhören die Elemente das Event.

Ein Event beginnt nicht auf dem getriggerten Element
sondern am ROOT
und reist im DOM-Baum nach unten.

Wenn es die Art des Ereignisses erlaubt, steigt das Ereignis in einer Bubbling-Phase durch den Baum zurück nach oben und könnte in der Bubbling-Phase ebenfalls jedes Element auf dem Weg nach oben triggern.

                               capture  -----+
                                             |
button.addEventListener ("click", alertMe, true);
button.addEventListener ("click", alertMe, false);
                                              ^
                                              |
                                bubble   -----+

Der dritte Parameter von addEventListener - useCapture - legt fest, in welcher Phase ein Event einen Event Listener aktiviert.

Capture

true Zuerst die Event Handler von Vorfahren aufrufen, dann erst den Event Handler des Elements

Bubble

false (default) Zuerst den Event Handler des Elements aufrufen, erst dann die Event Handler von Vorfahren

<body>
    <div id="section1">
        <div id="buttons">
            <div id="oneButton">
                <button id="b1">Button 1</button>
            </div>
            <div id="twoButton">
                <button id="b2">Button 2</button>
                <button id="b3">Button 3</button>
            </div>
        </div>
    </div>
    <div id="section2"> ... </div>
</body>

Wenn ein Skript Ereignisse auf verschachtelten HTML-/XML-Elementen registriert, die auf dasselbe Ereigniss warten, führt der Browser beim Bubbling die innerste Registrierung zuerst aus und arbeitet sich dann nach oben vor. Beim Capturing behandelt der Browser das Ereignis auf dem Weg "nach unten".

Wir ziehen heute bubble (false) vor. Für moderne Skripte macht es kaum Sinn, ein Event von mehreren Event Handlern behandeln zu lassen. Wenn wir auf ein Element klicken, erwarten wir eine Aktion. Darum wird jedes Event in einem eigenen Skript behandelt.

Also können wir den dritten Parameter meist fallen lassen - bubble (false) ist der Default-Wert - und der dritte Parameter ist optional.

Nach oben

Wenn der Event Listener jedoch auch auf den Elementen über dem getriggerten Element liegt - so z.B. auf den Elemente dieser verschachtelten HTML-Liste -, ist capture angebracht, um das Ereignis an der korrekten Stelle zu empfangen.

Bubble: Bei einem Klick auf einen Text der ersten Liste reagiert das Parent-Element,
Capture: Bei einem Klick auf ein Element der zweiten Liste nur das Element selber. Darum zeigt die dunkle Konsole über der Liste bei einem Klick auf Element 9 den Text Element 5, ein Klick auf die bubble:true-Liste den Text Element 9.

stopPropagation

Es gibt aber Situationen, in denen die Erkennung eines Events schon in der Capture-Phase eine wichtige Rolle spielt. Auf dem Weg nach unten kann stopPropagation das Event unterbinden, so dass es nicht bis zum Event Target vordringt.

let b1 = document.querySelector("#b1");
b1.addEventListener ("click", function (){
   b1.classList.toggle ("red");
   }
);

let stopit = document.querySelector("#buttons");
stopit.addEventListener("click", function (eve) {
   eve.stopPropagation ();
}, true)

Die Weiterleitung des Events wird unterbunden, das Event kommt niemals bei seinem eigentlichen Event Target an. Zu einer Bubble-Phase kommt es auch nicht mehr. Finito.

Oft werden sowohl bubble als auch capture ausgeschaltet, damit es nicht zu unvorhergesehenen Aktionen kommt. Dafür gibt es das stopPropagation() sowohl für die modernen Browser als auch für IE.

DOM: Event stopPropagation()

Stopt den Ereignis-Fluss. Kann entweder in der Capture- oder in der Bubble-Phase benutzt werden.

IE: stopPropagation()

In IE ist stopPropagation() keine Methode, sondern eine Boole'sche Eigenschaft, die auf true gesetzt wird, damit das Ereignis nicht aufsteigt (bubbling)

Auch wenn wir bubble in den meisten Fällen gern abschalten würden, kann das zu unvorhergesehenen Fehlern führen. Vielleicht hängt ein Plugin vom Event ab ...?

Mehr zu Event Handling
Externe Quellen

# data[].attributes.attachment_link.title
Javascript EventListener: capture oder bubble?

# data[].attributes.attachment_link.description
Aus der Sicht des DOM reist ein Ereignis in der Capture-Phase vom ROOT des Dokuments zu seinem Ziel und benachrichtigt auf dem Weg nach unten jedes Element. Liegt für die betroffenen Elemente auf dem Weg zum getriggerten Element kein Event Handler an, überhören die Elemente das Event.

# data[].attributes.body
Main.js je Abschnitt enthalten

# data[].attributes.attachment_link.title
Bubbling und Capturing_Sophie Janssen, Michelle Vuong