Übungen

01

Console.log

In der Konsole eine Meldung anzeigen, die lautet: "Hallo + dein Name". Der Name muss in einer Variablen gespeichert werden. Konsole.log verwenden:

console.log("Deine Nachricht hier" + Variable)

02

Mathematische Operationen

Deklarieren Sie zwei Variablen, Alter und AnzahlderPassionen.

Führen Sie anschließend die folgenden Operationen durch:

• Addition: Addieren Sie 5 Jahre zu Ihrem aktuellen Alter und speichern Sie das Ergebnis in einer neuen Variablen newAge.
• Subtraktion: Subtrahieren Sie AnzahlderPassionen von newAge und speichern Sie das Ergebnis in einer neuen Variablen diffPassionsAge.

Zeigen Sie das Ganze in einem console.log an.

03

Bedingungen

Überprüfe, ob du volljährig bist, indem du die Variable age und eine Bedingung if / else benutzt. Ändern Sie anschließend die Variable age, um alle Möglichkeiten zu testen.

 //wenn mein Alter größer als oder gleich 18 ist
if(meineVariable >= x) {
    // Eine Meldung anzeigen, die besagt: "Schön, dass Sie volljährig sind!"
} else {
    // eine Meldung anzeigen, die besagt: "Oh no, sorry :/ !"
}

04

Inhalte in HTML einfügen

1. Erstellen Sie in Ihrem HTML-Dokument ein div mit einer bestimmten ID. In Javascript werden Sie eine Variable erstellen, die Text enthält.
2. Suchen Sie mit Hilfe von document.getElementById("ton_id"); nach Ihrem div.
3. Verwenden Sie innerHTML, um Ihre Nachricht anzuzeigen, die in der Variablen innerhalb Ihres divs gespeichert ist.

05

Fügen Sie beim Klick Inhalte hinzu

Wenn Sie sich für das Ereignis: addEventListener('click', function{}) interessieren, fügen Sie beim Klick auf eine Schaltfläche Inhalte in HTML ein.

1. Erstellen Sie die Schaltfläche in HTML und holen Sie sie in Ihre Javascript-Datei --> getElementById
2. Fügen Sie dem Klick auf ihn ein Ereignis hinzu --> addEventListener
3. Innerhalb der Funktion werden Sie die Schritte erstellen, um zu erhalten

let myButton = //stock of my button;
meinButton.addEventListener('click', function() {
    // Was soll ausgeführt werden, wenn Sie auf die Schaltfläche klicken?
    // Schreiben Sie Schritt für Schritt auf, was Sie wollen:
    // 1. Test mit console.log(), um zu sehen, ob der Klick erkannt wird, sobald er bestätigt wurde
    // 2. Deklarieren Sie eine Variable mit einer Nachricht
    // 3. Fügen Sie den Inhalt der Nachricht in HTML ein
    // Schritt 3 ist identisch mit Übung 04, nur wird diesmal der Inhalt beim Klick auf die Schaltfläche hinzugefügt und nicht beim Laden der Seite
});

06

Den Inhalt eines Inputs abrufen und in HTML einfügen.

1. Fügen Sie ein Formular mit einem Input vom Typ text und einem Button hinzu (wo Sie ausnahmsweise den unten stehenden Code kopieren).
2. In Javascript erstellen Sie zunächst eine Funktion, die den Klick auf den Button erkennt.
3. Dann speichern Sie Ihr HTML-Element input in einer Variablen.
4. Sie extrahieren den Wert des Inputs mithilfe von: meinInput.value.
5. Sobald Sie den Inhalt von input gespeichert haben, zeigen Sie ihn in einer console.log() an, um zu überprüfen, ob die Daten korrekt extrahiert wurden.
6. Zeigen Sie den Inhalt dann im div an.

<div id="myForm">
    <label for="myInput">Geben Sie Text ein:</label>
    <input type="text" id="myInput">
    <button>Submit</button>
</div>
<div id="output"></div>

myElement.innerHTML = message; // Ersetzt den kompletten Inhalt

 monElement.innerHTML += message; // Fügt die Nachricht oder die Daten nach dem bereits vorhandenen Inhalt hinzu

07

Jeden Eintrag in einer Liste hinzufügen

Anstatt nur den Textinhalt nacheinander hinzuzufügen, werden wir bei jedem Klick auf die Schaltfläche einen weiteren Eintrag zu einer Liste hinzufügen. Dazu :

1. Wir nehmen Übung #06 wieder auf und fügen HTML in die .innerHTML-Einfügung ein. Das heißt, das innerHTML wird nicht nur unsere Variable hinzufügen, sondern auch einen Tag um unsere Variable herum hinzufügen. (siehe Beispiel unten).
2. Wir müssen auch daran denken, unsere <div id="output"></div> in eine Liste <ul> umzuwandeln, da die Liste sonst semantisch ungültig ist.

meinElement.innerHTML = '<li>' + Nachricht + '</li>';